From fed636f78c61d6fc5ab5aa46dbfceed2514d50cc Mon Sep 17 00:00:00 2001 From: cymon Date: Mon, 12 Jun 2023 17:47:49 +0000 Subject: [PATCH] code cleanup and some fixes --- src/assets/hns.svg | 3 ++ src/assets/osi.svg | 26 +++++++++++ src/assets/sia.svg | 5 ++ src/components/Donate/How/How.scss | 5 +- src/components/Donate/Legal/Legal.scss | 3 +- src/components/Donate/Methods/Methods.scss | 3 +- src/components/Donate/Why/Why.scss | 1 - src/components/Home/CTO/CTO.scss | 2 +- src/components/Home/Meme/Meme.scss | 4 +- src/components/Home/Message/Message.scss | 3 +- src/components/Home/PoweredBy/PoweredBy.astro | 41 +++-------------- src/components/Home/PoweredBy/PoweredBy.scss | 2 +- src/components/Home/Socials/Socials.scss | 2 +- src/components/Home/Vision/Vision.scss | 3 +- src/components/Layout/Footer/Footer.scss | 6 +-- .../Layout/JoinCommunity/JoinCommunity.scss | 3 +- src/components/Layout/Navbar/Navbar.scss | 6 +-- .../Vision/Community/Community.scss | 3 +- src/components/Vision/People/People.scss | 1 - src/components/What/Astronaut/Astronaut.scss | 4 +- src/styles/global.scss | 4 +- src/styles/mixins.scss | 46 ------------------- src/styles/vars.scss | 6 +-- 23 files changed, 63 insertions(+), 119 deletions(-) create mode 100644 src/assets/hns.svg create mode 100644 src/assets/osi.svg create mode 100644 src/assets/sia.svg diff --git a/src/assets/hns.svg b/src/assets/hns.svg new file mode 100644 index 0000000..c11b041 --- /dev/null +++ b/src/assets/hns.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/osi.svg b/src/assets/osi.svg new file mode 100644 index 0000000..978b3ea --- /dev/null +++ b/src/assets/osi.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/sia.svg b/src/assets/sia.svg new file mode 100644 index 0000000..7765e0d --- /dev/null +++ b/src/assets/sia.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/src/components/Donate/How/How.scss b/src/components/Donate/How/How.scss index 372329b..fe72ce2 100644 --- a/src/components/Donate/How/How.scss +++ b/src/components/Donate/How/How.scss @@ -1,4 +1,3 @@ -@import "/src/styles/mixins.scss"; @import "/src/styles/vars.scss"; #how { @@ -6,9 +5,7 @@ flex-direction: column; justify-content: center; margin-top: 8em; - @include fluid-padding-lr; - padding-top: 14em; - padding-bottom: 16em; + padding: 14em 7.5% 16em; &::before { background-image: url("/src/assets/donate-gfx-right.png"); diff --git a/src/components/Donate/Legal/Legal.scss b/src/components/Donate/Legal/Legal.scss index b6263be..1480cdd 100644 --- a/src/components/Donate/Legal/Legal.scss +++ b/src/components/Donate/Legal/Legal.scss @@ -5,8 +5,7 @@ display: flex; flex-direction: column; justify-content: center; - padding: 11em 0 9em; - @include fluid-padding-lr; + padding: 11em 7.5% 9em; h2 { margin-bottom: 1em; diff --git a/src/components/Donate/Methods/Methods.scss b/src/components/Donate/Methods/Methods.scss index 118e728..73ff306 100644 --- a/src/components/Donate/Methods/Methods.scss +++ b/src/components/Donate/Methods/Methods.scss @@ -5,9 +5,8 @@ display: flex; flex-direction: column; justify-content: center; - margin: 2em 0 6em; + margin: 2em 7.5% 6em; padding-top: 3em; - @include fluid-margin-lr; font-family: $font-family-jaldi; h2 { diff --git a/src/components/Donate/Why/Why.scss b/src/components/Donate/Why/Why.scss index 73cbf8d..86f2d1d 100644 --- a/src/components/Donate/Why/Why.scss +++ b/src/components/Donate/Why/Why.scss @@ -1,4 +1,3 @@ -@import "/src/styles/mixins.scss"; @import "/src/styles/vars.scss"; #why { diff --git a/src/components/Home/CTO/CTO.scss b/src/components/Home/CTO/CTO.scss index 4c86a67..391127c 100644 --- a/src/components/Home/CTO/CTO.scss +++ b/src/components/Home/CTO/CTO.scss @@ -37,8 +37,8 @@ margin-top: 1.5em; gap: 1.2em; font-family: $font-family-jaldi; - color: $color-cloud; @include fluid-font-size(1.5rem); + color: $color-cloud; img { @include fluid-width-height(5.875rem, 5.875rem); diff --git a/src/components/Home/Meme/Meme.scss b/src/components/Home/Meme/Meme.scss index a33b7db..aa65e1a 100644 --- a/src/components/Home/Meme/Meme.scss +++ b/src/components/Home/Meme/Meme.scss @@ -4,9 +4,7 @@ #meme { display: flex; align-items: center; - @include fluid-padding-lr; - padding-top: 12em; - padding-bottom: 12em; + padding: 12em 7.5%; gap: 10em; .feature-group { diff --git a/src/components/Home/Message/Message.scss b/src/components/Home/Message/Message.scss index f290159..8a5b60f 100644 --- a/src/components/Home/Message/Message.scss +++ b/src/components/Home/Message/Message.scss @@ -2,8 +2,7 @@ @import "/src/styles/vars.scss"; #message { - padding: 5em 0; - @include fluid-padding-lr; + padding: 5em 7.5%; background: $color-aquamarine; color: $color-blue-charcoal-2; diff --git a/src/components/Home/PoweredBy/PoweredBy.astro b/src/components/Home/PoweredBy/PoweredBy.astro index c918773..f1d7e9b 100644 --- a/src/components/Home/PoweredBy/PoweredBy.astro +++ b/src/components/Home/PoweredBy/PoweredBy.astro @@ -1,49 +1,22 @@ --- import './PoweredBy.scss'; + +import svgSia from '/src/assets/sia.svg?raw'; +import svgHns from '/src/assets/hns.svg?raw'; +import svgOsi from '/src/assets/osi.svg?raw'; ---

Powered By

diff --git a/src/components/Home/PoweredBy/PoweredBy.scss b/src/components/Home/PoweredBy/PoweredBy.scss index 4c61e0a..a55b1b6 100644 --- a/src/components/Home/PoweredBy/PoweredBy.scss +++ b/src/components/Home/PoweredBy/PoweredBy.scss @@ -6,7 +6,7 @@ align-items: center; justify-content: center; gap: 4em; - margin: 12em 0; + margin: 12em 7.5%; @media screen and (max-width: 47.99999rem) { flex-direction: column; diff --git a/src/components/Home/Socials/Socials.scss b/src/components/Home/Socials/Socials.scss index b30a1ac..a5aed47 100644 --- a/src/components/Home/Socials/Socials.scss +++ b/src/components/Home/Socials/Socials.scss @@ -7,7 +7,7 @@ align-items: center; justify-content: center; gap: 3em; - margin: 12em 0 8em; + margin: 12em 7.5% 8em; div { display: flex; diff --git a/src/components/Home/Vision/Vision.scss b/src/components/Home/Vision/Vision.scss index 0e9a523..1221ff2 100644 --- a/src/components/Home/Vision/Vision.scss +++ b/src/components/Home/Vision/Vision.scss @@ -1,4 +1,3 @@ -@import "/src/styles/mixins.scss"; @import "/src/styles/vars.scss"; #vision { @@ -7,7 +6,7 @@ flex-direction: column; justify-content: center; min-height: 56.8em; - @include fluid-margin-lr; + margin: 0 7.5%; &::before { content: ""; diff --git a/src/components/Layout/Footer/Footer.scss b/src/components/Layout/Footer/Footer.scss index fc027f9..f8a283f 100644 --- a/src/components/Layout/Footer/Footer.scss +++ b/src/components/Layout/Footer/Footer.scss @@ -4,9 +4,7 @@ footer { display: flex; gap: 2%; - padding-top: 7em; - padding-bottom: 8em; - @include fluid-padding-lr; + padding: 7em 7.5% 8em; font-family: $font-family-jaldi; @include fluid-font-size(0.625rem); background: $color-blue-charcoal; @@ -70,7 +68,7 @@ footer { .footer-phrase { margin: auto 0 0; font-family: $font-family-jetbrains-mono; - font-weight: bold; + font-weight: 700; line-height: 133%; color: $color-aquamarine; } diff --git a/src/components/Layout/JoinCommunity/JoinCommunity.scss b/src/components/Layout/JoinCommunity/JoinCommunity.scss index 41c3eb9..ab6dc62 100644 --- a/src/components/Layout/JoinCommunity/JoinCommunity.scss +++ b/src/components/Layout/JoinCommunity/JoinCommunity.scss @@ -6,8 +6,7 @@ align-items: center; justify-content: space-between; gap: 2em; - padding: 5em 0; - @include fluid-padding-lr; + padding: 5em 7.5%; background: $color-aquamarine; color: $color-blue-charcoal-2; @include fluid-font-size(0.625rem); diff --git a/src/components/Layout/Navbar/Navbar.scss b/src/components/Layout/Navbar/Navbar.scss index c14ca95..3771292 100644 --- a/src/components/Layout/Navbar/Navbar.scss +++ b/src/components/Layout/Navbar/Navbar.scss @@ -54,7 +54,7 @@ menu { nav { position: sticky; top: 0; - background: rgba($color-blue-charcoal-2, 0.85); + background: rgba($color-blue-charcoal-2, 0.8); z-index: 2; } @@ -67,7 +67,7 @@ menu { right: min(-20rem, -100vw); bottom: 0; padding: 7.5em 7.5% 1em; - background: rgba($color-blue-charcoal-2, 0.85); + background: rgba($color-blue-charcoal-2, 0.8); transition: right $transition-duration; overflow-y: auto; @@ -106,6 +106,6 @@ menu { } 100% { - opacity: 0.85; + opacity: 0.8; } } diff --git a/src/components/Vision/Community/Community.scss b/src/components/Vision/Community/Community.scss index 7dc19e8..848ea21 100644 --- a/src/components/Vision/Community/Community.scss +++ b/src/components/Vision/Community/Community.scss @@ -1,4 +1,3 @@ -@import "/src/styles/mixins.scss"; @import "/src/styles/vars.scss"; #community { @@ -15,8 +14,8 @@ display: flex; flex-direction: column; justify-content: center; - @include fluid-margin-lr; max-width: 64em; + margin: 0 7.5%; } p { diff --git a/src/components/Vision/People/People.scss b/src/components/Vision/People/People.scss index 1a70953..acc927e 100644 --- a/src/components/Vision/People/People.scss +++ b/src/components/Vision/People/People.scss @@ -1,4 +1,3 @@ -@import "/src/styles/mixins.scss"; @import "/src/styles/vars.scss"; #people { diff --git a/src/components/What/Astronaut/Astronaut.scss b/src/components/What/Astronaut/Astronaut.scss index 1481d0e..dda328f 100644 --- a/src/components/What/Astronaut/Astronaut.scss +++ b/src/components/What/Astronaut/Astronaut.scss @@ -1,4 +1,3 @@ -@import "/src/styles/mixins.scss"; @import "/src/styles/vars.scss"; #astronaut { @@ -29,9 +28,8 @@ } .feature-group { - @include fluid-margin-lr; max-width: 64em; - padding: 6em 0; + margin: 6em 7.5%; z-index: 1; } } diff --git a/src/styles/global.scss b/src/styles/global.scss index f81b470..287fce9 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -19,7 +19,7 @@ body { flex: 1; display: flex; flex-direction: column; - font-family: "JetBrains Mono", sans-serif; + font-family: $font-family-jetbrains-mono; background: $color-blue-charcoal-2; color: $color-white; overflow-x: hidden; @@ -103,7 +103,7 @@ a, button { display: grid; grid-template-columns: repeat(1, 1fr); gap: 0.9em; - @include fluid-padding-lr; + padding: 0 7.5%; @include fluid-font-size(1.25rem); @media screen and (min-width: 48rem) { diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss index e268f8f..ef05851 100644 --- a/src/styles/mixins.scss +++ b/src/styles/mixins.scss @@ -222,52 +222,6 @@ $screen-default: 96rem; // 1536px } } -@mixin fluid-padding-lr { - $min-vw: 48rem; - $max-vw: 96rem; - - $min-padding: 7.5%; - $max-padding: 7.5%; - - & { - padding-left: $min-padding; - padding-right: $min-padding; - - @media screen and (min-width: $min-vw) { - padding-left: calc(#{$min-padding} + #{strip-unit($max-padding - $min-padding)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)})); - padding-right: calc(#{$min-padding} + #{strip-unit($max-padding - $min-padding)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)})); - } - - @media screen and (min-width: $max-vw) { - padding-left: $max-padding; - padding-right: $max-padding; - } - } -} - -@mixin fluid-margin-lr { - $min-vw: 48rem; - $max-vw: 96rem; - - $min-margin: 7.5%; - $max-margin: 7.5%; - - & { - margin-left: $min-margin; - margin-right: $min-margin; - - @media screen and (min-width: $min-vw) { - margin-left: calc(#{$min-margin} + #{strip-unit($max-margin - $min-margin)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)})); - margin-right: calc(#{$min-margin} + #{strip-unit($max-margin - $min-margin)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)})); - } - - @media screen and (min-width: $max-vw) { - margin-left: $max-margin; - margin-right: $max-margin; - } - } -} - @mixin fluid-margin-lr-rem($margin) { $min-margin: calc($margin * 0.75); $max-margin: calc($margin * 2.5); diff --git a/src/styles/vars.scss b/src/styles/vars.scss index c6b13bb..500b72d 100644 --- a/src/styles/vars.scss +++ b/src/styles/vars.scss @@ -6,8 +6,8 @@ $color-aquamarine: #7afcbb; $color-cloud: #c7c7c7; $color-alto: #d9d9d9; -$font-family-ibm-plex-sans-devanagari: "IBM Plex Sans Devanagari"; -$font-family-jaldi: "Jaldi"; -$font-family-jetbrains-mono: "JetBrains Mono"; +$font-family-ibm-plex-sans-devanagari: "IBM Plex Sans Devanagari", sans-serif; +$font-family-jaldi: "Jaldi", sans-serif; +$font-family-jetbrains-mono: "JetBrains Mono", sans-serif; $transition-duration: 250ms;