css/sideMenu.scss


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

#sideMenu {
	align-items:      center;
	background-color: var(--backgroundColour);
	display:          flex;
	flex-direction:   column;
	gap:              1rem;
	height:           calc(100% + 1rem);
	justify-content:  space-between;
	left:             100%;
	overflow:         hidden;
	padding:          1rem;
	padding-bottom:   2rem;
	padding-top:      calc(var(--hamburgerHeight) + 2rem);
	position:         absolute;
	width:            100%;
	z-index:          127;

	body[data-page = "achernar"] & {
		background-color: var(--backgroundColour);
	}

	@media (pointer: fine) and (not (prefers-reduced-motion)) {
		transition:                 left $slideDuration;
		transition-timing-function: ease-in-out;
	}

	@media (pointer: coarse) {
		font-size: 2em;
		overflow:  scroll;
	}

	&.visible {
		left: 0;
	}

	div.links {
		display:    flex;
		gap:        1rem;
		max-width:  $contentWidth;
		padding:    1rem;
		width:      100%;

		@media (pointer: coarse) {
			flex-direction: column;
		}

		section {
			display:        flex;
			flex-direction: column;
			gap:            0.25rem;

			p {
				background-color: var(--textColour);
				border-radius:    0.25rem;
				color:            var(--backgroundColour);
				font-weight:      bold;
				padding:          0.25rem 1rem;
				text-align:       center;
			}

			a {
				padding: 0.25rem;
			}
		}
	}
}