From 801e08e73624005ed498101ad616d987f70f8cdf Mon Sep 17 00:00:00 2001 From: Eugen Wissner Date: Sun, 12 Jul 2026 17:04:26 +0200 Subject: Add original style sources and an SCSS compiler --- assets/_sass/partials/_burger-menu.scss | 68 ++++++++++++++++++++++++++++ assets/_sass/partials/_header-separator.scss | 27 +++++++++++ 2 files changed, 95 insertions(+) create mode 100644 assets/_sass/partials/_burger-menu.scss create mode 100644 assets/_sass/partials/_header-separator.scss (limited to 'assets/_sass/partials') diff --git a/assets/_sass/partials/_burger-menu.scss b/assets/_sass/partials/_burger-menu.scss new file mode 100644 index 0000000..2bea84c --- /dev/null +++ b/assets/_sass/partials/_burger-menu.scss @@ -0,0 +1,68 @@ +.toggleBurger { + display: none; + + &:checked { + & ~ .site-navigation { + @include translate(0, 0); + } + & ~ .toggleBurgerWrapper { + span { + background: transparent; + &:before { + top: 0; + @include rotate(135deg); + } + &:after { + top: 0; + @include rotate(-135deg); + } + } + } + } +} + +.toggleBurgerWrapper { + display: none; + position: fixed; + top: 20px; + left: 20px; + width: 25px; + height: 30px; + cursor: pointer; + z-index: 100; + @include no-select(); + + span { + position: absolute; + top: 50%; + height: 2px; + width: 100%; + background: var(--grey-222); + + @include transition(all .3s ease); + @include translate(0, -50%); + + &:before, + &:after { + position: absolute; + height: 2px; + width: 100%; + background: var(--grey-222); + content: ""; + + @include transition(all .3s ease); + } + &:before { + top: -6px; + } + &:after { + top: 6px; + } + } +} + +@media screen and (max-width: 800px) { + .toggleBurgerWrapper { + display: block; + } +} diff --git a/assets/_sass/partials/_header-separator.scss b/assets/_sass/partials/_header-separator.scss new file mode 100644 index 0000000..4c264df --- /dev/null +++ b/assets/_sass/partials/_header-separator.scss @@ -0,0 +1,27 @@ +.header-content-separator { + position: relative; + margin: 40px auto; + width: 4px; + height: 4px; + border-radius: 50%; + background: var(--grey-ccc); + + &:before { + position: absolute; + left: -8px; + width: 4px; + height: 4px; + border-radius: 50%; + background: var(--grey-ccc); + content: ""; + } + &:after { + position: absolute; + left: 8px; + width: 4px; + height: 4px; + border-radius: 50%; + background: var(--grey-ccc); + content: ""; + } +} -- cgit v1.2.3