:root {
/* https://www.colourlovers.com/palette/4654317/V_O_G_U_E_%E2%80%A2_1928 */
--a: hsl(13, 74%, 59%);
--b: hsl(5, 79%, 38%);
--c: hsl(345, 50%, 2%);
--d: hsl(46, 26%, 71%);
--e: hsl(37, 78%, 89%);
--background: hsl(0 0% 100%);
--foreground: hsl(0 0% 0%);
--primary: hsl(220 52% 44%);
--secondary: hsl(208 56% 38%);
--faint: hsl(0 0% 40%);
--fainter: hsl(0 0% 73%);
--faintish: hsl(0 0% 47%);
/* --background: var(--e); */
/* --foreground: var(--c); */
/* --primary: var(--b); */
/* --secondary: var(--a); */
/* --faint: hsl(42, 65%, 20%); */
/* --faintish: hsl(42, 60%, 33%); */
/* --fainter: var(--d); */
--monospace: 'Droid Sans Mono', monospace;
--sans: 'Signika Negative', Verdana, Geneva, sans-serif;
}
@media (prefers-color-scheme: dark) {
:root {
--background: var(--c);
--foreground: var(--e);
--primary: var(--a);
--secondary: var(--b);
--faint: var(--d);
--faintish: hsl(46, 26%, 51%);
--fainter: hsl(46, 26%, 11%);
}
body {
text-shadow: 1px 1px 2px black;
}
}
html, body {
margin: 0;
padding: 0;
}
body {
font: 1em/1.3 var(--sans);
color: var(--foreground);
background: var(--background);
}
a, a:visited {
text-decoration: none;
color: var(--primary);
}
a:hover, a:focus, a:active {
text-decoration: underline;
color: var(--secondary);
}
ul, ol {
list-style: none;
padding: 0;
margin: 0;
}
/* Header */
header {
text-transform: lowercase;
display: flex;
justify-content: space-between;
padding: 1rem 5vw;
}
h1 {
font-size: 1rem;
margin: 0;
font-weight: bold;
display: inline;
}
h1 a, h1 a:visited {
color: var(--fainter);
}
nav {
display: inline;
}
header ul {
display: inline-flex;
}
header ul li {
color: var(--faint);
margin: 0 0 0 1rem;
}
nav span {
text-decoration: underline;
}
/* River */
.river {
max-width: 40em;
margin: 0 auto;
padding: 0 1em;
}
.river h2 {
font-size: 1.5rem;
padding: 1.3rem;
margin: 0;
height: 1.3rem;
display: inline-block;
padding-left: 0;
font-weight: bold;
}
.river > ul {
width: auto;
margin: 2.6rem 0;
}
.river > ul > li {
clear: both;
padding: .5rem 0 0;
border-top: 1px solid var(--fainter);
margin: 1.1rem 0 0;
}
.river h2, .river > ul > li > div > time {
float: left;
padding: 0 .5rem 0 0;
margin: -1.1rem 0 0;
font-size: .75rem;
font-weight: normal;
background: var(--foreground);
}
.river > ul > li > div > time {
float: right;
padding: 0 0 0 .5rem;
color: var(--faintish);
}
.river ol li {
clear: both;
position: relative;
padding: 1rem 0;
margin: 0;
}
.river h3 {
font-size: 1rem;
margin: 0;
}
.river summary h3 {
display: inline-block;
}
.river p {
font-size: 0.875rem;
margin: .2rem 0;
}
.river .timea {
clear: both;
margin: 0 1.5rem 0 0;
font-size: .6875rem;
color: var(--faint);
}
.river img {
max-width: 100%;
}
/* Forms */
form[data-toggled] {
display: none;
}
form[data-toggled].open {
display: block;
}
form {
margin: 1.5rem auto 0;
border: 1px solid var(--fainter);
padding: 2rem;
max-width: 21rem;
}
form h2 {
margin-bottom: 1.5rem;
}
form p {
margin-top: 1.5rem;
margin-bottom: .5rem;
}
input[type=text] {
display: block;
margin-top: .5rem;
max-width: 20rem;
width: 100%;
}
button {
margin-top: 1.5rem;
}
/** Garden */
.garden {
padding: 2rem;
font-size: .8rem;
}
.garden code {
display: none;
margin: 0 1rem;
color: firebrick;
float: right;
margin-right: 5vw;
}
.garden code.open {
display: inline-block;
}
.garden h2 {
font-size: 1rem;
margin: 0;
margin-left: 1.2rem;
display: inline-block;
}
.garden .toggle {
display: block;
position: absolute;
margin-top: .5rem;
width: 1rem;
margin-left: -.2rem;
transition: .1s;
user-select: none;
background: var(--background);
padding: .2rem;
}
.garden .open .toggle {
transform: rotate(90deg);
}
.garden ul > li {
margin: 1rem 0;
}
.garden ul > li .remove {
display: none;
background: pink;
color: var(--background);
font-size: .8rem;
border-radius: 10em;
padding: .3em;
text-align: center;
line-height: .69rem;
height: 1em;
width: 1em;
margin-left: -.5rem;
margin-top: -3px;
position: absolute;
right: 5rem;
}
.garden .remove.open {
display: inline-block;
}
.garden ul > li:hover .remove:hover, ul > li:hover .remove:active {
text-decoration: none;
background: red;
}
.garden ol {
display: flex;
padding-left: 1.2rem;
list-style: none;
max-width: 100%;
overflow-x: hidden;
}
.garden ol:after {
content: "";
background-image: linear-gradient(90deg, transparent, var(--background));
position: absolute;
z-index: 999;
top: 0;
right: 0;
width: 5vw;
height: 100%;
}
.garden li.open ol {
flex-direction: column;
margin-top: .3rem;
}
.garden ol li {
white-space: nowrap;
margin: .5rem .5rem .5rem 0;
display: flex;
}
.garden ol li time {
margin: .2rem .5rem 0 .3rem;
}
.garden li.open ol li {
margin: .2rem .5rem .2rem 0;
}
.garden li:not(.open) ol li:not(:last-child):after {
content: '/';
color: var(--fainter);
margin-top: .1rem;
}
.garden h3 {
font-size: 1rem;
font-weight: normal;
margin: 0;
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
}
.garden li:not(.open) ol h3 {
max-width: 22rem;
}
.garden h3 a:visited {
color: var(--foreground);
}
.garden time {
color: var(--faint);
font-size: .8rem;
}
/* Sign-in */
#cover {
top: 0;
left: 0;
z-index: 1000;
position: absolute;
height: 100%;
width: 100%;
background: rgba(0, 255, 255, .7);
display: block
padding: 0;
margin: 0;
}
#cover a {
position: relative;
display: block;
left: 50%;
top: 50%;
text-align: center;
width: 100px;
margin-left: -50px;
height: 50px;
line-height: 50px;
margin-top: -25px;
font-size: 16px;
font-weight: bold;
border: 1px solid;
}
/* Noscript */
body:not(.script) .actions {
display: none;
}