quentin.dufour.io/assets/css/style.css

217 lines
3 KiB
CSS
Raw Normal View History

2021-07-14 13:44:07 +00:00
html {
margin: 0px;
padding: 0px;
font-size: 62.5%;
--color-text: #404040;
--color-text-second: #6f6f6f;
--color-accent: #8c0c00;
--color-second: #ffc0ba80;
2015-06-11 19:13:58 +00:00
}
2021-07-14 19:44:10 +00:00
@media screen and (max-width: 799px) {
html {
font-size: 55%;
}
}
2021-07-14 19:40:13 +00:00
@media screen and (max-width: 499px) {
html {
2021-07-14 19:44:10 +00:00
font-size: 45%;
2021-07-14 19:40:13 +00:00
}
}
2021-07-14 19:44:10 +00:00
2015-06-11 19:13:58 +00:00
body {
2021-07-14 13:44:07 +00:00
margin: 0px;
padding: 0px;
2021-07-14 20:37:49 +00:00
font-family: "Merriweather",Georgia,Times,"Times New Roman",serif,Symbola;
2021-07-14 13:44:07 +00:00
color: var(--color-text);
text-rendering: optimizeLegibility;
font-feature-settings: "kern", "liga", "dlig", "salt";
font-size: 2.4rem;
2021-07-14 19:40:13 +00:00
line-height: 1.6;
2015-06-11 19:13:58 +00:00
}
2021-07-14 13:44:07 +00:00
header {
text-align: center;
2021-07-14 19:40:13 +00:00
margin: 3rem 1rem 3rem 1rem;
padding: 0px;
}
header > .meta {
2021-07-14 13:44:07 +00:00
padding-top: 3rem;
2015-06-11 19:13:58 +00:00
}
2021-07-14 13:44:07 +00:00
footer {
2021-07-14 19:40:13 +00:00
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);
2015-06-11 19:13:58 +00:00
}
2021-07-14 19:40:13 +00:00
main > section, main > article {
max-width: 1000px;
padding: 3rem;
margin: auto;
2015-06-11 19:13:58 +00:00
}
2021-07-14 13:44:07 +00:00
h1 {
font-size: 4.8rem;
font-weight: 500;
margin: 0px;
2021-07-14 19:40:13 +00:00
padding: 0px;
2015-06-11 19:13:58 +00:00
}
2021-07-14 13:44:07 +00:00
h1::after {
content: "🙡 🙣";
font-size: 4.8rem;
display: block;
color: var(--color-accent);
2015-06-11 19:13:58 +00:00
}
2021-07-14 19:40:13 +00:00
h2, h3, header > .meta, .sidelinks {
2021-07-14 13:44:07 +00:00
font-variant: small-caps;
2021-07-14 19:40:13 +00:00
font-weight: 700;
2021-07-14 13:44:07 +00:00
text-transform: lowercase;
letter-spacing: 0.1em;
font-size: 1.8rem;
margin-top: 0px;
2021-07-14 19:40:13 +00:00
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;
}
2015-06-11 19:13:58 +00:00
}
2021-07-14 19:40:13 +00:00
@media screen and (max-width: 799px) {
h2::before {
content: "🙬 ";
}
h2::after {
content: " 🙮";
}
2015-06-11 19:13:58 +00:00
}
2021-07-14 13:44:07 +00:00
h3 {
2021-07-14 20:57:08 +00:00
margin-top: 5px;
2015-06-11 19:13:58 +00:00
}
2021-07-14 13:44:07 +00:00
h4, h5, h6 {
font-weight: normal;
font-size: 1.8rem;
margin: 0px;
2015-06-11 19:13:58 +00:00
}
2021-07-14 13:44:07 +00:00
p {
margin: 0;
2015-06-11 19:13:58 +00:00
}
2021-07-14 19:40:13 +00:00
ul {
list-style: none;
2015-06-11 19:13:58 +00:00
}
2021-07-14 19:40:13 +00:00
article ul li::before {
content: "❦";
color: var(--color-accent);
padding-right: 1rem;
2015-06-11 19:13:58 +00:00
}
2021-07-14 19:40:13 +00:00
* + h2,
2021-07-14 20:57:08 +00:00
* + h3,
2021-07-14 21:12:25 +00:00
h2:not(:first-child) + *
2021-07-14 19:40:13 +00:00
{
padding-top: 5rem;
2015-06-11 19:13:58 +00:00
}
2021-07-14 20:57:08 +00:00
p + p {
padding-top: 3rem;
}
2021-07-14 13:44:07 +00:00
a, a:hover, a:visited {
padding: 0rem 0.6rem;
margin: 0rem -0.6rem;
color: var(--color-accent);
text-decoration: none;
transition: background-color 400ms;
2015-06-11 19:13:58 +00:00
}
2021-07-14 13:44:07 +00:00
a:hover {
background-color: var(--color-second);
2015-06-11 19:13:58 +00:00
}
2021-07-14 19:40:13 +00:00
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;
}
2021-07-14 13:44:07 +00:00
.card {
margin-bottom: 1.8rem;
2015-06-11 19:13:58 +00:00
}
2021-07-14 13:44:07 +00:00
.card > p {
font-size: 1.6rem;
color: var(--color-text-second);
2016-05-20 03:05:28 +00:00
}
2021-07-14 19:40:13 +00:00
.highlighter-rouge, pre {
overflow-x: auto;
}
@media screen and (min-width: 800px) {
.blocks {
display: flex;
}
.blocks > section {
width: 50%;
}
}