diff options
Diffstat (limited to 'public/styles')
| -rw-r--r-- | public/styles/styles.css | 87 | ||||
| -rw-r--r-- | public/styles/theme.css | 119 |
2 files changed, 206 insertions, 0 deletions
diff --git a/public/styles/styles.css b/public/styles/styles.css new file mode 100644 index 0000000..5208191 --- /dev/null +++ b/public/styles/styles.css @@ -0,0 +1,87 @@ +@import url("./theme.css"); + +@font-face { + font-family: "fantasque"; + src: url("/fonts/fantasque.woff"); +} + +:root { + --content-padding: 2rem; + --border-radius: 10px; + + --font: "fantasque"; + --font-fallback: monospace; +} + +/* <global> */ +* { + cursor: url("/img/cursor/regular.png"), auto !important; + + box-sizing: border-box; + margin: 0; + padding: 0; +} +/* </global> */ + +/* <layout> */ +html { + display: flex; + justify-content: center; + min-height: 100vh; + padding: var(--content-padding); + + color: var(--foreground); + font-family: var(--font), var(--font-fallback); + + background-image: url("/img/background.gif"); + background-repeat: no-repeat; + background-size: cover; + background-position: center center; + background-clip: border-box; + image-rendering: pixelated; +} + +body { + display: grid; + grid-template-rows: auto 1fr auto; + + padding: var(--content-padding); + padding-left: auto; + border-radius: var(--border-radius); + min-height: calc(100vh - 2 * var(--content-padding)); + + width: 100%; + max-width: 1200px; + background-color: var(--background-body); + backdrop-filter: blur(16px); + + overflow-y: scroll; +} +/* </layout> */ + +/* <typography> */ +h1 { + font-size: 3rem; +} +h2 { + font-size: 2rem; +} +h3 { + font-size: 1.45rem; +} +hr { + margin: 1rem; + border: 0; + height: 1px; + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.1), var(--foreground), rgba(0, 0, 0, 0.1)); +} +/* </typography> */ + +/* <footer> */ +.blinkies { + display: flex; + justify-content: left; + flex-wrap: wrap; + gap: 10px 10px; +} +/* </footer> */ diff --git a/public/styles/theme.css b/public/styles/theme.css new file mode 100644 index 0000000..6d568ea --- /dev/null +++ b/public/styles/theme.css @@ -0,0 +1,119 @@ +:root { + --background: #282828; + --background-body: #282828da; + --foreground: #ebdbb2; + --regular0: #282828; + --regular1: #cc241d; + --regular2: #98971a; + --regular3: #d79921; + --regular4: #458588; + --regular5: #b16286; + --regular6: #689d6a; + --regular7: #a89984; + --bright0: #928374; + --bright1: #fb4934; + --bright2: #b8bb26; + --bright3: #fabd2f; + --bright4: #83a598; + --bright5: #d3869b; + --bright6: #8ec07c; + --bright7: #ebdbb2; +} + +.regular0 { + color: var(--regular0); +} +.regular1 { + color: var(--regular1); +} +.regular2 { + color: var(--regular2); +} +.regular3 { + color: var(--regular3); +} +.regular4 { + color: var(--regular4); +} +.regular5 { + color: var(--regular5); +} +.regular6 { + color: var(--regular6); +} +.regular7 { + color: var(--regular7); +} +.bright0 { + color: var(--bright0); +} +.bright1 { + color: var(--bright1); +} +.bright2 { + color: var(--bright2); +} +.bright3 { + color: var(--bright3); +} +.bright4 { + color: var(--bright4); +} +.bright5 { + color: var(--bright5); +} +.bright6 { + color: var(--bright6); +} +.bright7 { + color: var(--bright7); +} + +.regular0-bg { + background-color: var(--regular0); +} +.regular1-bg { + background-color: var(--regular1); +} +.regular2-bg { + background-color: var(--regular2); +} +.regular3-bg { + background-color: var(--regular3); +} +.regular4-bg { + background-color: var(--regular4); +} +.regular5-bg { + background-color: var(--regular5); +} +.regular6-bg { + background-color: var(--regular6); +} +.regular7-bg { + background-color: var(--regular7); +} +.bright0-bg { + background-color: var(--bright0); +} +.bright1-bg { + background-color: var(--bright1); +} +.bright2-bg { + background-color: var(--bright2); +} +.bright3-bg { + background-color: var(--bright3); +} +.bright4-bg { + background-color: var(--bright4); +} +.bright5-bg { + background-color: var(--bright5); +} +.bright6-bg { + background-color: var(--bright6); +} +.bright7-bg { + background-color: var(--bright7); +} |