1
Fork 0
holllo-org/source/scss/re-nav/re-nav.scss

79 lines
1.4 KiB
SCSS

@use '../mixins';
body {
padding: var(--spacing-16);
}
.page-header {
@include mixins.responsive-container($width-breakpoint: 600px);
margin-bottom: var(--spacing-16);
h1 {
align-items: center;
border: 1px solid var(--foreground-2);
display: flex;
font-size: 2.5rem;
margin-bottom: var(--spacing-08);
}
img {
align-items: center;
background-color: var(--df-2);
color: var(--db-1);
display: inline-flex;
height: 4.5rem;
justify-content: center;
margin-right: var(--spacing-08);
padding: var(--spacing-08);
width: 4.5rem;
}
.byline {
background-color: var(--background-2);
font-weight: bold;
padding: var(--spacing-08);
text-align: center;
}
}
.page-main {
@include mixins.responsive-container($width-breakpoint: 900px);
margin-bottom: var(--spacing-16);
display: flex;
flex-direction: column;
.store-links {
align-items: center;
display: flex;
gap: var(--spacing-08);
justify-content: center;
margin-bottom: var(--spacing-16);
@media (max-width: 600px) {
flex-direction: column;
}
a {
padding: var(--spacing-04);
text-decoration: none;
}
img {
display: block;
height: fit-content;
}
}
.screenshot {
border: 1px solid var(--foreground-2);
}
}
.page-footer {
@include mixins.responsive-container($width-breakpoint: 600px);
text-align: center;
}