diff options
| author | Joe Carstairs <65492573+Sycamost@users.noreply.github.com> | 2023-08-19 10:41:51 +0100 |
|---|---|---|
| committer | Joe Carstairs <65492573+Sycamost@users.noreply.github.com> | 2023-08-19 10:41:51 +0100 |
| commit | 41a42b051e1c8f9f5bcc6ec749b6d60c8b4ff7fd (patch) | |
| tree | dccd59912c9cfbc4c936405c2bc5bdc9ac7a05dc | |
| parent | ba389e0b558d27d9d2e30c9f9f681e50d03309bd (diff) | |
Improves block spacing
| -rw-r--r-- | public/css/base/typography.css | 25 | ||||
| -rw-r--r-- | public/css/modules/link-gallery.css | 4 | ||||
| -rw-r--r-- | public/css/modules/nav.css | 18 | ||||
| -rw-r--r-- | public/css/modules/nav.lg.css | 2 | ||||
| -rw-r--r-- | public/css/modules/news-index.css | 17 | ||||
| -rw-r--r-- | public/css/modules/product.css | 6 | ||||
| -rw-r--r-- | public/css/modules/schedule.css | 10 | ||||
| -rw-r--r-- | public/css/modules/schedule.lg.css | 5 | ||||
| -rw-r--r-- | public/css/utils.css | 6 | ||||
| -rw-r--r-- | public/css/variables/spacing.css | 10 | ||||
| -rw-r--r-- | public/main.css | 32 | ||||
| -rw-r--r-- | public/normalize.css | 44 | ||||
| -rw-r--r-- | src/pages/[locale]/index.astro | 4 |
13 files changed, 95 insertions, 88 deletions
diff --git a/public/css/base/typography.css b/public/css/base/typography.css index 9c53748..3ccac74 100644 --- a/public/css/base/typography.css +++ b/public/css/base/typography.css @@ -10,32 +10,47 @@ h1 { font-size: var(--font-size-5); } +h1:not(:first-child) { + margin-block-start: var(--margin-block-lg); +} + h2 { font-size: var(--font-size-4); } +h2:not(:first-child) { + margin-block-start: var(--margin-block-lg); +} + h3 { font-size: var(--font-size-3); } +h3:not(:first-child) { + margin-block-start: var(--margin-block-md); +} + h4 { font-size: var(--font-size-2); } +h4:not(:first-child) { + margin-block-start: var(--margin-block-sm); +} + h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 700; - margin-block-start: var(--spacing-block-lg); } .title { font-family: var(--font-serif); font-size: var(--font-size-6); font-weight: 700; - margin-block-start: var(--spacing-block-sm); + margin-block-start: var(--margin-block-sm); } .title--small { @@ -43,6 +58,6 @@ h4 { margin-block-start: 0; } -p:not(:first) { - margin-block-start: var(--spacing-block-md); -}
\ No newline at end of file +p:not(:first-child) { + margin-block-start: var(--margin-block-sm); +} diff --git a/public/css/modules/link-gallery.css b/public/css/modules/link-gallery.css index a1c676f..fe771cd 100644 --- a/public/css/modules/link-gallery.css +++ b/public/css/modules/link-gallery.css @@ -2,7 +2,7 @@ display: flex; flex-wrap: wrap; gap: var(--spacing-inline-sm); - padding-block: var(--spacing-block-md); + padding-block: var(--margin-block-md); } .link-gallery__container { @@ -55,4 +55,4 @@ overflow: hidden; text-align: center; margin-inline: var(--spacing-inline-xs); -}
\ No newline at end of file +} diff --git a/public/css/modules/nav.css b/public/css/modules/nav.css index 7a6708c..20c2b32 100644 --- a/public/css/modules/nav.css +++ b/public/css/modules/nav.css @@ -2,28 +2,20 @@ display: flex; flex-direction: column; align-items: center; - padding-block-end: var(--spacing-block-sm); -} - -.nav__nav-links { - padding: 0; + margin-block-start: var(--margin-block-sm); } .nav__nav-links li { - margin-inline: auto; width: max-content; } -.nav__nav-links li { - margin-block-end: var(--spacing-block-md); -} - -.nav__nav-links li:last-of-type { - margin-block-end: 0; +.nav__nav-links li:not(:last-of-type) { + margin-block-end: var(--margin-block-sm); } .nav__logo { text-align: center; + margin-block-end: var(--margin-block-sm); } .nav__logo a { @@ -43,4 +35,4 @@ .nav__breadcrumbs li::before { content: '/' -}
\ No newline at end of file +} diff --git a/public/css/modules/nav.lg.css b/public/css/modules/nav.lg.css index 0d58556..234bbd8 100644 --- a/public/css/modules/nav.lg.css +++ b/public/css/modules/nav.lg.css @@ -4,4 +4,4 @@ align-items: baseline; padding-inline: max(10%, calc((100% - var(--max-width-all-content)) / 2)); gap: var(--spacing-inline-xs); -}
\ No newline at end of file +} diff --git a/public/css/modules/news-index.css b/public/css/modules/news-index.css index 721d106..0f12380 100644 --- a/public/css/modules/news-index.css +++ b/public/css/modules/news-index.css @@ -1,26 +1,11 @@ -.news-index { - display: flex; - flex-direction: column; - gap: var(--spacing-block-lg); -} - .news-index__item { display: block; transition: background 100ms; - padding-block: var(--spacing-block-md); + padding-block: var(--margin-block-md); padding-inline: var(--spacing-inline-sm); - margin-block: var(--spacing-block-sm); } .news-index__item:hover { background: var(--background-highlight-color); transition-duration: 300ms; } - -.news-index__item :first-child { - margin-block-start: 0; -} - -.news-index__item :last-child { - margin-block-end: 0; -}
\ No newline at end of file diff --git a/public/css/modules/product.css b/public/css/modules/product.css index 51c8fc7..32fa37f 100644 --- a/public/css/modules/product.css +++ b/public/css/modules/product.css @@ -3,8 +3,6 @@ flex-wrap: wrap; justify-content: space-evenly; gap: var(--spacing-inline-sm); - padding-inline: var(--spacing-inline-md); - padding-block: var(--spacing-block-lg) var(--spacing-block-xl); } .product__action-block { @@ -12,11 +10,11 @@ flex-direction: column; margin-inline: auto; width: fit-content; - gap: var(--spacing-block-sm); + gap: var(--margin-block-sm); } .product__action-block img { max-width: 12rem; width: 100%; height: auto; -}
\ No newline at end of file +} diff --git a/public/css/modules/schedule.css b/public/css/modules/schedule.css index 123d76f..140767c 100644 --- a/public/css/modules/schedule.css +++ b/public/css/modules/schedule.css @@ -1,13 +1,13 @@ +.schedule:not(:first-child) { + margin-block-start: var(--margin-block-sm); +} + .schedule dt { font-weight: 700; - margin-block-start: var(--spacing-block-md); + margin-block-start: var(--margin-block-sm); text-align: center; } .schedule dd { text-align: center; } - -.schedule dd:last-child { - margin-block-end: var(--spacing-block-md); -}
\ No newline at end of file diff --git a/public/css/modules/schedule.lg.css b/public/css/modules/schedule.lg.css index 7d8d25e..ca0b9db 100644 --- a/public/css/modules/schedule.lg.css +++ b/public/css/modules/schedule.lg.css @@ -2,7 +2,6 @@ display: grid; grid-template-columns: fit-content(5rem) 1fr; grid-column-gap: var(--spacing-inline-sm); - grid-row-gap: var(--spacing-block-sm); } .schedule dt { @@ -15,7 +14,3 @@ grid-column-start: 2; text-align: start; } - -.schedule dd:last-child { - margin-block-end: 0; -}
\ No newline at end of file diff --git a/public/css/utils.css b/public/css/utils.css index 0261eb6..f578f99 100644 --- a/public/css/utils.css +++ b/public/css/utils.css @@ -8,6 +8,6 @@ width: fit-content; } -.margin-block-start-md { - margin-block-start: var(--spacing-block-md); -}
\ No newline at end of file +.margin-block-start-sm { + margin-block-start: var(--margin-block-sm); +} diff --git a/public/css/variables/spacing.css b/public/css/variables/spacing.css index a29715e..0a55281 100644 --- a/public/css/variables/spacing.css +++ b/public/css/variables/spacing.css @@ -1,10 +1,10 @@ :root { - --spacing-block-xl: 4rem; - --spacing-block-lg: 2rem; - --spacing-block-md: 1.25rem; - --spacing-block-sm: 0.375rem; + --margin-block-lg: 3rem; + --margin-block-md: 2rem; + --margin-block-sm: 1rem; + --spacing-inline-lg: 5rem; --spacing-inline-md: 3rem; --spacing-inline-sm: 1.5rem; --spacing-inline-xs: 0.5rem; -}
\ No newline at end of file +} diff --git a/public/main.css b/public/main.css index 8f52ece..8eabd9f 100644 --- a/public/main.css +++ b/public/main.css @@ -14,18 +14,8 @@ } :is(main, article) > :is(section, header):not(:is(section, header) :is(section, header)) { - padding-inline: max(10%, calc((100% - var(--max-width-prose-content)) / 2)); - padding-block: var(--spacing-block-lg) var(--spacing-block-xl); -} - -:is(main, article) > :is(section, header):not(:is(section, header) :is(section, header)).section--full-width { - padding-inline: max(10%, calc((100% - var(--max-width-all-content)) / 2)); -} - -:is(main, article) - > :is(section, header):not(.section--full-width):not(:is(section, header) :is(section, header)) - > p { - max-width: var(--max-width-prose-content); + padding-block-start: var(--margin-block-lg); + padding-block-end: var(--margin-block-md); } :is(main, article) > section:nth-child(even):not(:is(section, header) :is(section, header)) { @@ -33,22 +23,12 @@ } footer { - padding-block-start: var(--spacing-block-md); - padding-bottom: 8rem; - padding-inline: max(10%, calc((100% - var(--max-width-all-content)) / 2)); -} - -.link-gallery { - padding-block: var(--spacing-block-md); -} - -:is(.lallans-issue__contributions, .lallans-issue__contributors) ul { - font-size: var(--font-size-0); - padding-block-end: var(--spacing-block-md); + padding-block-start: var(--margin-block-md); + padding-block-end: var(--margin-block-lg); } nav { - padding-block-start: var(--spacing-block-sm); - padding-block-end: var(--spacing-block-md); + padding-block-start: var(--margin-block-sm); + padding-block-end: var(--margin-block-md); padding-inline: var(--spacing-inline-sm); } diff --git a/public/normalize.css b/public/normalize.css index 28cce67..ff49f7a 100644 --- a/public/normalize.css +++ b/public/normalize.css @@ -366,6 +366,12 @@ a { } ol { + margin: 0; + padding: 0; +} + +ul { + margin: 0; padding: 0; } @@ -373,6 +379,42 @@ li { list-style: none; } +dl { + margin: 0; + padding: 0; +} + +dt { + margin: 0; + padding: 0; +} + dd { margin: 0; -}
\ No newline at end of file + padding: 0; +} + +p { + margin: 0; + padding: 0; +} + +h1 { + margin: 0; + padding: 0; +} + +h2 { + margin: 0; + padding: 0; +} + +h3 { + margin: 0; + padding: 0; +} + +h4 { + margin: 0; + padding: 0; +} diff --git a/src/pages/[locale]/index.astro b/src/pages/[locale]/index.astro index 6a3af60..82cafd4 100644 --- a/src/pages/[locale]/index.astro +++ b/src/pages/[locale]/index.astro @@ -21,7 +21,7 @@ const mostRecentNewsItem = await getMostRecentNewsItem(locale); <section> <h2 set:html={t(tPage, { key: 'news' })} /> {mostRecentNewsItem && <NewsPreviewLink headingLevel="h3" newsItem={mostRecentNewsItem} />} - <div class="align-end margin-block-start-md"> + <div class="align-end margin-block-start-sm"> <a href={`/${locale}/news`} class="btn"> {t(tPage, { key: 'aw-news' })} ▷ </a> @@ -31,7 +31,7 @@ const mostRecentNewsItem = await getMostRecentNewsItem(locale); <section> <h2 set:html={t(tPage, { key: 'furthsettins' })} /> <p set:html={t(tPage, { key: 'furthsettins-para' })} /> - <div class="align-end"> + <div class="align-end margin-block-start-sm"> <a href={`/${locale}/furthsettins`} class="btn"> {t(tPage, { key: 'aw-furthsettins' })} ▷ </a> |
