static/styles.css

   1 /*
   2  * styles.css
   3  * Copyright (c) 2025 Arthur Taft. All Rights Reserved.
   4 */
   5
   6 @font-face {
   7     font-family: "Liberation Mono";
   8     src: url("LiberationMono-Regular.woff2");
   9 }
  10
  11 :root {
  12     /* COLORS */
  13     --rosewater: #f5e0dc;
  14     --flamingo: #f2cdcd;
  15     --pink: #f5c2e7;
  16     --mauve: #cba6f7;
  17     --red: #f38ba8;
  18     --maroon: #eba0ac;
  19     --peach: #fab387;
  20     --yellow: #f9e2af;
  21     --green: #a6e3a1;
  22     --teal: #94e2d5;
  23     --sky: #89dceb;
  24     --sapphire: #74c7ec;
  25     --blue: #89b4fa;
  26     --lavender: #b4befe;
  27     --text: #cdd6f4;
  28     --subtext-1: #bac2de;
  29     --subtext-0: #a6adc8;
  30     --overlay-2: #9399b2;
  31     --overlay-1: #7f849c;
  32     --overlay-0: #6c7086;
  33     --surface-2: #585b70;
  34     --surface-1: #45475a;
  35     --surface-0: #313244;
  36     --base: #1e1e2e;
  37     --mantle: #181825;
  38     --crust: #11111b;
  39
  40     font-family: 'Liberation Mono', sans-serif;
  41 }
  42
  43 /* Style Reset */
  44 * {
  45     padding: 0;
  46     margin: 0;
  47 }
  48
  49 /* Set width so things actually fit */
  50 html {
  51     background-color: var(--base);
  52     display: flex;
  53     height: 100%;
  54 }
  55
  56 body {
  57     margin: 2%;
  58     width: 100%;
  59 }
  60
  61 /* Main page content */
  62 #main-cont {
  63     display: flex;
  64     flex-direction: column;
  65     align-items: center;
  66 }
  67
  68 /* Navbar rules */
  69 #top-nav {
  70     display: flex;
  71     flex-direction row;
  72     margin-bottom: 1%;
  73     margin-left: 25%;
  74     margin-right: 25%;
  75 }
  76
  77 #top-nav .nav-title {
  78     margin-right: 5rem;
  79 }
  80
  81 #top-nav .nav-list {
  82     list-style-type: none;
  83     display: flex;
  84     flex-flow: row wrap;
  85     justify-content: space-between;
  86 }
  87
  88 #top-nav .nav-item {
  89 }
  90
  91 #top-nav .nav-link {
  92     display: block;
  93     padding: 0.5rem 1rem;
  94 }
  95
  96 #top-nav .nav-link:hover {
  97     background-color: var(--surface-1);
  98 }
  99
 100 /* Title rules */
 101 #title-div {
 102     align-self: start;
 103     display: flex;
 104     flex-direction: row;
 105     align-items: start;
 106     margin-left: 25%;
 107     margin-bottom: 1%;
 108 }
 109
 110 #title-div .page-title {
 111     color: var(--green);
 112 }
 113
 114 #title-div .logo {
 115     color: var(--green);
 116     margin-right: 5%;
 117 }
 118
 119 /* Misc container rules (anything goes here) */
 120 #container {
 121     display: flex;
 122     flex-direction: column;
 123     align-items: center;
 124     width: 100%;
 125 }
 126
 127 #container .main-header {
 128     color: var(--lavender);
 129     margin-bottom: 1%;
 130 }
 131
 132 #container .main-subheading {
 133     color: var(--sapphire);
 134     align-self: start;
 135     margin-left: 25%;
 136     margin-bottom: 0.5%;
 137 }
 138
 139 #container .main-text {
 140     color: var(--subtext-1);
 141     align-self: start;
 142     margin-left: 25%;
 143     margin-right: 25%;
 144     margin-bottom: 1%;
 145 }
 146
 147 #container .link {
 148     font-size: 1rem;
 149 }
 150
 151 #footer {
 152     margin-top: 3%;
 153     margin-bottom: 1%;
 154 }
 155
 156 #footer .footer-text {
 157     color: var(--subtext-0);
 158 }
 159
 160 #footer .footer-link {
 161     font-size: 1rem;
 162     padding: 0.15rem 0.25rem;
 163 }
 164
 165 #footer .footer-link:hover {
 166     background-color: var(--surface-1);
 167 }
 168
 169 /* Link rules that enforce theme */
 170 a {
 171     font-size: 1.25rem;
 172     text-decoration: none;
 173 }
 174
 175 a:link {
 176     color: var(--blue);
 177 }
 178
 179 a:visited {
 180     color: var(--blue);
 181 }