lyrs/assets/styles.css

267 lines
3.9 KiB
CSS
Raw Normal View History

2023-11-10 23:30:58 -06:00
/* reset */
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
html {
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
}
2023-11-12 09:56:23 -06:00
body {
2023-11-10 23:30:58 -06:00
margin: 0;
}
ul[class],
ol[class] {
margin: 0;
padding: 0;
list-style: none;
}
html {
line-height: 1.5;
}
body {
min-height: 100dvh;
}
h1,
h2,
h3,
h4,
h5,
h6,
button,
2023-11-12 09:56:23 -06:00
.button,
2023-11-10 23:30:58 -06:00
input,
label {
line-height: 1.1;
}
h1,
h2,
h3,
h4 {
text-wrap: balance;
}
img,
picture {
max-width: 100%;
display: block;
}
input,
button,
2023-11-12 09:56:23 -06:00
.button,
2023-11-10 23:30:58 -06:00
textarea,
select {
font: inherit;
}
textarea:not([rows]) {
min-height: 10em;
/* form-sizing: normal; */
}
:target {
scroll-margin-block: 5ex;
}
/* end reset */
/* global classes */
.flex {
display: flex;
}
.flex-col {
flex-direction: column;
}
2023-11-12 09:56:23 -06:00
.gap {
gap: 1ex;
}
2023-11-10 23:30:58 -06:00
/* end global classes */
:root {
--font: monospace;
2023-11-13 16:16:17 -06:00
--br: 3px;
2023-11-10 23:30:58 -06:00
2023-11-10 23:50:21 -06:00
/* catppuccin latte */
--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;
--bg: var(--Base);
--bg2: var(--Surface0);
--primary: var(--Mauve);
--text: var(--Text);
--link-visited: var(--Lavender);
2023-11-10 23:30:58 -06:00
}
@media (prefers-color-scheme: dark) {
:root {
2023-11-10 23:50:21 -06:00
/* catppuccin mocha */
--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;
2023-11-10 23:30:58 -06:00
}
}
2023-11-12 09:56:23 -06:00
ul,
ol {
padding-left: 2ex;
}
2023-11-13 16:16:17 -06:00
input {
padding: 1ex 2ex;
background-color: var(--Surface0);
border: solid 1px var(--Surface2);
border-radius: var(--br);
color: inherit;
}
input:hover {
border: solid 1px var(--Overlay0);
/* background-color: var(--Surface0); */
}
button {
cursor: pointer;
padding: 1ex 2ex;
background-color: var(--Surface0);
border: 0;
border-radius: var(--br);
color: inherit;
}
button:hover {
background-color: var(--Surface1);
}
2023-11-10 23:30:58 -06:00
html {
background-color: var(--bg);
color: var(--text);
font-family: var(--font);
font-size: 16px;
}
2023-11-12 09:56:23 -06:00
body>header h1 {
margin: 0;
}
2023-11-10 23:30:58 -06:00
body>header {
justify-content: space-between;
/* border-bottom: solid 1px var(--bg2); */
2023-11-12 09:56:23 -06:00
background-color: color-mix(in srgb, var(--Surface0) 30%, transparent);
box-shadow: 0 -1px 1ex var(--Mantle);
2023-11-10 23:30:58 -06:00
}
body>header>nav {
justify-content: space-between;
}
2023-11-10 23:50:21 -06:00
body>header a:not([class]) {
2023-11-10 23:30:58 -06:00
display: flex;
align-items: center;
2023-11-12 09:56:23 -06:00
padding: 1ex 2ex;
2023-11-13 16:16:17 -06:00
/* transition: color 0.1s ease-out, background-color 0.1s ease-out; */
2023-11-10 23:50:21 -06:00
text-decoration: none;
color: var(--primary);
2023-11-12 09:56:23 -06:00
gap: 0.5ex;
}
main.prose {
padding: 1ex;
max-width: 80ch;
}
.button {
background-color: var(--Surface0);
padding: 1ex 2ex;
text-decoration: none;
color: currentColor;
box-shadow: 0 -1px 1px var(--Mantle);
2023-11-13 16:16:17 -06:00
border-radius: var(--br);
2023-11-10 23:30:58 -06:00
}
body>header a:hover {
background-color: var(--primary);
color: var(--bg);
2023-11-12 09:56:23 -06:00
}
.bg-primary {
background-color: var(--primary);
color: var(--bg);
2023-11-13 16:16:17 -06:00
}
form {
display: flex;
flex-direction: column;
gap: 2ex;
}
form>label {
display: flex;
flex-direction: column;
gap: 0.5ex;
2023-11-10 23:30:58 -06:00
}