From 8f954ab7c662e0c507c2328d5b2683fbd4c3a391 Mon Sep 17 00:00:00 2001 From: Eugen Wissner Date: Wed, 15 Jul 2026 02:57:48 +0200 Subject: Remove vendor specific CSS styles --- assets/_sass/_layout.scss | 337 +++++++++++++++++++++++----------------------- 1 file changed, 171 insertions(+), 166 deletions(-) (limited to 'assets/_sass/_layout.scss') diff --git a/assets/_sass/_layout.scss b/assets/_sass/_layout.scss index 9c1dd0a..a27b8a7 100644 --- a/assets/_sass/_layout.scss +++ b/assets/_sass/_layout.scss @@ -1,166 +1,171 @@ -.site-header { - display: grid; - @include justify-content(); - padding: 0 20px; - text-align: center; - - .site-header-wrapper { - position: relative; - overflow: hidden; - background: var(--main-color); - padding: 10px 25px 20px 25px; - border-radius: 0 0 5px 5px; - text-decoration: none; - - transition: background .2s ease; - - &:before { position: absolute; top: 0; left: -150%; content: ""; width: 50%; height: 100%; - background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%); - background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%); - transform: skew(-45deg, 0); - } - &:hover { - background: var(--main-color-hover); - &:before { - animation: headerShine .35s; - } - } - .site-logo { display: block; margin: 0 0 10px; - img { - display: block; - } - } - .site-subtitle { - display: block; - font-family: 'Bebas Neue', sans-serif; - font-size: 11px; - line-height: 14px; - color: var(--grey-fc); - } - .site-title { - display: block; - font-family: 'Bebas Neue', sans-serif; - font-size: 26px; - line-height: 28px; - color: var(--grey-fc); - } - } -} - -.site-navigation { - display: flex; - @include justify-content(); - @include align-items(); - @include flex-flow(row wrap); - gap: 10px 40px; - max-width: 800px; - margin: 30px auto 0; - padding: 0 20px; - text-align: center; - - a, span { - position: relative; - text-decoration: none; - color: var(--grey-555); - padding: 0 0 2px; - transition: color .2s ease; - cursor: pointer; - - &:before { - position: absolute; - opacity: 0; - left: 0; - bottom: 0; - width: 0%; - border-bottom: 2px solid var(--grey-222); - - transition: width .18s ease, opacity .18s ease; - content: ""; - } - - &:hover, &.active { color: var(--grey-222); - &:before { - width: 100%; opacity: 1; - } - } - } -} - -@media screen and (max-width: 800px) { - .site-header { - position: fixed; - left: 0; - top: 0; - width: 100%; - z-index: 9; - background: var(--body-bg); - box-shadow: 0 2px 5px rgba(0, 0, 0, .1); - - .site-header-wrapper { - display: flex; - @include align-items(); - @include justify-content(); - @include flex-flow(row wrap); - gap: 0 15px; - border-radius: 0; - padding: 20px; - background: transparent; - - &:hover { - background: transparent; - } - .site-logo, - .site-subtitle { - display: none; - } - .site-title { - font-size: 32px; - line-height: 36px; - color: var(--main-color); - } - } - } - - .site-navigation { - position: fixed; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - @include justify-content(flex-start); - @include flex-flow(column nowrap); - gap: 20px 0; - transform: translate(0, -100%); - transition: transform .25s ease-in-out; - padding: 100px 20px 0; - background: rgba(255, 255, 255, .9); - z-index: 10; - - a, span { - color: var(--grey-222); - font-size: 30px; - line-height: 40px; - } - } -} - -.wrapper { - max-width: 600px; - margin: 0 auto; - padding: 0 20px 35px; - border-bottom: 1px solid var(--grey-eee); - - &.long { - max-width: 800px; - } -} - -.site-footer { - max-width: 800px; - margin: 0 auto; - padding: 40px 20px; - font-size: 14px; - line-height: 22px; - color: var(--grey-ccc); - text-align: center; -} +.site-header { + display: grid; + justify-content: center; + padding: 0 20px; + text-align: center; + + .site-header-wrapper { + position: relative; + overflow: hidden; + background: var(--main-color); + padding: 10px 25px 20px 25px; + border-radius: 0 0 5px 5px; + text-decoration: none; + + transition: background .2s ease; + + &:before { + position: absolute; + top: 0; + left: -150%; + content: ""; + width: 50%; + height: 100%; + background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%); + transform: skew(-45deg, 0); + } + &:hover { + background: var(--main-color-hover); + &:before { + animation: headerShine .35s; + } + } + .site-logo { display: block; margin: 0 0 10px; + img { + display: block; + } + } + .site-subtitle { + display: block; + font-family: 'Bebas Neue', sans-serif; + font-size: 11px; + line-height: 14px; + color: var(--grey-fc); + } + .site-title { + display: block; + font-family: 'Bebas Neue', sans-serif; + font-size: 26px; + line-height: 28px; + color: var(--grey-fc); + } + } +} + +.site-navigation { + display: flex; + justify-content: center; + align-items: center; + flex-flow: row wrap; + gap: 10px 40px; + max-width: 800px; + margin: 30px auto 0; + padding: 0 20px; + text-align: center; + + a, span { + position: relative; + text-decoration: none; + color: var(--grey-555); + padding: 0 0 2px; + transition: color .2s ease; + cursor: pointer; + + &:before { + position: absolute; + opacity: 0; + left: 0; + bottom: 0; + width: 0%; + border-bottom: 2px solid var(--grey-222); + + transition: width .18s ease, opacity .18s ease; + content: ""; + } + + &:hover, &.active { color: var(--grey-222); + &:before { + width: 100%; opacity: 1; + } + } + } +} + +@media screen and (max-width: 800px) { + .site-header { + position: fixed; + left: 0; + top: 0; + width: 100%; + z-index: 9; + background: var(--body-bg); + box-shadow: 0 2px 5px rgba(0, 0, 0, .1); + + .site-header-wrapper { + display: flex; + align-items: center; + justify-content: center; + flex-flow: row wrap; + gap: 0 15px; + border-radius: 0; + padding: 20px; + background: transparent; + + &:hover { + background: transparent; + } + .site-logo, + .site-subtitle { + display: none; + } + .site-title { + font-size: 32px; + line-height: 36px; + color: var(--main-color); + } + } + } + + .site-navigation { + position: fixed; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + justify-content: flex-start; + flex-flow: column nowrap; + gap: 20px 0; + transform: translate(0, -100%); + transition: transform .25s ease-in-out; + padding: 100px 20px 0; + background: rgba(255, 255, 255, .9); + z-index: 10; + + a, span { + color: var(--grey-222); + font-size: 30px; + line-height: 40px; + } + } +} + +.wrapper { + max-width: 600px; + margin: 0 auto; + padding: 0 20px 35px; + border-bottom: 1px solid var(--grey-eee); + + &.long { + max-width: 800px; + } +} + +.site-footer { + max-width: 800px; + margin: 0 auto; + padding: 40px 20px; + font-size: 14px; + line-height: 22px; + color: var(--grey-ccc); + text-align: center; +} -- cgit v1.2.3