You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

124 lines
1.8 KiB
CSS

@import "assets/hack.css";
:root {
--theme-bright: #f9f5eb;
}
a:visited {
color: #c2e;
}
a {
color: #0095dd;
}
html {
font-family: Helvetica, Arial, sans-serif;
color: #5b4636;
background-color: #f4ecd8;
}
body {
padding: 1em;
margin: auto;
}
pre {
white-space: pre-wrap;
}
body {
font-size: 18px;
}
aside {
width: inherit;
}
.publish-date {
font-size: 14px;
}
code {
font-family: Hack, monospace;
background-color: rgba(0,0,0, 0.05);
}
.nowrap {
white-space: nowrap;
}
.cardbox {
flex-direction: column;
justify-content: space-around;
margin: -0.5em;
flex-wrap: wrap;
}
.cardbox .card {
max-width: initial;
background-color: var(--theme-bright);
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
border-radius: 0.5rem;
padding: 1em;
margin: 0.5em;
}
.cardbox .card header {
font-size: 1.3em;
font-weight: bold;
}
@media only all and (min-width: 82ch) {
body {
line-height: 1.4;
font-size: 16px;
max-width: 80ch;
}
.publish-date {
font-size: 12px;
}
aside {
width: 30%;
min-width: 10em;
background-color: rgba(0,0,0, 0.1);
float: right;
padding: 1em;
margin: 1em;
}
.cardbox {
display: flex;
flex-direction: row;
}
.cardbox .card {
max-width: 35ch;
}
}
@media only all and (min-width: 1920px) {
body {
line-height: 1.4;
font-size: calc(14px + 0.2vmax);
max-width: 80ch;
}
.publish-date {
font-size: calc(10px + 0.2vmax);
}
aside {
width: 30%;
min-width: 10em;
background-color: rgba(0,0,0, 0.1);
float: right;
padding: 1em;
margin: 1em;
}
}