mirror of
https://github.com/nicoburns/blessed-rs
synced 2024-11-24 20:53:03 +00:00
Convert CSS to SASS
This commit is contained in:
Nico Burns
parent
1c7f4e99ae
commit
8ca5c16fe8
8 changed files with 541 additions and 162 deletions
98
Cargo.lock
generated
98
Cargo.lock
generated
|
|
@ -20,6 +20,12 @@ dependencies = [
|
||||||
"libc",
|
"libc",
|
||||||
]
|
]
|
||||||
|
|
||||||
|
[[package]]
|
||||||
|
name = "arc-swap"
|
||||||
|
version = "1.5.1"
|
||||||
|
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||||
|
checksum = "983cd8b9d4b02a6dc6ffa557262eb5858a27a0038ffffe21a0f133eaa819a164"
|
||||||
|
|
||||||
[[package]]
|
[[package]]
|
||||||
name = "async-trait"
|
name = "async-trait"
|
||||||
version = "0.1.58"
|
version = "0.1.58"
|
||||||
|
|
@ -97,6 +103,7 @@ dependencies = [
|
||||||
"axum",
|
"axum",
|
||||||
"fxhash",
|
"fxhash",
|
||||||
"once_cell",
|
"once_cell",
|
||||||
|
"rsass",
|
||||||
"serde",
|
"serde",
|
||||||
"serde_json",
|
"serde_json",
|
||||||
"tera",
|
"tera",
|
||||||
|
|
@ -130,6 +137,12 @@ version = "3.11.1"
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||||
checksum = "572f695136211188308f16ad2ca5c851a712c464060ae6974944458eb83880ba"
|
checksum = "572f695136211188308f16ad2ca5c851a712c464060ae6974944458eb83880ba"
|
||||||
|
|
||||||
|
[[package]]
|
||||||
|
name = "bytecount"
|
||||||
|
version = "0.6.3"
|
||||||
|
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||||
|
checksum = "2c676a478f63e9fa2dd5368a42f28bba0d6c560b775f38583c8bbaa7fcd67c9c"
|
||||||
|
|
||||||
[[package]]
|
[[package]]
|
||||||
name = "byteorder"
|
name = "byteorder"
|
||||||
version = "1.4.3"
|
version = "1.4.3"
|
||||||
|
|
@ -292,6 +305,15 @@ dependencies = [
|
||||||
"crypto-common",
|
"crypto-common",
|
||||||
]
|
]
|
||||||
|
|
||||||
|
[[package]]
|
||||||
|
name = "fastrand"
|
||||||
|
version = "1.8.0"
|
||||||
|
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||||
|
checksum = "a7a407cfaa3385c4ae6b23e84623d48c2798d06e3e6a1878f7f59f17b3f86499"
|
||||||
|
dependencies = [
|
||||||
|
"instant",
|
||||||
|
]
|
||||||
|
|
||||||
[[package]]
|
[[package]]
|
||||||
name = "fnv"
|
name = "fnv"
|
||||||
version = "1.0.7"
|
version = "1.0.7"
|
||||||
|
|
@ -520,6 +542,15 @@ dependencies = [
|
||||||
"winapi-util",
|
"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]]
|
[[package]]
|
||||||
name = "itoa"
|
name = "itoa"
|
||||||
version = "1.0.4"
|
version = "1.0.4"
|
||||||
|
|
@ -612,6 +643,12 @@ dependencies = [
|
||||||
"unicase",
|
"unicase",
|
||||||
]
|
]
|
||||||
|
|
||||||
|
[[package]]
|
||||||
|
name = "minimal-lexical"
|
||||||
|
version = "0.2.1"
|
||||||
|
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||||
|
checksum = "68354c5c6bd36d73ff3feceb05efa59b6acb7626617f4962be322a825e61f79a"
|
||||||
|
|
||||||
[[package]]
|
[[package]]
|
||||||
name = "mio"
|
name = "mio"
|
||||||
version = "0.8.5"
|
version = "0.8.5"
|
||||||
|
|
@ -624,6 +661,27 @@ dependencies = [
|
||||||
"windows-sys",
|
"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]]
|
[[package]]
|
||||||
name = "nu-ansi-term"
|
name = "nu-ansi-term"
|
||||||
version = "0.46.0"
|
version = "0.46.0"
|
||||||
|
|
@ -634,6 +692,17 @@ dependencies = [
|
||||||
"winapi",
|
"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]]
|
[[package]]
|
||||||
name = "num-integer"
|
name = "num-integer"
|
||||||
version = "0.1.45"
|
version = "0.1.45"
|
||||||
|
|
@ -644,6 +713,17 @@ dependencies = [
|
||||||
"num-traits",
|
"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]]
|
[[package]]
|
||||||
name = "num-traits"
|
name = "num-traits"
|
||||||
version = "0.2.15"
|
version = "0.2.15"
|
||||||
|
|
@ -917,6 +997,24 @@ version = "0.6.28"
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||||
checksum = "456c603be3e8d448b072f410900c09faf164fbce2d480456f50eea6e25f9c848"
|
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]]
|
[[package]]
|
||||||
name = "ryu"
|
name = "ryu"
|
||||||
version = "1.0.11"
|
version = "1.0.11"
|
||||||
|
|
|
||||||
|
|
@ -17,4 +17,7 @@ tower-http = { version = "0.3", features = ["fs", "trace"] }
|
||||||
tracing = "0.1"
|
tracing = "0.1"
|
||||||
tracing-subscriber = { version = "0.3", features = ["env-filter"] }
|
tracing-subscriber = { version = "0.3", features = ["env-filter"] }
|
||||||
|
|
||||||
|
[build-dependencies]
|
||||||
|
rsass = "0.26"
|
||||||
|
|
||||||
[features]
|
[features]
|
||||||
|
|
|
||||||
43
build.rs
Normal file
43
build.rs
Normal file
|
|
@ -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();
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
337
static/index.css
337
static/index.css
|
|
@ -1,202 +1,215 @@
|
||||||
|
|
||||||
* {
|
* {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
/*font-family: "fira sans", system-ui, Arial, Helvetica, sans-serif;*/
|
/*font-family: "fira sans", system-ui, Arial, Helvetica, sans-serif;*/
|
||||||
font-family: system-ui, Arial, Helvetica, sans-serif;
|
font-family: system-ui, Arial, Helvetica, sans-serif;
|
||||||
background-color: #FFF;
|
background-color: #FFF;
|
||||||
color: #333;
|
color: #333;
|
||||||
}
|
}
|
||||||
|
|
||||||
#main-container {
|
#main-container {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 24px;
|
margin: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#left-sidebar {
|
#left-sidebar {
|
||||||
width: 200px;
|
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 {
|
#content {
|
||||||
max-width: 1200px;
|
max-width: 1200px;
|
||||||
margin-left: 24px;
|
margin-left: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#header {
|
#header {
|
||||||
border-bottom: 1px solid #CCC;
|
border-bottom: 1px solid #CCC;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background-color: #FFF;
|
background-color: #FFF;
|
||||||
background-color: #fef6f1;
|
background-color: #fef6f1;
|
||||||
}
|
}
|
||||||
|
#header .logo {
|
||||||
.page-heading-group {
|
height: 120px;
|
||||||
flex: 0 0 auto;
|
|
||||||
margin-top: -6px;
|
|
||||||
}
|
}
|
||||||
|
#header .page-heading-group {
|
||||||
img.logo {
|
flex: 0 0 auto;
|
||||||
height: 120px;
|
margin-top: -6px;
|
||||||
}
|
}
|
||||||
|
#header .page-heading-group .page-heading {
|
||||||
h1.page-heading {
|
color: #333;
|
||||||
color: #333;
|
color: #4d4a45;
|
||||||
color: #4d4a45;
|
font-size: 3rem;
|
||||||
font-size: 3rem;
|
font-weight: normal;
|
||||||
font-weight: normal;
|
margin: 0;
|
||||||
margin: 0;
|
|
||||||
}
|
}
|
||||||
h2.page-subheading {
|
#header .page-heading-group .page-subheading {
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: #666;
|
color: #666;
|
||||||
color: #77482d;
|
color: #77482d;
|
||||||
color: #644735;
|
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; */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.full-width {
|
.full-width {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fixed-layout {
|
.hflex {
|
||||||
table-layout: fixed;
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: stretch;
|
||||||
|
justify-content: flex-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
.use-case-column {
|
p.introduction {
|
||||||
width: 250px;
|
color: #494949;
|
||||||
}
|
}
|
||||||
|
|
||||||
table th {
|
p, li {
|
||||||
padding: 6px 18px 6px 6px;
|
color: #000;
|
||||||
border: 1px solid #CCC;
|
line-height: 1.35;
|
||||||
text-align: left;
|
|
||||||
font-size: 0.8em;
|
|
||||||
white-space: nowrap;
|
|
||||||
color: #000;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
table td {
|
#content ul {
|
||||||
padding: 6px 6px;
|
max-width: 800px;
|
||||||
border: 1px solid #CCC;
|
padding-left: 48px;
|
||||||
font-size: 14px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
table tbody:nth-of-type(odd) {
|
#content li {
|
||||||
background-color: #f6f8fa;
|
margin-bottom: 12px;
|
||||||
|
padding-left: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
table tbody:nth-of-type(even) {
|
section {
|
||||||
background-color: #FFF;
|
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) {
|
@media screen and (max-width: 800px) {
|
||||||
#main-container { margin: 0 12px; }
|
#main-container {
|
||||||
#left-sidebar { display: none; }
|
margin: 0 12px;
|
||||||
#content { margin-left: 0; }
|
}
|
||||||
|
#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 }
|
.toc {
|
||||||
h1.page-heading { font-size: 2rem }
|
position: sticky;
|
||||||
h2.page-subheading { font-size: 1rem }
|
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 }
|
.subtoc {
|
||||||
.use-case-column { width: 100px; }
|
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;
|
||||||
|
}
|
||||||
|
|
|
||||||
3
styles/index.scss
Normal file
3
styles/index.scss
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
@import "page";
|
||||||
|
@import "toc";
|
||||||
|
@import "table";
|
||||||
131
styles/page.scss
Normal file
131
styles/page.scss
Normal file
|
|
@ -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 }
|
||||||
|
}
|
||||||
40
styles/table.scss
Normal file
40
styles/table.scss
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
48
styles/toc.scss
Normal file
48
styles/toc.scss
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue