Skip to content

Commit

Permalink
partially apply header styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@stebunovd
stebunovd committed Dec 1, 2024
1 parent 07de6cb commit 4ed9195
Show file tree
Hide file tree
Showing 6 changed files with 387 additions and 109 deletions.
245 changes: 245 additions & 0 deletions assets/sass/_header.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,245 @@
@import './vars';
@import './mixins';

.header {
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 100;
@include media-up(md) {
top: 1rem;
}
@include media-up(xl) {
top: 2rem;
}

&--wrapper {
align-items: center;
display: flex;
height: $header-height-mobile;
justify-content: space-between;
margin: 0 auto;
max-width: $container-default-max-width;
padding: 0 1.25rem;
width: 100%;
}

&--logo {
position: relative;
z-index: 200;

&-disabled {
cursor: default;
pointer-events: none;
}
}

&--menu {
background: linear-gradient(0deg, #5e00a9, #3d0f9a);
bottom: 0;
display: flex;
flex-direction: column;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 150;
@include media-up(md) {
align-items: center;
background: none;
bottom: auto;
clip-path: none !important;
flex-direction: row;
opacity: 1 !important;
position: static;
}
}

&--menu-inner {
align-items: flex-start;
border-bottom: 1px solid rgba($white, 0.1);
border-top: 1px solid rgba($white, 0.1);
display: flex;
flex-direction: column;
margin-top: $header-height-mobile;
padding: 1.75rem 1.25rem 2rem;
@include media-up(md) {
border: 0;
flex-direction: row;
gap: 1rem;
margin-top: 0;
opacity: 1 !important;
padding: 0;
}
@include media-up(lg) {
gap: 2rem;
}
}

&--menu-item {
appearance: none;
background: none;
border: 0;
color: $white;
cursor: pointer;
display: inline-block;
font-size: 1.375rem;
padding: 0.125rem 0;
position: relative;
text-rendering: geometricPrecision;
@include media-up(md) {
font-size: 0.875rem;
padding: 0;
}
@include media-up(lg) {
font-size: 1rem;
}

&::after {
@include transition(transform 0.4s cubic-bezier(0, 0.5, 0.5, 1));
background-color: $white;
bottom: 0.5rem;
content: '';
height: 1px;
left: 0;
position: absolute;
right: 0;
transform: scaleX(0);
transform-origin: left center;
@include media-up(md) {
bottom: 0.25rem;
}
}

&:hover,
&-active {
color: $white;

&::after {
transform: none;
}
}

&-active {
cursor: default;
pointer-events: none;
}
}

&--button-wrapper {
margin-left: 1.25rem;
margin-top: 2rem;
@include media-up(md) {
margin-top: 0;
opacity: 1 !important;
}
@include media-up(lg) {
margin-left: 2.5rem;
}
}

&--button {
@include transition(background-color 0.5s);
align-self: flex-start;
appearance: none;
background-color: $white;
border-radius: 2rem;
color: $primary-violet;
cursor: pointer;
display: inline-flex;
font-weight: $font-weight-default;
gap: 0.5rem;
line-height: 1;
outline: none;
padding: 1rem 1.5rem 0.8125rem;
position: relative;
text-align: center;
white-space: nowrap;
z-index: 1;
@include media-up(md) {
font-size: 0.875rem;
}
@include media-up(lg) {
font-size: 1rem;
}

&:hover {
background-color: lighten($primary-violet, 55%);
}

svg {
margin-top: -1px;
}
}
}

.dark {
.header--logo :global(.logo-g-text) path {
fill: $primary-violet;
transition-delay: 0.15s;
@include media-up(md) {
transition-delay: unset;
}
}

.header--logo :global(.logo-g-sign) path {
fill: $primary-orange;
transition-delay: 0.15s;
@include media-up(md) {
transition-delay: unset;
}
}

.header--logo.active :global(.logo-g-text) path {
fill: $white;
transition-delay: 0.1s;
@include media-up(md) {
transition-delay: unset;
}
}

.header--logo.active :global(.logo-g-sign) path {
fill: $white;
transition-delay: 0.1s;
@include media-up(md) {
transition-delay: unset;
}
}

.header--burger span,
.header--burger::before,
.header--burger::after {
background-color: $font-color-dark;
}

.header--burger.active::before,
.header--burger.active::after {
background-color: $white;
}

.header--menu-item {
@include media-up(md) {
color: $font-color-default;
}

&::after {
@include media-up(md) {
background-color: $font-color-default;
}
}
}

.header--button {
@include media-up(md) {
background-color: $primary-orange;
color: $white;
}

&:hover {
@include media-up(md) {
background-color: lighten($primary-orange, 10%);
}
}
}
}
102 changes: 102 additions & 0 deletions assets/sass/_typography.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
@import './vars';
@import './mixins';

a {
@include transition(color 0.6s cubic-bezier(0, 0.5, 0.5, 1), background-size 0.4s cubic-bezier(0, 0.5, 0.5, 1));
background-image: linear-gradient($primary-orange, $primary-orange);
background-position: 0 100%;
background-repeat: no-repeat;
background-size: 100% 1px;
color: $primary-violet;
overflow-wrap: break-word;
text-decoration: none;

&:hover {
background-size: 0 1px;
color: $font-color-dark;
}
}

h1,
h2,
h3,
h4,
h5,
h6 {
color: inherit;
font-weight: $font-weight-bold;
margin: 0;

a,
a:hover {
color: inherit;
}
}

h1 {
font-size: 2.625rem;
line-height: 1.3;
@include media-up(lg) {
font-size: 3.25rem;
line-height: 1.2;
}
@include media-up(xl) {
font-size: 4.5rem;
line-height: 1.1;
}
}

h2 {
font-size: 2rem;
line-height: 1.4;
@include media-up(lg) {
font-size: 2.625rem;
line-height: 1.3;
}
@include media-up(xl) {
font-size: 3.25rem;
line-height: 1.2;
}
}

h3 {
font-size: 1.375rem;
font-weight: $font-weight-semi-bold;
line-height: 1.7;
@include media-up(lg) {
font-size: 1.625rem;
line-height: 1.6;
}
@include media-up(lg) {
font-size: 1.75rem;
}
}

h4 {
font-size: 0.875rem;
font-weight: $font-weight-default;
letter-spacing: 0.05em;
line-height: 1.7;
text-transform: uppercase;
}

p {
font-size: inherit;
margin-top: 0.5rem;
@include media-up(xl) {
font-size: $font-size-bigger;
margin-top: 1rem;
}

&:first-of-type {
margin-top: 0;
}
}

ul,
li {
font-size: inherit;
@include media-up(xl) {
font-size: $font-size-bigger;
}
}
5 changes: 5 additions & 0 deletions assets/sass/_vars.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,3 +21,8 @@ $link-primary-hover-decoration: none;

// Breakpoints
$grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px);

// Layout
$container-default-max-width: 1120px;
$header-height-mobile: 70px;

Loading

0 comments on commit 4ed9195

Please sign in to comment.