sabin/deus-gaming
1
0
Fork 0
forked from achmizs/deus-gaming
Code Issues Pull Requests 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 {
--deus-body-padding: 2rem;
--deus-body-padding: 5rem 5rem 10rem 5rem;
width: 100%;
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 {
content: none;
}
@ -36,35 +46,77 @@ body.home-page #splash-image img {
height: 100%;
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. */
/*================*/
body.home-page #main-nav {
top: -2rem;
top: unset;
bottom: -2rem;
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 {
top: 0;
bottom: 0;
opacity: 1.0;
transition:
top 1s ease,
bottom 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. */
/*===================*/
body.home-page #copyright {
bottom: -0.625rem;
top: -0.75rem;
opacity: 0.0;
}
body.home-page #copyright.shown {
bottom: 0.625rem;
top: 0.75rem;
opacity: 0.5;
transition:
bottom 1s ease,
top 1s ease,
opacity 1s ease;
}

8
index.shtml
View File

@ -7,7 +7,8 @@
</head>
<body class='home-page'>
<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>
<main>
<!--#include virtual="/deus/includes/main-nav.html" -->
@ -17,12 +18,9 @@
</body>
<script>
document.querySelector("#splash-image").classList.remove("hidden");
setTimeout(() => {
document.querySelector("#splash-image").classList.add("fade");
}, 2000);
setTimeout(() => {
document.querySelector("#main-nav").classList.add("shown");
document.querySelector("#copyright").classList.add("shown");
}, 2000);
}, 1500);
</script>
</html>