Update image and grid container sizing
Fix image width to 100% for consistent sizing Adjust grid container gutter to 0.8rem for symmetry
This commit is contained in:
parent
673ff9400d
commit
f0320cd870
1 changed files with 2 additions and 2 deletions
|
|
@ -19,7 +19,7 @@
|
||||||
html { font-family: var(--font-body); font-size: clamp(16px, 2.3vw, 20px); scroll-behavior: smooth }
|
html { font-family: var(--font-body); font-size: clamp(16px, 2.3vw, 20px); scroll-behavior: smooth }
|
||||||
body { margin: 0; color: var(--color-grey) }
|
body { margin: 0; color: var(--color-grey) }
|
||||||
p, ul, ol, aside { line-height: 1.5em; hyphens: auto }
|
p, ul, ol, aside { line-height: 1.5em; hyphens: auto }
|
||||||
img { max-width: 100%; height: auto }
|
img { width: 100%; height: auto }
|
||||||
h1 { color: var(--color-green); font-size: 2.3rem }
|
h1 { color: var(--color-green); font-size: 2.3rem }
|
||||||
h1, h2, h3, h4, h5, h6 {
|
h1, h2, h3, h4, h5, h6 {
|
||||||
font-family: var(--font-heading);
|
font-family: var(--font-heading);
|
||||||
|
|
@ -49,7 +49,7 @@ a {
|
||||||
|
|
||||||
.contain, :where(main>article, main>aside, main>section) {
|
.contain, :where(main>article, main>aside, main>section) {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: minmax(.8rem, 1fr) minmax(0, 42rem) minmax(.3rem, 1fr);
|
grid-template-columns: minmax(.8rem, 1fr) minmax(0, 42rem) minmax(.8rem, 1fr);
|
||||||
> * { grid-column: 2 }
|
> * { grid-column: 2 }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue