From 782311c83230933f584850dbd20cded3b3258d1f Mon Sep 17 00:00:00 2001 From: nek0 Date: Sat, 25 Nov 2023 05:50:52 +0100 Subject: [PATCH] more cleanup --- site/css/hover.scss | 56 -------------- site/css/math.scss | 58 -------------- site/css/menu.scss | 183 -------------------------------------------- 3 files changed, 297 deletions(-) delete mode 100644 site/css/hover.scss delete mode 100644 site/css/math.scss delete mode 100644 site/css/menu.scss diff --git a/site/css/hover.scss b/site/css/hover.scss deleted file mode 100644 index 3334e30..0000000 --- a/site/css/hover.scss +++ /dev/null @@ -1,56 +0,0 @@ -.tooltip-toggle { - cursor: pointer; - //position: relative; - - //Tooltip text container - &::before { - position: absolute; - top: -30px; - //left: -80px; - background-color: #00ff00; - border-radius: 5px; - color: #fff; - content: attr(aria-label); //This pulls in the text from the element with the tooltip - padding: 1ex; - text-transform: none; - font-weight: bold; - transition: all 0.5s ease; - width: 160px; - line-height: 16px; - } - - //Tooltip arrow - //&::after { - // position: absolute; - // top: -12px; - // left: 9px; - // border-left: 5px solid transparent; - // border-right: 5px solid transparent; - // border-top: 5px solid #2B222A; - // content: " "; - // font-size: 0; - // line-height: 0; - // margin-left: -5px; - // width: 0; - //} - - //Setting up the transition - &::before, - &::after { - color: #efefef; - font-family: monospace; - font-size: 16px; - opacity: 0; - pointer-events: none; - text-align: center; - } - - //Triggering the transition - &:focus::before, - &:focus::after, - &:hover::before, - &:hover::after { - opacity: 1; - transition: all 0.75s ease; - } -} diff --git a/site/css/math.scss b/site/css/math.scss deleted file mode 100644 index c48a081..0000000 --- a/site/css/math.scss +++ /dev/null @@ -1,58 +0,0 @@ -@function fact($number) { - $value: 1; - @if $number > 0 { - @for $i from 1 through $number { - $value: $value * $i; - } - } - @return $value; -} - -@function pow($number, $exp) { - $value: 1; - @if $exp > 0 { - @for $i from 1 through $exp { - $value: $value * $number; - } - } - @else if $exp < 0 { - @for $i from 1 through -$exp { - $value: $value / $number; - } - } - @return $value; -} - -@function pi() { - @return 3.14159265359; -} - -@function rad($angle) { - $unit: unit($angle); - $unitless: $angle / ($angle * 0 + 1); - // If the angle has 'deg' as unit, convert to radians. - @if $unit == deg { - $unitless: $unitless / 180 * pi(); - } - @return $unitless; -} - -@function sin($angle) { - $sin: 0; - $angle: rad($angle); - // Iterate a bunch of times. - @for $i from 0 through 10 { - $sin: $sin + pow(-1, $i) * pow($angle, (2 * $i + 1)) / fact(2 * $i + 1); - } - @return $sin; -} - -@function cos($angle) { - $cos: 0; - $angle: rad($angle); - // Iterate a bunch of times. - @for $i from 0 through 10 { - $cos: $cos + pow(-1, $i) * pow($angle, 2 * $i) / fact(2 * $i); - } - @return $cos; -} diff --git a/site/css/menu.scss b/site/css/menu.scss deleted file mode 100644 index 26fd814..0000000 --- a/site/css/menu.scss +++ /dev/null @@ -1,183 +0,0 @@ -@import "math"; - -// vars -$fg:#ff0000; -$bg:#00ff00; - -// config -$menu-items: 5; -$open-distance: 110px; -$start-angle: (0 - pi()) / 2; -$opening-angle: pi() + 0; - -.menu { - //@extend %goo; - $width:300px; - $height:300px; - //$width: 250px + (150px * abs(cos($start-angle))); - //$height: 250px + (150px * abs(sin($start-angle))); - position:fixed; - //left:50%; - display: inline-block; - margin-left:-$width/2; - padding-top:$height/2; - padding-left:$width/2; - padding-bottom:-$height/2; - width:$width; - height:$height; - box-sizing:border-box; - font-size:20px; - text-align:left; -} - -%ball { - background: $bg; - border-radius: 50%; - width: 80px; - height: 80px; - margin-left: -40px; - margin-top: -40px; - position: absolute; - top: 50%; - color: white; - text-align:center; - line-height: 80px; - transform: translate3d(0,0,0); - transition:transform ease-out 200ms; - - svg { - padding-top: 10px; - width: 60px; - height: 60px; - } -} - -.menu-open { - display: none; -} - -.menu-item { - @extend %ball; -} - -.hamburger { - $width: 25px; - $height: 3px; - width: $width; - height: $height; - background: white; - display: block; - position: absolute; - top: 50%; - left: 50%; - margin-left: -$width/2; - margin-top: -$height/2; - transition: transform 200ms; -} - -$hamburger-spacing:8px; - -.hamburger-1 { - transform:translate3d(0,-$hamburger-spacing,0); -} - -.hamburger-2 { - transform:translate3d(0,0,0); -} - -.hamburger-3 { - transform:translate3d(0,$hamburger-spacing,0); -} - -.menu-open:checked + .menu-open-button { - .hamburger-1 { - transform:translate3d(0,0,0) rotate(45deg); - } - - .hamburger-2 { - transform:translate3d(0,0,0) scale(0.1,1); - } - - .hamburger-3 { - transform:translate3d(0,0,0) rotate(-45deg); - } -} - -.menu-item { - &:hover { - background:#acffac; - color:$fg; - } - @for $i from 1 through $menu-items { - &:nth-child(#{$i+2}) { - transition-duration:10ms+(60ms*($i)); - } - } -} - -.menu-open-button { - @extend %ball; - z-index:2; - //transition-timing-function:cubic-bezier(0.175, 0.885, 0.320, 1.275); - transition-timing-function:cubic-bezier(0.175, 0.885, 0.320, 1.0); - transition-duration:400ms; - transform:scale(1.1,1.1) translate3d(0,0,0); - cursor:pointer; -} - -.menu-open-button:hover { - transform:scale(1.2,1.2) translate3d(0,0,0); -} - -.menu-open:checked + .menu-open-button { - transition-timing-function:linear; - transition-duration:200ms; - transform:scale(0.8,0.8) translate3d(0,0,0); -} - -.menu-open:checked ~ .menu-item { - transition-timing-function:cubic-bezier(0.935, 0.000, 0.340, 1.330); - @for $i from 1 through $menu-items { - $angle:((pi() - pi())/2)+((pi()/($menu-items - 1))*($i - 1) + $start-angle); - - &:nth-child(#{$i+2}) { - transition-duration:80ms+(80ms*$i); - transform:translate3d(cos($angle)*$open-distance,sin($angle)*$open-distance,0); - } - } -} - -@media screen and (max-width: 600px){ - .menu { - position: relative; - padding-top: 0; - padding-bottom: 0; - height: 80px; - width: 100%; - } - - %ball { - $dim: 1.4cm; - width: $dim; - height: $dim; - line-height: $dim; - - svg { - $dim: 1.2cm; - padding-top: 0.1cm; - width: $dim; - height: $dim; - } - } - - - .menu-open:checked~.menu-item{ - transition-timing-function:cubic-bezier(0.165, 0.840, 0.440, 1.000); - @for $i from 1 through $menu-items{ - &:nth-child(#{$i+2}){ - transition-duration:90ms+(100ms*$i); - transform:translate3d(1.4cm*$i,0,0); - } - } - } -}