diff options
| author | Eugen Wissner <belka@caraus.de> | 2026-07-12 17:04:26 +0200 |
|---|---|---|
| committer | Eugen Wissner <belka@caraus.de> | 2026-07-12 17:04:26 +0200 |
| commit | 801e08e73624005ed498101ad616d987f70f8cdf (patch) | |
| tree | 2e748bbe8380b7e4e392970b259217dafbbca689 /assets/_sass/partials | |
| parent | 25800009ab67a9c9f438ad058ae764dfa060f420 (diff) | |
| download | flevum-801e08e73624005ed498101ad616d987f70f8cdf.tar.gz | |
Add original style sources and an SCSS compiler
Diffstat (limited to 'assets/_sass/partials')
| -rw-r--r-- | assets/_sass/partials/_burger-menu.scss | 68 | ||||
| -rw-r--r-- | assets/_sass/partials/_header-separator.scss | 27 |
2 files changed, 95 insertions, 0 deletions
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: "";
+ }
+}
|