Manual theme design iteration

docs/theme/src/arsse.scss

@@ -64,52 +64,215 @@
     --type-size-4: 2rem;
     --type-size-5: 1.618rem;
     --type-size-6: 1.309rem;
-}
+
-:root {
+    --red: #e63c2f;
-    --sidebar-background: #f7f7f7;
+    --blue: #15284b;
-    --sidebar-link-active-background: #c5c5cb;
+    --light-blue: #93b7bb;
-    --dark: #3f4657;
+    --beige: #e8d5d3;
-    --light: #82becd;
+    --green: #2c9a42;
+
+    /* --dark-gray: #7c868d;
+    --gray: #a3aaae;
+    --light-gray: #c2c6c9;
+    --lighter-gray: #dad9d7;
+    --lightest-gray: color(var(--lighter-gray) blend(#fff 50%)); */
+
+    --dark-gray: color(var(--beige) blend(var(--blue) 50%));
+    --gray: color(var(--beige) blend(var(--blue) 25%));
+    --light-gray: color(var(--beige) blend(var(--blue) 12.5%));
+    --lighter-gray: var(--beige);
+    --lightest-gray: color(var(--beige) blend(#fff 75%));
+
+    --dark: var(--blue);
+    --light: var(--light-blue);
+
+    --sidebar-background: var(--beige);
+    --sidebar-link-active-background: var(--light-blue);
+    --sidebar-collapsible--hamburger-color: var(--beige);
+
+    --text: var(--blue);
+    --link-color: var(--red);
+    --brand-color: var(--blue);
+    --brand-background: var(--red);
+
+    --code-tag-background-color: var(--lightest-gray);
+    --code-tag-border-radius: 0;
+    --code-tag-box-shadow: none;
+
+    --homepage-navbar-background: var(--red);
+    --hero-button-block-background: var(--beige);
+    --homepage-hero-background: #fff;
+    --content-floating-blocks-background: var(--blue);
 }
 
 body {
     line-height: 1.618;
 }
 
+a.Link--external::after {
+    content: '';
+}
+
+.s-content {
+    code {
+        display: inline-block;
+        padding-top: 0;
+        padding-bottom: 0;
+        padding: 0.5ch;
+        border: 0;
+
+        &::before, &::after {
+            content: '';
+        }
+
+        pre & {
+            display: inline;
+        }
+    }
+
+    table {
+        border-collapse: separate;
+        border-spacing: 2px;
+        border: 2px solid var(--gray);
+
+        thead, tbody {
+            background-color: #fff;
+        }
+
+        tr {
+            border-top: 0;
+
+            &:nth-child(2n) {
+                background-color: transparent;
+
+                td {
+                    background-color: var(--lightest-gray);
+                }
+            }
+        }
+
+        th, td {
+            border: 0;
+        }
+    }
+}
+
+.s-content table, .Nav__item .Nav__item {
+    font-size: 1rem;
+}
+
 .Brand, h1, h2, h3, h4, h5, h6 {
     font-weight: normal;
 }
 
-.s-content table {
+.Button {
-    font-size: 1rem;
+    border-radius: 0;
+}
+
+.HomepageButtons .Button--hero {
+    font-weight: normal;
+    font-size: var(--type-size-6);
+}
+
+.Page__header {
+    border-bottom: 2px solid var(--lighter-gray);
+}
+
+.Pager li > a {
+    border: 2px solid var(--lighter-gray);
+    border-radius: 0;
+
+    &:hover, &:focus {
+        background-color: var(--lighter-gray);
+    }
+}
+
+.Pager--prev a::before {
+    content: "\2190\00a0";
+}
+.Pager--next a::after {
+    content: "\00a0\2192";
+}
+
+.Navbar {
+    height: auto;
+    box-shadow: none;
+
+    .Brand {
+        float: none;
+        line-height: inherit;
+        height: auto;
+    }
+}
+
+.Homepage {
+    padding-top: 10px !important;
 }
 
 .Nav__item {
     font-size: var(--type-size-6);
 }
 
-.clients thead tr:first-child th {
+.Nav__arrow:before, .Nav .Nav .Nav__item a .Nav__arrow:before {
-    text-align:left;
+    font-family: var(--font-family-heading);
+    width: 1ch;
+    height: 1ch;
 }
-.clients thead tr:first-child th:first-child {
+
+.TableOfContentsContainer__title {
+    border-bottom: 4px solid var(--lighter-gray);
+}
+
+ul.TableOfContents {
+    border-left: 6px solid var(--lighter-gray);
+}
+
+.Columns__right--full .TableOfContentsContainer {
+    .TableOfContentsContainer__content > .TableOfContents {
+        border-right: 2px solid var(--lighter-gray);
+    }
+
+    a {
+        border-bottom: 1px solid var(--lighter-gray);
+    }
+}
+
+.clients {
+    thead tr:first-child th {
+        text-align: left;
+
+        &:first-child {
             width: 15%;
         }
-.clients thead tr:first-child th:nth-child(3) {
+
+        &:nth-child(3) {
             width: 50%;
             text-align: center;
         }
-.clients thead tr + tr th {
+    }
+
+    thead tr + tr th {
         width: 16.66%;
         text-align: center;
     }
-.clients tbody td:nth-child(3),
+
-.clients tbody td:nth-child(4),
+    tbody td {
-.clients tbody td:nth-child(5) {
+        &:nth-child(3), &:nth-child(4), &:nth-child(5) {
             text-align: center;
         }
-.clients tbody td.Y {
+
-    color:#00953b;
+        &.Y {
+            color: var(--green);
+        }
+
+        &.N {
+            color: var(--red);
+        }
+    }
+}
+
+@media (--viewport-large) {
+    .Columns__left {
+        border: 0;
     }
-.clients tbody td.N {
-    color:#cf102d;
 }