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     font-size: 1.25rem;
  93     display: block;
  94     padding: 0.5rem 1rem;
  95 }
  96
  97 #top-nav .nav-link:hover {
  98     background-color: var(--surface-1);
  99 }
 100
 101 /* Title rules */
 102 #title-div {
 103     align-self: start;
 104     display: flex;
 105     flex-direction: row;
 106     align-items: start;
 107     margin-left: 25%;
 108     margin-bottom: 1%;
 109 }
 110
 111 #title-div .page-title {
 112     color: var(--green);
 113 }
 114
 115 #title-div .logo {
 116     color: var(--green);
 117     margin-right: 5%;
 118 }
 119
 120 /* Misc container rules (anything goes here) */
 121 #container {
 122     display: flex;
 123     flex-direction: column;
 124     align-items: center;
 125     width: 100%;
 126 }
 127
 128 #container .main-header {
 129     color: var(--lavender);
 130     margin-bottom: 1%;
 131 }
 132
 133 #container .main-subheading {
 134     color: var(--sapphire);
 135     align-self: start;
 136     margin-left: 25%;
 137     margin-bottom: 0.5%;
 138 }
 139
 140 #container .main-text {
 141     color: var(--subtext-1);
 142     align-self: start;
 143     margin-left: 25%;
 144     margin-right: 25%;
 145     margin-bottom: 1%;
 146 }
 147
 148 #container .pgp-link {
 149     padding: 0.25rem 0.25rem;
 150 }
 151
 152 #container .pgp-link:hover {
 153     background-color: var(--surface-1);
 154 }
 155
 156 #footer {
 157     margin-top: 3%;
 158     margin-bottom: 1%;
 159     display: flex;
 160     flex-direction: column;
 161     justify-content: start;
 162 }
 163
 164 #footer .footer-text {
 165     color: var(--subtext-0);
 166 }
 167
 168 #footer .copy-text {
 169     color: var(--subtext-0);
 170     align-self: center;
 171 }
 172
 173 #footer .footer-link {
 174     font-size: 1rem;
 175     padding: 0.15rem 0.25rem;
 176 }
 177
 178 #footer .footer-link:hover {
 179     background-color: var(--surface-1);
 180 }
 181
 182 /* Link rules that enforce theme */
 183 a {
 184     text-decoration: none;
 185 }
 186
 187 a:link {
 188     color: var(--blue);
 189 }
 190
 191 a:visited {
 192     color: var(--blue);
 193 }
 194
 195 @media (min-width:300px) {
 196     #top-nav {
 197         margin-left: 0%;
 198         margin-right: 0%;
 199     }
 200
 201     #title-div {
 202         margin-left: 0%;
 203         margin-right: 0%;
 204     }
 205
 206     #container .main-text {
 207         margin-left: 1%;
 208         margin-right: 1%;
 209     }
 210 }
 211
 212 @media (min-width:900px) {
 213     #top-nav {
 214         margin-left: 25%;
 215         margin-right: 25%;
 216     }
 217
 218     #title-div {
 219         margin-left: 25%;
 220     }
 221
 222     #container .main-text {
 223         margin-left: 25%;
 224         margin-right: 25%;
 225     }
 226 }