cramped/formatting.css at master · CoolProgrammingUser/cramped · 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
body {
	background: #0e0;  /* for browsers that do not support gradients */
	background: -webkit-repeating-linear-gradient(#0e0, white 100vh, #0e0 200vh);  /* Safari 5.1 to 6.0 */
	background: -o-repeating-linear-gradient(#0e0, white 100vh, #0e0 200vh);  /* Opera 11.1 to 12.0 */
	background: -moz-repeating-linear-gradient(#0e0, white 100vh, #0e0 200vh);  /* Firefox 3.6 to 15 */
	background: repeating-linear-gradient(#0e0, white 100vh, #0e0 200vh);  /* standard syntax */
}
body::before, body::after {
	display: none;  /* hides any weird stuff from seasonal styling */
}
body.navigation {
	background: #5ee; /* For browsers that do not support gradients */
	background: -webkit-repeating-radial-gradient(circle, #5ee, white 15%, #5ee 30%);  /* For Safari 5.1 to 6.0 */
	background: -o-repeating-radial-gradient(circle, #5ee, white 15%, #5ee 30%);  /* For Opera 11.6 to 12.0 */
	background: -moz-repeating-radial-gradient(circle, #5ee, white 15%, #5ee 30%);  /* For Firefox 3.6 to 15 */
	background: repeating-radial-gradient(circle, #5ee, white 15%, #5ee 30%);  /* Standard syntax */
}

h1.main-title {
	color: black;
}

.following-face {
	position: fixed;
	left: -25px;
	top: -25px;
	z-index: 10;
	width: 25px;
	height: 25px;
	background-image: url("images/Me in a Nutshell.png");
	background-size: cover;
}

note {
	color: blue;
	cursor: help;
}
note:hover {
	text-decoration: underline;
}

.elaborate {
	text-decoration: underline;
	text-decoration-style: dotted;
	cursor: pointer;
}
.elaborate:hover {
	text-decoration-style: solid;
}

.horiz-media {
	margin: 1em;
	width: 50%;
}
.vert-media {
	margin: 1em;
	width: 30%;
}
.square-media {
	margin: 1em;
	width: 40%;
}

@media (prefers-color-scheme: dark) {
	body {
		background: repeating-linear-gradient(#080, #040 100vh, #080 200vh);
	}
	body.navigation {
		background: linear-gradient(#111, #444);
	}
	h1.main-title {
		color: white;
	}
}

@media (max-width: 1000px) {
	.horiz-media {
		margin: 1em 0em;
		width: 100%;
	}
	.vert-media {
		width: 60%;
	}
	.square-media {
		width: 80%;
	}
}