juni/junisaber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added screenshots zoom

Browse Source
This commit is contained in:
Diego F. Goberna
2018-09-28 01:55:37 +02:00
parent 6872644396
commit dd25dba0ef
2 changed files with 54 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
about/index.html
View File

@@ -28,14 +28,28 @@
<link rel="preload" href="assets/sslogo.png" as="image">
<link rel="preload" href="assets/steamhover.png" as="image">
<link rel="preload" href="assets/oculushover.png" as="image">
<!--
<script type="text/javascript">
// preload
(() => ['grid.jpg', 'sslogo.png', 'steamhover.png', 'oculushover.png'].forEach((i) => new Image().src = 'assets/'+i))()
</script> -->
var lb;
function setupLb(){
lb = document.getElementById('lightbox');
var sshots = document.querySelectorAll('.screenshots>img');
for (var i = 0; i < sshots.length; i++){
sshots[i].addEventListener('click', showImg);
}
}
function showImg(ev){
lb.querySelector('img').src = ev.target.src;
lb.classList.add('opened');
}
function closeLb(){
lb.classList.remove('opened')
}
</script>
</head>
<body>
<body onload="setupLb()">
<div class="laser"></div>
<div id="lightbox" onclick="closeLb()"><img src=""></div>
<div id="all">
<img src="assets/supermedium-logo.png" class="imgfill headerglow">
<img src="assets/sslogo.png" class="imgfill">
@@ -58,9 +72,9 @@
<img src="assets/sslogosmall.png">is a lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc efficitur et libero id interdum. Aenean id mauris cursus, fermentum lorem nec, congue nisi. Suspendisse semper vitae nisi a interdum. In finibus magna mi. Pellentesque sit amet diam dolor. Sed in venenatis magna.
</p>
<div class="screenshots">
<a href="javascript:;"><img src="assets/sshot1.jpg"></a>
<a href="javascript:;"><img src="assets/sshot2.jpg"></a>
<a href="javascript:;"><img src="assets/sshot3.jpg"></a>
<img src="assets/sshot1.jpg">
<img src="assets/sshot2.jpg">
<img src="assets/sshot3.jpg">
</div>
</section>
@@ -81,9 +95,9 @@
</div>
</div>
<div class="screenshots">
<a href="javascript:;"><img src="assets/sshot4.jpg"></a>
<a href="javascript:;"><img src="assets/sshot5.jpg"></a>
<a href="javascript:;"><img src="assets/sshot6.jpg"></a>
<img src="assets/sshot4.jpg">
<img src="assets/sshot5.jpg">
<img src="assets/sshot6.jpg">
</div>
</section>

31
about/style.css
View File

@@ -18,7 +18,31 @@ body{
background-size: contain;
z-index: -1;
}
#lightbox{
cursor: pointer;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.8);
z-index: 999999;
opacity: 0;
display: none;
align-items: center;
justify-content: center;
transition: opacity 3s;
}
#lightbox.opened{
display: flex;
opacity: 1;
}
#lightbox img{
width: 100%;
max-width: 1000px;
border: 1px solid #005a83;
box-shadow: 0 0 25px rgba(144, 226, 222, 0.6);
}
#all{
width: 95%;
min-width: 360px;
@@ -191,6 +215,9 @@ footer{
width: 100%;
transition: box-shadow 120ms, border-color 120ms, transform 120ms;
}
.screenshots>img{
width: 30%;
}
.screenshots img:hover{
box-shadow: 0 0 30px rgba(144, 226, 222, 0.8);
border-color: white;
@@ -245,7 +272,7 @@ h1 span{
h3{
margin-bottom: 3%;
}
.screenshots a{
.screenshots>img, .screenshots>a{
display: block;
width: 100%;
margin: 5% 0;