static/styles.css

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