2024-12-13 23:26:07 -05:00
|
|
|
/* Load fonts */
|
|
|
|
@font-face { font-family: "Ubuntu Mono"; font-display: block; font-weight: 400; font-style: normal; src: url("font/UbuntuMono-Regular.ttf") format("truetype"); }
|
|
|
|
@font-face { font-family: "Ubuntu Mono"; font-display: block; font-weight: 400; font-style: italic; src: url("font/UbuntuMono-Italic.ttf") format("truetype"); }
|
|
|
|
@font-face { font-family: "Ubuntu Mono"; font-display: block; font-weight: 700; font-style: normal; src: url("font/UbuntuMono-Bold.ttf") format("truetype"); }
|
|
|
|
@font-face { font-family: "Ubuntu Mono"; font-display: block; font-weight: 700; font-style: italic; src: url("font/UbuntuMono-BoldItalic.ttf") format("truetype"); }
|
|
|
|
|
|
|
|
/* Define variables */
|
|
|
|
html { --rosewater: #f5e0dc; --flamingo: #f2cdcd; --pink: #f5c2e7; --mauve: #cba6f7; --red: #f38ba8; --maroon: #eba0ac; --peach: #fab387; --yellow: #f9e2af; --green: #a6e3a1; --teal: #94e2d5; --sky: #89dceb; --sapphire: #74c7ec; --blue: #89b4fa; --lavender: #b4befe; --text: #cdd6f4; --subtext1: #bac2de; --subtext0: #a6adc8; --overlay2: #9399b2; --overlay1: #7f849c; --overlay0: #6c7086; --surface2: #585b70; --surface1: #45475a; --surface0: #313244; --base: #1e1e2e; --mantle: #181825; --crust: #11111b; --base-low-op: #1e1e2ed0 }
|
|
|
|
html[data-light] { --rosewater: #dc8a78; --flamingo: #dd7878; --pink: #ea76cb; --mauve: #8839ef; --red: #d20f39; --maroon: #e64553; --peach: #fe640b; --yellow: #df8e1d; --green: #40a02b; --teal: #179299; --sky: #04a5e5; --sapphire: #209fb5; --blue: #1e66f5; --lavender: #7287fd; --text: #4c4f69; --subtext1: #5c5f77; --subtext0: #6c6f85; --overlay2: #7c7f93; --overlay1: #8c8fa1; --overlay0: #9ca0b0; --surface2: #acb0be; --surface1: #bcc0cc; --surface0: #ccd0da; --base: #eff1f5; --mantle: #e6e9ef; --crust: #dce0e8; --base-low-op: #eff1f5b0}
|
|
|
|
|
|
|
|
/* Actual styles */
|
|
|
|
:root {
|
|
|
|
font-size: 18px;
|
|
|
|
background-color: var(--base);
|
|
|
|
color: var(--text);
|
|
|
|
}
|
|
|
|
|
2024-12-14 21:44:01 -05:00
|
|
|
::-webkit-scrollbar {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
2024-12-13 23:26:07 -05:00
|
|
|
::selection {
|
|
|
|
background-color: var(--text);
|
|
|
|
color: var(--base);
|
|
|
|
text-decoration-color: var(--base);
|
|
|
|
}
|
|
|
|
|
|
|
|
.green { color: var(--green); }
|
|
|
|
.blue { color: var(--blue); }
|
|
|
|
.pink { color: var(--pink); }
|
|
|
|
|
|
|
|
a:link,
|
|
|
|
a:visited {
|
|
|
|
color: var(--pink);
|
|
|
|
}
|
|
|
|
|
|
|
|
a:focus {
|
|
|
|
outline: 1px solid var(--pink);
|
|
|
|
}
|
|
|
|
|
|
|
|
.green::selection, .green ::selection { background-color: var(--green); }
|
|
|
|
.blue::selection, .blue ::selection { background-color: var(--blue); }
|
|
|
|
|
|
|
|
.cursor::selection {
|
|
|
|
color: var(--text);
|
|
|
|
background-color: var(--text);
|
|
|
|
}
|
|
|
|
|
|
|
|
a:link::selection,
|
|
|
|
a:visited::selection,
|
|
|
|
.pink::selection,
|
|
|
|
a:link ::selection,
|
|
|
|
a:visited ::selection,
|
|
|
|
.pink ::selection {
|
|
|
|
background-color: var(--pink);
|
|
|
|
}
|
|
|
|
|
|
|
|
body {
|
|
|
|
margin: 0;
|
|
|
|
font-family: "Ubuntu Mono";
|
|
|
|
min-height: calc(100vh + 40px);
|
|
|
|
max-width: 100vw;
|
|
|
|
overflow-x: hidden;
|
|
|
|
position: relative;
|
|
|
|
}
|
|
|
|
|
|
|
|
noscript {
|
|
|
|
color: var(--red);
|
|
|
|
}
|
|
|
|
|
|
|
|
header {
|
|
|
|
width: calc(100vw - 60px);
|
|
|
|
padding: 10px 30px;
|
|
|
|
min-height: 40px;
|
|
|
|
display: block;
|
|
|
|
background-color: var(--crust);
|
|
|
|
}
|
|
|
|
|
|
|
|
header > nav {
|
|
|
|
display: flex;
|
|
|
|
flex-wrap: nowrap;
|
|
|
|
flex-direction: row;
|
|
|
|
gap: 10px;
|
|
|
|
align-items: center;
|
|
|
|
width: calc(100vw - 60px);
|
|
|
|
min-height: 40px;
|
|
|
|
max-width: 1500px;
|
|
|
|
margin: 0 auto;
|
|
|
|
}
|
|
|
|
|
|
|
|
.cursor {
|
|
|
|
color: var(--text);
|
|
|
|
background-color: var(--text);
|
|
|
|
animation: cursor-blink 1s infinite;
|
|
|
|
}
|
|
|
|
|
|
|
|
pre {
|
|
|
|
font-size: 18px;
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes cursor-blink {
|
|
|
|
0% { opacity: 100%; }
|
|
|
|
50% { opacity: 100%; }
|
|
|
|
50.001% { opacity: 0%; }
|
|
|
|
100% { opacity: 0%; }
|
|
|
|
}
|
|
|
|
|
|
|
|
.header-title {
|
|
|
|
margin-right: auto;
|
|
|
|
font-weight: 700;
|
|
|
|
}
|
|
|
|
|
|
|
|
.cat {
|
|
|
|
position: absolute;
|
|
|
|
top: 25vh;
|
|
|
|
left: 25vw;
|
|
|
|
width: 50vw;
|
|
|
|
height: 50vh;
|
|
|
|
object-fit: contain;
|
|
|
|
pointer-events: none;
|
|
|
|
z-index: -1;
|
|
|
|
user-select: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
.window-container {
|
|
|
|
--window-border-radius: 15px;
|
|
|
|
background-color: var(--base-low-op);
|
|
|
|
backdrop-filter: blur(10px);
|
|
|
|
position: absolute;
|
|
|
|
border-radius: var(--window-border-radius);
|
|
|
|
border: 1px solid var(--surface0);
|
|
|
|
transition: border-color 0.25s;
|
|
|
|
}
|
|
|
|
|
|
|
|
.window-container:hover,
|
|
|
|
.window-container:focus,
|
|
|
|
.window-container:focus-within {
|
|
|
|
border-color: var(--pink);
|
|
|
|
outline: none;
|
|
|
|
transition: border-color 0.1s;
|
|
|
|
}
|
|
|
|
|
|
|
|
.window-outer {
|
|
|
|
padding: 10px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.window-header {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: row;
|
|
|
|
flex-wrap: nowrap;
|
|
|
|
gap: 10px;
|
|
|
|
background-color: var(--mantle);
|
|
|
|
height: 35px;
|
|
|
|
font-size: 14px;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
|
|
|
padding: 0 10px;
|
|
|
|
border-top-left-radius: var(--window-border-radius);
|
|
|
|
border-top-right-radius: var(--window-border-radius);
|
|
|
|
cursor: pointer;
|
|
|
|
user-select: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
.window-header-title {
|
|
|
|
text-wrap: nowrap;
|
|
|
|
margin: 0 auto;
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
overflow-x: hidden
|
|
|
|
}
|
|
|
|
|
|
|
|
.window-header-button {
|
|
|
|
background-color: var(--surface2);
|
|
|
|
border-radius: 8px;
|
|
|
|
height: 16px;
|
|
|
|
width: 16px;
|
|
|
|
min-width: 16px;
|
|
|
|
display: inline-block;
|
|
|
|
transition: background-color 0.25s;
|
|
|
|
}
|
|
|
|
|
|
|
|
.window-header-button.blank {
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.window-container:hover .window-header-button,
|
|
|
|
.window-container:focus .window-header-button,
|
|
|
|
.window-container:focus-within .window-header-button {
|
|
|
|
transition: background-color 0.1s;
|
|
|
|
}
|
|
|
|
|
|
|
|
.window-container:hover .window-header-button.minimize,
|
|
|
|
.window-container:focus .window-header-button.minimize,
|
|
|
|
.window-container:focus-within .window-header-button.minimize {
|
|
|
|
background-color: var(--yellow);
|
|
|
|
}
|
|
|
|
|
|
|
|
.window-container:hover .window-header-button.fullscreen,
|
|
|
|
.window-container:focus .window-header-button.fullscreen,
|
|
|
|
.window-container:focus-within .window-header-button.fullscreen {
|
|
|
|
background-color: var(--green);
|
|
|
|
}
|
|
|
|
|
|
|
|
.window-container:hover .window-header-button.close,
|
|
|
|
.window-container:focus .window-header-button.close,
|
|
|
|
.window-container:focus-within .window-header-button.close {
|
|
|
|
background-color: var(--red);
|
|
|
|
}
|
|
|
|
|
|
|
|
.window {
|
|
|
|
overflow: scroll;
|
|
|
|
}
|
|
|
|
|
|
|
|
.buttons-88x31 {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: row;
|
|
|
|
flex-wrap: wrap;
|
|
|
|
gap: 5px;
|
|
|
|
}
|
|
|
|
|
2024-12-18 17:03:54 -05:00
|
|
|
.buttons-88x31 img {
|
|
|
|
width: 88px;
|
|
|
|
height: 31px;
|
|
|
|
}
|
|
|
|
|
2024-12-13 23:26:07 -05:00
|
|
|
footer {
|
|
|
|
position: absolute;
|
|
|
|
bottom: 0;
|
|
|
|
left: 0;
|
|
|
|
width: calc(100vw - 100px);
|
|
|
|
background-color: var(--crust);
|
|
|
|
padding: 10px 50px;
|
|
|
|
}
|
|
|
|
|
2024-12-14 21:44:01 -05:00
|
|
|
@media (max-width: 890px) {
|
|
|
|
header div.hyphen {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@media (max-width: 775px) {
|
2024-12-13 23:26:07 -05:00
|
|
|
footer {
|
|
|
|
width: calc(100vw - 20px);
|
|
|
|
padding: 10px;
|
|
|
|
}
|
|
|
|
|
2024-12-14 21:44:01 -05:00
|
|
|
header {
|
2024-12-13 23:26:07 -05:00
|
|
|
width: calc(100vw - 20px);
|
|
|
|
padding: 10px;
|
|
|
|
}
|
|
|
|
|
2024-12-14 21:44:01 -05:00
|
|
|
header > nav {
|
|
|
|
display: block;
|
2024-12-13 23:26:07 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
header div:not(.header-title, .hyphen) {
|
|
|
|
display: inline-block;
|
|
|
|
text-wrap: nowrap;
|
|
|
|
}
|
|
|
|
}
|