feat(Style): update responsive design of landing page
fix overflow issues in small screens, hide full navbar on mobile and replace for an off-canvas version
This commit is contained in:
parent
daa5eb27b6
commit
d49fe554ee
4 changed files with 345 additions and 127 deletions
|
|
@ -1,17 +1,58 @@
|
|||
@use './variables' as *;
|
||||
@use './mixins';
|
||||
|
||||
.d-none {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.d-block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.d-flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.visually-hidden {
|
||||
height: 0;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@include mixins.responsive using($screen-size) {
|
||||
.d-#{$screen-size}-none {
|
||||
display: none;
|
||||
}
|
||||
.d-#{$screen-size}-block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.d-#{$screen-size}-flex {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-eq > * {
|
||||
flex: 100%;
|
||||
}
|
||||
|
||||
.flex-column {
|
||||
flex-direction: column !important;
|
||||
}
|
||||
.flex-row {
|
||||
flex-direction: row !important;
|
||||
}
|
||||
|
||||
@include mixins.responsive using($screen-size) {
|
||||
.flex-#{$screen-size}-column {
|
||||
flex-direction: column !important;
|
||||
}
|
||||
.flex-#{$screen-size}-row {
|
||||
flex-direction: row !important;
|
||||
}
|
||||
}
|
||||
|
||||
.hstack {
|
||||
--prj-gap: var(--prj-spacing-3);
|
||||
display: flex;
|
||||
|
|
@ -50,15 +91,13 @@
|
|||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
@each $name, $size in $screen-sizes {
|
||||
@media screen and (min-width: $size) {
|
||||
.flex-#{$name}-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
@include mixins.responsive using($size-name) {
|
||||
.flex-#{$size-name}-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.flex-#{$name}-nowrap {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
.flex-#{$size-name}-nowrap {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -72,6 +111,14 @@
|
|||
justify-content: center !important;
|
||||
}
|
||||
|
||||
.justify-content-between {
|
||||
justify-content: space-between !important;
|
||||
}
|
||||
|
||||
.justify-content-around {
|
||||
justify-content: space-around !important;
|
||||
}
|
||||
|
||||
.grid {
|
||||
--prj-gap: var(--prj-spacing-3);
|
||||
--prj-columns: repeat(3, 1fr);
|
||||
|
|
@ -81,15 +128,19 @@
|
|||
gap: var(--prj-gap);
|
||||
}
|
||||
|
||||
@mixin grid-cols($amount) {
|
||||
--prj-columns: repeat(#{$amount}, minmax(var(--prj-min-col-width), 1fr));
|
||||
}
|
||||
|
||||
@for $i from 1 through 12 {
|
||||
.grid-cols-#{$i} {
|
||||
--prj-columns: repeat(#{$i}, minmax(var(--prj-min-col-width), 1fr));
|
||||
@include grid-cols($i);
|
||||
}
|
||||
}
|
||||
|
||||
@each $index, $variable, $value in $spacings {
|
||||
.gap-#{$index} {
|
||||
--prj-gap: var(#{$variable});
|
||||
@include mixins.responsive-steps(1, 12) using ($size-name, $index) {
|
||||
.grid-#{$size-name}-cols-#{$index} {
|
||||
@include grid-cols($index);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -151,99 +202,82 @@
|
|||
}
|
||||
}
|
||||
|
||||
.m-auto {
|
||||
margin: auto !important;
|
||||
@include mixins.responsive-steps(0, 100) using ($size-name, $index) {
|
||||
.w-#{$size-name}-#{$index} {
|
||||
width: percentage($index / 100);
|
||||
}
|
||||
|
||||
.h-#{$size-name}-#{$index} {
|
||||
height: percentage($index / 100);
|
||||
}
|
||||
}
|
||||
.mx-auto {
|
||||
margin-left: auto !important;
|
||||
margin-right: auto !important;
|
||||
|
||||
@mixin spacing-utils($name, $value, $screen-size: false) {
|
||||
@if $screen-size {
|
||||
$name: '#{$screen-size}-#{$name}';
|
||||
}
|
||||
|
||||
.m-#{$name} {
|
||||
margin: $value !important;
|
||||
}
|
||||
.mx-#{$name} {
|
||||
margin-left: $value !important;
|
||||
margin-right: $value !important;
|
||||
}
|
||||
.my-#{$name} {
|
||||
margin-top: $value !important;
|
||||
margin-bottom: $value !important;
|
||||
}
|
||||
.mt-#{$name} {
|
||||
margin-top: $value !important;
|
||||
}
|
||||
.mb-#{$name} {
|
||||
margin-bottom: $value !important;
|
||||
}
|
||||
.ml-#{$name} {
|
||||
margin-left: $value !important;
|
||||
}
|
||||
.mr-#{$name} {
|
||||
margin-right: $value !important;
|
||||
}
|
||||
.p-#{$name} {
|
||||
padding: $value !important;
|
||||
}
|
||||
.px-#{$name} {
|
||||
padding-left: $value !important;
|
||||
padding-right: $value !important;
|
||||
}
|
||||
.py-#{$name} {
|
||||
padding-top: $value !important;
|
||||
padding-bottom: $value !important;
|
||||
}
|
||||
.pt-#{$name} {
|
||||
padding-top: $value !important;
|
||||
}
|
||||
.pb-#{$name} {
|
||||
padding-bottom: $value !important;
|
||||
}
|
||||
.pl-#{$name} {
|
||||
padding-left: $value !important;
|
||||
}
|
||||
.pr-#{$name} {
|
||||
padding-right: $value !important;
|
||||
}
|
||||
|
||||
.gap-#{$name} {
|
||||
--prj-gap: #{$value};
|
||||
}
|
||||
}
|
||||
.my-auto {
|
||||
margin-top: auto !important;
|
||||
margin-bottom: auto !important;
|
||||
}
|
||||
.mt-auto {
|
||||
margin-top: auto !important;
|
||||
}
|
||||
.mb-auto {
|
||||
margin-bottom: auto !important;
|
||||
}
|
||||
.ml-auto {
|
||||
margin-left: auto !important;
|
||||
}
|
||||
.mr-auto {
|
||||
margin-right: auto !important;
|
||||
}
|
||||
.p-auto {
|
||||
padding: auto !important;
|
||||
}
|
||||
.px-auto {
|
||||
padding-left: auto !important;
|
||||
padding-right: auto !important;
|
||||
}
|
||||
.py-auto {
|
||||
padding-top: auto !important;
|
||||
padding-bottom: auto !important;
|
||||
}
|
||||
.pt-auto {
|
||||
padding-top: auto !important;
|
||||
}
|
||||
.pb-auto {
|
||||
padding-bottom: auto !important;
|
||||
}
|
||||
.pl-auto {
|
||||
padding-left: auto !important;
|
||||
}
|
||||
.pr-auto {
|
||||
padding-right: var(--prj-spacing-5) !important;
|
||||
|
||||
@include spacing-utils(auto, auto);
|
||||
@include mixins.responsive using($screen-size) {
|
||||
@include spacing-utils(auto, auto);
|
||||
}
|
||||
|
||||
@each $index, $variable, $value in $spacings {
|
||||
.m-#{$index} {
|
||||
margin: var(#{$variable}) !important;
|
||||
}
|
||||
.mx-#{$index} {
|
||||
margin-left: var(#{$variable}) !important;
|
||||
margin-right: var(#{$variable}) !important;
|
||||
}
|
||||
.my-#{$index} {
|
||||
margin-top: var(#{$variable}) !important;
|
||||
margin-bottom: var(#{$variable}) !important;
|
||||
}
|
||||
.mt-#{$index} {
|
||||
margin-top: var(#{$variable}) !important;
|
||||
}
|
||||
.mb-#{$index} {
|
||||
margin-bottom: var(#{$variable}) !important;
|
||||
}
|
||||
.ml-#{$index} {
|
||||
margin-left: var(#{$variable}) !important;
|
||||
}
|
||||
.mr-#{$index} {
|
||||
margin-right: var(#{$variable}) !important;
|
||||
}
|
||||
.p-#{$index} {
|
||||
padding: var(#{$variable}) !important;
|
||||
}
|
||||
.px-#{$index} {
|
||||
padding-left: var(#{$variable}) !important;
|
||||
padding-right: var(#{$variable}) !important;
|
||||
}
|
||||
.py-#{$index} {
|
||||
padding-top: var(#{$variable}) !important;
|
||||
padding-bottom: var(#{$variable}) !important;
|
||||
}
|
||||
.pt-#{$index} {
|
||||
padding-top: var(#{$variable}) !important;
|
||||
}
|
||||
.pb-#{$index} {
|
||||
padding-bottom: var(#{$variable}) !important;
|
||||
}
|
||||
.pl-#{$index} {
|
||||
padding-left: var(#{$variable}) !important;
|
||||
}
|
||||
.pr-#{$index} {
|
||||
padding-right: var(#{$variable}) !important;
|
||||
@include spacing-utils($index, var(#{$variable}));
|
||||
@include mixins.responsive using($screen-size) {
|
||||
@include spacing-utils($index, var(#{$variable}), $screen-size);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue