beenull/mkht.php
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style.css: use "rem" instead fo "px"

Browse source
This commit is contained in:
Miraty 2023-09-04 23:33:15 +02:00
parent c7eaceb355
commit 2d23ff50f2
1 changed files with 88 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

138
style.css
View file

@ -28,49 +28,28 @@
}
* {
padding: 0px;
margin: 0px;
scrollbar-color: var(--foreground-color) var(--background-color);
}
body {
font-family: system-ui, sans-serif;
font-size: 30px;
line-height: 42px;
margin: 20px;
font-size: 1rem;
line-height: 1.5em;
margin: 1rem;
padding: 0;
background-color: var(--background-color);
color: var(--foreground-color);
}
@media (max-width: 420px) {
body {
font-size: 26px;
line-height: 38px;
}
}
main {
margin-left: 20%;
margin-right: 20%;
}
@media (max-width: 1400px) {
main {
margin-left: 10%;
margin-right: 10%;
}
}
@media (max-width: 800px) {
main {
margin-left: 0px;
margin-right: 0px;
padding-left: 0px;
padding-right: 0px;
}
max-width: 40rem;
margin-left: auto;
margin-right: auto;
}
a, a:visited {
text-decoration: underline;
a, a:visited, a[title], a[title]:visited {
text-decoration: solid underline;
transition-property: color, border-color;
transition-duration: 0.05s;
transition-timing-function: linear;
@ -135,30 +114,62 @@ pre, code, var, samp {
word-break: break-all;
}
abbr[title] {
text-decoration: dotted underline;
}
address {
font-style: normal;
}
ul {
padding-left: 35px;
padding-left: 1.5rem;
}
ol {
padding-left: 2rem;
}
dl {
margin: 0;
}
dt {
font-weight: 500;
padding-top: 0.8rem;
font-size: 1.2rem;
}
dd {
margin-left: 0.6rem;
padding-left: 1.2rem;
position: relative;
}
dd::before {
content: '↳';
top: 0;
left: 0;
position: absolute;
}
dd {
margin-left: 25px;
padding-bottom: 10px;
blockquote {
position: relative;
margin: 0;
padding-left: 1.5rem;
padding-right: 1.5rem;
font-style: italic;
}
blockquote::before, blockquote::after {
position: absolute;
font-size: 1.3rem;
}
blockquote::before {
content: '«';
top: 0;
left: 0;
}
blockquote::after {
content: '»';
bottom: 0;
right: 0;
}
p {
padding-top: 8px;
padding-bottom: 8px;
margin: 0;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
header, footer, .centered {
@ -171,18 +182,49 @@ footer {
flex-direction: column;
}
[title] {
text-decoration: dotted underline;
}
[hreflang=en]::after {
content: ' (en)';
}
[hreflang=fr]::after {
content: ' (fr)';
}
[hreflang]::after {
font-size: 0.8rem;
}
.level2, .level3 {
margin-top: 1.2rem;
}
.level2 {
border-left: 0.16rem solid var(--foreground-color);
padding-left: 1rem;
}
.level3 {
border-left: 0.16rem solid var(--foreground-color);
padding-left: 1rem;
}
:target {
border: 0.16rem solid var(--foreground-color);
}
/* ----- TITLES ----- */
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
line-height: 100%;
margin-top: 1rem;
margin-bottom: 0.5rem;
}
h1 {
font-size: 70px;
font-size: 2.6rem;
text-align: center;
padding-top: 15px;
margin-bottom: 20px;
}
@media (max-width: 420px) {
h1 {
@ -191,9 +233,7 @@ h1 {
}
h2 {
font-size: 60px;
margin-top: 30px;
margin-bottom: 15px;
font-size: 2.2rem;
}
@media (max-width: 420px) {
h2 {
@ -202,9 +242,7 @@ h2 {
}
h3 {
font-size: 42px;
margin-top: 30px;
margin-bottom: 15px;
font-size: 1.5rem;
}
@media (max-width: 420px) {
h3 {