summaryrefslogtreecommitdiffstats
path: root/src/assets
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--src/assets/index.css179
-rw-r--r--src/assets/manifest.njk20
-rw-r--r--src/assets/prism.css183
3 files changed, 203 insertions, 179 deletions
diff --git a/src/assets/index.css b/src/assets/index.css
index bd17057..db51dc8 100644
--- a/src/assets/index.css
+++ b/src/assets/index.css
@@ -1,81 +1,126 @@
:root {
- font-family: serif;
+ --fg: rgb(0 0 0);
+ --bg: rgb(255 255 255);
+ --brand: rgb(139 0 0);
+
+ @media screen and (prefers-color-scheme: dark) {
+ --bg: rgb(0 0 0);
+ --fg: rgb(255 255 255);
+ --brand: rgb(255 0 0);
+ }
}
-@media screen {
- body {
- max-width: 920px;
- min-height: 98vh;
- display: flex;
- flex-direction: column;
- margin: auto;
- padding: 0.5rem;
- }
- main {
- flex-grow: 1;
- }
- * :any-link {
- color: inherit;
- text-decoration: underline;
- }
- * :any-link:hover,
- * :any-link:active {
- font-style: italic;
- }
- .topnav {
- background: rgb(139, 0, 0);
+body {
+ font-family: serif;
+ background-color: var(--bg);
+ color: var(--fg);
+
+ @media screen {
+ max-width: 920px;
+ min-height: calc(100vh - 1rem);
+ margin: 0.5rem auto;
+ display: grid;
+ grid-template: "head" auto "main" auto "footer" 1fr / auto;
+
+ & > header {
+ background-color: var(--brand);
+ font-weight: bold;
+ color: rgb(255 255 255);
+ padding: 1rem;
+ grid-area: head;
+
+ & *:any-link {
text-decoration: none;
- font-weight: bold;
- color: rgb(255, 255, 255);
- padding: 1rem;
- font-size: 1rem;
+ }
}
- #nav-toogle,
- .topnav a {
- margin-right: 1rem;
- padding-left: 0rem;
- padding-right: 0rem;
- }
- .topnav :any-link,
- .topnav :any-link:hover {
+
+ & > footer {
+ background-color: var(--brand);
+ color: rgb(255 255 255);
+ padding: 0.5rem;
+ align-self: end;
+ grid-area: footer;
+
+ & *:any-link {
text-decoration: none;
+ }
+
+ & > main {
+ grid-area: main;
+ }
}
- @media (max-width: 450px) {
- #nav-toogle,
- .topnav a {
- display: block;
- margin: auto;
- text-align: center;
- padding: 16px;
- }
- .topnav .navlinks {
- display: none;
- }
- .topnav .navlinks.navopen {
- display: block
- }
+ }
+}
+
+* :any-link {
+ color: inherit;
+ text-decoration: underline;
+
+ @media screen {
+ &:is(:hover, :active) {
+ font-style: italic;
}
- .err {
- color: rgb(139, 0, 0);
+ }
+}
+
+a[href^="mailto:"]::after {
+ content: "📧";
+}
+
+.err {
+ color: var(--brand);
+}
+
+aside {
+ width: 40%;
+ padding: 0.5rem;
+ margin-left: 0.5rem;
+ float: right;
+ background-color: var(--brand);
+ color: rgb(255 255 255);
+}
+
+img {
+ max-width: 100%;
+ max-height: 100%;
+
+ &.side {
+ width: 40%;
+ float: right;
+
+ @media screen and (max-width: 450px) {
+ width: 100%;
+ float: none;
}
- @media (prefers-color-scheme: dark) {
- :root {
- background: rgb(0, 0, 0);
- color: rgb(255, 255, 255);
- }
- #menu nav {
- background: rgb(255, 0, 0);
- }
- .err {
- color: rgb(255, 0, 0);
+ }
+}
+
+@media screen {
+ nav > a {
+ margin-right: 1rem;
+ padding-left: 0;
+ padding-right: 0;
+
+ @media (max-width: 450px) {
+ display: block;
+ margin: auto;
+ text-align: center;
+ padding: 16px;
+
+ .navlinks {
+ display: none;
+
+ .navopen {
+ display: block;
}
+ }
}
+ }
}
@media print {
- header,
- nav,
- footer {
- display: none;
- }
-} \ No newline at end of file
+ header,
+ footer {
+ display: none;
+ }
+}
diff --git a/src/assets/manifest.njk b/src/assets/manifest.njk
index 350c7af..cbdefea 100644
--- a/src/assets/manifest.njk
+++ b/src/assets/manifest.njk
@@ -14,25 +14,17 @@ permalink: /app.webmanifest
"theme_color": "#8b0000",
"description": "{{ metadata.description }}",
"icons": [
- {
- "src": "{{ '/favicon.ico' | url }}",
- "sizes": "any",
- "type": "image/vnd.microsoft.icon"
- },
- {
- "src": "{{ '/favicon/icon.svg' | url }}",
- "sizes": "any",
- "type": "image/svg+xml"
- },
{
"src": "{{ '/favicon/192.png' | url }}",
"type": "image/png",
- "sizes": "192x192"
+ "sizes": "192x192",
+ "purpose": "any"
},
{
- "src": "{{ '/favicon/512.png' | url }}",
- "type": "image/png",
- "sizes": "512x512"
+ "src": "{{ '/favicon/512.png' | url }}",
+ "type": "image/png",
+ "sizes": "512x512",
+ "purpose": "any"
}
]
}
diff --git a/src/assets/prism.css b/src/assets/prism.css
index 0dd88c2..110c6be 100644
--- a/src/assets/prism.css
+++ b/src/assets/prism.css
@@ -1,57 +1,75 @@
code[class*="language-"],
pre[class*="language-"] {
- color: rgb(248, 248, 242);
- background: none;
- text-shadow: 0 1px rgba(0, 0, 0, 0.3);
- font-family: monospace;
- font-size: 1em;
- text-align: left;
- white-space: pre;
- word-spacing: normal;
- word-break: normal;
- word-wrap: normal;
- line-height: 1.5;
- tab-size: 4;
- hyphens: none;
-}
+ color: rgb(248 248 242);
+ background: none;
+ text-shadow: 0 1px rgb(0 0 0 / 30%);
+ font-family: monospace;
+ font-size: 1em;
+ text-align: left;
+ white-space: pre;
+ word-spacing: normal;
+ word-break: normal;
+ word-wrap: normal;
+ line-height: 1.5;
+ tab-size: 4;
+ hyphens: none;
+ @media screen and (prefers-color-scheme: dark) {
+ code[class*="language-"],
+ pre[class*="language-"] {
+ color: #000;
+ text-shadow: 0 1px #fff;
+ }
+ }
+}
/* Code blocks */
pre[class*="language-"] {
- padding: 1em;
- margin: .5em 0;
- overflow: auto;
- border-radius: 0.3em;
+ padding: 1em;
+ margin: 0.5em 0;
+ overflow: auto;
+ border-radius: 0.3em;
}
-:not(pre)>code[class*="language-"],
+:not(pre) > code[class*="language-"],
pre[class*="language-"] {
- background: rgb(39, 40, 34);
-}
+ background: rgb(39 40 34);
+ @media screen and (prefers-color-scheme: dark) {
+ background: rgb(245 242 240);
+ }
+}
/* Inline code */
-:not(pre)>code[class*="language-"] {
- padding: .1em;
- border-radius: .3em;
- white-space: normal;
+:not(pre) > code[class*="language-"] {
+ padding: 0.1em;
+ border-radius: 0.3em;
+ white-space: normal;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
- color: rgb(130, 146, 162);
+ color: rgb(130 146 162);
+
+ @media screen and (prefers-color-scheme: dark) {
+ color: rgb(112 128 144);
+ }
}
.token.punctuation {
- color: rgb(248, 248, 242);
+ color: rgb(248 248 242);
+
+ @media screen and (prefers-color-scheme: dark) {
+ color: rgb(153 0 85);
+ }
}
.token.namespace {
- opacity: .7;
+ opacity: 0.7;
}
.token.property,
@@ -59,12 +77,20 @@ pre[class*="language-"] {
.token.constant,
.token.symbol,
.token.deleted {
- color: rgb(249, 38, 114);
+ color: rgb(249 38 114);
+
+ @media screen and (prefers-color-scheme: dark) {
+ color: rgb(153 0 85);
+ }
}
.token.boolean,
.token.number {
- color: rgb(174, 129, 255);
+ color: rgb(174 129 255);
+
+ @media screen and (prefers-color-scheme: dark) {
+ color: rgb(153 0 85);
+ }
}
.token.selector,
@@ -73,7 +99,11 @@ pre[class*="language-"] {
.token.char,
.token.builtin,
.token.inserted {
- color: rgb(166, 226, 46);
+ color: rgb(166 226 46);
+
+ @media screen and (prefers-color-scheme: dark) {
+ color: rgb(102 153 0);
+ }
}
.token.operator,
@@ -82,94 +112,51 @@ pre[class*="language-"] {
.language-css .token.string,
.style .token.string,
.token.variable {
- color: rgb(248, 248, 242);
+ color: rgb(248 248 242);
+
+ @media screen and (prefers-color-scheme: dark) {
+ color: rgb(154 110 58);
+ background: rgb(255 255 255 / 50%);
+ }
}
.token.atrule,
.token.attr-value,
.token.function,
.token.class-name {
- color: rgb(230, 219, 116);
+ color: rgb(230 219 116);
+
+ @media screen and (prefers-color-scheme: dark) {
+ color: rgb(0 118 168);
+ }
}
.token.keyword {
- color: rgb(102, 217, 239);
+ color: rgb(102 217 239);
+
+ @media screen and (prefers-color-scheme: dark) {
+ color: rgb(221 75 104);
+ }
}
.token.regex,
.token.important {
- color: rgb(253, 151, 31);
+ color: rgb(253 151 31);
+
+ @media screen (prefers-color-scheme: dark) {
+ color: rgb(238 153 0);
+ }
}
.token.important,
.token.bold {
- font-weight: bold;
+ font-weight: bold;
}
.token.italic {
- font-style: italic;
+ font-style: italic;
}
.token.entity {
- cursor: help;
+ cursor: help;
}
-
-@media screen and (prefers-color-scheme: dark) {
- code[class*="language-"],
- pre[class*="language-"] {
- color: #000000;
- text-shadow: 0 1px #ffffff;
- }
- :not(pre)>code[class*="language-"],
- pre[class*="language-"] {
- background: rgb(245, 242, 240);
- }
- .token.comment,
- .token.prolog,
- .token.doctype,
- .token.cdata {
- color: rgb(112, 128, 144);
- }
- .token.punctuation {
- color: rgb(153, 153, 153);
- }
- .token.property,
- .token.tag,
- .token.boolean,
- .token.number,
- .token.constant,
- .token.symbol,
- .token.deleted {
- color: rgb(153, 0, 85);
- }
- .token.selector,
- .token.attr-name,
- .token.string,
- .token.char,
- .token.builtin,
- .token.inserted {
- color: rgb(102, 153, 0);
- }
- .token.operator,
- .token.entity,
- .token.url,
- .language-css .token.string,
- .style .token.string {
- color: rgb(154, 110, 58);
- background: rgba(255, 255, 255, 0.5);
- }
- .token.atrule,
- .token.attr-value,
- .token.keyword {
- color: rgb(0, 118, 168);
- }
- .token.function,
- .token.class-name {
- color: rgb(221, 75, 104);
- }
- .token.regex,
- .token.important,
- .token.variable {
- color: rgb(238, 153, 0);
- }
-} \ No newline at end of file
generated by cgit v1.2.3-70-g09d2 (git 2.50.0) at 2025-07-03 04:57:50 +0000