css/page.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
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
114
115
116
117
118
119

#page {
	margin:    auto;
	max-width: calc($contentWidth + $padding * 2);
	padding:   $padding;

	h1 {
		font-family: $specialFont;
		font-size:   2em;
		font-weight: bold;
		width:       100%;

		&:nth-of-type(even) {
			text-align: right;
		}

		&::after {
			@include separator;

			margin-top: $separatorWidth;
		}

		a.anchor {
			aspect-ratio:     1;
			background-color: var(--textColour);
			display:          inline-block;
			mask-image:       url("/svg/glyph/chain.svg");
			mask-size:        cover;
			vertical-align:   middle;
			width:            0.5em;
		}
	}

	section {
		line-height: 2em;
		max-width:   calc($contentWidth / 2 - $padding);
		text-align:  justify;
		width:       100%;

		&:nth-of-type(even):not(.fullWidth) {
			margin-left:     auto;
			text-align-last: right;
		}

		&.fullWidth {
			max-width:  100%;
			text-align: center;
		}

		p.codeblock {
			background-color: var(--textColour);
			border-radius:    calc($padding / 2);
			color:            var(--backgroundColour);
			font-family:      $codeFont;
			line-height:      normal;
			padding:          $padding;
			text-align:       left;
			text-align-last:  left;
			white-space:      preserve;
		}

		p.note {
			font-style:      italic;
			font-weight:     bold;
			text-align:      left;
			text-align-last: left;

			&::before {
				content: "\2014\0020Note:\0020";
			}
		}

		code {
			$padding: 0.25rem;

			background-color: var(--foregroundColour);
			border-radius:    calc($padding / 2);
			padding:          $padding;
		}

		ul {
			background-color: var(--foregroundColour);
			border-radius:    calc($padding / 2);
			display:          block;
			padding:          $padding;
			text-align:       left;
			text-align-last:  left;
			width:            100%;
		}

		div.image {
			position: relative;
			width:    100%;

			a {
				border-radius: calc($padding / 2);
				display:       block;
				position:      relative;
			}

			img {
				border-radius: calc($padding / 2);
				display:       block;
				width:         100%;

				&.blur {
					filter:         blur($padding) saturate(200%);
					pointer-events: none;
					position:       absolute;
				}
			}
		}
	}

	h1 + section, section + h1 {
		margin-top: $padding;
	}

	@import "overview";
}