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

div.page {
	background-color:       $backgroundColour;
	border-radius:          1rem;
	border-top-left-radius: 0;
	border-top-right-radius:0;
	border-top-color:       $foregroundColour;
	border-top-style:       solid;
	border-top-width:       calc(1rem / 3);
	color:                  $foregroundColour;
	margin:                 0 auto;
	max-width:              $maximumPageWidth;
	min-width:              $minimumPageWidth;
	padding:                1rem 2rem;

	p.heading {
		font-family:$sansSerifFont;
		font-size:  3rem;
		font-weight:bold;
		text-align: center;
	}

	div.section {
		& + div.section {
			&::before {
				background-color:$bodyColour;
				border-radius:   calc(1rem / 3 / 3);
				content:         "";
				display:         block;
				height:          calc(1rem / 3);
				margin:          1rem auto;
				width:           calc(100% / 3);
			}
		}

		img,ol,p:not(.heading,.subheading),table,ul {
			& + img,& + ol,& + p,& + table,& + ul {
				margin-top:1rem;
			}
		}

		p.heading {
			font-size:    2rem;
			margin-bottom:1rem;
			text-align:   left;
		}

		p.subheading {
			margin-top:   -1rem;
			margin-bottom:1rem;

			span.data {
				font-style:italic;

				& + span.data {
					&::before {
						content:"\0020\2014\0020";
					}
				}
			}
		}
	
		img.logo {
			border-radius:calc(6rem * 16 / 384);
			width:        6rem;
		}
	
		ol,ul {
			li {
				margin-left:1rem;
			}
		}

		table {
			border-spacing:calc(1rem / 3);
			font-family:   $monospaceFont;

			tr {
				td,th {
					background-color:$bodyColour;
					border-radius:   calc(1rem / 3);
					padding:         calc(1rem / 3) calc(2rem / 3);

					&.strikethrough {
						text-decoration:line-through;
					}
				}
			}
		}
	}
}