KevinMidboe/seasoned
1
0
Fork 0
Code Issues 12 Pull Requests 1 Packages Projects Releases 1 Wiki Activity

Re implemented header navigation

Browse Source
This commit is contained in:
Kevin
2022-01-10 00:46:26 +01:00
parent 39930428a9
commit 97c23fa895
8 changed files with 718 additions and 535 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/scss/media-queries.scss
View File

@@ -3,77 +3,77 @@
$phone-xs-width: 480px;
$tablet-p-width: 768px;
$tablet-l-width: 1024px;
$desktop-width: 1200px;
$desktop-width: 1200px;
$desktop-l-width: 1600px;
$mobile-width: 768px;
@mixin desktop {
@media (min-width: #{$mobile-width + 1px}) {
@content;
}
@content;
}
}
@mixin mobile {
@media (max-width: #{$mobile-width}) {
@content;
}
@content;
}
}
.desktop-only {
@include mobile {
display: none;
display: none !important;
}
}
.mobile-only {
@include desktop {
display: none;
display: none !important;
}
}
// Media
@mixin mobile-only{
@media (max-width: #{$tablet-p-width - 1px}){
@mixin mobile-only {
@media (max-width: #{$tablet-p-width - 1px}) {
@content;
}
}
@mixin mobile-ls-min{
@media (min-width: #{$phone-xs-width}){
@mixin mobile-ls-min {
@media (min-width: #{$phone-xs-width}) {
@content;
}
}
@mixin tablet-only{
@media (min-width: #{$tablet-p-width}) and (max-width: #{$desktop-width - 1px}){
@mixin tablet-only {
@media (min-width: #{$tablet-p-width}) and (max-width: #{$desktop-width - 1px}) {
@content;
}
}
@mixin tablet-min{
@media (min-width: #{$tablet-p-width}){
@mixin tablet-min {
@media (min-width: #{$tablet-p-width}) {
@content;
}
}
@mixin tablet-portrait-only{
@media (min-width: #{$tablet-p-width}) and (max-width: #{$tablet-l-width - 1px}){
@mixin tablet-portrait-only {
@media (min-width: #{$tablet-p-width}) and (max-width: #{$tablet-l-width - 1px}) {
@content;
}
}
@mixin tablet-landscape-min{
@media (min-width: #{$tablet-l-width}){
@mixin tablet-landscape-min {
@media (min-width: #{$tablet-l-width}) {
@content;
}
}
@mixin desktop-min{
@media (min-width: #{$desktop-width}){
@mixin desktop-min {
@media (min-width: #{$desktop-width}) {
@content;
}
}
@mixin desktop-lg-min{
@media (min-width: #{$desktop-l-width}){
@mixin desktop-lg-min {
@media (min-width: #{$desktop-l-width}) {
@content;
}
}
@mixin retina{
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){
@content;
}
@mixin retina {
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
@content;
}
}

16
src/scss/variables.scss
View File

@@ -18,12 +18,12 @@
--background-nav-logo: #081c24;
--color-green: #01d277;
--color-green-90: rgba(1, 210, 119, .9);
--color-green-70: rgba(1, 210, 119, .73);
--color-green-90: rgba(1, 210, 119, 0.9);
--color-green-70: rgba(1, 210, 119, 0.73);
--color-teal: #091c24;
--color-black: #081c24;
--white: #fff;
--white-70: rgba(255,255,255,0.7);
--white-70: rgba(255, 255, 255, 0.7);
--color-warning: rgba(241, 188, 53, 0.7);
--color-warning-highlight: #f1bc35;
@@ -31,9 +31,9 @@
--color-success-text: #fff;
--color-success-highlight: rgb(0, 100, 66);
--color-error: rgba(220, 48, 35, 0.8);
--color-error-highlight: #DC3023;
--color-error-highlight: #dc3023;
--header-size: 75px;
--header-size: 90px;
}
@media (prefers-color-scheme: dark) {
@@ -55,7 +55,7 @@
@include mobile-only {
:root {
--header-size: 50px;
--header-size: 55px;
}
}
@@ -67,9 +67,9 @@ $green-90: var(--color-green-90);
$green-70: var(--color-green-70);
$teal: #091c24;
$black: #081c24;
$black-80: rgba(0,0,0,0.8);
$black-80: rgba(0, 0, 0, 0.8);
$white: #fff;
$white-80: rgba(255,255,255,0.8);
$white-80: rgba(255, 255, 255, 0.8);
$text-color: var(--text-color) !default;
$text-color-70: var(--text-color-70) !default;