autonomic-cooperative/cotech-website
4
0
Fork 2
mirror of https://git.coop/cotech/website.git synced 2025-06-26 16:40:52 +00:00
Code Issues Releases Wiki Activity

Layout improvements on mobile

Browse Source 
I've hidden the metadata and reduced some whitespace to make things
look a little better on small screens.
This commit is contained in:
Chris Lowis
2025-06-25 21:23:29 +01:00
parent fa70991744
commit fea43c6370
1 changed files with 22 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
assets/css/app.css
View File

@ -118,7 +118,7 @@ section.content h2 {
.hero { .hero {
width: 100%; width: 100%;
padding: var(--space-xxl); padding: var(--space-lg) var(--space-sm);
background-image: url(/assets/img/banner-collage.jpg); background-image: url(/assets/img/banner-collage.jpg);
background-position: center center; background-position: center center;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -130,6 +130,12 @@ section.content h2 {
text-align: center; text-align: center;
} }
@media screen and (width >= 480px) {
.hero {
padding: var(--space-xxl);
}
}
.hero_body { .hero_body {
font-size: 1.5em; font-size: 1.5em;
font-weight: bold; font-weight: bold;
@ -155,7 +161,7 @@ section.content h2 {
.slice { .slice {
width: 100%; width: 100%;
padding: var(--space-lg); padding: var(--space-sm);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -163,6 +169,12 @@ section.content h2 {
text-align: center; text-align: center;
} }
@media screen and (width >= 480px) {
.slice {
padding: var(--space-lg);
}
}
.slice--light-grey { .slice--light-grey {
background-color: var(--cotech-light-grey); background-color: var(--cotech-light-grey);
} }
@ -216,10 +228,16 @@ section.content h2 {
max-width: 200px; max-width: 200px;
} }
.metadata {
display: none;
}
@media screen and (width >= 480px) {
.metadata { .metadata {
display: flex; display: flex;
gap: var(--space-xl); gap: var(--space-xl);
} }
}
.metadata_item { .metadata_item {
display: flex; display: flex;