From: soufiane Date: Fri, 4 Apr 2025 15:40:07 +0000 (+0200) Subject: wait #7440 @10:00 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=edf43b1661c65ce32bd7ea28dbbcbaa18317185c;p=psq.git wait #7440 @10:00 --- diff --git a/public/fonts/poppins/Poppins-Bold.woff b/public/fonts/poppins/Poppins-Bold.woff new file mode 100644 index 0000000..5f50fc1 Binary files /dev/null and b/public/fonts/poppins/Poppins-Bold.woff differ diff --git a/public/fonts/poppins/Poppins-Bold.woff2 b/public/fonts/poppins/Poppins-Bold.woff2 new file mode 100644 index 0000000..5e44121 Binary files /dev/null and b/public/fonts/poppins/Poppins-Bold.woff2 differ diff --git a/public/fonts/poppins/Poppins-Light.woff b/public/fonts/poppins/Poppins-Light.woff new file mode 100644 index 0000000..c7d6181 Binary files /dev/null and b/public/fonts/poppins/Poppins-Light.woff differ diff --git a/public/fonts/poppins/Poppins-Light.woff2 b/public/fonts/poppins/Poppins-Light.woff2 new file mode 100644 index 0000000..637229f Binary files /dev/null and b/public/fonts/poppins/Poppins-Light.woff2 differ diff --git a/public/fonts/poppins/Poppins-Medium.woff b/public/fonts/poppins/Poppins-Medium.woff new file mode 100644 index 0000000..086a76d Binary files /dev/null and b/public/fonts/poppins/Poppins-Medium.woff differ diff --git a/public/fonts/poppins/Poppins-Medium.woff2 b/public/fonts/poppins/Poppins-Medium.woff2 new file mode 100644 index 0000000..73b768e Binary files /dev/null and b/public/fonts/poppins/Poppins-Medium.woff2 differ diff --git a/public/fonts/poppins/Poppins-Regular.woff b/public/fonts/poppins/Poppins-Regular.woff new file mode 100644 index 0000000..4d078d0 Binary files /dev/null and b/public/fonts/poppins/Poppins-Regular.woff differ diff --git a/public/fonts/poppins/Poppins-Regular.woff2 b/public/fonts/poppins/Poppins-Regular.woff2 new file mode 100644 index 0000000..9743d2c Binary files /dev/null and b/public/fonts/poppins/Poppins-Regular.woff2 differ diff --git a/public/fonts/poppins/Poppins-SemiBold.woff b/public/fonts/poppins/Poppins-SemiBold.woff new file mode 100644 index 0000000..3953d50 Binary files /dev/null and b/public/fonts/poppins/Poppins-SemiBold.woff differ diff --git a/public/fonts/poppins/Poppins-SemiBold.woff2 b/public/fonts/poppins/Poppins-SemiBold.woff2 new file mode 100644 index 0000000..4d1e972 Binary files /dev/null and b/public/fonts/poppins/Poppins-SemiBold.woff2 differ diff --git a/public/img/logo_top.svg b/public/img/logo_top.svg index f0cd49c..e347365 100644 --- a/public/img/logo_top.svg +++ b/public/img/logo_top.svg @@ -1 +1,53 @@ - \ No newline at end of file + diff --git a/public/img/nav/8-login.svg b/public/img/nav/8-login.svg index 804ede4..7014c00 100644 --- a/public/img/nav/8-login.svg +++ b/public/img/nav/8-login.svg @@ -1 +1,6 @@ - \ No newline at end of file + diff --git a/public/img/nav/9-menu-white.svg b/public/img/nav/9-menu-white.svg new file mode 100644 index 0000000..8ad80c2 --- /dev/null +++ b/public/img/nav/9-menu-white.svg @@ -0,0 +1,6 @@ + diff --git a/public/img/nav/9-menu.svg b/public/img/nav/9-menu.svg new file mode 100644 index 0000000..68c42e2 --- /dev/null +++ b/public/img/nav/9-menu.svg @@ -0,0 +1,6 @@ + diff --git a/resources/js/app.js b/resources/js/app.js index 3f2cb3f..04a0f9e 100644 --- a/resources/js/app.js +++ b/resources/js/app.js @@ -50,7 +50,6 @@ const app = new Vue({ title: "", slug: "", headlines: [] - }, email:{ subject: "", @@ -59,5 +58,13 @@ const app = new Vue({ type: 0, } }, - } + }, }); + +document.addEventListener("DOMContentLoaded", () => { + const el = document.getElementById("openmenu") + el.addEventListener("click", () => { + document.querySelector("nav").classList.toggle("open"); + el.classList.toggle("open"); + }); +}) diff --git a/resources/sass/_fonts.scss b/resources/sass/_fonts.scss index f854203..307d38e 100644 --- a/resources/sass/_fonts.scss +++ b/resources/sass/_fonts.scss @@ -1,147 +1,44 @@ @font-face { - font-family: 'Avenir Next Demi'; - src: url('public/fonts/avenir/AvenirNext-DemiBoldItalic.eot'); - src: url('public/fonts/avenir/AvenirNext-DemiBoldItalic.eot?#iefix') format('embedded-opentype'), - url('public/fonts/avenir/AvenirNext-DemiBoldItalic.woff2') format('woff2'), - url('public/fonts/avenir/AvenirNext-DemiBoldItalic.woff') format('woff'), - url('public/fonts/avenir/AvenirNext-DemiBoldItalic.ttf') format('truetype'); - font-weight: 600; - font-style: italic; - font-display: swap; -} - -@font-face { - font-family: 'Avenir Next Ultra'; - src: url('public/fonts/avenir/AvenirNext-UltraLightItalic.eot'); - src: url('public/fonts/avenir/AvenirNext-UltraLightItalic.eot?#iefix') format('embedded-opentype'), - url('public/fonts/avenir/AvenirNext-UltraLightItalic.woff2') format('woff2'), - url('public/fonts/avenir/AvenirNext-UltraLightItalic.woff') format('woff'), - url('public/fonts/avenir/AvenirNext-UltraLightItalic.ttf') format('truetype'); - font-weight: 200; - font-style: italic; - font-display: swap; -} - -@font-face { - font-family: 'Avenir Next Demi'; - src: url('public/fonts/avenir/AvenirNext-DemiBold.eot'); - src: url('public/fonts/avenir/AvenirNext-DemiBold.eot?#iefix') format('embedded-opentype'), - url('public/fonts/avenir/AvenirNext-DemiBold.woff2') format('woff2'), - url('public/fonts/avenir/AvenirNext-DemiBold.woff') format('woff'), - url('public/fonts/avenir/AvenirNext-DemiBold.ttf') format('truetype'); + font-family: 'Poppins'; + src: url('public/fonts/poppins/Poppins-SemiBold.woff2') format('woff2'), + url('public/fonts/poppins/Poppins-SemiBold.woff') format('woff'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { - font-family: 'Avenir Next'; - src: url('public/fonts/avenir/AvenirNext-Medium.eot'); - src: url('public/fonts/avenir/AvenirNext-Medium.eot?#iefix') format('embedded-opentype'), - url('public/fonts/avenir/AvenirNext-Medium.woff2') format('woff2'), - url('public/fonts/avenir/AvenirNext-Medium.woff') format('woff'), - url('public/fonts/avenir/AvenirNext-Medium.ttf') format('truetype'); + font-family: 'Poppins'; + src: url('public/fonts/poppins/Poppins-Medium.woff2') format('woff2'), + url('public/fonts/poppins/Poppins-Medium.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { - font-family: 'Avenir Next'; - src: url('public/fonts/avenir/AvenirNext-Regular.eot'); - src: url('public/fonts/avenir/AvenirNext-Regular.eot?#iefix') format('embedded-opentype'), - url('public/fonts/avenir/AvenirNext-Regular.woff2') format('woff2'), - url('public/fonts/avenir/AvenirNext-Regular.woff') format('woff'), - url('public/fonts/avenir/AvenirNext-Regular.ttf') format('truetype'); - font-weight: normal; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: 'Avenir Next'; - src: url('public/fonts/avenir/AvenirNext-Heavy.eot'); - src: url('public/fonts/avenir/AvenirNext-Heavy.eot?#iefix') format('embedded-opentype'), - url('public/fonts/avenir/AvenirNext-Heavy.woff2') format('woff2'), - url('public/fonts/avenir/AvenirNext-Heavy.woff') format('woff'), - url('public/fonts/avenir/AvenirNext-Heavy.ttf') format('truetype'); - font-weight: 900; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: 'Avenir Next'; - src: url('public/fonts/avenir/AvenirNext-Italic.eot'); - src: url('public/fonts/avenir/AvenirNext-Italic.eot?#iefix') format('embedded-opentype'), - url('public/fonts/avenir/AvenirNext-Italic.woff2') format('woff2'), - url('public/fonts/avenir/AvenirNext-Italic.woff') format('woff'), - url('public/fonts/avenir/AvenirNext-Italic.ttf') format('truetype'); + font-family: 'Poppins'; + src: url('public/fonts/poppins/Poppins-Regular.woff2') format('woff2'), + url('public/fonts/poppins/Poppins-Regular.woff') format('woff'); font-weight: normal; - font-style: italic; - font-display: swap; -} - -@font-face { - font-family: 'Avenir Next Ultra'; - src: url('public/fonts/avenir/AvenirNext-UltraLight.eot'); - src: url('public/fonts/avenir/AvenirNext-UltraLight.eot?#iefix') format('embedded-opentype'), - url('public/fonts/avenir/AvenirNext-UltraLight.woff2') format('woff2'), - url('public/fonts/avenir/AvenirNext-UltraLight.woff') format('woff'), - url('public/fonts/avenir/AvenirNext-UltraLight.ttf') format('truetype'); - font-weight: 200; font-style: normal; font-display: swap; } @font-face { - font-family: 'Avenir Next'; - src: url('public/fonts/avenir/AvenirNext-HeavyItalic.eot'); - src: url('public/fonts/avenir/AvenirNext-HeavyItalic.eot?#iefix') format('embedded-opentype'), - url('public/fonts/avenir/AvenirNext-HeavyItalic.woff2') format('woff2'), - url('public/fonts/avenir/AvenirNext-HeavyItalic.woff') format('woff'), - url('public/fonts/avenir/AvenirNext-HeavyItalic.ttf') format('truetype'); - font-weight: 900; - font-style: italic; - font-display: swap; -} - -@font-face { - font-family: 'Avenir Next'; - src: url('public/fonts/avenir/AvenirNext-BoldItalic.eot'); - src: url('public/fonts/avenir/AvenirNext-BoldItalic.eot?#iefix') format('embedded-opentype'), - url('public/fonts/avenir/AvenirNext-BoldItalic.woff2') format('woff2'), - url('public/fonts/avenir/AvenirNext-BoldItalic.woff') format('woff'), - url('public/fonts/avenir/AvenirNext-BoldItalic.ttf') format('truetype'); - font-weight: bold; - font-style: italic; - font-display: swap; -} - -@font-face { - font-family: 'Avenir Next'; - src: url('public/fonts/avenir/AvenirNext-Bold.eot'); - src: url('public/fonts/avenir/AvenirNext-Bold.eot?#iefix') format('embedded-opentype'), - url('public/fonts/avenir/AvenirNext-Bold.woff2') format('woff2'), - url('public/fonts/avenir/AvenirNext-Bold.woff') format('woff'), - url('public/fonts/avenir/AvenirNext-Bold.ttf') format('truetype'); + font-family: 'Poppins'; + src: url('public/fonts/poppins/Poppins-Bold.woff2') format('woff2'), + url('public/fonts/poppins/Poppins-Bold.woff') format('woff'); font-weight: bold; font-style: normal; font-display: swap; } @font-face { - font-family: 'Avenir Next'; - src: url('public/fonts/avenir/AvenirNext-MediumItalic.eot'); - src: url('public/fonts/avenir/AvenirNext-MediumItalic.eot?#iefix') format('embedded-opentype'), - url('public/fonts/avenir/AvenirNext-MediumItalic.woff2') format('woff2'), - url('public/fonts/avenir/AvenirNext-MediumItalic.woff') format('woff'), - url('public/fonts/avenir/AvenirNext-MediumItalic.ttf') format('truetype'); - font-weight: 500; - font-style: italic; + font-family: 'Poppins'; + src: url('public/fonts/poppins/Poppins-Light.woff2') format('woff2'), + url('public/fonts/poppins/Poppins-Light.woff') format('woff'); + font-weight: 300; + font-style: normal; font-display: swap; } - -.font-medium { - font-weight: 500; -} diff --git a/resources/sass/_footer.scss b/resources/sass/_footer.scss index 38260c1..dcc6b73 100644 --- a/resources/sass/_footer.scss +++ b/resources/sass/_footer.scss @@ -1,20 +1,47 @@ footer { + background-color: $blue; margin-top: 50px; .row > div { padding: 0 2rem; } + + .logo { + margin-bottom: 32px; + @include media-breakpoint-up(lg) { + margin: 0; + } + } + a:hover { text-decoration: none; } - padding-top: 25px; + padding-top: 32px; + padding-bottom: 32px; min-height: 80px; - background-color: #ecf5ff; + @include media-breakpoint-up(lg) { + padding-top: 14px; + padding-bottom: 14px; + } - p.img-link { + p,a { + color: #ffffff !important; + font-size: 16px; + } + p { + margin: 0 0 8px; + @include media-breakpoint-up(lg) { + margin: 0; + } + } + a { + font-weight: 500; + text-decoration: underline; + } + p.img-link { font-weight: bold; text-transform: uppercase; img { diff --git a/resources/sass/_mixins.scss b/resources/sass/_mixins.scss new file mode 100644 index 0000000..e69de29 diff --git a/resources/sass/_nav.scss b/resources/sass/_nav.scss index d05f494..f782f42 100644 --- a/resources/sass/_nav.scss +++ b/resources/sass/_nav.scss @@ -1,27 +1,20 @@ $pill-max-width: 100px; nav > ul { - margin-bottom: .5rem; - display: flex; - justify-content: space-around; - align-items: flex-end; - padding-left: 0; - flex-wrap: wrap; + gap: 7px; + margin: 0; + padding: 10px 0 0 16px; + @include media-breakpoint-up(lg) { + gap: 29px; + padding: 0; + } > li { //@extend .px-md-3; list-style-type: none; flex: 1 1 0; text-align: center; - //padding: 5px; - //width: 0; - - @media (max-width: 576px) { - flex: 25% 1 0; - padding: 0 10px; - - } - + font-weight: 500; } img { @@ -58,23 +51,33 @@ nav > ul { } - - .nav-2 { - display: flex; - flex-wrap: wrap; - justify-content: center; - //margin-top: 3rem; - //margin-bottom: -3rem; - .btn { - text-transform: uppercase; - //flex-grow: 1; + background-color: $blue; + left: -100%; + position: absolute; + top: 100%; + z-index: 999; + transition: left cubic-bezier(0,.32,.24,.84) .3s; + &.open { + left: 0; + } + &-item { display: flex; - margin: 10px 10px; - align-items: center; - justify-content: center; - font-weight: bolder; - //font-size: medium; - padding: 5px 10px; + color: #ffffff !important; + @include media-breakpoint-up(lg) { + &:hover { + text-decoration: none; + border-bottom: 1px solid #ffffff; + } + } + } + + @include media-breakpoint-up(lg) { + font-size: 16px; + height: auto !important; + left: 50% !important; + top: 50%; + transform: translate(-50%,-50%); + width: auto !important; } } diff --git a/resources/sass/_variables.scss b/resources/sass/_variables.scss index 766225a..7805625 100644 --- a/resources/sass/_variables.scss +++ b/resources/sass/_variables.scss @@ -3,19 +3,36 @@ $body-bg: #f8fafc; // Typography -$font-family-sans-serif: 'Avenir Next', sans-serif; +$font-family-sans-serif: 'Poppins', sans-serif; $font-size-base: 0.9rem; $line-height-base: 1.6; // Colors -$blue: #3490dc; +$blue: #1D5198; $indigo: #6574cd; $purple: #9561e2; $pink: #f66d9b; $red: #e3342f; $orange: #f6993f; -$yellow: #ffed4a; +$yellow: #FFCD6E; $green: #38c172; $teal: #4dc0b5; $cyan: #6cb2eb; +$grid-breakpoints: ( + xs: 0, + sm: 576px, + md: 768px, + lg: 992px, + xl: 1120px, + xxl: 1400px +); + +$container-max-widths: ( + sm: 540px, + md: 720px, + lg: 960px, + xl: 1280px, + xxl: 1280px +); + diff --git a/resources/sass/app.scss b/resources/sass/app.scss index 63ee2a9..10345d8 100644 --- a/resources/sass/app.scss +++ b/resources/sass/app.scss @@ -2,6 +2,7 @@ @import "common"; @import '~bootstrap/scss/bootstrap'; +@import 'mixins'; @import "ais"; @import "fonts"; @import "colors"; @@ -41,11 +42,38 @@ main { position: relative; } +header { + background-color: $blue; + color: #ffffff; + position: relative; + padding: 16px 0; + * { + color: #ffffff; + } +} +.header-logo-link { + @extend .absolute--center; + @include media-breakpoint-up(lg) { + position: initial !important; + transform: none !important; + } +} .header-logo { - width: 90%; + width: 104px; max-width: 850px; display: block; - margin: 1em auto; + @include media-breakpoint-up(lg) { + width: 156px; + } +} + +.header-auth { + gap: 8px; + line-height: 24px; + + @include media-breakpoint-up(xl) { + gap: 20px; + } } a { @@ -249,3 +277,97 @@ article { } } } + +.flex--center { + @extend .d-flex; + @extend .justify-content-center; + @extend .align-items-center; +} + +.circlebutton { + background-color: #ffffff; + border-radius: 24px; + cursor: pointer; + height: 32px; + width: 32px; + color: #ffffff; + @extend .flex--center; + @include media-breakpoint-up(lg) { + border: 0 !important; + height: auto !important; + width: auto !important; + } +} + +.absolute--center { + @extend .position-absolute; + top: 50%; + left: 50%; + transform: translate(-50%,-50%); +} + +#openmenu { + position: relative; + img { + position: relative; + z-index: 2; + } + &:after { + background-color: $blue; + border-radius: 50px; + content: ""; + height: 30px; + position: absolute; + transform: scale(0); + transition: transform .3s; + width: 30px; + } + &.open:after { + transform: scale(1); + } + &.open { + img:not(.openmenu-img) { + display: none; + } + .openmenu-img { + display: inline !important; + } + } +} + +.username { + color: $yellow; + font-size: 16px; + font-weight: 600; + margin: 0; + transition: all .3s; + @include media-breakpoint-up(lg) { + font-weight: 500; + font-size: 12px; + } + @include media-breakpoint-up(xl) { + font-size: 16px; + } +} + +.logout { + color: #ffffff !important; + font-size: 12px; + font-weight: 500; + text-decoration: underline; + transition: all .3s; + @include media-breakpoint-up(xl) { + font-size: 16px; + } +} + +.login-btn { + color: $blue; + font-weight: 500; + padding: 12px 30px; +} + +.container { + padding-right: 16px; + padding-left: 16px; +} diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php index 7b0645d..c739ba3 100644 --- a/resources/views/layouts/app.blade.php +++ b/resources/views/layouts/app.blade.php @@ -64,17 +64,21 @@

- @if(!isset($hideNav)) +

+

+ @if(!isset($hideNav)) - - - + -{{-- @include('partials.nav')--}} + {{-- @include('partials.nav')--}} - @include('partials.nav-v2') + @include('partials.nav-v2') - @endif + @endif +

+

@fuckIE

diff --git a/resources/views/partials/footer.blade.php b/resources/views/partials/footer.blade.php index 56996fb..45ced67 100644 --- a/resources/views/partials/footer.blade.php +++ b/resources/views/partials/footer.blade.php @@ -1,5 +1,7 @@ -