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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
|
/*
* vncnt.css
* Copyright 2017-2019, Vincent von Schelm
* vncnt.eu
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* This file expects to inherit a ton of stuff from barebones.css
*/
/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/
@import url('barebones.css');
@media screen and (prefers-color-scheme: dark) {
:root {
/* dark theme: light background, dark text, blue accent */
--theme-hue: 0; /* black */
--accent-hue: 194; /* blue */
--text-color-richer: hsl(var(--theme-hue), 0%, 95%); /* */
--text-color-normal: hsl(var(--theme-hue), 0%, 80%); /* text color; button:hover:focus color */
--text-color-softer: hsl(var(--theme-hue), 0%, 67%); /* button color; button:hover border */
--accent-color: hsl(var(--accent-hue), 76%, 49%); /* link; button-primary bg+border; textarea,select:focus border */
--accent-color-hover: hsl(var(--accent-hue), 86%, 57%); /* link hover; button-primary:hover:focus bg+border */
--border-color: hsl(var(--theme-hue), 0%, 27%); /* button border */
--border-color-softer: hsl(var(--theme-hue), 0%, 20%); /* textarea,select,code,td,hr border */
--background-color: hsl(var(--theme-hue), 0%, 12%); /* body background; textarea,select background */
--background-color-softer: hsl(var(--theme-hue), 0%, 18%);
--code-background: hsl(var(--theme-hue), 0%, 5%); /* code background*/
--button-primary-color: white;
}
img.value-img {
filter: invert(0.8);
}
img {
opacity: .80;
transition: opacity .5s ease-in-out;
}
img:hover {
opacity: 1;
}
}
h1.h3-like, h2.h3-like {
font-size: 3.0rem;
line-height: 1.3;
letter-spacing: -.1rem;
}
.landingpage, .error404 {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
max-width: 90%;
}
.error404 {
text-transform: uppercase;
text-align: center;
}
p.reset-margin {
margin-bottom: 1rem; /*skeleton.css: 2.5rem*/
}
.avatar {
width: 20rem;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
max-width: 60%;
box-sizing: border-box;
display: block;
margin: auto;
}
.autocenter {
text-align: center;
}
.icons {
bottom: 0;
}
.icons h2, h3 {
margin-bottom: 0;
}
.icon {
text-rendering: geometricPrecision !important;
text-decoration: none;
border-bottom: none;
position: relative;
color: #555555;
}
/* Larger than mobile (default point when grid becomes active) */
@media (min-width: 600px) {
h1.h3-like, h2.h3-like {
font-size: 3.6rem;
}
.grid-container.fivetoseven {
grid-template-columns: 5fr 7fr;
}
.item {
align-self: center;
}
.landingpage, .error404 {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
max-width: 75%;
}
.avatar {
max-width: 200%;
box-sizing: border-box;
float: right;
}
.autocenter {
text-align: left;
padding: 0 0;
}
}
/* Larger than phablet */
@media (min-width: 900px) {
html {
--base-font-size: 80%;
}
p.reset-margin {
margin-bottom: 2rem; /*skeleton.css: 2.5rem*/
}
}
/* Larger than tablet */
@media (min-width: 1200px) {}
|
