gallery/style/base.css

120 lines
2.3 KiB
CSS
Raw Normal View History

2020-07-17 06:29:13 -04:00
@import url(../fonts/muller/muller.css);
html {
--thumb-size: 200px;
--page-size: 1000px;
--back-dark: hsl(129, 54%, 54%);
--back-light: hsl(119, 69%, 69%);
--dark-tum: hsl(41, 41%, 79%);
--light-tum: hsl(47, 59%, 85%);
--lighter-tum: hsl(47, 74%, 89%);
--text-hue: 42;
--text: hsl(var(--text-hue), 25%, 24%);
--text-link: hsl(111, 30%, 42%);
2020-07-18 05:47:50 -04:00
--shadow: hsla(42, 25%, 24%, 60%);
2020-07-17 06:29:13 -04:00
--bheight: 121px;
--bplacement: 60vh;
background:
url(border.png) left 0% bottom calc(var(--bplacement) - var(--bheight))
repeat-x fixed,
linear-gradient(to top,
transparent var(--bplacement),
var(--back-light) var(--bplacement),
var(--back-dark))
fixed,
url(spots.png) repeat fixed,
linear-gradient(to top,
var(--dark-tum) 0vh,
var(--lighter-tum) var(--bplacement))
fixed;
color: var(--text);
font-family: Muller;
font-size: 16pt;
--red: hsla(340, 100%, 70%, 60%);
--green: hsla(93, 100%, 63%, 60%);
--yellow: hsla(60, 100%, 70%, 60%);
}
body {
margin: 2rem auto;
padding: 1em 1em 1.5em 1em;
border: 5px solid var(--dark-tum);
box-shadow: 0px 0px 50px var(--shadow);
background: var(--lighter-tum);
}
b { font-weight: 600; }
b b { font-weight: 900; }
h1, h2, h3 { font-weight: 900; }
h1 { font-size: 150%; }
h2 { font-size: 130%; }
h3 { font-size: 100%; }
h4 { font-size: 100%; font-weight: 600; }
header {
position: relative;
text-align: center;
margin: 0 0 1em 0;
--small: 90%;
}
header h1 {
font-size: 300%;
font-weight: 100;
margin: 0;
}
a {
color: var(--text-link);
font-weight: 500;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
ul {
padding-left: 1em;
}
ul > li {
list-style: '— ';
padding-left: 0;
}
section + section { margin-top: 1em; }
section > section + section { margin-top: 0.75em; }
h1[id] a, h2[id] a, h3[id] a, h4[id] a, h5[id] a {
color: inherit;
font-weight: inherit;
text-decoration: none;
}
h1[id]:hover::after,
h2[id]:hover::after,
h3[id]:hover::after,
h4[id]:hover::after,
h5[id]:hover::after {
content: ' §';
opacity: 60%;
}
2020-07-18 05:47:50 -04:00
b {
/* rather than always 600 or whatever it does */
font-weight: bolder;
}
.emoji {
text-align: baseline;
height: 1em;
}