freifunk/ffffng
0
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Make page padding dependend on screen size.

Browse source
This commit is contained in:
baldo 2022-08-23 15:16:35 +02:00
parent e403e9858d
commit cf134eb199
2 changed files with 27 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
frontend/src/App.vue
View file

@ -17,16 +17,28 @@ import PageFooter from "@/components/page/PageFooter.vue";
<style lang="scss">
@import "fork-awesome";
@import "scss/variables";
@import "scss/mixins";
body {
background-color: $page-background-color;
color: $page-text-color;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: $page-font-size;
font-family: $page-font-family;
margin: 0;
}
main {
padding: $page-padding;
padding-top: $page-padding-top;
padding-bottom: $page-padding-bottom;
@each $breakpoint, $padding in $page-paddings-horizontal {
@include page-breakpoint($breakpoint) {
& {
padding-left: $padding;
padding-right: $padding;
}
}
}
}
a {

14
frontend/src/scss/_variables.scss
View file

@ -53,9 +53,21 @@ $page-container-widths: (
larger: 992px,
largest: 992px,
);
$page-font-size: 0.9em;
$page-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
$page-background-color: $gray-darkest;
$page-text-color: $gray-lighter;
$page-padding: 0.5em 0.5em 4.5em 0.5em;
$page-padding-top: 0.5em;
$page-padding-bottom: 4.5em;
$page-paddings-horizontal: (
smallest: 0.75em,
smaller: 0.75em,
small: 1em,
medium: 1.25em,
large: 1.25em,
larger: 1.25em,
largest: 1.25em,
);
// Links
$link-color: $variant-color-warning;