From bb20eddb213b7514053d8dfb35d9e30639cd89cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= <hugo@lysator.liu.se>
Date: Mon, 26 Jun 2023 21:08:05 +0200
Subject: [PATCH] Switch to scss.
---
Makefile | 9 +-
static-src/_breadcrumb.scss | 148 ++++++++++++++++++
static-src/_breadcrumb.scss.map | 7 +
static-src/_color-headers.scss | 29 ++++
.../_highlight.scss | 0
static-src/_number-headers.scss | 21 +++
static/style2.css => static-src/_tabset.scss | 24 +--
static/style.css => static-src/style.scss | 42 ++---
static/.gitignore | 1 +
static/hl1.css | 40 -----
templates/base.html | 2 -
11 files changed, 248 insertions(+), 75 deletions(-)
create mode 100644 static-src/_breadcrumb.scss
create mode 100644 static-src/_breadcrumb.scss.map
create mode 100644 static-src/_color-headers.scss
rename static/highlight.css => static-src/_highlight.scss (100%)
create mode 100644 static-src/_number-headers.scss
rename static/style2.css => static-src/_tabset.scss (64%)
rename static/style.css => static-src/style.scss (75%)
create mode 100644 static/.gitignore
delete mode 100644 static/hl1.css
diff --git a/Makefile b/Makefile
index 22f271c..3000cef 100644
--- a/Makefile
+++ b/Makefile
@@ -7,8 +7,10 @@ DOC_OUTPUT = doc.rendered
OUTPUT_FLAGS = --path-base /code/muppet-strings/output \
--env ~/puppet/generated-environments/production/modules/
-output:
- python -m muppet $(OUTPUT_FLAGS)
+SCSS = sass
+
+output: static/style.css
+ python -m muppet $(OUTPUT_FLAGS)
check_style:
flake8 muppet
@@ -34,3 +36,6 @@ documentation: $(DOC_OUTPUT)/index.html
clean:
-rm -r output
+
+static/%.css: static-src/style.scss $(wildcard static-src/_*.scss)
+ $(SCSS) --sourcemap=auto -Istatic-src $< $@
diff --git a/static-src/_breadcrumb.scss b/static-src/_breadcrumb.scss
new file mode 100644
index 0000000..63534d6
--- /dev/null
+++ b/static-src/_breadcrumb.scss
@@ -0,0 +1,148 @@
+@charset "UTF-8";
+/* -------------------------------------------------- */
+.parse-error {
+ background: red;
+ color: yellow; }
+
+/* -------------------------------------------------- */
+h2 {
+ position: sticky;
+ top: 0;
+ background: white;
+ display: block;
+ z-index: 100; }
+
+/* -------------------------------------------------- */
+.documentation {
+ display: none; }
+
+/*
+.var {
+ position: relative;
+}
+
+.var .documentation {
+ display: none;
+ position: absolute;
+ top: 2ch;
+ left: 0;
+ border: 1px solid black;
+ background: lightblue;
+ z-index: 10;
+}
+
+.var:hover .documentation {
+ display: block;
+}
+*/
+.noscript {
+ display: none; }
+
+code.json {
+ font-size: 80%; }
+
+:target {
+ background-color: yellow; }
+
+.overview-list p {
+ display: inline; }
+
+.example {
+ background: lightgray;
+ padding: 1em;
+ border-radius: 1ex; }
+
+.comment {
+ border-left: 1ex;
+ border-left-style: dotted;
+ display: inline-block;
+ padding-left: 1em;
+ font-family: sans;
+ font-size: 80%; }
+ .comment p:first-child {
+ margin-top: 0; }
+ .comment p:last-child {
+ margin-bottom: 0; }
+
+/* -------------------------------------------------- */
+.breadcrumb {
+ padding: 0; }
+ .breadcrumb li {
+ display: inline-block;
+ padding: 0; }
+ .breadcrumb li:not(:first-child)::before {
+ content: "»";
+ padding: 1ex; }
+
+/*
+.case { color: ; }
+.splat { color: ; }
+.array { color: ; }
+.parse-error { color: ; }
+.parameter { color: ; }
+.string { color: ; }
+.regex { color: ; }
+.invoke { color: ; }
+.default { color: ; }
+.call { color: ; }
+.qr { color: ; }
+.lambda { color: ; }
+.number { color: ; }
+.regex-body { color: ; }
+.call-method { color: ; }
+*/
+.literal {
+ color: green; }
+
+.keyword {
+ color: orange; }
+
+.type {
+ color: darkgreen; }
+
+.qn {
+ color: darkgreen; }
+
+.var {
+ color: blue; }
+
+.str-var {
+ color: blue; }
+
+.name {
+ color: red; }
+
+.string {
+ color: olive; }
+
+.comment {
+ color: grey; }
+
+/* Style for tabgroups */
+.tabs {
+ display: grid;
+ grid-template-columns: 1fr;
+ grid-template-rows: auto 1fr;
+ border: 1px solid red; }
+ .tabs menu {
+ display: flex;
+ flex-direction: row;
+ padding: 0;
+ margin: 0; }
+ .tabs menu li {
+ display: block; }
+
+/*
+.tabs menu li {
+ display: block;
+ background-color: lightgray;
+ border: 1px solid gray;
+}
+*/
+.tab {
+ display: none;
+ border: 1px solid green; }
+ .tab.selected {
+ display: block !important; }
+
+/*# sourceMappingURL=_breadcrumb.scss.map */
diff --git a/static-src/_breadcrumb.scss.map b/static-src/_breadcrumb.scss.map
new file mode 100644
index 0000000..5770a45
--- /dev/null
+++ b/static-src/_breadcrumb.scss.map
@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": ";AACA,wDAAwD;AAExD,YAAa;EACZ,UAAU,EAAE,GAAG;EACf,KAAK,EAAE,MAAM;;AAGd,wDAAwD;AAExD,EAAG;EACF,QAAQ,EAAE,MAAM;EAChB,GAAG,EAAE,CAAC;EACN,UAAU,EAAE,KAAK;EACjB,OAAO,EAAE,KAAK;EACd,OAAO,EAAE,GAAG;;AAGb,wDAAwD;AAExD,cAAe;EACd,OAAO,EAAE,IAAI;;AAGd;;;;;;;;;;;;;;;;;;EAkBE;AAEF,SAAU;EACT,OAAO,EAAE,IAAI;;AAGd,SAAU;EACT,SAAS,EAAE,GAAG;;AAGf,OAAQ;EACP,gBAAgB,EAAE,MAAM;;AAGzB,gBAAiB;EAChB,OAAO,EAAE,MAAM;;AAGhB,QAAS;EACR,UAAU,EAAE,SAAS;EACrB,OAAO,EAAE,GAAG;EACZ,aAAa,EAAE,GAAG;;AAGnB,QAAS;EACR,WAAW,EAAE,GAAG;EAChB,iBAAiB,EAAE,MAAM;EACzB,OAAO,EAAE,YAAY;EACrB,YAAY,EAAE,GAAG;EACjB,WAAW,EAAE,IAAI;EACjB,SAAS,EAAE,GAAG;EAEd,sBAAc;IACb,UAAU,EAAE,CAAC;EAGd,qBAAa;IACZ,aAAa,EAAE,CAAC;;AAIlB,wDAAwD;ACnFxD,WAAY;EACX,OAAO,EAAE,CAAC;EAEV,cAAG;IACF,OAAO,EAAE,YAAY;IACrB,OAAO,EAAE,CAAC;EAGX,wCAA6B;IAC5B,OAAO,EAAE,GAAG;IACZ,OAAO,EAAE,GAAG;;ACVd;;;;;;;;;;;;;;;;EAgBE;AAEF,QAAS;EAAE,KAAK,EAAE,KAAK;;AAKvB,QAAS;EAAE,KAAK,EAAE,MAAM;;AAWxB,KAAM;EAAE,KAAK,EAAE,SAAS;;AACxB,GAAI;EAAE,KAAK,EAAE,SAAS;;AAEtB,IAAK;EAAE,KAAK,EAAE,IAAI;;AAClB,QAAS;EAAE,KAAK,EAAE,IAAI;;AAEtB,KAAM;EAAE,KAAK,EAAE,GAAG;;AAElB,OAAQ;EACP,KAAK,EAAE,KAAK;;AAGb,QAAS;EACR,KAAK,EAAE,IAAI;;AC/CZ,yBAAyB;AACzB,KAAM;EACL,OAAO,EAAE,IAAI;EACb,qBAAqB,EAAE,GAAG;EAC1B,kBAAkB,EAAE,QAAQ;EAC5B,MAAM,EAAE,aAAa;EAErB,UAAK;IACJ,OAAO,EAAE,IAAI;IACb,cAAc,EAAE,GAAG;IACnB,OAAO,EAAE,CAAC;IACV,MAAM,EAAE,CAAC;EAGV,aAAQ;IACP,OAAO,EAAE,KAAK;;AAKhB;;;;;;EAME;AAEF,IAAK;EACJ,OAAO,EAAE,IAAI;EACb,MAAM,EAAE,eAAe;EAEvB,aAAW;IACV,OAAO,EAAE,gBAAgB;;ACjC3B,EAAG;EAAE,KAAK,EAAE,OAAO;;AACnB,EAAG;EAAE,KAAK,EAAE,OAAO;;AACnB,EAAG;EAAE,KAAK,EAAE,OAAO;;AACnB,EAAG;EAAE,KAAK,EAAE,OAAO;;AACnB,EAAG;EAAE,KAAK,EAAE,OAAO;;AACnB,EAAG;EAAE,KAAK,EAAE,OAAO",
+"sources": ["style.scss","_breadcrumb.scss","_highlight.scss","_tabset.scss","_color-headers.scss"],
+"names": [],
+"file": "_breadcrumb.scss"
+}
diff --git a/static-src/_color-headers.scss b/static-src/_color-headers.scss
new file mode 100644
index 0000000..d256213
--- /dev/null
+++ b/static-src/_color-headers.scss
@@ -0,0 +1,29 @@
+h2, h3, h4, h5, h6 {
+ border-left: .5ch solid;
+ padding-left: .5ch;
+}
+
+h2 {
+ margin-left: calc(.5ch * 0);
+ border-color: dodgerblue;
+}
+
+h3 {
+ margin-left: calc(.5ch * 1);
+ border-color: purple;
+}
+
+h4 {
+ margin-left: calc(.5ch * 2);
+ border-color: green;
+}
+
+h5 {
+ margin-left: calc(.5ch * 3);
+ border-color: orange;
+}
+
+h6 {
+ margin-left: calc(.5ch * 4);
+ border-color: red;
+}
diff --git a/static/highlight.css b/static-src/_highlight.scss
similarity index 100%
rename from static/highlight.css
rename to static-src/_highlight.scss
diff --git a/static-src/_number-headers.scss b/static-src/_number-headers.scss
new file mode 100644
index 0000000..1d64fd4
--- /dev/null
+++ b/static-src/_number-headers.scss
@@ -0,0 +1,21 @@
+
+/* Numbered Headings */
+body {
+ counter-reset: h1, h2, h3, h4, h5, h6;
+}
+
+h1 { counter-increment: h1; counter-reset: h2; }
+h2 { counter-increment: h2; counter-reset: h3; }
+h3 { counter-increment: h3; counter-reset: h4; }
+h4 { counter-increment: h4; counter-reset: h5; }
+h5 { counter-increment: h5; counter-reset: h6; }
+h6 { counter-increment: h6; }
+
+h1::before { content: counter(h1) ". "; }
+h2::before { content: counter(h1) "." counter(h2) ". "; }
+h3::before { content: counter(h1) "." counter(h2) "." counter(h3) ". "; }
+h4::before { content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". "; }
+h5::before { content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "; }
+h6::before { content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "; }
+
+
diff --git a/static/style2.css b/static-src/_tabset.scss
similarity index 64%
rename from static/style2.css
rename to static-src/_tabset.scss
index 163bfdc..b7251a2 100644
--- a/static/style2.css
+++ b/static-src/_tabset.scss
@@ -4,17 +4,17 @@
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
border: 1px solid red;
-}
-.tabs menu {
- display: flex;
- flex-direction: row;
- padding: 0;
- margin: 0;
-}
+ menu {
+ display: flex;
+ flex-direction: row;
+ padding: 0;
+ margin: 0;
+ }
-.tabs menu li {
- display: block;
+ menu li {
+ display: block;
+ }
}
@@ -29,8 +29,8 @@
.tab {
display: none;
border: 1px solid green;
-}
-.tab.selected {
- display: block !important;
+ &.selected {
+ display: block !important;
+ }
}
diff --git a/static/style.css b/static-src/style.scss
similarity index 75%
rename from static/style.css
rename to static-src/style.scss
index 7ab8ae0..b5c4407 100644
--- a/static/style.css
+++ b/static-src/style.scss
@@ -8,14 +8,24 @@
/* -------------------------------------------------- */
-h2 {
+$header-height: 2em;
+
+h2, h3 {
position: sticky;
- top: 0;
background: white;
display: block;
z-index: 100;
}
+h2 {
+ top: 0;
+ height: calc($header-height + 1em)
+}
+
+h3 {
+ top: $header-height;
+}
+
/* -------------------------------------------------- */
.documentation {
@@ -71,26 +81,20 @@ code.json {
padding-left: 1em;
font-family: sans;
font-size: 80%;
-}
-.comment p:first-child {
- margin-top: 0;
-}
+ p:first-child {
+ margin-top: 0;
+ }
-.comment p:last-child {
- margin-bottom: 0;
+ p:last-child {
+ margin-bottom: 0;
+ }
}
-.breadcrumb {
- padding: 0;
-}
+/* -------------------------------------------------- */
-.breadcrumb li {
- display: inline-block;
- padding: 0;
-}
+@import "breadcrumb";
+@import "highlight";
+@import "tabset";
-.breadcrumb li:not(:first-child)::before {
- content: "»";
- padding: 1ex;
-}
+@import "color-headers";
diff --git a/static/.gitignore b/static/.gitignore
new file mode 100644
index 0000000..b3a5267
--- /dev/null
+++ b/static/.gitignore
@@ -0,0 +1 @@
+*.css
diff --git a/static/hl1.css b/static/hl1.css
deleted file mode 100644
index 29b8111..0000000
--- a/static/hl1.css
+++ /dev/null
@@ -1,40 +0,0 @@
-.qn {
- color: green;
-}
-
-.var {
- color: blue;
-}
-
-.define {
- color: orange;
-}
-
-.name {
- color: red;
-}
-
-.string {
- color: olive;
-}
-
-.str-var {
- color: pink;
-}
-
-.qr {
- color: darkgreen;
-}
-
-.compound-type {
- color: lightblue;
-}
-
-.undef {
- color: lightgray;
-}
-
-.number {
- color: red;
-}
-
diff --git a/templates/base.html b/templates/base.html
index 0244a82..c218717 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -18,8 +18,6 @@ Parameters:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="{{ path_base }}/static/style.css"/>
- <link type="text/css" rel="stylesheet" href="{{ path_base }}/static/highlight.css"/>
- <link type="text/css" rel="stylesheet" href="{{ path_base }}/static/style2.css"/>
<script src="{{ path_base }}/tabs.js"></script>
<noscript>
<style>
--
GitLab