Convert CSS to SASS

Cargo.lock

@@ -20,6 +20,12 @@ dependencies = [
  "libc",
 ]
 
+[[package]]
+name = "arc-swap"
+version = "1.5.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "983cd8b9d4b02a6dc6ffa557262eb5858a27a0038ffffe21a0f133eaa819a164"
+
 [[package]]
 name = "async-trait"
 version = "0.1.58"
@@ -97,6 +103,7 @@ dependencies = [
  "axum",
  "fxhash",
  "once_cell",
+ "rsass",
  "serde",
  "serde_json",
  "tera",
@@ -130,6 +137,12 @@ version = "3.11.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "572f695136211188308f16ad2ca5c851a712c464060ae6974944458eb83880ba"
 
+[[package]]
+name = "bytecount"
+version = "0.6.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2c676a478f63e9fa2dd5368a42f28bba0d6c560b775f38583c8bbaa7fcd67c9c"
+
 [[package]]
 name = "byteorder"
 version = "1.4.3"
@@ -292,6 +305,15 @@ dependencies = [
  "crypto-common",
 ]
 
+[[package]]
+name = "fastrand"
+version = "1.8.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a7a407cfaa3385c4ae6b23e84623d48c2798d06e3e6a1878f7f59f17b3f86499"
+dependencies = [
+ "instant",
+]
+
 [[package]]
 name = "fnv"
 version = "1.0.7"
@@ -520,6 +542,15 @@ dependencies = [
  "winapi-util",
 ]
 
+[[package]]
+name = "instant"
+version = "0.1.12"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7a5bbe824c507c5da5956355e86a746d82e0e1464f65d862cc5e71da70e94b2c"
+dependencies = [
+ "cfg-if",
+]
+
 [[package]]
 name = "itoa"
 version = "1.0.4"
@@ -612,6 +643,12 @@ dependencies = [
  "unicase",
 ]
 
+[[package]]
+name = "minimal-lexical"
+version = "0.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "68354c5c6bd36d73ff3feceb05efa59b6acb7626617f4962be322a825e61f79a"
+
 [[package]]
 name = "mio"
 version = "0.8.5"
@@ -624,6 +661,27 @@ dependencies = [
  "windows-sys",
 ]
 
+[[package]]
+name = "nom"
+version = "7.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a8903e5a29a317527874d0402f867152a3d21c908bb0b933e416c65e301d4c36"
+dependencies = [
+ "memchr",
+ "minimal-lexical",
+]
+
+[[package]]
+name = "nom_locate"
+version = "4.0.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "37794436ca3029a3089e0b95d42da1f0b565ad271e4d3bb4bad0c7bb70b10605"
+dependencies = [
+ "bytecount",
+ "memchr",
+ "nom",
+]
+
 [[package]]
 name = "nu-ansi-term"
 version = "0.46.0"
@@ -634,6 +692,17 @@ dependencies = [
  "winapi",
 ]
 
+[[package]]
+name = "num-bigint"
+version = "0.4.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f93ab6289c7b344a8a9f60f88d80aa20032336fe78da341afc91c8a2341fc75f"
+dependencies = [
+ "autocfg",
+ "num-integer",
+ "num-traits",
+]
+
 [[package]]
 name = "num-integer"
 version = "0.1.45"
@@ -644,6 +713,17 @@ dependencies = [
  "num-traits",
 ]
 
+[[package]]
+name = "num-rational"
+version = "0.4.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0638a1c9d0a3c0914158145bc76cff373a75a627e6ecbfb71cbe6f453a5a19b0"
+dependencies = [
+ "autocfg",
+ "num-integer",
+ "num-traits",
+]
+
 [[package]]
 name = "num-traits"
 version = "0.2.15"
@@ -917,6 +997,24 @@ version = "0.6.28"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "456c603be3e8d448b072f410900c09faf164fbce2d480456f50eea6e25f9c848"
 
+[[package]]
+name = "rsass"
+version = "0.26.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "665387d3be91521de331a04cc7118c8c129ffe43c5f4e8a61e78990850046b5a"
+dependencies = [
+ "arc-swap",
+ "fastrand",
+ "lazy_static",
+ "nom",
+ "nom_locate",
+ "num-bigint",
+ "num-integer",
+ "num-rational",
+ "num-traits",
+ "tracing",
+]
+
 [[package]]
 name = "ryu"
 version = "1.0.11"

Cargo.toml

@@ -17,4 +17,7 @@ tower-http = { version = "0.3", features = ["fs", "trace"] }
 tracing = "0.1"
 tracing-subscriber = { version = "0.3", features = ["env-filter"] }
 
+[build-dependencies]
+rsass = "0.26"
+
 [features]

build.rs

@@ -0,0 +1,43 @@
+use std::path::PathBuf;
+use rsass::{compile_scss_path, output::{Format, Style}};
+use std::fs;
+
+fn get_input_path(filename: &str) -> PathBuf {
+  let mut path = PathBuf::with_capacity(50);
+    path.push(".");
+    path.push("styles");
+    path.push(filename);
+    path.set_extension("scss");
+    path
+}
+
+fn get_output_path(filename: &str) -> PathBuf {
+  let mut path = PathBuf::with_capacity(50);
+    path.push(".");
+    path.push("static");
+    path.push(filename);
+    path.set_extension("css");
+    path
+}
+
+fn main () {
+  println!("cargo:rerun-if-changed=styles");
+
+
+  let entrypoints = ["index"];
+  for filename in &entrypoints {
+    
+    let input_path = get_input_path(filename);
+    let css = compile_scss_path(
+      &input_path,
+      Format {
+        style: Style::Expanded,
+        ..Default::default()
+      }
+    ).unwrap();
+
+    let output_path = get_output_path(filename);
+    fs::write(output_path, css).unwrap();
+
+  }
+}

static/index.css

@@ -1,4 +1,3 @@
-
 * {
   box-sizing: border-box;
 }
@@ -20,46 +19,6 @@ body {
   width: 200px;
 }
 
-.toc {
-    position: sticky;
-    overflow-y: auto;
-    top: 24px;
-    max-height: calc(100vh - 24px);
-}
-.toc ul {
-    list-style: none;
-    padding: 0;
-}
-.toc li {
-    padding-left: 0;
-    margin: 3px 0px;
-    font-size: 1em;
-}
-.toc li > a {
-    color: #999;
-    text-decoration: none;
-}
-.toc li > ul {
-    /*display: none;*/
-}
-.toc > ul > li.active:not(.active ~ .active) > a {
-    color: #333;
-    text-decoration: none;
-}
-.toc > ul > li.active:not(.active ~ .active) > ul {
-    display: block;
-}
-.toc > ul > li.active:not(.active ~ .active) > ul > li.active:not(.active ~ .active) > a {
-    color: #333;
-    text-decoration: none;
-}
-.subtoc {
-    margin-left: 12px;
-}
-.subtoc li {
-    font-size: 0.85em;
-}
-
 #content {
   max-width: 1200px;
   margin-left: 24px;
@@ -72,24 +31,21 @@ body {
   background-color: #FFF;
   background-color: #fef6f1;
 }
-
+#header .logo {
-.page-heading-group {
+  height: 120px;
+}
+#header .page-heading-group {
   flex: 0 0 auto;
   margin-top: -6px;
 }
-
+#header .page-heading-group .page-heading {
-img.logo {
-    height: 120px;
-}
-
-h1.page-heading {
   color: #333;
   color: #4d4a45;
   font-size: 3rem;
   font-weight: normal;
   margin: 0;
 }
-h2.page-subheading {
+#header .page-heading-group .page-subheading {
   font-size: 1.5rem;
   font-weight: normal;
   margin: 0;
@@ -98,6 +54,10 @@ h2.page-subheading {
   color: #644735;
 }
 
+.full-width {
+  width: 100%;
+}
+
 .hflex {
   display: flex;
   flex-direction: row;
@@ -133,28 +93,87 @@ h3 {
   font-weight: normal;
   margin-bottom: 0;
 }
+
 h4 {
   font-size: 1.4em;
   font-weight: normal;
   margin-bottom: 0;
   margin-top: 0;
 }
+
 p.group-description {
   color: #494949;
   margin-top: 0;
 }
 
 a, a:hover, a:visited, a:active {
-    color: #3298dc
+  color: #3298dc;
 }
 
-table {
+@media screen and (max-width: 800px) {
-    border-collapse: collapse;
+  #main-container {
-    /* border: 1px solid #f9f9f9; */
+    margin: 0 12px;
+  }
+  #left-sidebar {
+    display: none;
+  }
+  #content {
+    margin-left: 0;
+  }
+  .logo {
+    height: 70px;
+  }
+  .page-heading {
+    font-size: 2rem;
+  }
+  .page-subheading {
+    font-size: 1rem;
+  }
+  h3 {
+    margin-top: 14px;
+  }
 }
 
-.full-width {
+.toc {
-    width: 100%;
+  position: sticky;
+  overflow-y: auto;
+  top: 24px;
+  max-height: calc(100vh - 24px);
+}
+.toc ul {
+  list-style: none;
+  padding: 0;
+}
+.toc li {
+  padding-left: 0;
+  margin: 3px 0px;
+  font-size: 1em;
+}
+.toc li > a {
+  color: #999;
+  text-decoration: none;
+}
+.toc li > ul {
+  /*display: none;*/
+}
+.toc > ul > li.active:not(.active ~ .active) > a {
+  color: #333;
+  text-decoration: none;
+}
+.toc > ul > li.active:not(.active ~ .active) > ul {
+  display: block;
+}
+.toc > ul > li.active:not(.active ~ .active) > ul > li.active:not(.active ~ .active) > a {
+  color: #333;
+  text-decoration: none;
+}
+
+.subtoc {
+  margin-left: 12px;
+}
+
+.subtoc li {
+  font-size: 0.85em;
 }
 
 .fixed-layout {
@@ -165,6 +184,22 @@ table {
   width: 250px;
 }
 
+@media screen and (max-width: 800px) {
+  .use-case-column {
+    width: 100px;
+  }
+}
+
+table {
+  border-collapse: collapse;
+  /* border: 1px solid #f9f9f9; */
+}
+table tbody:nth-of-type(odd) {
+  background-color: #f6f8fa;
+}
+table tbody:nth-of-type(even) {
+  background-color: #FFF;
+}
 table th {
   padding: 6px 18px 6px 6px;
   border: 1px solid #CCC;
@@ -173,30 +208,8 @@ table th {
   white-space: nowrap;
   color: #000;
 }
-
 table td {
   padding: 6px 6px;
   border: 1px solid #CCC;
   font-size: 14px;
 }
-
-table tbody:nth-of-type(odd) {
-    background-color: #f6f8fa;
-}
-
-table tbody:nth-of-type(even) {
-    background-color: #FFF;
-}
-
-@media screen and (max-width: 800px) {
-  #main-container { margin: 0 12px; }
-  #left-sidebar { display: none; }
-  #content { margin-left: 0; }
-
-  img.logo { height: 70px }
-  h1.page-heading { font-size: 2rem }
-  h2.page-subheading { font-size: 1rem }
-
-  h3 { margin-top: 14px }
-  .use-case-column { width: 100px; }
-}

styles/index.scss

@@ -0,0 +1,3 @@
+@import "page";
+@import "toc";
+@import "table";

styles/page.scss

@@ -0,0 +1,131 @@
+
+* {
+    box-sizing: border-box;
+}
+
+body {
+    /*font-family: "fira sans", system-ui, Arial, Helvetica, sans-serif;*/
+    font-family: system-ui, Arial, Helvetica, sans-serif;
+    background-color: #FFF;
+    color: #333;
+}
+
+#main-container {
+    margin: 0;
+    padding: 0;
+    margin: 24px;
+}
+
+#left-sidebar {
+    width: 200px;
+}
+
+
+
+#content {
+    max-width: 1200px;
+    margin-left: 24px;
+}
+
+#header {
+    border-bottom: 1px solid #CCC;
+    display: flex;
+    align-items: center;
+    background-color: #FFF;
+    background-color: #fef6f1;
+
+  .logo {
+    height: 120px;
+  }
+
+  .page-heading-group {
+      flex: 0 0 auto;
+      margin-top: -6px;
+
+    .page-heading {
+        color: #333;
+        color: #4d4a45;
+        font-size: 3rem;
+        font-weight: normal;
+        margin: 0;
+    }
+    .page-subheading {
+        font-size: 1.5rem;
+        font-weight: normal;
+        margin: 0;
+        color: #666;
+        color: #77482d;
+        color: #644735;
+    }
+  }
+
+}
+
+
+
+.full-width {
+    width: 100%;
+}
+
+.hflex {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    justify-content: flex-start;
+}
+
+p.introduction {
+    color: #494949;
+}
+
+p, li {
+    color: #000;
+    line-height: 1.35;
+}
+
+#content ul {
+    max-width: 800px;
+    padding-left: 48px;
+}
+
+#content li {
+    margin-bottom: 12px;
+    padding-left: 12px;
+}
+
+section {
+    margin-bottom: 24px;
+}
+
+h3 {
+    font-size: 1.8em;
+    font-weight: normal;
+    margin-bottom: 0;
+}
+h4 {
+    font-size: 1.4em;
+    font-weight: normal;
+    margin-bottom: 0;
+    margin-top: 0;
+}
+p.group-description {
+    color: #494949;
+    margin-top: 0;
+}
+
+a, a:hover, a:visited, a:active {
+    color: #3298dc
+}
+
+
+@media screen and (max-width: 800px) {
+    #main-container { margin: 0 12px; }
+    #left-sidebar { display: none; }
+    #content { margin-left: 0; }
+
+    .logo { height: 70px }
+    .page-heading { font-size: 2rem }
+    .page-subheading { font-size: 1rem }
+
+    h3 { margin-top: 14px }
+}

styles/table.scss

@@ -0,0 +1,40 @@
+.fixed-layout {
+    table-layout: fixed;
+}
+
+.use-case-column {
+    width: 250px;
+}
+@media screen and (max-width: 800px) {
+    .use-case-column { width: 100px; }
+}
+
+table {
+    border-collapse: collapse;
+    /* border: 1px solid #f9f9f9; */
+
+    // Zebra striping
+    tbody:nth-of-type(odd) { background-color: #f6f8fa; }
+    tbody:nth-of-type(even) { background-color: #FFF; }
+
+    th {
+        padding: 6px 18px 6px 6px;
+        border: 1px solid #CCC;
+        text-align: left;
+        font-size: 0.8em;
+        white-space: nowrap;
+        color: #000;
+    }
+
+    td {
+        padding: 6px 6px;
+        border: 1px solid #CCC;
+        font-size: 14px;
+    }
+}
+
+
+
+
+
+

styles/toc.scss

@@ -0,0 +1,48 @@
+.toc {
+      position: sticky;
+      overflow-y: auto;
+      top: 24px;
+      max-height: calc(100vh - 24px);
+
+      ul {
+          list-style: none;
+          padding: 0;
+      }
+
+      li {
+          padding-left: 0;
+          margin: 3px 0px;
+          font-size: 1em;
+          > a {
+              color: #999;
+              text-decoration: none;
+            }
+          > ul {
+              /*display: none;*/
+          }
+      }
+      
+      > ul > li.active:not(.active ~ .active) {
+          > a {
+              color: #333;
+              text-decoration: none;
+          }
+
+          // Sub-lists
+          > ul {
+              display: block;
+
+              > li.active:not(.active ~ .active) > a {
+                  color: #333;
+                  text-decoration: none;
+              }
+          }
+      }
+}
+
+.subtoc {
+    margin-left: 12px;
+}
+.subtoc li {
+    font-size: 0.85em;
+}