hscc

commit d025a4fd8460b4ccd001d14861b8cdbbffeddb76
parent fcff39f60990a2fcbf7a6d6f608127b105c4c44e
Author: Hugo Soucy <hugo@soucy.cc>
Date:   Sat,  6 Mar 2021 10:00:44 -0500

Convert sass to css

Diffstat:
M
src/css/global/a11y.css
 | 
40
++++++++++++++++++++++++++++++++++++++++
M
src/css/global/base.css
 | 
10
+++++++---
M
src/css/modules/go-to.css
 | 
30
++++++++++++++----------------
M
src/css/modules/hentry.css
 | 
2
+-
M
src/css/modules/nav.css
 | 
50
+++++++++++++++++++++++++++++---------------------

5 files changed, 91 insertions(+), 41 deletions(-)
diff --git a/src/css/global/a11y.css b/src/css/global/a11y.css
@@ -22,3 +22,43 @@
   white-space: inherit;
   width: auto;
 }
+
+@media screen and (min-width: 64rem) {
+  .visuallyhidden--lg {
+    border: 0;
+    clip: rect(1px, 1px, 1px, 1px);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding:0;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
+
+  .visuallyhidden--lg.focusable:focus,
+  .visuallyhidden--lg.hoverable:hover {
+    clip: auto;
+    height: auto;
+    margin: 0;
+    overflow: visible;
+    padding: 0;
+    position: static;
+    white-space: inherit;
+    width: auto;
+  }
+}
+
+@media screen and (max-width: 63.9375rem) {
+  .visuallyhidden--to-lg {
+    border: 0;
+    clip: rect(1px, 1px, 1px, 1px);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding:0;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
+}
diff --git a/src/css/global/base.css b/src/css/global/base.css
@@ -1,12 +1,17 @@
 /* @global base */
+
 :root {
   font-size: var(--base-font-size);
+}
 
-  @media screen and (min-width: 20rem) {
+@media screen and (min-width: 20rem) {
+  :root {
     font-size: calc(var(--base-font-size) + 2px);
   }
+}
 
-  @media screen and (min-width: 48rem) {
+@media screen and (min-width: 48rem) {
+  :root {
     font-size: calc(var(--base-font-size) + 6px);
   }
 }
@@ -46,7 +51,6 @@ select,
 textarea {
   color: var(--base-fg);
   font-family: var(--base-font-family);
-  font-size: 1rem;
   line-height: var(--base-line-height);
 }
 
diff --git a/src/css/modules/go-to.css b/src/css/modules/go-to.css
@@ -8,39 +8,37 @@
   order: -2;
 }
 
-@media screen and (min-width: 64rem) {
-  .go-to-nav {
-    align-items: center;
-    background: var(--base-darkest);
-    color: var(--base-brightest);
-    display: flex;
-    justify-content: flex-start;
-    padding-right: 2rem;
-    text-transform: capitalize;
-  }
+.go-to-nav {
+  align-items: center;
+  background: var(--base-darkest);
+  color: var(--base-brightest);
+  display: flex;
+  justify-content: flex-start;
+  padding-right: 2rem;
+  text-transform: capitalize;
 }
 
 .go-to-nav::before {
   background: var(--base-darkest);
+  border-right: 1px solid var(--base-br-light);
   color: var(--base-br-light);
   content: '://hscc';
   display: inline-block;
   font-weight: 700;
-  padding-right: 2rem;
+  margin-right: 2rem;
+  padding: 0.5rem 2rem 0.5rem 2rem;
   text-transform: lowercase;
 }
 
 @media screen and (min-width: 48rem) {
   .go-to-nav::before {
-    border-right: 1px solid var(--base-br-light);
-    margin-right: 2rem;
-    padding: 0.5rem 2rem 0.5rem 2rem;
+    content: '://hugo.soucy.cc';
   }
 }
 
 @media screen and (min-width: 64rem) {
   .go-to-nav::before {
-    content: '://hugo.soucy.cc';
+    display: none;
   }
 }
 
@@ -50,7 +48,7 @@
   padding: 0;
 }
 
-@media screen and (min-width: 20rem) and (max-width: 64rem) {
+@media screen and (min-width: 20rem) and (max-width: 63.9375rem) {
   .go-to-nav > svg {
     display: block;
   }
diff --git a/src/css/modules/hentry.css b/src/css/modules/hentry.css
@@ -24,7 +24,7 @@
 .hfeed .hentry:focus-within,
 .hfeed .hentry:hover {
   background: white;
-  box-shadow: 0 0 0 rem-calc(10) white;
+  box-shadow: 0 0 0 0.75rem white;
 }
 
 .hfeed .hentry:first-child {
diff --git a/src/css/modules/nav.css b/src/css/modules/nav.css
@@ -7,8 +7,6 @@
 
 @media screen and (min-width: 64rem) {
   .nav {
-    border: solid var(--base-br-light);
-    border-width: 1px 0;
     display: flex;
     margin-top: 0;
     order: -1;
@@ -21,15 +19,6 @@
   padding-top: 1em;
 }
 
-@media screen and (min-width: 64rem) {
-  :target > .nav__title {
-    @include unvisuallyhidden;
-    font-size: 0.75rem;
-    font-weight: 400;
-    padding: 0.75rem 2rem;
-  }
-}
-
 .nav__list {
   list-style-type: none;
   margin-bottom: 0;
@@ -39,20 +28,21 @@
 
 @media screen and (min-width: 64rem) {
   .nav__list {
-    align-items: center;
-    flex: 1 100%;
+    align-items: stretch;
     display: flex;
-    padding: 0 2rem;
+    flex: 1 100%;
+    padding: 0 0 0 2rem;
   }
 
   .nav__list::before {
+    align-self: center;
     background: var(--base-darkest);
-    color: var(--base-br-light);    
+    color: var(--base-br-light);
     content: '://hugo.soucy.cc';
     display: inline-block;
     font-weight: 700;
     padding-right: 2rem;
-    text-transform: lowercase;    
+    text-transform: lowercase;
   }
 }
 
@@ -61,9 +51,16 @@
   border-width: 1px 0 0;
 }
 
+.nav__item:last-child {
+  border-bottom: 1px solid var(--base-br-light);
+}
+
 @media screen and (min-width: 64rem) {
   .nav__item {
+    align-items: center;
     border-width: 0 0 0 1px;
+    display: flex;
+    justify-content: center;
   }
 
   .nav__item:last-child {
@@ -72,19 +69,20 @@
   }
 }
 
-.nav__item:last-child {
-  border-bottom: 1px solid var(--base-br-light);
-}
-
 .nav__link {
   background: inherit;
   color: var(--base-brightest);
   display: block;
   line-height: 1;
-  padding: 0.75rem 2rem;
+  padding: 0.75rem 1.5rem;
   text-decoration: none;
 }
 
+@media screen and (min-width: 80rem) {
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
 .nav__link[aria-current] {
   background: var(--base-link-bg);
   color: var(--base-fg);
@@ -100,3 +98,13 @@
   outline: 2px solid var(--base-brightest);
   outline-offset: -2px;
 }
+
+.nav__link > svg {
+  display: none;
+}
+
+@media screen and (min-width: 64rem) {
+  .nav__link > svg {
+    display: inline-block;
+  }
+}