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,8 +6,14 @@
%form-item {
@extend %narrow-content-gutter;
display: flex;
flex-direction: column;
align-items: stretch;
@media screen and (min-width: layout.$breakpoint) {
flex-direction: row;
align-items: center;
}
}
%form-label {
font-weight: typography.$emphasized-weight;
@ -42,16 +48,24 @@
> span {
@extend %form-label;
flex-grow: 1;
@media screen and (min-width: layout.$breakpoint) {
text-align: right;
}
}
> input,
> textarea {
@extend %form-input;
flex-basis: 60%;
margin-top: layout.$small-gap;
@media screen and (min-width: layout.$breakpoint) {
margin-top: 0;
margin-left: layout.$normal-gap;
}
}
}
.form-checkbox {
$size: 2rem;
@ -95,7 +109,6 @@
.form-submit {
@extend %form-item;
justify-content: flex-end;
margin: layout.$huge-gap auto;
> input {
@extend %form-input;

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

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

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

@ -17,9 +17,14 @@ $wide-content-width: 80rem;
}
%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;
}
}
%content {
margin-left: auto;