quentin.dufour.io/assets/css/style.css
2021-07-14 23:12:25 +02:00

216 lines
3 KiB
CSS

html {
margin: 0px;
padding: 0px;
font-size: 62.5%;
--color-text: #404040;
--color-text-second: #6f6f6f;
--color-accent: #8c0c00;
--color-second: #ffc0ba80;
}
@media screen and (max-width: 799px) {
html {
font-size: 55%;
}
}
@media screen and (max-width: 499px) {
html {
font-size: 45%;
}
}
body {
margin: 0px;
padding: 0px;
font-family: "Merriweather",Georgia,Times,"Times New Roman",serif,Symbola;
color: var(--color-text);
text-rendering: optimizeLegibility;
font-feature-settings: "kern", "liga", "dlig", "salt";
font-size: 2.4rem;
line-height: 1.6;
}
header {
text-align: center;
margin: 3rem 1rem 3rem 1rem;
padding: 0px;
}
header > .meta {
padding-top: 3rem;
}
footer {
text-align: center;
font-size: 1.6rem;
color: var(--color-text-second);
padding: 0rem 1rem 2rem 1rem;
}
footer p {
padding-top: 0.1rem !important;
}
footer::before {
content: "🙠 🙢 ";
display: block;
color: var(--color-accent);
}
main > section, main > article {
max-width: 1000px;
padding: 3rem;
margin: auto;
}
h1 {
font-size: 4.8rem;
font-weight: 500;
margin: 0px;
padding: 0px;
}
h1::after {
content: "🙡 🙣";
font-size: 4.8rem;
display: block;
color: var(--color-accent);
}
h2, h3, header > .meta, .sidelinks {
font-variant: small-caps;
font-weight: 700;
text-transform: lowercase;
letter-spacing: 0.1em;
font-size: 1.8rem;
margin-top: 0px;
line-height: 1.3;
}
@media screen and (min-width: 800px) {
main > section, main > article {
padding-left: 200px;
}
h2, .sidelinks {
display: block;
position: absolute;
width: 180px;
margin: 5px 0px 0px -200px;
text-align: right;
padding: 0px 20px 0px 0px;
}
}
@media screen and (max-width: 799px) {
h2::before {
content: "🙬 ";
}
h2::after {
content: " 🙮";
}
}
h3 {
margin-top: 5px;
}
h4, h5, h6 {
font-weight: normal;
font-size: 1.8rem;
margin: 0px;
}
p {
margin: 0;
}
ul {
list-style: none;
}
article ul li::before {
content: "❦";
color: var(--color-accent);
padding-right: 1rem;
}
* + h2,
* + h3,
h2:not(:first-child) + *
{
padding-top: 5rem;
}
p + p {
padding-top: 3rem;
}
a, a:hover, a:visited {
padding: 0rem 0.6rem;
margin: 0rem -0.6rem;
color: var(--color-accent);
text-decoration: none;
transition: background-color 400ms;
}
a:hover {
background-color: var(--color-second);
}
img {
max-width: 100%;
}
blockquote {
font-style: italic;
border-left: solid 1rem var(--color-accent);
padding-left: 2rem;
}
/*
* Composants maison
*/
.list ul {
padding: 0px;
}
.list li {
display: inline;
}
.list li:not(:first-child)::before {
content: "🙘";
display: inline-block;
vertical-align: middle;
width: 4rem;
text-align: center;
}
.card {
margin-bottom: 1.8rem;
}
.card > p {
font-size: 1.6rem;
color: var(--color-text-second);
}
.highlighter-rouge, pre {
overflow-x: auto;
}
@media screen and (min-width: 800px) {
.blocks {
display: flex;
}
.blocks > section {
width: 50%;
}
}