diff options
Diffstat (limited to 'src/styles')
| -rw-r--r-- | src/styles/colors.css | 119 | ||||
| -rw-r--r-- | src/styles/styles.css | 140 |
2 files changed, 259 insertions, 0 deletions
diff --git a/src/styles/colors.css b/src/styles/colors.css new file mode 100644 index 0000000..6d568ea --- /dev/null +++ b/src/styles/colors.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); +} diff --git a/src/styles/styles.css b/src/styles/styles.css new file mode 100644 index 0000000..1bf4663 --- /dev/null +++ b/src/styles/styles.css @@ -0,0 +1,140 @@ +@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; + color: var(--foreground); + font-family: var(--font), var(--font-fallback); + + box-sizing: border-box; + margin: 0; + padding: 0; +} +/* </global> */ + +/* <layout> */ +html { + display: flex; + justify-content: center; + min-height: 100vh; + padding: var(--content-padding); + + background-image: url('/img/background.jpg'); + background-repeat: repeat; +} + +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); +} + +main { + height: 100%; + 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) + ); +} +a { + color: var(--regular6); +} +/* </typography> */ + +/* <footer> */ +.blinkies { + display: flex; + justify-content: left; + flex-wrap: wrap; + gap: 10px 10px; +} +/* </footer> */ + +/* <form> */ +textarea { + height: 30rem; + border: 3px solid var(--regular3); + padding: 1rem; + border-radius: 4px; + background: none; + resize: vertical; +} +textarea:hover { + cursor: url('/img/cursor/hover.png'), auto !important; +} +*:focus { + border-color: var(--regular6); + outline: none; + transition: border-color 0.5s; +} +/* </form> */ + +/* <visibility> */ +.maybe-visible { + transition: opacity 0.5s; +} + +.visible { + opacity: 1; +} + +.invisible { + opacity: 0; +} +/* </visibility> */ + +/* <buttons> */ +button { + background: none; + display: block; + border: 3px solid var(--regular3); + border-radius: 4px; + width: 100%; + padding: 8px; +} +button:hover { + cursor: url('/img/cursor/hover.png'), auto !important; + border: 3px solid var(--regular6); + transition: border-color 0.2s; +} +/* </buttons> */ |