eleventy-homepage/_src/style.css

/* VARIABLES */

:root {
  --header-background: #282a36;
  --nav-background: #282a36;
  --footer-background: #282a36;
  --content-background: #44475a;
  --table-borders: #f8f8f2;
  --link-not-visited: #50fa7b;
  --link-hover: #f1fa8c;
  --link-visited: #ffb86c;
  --font-color: #f8f8f2;
}

/* STYLING */

* {
  box-sizing: border-box;
}

body {
  font-family: 'Fira Sans', 'Open Sans', 'sans-serif';
  font-size: 13pt;
  color: var(--font-color);
  background-color: var(--content-background);
  padding: 0;
}

a:link {
  color: var(--link-not-visited);
}

a:visited {
  color: var(--link-visited);
}

a:hover {
  color: var(--link-hover);
}

h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
  font-family: 'Open Sans';
}

h1, h2 {
  font-size: 20pt;
}

h1 {
  color: #bd93f9;
}

h2, h3 {
  font-style: italic;
  color: #ff79c6;
}

h3, h4 {
  font-size: 18pt;
}

h4 {
  font-style: italic;
}

h5, h6 {
  font-size: 16pt;
}

.header,
.footer,
.column {
  margin: 0;
}

.header {
  background-color: var(--header-background);
  padding: 4px;
  text-align: center;
  position: sticky;
  z-index: 999;
  top: 0;
}

.website-title {
  font-size: 40pt;
  color: #6272a4;
}

/* Create three unequal columns that floats next to each other */
.column {
  float: left;
  padding: 10px;
  overflow: auto;
}

.column.right {
  width: 75%;
  background-color: var(--content-background);
}

.column.left {
  width: 25%;
  background-color: var(--nav-background);
  left: 0;
  margin-top: 20px;
  margin-bottom: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
  font-size: 1px;
  height: 1px;
  background-color: var(--content-background);
}

/* Style the footer */
.footer {
  background-color: var(--footer-background);
  padding: 10px;
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  bottom: 0;
  position: static;
  width: 100%;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}

table {
  border-collapse: collapse;
}

td, th {
  border: 1px solid white;
  padding: 5px !important;
}

.f-table-td {
  float: left;
  padding: 20px;
  display: table-cell;
}

.f-table {
  border: none;
  width: 100% !important;
  max-height: max-content !important;
}

hr {
  width: 100%;
}

/* navigation */

:where([role="list"]) {
  list-style: none;
  padding-inline-start: 0;
}

.nav-list {
  color: var(--link-not-visited);
  user-select: none;
}

.nav-list a {
  color: inherit;
  text-decoration: none;
  display: block;
}

.nav-list summary {
  cursor: pointer;
  display: block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512'%3E%3Cpath d='M118.6 105.4l128 127.1C252.9 239.6 256 247.8 256 255.1s-3.125 16.38-9.375 22.63l-128 127.1c-9.156 9.156-22.91 11.9-34.88 6.943S64 396.9 64 383.1V128c0-12.94 7.781-24.62 19.75-29.58S109.5 96.23 118.6 105.4z' fill='%236A89FE'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 1.125em 1.125em;
}

.nav-list details[open] > summary {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z' fill='%236A89FE'/%3E%3C/svg%3E");
}

.nav-list summary::-webkit-details-marker {
  display: none;
}

.nav-list a,
.nav-list summary {
  padding-block: .375rem;
  transition: color .1s ease-in-out;
}

.nav-list a:hover,
.nav-list a[aria-current="page"],
.nav-list summary:hover,
.nav-list .is-active summary {
  color: var(--link-hover);
}

.nav-list details > [role="list"] {
  padding-inline-start: .75rem;
}

.nav-list > li,
.nav-list .is-active summary {
  position: relative;
}

.nav-list > li > a[aria-current="page"]:before,
.nav-list .is-active summary:before {
  content: "";
  display: block;
  width: 4px;
  height: 100%;
  background-color: #6A89FE;
  position: absolute;
  inset-inline-start: -2rem;
  inset-block-start: 0;
  inset-block-end: 0;
}