main.css

:root {
  --padding: 0.75rem;

  color-scheme: dark light;
  font-size: 100%;
  line-sizing: normal;
  font-family: 'Ubuntu', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Cantarell, 'Open Sans', 'Helvetica Neue', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
  line-height: 1.5;
}

*,
::before,
::after {
  box-sizing: border-box;
}

body {
  color: var(--text-color);
  background-color: var(--background-color);
  background-image: url(/static/background.svg);
  background-attachment: fixed;
  margin: 0;
  padding: var(--padding);
  display: flex;
  justify-content: center;
}

@supports (padding: max(1px)) {
  body {
    padding-left: max(var(--padding), env(safe-area-inset-left));
    padding-right: max(var(--padding), env(safe-area-inset-right));
  }
}

a {
  color: var(--link-color);
  text-decoration: none;
}

a:focus,
a:hover,
a:active {
  text-decoration: underline;
}

.header-footer-text,
.footer-link {
  color: var(--text-color);
}

.footer-link {
  text-decoration: underline;
  text-decoration-color: var(--link-color);
}

h1 {
  font-size: 2rem;
  margin: 0.67em 0;
}
h2 { font-size: 1.5rem; }
h3 { font-size: 1.17rem; }
h4 { font-size: 1rem; }
h5 { font-size: 0.83rem; }
h6 { font-size: 0.67rem; }

h1,
h2,
h3,
h4,
h5,
h6,
.heading-effect {
  width: fit-content;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  text-decoration: none;
}

pre,
code,
kbd {
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
}

pre {
  overflow-x: auto;
}

code {
  word-break: break-all;
}

kbd {
  color: #000;
  background-color: lightgray;
  border: solid 1px darkgray;
  padding: -1px;
  border-radius: 0.25rem;
}

article h1 {
  font-size: 1.75rem;
}

.nav-item,
.tag-item {
  border-radius: 0.25rem;
  padding: 0.1rem 0.25rem;
  text-decoration: none;
  white-space: nowrap;
}

.tag-item {
  color: #000;
  background-color: red;
}

.nav-item {
  color: #fff;
  background-color: darkgreen;
}

.nav-item,
.aside-item,
.tag-item {
  font-size: 0.875rem;
}

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav content aside"
    "footer footer footer";
  grid-template-columns: 9rem minmax(0, 1fr) 9rem;
  grid-template-rows: auto 1fr auto;
  max-width: 1024px;
  width: 100%;
}

.container > header {
  grid-area: header;
  border-left: solid 0.1rem var(--border-color);
  border-right: solid 0.1rem var(--border-color);
  border-top: solid 0.1rem var(--border-color);
  border-radius: var(--padding) var(--padding) 0 0;
  background-image: linear-gradient(to bottom, var(--main-background-color-transparent) 0%, var(--main-background-color) 70%);
  display: flex;
  padding: var(--padding);
  justify-content: flex-end;
  flex-direction: column;
}

nav {
  grid-area: nav;
  border-left: solid 0.1rem var(--border-color);
}

main {
  grid-area: content;
}

aside {
  grid-area: aside;
  border-right: solid 0.1rem var(--border-color);
}

footer {
  grid-area: footer;
  border-left: solid 0.1rem var(--border-color);
  border-right: solid 0.1rem var(--border-color);
  border-bottom: solid 0.1rem var(--border-color);
  border-radius: 0 0 var(--padding) var(--padding);
  font-size: 0.875rem;
  padding: var(--padding);
  background-image: linear-gradient(to top, var(--main-background-color-transparent) 0%, var(--main-background-color) 70%);
  display: flex;
  align-items: flex-end;
  position: relative;
}

img {
  max-width: 100%;
  height: auto;
}

iframe[src*="youtube"] {
  width: 100%;
}

abbr {
  text-decoration: underline;
  text-decoration-color: var(--link-color);
}

abbr::after {
  content: "?";
  font-size: 0.8rem;
  position: relative;
  top: -0.2rem;
  color: var(--metadata-color);
  padding-inline-start: 0.1rem;
}

nav,
aside,
main {
  background-color: var(--main-background-color);
  padding: var(--padding);
}

svg.icon {
  width: 1rem;
  height: 1rem;
  vertical-align: middle;
}

nav ul,
aside ul,
footer ul {
  list-style: none;
  padding: 0;
}

footer ul {
  margin-block-end: 0;
}

ul.postlist {
  padding-inline-start: 1.5em;
  list-style-type: square;
}

ul.postlist ::marker {
  color: #ffd700;
}

.author {
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  margin-inline-end: 0.25rem;
  background-image: linear-gradient(to bottom, lightgray 0%, var(--metadata-color) 100%);
  flex-shrink: 0;
}

.metadata {
  display: flex;
  align-items: center;
}

.post-date,
.postlist-date {
  color: var(--metadata-color);
  font-size: 0.875rem;
}

.postlist-date {
  white-space: nowrap;
}

.post-date a {
  word-break: break-all;
}

.webmentions {
  font-size: 0.875rem;
}

.webmention-content {
  max-height: 7rem;
  overflow-y: auto;
}

.edit-on-github {
  text-align: right;
  font-size: 0.875rem;
  color: var(--metadata-color);
}

.validator {
  position: absolute;
  bottom: calc(2 * var(--padding));
  right: var(--padding);
}

dark-mode-toggle {
  --dark-mode-toggle-light-icon: url(/static/moon.svg);
  --dark-mode-toggle-dark-icon: url(/static/sun.svg);
  --dark-mode-toggle-color: var(--text-color);
  --dark-mode-toggle-icon-filter: invert(100%);

  position: absolute;
  bottom: calc(3.5 * var(--padding) + 31px);
  right: var(--padding);
}

.share {
  background-color: var(--link-color);
  background-repeat: no-repeat;
  background-position-y: center;
  border-radius: 0.25rem;
  border: 1px solid var(--main-background-color);
  display: block;
  cursor: pointer;
  color: #fff;
  font-family: inherit;
  font-size: inherit;
  padding: 0.5rem 0.25rem 0.5rem calc(24px + 0.25rem);
}

.share:hover {
  border: 1px solid var(--link-color);
}

.share:active {
  position: relative;
  top: 1px;
}

.share.share-ios {
  background-image: url(/static/share-ios.svg);
}

.share.share-others {
  background-image: url(/static/share-others.svg);
}

.share-image {
  display: none;
  font-size: 0.75rem;
  background-size: calc(24px * 0.75);
  padding: 0.25rem 0.1rem 0.25rem calc(24px * 0.75 + 0.1rem);
}

@media (min-width: 1024px) {
  :root {
    font-size: 112.5%;
  }
}

@media (max-width: 800px) {
  :root {
    --padding: 0.25rem;
  }

  .container {
    grid-template-areas:
      "header"
      "content"
      "nav"
      "aside"
      "footer";
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows:
      auto /* header */
      1fr /* content */
      auto /* nav */
      auto /* aside */
      auto; /* footer */
  }

  aside ul,
  nav ul {
    margin-block-start: 0;
  }

  nav ul {
    display: flex;
  }

  li {
    margin-inline-end: calc(2 * var(--padding));
    margin-block-end: calc(2 * var(--padding));
  }

  h1,
  h2,
  h3 {
    margin: var(--padding) 0;
  }

  nav,
  aside,
  main {
    padding: var(--padding);
    border-left: solid 0.1rem var(--border-color);
    border-right: solid 0.1rem var(--border-color);
  }
}