summaryrefslogtreecommitdiff
path: root/css/header.scss
blob: f30afb08c985f17d9fb904274465e929b74c8217 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
#header {
	$hamburgerHeight:        2rem;
	$sideMenuToggleDuration: 0.5s;

	background-color:           var(--backgroundColour);
	background-size:            cover;
	border-bottom-left-radius:  1rem;
	border-bottom-right-radius: 1rem;
	height:                     fit-content;
	image-rendering:            pixelated;
	overflow:                   hidden;
	position:                   relative;
	user-select:                none;
	width:                      100%;

	body[data-page = "achernar"] & {
		--backgroundColour: #007B34;
		--textColour:       white;

		@media not (prefers-reduced-motion) {
			background-image: url("/image/vertex.webp");
		}
	}

	body[data-page = "agbsum"] & {
		--backgroundColour: #422984;
		--textColour:       #FFFFFF;
	}

	body[data-page = "ax"] & {
		--backgroundColour: #422984;
		--textColour:       #FFFFFF;
	}

	body[data-page = "backspace"] & {
		--backgroundColour: #000000;
		--textColour:       #FFFFFF;
	}

	body[data-page = "benoit"] & {
		--backgroundColour: #BA0035;
		--textColour:       #FFFFFF;

		background-image: url("/svg/benoitBackground.svg");
	}

	body[data-page = "bowshock"] & {
		--backgroundColour: #B61833;
		--textColour:       #FFEEE0;
	}

	body[data-page = "bzipper"] & {
		--backgroundColour: #FFFFFF;
		--textColour:       #B4202D;
	}

	body[data-page = "deltaWorld"] & {
		--backgroundColour: #000000;
		--textColour:       #FFFFFF;
	}

	body[data-page = "dux"] & {
		--backgroundColour: #131313;
		--textColour:       #06fbb2;

		background-image: url("/image/duxBackground.webp");
	}

	body[data-page = "eas"] & {
		--backgroundColour: #01CD93;
		--textColour:       #00291B;
	}

	body[data-page = "luma"] & {
		--backgroundColour: #6051B2;
		--textColour:       #FFFFFF;
	}

	body[data-page = "pollex"] & {
		--backgroundColour: #4D4084;
		--textColour:       #FFFFFF;
	}

	body[data-page = "u8c"] & {
		--backgroundColour: #444747;
		--textColour:       #A9E13D;
	}

	p, a {
		@media not (prefers-reduced-motion) {
			transition-timing-function: ease-in-out;
		}
	}

	a {
		cursor:                pointer;
		font-weight:           bold;
		text-decoration:       underline;
		text-decoration-color: #00000000;

		@media not (prefers-reduced-motion) {
			transition: text-decoration-color 0.125s;
		}

		&:hover {
			text-decoration-color: var(--textColour);
		}
	}

	@import "navBar";
	@import "sideMenu";
	@import "glyph";
}