wires/hypnagaga
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

scss cleanup

Browse source
This commit is contained in:
hobbes7878 2025-04-19 12:20:37 +01:00
parent 3b88bb7083
commit c99acb5c6d
Failed to extract signature
25 changed files with 143 additions and 116 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/components/HeroHeadline/HeroHeadline.stories.svelte
View file

@ -106,16 +106,6 @@
</HeroHeadline>
<style lang="scss">
.hero-wrapper {
.custom-hero.headline {
// Adjust vertical positioning
align-items: flex-end !important;
@media (max-width: 1100px) {
// Adjust line length of title
max-width: var(--normal-column-width) !important;
}
}
// Make hero shorter than 100vh
--heroHeight: 85svh;
@ -132,6 +122,16 @@
@media (max-width: 960px) and (orientation: landscape) {
--heroHeight: 200svh;
}
.custom-hero.headline {
// Adjust vertical positioning
align-items: flex-end !important;
@media (max-width: 1100px) {
// Adjust line length of title
max-width: var(--normal-column-width) !important;
}
}
}
// Override default fixed height for hero layout in embeds

2
src/components/HeroHeadline/HeroHeadline.svelte
View file

@ -217,7 +217,6 @@
}
:global(.background-hero .headline) {
@include mixins.fmt-0;
z-index: 1;
display: flex;
align-items: center;
@ -229,6 +228,7 @@
height: var(--heroHeight, 100svh);
max-height: 1800px;
transform: translateX(-50%);
@include mixins.fmt-0;
@media (max-width: 690px) {
padding: 0 15px;

16
src/components/SiteFooter/CompanyLinks.svelte
View file

@ -59,15 +59,14 @@
{/if}
<style lang="scss">
@import '../SiteHeader/scss/_breakpoints.scss';
@import '../SiteHeader/scss/_grids.scss';
@use '../SiteHeader/scss/_breakpoints.scss' as breakpoints;
@use '../SiteHeader/scss/_grids.scss' as grids;
@import '../../scss/mixins';
@use '../../scss/mixins' as *;
.content-container {
@include max-width;
width: 100%;
margin: 0 auto;
@include breakpoints.max-width;
}
.company {
@ -76,7 +75,7 @@
box-sizing: border-box;
.content-container {
@include responsive-columns(12);
@include grids.responsive-columns(12);
}
}
@ -84,9 +83,8 @@
border-top: 1px solid var(--nav-rules);
.content-container {
@include spacing-single(padding-left padding-right);
box-sizing: border-box;
@include grids.spacing-single(padding-left padding-right);
}
}
.company .content-container {
@ -100,7 +98,7 @@
grid-column: 7 / span 5;
}
@include at-4-columns {
@include grids.at-4-columns {
.company-info,
.social {
grid-column: 1 / span 4;

20
src/components/SiteFooter/LegalLinks.svelte
View file

@ -61,16 +61,15 @@
{/if}
<style lang="scss">
@import '../SiteHeader/scss/_breakpoints.scss';
@import '../SiteHeader/scss/_grids.scss';
@use '../SiteHeader/scss/_breakpoints.scss' as breakpoints;
@use '../SiteHeader/scss/_grids.scss' as grids;
@import '../../scss/mixins';
@use '../../scss/mixins' as *;
.content-container {
@include max-width;
width: 100%;
margin: 0 auto;
@include breakpoints.max-width;
}
.legal {
@ -79,7 +78,7 @@
box-sizing: border-box;
.content-container {
@include responsive-columns(12);
@include grids.responsive-columns(12);
}
}
@ -87,14 +86,13 @@
border-top: 1px solid var(--nav-rules);
.content-container {
@include spacing-single(padding-left padding-right);
box-sizing: border-box;
@include grids.spacing-single(padding-left padding-right);
}
}
.legal .content-container {
@include spacing-50(grid-row-gap);
@include grids.spacing-50(grid-row-gap);
.ad-links {
grid-column: 1 / span 5;
@ -118,8 +116,8 @@
justify-self: end;
}
@include at-4-columns {
@include spacing-single(grid-row-gap);
@include grids.at-4-columns {
@include grids.spacing-single(grid-row-gap);
.ad-links,
.misc-links,

21
src/components/SiteFooter/QuickLinks.svelte
View file

@ -148,15 +148,15 @@
{/if}
<style lang="scss">
@import '../SiteHeader/scss/_breakpoints.scss';
@import '../SiteHeader/scss/_grids.scss';
@use '../SiteHeader/scss/_breakpoints.scss' as breakpoints;
@use '../SiteHeader/scss/_grids.scss' as grids;
@import '../../scss/mixins';
@use '../../scss/mixins' as *;
.content-container {
@include max-width;
width: 100%;
margin: 0 auto;
@include breakpoints.max-width;
}
.quick-links {
@ -165,7 +165,7 @@
box-sizing: border-box;
.content-container {
@include responsive-columns(12);
@include grids.responsive-columns(12);
}
ul {
@ -192,9 +192,8 @@
max-width: 100%;
.content-container {
@include spacing-single(padding-left padding-right);
box-sizing: border-box;
@include grids.spacing-single(padding-left padding-right);
}
h3 {
@ -206,13 +205,13 @@
}
.quick-links .content-container {
@include spacing-single(grid-row-gap);
@include grids.spacing-single(grid-row-gap);
section.link-group {
grid-column: auto / span 2;
margin: 0;
@include above-4-columns {
@include grids.above-4-columns {
&:last-child {
grid-column: 10 / span 3;
}
@ -232,11 +231,11 @@
grid-column: 7 / span 3;
grid-row: 1;
@include for-tablet-down {
@include breakpoints.for-tablet-down {
grid-column: 9 / span 3;
}
@include for-mobile {
@include breakpoints.for-mobile {
grid-column: 1 / span 2;
grid-row: 2;
}

2
src/components/SiteFooter/svgs/Facebook.svelte
View file

@ -18,7 +18,7 @@
>
<style lang="scss">
@import './../../SiteHeader/scss/_colors.scss';
@use './../../SiteHeader/scss/_colors.scss' as *;
svg {
fill: var(--nav-primary, var(--tr-dark-grey));
}

2
src/components/SiteFooter/svgs/Graphics.svelte
View file

@ -14,7 +14,7 @@
</svg>
<style lang="scss">
@import './../../SiteHeader/scss/_colors.scss';
@use './../../SiteHeader/scss/_colors.scss' as *;
svg {
fill: var(--nav-primary, var(--tr-dark-grey));
}

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

2
src/components/SiteFooter/svgs/Instagram.svelte
View file

@ -20,7 +20,7 @@
>
<style lang="scss">
@import './../../SiteHeader/scss/_colors.scss';
@use './../../SiteHeader/scss/_colors.scss' as *;
svg {
fill: var(--nav-primary, var(--tr-dark-grey));
}

2
src/components/SiteFooter/svgs/LinkedIn.svelte
View file

@ -18,7 +18,7 @@
>
<style lang="scss">
@import './../../SiteHeader/scss/_colors.scss';
@use './../../SiteHeader/scss/_colors.scss' as *;
svg {
fill: var(--nav-primary, var(--tr-dark-grey));
}

2
src/components/SiteFooter/svgs/Pictures.svelte
View file

@ -10,7 +10,7 @@
>
<style lang="scss">
@import './../../SiteHeader/scss/_colors.scss';
@use './../../SiteHeader/scss/_colors.scss' as *;
svg {
fill: var(--nav-primary, var(--tr-dark-grey));
}

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

2
src/components/SiteFooter/svgs/Twitter.svelte
View file

@ -20,7 +20,7 @@
>
<style lang="scss">
@import './../../SiteHeader/scss/_colors.scss';
@use './../../SiteHeader/scss/_colors.scss' as *;
svg {
fill: var(--nav-primary, var(--tr-dark-grey));
}

2
src/components/SiteFooter/svgs/Videos.svelte
View file

@ -10,7 +10,7 @@
>
<style lang="scss">
@import './../../SiteHeader/scss/_colors.scss';
@use './../../SiteHeader/scss/_colors.scss' as *;
svg {
fill: var(--nav-primary, var(--tr-dark-grey));
}

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

2
src/components/SiteFooter/svgs/YouTube.svelte
View file

@ -18,7 +18,7 @@
>
<style lang="scss">
@import './../../SiteHeader/scss/_colors.scss';
@use './../../SiteHeader/scss/_colors.scss' as *;
svg {
fill: var(--nav-primary, var(--tr-dark-grey));
}

12
src/components/SiteHeader/MobileMenu/index.svelte
View file

@ -65,10 +65,10 @@
{/if}
<style lang="scss">
@import '../scss/_grids.scss';
@import '../scss/_colors.scss';
@import '../scss/_z-indexes.scss';
@import '../../../scss/mixins';
@use '../scss/_grids.scss' as *;
@use '../scss/_colors.scss' as *;
@use '../scss/_z-indexes.scss' as *;
@use '../../../scss/mixins' as *;
$mobile-nav-height: 56px;
@ -140,17 +140,17 @@
}
.header {
@include spacing-single(padding-left padding-right);
border-bottom: 1px solid var(--nav-rules, var(--tr-muted-grey));
@include spacing-single(padding-left padding-right);
}
.section {
@include spacing-single(padding-left padding-right);
padding-top: 16px;
padding-bottom: 16px;
border-bottom: 1px solid var(--tr-muted-grey);
width: 100%;
max-width: 100%;
@include spacing-single(padding-left padding-right);
.subsections {
margin: 20px 0 0;

2
src/components/SiteHeader/NavBar/DownArrow.svelte
View file

@ -20,7 +20,7 @@
</svg>
<style lang="scss">
@import './../scss/_colors.scss';
@use './../scss/_colors.scss' as *;
svg {
margin-left: 4px;
width: 10px;

16
src/components/SiteHeader/NavBar/NavDropdown/MoreDropdown.svelte
View file

@ -34,11 +34,11 @@
</NavDropdown>
<style lang="scss">
@import '../../scss/_colors.scss';
@import '../../scss/_breakpoints.scss';
@import '../../scss/_eases.scss';
@import '../../scss/_grids.scss';
@import '../../scss/_z-indexes.scss';
@use '../../scss/_colors.scss' as *;
@use '../../scss/_breakpoints.scss' as breakpoints;
@use '../../scss/_eases.scss' as *;
@use '../../scss/_grids.scss' as grids;
@use '../../scss/_z-indexes.scss' as *;
a {
text-decoration: none;
@ -52,7 +52,7 @@
.more-sections {
position: relative;
@include for-tablet-down {
@include breakpoints.for-tablet-down {
display: flex;
flex-direction: row;
column-gap: 64px;
@ -67,10 +67,10 @@
.subsections {
display: grid;
grid-template-columns: repeat(2, 1fr);
@include spacing-single(grid-column-gap);
padding: 0;
margin: 0;
list-style: none;
@include grids.spacing-single(grid-column-gap);
li {
margin: 0;
@ -98,10 +98,10 @@
font-size: 16px;
display: inline-block;
color: var(--nav-primary, var(--tr-dark-grey));
text-decoration: none;
@media (min-width: 1300px) {
font-size: 18px;
}
text-decoration: none;
&:hover {
text-decoration: underline !important;
}

4
src/components/SiteHeader/NavBar/NavDropdown/SectionDropdown.svelte
View file

@ -43,8 +43,8 @@
</NavDropdown>
<style lang="scss">
@import '../../scss/_colors.scss';
@import '../../scss/_breakpoints.scss';
@use '../../scss/_colors.scss' as *;
@use '../../scss/_breakpoints.scss' as *;
a {
text-decoration: none;

2
src/components/SiteHeader/NavBar/NavDropdown/Spinner/index.svelte
View file

@ -5,7 +5,7 @@
</div>
<style lang="scss">
@import '../../../scss/_colors.scss';
@use '../../../scss/_colors.scss' as *;
@keyframes spinner {
to {

2
src/components/SiteHeader/NavBar/NavDropdown/StoryCard/index.svelte
View file

@ -32,7 +32,7 @@
</div>
<style lang="scss">
@import '../../../../../scss/mixins';
@use '../../../../../scss/mixins' as *;
.story-card a {
display: flex;

34
src/components/SiteHeader/NavBar/NavDropdown/index.svelte
View file

@ -100,11 +100,11 @@
</div>
<style lang="scss">
@import '../../scss/_colors.scss';
@import '../../scss/_breakpoints.scss';
@import '../../scss/_eases.scss';
@import '../../scss/_grids.scss';
@import '../../scss/_z-indexes.scss';
@use '../../scss/_colors.scss' as *;
@use '../../scss/_breakpoints.scss' as breakpoints;
@use '../../scss/_eases.scss' as *;
@use '../../scss/_grids.scss' as grids;
@use '../../scss/_z-indexes.scss' as *;
$nav-height: 64px;
$mobile-nav-height: 56px;
@ -116,7 +116,7 @@
top: $nav-height;
width: 100%;
@include for-mobile {
@include breakpoints.for-mobile {
top: $mobile-nav-height;
}
}
@ -128,10 +128,10 @@
background: var(--nav-background, $white);
> .inner {
@include responsive-columns(12);
@include spacing-single(padding-left padding-right);
@include max-width;
margin: 0 auto;
@include breakpoints.max-width;
@include grids.responsive-columns(12);
@include grids.spacing-single(padding-left padding-right);
}
}
@ -149,11 +149,11 @@
.submenu {
grid-column: 1 / span 4;
@include for-extra-wide-desktop {
@include breakpoints.for-extra-wide-desktop {
grid-column: 2 / span 3;
}
@include at-4-columns {
@include grids.at-4-columns {
grid-column: 1 / span 2;
}
}
@ -163,15 +163,15 @@
min-height: 300px;
.inner {
@include spacing-single(padding-left);
border-left: 1px solid var(--nav-rules, var(--tr-muted-grey));
@include grids.spacing-single(padding-left);
}
@include for-extra-wide-desktop {
@include breakpoints.for-extra-wide-desktop {
grid-column: 5 / span 7;
}
@include at-4-columns {
@include grids.at-4-columns {
grid-column: 3 / span 2;
}
}
@ -179,7 +179,6 @@
.story-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
@include spacing-single(grid-column-gap);
list-style: none;
padding: 0;
margin: 20px 0 0 0;
@ -190,7 +189,8 @@
line-height: 1.5;
color: var(--nav-primary, #404040);
@include at-4-columns {
@include grids.spacing-single(grid-column-gap);
@include grids.at-4-columns {
grid-template-columns: repeat(1, 1fr);
}
}
@ -210,7 +210,7 @@
padding-top: 20px;
}
@include at-4-columns {
@include grids.at-4-columns {
&:nth-child(2) {
padding-top: 20px;
}

8
src/components/SiteHeader/NavBar/index.svelte
View file

@ -126,10 +126,10 @@
</div>
<style lang="scss">
@import './../scss/_colors.scss';
@import './../scss/_breakpoints.scss';
@import './../scss/_z-indexes.scss';
@import '../../../scss/mixins';
@use './../scss/_colors.scss' as *;
@use './../scss/_breakpoints.scss' as *;
@use './../scss/_z-indexes.scss' as *;
@use '../../../scss/mixins' as *;
$nav-height: 64px;
$mobile-nav-height: 56px;

14
src/components/SiteHeader/SiteHeader.svelte
View file

@ -102,11 +102,11 @@
/>
<style lang="scss">
@import './scss/_grids.scss';
@import './scss/_colors.scss';
@import './scss/_eases.scss';
@import './scss/_breakpoints.scss';
@import './scss/_z-indexes.scss';
@use './scss/_grids.scss' as grids;
@use './scss/_colors.scss' as *;
@use './scss/_eases.scss' as *;
@use './scss/_breakpoints.scss' as *;
@use './scss/_z-indexes.scss' as *;
$nav-height: 64px;
$mobile-nav-height: 56px;
@ -149,13 +149,13 @@
}
.main-bar {
@include spacing-single(padding-left padding-right);
margin: 0 auto;
box-sizing: border-box;
display: flex;
height: $nav-height;
justify-content: space-between;
@include max-width;
@include grids.spacing-single(padding-left padding-right);
@include for-mobile {
height: $mobile-nav-height;
@ -209,10 +209,10 @@
}
.mobile-menu {
margin-left: 8px;
@include for-tablet-up {
display: none;
}
margin-left: 8px;
.menu-button {
width: 40px;
height: 40px;

66
src/components/SiteHeader/scss/_grids.scss
View file

@ -1,99 +1,131 @@
@use 'sass:math';
@import '_breakpoints.scss';
@use '_breakpoints.scss' as *;
@mixin spacing-single($properties, $delta: 1) {
@each $property in $properties {
#{$property}: (math.div(32, 1440) * 100vw * $delta);
& {
#{$property}: (math.div(32, 1440) * 100vw * $delta);
}
}
@include for-tablet-down {
@each $property in $properties {
#{$property}: (math.div(16, 375) * 100vw * $delta);
& {
#{$property}: (math.div(16, 375) * 100vw * $delta);
}
}
}
@include above-max {
@each $property in $properties {
#{$property}: (32px * $delta);
& {
#{$property}: (32px * $delta);
}
}
}
}
@mixin spacing-single-half($properties, $delta: 1) {
@each $property in $properties {
#{$property}: (calc(16 / 1440) * 100vw * $delta);
& {
#{$property}: (calc(16 / 1440) * 100vw * $delta);
}
}
@include for-tablet-down {
@each $property in $properties {
#{$property}: (math.div(8, 375) * 100vw * $delta);
& {
#{$property}: (math.div(8, 375) * 100vw * $delta);
}
}
}
@include above-max {
@each $property in $properties {
#{$property}: (16px * $delta);
& {
#{$property}: (16px * $delta);
}
}
}
}
@mixin spacing-single-34($properties, $delta: 1) {
@each $property in $properties {
#{$property}: (math.div(24, 1440) * 100vw * $delta);
& {
#{$property}: (math.div(24, 1440) * 100vw * $delta);
}
}
@include for-tablet-down {
@each $property in $properties {
#{$property}: (math.div(12, 375) * 100vw * $delta);
& {
#{$property}: (math.div(12, 375) * 100vw * $delta);
}
}
}
@include above-max {
@each $property in $properties {
#{$property}: (24px * $delta);
& {
#{$property}: (24px * $delta);
}
}
}
}
@mixin spacing-150($properties, $delta: 1) {
@each $property in $properties {
#{$property}: (math.div(48, 1440) * 100vw * $delta);
& {
#{$property}: (math.div(48, 1440) * 100vw * $delta);
}
}
@include for-tablet-down {
@each $property in $properties {
#{$property}: (math.div(24, 375) * 100vw * $delta);
& {
#{$property}: (math.div(24, 375) * 100vw * $delta);
}
}
}
@include above-max {
@each $property in $properties {
#{$property}: (48px * $delta);
& {
#{$property}: (48px * $delta);
}
}
}
}
@mixin spacing-75($properties, $delta: 1) {
@each $property in $properties {
#{$property}: (math.div(24, 1440) * 100vw * $delta);
& {
#{$property}: (math.div(24, 1440) * 100vw * $delta);
}
}
@include above-max {
@each $property in $properties {
#{$property}: (24px * $delta);
& {
#{$property}: (24px * $delta);
}
}
}
}
@mixin spacing-50($properties, $delta: 1) {
@each $property in $properties {
#{$property}: (math.div(16, 1440) * 100vw * $delta);
& {
#{$property}: (math.div(16, 1440) * 100vw * $delta);
}
}
@include above-max {
@each $property in $properties {
#{$property}: (16px * $delta);
& {
#{$property}: (16px * $delta);
}
}
}
}

2
src/components/SiteHeader/svgs/Close.svelte
View file

@ -11,7 +11,7 @@
>
<style lang="scss">
@import './../scss/_colors.scss';
@use './../scss/_colors.scss' as *;
svg {
fill: var(--nav-primary, var(--tr-dark-grey));
}

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 617 B

After

Width:  |  Height:  |  Size: 619 B

2
src/components/SiteHeader/svgs/Menu.svelte
View file

@ -19,7 +19,7 @@
</svg>
<style lang="scss">
@import './../scss/_colors.scss';
@use './../scss/_colors.scss' as *;
svg {
fill: var(--nav-primary, var(--tr-dark-grey));
}