Updated menu styles:

- Move all menu code into main.css for simplicity, and to - Fix flash of menu text below footer as defer.css is loading. - Fix alignment issues on hover state of the "X" button
curiositry · Feb 13, 2017 · a990595 · a990595
1 parent 7a76f64
commit a990595
Show file tree

Hide file tree

Showing 2 changed files with 115 additions and 118 deletions.
diff --git a/assets/css/defer.css b/assets/css/defer.css
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -789,6 +789,58 @@ aside.note:before{
 
 
 /* The hamburger menu icon — the styles for the open menu are deferred */
+
+.menu{
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+
+  -webkit-box-align: center;
+  -moz-box-align: center;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  -moz-align-items: center;
+  align-items: center;
+
+  -webkit-box-pack: center;
+  -moz-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+
+  background-color: #F7FAFB;
+  position: absolute;
+  top:-6rem;
+  height:4rem;
+  width: 100%;
+  padding: 0 1.65rem;
+  text-align: center;
+  -webkit-transition: 0.5s;
+  -o-transition: 0.5s;
+  transition: 0.5s;
+  box-sizing: border-box;
+
+  box-shadow: 0 -5px 20px -10px lightslategray inset;
+  border-bottom: #ccc 1px solid;
+}
+
+.menu li{
+  text-align: center;
+  display: inline;
+  margin-left: 1.65rem;
+}
+
+.menu a{
+  font-family: "Source Sans Pro", Helvetica, sans-serif;
+  color:slategray;
+  text-transform: uppercase;
+  font-weight: 900;
+  letter-spacing: .055rem;
+  text-decoration: none;
+}
+
 .open-menu, .open-menu:hover {
   position: absolute;
   top:.825rem;
@@ -809,10 +861,35 @@ aside.note:before{
   transition: .3s;
 }
 
+.open-menu:hover{
+  background-color: transparent;
+  background: inherit;
+  background-repeat: no-repeat;
+  background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0nbWVudS1pY29uLXN2ZycgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJyB4bWxuczp4bGluaz0naHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluaycgeD0nMHB4JyB5PScwcHgnIHdpZHRoPScyNXB4JyBoZWlnaHQ9JzM1cHgnIHZpZXdCb3g9JzAgMCAyNSAyNScgZW5hYmxlLWJhY2tncm91bmQ9J25ldyAwIDAgMjUgMjUnIHhtbDpzcGFjZT0ncHJlc2VydmUnPjxwYXRoIGZpbGw9Im5vbmUiLz48ZyBpZD0nbWVudS1pY29uJyBmaWxsPSdvcmFuZ2UnPjxyZWN0IHdpZHRoPScyNScgaGVpZ2h0PScyJy8+PHJlY3QgeT0nNScgd2lkdGg9JzI1JyBoZWlnaHQ9JzInLz48cmVjdCB5PScxMCcgd2lkdGg9JzI1JyBoZWlnaHQ9JzInLz48L2c+PHBhdGggZmlsbD0nbm9uZScgZD0nWicgLz48cGF0aCBkPSJtMSAyMyAwLjc3IDAgMC0zLjYxYzAtMC41OC0wLjA3LTEuMzYtMC4xMS0xLjk0bDAuMDQgMCAwLjUyIDEuNDYgMS4yNyAzLjQzIDAuNDcgMCAxLjI2LTMuNDMgMC41My0xLjQ2IDAuMDQgMGMtMC4wNSAwLjU4LTAuMTEgMS4zNi0wLjExIDEuOTRsMCAzLjYxIDAuNzkgMCAwLTYuNTYtMC45OCAwLTEuMjYgMy41Mi0wLjQ2IDEuMzQtMC4wNCAwTDMuMjUgMTkuOTYgMS45OCAxNi40NCAxIDE2LjQ0IDEgMjNNOC4yNyAyM2wzLjg4IDAgMC0wLjcxLTMuMDUgMCAwLTIuMzggMi40OSAwIDAtMC43MS0yLjQ5IDAgMC0yLjA2IDIuOTUgMCAwLTAuNy0zLjc4IDAgMCA2LjU2TTEzLjU0IDIzbDAuNzkgMCAwLTMuNDNjMC0wLjY5LTAuMDYtMS4zOS0wLjExLTIuMDVsMC4wNCAwIDAuNzEgMS4zNSAyLjM4IDQuMTMgMC44NiAwIDAtNi41Ni0wLjc5IDAgMCAzLjM5YzAgMC42OSAwLjA2IDEuNDMgMC4xIDIuMDlsLTAuMDQgMC0wLjcxLTEuMzYtMi4zNy00LjEyLTAuODYgMCAwIDYuNTZNMTkuOTcgMjAuMjljMCAyLjExIDEuMDIgMi44MyAyLjM2IDIuODMgMS4zNCAwIDIuMzUtMC43MiAyLjM1LTIuODNsMC0zLjg1LTAuOCAwIDAgMy44N2MwIDEuNTgtMC42OCAyLjA4LTEuNTUgMi4wOC0wLjg2IDAtMS41My0wLjUtMS41My0yLjA4bDAtMy44Ny0wLjgzIDAgMCAzLjg1IiBmaWxsPSIjNzA4MDkwIi8+PC9zdmc+") !important;
+}
+
+#menu-trigger:checked ~ label{
+  background: transparent;
+  border:none;
+  box-shadow: none;
+  background-repeat: no-repeat;
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUiIGhlaWdodD0iMjUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8Zz4KICA8bGluZSBpZD0ic3ZnXzEiIHkyPSIyNSIgeDI9IjAiIHkxPSIwIiB4MT0iMjUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlPSIjY2NjY2NjIiBmaWxsPSJub25lIi8+CiAgPGxpbmUgaWQ9InN2Z18yIiB5Mj0iMCIgeDI9IjAiIHkxPSIyNSIgeDE9IjI1IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZT0iI2NjY2NjYyIgZmlsbD0ibm9uZSIvPgogPC9nPgo8L3N2Zz4=") !important;
+  -webkit-transition: .3s;
+  -o-transition: .3s;
+  transition: .3s;
+}
+
 #menu-trigger{
   display: none;
 }
 
+#menu-trigger:checked ~ nav{
+  top:-.825rem;
+  -webkit-transition: 0.5s;
+  -o-transition: 0.5s;
+  transition: 0.5s;
+}
+
 /* Every post, on every page, gets this style on its <article> tag */
 .post {
   position: relative;
@@ -1576,6 +1653,12 @@ top: -35px;
   .main-nav h3{
   }
 
+  #menu-trigger:checked ~ label{
+    /*max-width: 20px;*/
+    /*max-height: 20px;*/
+    /*background-position: center;*/
+  }
+
   hr {
     margin: 2.4em 0;
   }
@@ -1663,6 +1746,38 @@ top: -35px;
     margin: 0.825rem;
   }
 
+
+  .menu{
+    display: none;
+    height: auto;
+    padding-top: 1.65rem;
+  }
+
+  .menu:before{
+    content: "{ menu }";
+    font-weight: 700;
+    font-family: "Alegreya", Georgia, Serif;
+    text-align: center;
+    color:#ccc;
+    font-size:3.3rem;
+    -moz-font-feature-settings: "smcp=1";
+    -moz-font-feature-settings: "smcp";
+    -ms-font-feature-settings: "smcp";
+    -webkit-font-feature-settings: "smcp";
+    -o-font-feature-settings: "smcp";
+    font-feature-settings: "smcp";
+    font-variant: small-caps;
+  }
+
+  #menu-trigger:checked ~ nav{
+    display: block;
+  }
+
+  .menu li{
+    display: block;
+    margin-left: 0;
+  }
+
   .home-template .page-title,
   .paged .page-title{
     text-align: left;