mirror of https://gitlab.com/curben/blog
fix(css): use ch to set max-width and padding
https://jrl.ninja/etc/1/ https://secretgeek.github.io/html_wysiwyg/html.html https://news.ycombinator.com/item?id=20100232 https://www.reddit.com/r/css/comments/bb73cw/58_bytes_of_css_to_look_great_nearly_everywhere/ekj8yhm/
This commit is contained in:
parent
bb87e3b914
commit
ad7616ebab
|
@ -202,6 +202,8 @@ hr {
|
||||||
box-sizing: content-box;
|
box-sizing: content-box;
|
||||||
height: 0;
|
height: 0;
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
|
width: 50%;
|
||||||
|
margin-left: 25%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.typo-small,
|
.typo-small,
|
||||||
|
@ -725,9 +727,11 @@ blockquote {
|
||||||
.footer-content,
|
.footer-content,
|
||||||
.footer-links {
|
.footer-links {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: 100%;
|
font-size: 0.95em;
|
||||||
font-size: 0.9em;
|
|
||||||
color: #cacdd0;
|
color: #cacdd0;
|
||||||
|
max-width: 80ch;
|
||||||
|
padding: 0 2ch;
|
||||||
|
margin: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.copyright li,
|
.copyright li,
|
||||||
|
@ -750,7 +754,6 @@ blockquote {
|
||||||
|
|
||||||
.archive-footer,
|
.archive-footer,
|
||||||
.post-footer {
|
.post-footer {
|
||||||
padding: 1em 0;
|
|
||||||
color: #cacdd0;
|
color: #cacdd0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -820,22 +823,22 @@ blockquote {
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* https://jrl.ninja/etc/1/ */
|
||||||
.archive-container,
|
.archive-container,
|
||||||
.category-container,
|
.category-container,
|
||||||
.tag-container {
|
.tag-container {
|
||||||
width: 80%;
|
|
||||||
margin: 1em auto 0;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
line-height: 1;
|
|
||||||
text-align: left;
|
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
max-width: 700px;
|
max-width: 80ch;
|
||||||
|
padding: 2ch;
|
||||||
|
margin: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.archive-container article,
|
.archive-container article,
|
||||||
.category-container article,
|
.category-container article,
|
||||||
.tag-container article {
|
.tag-container article {
|
||||||
margin-bottom: 15px;
|
margin-bottom: 1em;
|
||||||
|
line-height: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.archive-container a,
|
.archive-container a,
|
||||||
|
@ -849,7 +852,8 @@ blockquote {
|
||||||
|
|
||||||
.archive-container .header,
|
.archive-container .header,
|
||||||
.category-container .header,
|
.category-container .header,
|
||||||
.tag-container .header {
|
.tag-container .header,
|
||||||
|
.article .header {
|
||||||
font-size: 1.1em;
|
font-size: 1.1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -873,8 +877,8 @@ blockquote {
|
||||||
.archive-container hr,
|
.archive-container hr,
|
||||||
.category-container hr,
|
.category-container hr,
|
||||||
.tag-container hr {
|
.tag-container hr {
|
||||||
width: 60%;
|
width: 100%;
|
||||||
margin: 1em 0;
|
margin-left: 0;
|
||||||
background-image: -webkit-linear-gradient(
|
background-image: -webkit-linear-gradient(
|
||||||
0deg,
|
0deg,
|
||||||
#d5d5d5,
|
#d5d5d5,
|
||||||
|
@ -930,23 +934,19 @@ blockquote {
|
||||||
}
|
}
|
||||||
|
|
||||||
.article {
|
.article {
|
||||||
width: 80%;
|
max-width: 80ch;
|
||||||
max-width: 1000px;
|
padding: 2ch;
|
||||||
margin: 0 auto;
|
margin: auto;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.article .header {
|
|
||||||
font-size: 1.1em;
|
|
||||||
margin-top: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article .main-nav-link:hover {
|
.article .main-nav-link:hover {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.article hr {
|
.article hr {
|
||||||
width: 80%;
|
width: 100%;
|
||||||
|
margin-left: 0;
|
||||||
background-image: -webkit-linear-gradient(
|
background-image: -webkit-linear-gradient(
|
||||||
0deg,
|
0deg,
|
||||||
#d5d5d5,
|
#d5d5d5,
|
||||||
|
|
Loading…
Reference in New Issue