2 измењених фајлова са 75 додато и 17 уклоњено
Подељен поглед
Diff Options
-
+67 -0static/sexy.css
-
+8 -17templates/index.html
+ 67
- 0
static/sexy.css
Прегледај датотеку
| @@ -356,3 +356,70 @@ a:hover { | |||
| color: gray; | |||
| font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif | |||
| } | |||
| .about-button { | |||
| position: fixed; | |||
| left: 50%; | |||
| top: 12%; | |||
| transform: translate(-50%, 0%); | |||
| width: 30vh; | |||
| height: 8vh; | |||
| border-radius: 5vh; | |||
| font-size: 8vh; | |||
| color: gray; | |||
| letter-spacing: 2pt; | |||
| user-select: none; | |||
| transition: 0.2s; | |||
| background: #222; | |||
| } | |||
| .about-button#about-disable { | |||
| top: 24.8%; | |||
| } | |||
| .about-button:hover { | |||
| transition: 0.2s !important; | |||
| transform: translate(-50%, 0%) scale(1.25, 1.25); | |||
| } | |||
| #about { | |||
| position: fixed; | |||
| display: none; | |||
| width: 50vw; | |||
| height: 50vh; | |||
| top: 50%; | |||
| left: 50%; | |||
| padding-left: 25vw; | |||
| padding-right: 25vw; | |||
| padding-top: 50vh; | |||
| padding-bottom: 50vh; | |||
| transform: translate(-50%, -50%); | |||
| z-index: 1; | |||
| font-size: 48px; | |||
| color: gray; | |||
| } | |||
| body.about-enable #about { | |||
| display: flex; | |||
| flex-direction: column; | |||
| } | |||
| body #about-disable { | |||
| display: none; | |||
| } | |||
| body.about-enable #about-disable{ | |||
| display: block; | |||
| } | |||
| #about div { | |||
| flex: 1 0; | |||
| } | |||
| body > *:not(#about) { | |||
| transition: 0.2s; | |||
| } | |||
| body.about-enable > *:not(#about) { | |||
| transition: 1s; | |||
| filter: blur(25px); | |||
| } | |||
+ 8
- 17
templates/index.html
Прегледај датотеку
| @@ -3,23 +3,6 @@ | |||
| <head> | |||
| <title>crux.sexy</title> | |||
| <link rel="stylesheet" type="text/css" href="sexy.css"> | |||
| <!-- stops transitions from firing on page load | |||
| from http://joshfrankel.me/blog/prevent-css-transitions-on-page-load-with-es6/ --> | |||
| <script>.preload-transitions * { | |||
| $null-transition: none !important; | |||
| -webkit-transition: $null-transition; | |||
| -moz-transition: $null-transition; | |||
| -ms-transition: $null-transition; | |||
| -o-transition: $null-transition; | |||
| transition: $null-transition; | |||
| }</script> | |||
| <script type="text/javascript"> | |||
| document.addEventListener("DOMContentLoaded",function(){ | |||
| let node = document.querySelector('.preload-transitions'); | |||
| node.classList.remove('preload-transitions'); | |||
| }); | |||
| </script> | |||
| </head> | |||
| <body class={{"nightly" if nightly else ""}}> | |||
| <div class="title"> | |||
| @@ -62,5 +45,13 @@ | |||
| <a class="discord-footer" href="https://discord.gg/vqcKVV6"><img id="discord-image" src="/images/discord.svg"></a> | |||
| <div id="about"> | |||
| <div>Everything on this site was created by chemicalcrux</div> | |||
| <div>You can find me on <a href="https://www.furaffinity.net/user/chemicalcrux">Fur Affinity</a></div> | |||
| <div>You can also join the Discord server linked at the top of the page for updates</div> | |||
| <div class="about-button" id="about-disable" onclick="document.querySelector('body').classList.remove('about-enable')">back</div> | |||
| </div> | |||
| <div class="about-button" id="about-enable" onclick="document.querySelector('body').classList.add('about-enable')">about</div> | |||
| </body> | |||
| </html> | |||