arcHIVE-tech/arc-hive-HTML-template
arcHIVE-tech
/
arc-hive-HTML-template
4
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

aligned top menu and footer for smaller and medium devices

This commit is contained in:
jorge 2021-07-06 11:38:06 +02:00
parent 9b578134a8
commit c4bfadae9b
4 changed files with 28 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/scss/global/_branding.scss
View File

@ -24,8 +24,6 @@
} }
&.eu{ &.eu{
&::before { &::before {
max-width: 15rem;
// background-image: url('../img/eu_flag_creative_europe_co_funded_black_right.svg');
background-image: url('../img/eu_flag_creative_europe_co_funded_left.svg'); background-image: url('../img/eu_flag_creative_europe_co_funded_left.svg');
} }
} }

6
src/assets/scss/modules/_content.scss
View File

@ -163,12 +163,13 @@ main {
main { main {
@include xy-grid; @include xy-grid;
article{ article{
// text-align:center;
@include card-container(); @include card-container();
@include breakpoint(small){ @include breakpoint(small){
@include xy-cell(); @include xy-cell();
font-size: $global-font-size*0.7;
} }
@include breakpoint(medium){ @include breakpoint(medium){
font-size: $global-font-size*1;
} }
@include breakpoint(large){ @include breakpoint(large){
} }
@ -249,11 +250,12 @@ main {
@include xy-grid(); @include xy-grid();
.slide { .slide {
@include xy-grid; @include xy-grid;
justify-content: center;
@include breakpoint(small){ @include breakpoint(small){
width: 100vw; width: 100vw;
margin: 0; margin: 0;
padding: $global-padding * 3;
.textwidget { .textwidget {
padding: $global-padding * 3;
} }
} }
@include breakpoint(medium){ @include breakpoint(medium){

17
src/assets/scss/modules/_footer.scss
View File

@ -31,9 +31,19 @@ footer {
} }
&.eu { &.eu {
&::before { &::before {
margin-top:unset; @include breakpoint(small) {
max-width:100%; // background-image: url('../img/eu_flag_creative_europe_co_funded_black_right.svg');
max-height: 4rem; background-position-x: right;
max-width: 50vw;
margin-top:unset;
}
@include breakpoint(medium) {
background-position-x: left;
margin-top:unset;
max-width:100%;
max-height: 4rem;
}
} }
} }
} }
@ -76,4 +86,3 @@ footer {
} }
} }
} }

16
src/assets/scss/modules/_header.scss
View File

@ -10,14 +10,14 @@
min-width: 14rem; min-width: 14rem;
text-align: center; text-align: center;
} }
@include breakpoint(medium){ @include breakpoint(large){
@include xy-cell(shrink); @include xy-cell(shrink);
@include flex-align(left, middle); @include flex-align(left, middle);
text-align: unset; text-align: unset;
} }
} }
nav { nav {
@include breakpoint(small){ @include breakpoint(small) {
@include xy-cell(12); @include xy-cell(12);
@include flex; @include flex;
@include flex-align(center, middle); @include flex-align(center, middle);
@ -32,17 +32,23 @@
padding: 0; padding: 0;
font-size: 0.8rem; font-size: 0.8rem;
} }
.menu a {
padding: $global-padding*0.7 $global-padding*0.5;
}
} }
@include breakpoint(medium){ @include breakpoint(medium) {
menu {
font-size: $global-font-size*1.5;
}
}
@include breakpoint(large) {
@include xy-cell(auto); @include xy-cell(auto);
@include flex; @include flex;
@include flex-align(right, middle); @include flex-align(right, middle);
menu { menu {
margin: inherit; margin: inherit;
padding: inherit; padding: inherit;
font-size: $global-font-size*1.5;
} }
} }
} }
} }