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
  36 /* Style Reset */
  37 * {
  38     padding: 0;
  39     margin: 0;
  40 }
  41
  42 /* Set width so things actually fit */
  43 html {
  44     background-color: var(--base);
  45     display: flex;
  46     height: 100%;
  47 }
  48
  49 body {
  50     margin: 2%;
  51     width: 100%;
  52 }
  53
  54 /* Main page content */
  55 #main-cont {
  56     display: flex;
  57     flex-direction: column;
  58     align-items: center;
  59 }
  60
  61 /* Navbar rules */
  62 #top-nav {
  63     display: flex;
  64     flex-direction row;
  65     margin-bottom: 1%;
  66     margin-left: 25%;
  67     margin-right: 25%;
  68 }
  69
  70 #top-nav .nav-title {
  71     margin-right: 5rem;
  72 }
  73
  74 #top-nav .nav-list {
  75     list-style-type: none;
  76     display: flex;
  77     flex-flow: row wrap;
  78     justify-content: space-between;
  79 }
  80
  81 #top-nav .nav-item {
  82 }
  83
  84 #top-nav .nav-link {
  85     display: block;
  86     padding: 0.5rem 1rem;
  87 }
  88
  89 #top-nav .nav-link:hover {
  90     background-color: var(--surface-1);
  91 }
  92
  93 /* Title rules */
  94 #title-div {
  95     align-self: start;
  96     display: flex;
  97     flex-direction: row;
  98     align-items: start;
  99     margin-left: 25%;
 100     margin-bottom: 1%;
 101 }
 102
 103 #title-div .page-title {
 104     color: var(--green);
 105 }
 106
 107 /* Misc container rules (anything goes here) */
 108 #container {
 109     display: flex;
 110     flex-direction: column;
 111     align-items: center;
 112 }
 113
 114 #container .main-header {
 115     color: var(--lavender);
 116 }
 117
 118 /* Link rules that enforce theme */
 119 a {
 120     font-size: 1.25rem;
 121     text-decoration: none;
 122 }
 123
 124 a:link {
 125     color: var(--blue);
 126 }
 127
 128 a:visited {
 129     color: var(--blue);
 130 }