achmizs/deus-gaming
1
0
Fork 1
Code Issues Pull Requests 1 Releases Wiki Activity

Initial commit of full-screen-logo-homepage

Browse Source
This commit is contained in:
Said Achmiz 2020-02-15 11:56:53 -05:00
parent 09195334d1
commit 7eceb5abdd
2 changed files with 62 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
assets/css/home-page.css
View File

@ -5,11 +5,21 @@
/*=========*/ /*=========*/
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;
} }
@ -36,35 +46,77 @@ body.home-page #splash-image img {
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;
} }

8
index.shtml
View File

@ -7,7 +7,8 @@
</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" -->
@ -17,12 +18,9 @@
</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>