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
67
68
69
70
71
72
73
74
75
76

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

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

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

	&.visible {
		left: 0;
	}

	section.links {
		display:         flex;
		gap:             1rem;
		justify-content: end;
		max-width:       $contentWidth;
		padding:         1rem;
		width:           100%;

		@media (orientation: portrait) {
			flex-direction: column;
		}

		section {
			display:        flex;
			flex-direction: column;
			gap:            $separatorWidth;

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

			a {
				padding:  0 calc($separatorWidth * 2);
				position: relative;

				&[aria-current = "page"]::after {
					background-color: var(--textColour);
					border-radius:    $separatorWidth;
					content:          "";
					display:          block;
					height:           100%;
					position:         absolute;
					right:            0;
					top:              50%;
					transform:        translateY(-50%);
					width:            $separatorWidth;
				}
			}
		}
	}
}