diff --git a/static/karbs/css/karbs.css b/static/karbs/css/karbs.css index 7f926d0..95a84a6 100644 --- a/static/karbs/css/karbs.css +++ b/static/karbs/css/karbs.css @@ -1,71 +1,71 @@ main { - border: 1px solid #30363d; - max-width: 700px; - color: #f0f6fc; - padding: 50px; - margin: 100px auto 100px auto; + border: 1px solid #30363d; + max-width: 700px; + color: #f0f6fc; + padding: 50px; + margin: 100px auto 100px auto; } hr { - color: #30363d; + color: #30363d; } h1 { - text-align: center; - font-size: 32px; - font-weight: bold; + text-align: center; + font-size: 32px; + font-weight: bold; } h2 { - margin: 40px 0 0 0; - font-size: 24px; - font-weight: bold; + margin: 40px 0 0 0; + font-size: 24px; + font-weight: bold; } p { - font-size: 18px; - margin: 10px 0; + font-size: 18px; + margin: 10px 0; } a { - text-decoration: none; - font-weight: bold; - color: #58a6ff; + text-decoration: none; + font-weight: bold; + color: #58a6ff; } a:hover { - text-decoration: underline; + text-decoration: underline; } code { - font-family: Consolas, 'courier new'; - color: #f0f6fc; - background-color: #393f48; - border-radius: 8px; - padding: 3px; + font-family: Consolas, "courier new"; + color: #f0f6fc; + background-color: #393f48; + border-radius: 8px; + padding: 3px; } pre code { - background-color: #161b22; - display: block; - padding: 20px; + background-color: #161b22; + display: block; + padding: 20px; } aside { - color: #8b949e; - font-size: 12px; - margin: 10px 0; - font-style: italic; + color: #8b949e; + font-size: 12px; + margin: 10px 0; + font-style: italic; } .list { - margin: 10px 40px; + margin: 10px 40px; } .upper { - list-style-type: circle; + list-style-type: circle; } .sub { - list-style-type: disc; + list-style-type: disc; } diff --git a/static/main/css/index.css b/static/main/css/index.css index 2d778cf..39a789f 100644 --- a/static/main/css/index.css +++ b/static/main/css/index.css @@ -1,25 +1,25 @@ p { - color: #f0f6fc; - font-size: 20px; - text-align: center; - margin-top: 10px; + color: #f0f6fc; + font-size: 20px; + text-align: center; + margin-top: 10px; } a { - text-decoration: none; - font-weight: bold; - color: #58a6ff; + text-decoration: none; + font-weight: bold; + color: #58a6ff; } a:hover { - text-decoration: underline; + text-decoration: underline; } .center { - margin: 0; - position: absolute; - top: 50%; - left: 50%; - -ms-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); + margin: 0; + position: absolute; + top: 50%; + left: 50%; + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); } diff --git a/static/main/css/layout.css b/static/main/css/layout.css index f5826aa..63261fa 100644 --- a/static/main/css/layout.css +++ b/static/main/css/layout.css @@ -1,68 +1,68 @@ html, body { - font-family: 'Roboto', sans-serif; - background: #0d1117; + font-family: "Roboto", sans-serif; + background: #0d1117; } main { - min-height: 100%; + min-height: 100%; } /* HEADER */ header ul { - width: 100%; - list-style-type: none; - overflow: hidden; - background-color: #161b22; - position: sticky; - top: 0; + width: 100%; + list-style-type: none; + overflow: hidden; + background-color: #161b22; + position: sticky; + top: 0; } header li { - text-align: center; - font-weight: bold; - font-size: 24px; - float: left; - width: calc(100% / 2); + text-align: center; + font-weight: bold; + font-size: 24px; + float: left; + width: calc(100% / 2); } header li a { - display: inline-block; - color: #f0f6fc; - padding: 14px 16px; - text-decoration: none; + display: inline-block; + color: #f0f6fc; + padding: 14px 16px; + text-decoration: none; } header li a:hover { - text-decoration: none; - color: #b9bbbd; + text-decoration: none; + color: #b9bbbd; } /* FOOTER */ .page-container { - position: relative; - min-height: 100vh; + position: relative; + min-height: 100vh; } .content-wrap { - padding-bottom: 2.5rem; + padding-bottom: 2.5rem; } footer { - position: absolute; - bottom: 0; - width: 100%; - height: auto; - background-color: #161b22; - color: #f0f6fc; - flex-wrap: wrap; - display: flex; - justify-content: space-around; + position: absolute; + bottom: 0; + width: 100%; + height: auto; + background-color: #161b22; + color: #f0f6fc; + flex-wrap: wrap; + display: flex; + justify-content: space-around; } footer p { - font-size: 16px; - margin: 10px 0; + font-size: 16px; + margin: 10px 0; } diff --git a/static/main/css/lightsaber.css b/static/main/css/lightsaber.css index 0c5bfb8..63210f9 100644 --- a/static/main/css/lightsaber.css +++ b/static/main/css/lightsaber.css @@ -1,212 +1,212 @@ :root { - --blade-hue: 120; - --blade-lightness: 50%; + --blade-hue: 120; + --blade-lightness: 50%; } *, *::before, *::after { - box-sizing: border-box; + box-sizing: border-box; } body { - background: #222; - display: grid; - grid-template-columns: repeat(6, 1fr); - grid-template-rows: 100px 50px 1fr; - min-height: 100vh; - place-items: center; - font-family: 'Source Sans Pro', sans-serif; - text-transform: uppercase; - font-size: 1.5rem; + background: #222; + display: grid; + grid-template-columns: repeat(6, 1fr); + grid-template-rows: 100px 50px 1fr; + min-height: 100vh; + place-items: center; + font-family: "Source Sans Pro", sans-serif; + text-transform: uppercase; + font-size: 1.5rem; } /* The color pickers */ -[name='color'] { - grid-row: 1 / 2; - align-self: end; - margin: 0.5em; +[name="color"] { + grid-row: 1 / 2; + align-self: end; + margin: 0.5em; } label:not(.hilt) { - color: white; - font-weight: bold; - align-self: start; + color: white; + font-weight: bold; + align-self: start; } /* Lightsaber styling */ .lightsaber { - margin-top: 25vh; - grid-column: 1 / -1; - position: relative; + margin-top: 25vh; + grid-column: 1 / -1; + position: relative; } #on-off { - position: absolute; - width: 0; - height: 0; + position: absolute; + width: 0; + height: 0; } .hilt { - cursor: pointer; - display: block; - width: 0.75rem; - height: 7rem; - background-color: red; - border-radius: 0 0 4px 4px; - background-image: linear-gradient( - silver 0 10px, - hsl(39 75% 50%) 0 14px, - silver 0 15px, - black 0 20px, - silver 0 22px, - black 0 25px, - silver 0 27px, - black 0 30px, - silver 0 32px, - black 0 35px, - silver 0 37px, - black 0 40px, - silver 0 42px, - black 0 45px, - silver 0 47px, - black 0 50px, - silver 0 60px, - hsl(39 75% 50%) 60px 80px, - silver 0 100% - ); + cursor: pointer; + display: block; + width: 0.75rem; + height: 7rem; + background-color: red; + border-radius: 0 0 4px 4px; + background-image: linear-gradient( + silver 0 10px, + hsl(39 75% 50%) 0 14px, + silver 0 15px, + black 0 20px, + silver 0 22px, + black 0 25px, + silver 0 27px, + black 0 30px, + silver 0 32px, + black 0 35px, + silver 0 37px, + black 0 40px, + silver 0 42px, + black 0 45px, + silver 0 47px, + black 0 50px, + silver 0 60px, + hsl(39 75% 50%) 60px 80px, + silver 0 100% + ); } .blade { - position: absolute; - background: white; - height: 350%; - width: 100%; - bottom: 100%; - border-radius: 100vw 100vw 0 0; - box-shadow: inset 0 0 4px - hsl(var(--blade-hue) 100% var(--blade-lightness) / 1), - 0 0 1em hsl(var(--blade-hue) 100% var(--blade-lightness) / 0.8), - 0 0 1.5em hsl(var(--blade-hue) 100% var(--blade-lightness) / 0.7), - 0 0 2em hsl(var(--blade-hue) 100% var(--blade-lightness) / 0.5), - 0 0 3em hsl(var(--blade-hue) 100% var(--blade-lightness) / 0.3), - 0 0 5em hsl(var(--blade-hue) 100% var(--blade-lightness) / 0.2); + position: absolute; + background: white; + height: 350%; + width: 100%; + bottom: 100%; + border-radius: 100vw 100vw 0 0; + box-shadow: inset 0 0 4px + hsl(var(--blade-hue) 100% var(--blade-lightness) / 1), + 0 0 1em hsl(var(--blade-hue) 100% var(--blade-lightness) / 0.8), + 0 0 1.5em hsl(var(--blade-hue) 100% var(--blade-lightness) / 0.7), + 0 0 2em hsl(var(--blade-hue) 100% var(--blade-lightness) / 0.5), + 0 0 3em hsl(var(--blade-hue) 100% var(--blade-lightness) / 0.3), + 0 0 5em hsl(var(--blade-hue) 100% var(--blade-lightness) / 0.2); - transition: transform 50ms ease-out; - transform-origin: bottom; + transition: transform 50ms ease-out; + transform-origin: bottom; } .blade::after { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: hsl(var(--blade-hue) 100% var(--blade-lightness)); - border-radius: inherit; - filter: blur(0.5em); - opacity: 1; - -webkit-animation: pulse linear 5s infinite; - animation: pulse linear 5s infinite; + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: hsl(var(--blade-hue) 100% var(--blade-lightness)); + border-radius: inherit; + filter: blur(0.5em); + opacity: 1; + -webkit-animation: pulse linear 5s infinite; + animation: pulse linear 5s infinite; } .blade::before { - content: ''; - position: absolute; - top: 0; - bottom: 0; - right: 0; - left: 0; - background: white; - border-radius: inherit; - z-index: 10; + content: ""; + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; + background: white; + border-radius: inherit; + z-index: 10; } @-webkit-keyframes pulse { - 50% { - opacity: 0.5; - } + 50% { + opacity: 0.5; + } } @keyframes pulse { - 50% { - opacity: 0.5; - } + 50% { + opacity: 0.5; + } } /* Turn lightsaber on and off */ #on-off:not(:checked) + .blade { - transform: scaleY(0); + transform: scaleY(0); } #on-off:checked + .blade { - transform: scaleY(1); + transform: scaleY(1); } /* change the color */ #green:checked ~ .lightsaber { - --blade-hue: 120; + --blade-hue: 120; } #blue:checked ~ .lightsaber { - --blade-hue: 195; + --blade-hue: 195; } #yellow:checked ~ .lightsaber { - --blade-hue: 60; + --blade-hue: 60; } #purple:checked ~ .lightsaber { - --blade-hue: 290; + --blade-hue: 290; } #red:checked ~ .lightsaber { - --blade-hue: 360; + --blade-hue: 360; } #darksaber:checked ~ .lightsaber { - --blade-lightness: 100%; + --blade-lightness: 100%; } #darksaber:checked ~ .lightsaber .blade { - border-radius: 100% / 500px 10px 0 0; + border-radius: 100% / 500px 10px 0 0; } #darksaber:checked ~ .lightsaber .blade::before { - background: black; + background: black; } /* play sound */ embed { - display: none; - position: absolute; - opacity: 0; - pointer-events: 0; - width: 0; - height: 0; + display: none; + position: absolute; + opacity: 0; + pointer-events: 0; + width: 0; + height: 0; } #on-off:checked ~ embed { - display: block; + display: block; } /* YT link */ .yt { - color: hsl(0 0% 100% / 0.5); - font-size: 1rem; - padding: 1em; - margin: 0 0 1em 0; - grid-column: 1 / -1; + color: hsl(0 0% 100% / 0.5); + font-size: 1rem; + padding: 1em; + margin: 0 0 1em 0; + grid-column: 1 / -1; } .yt:hover { - color: white; - text-shadow: 0 0 0.5em hsl(var(--blade-hue) 50% 50%), - 0 0 1em hsl(var(--blade-hue) 50% 50% / 0.75); + color: white; + text-shadow: 0 0 0.5em hsl(var(--blade-hue) 50% 50%), + 0 0 1em hsl(var(--blade-hue) 50% 50% / 0.75); } diff --git a/static/main/css/reset.css b/static/main/css/reset.css index dfe5cbd..bead8de 100644 --- a/static/main/css/reset.css +++ b/static/main/css/reset.css @@ -1,4 +1,3 @@ -/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */ html, body, div, @@ -80,12 +79,12 @@ time, mark, audio, video { - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; - margin: 0; - padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; + margin: 0; + padding: 0; } article, aside, @@ -98,26 +97,26 @@ hgroup, menu, nav, section { - display: block; + display: block; } body { - line-height: 1; + line-height: 1; } ol, ul { - list-style: none; + list-style: none; } blockquote, q { - quotes: none; + quotes: none; } blockquote:before, blockquote:after, q:before, q:after { - content: none; + content: none; } table { - border-collapse: collapse; - border-spacing: 0; + border-collapse: collapse; + border-spacing: 0; }