angestoepselt/homepage
5
0
Fork 0
mirror of https://codeberg.org/angestoepselt/homepage.git synced 2025-05-24 14:46:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Tweak some mobile styles

Browse source
This commit is contained in:
Yannik Rödel 2022-03-18 19:11:05 +01:00
parent c7aefe142d
commit 1fb770080d
3 changed files with 26 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/styles/components/_form-elements.scss
View file

@ -6,7 +6,13 @@
%form-item { %form-item {
@extend %narrow-content-gutter; @extend %narrow-content-gutter;
display: flex; display: flex;
flex-direction: column;
align-items: stretch;
@media screen and (min-width: layout.$breakpoint) {
flex-direction: row;
align-items: center; align-items: center;
}
} }
%form-label { %form-label {
@ -42,15 +48,23 @@
> span { > span {
@extend %form-label; @extend %form-label;
flex-grow: 1; flex-grow: 1;
@media screen and (min-width: layout.$breakpoint) {
text-align: right; text-align: right;
} }
}
> input, > input,
> textarea { > textarea {
@extend %form-input; @extend %form-input;
flex-basis: 60%; flex-basis: 60%;
margin-top: layout.$small-gap;
@media screen and (min-width: layout.$breakpoint) {
margin-top: 0;
margin-left: layout.$normal-gap; margin-left: layout.$normal-gap;
} }
}
} }
.form-checkbox { .form-checkbox {
@ -95,7 +109,6 @@
.form-submit { .form-submit {
@extend %form-item; @extend %form-item;
justify-content: flex-end; justify-content: flex-end;
margin: layout.$huge-gap auto;
> input { > input {
@extend %form-input; @extend %form-input;

4
src/styles/components/_markup.scss
View file

@ -9,7 +9,7 @@ body {
} }
%title { %title {
@extend %content; @extend %content-gutter;
margin-top: layout.$huge-gap; margin-top: layout.$huge-gap;
margin-bottom: layout.$large-gap; margin-bottom: layout.$large-gap;
font-size: typography.$title-size; font-size: typography.$title-size;
@ -22,7 +22,7 @@ h1 {
} }
%heading { %heading {
@extend %content; @extend %content-gutter;
margin-top: layout.$large-gap; margin-top: layout.$large-gap;
margin-bottom: layout.$large-gap; margin-bottom: layout.$large-gap;
font-size: typography.$heading-size; font-size: typography.$heading-size;

7
src/styles/lib/_layout.scss
View file

@ -17,8 +17,13 @@ $wide-content-width: 80rem;
} }
%narrow-content-gutter { %narrow-content-gutter {
margin: $normal-gap auto; margin: $normal-gap $normal-gap;
@media screen and (min-width: $breakpoint) {
margin-left: auto;
margin-right: auto;
max-width: $narrow-content-width; max-width: $narrow-content-width;
}
} }
%content { %content {