diff options
Diffstat (limited to 'resources')
| -rw-r--r-- | resources/config.toml | 3 | ||||
| -rw-r--r-- | resources/css/colors.css | 215 | ||||
| -rw-r--r-- | resources/css/style.css | 104 |
3 files changed, 322 insertions, 0 deletions
diff --git a/resources/config.toml b/resources/config.toml new file mode 100644 index 0000000..1470751 --- /dev/null +++ b/resources/config.toml @@ -0,0 +1,3 @@ +[server] + host = "127.0.0.1" + port = 8000 diff --git a/resources/css/colors.css b/resources/css/colors.css new file mode 100644 index 0000000..6e180a5 --- /dev/null +++ b/resources/css/colors.css @@ -0,0 +1,215 @@ +/* + * Colors from Modus theme. + * https://gitlab.com/protesilaos/dotfiles/-/blob/master/emacs/.emacs.d/modus-themes/modus-themes.el + */ + +:root { + --bg-main: #ffffff; + --bg-dim: #f8f8f8; + --bg-alt: #f0f0f0; + + --bg-active: #d7d7d7; + --bg-inactive: #efefef; + + --bg-special-cold: #dde3f4; + --bg-special-mild: #c4ede0; + --bg-special-warm: #f0e0d4; + --bg-special-calm: #f8ddea; + + --bg-hl-alt-intense: #e8dfd1; + + --fg-main: #000000; + --fg-dim: #282828; + --fg-alt: #505050; + + --fg-active: #0a0a0a; + --fg-inactive: #404148; + + --fg-special-cold: #093060; + --fg-special-mild: #184034; + --fg-special-warm: #5d3026; + --fg-special-calm: #61284f; + + /* foregrounds that can be combined with bg-main, bg-dim, bg-alt */ + --red: #a60000; + --red-alt: #972500; + --red-alt-other: #a0132f; + --red-faint: #7f1010; + --red-alt-faint: #702f00; + --red-alt-other-faint: #7f002f; + + --green: #005e00; + --green-alt: #315b00; + --green-alt-other: #145c33; + --green-faint: #104410; + --green-alt-faint: #30440f; + --green-alt-other-faint: #0f443f; + + --yellow: #813e00; + --yellow-alt: #70480f; + --yellow-alt-other: #863927; + --yellow-faint: #5f4400; + --yellow-alt-faint: #5d5000; + --yellow-alt-other-faint: #5e3a20; + + --blue: #0031a9; + --blue-alt: #2544bb; + --blue-alt-other: #0000c0; + --blue-faint: #003497; + --blue-alt-faint: #0f3d8c; + --blue-alt-other-faint: #001087; + + --magenta: #721045; + --magenta-alt: #8f0075; + --magenta-alt-other: #5317ac; + --magenta-faint: #752f50; + --magenta-alt-faint: #7b206f; + --magenta-alt-other-faint: #55348e; + + --cyan: #00538b; + --cyan-alt: #30517f; + --cyan-alt-other: #005a5f; + --cyan-faint: #005077; + --cyan-alt-faint: #354f6f; + --cyan-alt-other-faint: #125458; + + /* combine with bg-main */ + --red-intense: #b60000; + --orange-intense: #904200; + --green-intense: #006800; + --yellow-intense: #605b00; + --blue-intense: #1f1fce; + --magenta-intense: #a8007f; + --purple-intense: #7f10d0; + --cyan-intense: #005f88; + + /* combine with bg-active, bg-inactive */ + --red-active: #8a0000; + --green-active: #004c2e; + --yellow-active: #702f00; + --blue-active: #0030b4; + --magenta-active: #5c2092; + --cyan-active: #003f8a; + + /* subtle goes with fg-dim. intense with fg-main. */ + --red-subtle-bg: #f2b0a2; + --red-intense-bg: #ff9f9f; + --green-subtle-bg: #aecf90; + --green-intense-bg: #5ada88; + --yellow-subtle-bg: #e4c340; + --yellow-intense-bg: #f5df23; + --blue-subtle-bg: #b5d0ff; + --blue-intense-bg: #77baff; + --magenta-subtle-bg: #f0d3ff; + --magenta-intense-bg: #d5baff; + --cyan-subtle-bg: #c0efff; + --cyan-intense-bg: #42cbd4; + + --yellow-nuanced-fg: #3f3000; +} +@media (prefers-color-scheme: dark) { + :root { + --bg-main: #000000; + --bg-dim: #100f10; + --bg-alt: #191a1b; + + --bg-active: #323232; + --bg-inactive: #1e1e1e; + + --bg-special-cold: #203448; + --bg-special-mild: #00322e; + --bg-special-warm: #382f27; + --bg-special-calm: #392a48; + + --bg-hl-alt-intense: #282e46; + + --fg-main: #ffffff; + --fg-dim: #e0e6f0; + --fg-alt: #a8a8a8; + + --fg-active: #f4f4f4; + --fg-inactive: #bfc0c4; + + --fg-special-cold: #c6eaff; + --fg-special-mild: #bfebe0; + --fg-special-warm: #f8dec0; + --fg-special-calm: #fbd6f4; + + /* foregrounds that can be combined with bg-main, bg-dim, bg-alt */ + --red: #ff8059; + --red-alt: #ef8b50; + --red-alt-other: #ff9077; + --red-faint: #ffa0a0; + --red-alt-faint: #f5aa80; + --red-alt-other-faint: #ff9fbf; + + --green: #44bc44; + --green-alt: #70b900; + --green-alt-other: #00c06f; + --green-faint: #78bf78; + --green-alt-faint: #99b56f; + --green-alt-other-faint: #88bf99; + + --yellow: #d0bc00; + --yellow-alt: #c0c530; + --yellow-alt-other: #d3b55f; + --yellow-faint: #d2b580; + --yellow-alt-faint: #cabf77; + --yellow-alt-other-faint: #d0ba95; + + --blue: #2fafff; + --blue-alt: #79a8ff; + --blue-alt-other: #00bcff; + --blue-faint: #82b0ec; + --blue-alt-faint: #a0acef; + --blue-alt-other-faint: #80b2f0; + + --magenta: #feacd0; + --magenta-alt: #f78fe7; + --magenta-alt-other: #b6a0ff; + --magenta-faint: #e0b2d6; + --magenta-alt-faint: #ef9fe4; + --magenta-alt-other-faint: #cfa6ff; + + --cyan: #00d3d0; + --cyan-alt: #4ae2f0; + --cyan-alt-other: #6ae4b9; + --cyan-faint: #90c4ed; + --cyan-alt-faint: #a0bfdf; + --cyan-alt-other-faint: #a4d0bb; + + /* combine with bg-main */ + --red-intense: #fe6060; + --orange-intense: #fba849; + --green-intense: #4fe42f; + --yellow-intense: #f0dd60; + --blue-intense: #4fafff; + --magenta-intense: #ff62d4; + --purple-intense: #9f80ff; + --cyan-intense: #3fdfd0; + + /* combine with bg-active, bg-inactive */ + --red-active: #ffa7ba; + --green-active: #70d73f; + --yellow-active: #dbbe5f; + --blue-active: #34cfff; + --magenta-active: #d5b1ff; + --cyan-active: #00d8b4; + + /* subtle goes with fg-dim. intense with fg-main. */ + --red-subtle-bg: #762422; + --red-intense-bg: #a4202a; + --green-subtle-bg: #2f4a00; + --green-intense-bg: #006800; + --yellow-subtle-bg: #604200; + --yellow-intense-bg: #874900; + --blue-subtle-bg: #10387c; + --blue-intense-bg: #2a40b8; + --magenta-subtle-bg: #49366e; + --magenta-intense-bg: #7042a2; + --cyan-subtle-bg: #00415e; + --cyan-intense-bg: #005f88; + + --yellow-nuanced-fg: #dfdfb0; + } +} diff --git a/resources/css/style.css b/resources/css/style.css new file mode 100644 index 0000000..a7ab098 --- /dev/null +++ b/resources/css/style.css @@ -0,0 +1,104 @@ +@import 'colors.css'; + +::selection { + background-color: var(--bg-hl-alt-intense); +} + +*, *:before, *:after { + box-sizing: border-box; +} + +body { + color: var(--fg-main); + background-color: var(--bg-main); + font-family: "Iosevka Aile", sans-serif; + + margin: 2em auto; + max-width: 90%; + line-height: 1.5; +} + +h1 { color: var(--fg); } +h2 { color: var(--fg-special-warm); } +h3 { color: var(--fg-special-cold); } +h4 { color: var(--fg-special-mild); } +h5 { color: var(--fg-special-calm); } +h6 { color: var(--yellow-nuanced-fg); } + +h1, h2, h3, h4, h5, h6, .title { + font-family: "Iosevka Etoile", serif; +} + +hr { color: var(--fg-alt); } + +a { color: var(--blue-alt-other); } +a:hover, a:focus { + color: var(--fg-dim); + background-color: var(--blue-subtle-bg); +} +a:visited { color: var(--cyan); } +a:visited:hover, a:visited:focus { + color: var(--fg-dim); + background-color: var(--cyan-subtle-bg); +} + +img { + display: block; + max-width: 100%; + box-shadow: var(--bg-inactive) 0px 0px 0px 1px, + var(--fg-inactive) 0px 0px 0px 1px inset; +} + +input, .alert { + color: var(--fg-main); + background-color: var(--bg-main); + border: 1px var(--bg-active) solid; + padding: 0.5em; + margin: 0.4em; + min-width: 30%; +} + +img, .text, .heading { + margin: 3.2em 1em; +} + +.heading { + box-shadow: var(--blue-intense-bg) 0px 0px 0px 2px inset, + var(--bg-main) 10px -10px 0px -3px, + var(--green-subtle-bg) 10px -10px, + var(--bg-main) 20px -20px 0px -3px, + var(--yellow-intense-bg) 20px -20px, + var(--bg-main) 30px -30px 0px -3px, + var(--red-subtle-bg) 30px -30px, + var(--bg-main) 40px -40px 0px -3px, + var(--red-intense-bg) 40px -40px; + padding: 1em; +} + +.text { + box-shadow: var(--magenta-intense-bg) 0px 0px 0px 3px, + var(--green-subtle-bg) 0px 0px 0px 6px, + var(--yellow-intense-bg) 0px 0px 0px 9px, + var(--red-subtle-bg) 0px 0px 0px 12px, + var(--red-intense-bg) 0px 0px 0px 15px; + padding: 1em; +} + +.gallery { + column-count: auto; + column-width: 384px; +} +.gallery img { + transform-origin: center; + transform: perspective(800px) rotateY(2deg); + transition: 0.4s; +} +.gallery:hover img { opacity: 0.4; } +.gallery img:hover { + transform: perspective(800px) rotateY(0deg) scale(1.1); + box-shadow: var(--bg-active) 0px 20px 30px -10px; + opacity: 1; +} +.alert { + background-color: var(--red-subtle-bg); +} |