summaryrefslogtreecommitdiff
path: root/static
diff options
context:
space:
mode:
Diffstat (limited to 'static')
-rw-r--r--static/css/dark.css8
-rw-r--r--static/css/light.css8
-rw-r--r--static/css/style.css105
-rw-r--r--static/scripts/theme.js10
4 files changed, 128 insertions, 3 deletions
diff --git a/static/css/dark.css b/static/css/dark.css
index 1cb3028..31b025a 100644
--- a/static/css/dark.css
+++ b/static/css/dark.css
@@ -26,6 +26,8 @@
--switch-ol: var(--color4);
--switch-moon: var(--color3);
--switch-sun: var(--color13);
+
+ --code-border: var(--fg);
}
/* general */
@@ -66,6 +68,11 @@ main {
background: linear-gradient(var(--bg) 0.5em, 1em, var(--body-bg) 1.5em calc(100% - 1.5em), calc(100% - 1em), var(--bg) calc(100% - 0.5em));
}
+pre, code {
+ border-radius: 5px;
+ border: 1px solid var(--code-border);
+}
+
/* nav bar */
body > header {
background: linear-gradient(var(--body-bg) calc(100% - 1.5em), calc(100% - 1em), var(--bg) calc(100% - 0.5em));
@@ -129,4 +136,3 @@ div.gallery:hover {
.switch input:focus + .slider {
box-shadow: 0 0 0.1em var(--switch-ol);
}
-
diff --git a/static/css/light.css b/static/css/light.css
index 27df3c4..0b1456c 100644
--- a/static/css/light.css
+++ b/static/css/light.css
@@ -26,6 +26,8 @@
--switch-ol: var(--color0);
--switch-moon: var(--color3);
--switch-sun: var(--color13);
+
+ --code-border: var(--fg);
}
/* general */
@@ -62,6 +64,11 @@ body {
color: var(--fg);
}
+pre, code {
+ border-radius: 5px;
+ border: 1px solid var(--code-border);
+}
+
main {
background: linear-gradient(var(--bg) 0.5em, 1em, var(--body-bg) 1.5em calc(100% - 1.5em), calc(100% - 1em), var(--bg) calc(100% - 0.5em));
}
@@ -129,4 +136,3 @@ div.gallery:hover {
.switch input:focus + .slider {
box-shadow: 0 0 0.1em var(--switch-ol);
}
-
diff --git a/static/css/style.css b/static/css/style.css
index 0ba4e05..9be32e0 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -3,6 +3,20 @@
font-size: larger;
}
+h1 {
+ text-align: center;
+}
+
+ul {
+ margin-left: 2em;
+ margin-right: 2em;
+}
+
+ul.page-list {
+ margin-left: 0;
+ margin-right: 0;
+}
+
body, html {
margin: 0;
padding: 0;
@@ -42,12 +56,23 @@ a{
body > header, body > footer, main {
justify-self: center;
- width: clamp(45ch, 50%, 75ch);
+ width: clamp(30ch, calc(100% - 1em), 75ch);
padding-left: 0.5em;
padding-right: 0.5em;
}
+/* article elements */
+div.article-info {
+ line-height: 0.3;
+ font-size: smaller;
+}
+
+div.article-info > div.article-tags {
+ font-size: larger;
+}
+
+
/* nav bar / header */
body > header {
display: flex;
@@ -103,6 +128,10 @@ body > footer {
text-align: center;
}
+body > footer > span {
+ font-size: smaller;
+}
+
/* theme swticher */
.switch {
@@ -154,3 +183,77 @@ body > footer {
.slider.round:before {
border-radius: 1em;
}
+
+
+/* code blocks */
+code.crypto {
+ font-size: smaller;
+ overflow-wrap: anywhere;
+}
+
+
+/* images */
+img {
+ border-radius: 5px;
+ max-width: 100%;
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+ vertical-align: middle;
+}
+
+img.wrap-right {
+ float: right;
+}
+
+img.wrap-left {
+ float: left;
+}
+
+img.qr {
+ max-width: 200px;
+ padding: 1em;
+}
+
+/* img grid */
+div.img-grid, div.img-grid > p {
+ display: grid;
+ gap: 1em;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+}
+
+div.img-grid img {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ overflow: hidden;
+}
+
+
+/* art grid */
+div.art-grid, div.art-grid > p {
+ display: grid;
+ gap: 1em;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ grid-auto-rows: minmax(250px, auto);
+}
+
+div.art-grid img {
+ border: 1px solid white;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ overflow: hidden;
+}
+
+@media screen and (min-width: 600px) {
+ div.art-grid img.wide {
+ grid-column: span 2 / auto;
+ }
+
+ div.art-grid img.tall {
+ grid-row: span 2 / auto;
+ }
+}
diff --git a/static/scripts/theme.js b/static/scripts/theme.js
index 489060f..1a425d5 100644
--- a/static/scripts/theme.js
+++ b/static/scripts/theme.js
@@ -21,6 +21,7 @@ window.onload = () => {
href = href.replace('dark.css', 'light.css');
theme.setAttribute('href', href);
+ /*
let code_theme = document.getElementById('code-theme-css');
let code_href;
@@ -29,6 +30,7 @@ window.onload = () => {
code_href = code_href.replace('solarized-dark.min.css', 'solarized-light.min.css');
code_theme.setAttribute('href', code_href);
}
+ */
}
}
@@ -50,31 +52,39 @@ function toggleTheme(){
let theme = document.getElementById('theme-css');
let href = theme.getAttribute('href');
+ /*
let code_theme = document.getElementById('code-theme-css');
let code_href;
if (code_theme !== null){
code_href = code_theme.getAttribute('href');
}
+ */
if(href.endsWith('dark.css')){
href = href.replace('dark.css', 'light.css');
+ /*
if (code_theme !== null){
code_href = code_href.replace('solarized-dark.min.css', 'solarized-light.min.css');
}
+ */
}
else if (href.endsWith('light.css')){
href = href.replace('light.css', 'dark.css');
+ /*
if (code_theme !== null){
code_href = code_href.replace('solarized-light.min.css', 'solarized-dark.min.css');
}
+ */
}
else{
console.log('Wrong replacement.');
}
theme.setAttribute('href', href);
+ /*
if (code_theme !== null){
code_theme.setAttribute('href', code_href);
}
+ */
setTheme();
}