diff --git a/assets/css/oscar.css b/assets/css/oscar.css
index c69251f..daa464b 100644
--- a/assets/css/oscar.css
+++ b/assets/css/oscar.css
@@ -18,9 +18,9 @@
* Update the foundational and global aspects of the page.
*/
-/* Prevent scroll on narrow devices */
-html,
-body {
+ /* Prevent scroll on narrow devices */
+ html,
+ body {
overflow-x: hidden;
}
@@ -43,7 +43,7 @@ h1, h2, h3, h4, h5, h6 {
* regular page content.
*/
-.wrap {
+ .wrap {
position: relative;
width: 100%;
}
@@ -55,22 +55,18 @@ h1, h2, h3, h4, h5, h6 {
* Center the page content.
*/
- .nav.container{
- padding-top: 10px;
- }
-
.container {
- max-width: 28rem;
+ max-width: 28rem;
}
@media (min-width: 38em) {
.container {
max-width: 32rem;
- }
+}
}
@media (min-width: 56em) {
.container {
max-width: 38rem;
- }
+}
}
@@ -80,7 +76,7 @@ h1, h2, h3, h4, h5, h6 {
* Super small header above the content for site name and short description.
*/
-.masthead {
+ .masthead {
padding-top: 1rem;
padding-bottom: 1rem;
margin-bottom: 3rem;
@@ -103,23 +99,68 @@ h1, h2, h3, h4, h5, h6 {
}
@media (max-width: 48em) {
- .masthead-title {
- text-align: center;
- }
- .masthead-title small {
+ .masthead-title {
+ text-align: center;
+ }
+ .nav{
+ text-align: center;
+ }
+ .masthead-title small {
+ display: none;
+ }
+}
+.nav{
display: none;
- }
}
+// .masthead:hover{
+// display: inherit;
+// padding-bottom: 1rem;
+// animation: masterheadGrow .5s;
+// }
+
+// .masthead:hover .nav{
+// animation: showNav .5s;
+// }
+// @keyframes showNav{
+// 0%{
+// background: red;
+// display: none;
+// }
+// 90%{
+// background: blue;
+// display: inherit;
+// }
+// 100%{
+// background: blue;
+// display: inherit;
+// }
+// }
+// @keyframes masterheadGrow{
+// 0%{
+// padding-bottom: 1rem;
+// }
+// 100%{
+// padding-bottom: 3rem;
+// }
+// }
/*******Navigation*********/
+.nav.container{
+ padding-top: 10px;
+}
+
+.nav.hidden{
+ display: none;
+}
+
a.nav-item{
text-decoration: none;
}
.nav-item{
text-decoration: none;
- color: #848484;
+ color: #A6A6A6;
margin-right: 1em;
}
@@ -135,8 +176,8 @@ a.nav-item{
* page is wrapped in `.page` and is only used on the page layout.
*/
-.page,
-.post {
+ .page,
+ .post {
margin-bottom: 4em;
}
@@ -231,7 +272,7 @@ a.read-more:hover{
* there are no more previous or next posts to show.
*/
-.pagination {
+ .pagination {
overflow: hidden; /* clearfix */
margin-left: -1rem;
margin-right: -1rem;
@@ -258,183 +299,24 @@ a.pagination-item:hover {
@media (min-width: 30em) {
.pagination {
margin: 3rem 0;
- }
- .pagination-item {
+}
+.pagination-item {
float: left;
width: 50%;
- }
- .pagination-item:first-child {
+}
+.pagination-item:first-child {
margin-bottom: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
- }
- .pagination-item:last-child {
+}
+.pagination-item:last-child {
margin-left: -1px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
- }
}
-
-
-/*
- * Reverse layout
- *
- * Flip the orientation of the page by placing the `.sidebar` and sidebar toggle
- * on the right side.
- */
-
-.layout-reverse .sidebar {
- left: auto;
- right: -14rem;
-}
-.layout-reverse .sidebar-toggle {
- left: auto;
- right: 1rem;
-}
-
-.layout-reverse #sidebar-checkbox:checked ~ .sidebar,
-.layout-reverse #sidebar-checkbox:checked ~ .wrap,
-.layout-reverse #sidebar-checkbox:checked ~ .sidebar-toggle {
- -webkit-transform: translateX(-14rem);
- -ms-transform: translateX(-14rem);
- transform: translateX(-14rem);
-}
-
-
-/*
- * Themes
- *
- * Apply custom color schemes by adding the appropriate class to the `body`.
- * Based on colors from Base16: http://chriskempson.github.io/base16/#default.
- */
-
-/* Red */
-.theme-base-08 .sidebar,
-.theme-base-08 .sidebar-toggle:active,
-.theme-base-08 #sidebar-checkbox:checked ~ .sidebar-toggle {
- background-color: #ac4142;
-}
-.theme-base-08 .container a,
-.theme-base-08 .sidebar-toggle,
-.theme-base-08 .related-posts li a:hover {
- color: #ac4142;
-}
-
-/* Orange */
-.theme-base-09 .sidebar,
-.theme-base-09 .sidebar-toggle:active,
-.theme-base-09 #sidebar-checkbox:checked ~ .sidebar-toggle {
- background-color: #d28445;
}
-.theme-base-09 .container a,
-.theme-base-09 .sidebar-toggle,
-.theme-base-09 .related-posts li a:hover {
- color: #d28445;
-}
-
-/* Yellow */
-.theme-base-0a .sidebar,
-.theme-base-0a .sidebar-toggle:active,
-.theme-base-0a #sidebar-checkbox:checked ~ .sidebar-toggle {
- background-color: #f4bf75;
-}
-.theme-base-0a .container a,
-.theme-base-0a .sidebar-toggle,
-.theme-base-0a .related-posts li a:hover {
- color: #f4bf75;
-}
-
-/* Green */
-.theme-base-0b .sidebar,
-.theme-base-0b .sidebar-toggle:active,
-.theme-base-0b #sidebar-checkbox:checked ~ .sidebar-toggle {
- background-color: #90a959;
-}
-.theme-base-0b .container a,
-.theme-base-0b .sidebar-toggle,
-.theme-base-0b .related-posts li a:hover {
- color: #90a959;
-}
-
-/* Cyan */
-.theme-base-0c .sidebar,
-.theme-base-0c .sidebar-toggle:active,
-.theme-base-0c #sidebar-checkbox:checked ~ .sidebar-toggle {
- background-color: #75b5aa;
-}
-.theme-base-0c .container a,
-.theme-base-0c .sidebar-toggle,
-.theme-base-0c .related-posts li a:hover {
- color: #75b5aa;
-}
-
-/* Blue */
-.theme-base-0d .sidebar,
-.theme-base-0d .sidebar-toggle:active,
-.theme-base-0d #sidebar-checkbox:checked ~ .sidebar-toggle {
- background-color: #6a9fb5;
-}
-.theme-base-0d .container a,
-.theme-base-0d .sidebar-toggle,
-.theme-base-0d .related-posts li a:hover {
- color: #6a9fb5;
-}
-
-/* Magenta */
-.theme-base-0e .sidebar,
-.theme-base-0e .sidebar-toggle:active,
-.theme-base-0e #sidebar-checkbox:checked ~ .sidebar-toggle {
- background-color: #aa759f;
-}
-.theme-base-0e .container a,
-.theme-base-0e .sidebar-toggle,
-.theme-base-0e .related-posts li a:hover {
- color: #aa759f;
-}
-
-/* Brown */
-.theme-base-0f .sidebar,
-.theme-base-0f .sidebar-toggle:active,
-.theme-base-0f #sidebar-checkbox:checked ~ .sidebar-toggle {
- background-color: #8f5536;
-}
-.theme-base-0f .container a,
-.theme-base-0f .sidebar-toggle,
-.theme-base-0f .related-posts li a:hover {
- color: #8f5536;
-}
-
-
-/*
- * Overlay sidebar
- *
- * Make the sidebar content overlay the viewport content instead of pushing it
- * aside when toggled.
- */
-
-.sidebar-overlay #sidebar-checkbox:checked ~ .wrap {
- -webkit-transform: translateX(0);
- -ms-transform: translateX(0);
- transform: translateX(0);
-}
-.sidebar-overlay #sidebar-checkbox:checked ~ .sidebar-toggle {
- box-shadow: 0 0 0 .25rem #fff;
-}
-.sidebar-overlay #sidebar-checkbox:checked ~ .sidebar {
- box-shadow: .25rem 0 .5rem rgba(0,0,0,.1);
-}
-
-/* Only one tweak for a reverse layout */
-.layout-reverse.sidebar-overlay #sidebar-checkbox:checked ~ .sidebar {
- box-shadow: -.25rem 0 .5rem rgba(0,0,0,.1);
-}
-
-/*
- * Author profile in Ghost
- *
- */
- /* The author credit area after the post */
+/* The author credit area after the post */
.footnotes {
font-size: 0.8rem;
}
@@ -603,7 +485,7 @@ a.pagination-item:hover {
}
/* Turn off meta for page2+ to make room for extra
- pagination prev/next links */
+pagination prev/next links */
.archive-template .author-profile .author-meta {
display: none;
}
diff --git a/assets/js/oscar.js b/assets/js/oscar.js
new file mode 100644
index 0000000..7ebe0d0
--- /dev/null
+++ b/assets/js/oscar.js
@@ -0,0 +1,5 @@
+$('.masthead').mouseenter(function(){
+ $('.nav').slideToggle();
+}).mouseleave(function(){
+ $('.nav').slideToggle();
+});
\ No newline at end of file
diff --git a/default.hbs b/default.hbs
index 8ec8e99..c3e007a 100644
--- a/default.hbs
+++ b/default.hbs
@@ -36,7 +36,7 @@
-
+
+
+
{{! Ghost outputs important scripts and data with this tag }}
{{ghost_foot}}
diff --git a/partials/navigation.hbs b/partials/navigation.hbs
index d92bea2..a509851 100644
--- a/partials/navigation.hbs
+++ b/partials/navigation.hbs
@@ -1,8 +1,10 @@
-