diff options
Diffstat (limited to 'css')
| -rw-r--r-- | css/terminal.css | 180 |
1 files changed, 180 insertions, 0 deletions
diff --git a/css/terminal.css b/css/terminal.css new file mode 100644 index 0000000..d8dc3bd --- /dev/null +++ b/css/terminal.css @@ -0,0 +1,180 @@ +@font-face { + font-family: "DejaVu Sans Mono"; + src: url("../files/fonts/dejavu/ttf/DejaVuSansMono.ttf"); +} +:root { + --fg: #90ff90; + --shadow: 0 0 3px #80ffc066, 0 0 5px #0f63; + --link: #3e3; + --visited: #b9ffb0; + + --bg: #1d2021; + --bg2: black; + --selection: #466639; + + --font-body: "DejaVu Sans", "Bitstream Vera Sans", "Verdana", sans-serif; + --font-mono: "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Menlo", monospace; + --font-accent: var(--font-mono); +} +.green { + --fg: #86ff86; /* hue 120, contrast 13:1 */ + --shadow: 0 0 3px #80ffc066, 0 0 5px #0f63; + --link: #42f042; /* hue 120, contrast 10.75:1 */ + --visited: #b7ffaf; /* hue 114, contrast 14:1 */ + + --bg: #1d2021; + --selection: #466639; +} +.purple { + --fg: #f099ff; /* hue 291, contrast 8:1 */ + --shadow: 0 0 3px #ff80f166, 0 0 5px #f0f3; + --link: #ff96e2; /* hue 317, contrast 8:1 */ + --visited: #ff82d2; /* hue 322, contrast 7:1 */ + + --bg: #291f33; + --selection: #663963; +} +.cyan { + --fg: #90ffff; /* hue 180, contrast 14:1 */ + --shadow: 0 0 3px #0ff6, 0 0 5px #0ff3; + --link: #00f5f5; /* hue 180, contrast 12:1 */ + --visited: #83baf1; /* hue 210, contrast 8:1 */ + + --bg: #1d2021; + --selection: #466639; +} + +/* UTILITY CLASSES */ +.clearfix::after, section::after { clear:both; display:block; content: ""; } +.inline { display:inline } +/* MAIN STYLES*/ +html { + display: flex; + flex-direction: column; + min-height: 100vh; +} +body { + background-color: var(--bg); + background: linear-gradient(var(--bg) 0%, var(--bg2) 33%, var(--bg) 66%); + background-size: 100% 3px; + color: var(--fg); + text-shadow: var(--shadow); + font: 100%/1.6 var(--font-body); + margin: auto; + max-width: 75ch; + word-spacing: .05em; +} +::selection { + background: var(--selection); + color: white; + text-shadow: none; +} +a { + color: var(--link); +} +a:visited { + color: var(--visited); +} +a:hover, +a:focus { + text-decoration: none; +} +code, +pre { + font: 100%/1.25 var(--font-mono); +} +footer { + font: 75%/1.25 var(--font-accent); +} +h1 { + font: bold 200%/1 var(--font-accent); + margin: 0.5em 0 0 0; + border-bottom: 0.25em solid; +} +h1::after { + content: "█"; + display: inline-block; + animation: blink 2.4s steps(2) infinite; +} +@keyframes blink { + 0% { + opacity: 0; + } +} +@media(prefers-reduced-motion: reduce) { + h1::after { + animation: none !important; + opacity: 50%; + } +} +h2 { + font: bold 141%/1 var(--font-accent); + margin: 0.4em 0; +} +h3 { + font: bold 117%/1 var(--font-accent); +} +/* NAVIGATION */ +header > nav > ul { + font: 100%/1.5 var(--font-accent); + list-style-type: none; + margin: 0 0 0.4em 0; + padding: 0; +} +header > nav > ul > li { + display: inline; +} +header > nav > ul > li > a { + padding: 0.4em; +} +header > nav a.active { + background: var(--fg); + color: var(--bg); +} +/* SECTION */ +section { + border-bottom: 1px solid; +} +/* IMAGES */ +figure { + border: 1px solid; + margin: auto; + padding: 0.4em; + text-align: center; + width: min-content; +} +figure.fullwidth { + width: initial; +} +figure.fullwidth > img { + max-width: 100%; +} +/* DETAILS */ +details { + border: 1px solid; + padding: 0.4em; +} +/* TABLES */ +table { + margin: 0.4em; +} +tr:nth-of-type(odd) { + background: var(--bg); +} +tr:nth-of-type(even) { + background: var(--bg2); +} +tr td:first-child { + white-space: nowrap; +} +td { + padding: 0 0.4em; +} +th { + border: 1px solid; + padding: 0 0.4em; +} +table.center-cells td, +table.center-cells th { + text-align: center; +} |