MainTiddlyServer/style.css at master · YakovL/MainTiddlyServer · GitHub

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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
@import url('https://fonts.googleapis.com/css?family=Roboto+Slab:400,700');
:root {
	/* todo: try this approach instead for primary/opacity: https://stackoverflow.com/a/47831336/3995261 */
	--primary-rgb: 246, 234, 196;
	--darkish: #888577;
	/* todo: try more colorizing, like:
	   #8bd9f5 outside, #014353 for meta and main font color, #048cbd for links;
	   check also TWC colors */
	--meta-background: black;
	font-family: 'Roboto Slab', sans-serif;
	font-size: 16px; /* let's set explicitly */
}
body {
	margin: 0;
	background-color: var(--darkish);
}
@media (min-width: 60em) {
	body {
		margin-left: calc(100vw - 100%); /* fixes the scrollbar jumping issue, see https://stackoverflow.com/q/6357870/3995261 */
	}
}
.wrapper {
	background-color: rgb(var(--primary-rgb));

	width: 40em;
	max-width: 100%;
	/* horizontal align center */
	margin: 0 auto;

	/* stick footer to the bottom if the content is not long enough (see margin-top: auto) */
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}
.page-header, main, .wrapper__footer {
	padding-left: 1rem;
	padding-right: 1rem;
	/* add some padding left and right, should be used on mobile */
}
.page-header, .navigation, .wrapper__footer {
	background-color: var(--meta-background);
	color: rgb(var(--primary-rgb));
	text-align: center;
}

.page-header {
	padding-top: 1.5em;
	padding-bottom: 1.5em;
	margin-bottom: 0.1em;
	box-shadow: 0 0.1em 0 rgba(0,0,0,0.5);
}
.page-header__title {
	padding: 0.25em 0 0.3em;
	font-size: 2rem;
	font-weight: 700;
}
.page-header__subtitle {
	padding: 0.5em 0;
}

.navigation {
	padding: 0; margin: 0;
}
.navigation__link {
	display: inline-block; padding: 1em 2em;
	text-decoration: none;
	color: inherit;
}
.navigation__link:hover  { background-color: rgba(var(--primary-rgb), 0.3); }
.navigation__link:active { background-color: rgba(var(--primary-rgb), 0.2); }
.navigation__link_currently-opened {
	font-weight: bold;
	pointer-events: none;
	cursor: default;
	background-color: rgba(var(--primary-rgb), 0.2);
}

main {
	padding-top: 1em;
	padding-bottom: 1em;
}
main header {
	font-weight: 700;
	font-size: 1.25em;
	margin-top: 1.0em; margin-bottom: 0.3em;
}
main :first-child header { margin-top: 0em; }
main p, main section > ul, main section > ol {
	margin-top: 0.2em; margin-bottom: 0.2em;
}
main ul, main ol { padding-left: 1.6em; }
main a { color: inherit; opacity: 0.5; }

.donation-form {
	display: flex;
}
.donation-form__image {
	height: 2.5em;
	margin: 1em auto;
}

.wrapper__footer {
	font-size: 0.8rem;

	margin-top: auto; /* https://stackoverflow.com/a/47640893/3995261 */
	width: 100%;
	box-sizing: border-box;
	padding-top: 1em;
	padding-bottom: 1em;
}

footer a {
    color: inherit;
}

::selection {
	background: #b7b69f;
}
/* scrollbars and parts of browser interface are also grey */

@media (prefers-color-scheme: dark) {
	:root {
	  --darkish: #373630;
	  --primary-rgb: 150, 143, 120;
	}
	.wrapper {
	  color: rgb(var(--primary-rgb));
	  background: rgba(0, 0, 0, 0.5);
	}
	main a { opacity: 0.7; }
	::selection {
	  background: rgba(var(--primary-rgb), 0.3);
	}
}