diff --git a/assets/css/src/calendar-strip.css b/assets/css/src/calendar-strip.css index 4666376..b4d9211 100644 --- a/assets/css/src/calendar-strip.css +++ b/assets/css/src/calendar-strip.css @@ -65,3 +65,10 @@ .calendar-strip__date.open { max-height: 20rem; } + +@media screen and (max-width: 800px) { + .calendar-strip { + margin-top: 2rem; + border-top: var(--border); + } +} diff --git a/assets/css/src/callout.css b/assets/css/src/callout.css index 74ccf68..54e3b21 100644 --- a/assets/css/src/callout.css +++ b/assets/css/src/callout.css @@ -4,6 +4,7 @@ section.callout { display: flex; flex-direction: column; align-items: center; + text-align: center; } section.callout h4 { @@ -14,3 +15,19 @@ section.callout a { display: flex; align-items: center; } + +@media screen and (max-width: 800px) { + section.callout { + padding: 2.25rem 2rem; + } + section.callout h4 { + font-size: var(--font-size-m); + } + + section.callout h4 { + margin-bottom: 1rem; + } + section.callout svg { + width: 1.5rem; + } +} diff --git a/assets/css/src/event-key-infos.css b/assets/css/src/event-key-infos.css index 615556b..c95d600 100644 --- a/assets/css/src/event-key-infos.css +++ b/assets/css/src/event-key-infos.css @@ -19,3 +19,19 @@ section.key-infos .key-infos__key { section.key-infos .key-infos__key:not(:last-child) { margin-right: 3rem; } + +@media screen and (max-width: 800px) { + section.key-infos ul { + display: grid; + grid-template-columns: 1fr 1fr; + row-gap: 0.3rem; + } + + section.key-infos li:nth-child(even) { + justify-self: flex-end; + } + + section.key-infos .key-infos__key:not(:last-child) { + margin-right: 0.2rem; + } +} diff --git a/assets/css/src/event-presentation.css b/assets/css/src/event-presentation.css index 11e9226..039eb4a 100644 --- a/assets/css/src/event-presentation.css +++ b/assets/css/src/event-presentation.css @@ -19,3 +19,10 @@ .presentation__description { font-size: var(--font-size-s); } + +@media screen and (max-width: 800px) { + .presentation { + grid-template-columns: 1fr; + row-gap: 1rem; + } +} diff --git a/assets/css/src/events-grid.css b/assets/css/src/events-grid.css index 3ad6f15..8ae4e53 100644 --- a/assets/css/src/events-grid.css +++ b/assets/css/src/events-grid.css @@ -31,6 +31,7 @@ .event-card__infos > div { display: flex; justify-content: space-between; + align-items: flex-end; } .event-card__infos > div:first-child { margin-bottom: calc(var(--space-m) / 2); @@ -41,3 +42,22 @@ inset: 0; z-index: 3; } + +@media screen and (max-width: 800px) { + .events-grid { + --padding-vertical: 10vw; + } + .events-grid h4 { + margin-bottom: 1.2rem; + } + .event-card { + margin-bottom: 1rem; + } + .event-card picture { + height: 70vw; + } + + .event-card svg { + width: 2rem; + } +} diff --git a/assets/css/src/footer.css b/assets/css/src/footer.css index 3eed1dc..f303935 100644 --- a/assets/css/src/footer.css +++ b/assets/css/src/footer.css @@ -23,3 +23,10 @@ .main-footer form input::after { content: "→"; } + +@media screen and (max-width: 800px) { + .main-footer { + grid-template-columns: 1fr; + row-gap: 1rem; + } +} diff --git a/assets/css/src/generic.css b/assets/css/src/generic.css index e042632..f93a9b1 100644 --- a/assets/css/src/generic.css +++ b/assets/css/src/generic.css @@ -205,3 +205,9 @@ img { img.show { opacity: 1; } + +@media screen and (max-width: 800px) { + .logo { + font-size: 6vw; + } +} diff --git a/assets/css/src/hero.css b/assets/css/src/hero.css index eab97dd..a61df9d 100644 --- a/assets/css/src/hero.css +++ b/assets/css/src/hero.css @@ -44,3 +44,23 @@ content: "→"; margin-right: 1rem; } + +@media screen and (max-width: 800px) { + .hero__text h2 { + text-align: center; + } + + .hero__text p:first-of-type { + margin-top: 1rem; + } + + .hero__link { + position: relative; + display: block; + margin: 1rem 0; + } + + .hero { + border-bottom: none !important; + } +} diff --git a/assets/css/src/nav.css b/assets/css/src/nav.css index a36d8c6..846256a 100644 --- a/assets/css/src/nav.css +++ b/assets/css/src/nav.css @@ -112,6 +112,10 @@ margin-right: 2.69rem; } +.main-nav__search { + transform: translateY(1px); +} + .main-nav .burger-btn { position: relative; width: 1.5rem; @@ -174,6 +178,15 @@ display: none; } + .main-nav__right > :not(:last-child), + .main-nav__featured-pages li:not(:last-child) { + margin-right: 7vw; + } + + .main-nav svg { + height: 5.2vw; + } + .expanded-nav { width: 100vw; height: 100vh; @@ -232,7 +245,6 @@ } .expanded-nav__socials { - position: absolute; - bottom: 3rem; + margin-top: 3rem; } } diff --git a/assets/css/src/variables.css b/assets/css/src/variables.css index 41bbf5d..ccebb59 100644 --- a/assets/css/src/variables.css +++ b/assets/css/src/variables.css @@ -42,6 +42,14 @@ @media screen and (max-width: 800px) { :root { + --font-size-xl: 2.5rem; + --font-size-h1: 1.875rem; --font-size-h2: 1.5625rem; + --font-size-h3: 1.25rem; + --font-size-h4: 1.25rem; + --font-size-h5: 1.25rem; + --font-size-m: 0.9375rem; + + --padding-vertical: 1rem; } } diff --git a/site/snippets/event-card.php b/site/snippets/event-card.php index 3f85760..bea09f0 100644 --- a/site/snippets/event-card.php +++ b/site/snippets/event-card.php @@ -2,7 +2,7 @@