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 }
 125
 126 #container .main-header {
 127     color: var(--lavender);
 128     margin-bottom: 1%;
 129 }
 130
 131 #container .main-subheading {
 132     color: var(--sapphire);
 133     align-self: start;
 134     margin-left: 25%;
 135     margin-bottom: 0.5%;
 136 }
 137
 138 #container .main-text {
 139     color: var(--subtext-1);
 140     align-self: start;
 141     margin-left: 25%;
 142     margin-right: 25%;
 143     margin-bottom: 1%;
 144 }
 145
 146 #container .link {
 147     font-size: 1rem;
 148 }
 149
 150 /* Link rules that enforce theme */
 151 a {
 152     font-size: 1.25rem;
 153     text-decoration: none;
 154 }
 155
 156 a:link {
 157     color: var(--blue);
 158 }
 159
 160 a:visited {
 161     color: var(--blue);
 162 }