Said Achmiz
5 anni fa
2 ha cambiato i file con 62 aggiunte e 12 eliminazioni
+ 59
- 7
assets/css/home-page.css
Vedi File
| /*=========*/ | /*=========*/ | ||||
| body.home-page { | body.home-page { | ||||
| --deus-body-padding: 2rem; | |||||
| --deus-body-padding: 5rem 5rem 10rem 5rem; | |||||
| width: 100%; | width: 100%; | ||||
| height: 100vh; | height: 100vh; | ||||
| } | } | ||||
| @media only screen and (max-width: 960px) { | |||||
| body.home-page { | |||||
| --deus-body-padding: 4rem 4rem 8rem 4rem; | |||||
| } | |||||
| } | |||||
| @media only screen and (max-width: 520px) { | |||||
| body.home-page { | |||||
| --deus-body-padding: 3rem 3rem 8rem 3rem; | |||||
| } | |||||
| } | |||||
| body.home-page::before { | body.home-page::before { | ||||
| content: none; | content: none; | ||||
| } | } | ||||
| height: 100%; | height: 100%; | ||||
| object-fit: contain; | object-fit: contain; | ||||
| } | } | ||||
| body.home-page #splash-image img.tall { | |||||
| display: none; | |||||
| } | |||||
| @media only screen and (max-width: 960px) { | |||||
| body.home-page #splash-image img.tall { | |||||
| display: initial; | |||||
| } | |||||
| body.home-page #splash-image img.wide { | |||||
| display: none; | |||||
| } | |||||
| } | |||||
| /*================*/ | /*================*/ | ||||
| /* Navigation UI. */ | /* Navigation UI. */ | ||||
| /*================*/ | /*================*/ | ||||
| body.home-page #main-nav { | body.home-page #main-nav { | ||||
| top: -2rem; | |||||
| top: unset; | |||||
| bottom: -2rem; | |||||
| opacity: 0.0; | opacity: 0.0; | ||||
| border-bottom: none; | |||||
| box-shadow: none; | |||||
| background-color: transparent; | |||||
| font-size: 1.75em; | |||||
| justify-content: center; | |||||
| } | } | ||||
| body.home-page #main-nav.shown { | body.home-page #main-nav.shown { | ||||
| top: 0; | |||||
| bottom: 0; | |||||
| opacity: 1.0; | opacity: 1.0; | ||||
| transition: | transition: | ||||
| top 1s ease, | |||||
| bottom 1s ease, | |||||
| opacity 1s ease; | opacity 1s ease; | ||||
| } | } | ||||
| body.home-page #main-nav a.text { | |||||
| margin: 0 0.75em; | |||||
| width: 4em; | |||||
| } | |||||
| body.home-page #main-nav .social-buttons { | |||||
| position: fixed; | |||||
| top: 0; | |||||
| right: 0; | |||||
| font-size: 0.75em; | |||||
| padding: 0.5em; | |||||
| } | |||||
| @media only screen and (max-width: 520px) { | |||||
| body.home-page #main-nav .social-buttons { | |||||
| flex-flow: column nowrap; | |||||
| } | |||||
| body.home-page #main-nav .social-buttons a + a { | |||||
| margin: 0.5em 0 0 0; | |||||
| } | |||||
| } | |||||
| body.home-page #main-nav .logo { | |||||
| display: none; | |||||
| } | |||||
| /*===================*/ | /*===================*/ | ||||
| /* Copyright notice. */ | /* Copyright notice. */ | ||||
| /*===================*/ | /*===================*/ | ||||
| body.home-page #copyright { | body.home-page #copyright { | ||||
| bottom: -0.625rem; | |||||
| top: -0.75rem; | |||||
| opacity: 0.0; | opacity: 0.0; | ||||
| } | } | ||||
| body.home-page #copyright.shown { | body.home-page #copyright.shown { | ||||
| bottom: 0.625rem; | |||||
| top: 0.75rem; | |||||
| opacity: 0.5; | opacity: 0.5; | ||||
| transition: | transition: | ||||
| bottom 1s ease, | |||||
| top 1s ease, | |||||
| opacity 1s ease; | opacity 1s ease; | ||||
| } | } |
+ 3
- 5
index.shtml
Vedi File
| </head> | </head> | ||||
| <body class='home-page'> | <body class='home-page'> | ||||
| <div id='splash-image' class='hidden'> | <div id='splash-image' class='hidden'> | ||||
| <img src='/deus/assets/images/deus-logo-text-horizontal.png'> | |||||
| <img class='wide' src='/deus/assets/images/deus-logo-text-horizontal.png'> | |||||
| <img class='tall' src='/deus/assets/images/deus-logo-text.png'> | |||||
| </div> | </div> | ||||
| <main> | <main> | ||||
| <!--#include virtual="/deus/includes/main-nav.html" --> | <!--#include virtual="/deus/includes/main-nav.html" --> | ||||
| </body> | </body> | ||||
| <script> | <script> | ||||
| document.querySelector("#splash-image").classList.remove("hidden"); | document.querySelector("#splash-image").classList.remove("hidden"); | ||||
| setTimeout(() => { | |||||
| document.querySelector("#splash-image").classList.add("fade"); | |||||
| }, 2000); | |||||
| setTimeout(() => { | setTimeout(() => { | ||||
| document.querySelector("#main-nav").classList.add("shown"); | document.querySelector("#main-nav").classList.add("shown"); | ||||
| document.querySelector("#copyright").classList.add("shown"); | document.querySelector("#copyright").classList.add("shown"); | ||||
| }, 2000); | |||||
| }, 1500); | |||||
| </script> | </script> | ||||
| </html> | </html> |
Loading…