]> Arthur Taft Gitweb - website.git/blob - static/styles.css
30d16d77d9b696ab43aad76f5998909bc4d26cec
[website.git] / 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 }