Merge pull request #134 from archshift/gh-pages

Pages: Moved imagebar to inter-page space, fixed noscript displaying
This commit is contained in:
Tony Wasserka 2014-10-16 10:40:14 +02:00
commit 6c827cb43e
6 changed files with 52 additions and 36 deletions

View File

@ -3,8 +3,9 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Citra - Experimental 3DS Emulator</title> <title>Citra - Experimental 3DS Emulator</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="scripts/slick-1.3.9/slick/slick.css"/> <link rel="stylesheet" type="text/css" href="scripts/slick-1.3.9/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="style.css" />
<noscript><link rel="stylesheet" type="text/css" href="noscript.css" /></noscript>
<!-- Windows Phone --> <!-- Windows Phone -->
<meta name="msapplication-TileColor" content="#099" /> <meta name="msapplication-TileColor" content="#099" />
@ -51,14 +52,18 @@
</div> </div>
</div> </div>
<div id="about" class="page"> <div id="imagebar">
<div id="imagebar"> <div><img src="resources/game-screenshots/yeti3DS-1.png" /></div>
<div><img src="resources/game-screenshots/yeti3DS-1.png" /></div> <div><img src="resources/game-screenshots/yeti3DS-2.png" /></div>
<div><img src="resources/game-screenshots/yeti3DS-2.png" /></div> <div><img src="resources/game-screenshots/yeti3DS-3.png" /></div>
<div><img src="resources/game-screenshots/yeti3DS-3.png" /></div> <div><img src="resources/game-screenshots/yeti3DS-4.png" /></div>
<div><img src="resources/game-screenshots/yeti3DS-4.png" /></div> <div><img src="resources/game-screenshots/yeti3DS-1.png" /></div>
</div> <div><img src="resources/game-screenshots/yeti3DS-2.png" /></div>
<div><img src="resources/game-screenshots/yeti3DS-3.png" /></div>
<div><img src="resources/game-screenshots/yeti3DS-4.png" /></div>
</div>
<div id="about" class="page">
<div class="content"> <div class="content">
<h1>About Citra</h1> <h1>About Citra</h1>
@ -131,19 +136,8 @@
updateURL: false updateURL: false
}); });
var $imagebar = $('#imagebar');
$resize_imagebar = (function() {
var $imagebar_newheight = $imagebar.parent().height();
var $imagebar_newmargin = ($imagebar_newheight - $imagebar.height()) / 2;
$imagebar.css("margin-top", $imagebar_newmargin);
$imagebar.css("margin-bottom", $imagebar_newmargin - 30);
});
$(document).ready(function(){ $(document).ready(function(){
$imagebar.slick({ $('#imagebar').slick({
vertical: true,
infinite: true, infinite: true,
slidesToShow: 4, slidesToShow: 4,
slidesToScroll: 1, slidesToScroll: 1,
@ -151,8 +145,6 @@
autoplaySpeed: 4000, autoplaySpeed: 4000,
arrows: false, arrows: false,
}); });
$resize_imagebar();
}); });
</script> </script>

20
noscript.css Normal file
View File

@ -0,0 +1,20 @@
#imagebar {
display: inline-block;
text-align: center;
width: 100%;
white-space: nowrap;
overflow-x: scroll;
overflow-y: hidden;
padding: 0;
}
#imagebar div {
display: inline-block;
padding: 0.5vw;
}
#imagebar img {
width: 23vw;
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 125 KiB

After

Width:  |  Height:  |  Size: 203 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 133 KiB

After

Width:  |  Height:  |  Size: 218 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 111 KiB

After

Width:  |  Height:  |  Size: 179 KiB

View File

@ -60,7 +60,6 @@ header a:hover {
.content { .content {
padding: 15vh 5%; padding: 15vh 5%;
overflow: hidden;
} }
.content h1,h2,h3 { .content h1,h2,h3 {
@ -134,6 +133,22 @@ p + ul {
color: #333; color: #333;
} }
/* ********************************************* */
/* *** IMAGEBAR ******************************** */
#imagebar {
padding: 0.5vw;
margin: 0;
}
#imagebar img {
margin: auto;
width: 24vw;
max-width: 400px;
border: 0.2vw #000 solid;
border-radius: 0.3vw;
}
/* ********************************************* */ /* ********************************************* */
/* *** ABOUT *********************************** */ /* *** ABOUT *********************************** */
@ -153,18 +168,6 @@ p + ul {
margin-top: 3px; margin-top: 3px;
} }
#imagebar {
float: left;
width: 25vw;
max-width: 400px;
}
#imagebar img {
padding: 1px;
width: 25vw;
max-width: 400px;
}
/* ********************************************* */ /* ********************************************* */
/* *** DOWNLOAD ******************************** */ /* *** DOWNLOAD ******************************** */
@ -184,6 +187,7 @@ img.dl-icon {
padding: 40px; padding: 40px;
margin: 5px; margin: 5px;
border: 3px black solid; border: 3px black solid;
border-radius: 0.3vw;
width: 4vw; width: 4vw;
max-width: 64px; max-width: 64px;