Merge pull request #159 from 8fold/next-previous-paycheck

style: Paycheck data
8fold · Jan 16, 2022 · b21e8bd · b21e8bd
2 parents a8b2130 + 3d3c41b
commit b21e8bd
Show file tree

Hide file tree

Showing 4 changed files with 258 additions and 5 deletions.
diff --git a/content/assets/sass/main.scss b/content/assets/sass/main.scss
@@ -27,6 +27,10 @@
   --gray-darkest: #030303;
   --gray-darker: #0F2124;
   --gray-lightest: #FCFDFD;
+  --red: #B91C00;
+  --red-light: #F77E68;
+  --green: #0D7220;
+  --green-light: #83F598;
 
   --vw-0: 0vw;
 
@@ -48,6 +52,7 @@
   --icon-decrease: "⧩";
   --icon-hold: "≅";
   --icon-lift-spacer: -0.5rem;
+  --icon-lift-spacer-2: -0.15rem;
 
   --margin-centered: var(--0-spacer) var(--auto);
 
@@ -351,6 +356,106 @@ nav > ul {
   }
 }
 
+ul[is="data-list"] {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+
+  & > li {
+    margin-bottom: var(--m-spacer);
+    border-radius: var(--3-px);
+    border-style: var(--solid);
+    border-width: var(--1-px);
+    border-color: var(--key);
+    padding: var(--xs-spacer);
+    color: var(--key);
+    text-align: var(--center);
+
+    span:nth-of-type(1) {
+      font-weight: var(--bold-font);
+      font-size: var(--s-font);
+    }
+
+    span:nth-of-type(2) {
+      position: absolute;
+      left: -9999px;
+    }
+
+    & > ul {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+      text-align: left;
+      display: grid;
+      grid-template-areas:
+        "c c"
+        "min max";
+
+      & > li:nth-of-type(1) {
+        margin: var(--m-spacer);
+        grid-area: c;
+        font-weight: var(--bold-font);
+        font-size: var(--l-font);
+        text-align: var(--center);
+
+        &:after {
+          display: var(--inline-block);
+          position: var(--relative);
+          top: var(--icon-lift-spacer-2);
+          margin-left: var(--s-spacer);
+        }
+
+        & > b {
+          position: absolute;
+          left: -9999px;
+        }
+      }
+
+      & > li:nth-of-type(2), & > li:nth-of-type(3) {
+        text-align: var(--center);
+        font-size: var(--xs-font);
+      }
+
+      & > li:nth-of-type(2) {
+        grid-area: min;
+      }
+
+      & > li:nth-of-type(3) {
+        grid-area: max;
+      }
+    }
+
+    &[data-icon="hold"] {
+      & > ul > li:nth-of-type(1) {
+        &:after {
+          content: var(--icon-hold);
+        }
+      }
+    }
+
+    &[data-icon="increase"] {
+      color: var(--green);
+      border-color: var(--green);
+
+      & > ul > li:nth-of-type(1) {
+        &:after {
+          content: var(--icon-increase);
+        }
+      }
+    }
+
+    &[data-icon="decrease"] {
+      color: var(--red);
+      border-color: var(--red);
+
+      & > ul > li:nth-of-type(1) {
+        &:after {
+          content: var(--icon-decrease);
+        }
+      }
+    }
+  }
+}
 
 @media (prefers-reduced-motion: no-preference) {
   html {
@@ -418,6 +523,41 @@ nav > ul {
       }
     }
   }
+
+  ul[is="data-list"] {
+    & > li {
+      &[data-icon="hold"] {
+        border-color: var(--key-light);
+        color: var(--key-light);
+      }
+
+      &[data-icon="increase"] {
+        color: var(--green-light);
+        border-color: var(--green-light);
+      }
+
+      &[data-icon="decrease"] {
+        color: var(--red-light);
+        border-color: var(--red-light);
+      }
+    }
+  }
+}
+
+@media only screen and (min-width: 600px) {
+  ul[is="data-list"] {
+    display: grid;
+    gap: var(--m-spacer);
+    grid-template-columns: repeat(3, auto);
+
+    & > li {
+      margin-bottom: var(--0-spacer);
+
+      &:nth-of-type(3), &:nth-of-type(5) {
+        grid-column-start: 1;
+      }
+    }
+  }
 }
 
 blockquote {

diff --git a/content/public/assets/css/main.css b/content/public/assets/css/main.css
@@ -23,6 +23,10 @@
   --gray-darkest:#030303;
   --gray-darker:#0F2124;
   --gray-lightest:#FCFDFD;
+  --red:#B91C00;
+  --red-light:#F77E68;
+  --green:#0D7220;
+  --green-light:#83F598;
   --vw-0:0vw;
   --0-spacer:0;
   --xl-spacer:4rem;
@@ -41,6 +45,7 @@
   --icon-decrease:"⧩";
   --icon-hold:"≅";
   --icon-lift-spacer:-0.5rem;
+  --icon-lift-spacer-2:-0.15rem;
   --margin-centered:var(--0-spacer) var(--auto);
   --smooth:smooth;
   --auto:auto;
@@ -323,6 +328,82 @@ nav > ul abbr{
   border-color:var(--gray-lightest);
 }
 
+ul[is=data-list]{
+  margin:0;
+  padding:0;
+  list-style:none;
+}
+ul[is=data-list] > li{
+  margin-bottom:var(--m-spacer);
+  border-radius:var(--3-px);
+  border-style:var(--solid);
+  border-width:var(--1-px);
+  border-color:var(--key);
+  padding:var(--xs-spacer);
+  color:var(--key);
+  text-align:var(--center);
+}
+ul[is=data-list] > li span:nth-of-type(1){
+  font-weight:var(--bold-font);
+  font-size:var(--s-font);
+}
+ul[is=data-list] > li span:nth-of-type(2){
+  position:absolute;
+  left:-9999px;
+}
+ul[is=data-list] > li > ul{
+  margin:0;
+  padding:0;
+  list-style:none;
+  text-align:left;
+  display:grid;
+  grid-template-areas:"c c" "min max";
+}
+ul[is=data-list] > li > ul > li:nth-of-type(1){
+  margin:var(--m-spacer);
+  grid-area:c;
+  font-weight:var(--bold-font);
+  font-size:var(--l-font);
+  text-align:var(--center);
+}
+ul[is=data-list] > li > ul > li:nth-of-type(1):after{
+  display:var(--inline-block);
+  position:var(--relative);
+  top:var(--icon-lift-spacer-2);
+  margin-left:var(--s-spacer);
+}
+ul[is=data-list] > li > ul > li:nth-of-type(1) > b{
+  position:absolute;
+  left:-9999px;
+}
+ul[is=data-list] > li > ul > li:nth-of-type(2), ul[is=data-list] > li > ul > li:nth-of-type(3){
+  text-align:var(--center);
+  font-size:var(--xs-font);
+}
+ul[is=data-list] > li > ul > li:nth-of-type(2){
+  grid-area:min;
+}
+ul[is=data-list] > li > ul > li:nth-of-type(3){
+  grid-area:max;
+}
+ul[is=data-list] > li[data-icon=hold] > ul > li:nth-of-type(1):after{
+  content:var(--icon-hold);
+}
+ul[is=data-list] > li[data-icon=increase]{
+  color:var(--green);
+  border-color:var(--green);
+}
+ul[is=data-list] > li[data-icon=increase] > ul > li:nth-of-type(1):after{
+  content:var(--icon-increase);
+}
+ul[is=data-list] > li[data-icon=decrease]{
+  color:var(--red);
+  border-color:var(--red);
+}
+ul[is=data-list] > li[data-icon=decrease] > ul > li:nth-of-type(1):after{
+  content:var(--icon-decrease);
+}
+
 @media (prefers-reduced-motion: no-preference){
   html{
     scroll-behavior:var(--smooth);
@@ -381,6 +462,32 @@ article iframe[src*="https://jsfiddle.net"]{
   main details summary, article details summary{
     color:var(--key-light);
   }
+
+  ul[is=data-list] > li[data-icon=hold]{
+    border-color:var(--key-light);
+    color:var(--key-light);
+  }
+  ul[is=data-list] > li[data-icon=increase]{
+    color:var(--green-light);
+    border-color:var(--green-light);
+  }
+  ul[is=data-list] > li[data-icon=decrease]{
+    color:var(--red-light);
+    border-color:var(--red-light);
+  }
+}
+@media only screen and (min-width: 600px){
+  ul[is=data-list]{
+    display:grid;
+    gap:var(--m-spacer);
+    grid-template-columns:repeat(3, auto);
+  }
+  ul[is=data-list] > li{
+    margin-bottom:var(--0-spacer);
+  }
+  ul[is=data-list] > li:nth-of-type(3), ul[is=data-list] > li:nth-of-type(5){
+    grid-column-start:1;
+  }
 }
 blockquote{
   margin:var(--m-spacer);