summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorJoe Carstairs <65492573+Sycamost@users.noreply.github.com>2023-08-19 10:41:51 +0100
committerJoe Carstairs <65492573+Sycamost@users.noreply.github.com>2023-08-19 10:41:51 +0100
commit41a42b051e1c8f9f5bcc6ec749b6d60c8b4ff7fd (patch)
treedccd59912c9cfbc4c936405c2bc5bdc9ac7a05dc
parentba389e0b558d27d9d2e30c9f9f681e50d03309bd (diff)
Improves block spacing
-rw-r--r--public/css/base/typography.css25
-rw-r--r--public/css/modules/link-gallery.css4
-rw-r--r--public/css/modules/nav.css18
-rw-r--r--public/css/modules/nav.lg.css2
-rw-r--r--public/css/modules/news-index.css17
-rw-r--r--public/css/modules/product.css6
-rw-r--r--public/css/modules/schedule.css10
-rw-r--r--public/css/modules/schedule.lg.css5
-rw-r--r--public/css/utils.css6
-rw-r--r--public/css/variables/spacing.css10
-rw-r--r--public/main.css32
-rw-r--r--public/normalize.css44
-rw-r--r--src/pages/[locale]/index.astro4
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>