devlog/public/css/main.css

:root {
  /* Rosé Pine Dawn */
  --rp-base: hsl(32deg, 57%, 95%);
  --rp-surface: hsl(35deg, 100%, 98%);
  --rp-overlay: hsl(33deg, 43%, 91%);
  --rp-muted: hsl(257deg, 9%, 61%);
  --rp-subtle: hsl(248deg, 12%, 52%);
  --rp-text: hsl(248deg, 19%, 40%);
  --rp-love: hsl(343deg, 35%, 55%);
  --rp-gold: hsl(35deg, 81%, 56%);
  --rp-rose: hsl(3deg, 53%, 67%);
  --rp-pine: hsl(197deg, 53%, 34%);
  --rp-foam: hsl(189deg, 30%, 48%);
  --rp-iris: hsl(268deg, 21%, 57%);
  --rp-highlight-low: hsl(25deg, 35%, 93%);
  --rp-highlight-med: hsl(10deg, 9%, 86%);
  --rp-highlight-high: hsl(315deg, 4%, 80%);

  /* consts */
  --const-stripe: hsl(248deg, 21%, 26%);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Rosé Pine */
    --rp-base: hsl(249deg, 22%, 12%);
    --rp-surface: hsl(247deg, 23%, 15%);
    --rp-overlay: hsl(248deg, 25%, 18%);
    --rp-muted: hsl(249deg, 12%, 47%);
    --rp-subtle: hsl(248deg, 15%, 61%);
    --rp-text: hsl(245deg, 50%, 91%);
    --rp-love: hsl(343deg, 76%, 68%);
    --rp-gold: hsl(35deg, 88%, 72%);
    --rp-rose: hsl(2deg, 55%, 83%);
    --rp-pine: hsl(197deg, 49%, 38%);
    --rp-foam: hsl(189deg, 43%, 73%);
    --rp-iris: hsl(267deg, 57%, 78%);
    --rp-highlight-low: hsl(244deg, 18%, 15%);
    --rp-highlight-med: hsl(249deg, 15%, 28%);
    --rp-highlight-high: hsl(248deg, 13%, 36%);

    /* Rosé Pine Moon */
    /* --rp-base: hsl(246deg, 24%, 17%); */
    /* --rp-surface: hsl(248deg, 24%, 20%); */
    /* --rp-overlay: hsl(248deg, 21%, 26%); */
    /* --rp-muted: hsl(249deg, 12%, 47%); */
    /* --rp-subtle: hsl(248deg, 15%, 61%); */
    /* --rp-text: hsl(245deg, 50%, 91%); */
    /* --rp-love: hsl(343deg, 76%, 68%); */
    /* --rp-gold: hsl(35deg, 88%, 72%); */
    /* --rp-rose: hsl(2deg, 66%, 75%); */
    /* --rp-pine: hsl(197deg, 48%, 47%); */
    /* --rp-foam: hsl(189deg, 43%, 73%); */
    /* --rp-iris: hsl(267deg, 57%, 78%); */
    /* --rp-highlight-low: hsl(245deg, 22%, 20%); */
    /* --rp-highlight-med: hsl(247deg, 16%, 30%); */
    /* --rp-highlight-high: hsl(249deg, 15%, 38%); */
  }
}

body {
  background-color: var(--rp-base);
  color: var(--rp-text);
  font-family: sans-serif;
  font-size: 1.6rem;
  line-height: 1.5;
  width: 100vw;
  height: 100vh;

  /* FLEX */
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;

  /* Margins, padding etc */
  padding: 1rem;
  margin: 0;
}

header {
  align-self: flex-start;
  width: 100%;
}

main {
  max-width: 100%;
  flex-grow: 1;

  @media screen and (min-width:600px) {
    max-width: 800px;
  }

}

strong {
  color: var(--rp-gold);
}

em {
  color: var(--rp-rose);
}


header {
  border-bottom: 1rem solid var(--rp-pine);
  margin-bottom: 1rem;

  h1 {
    font-size: 4rem;
    margin-top: 0;
  }
}


header>a {
  text-decoration: none;
}

time {
  color: var(--rp-subtle);
}


footer {
  width: 100%;
  border-top: 1rem solid var(--rp-pine);
  margin-top: 1rem;
}

a {
  color: var(--rp-foam);
  text-decoration: underline dotted;
}

a:visited {
  color: var(--rp-pine);
}

a:hover {
  color: var(--rp-iris);
}

h1 {
  color: var(--rp-text);
  /* background-color: var(--rp-highlight-high); */
  background-image: linear-gradient(to bottom, var(--rp-highlight-high) 80%, var(--rp-base));
  border-radius: 1rem 1rem 0 0;
  padding: 1rem;
  text-shadow: 1px 1px 5px var(--rp-base);
}

h2,
h3,
h4,
h5 {
  color: var(--rp-rose);
}


code {
  background-color: hsl(247deg, 23%, 15%);
  color: var(--rp-foam);
  padding: 0.3em;
  border-radius: 1em;
  font-size: 1.2em;

}

p>code {
  background-color: var(--rp-surface);
}



.highlight {
  padding-left: 2rem;
  background-color: hsl(247deg, 23%, 15%);
  border-radius: 1rem;
}

/* NAV */
nav>ul {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

nav>ul>li {
  list-style-type: none;
}

nav>ul>li>a {
  color: pink;
  font-size: 2rem;
}

/* PAGE LISTS */
.page-list>li {
  padding: 1rem 1rem 2rem 1rem;
  border-top: 1rem solid var(--rp-pine);
  border-bottom: 1rem solid var(--rp-pine);
  border-radius: 1rem;
  margin-bottom: 1rem;
  min-width: 24em;
  list-style-type: none;
}


.center {
  width: fit-content;
  margin: auto;
}

li {
  list-style-type: '>';
  padding: 0.6em;
}

li::marker {
  color: var(--rp-pine);
}

/* TAGS */
.post-tags {
  display: flex;
  gap: 1em;
}

.post-tags>li {
  @media screen and (min-width:600px) {
    font-size: 3rem;
  }

  background-image: linear-gradient(to bottom, var(--rp-overlay) 80%, var(--rp-base));
  padding: 0.4em;
  border-radius: 0.6em 0.6em 0 0;
  list-style-type: none;
}