From 8ca5c16fe8e5b8cc04d3c601ac3b37e5b55dd932 Mon Sep 17 00:00:00 2001 From: Nico Burns Date: Wed, 9 Nov 2022 12:59:46 +0000 Subject: [PATCH] Convert CSS to SASS --- Cargo.lock | 98 ++++++++++++++ Cargo.toml | 3 + build.rs | 43 ++++++ static/index.css | 337 ++++++++++++++++++++++++---------------------- styles/index.scss | 3 + styles/page.scss | 131 ++++++++++++++++++ styles/table.scss | 40 ++++++ styles/toc.scss | 48 +++++++ 8 files changed, 541 insertions(+), 162 deletions(-) create mode 100644 build.rs create mode 100644 styles/index.scss create mode 100644 styles/page.scss create mode 100644 styles/table.scss create mode 100644 styles/toc.scss diff --git a/Cargo.lock b/Cargo.lock index d9f96cc..05444b1 100644 --- a/Cargo.lock +++ b/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" diff --git a/Cargo.toml b/Cargo.toml index 7acd0eb..288460e 100644 --- a/Cargo.toml +++ b/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] diff --git a/build.rs b/build.rs new file mode 100644 index 0000000..c6e8361 --- /dev/null +++ b/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(); + + } +} \ No newline at end of file diff --git a/static/index.css b/static/index.css index 96ecde8..9b020ea 100644 --- a/static/index.css +++ b/static/index.css @@ -1,202 +1,215 @@ - * { - box-sizing: border-box; + 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; + /*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; + margin: 0; + padding: 0; + margin: 24px; } #left-sidebar { - 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; + width: 200px; } #content { - max-width: 1200px; - margin-left: 24px; + max-width: 1200px; + margin-left: 24px; } #header { - border-bottom: 1px solid #CCC; - display: flex; - align-items: center; - background-color: #FFF; - background-color: #fef6f1; + border-bottom: 1px solid #CCC; + display: flex; + align-items: center; + background-color: #FFF; + background-color: #fef6f1; } - -.page-heading-group { - flex: 0 0 auto; - margin-top: -6px; +#header .logo { + height: 120px; } - -img.logo { - height: 120px; +#header .page-heading-group { + flex: 0 0 auto; + margin-top: -6px; } - -h1.page-heading { - color: #333; - color: #4d4a45; - font-size: 3rem; - font-weight: normal; - margin: 0; +#header .page-heading-group .page-heading { + color: #333; + color: #4d4a45; + font-size: 3rem; + font-weight: normal; + margin: 0; } -h2.page-subheading { - font-size: 1.5rem; - font-weight: normal; - margin: 0; - color: #666; - color: #77482d; - color: #644735; -} - -.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 -} - -table { - border-collapse: collapse; - /* border: 1px solid #f9f9f9; */ +#header .page-heading-group .page-subheading { + font-size: 1.5rem; + font-weight: normal; + margin: 0; + color: #666; + color: #77482d; + color: #644735; } .full-width { - width: 100%; + width: 100%; } -.fixed-layout { - table-layout: fixed; +.hflex { + display: flex; + flex-direction: row; + align-items: stretch; + justify-content: flex-start; } -.use-case-column { - width: 250px; +p.introduction { + color: #494949; } -table th { - padding: 6px 18px 6px 6px; - border: 1px solid #CCC; - text-align: left; - font-size: 0.8em; - white-space: nowrap; - color: #000; +p, li { + color: #000; + line-height: 1.35; } -table td { - padding: 6px 6px; - border: 1px solid #CCC; - font-size: 14px; +#content ul { + max-width: 800px; + padding-left: 48px; } -table tbody:nth-of-type(odd) { - background-color: #f6f8fa; +#content li { + margin-bottom: 12px; + padding-left: 12px; } -table tbody:nth-of-type(even) { - background-color: #FFF; +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; } + #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; + } +} - img.logo { height: 70px } - h1.page-heading { font-size: 2rem } - h2.page-subheading { font-size: 1rem } +.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; +} - h3 { margin-top: 14px } - .use-case-column { width: 100px; } -} \ No newline at end of file +.subtoc { + margin-left: 12px; +} + +.subtoc li { + font-size: 0.85em; +} + +.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; */ +} +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; + text-align: left; + font-size: 0.8em; + white-space: nowrap; + color: #000; +} +table td { + padding: 6px 6px; + border: 1px solid #CCC; + font-size: 14px; +} diff --git a/styles/index.scss b/styles/index.scss new file mode 100644 index 0000000..3f87d00 --- /dev/null +++ b/styles/index.scss @@ -0,0 +1,3 @@ +@import "page"; +@import "toc"; +@import "table"; \ No newline at end of file diff --git a/styles/page.scss b/styles/page.scss new file mode 100644 index 0000000..78c7d64 --- /dev/null +++ b/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 } +} \ No newline at end of file diff --git a/styles/table.scss b/styles/table.scss new file mode 100644 index 0000000..15b8fec --- /dev/null +++ b/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; + } +} + + + + + + diff --git a/styles/toc.scss b/styles/toc.scss new file mode 100644 index 0000000..4f0f12c --- /dev/null +++ b/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; +} \ No newline at end of file