lyrs/assets/styles.css

/* 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;
}

body {
  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,
.button,
input,
label {
  line-height: 1.1;
}

h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

img,
picture {
  max-width: 100%;
  display: block;
}

input,
button,
.button,
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;
}

.gap {
  gap: 1ex;
}

/* end global classes */

:root {
  --font: monospace;
  --br: 3px;

  /* 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);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* 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;
  }
}

ul,
ol {
  padding-left: 2ex;
}

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);
}

html {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
}

body>header h1 {
  margin: 0;
}

body>header {
  justify-content: space-between;
  /* border-bottom: solid 1px var(--bg2); */
  background-color: color-mix(in srgb, var(--Surface0) 30%, transparent);
  box-shadow: 0 -1px 1ex var(--Mantle);
}

body>header>nav {
  justify-content: space-between;
}

body>header a:not([class]) {
  display: flex;
  align-items: center;
  padding: 1ex 2ex;
  /* transition: color 0.1s ease-out, background-color 0.1s ease-out; */
  text-decoration: none;
  color: var(--primary);
  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);
  border-radius: var(--br);
}

body>header a:hover {
  background-color: var(--primary);
  color: var(--bg);
}

.bg-primary {
  background-color: var(--primary);
  color: var(--bg);
}

form {
  display: flex;
  flex-direction: column;
  gap: 2ex;
}

form>label {
  display: flex;
  flex-direction: column;
  gap: 0.5ex;
}