This repository has been archived by the owner. It is now read-only.
Permalink
Browse files

Just fancy

Some fancy shit
  • Loading branch information...
onelikeandidie committed Nov 14, 2017
1 parent 6e8fc20 commit ae3ca4f493bc46f5aa96db14437e99f77676f8da
View
BIN +2 KB (130%) .DS_Store
Binary file not shown.
@@ -24,11 +24,11 @@ a {
position: fixed;
}
#darkness{
#darkness {
pointer-events: none;
z-index: 1;
opacity: 0;
position: absolute;
position: fixed;
width: 100%;
height: 100%;
background-color: black;
@@ -39,7 +39,7 @@ a {
#nav_bar {
z-index: 1;
top: 10%;
top: 20%;
left: 10px;
transform-origin: 25px 25px;
transform: rotate(90deg);
@@ -54,12 +54,16 @@ a {
float: right;
}
#nav_ball{
#nav_ball {
transition: transform 0.3s ease-out;
transform: scale(1);
}
#nav_ball svg{
#nav_ball:hover {
cursor: pointer;
}
#nav_ball svg {
transition: transform 0.3s ease-out;
transform: scale(1);
}
@@ -82,7 +86,7 @@ a#nav_title {
}
ul#nav_buttons {
width: 50%;
width: 90%;
padding: 10px;
float: right;
display: block;
@@ -93,17 +97,17 @@ ul#nav_buttons {
#nav_button1, #nav_button2, #nav_button3, #nav_button4 {
visibility: hidden;
opacity: 0;
margin-bottom: 5px;
list-style-type: none;
display: block;
top: -100%;
transition: top 0.5s ease-out, opacity 0.3s ease-out;
transition: top 0.5s ease-out;
position: absolute;
width: 90%
width: 90%;
}
#nav_buttons li a {
font-family: var(--font-nav-text);
font-size: var(--font-size-nav-text);
color: var(--color-light-text);
display: block;
@@ -125,43 +129,90 @@ ul#nav_buttons {
/* Main Content Properties*/
#main {
height: 1080px;
#main {}
#page_title_container {
position: relative;
}
#page_title_container{
width: 100%;
height: 100%;
#page_title_container div {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
h1#page_title{
vertical-align: middle;
position: relative;
h1#page_title {
margin: auto;
text-align: center;
font-size: 150px;
font-size: var(--font-size-title);
font-family: var(--font-title);
color: var(--color-light-text);
}
#page_title_container h2 {
text-align: center;
color: var(--color-light-text);
font-family: var(--font-title);
font-size: var(--font-size-sub-title);
}
#main hr {
border: var(--color-light-text) 2px solid;
border-radius: 5px;
margin: 10px auto;
}
#content_container p {
font-size: var(--font-size-text);
font-family: var(--font-text);
color: var(--color-light-text);
text-align: justify;
}
img.content_image {
width: 100%;
margin-top: 50px;
border: var(--color-light-text) 2px solid;
border-radius: 5px;
position: relative;
left: 50%;
transform: translateX(-50%);
}
p.content_image_subtitle {
margin-bottom: 50px;
font-size: var(--font-size-quote) !important;
text-align: right !important;
}
.three_dots {
text-align: center;
color: var(--color-light-text);
font-family: var(--font-title);
font-size: var(--font-size-sub-title);
letter-spacing: 2px;
}
/* End of Main Content Properties*/
#nav_not_shown_thing_button {
cursor: pointer;
}
/* Footer */
footer {
margin: 50px 0 0 0;
width: 100%;
height: 50px;
/*background-color: var(--color-nav-background);*/
}
footer p {
color: transparent;
background-image: var(--color-big-title1);
-webkit-background-clip: text;
color: var(--color-light-text);
border-radius: 1px;
padding: 2px;
font-size: 8px;
font-size: 10px;
text-align: center;
position: relative;
top: 50%;
@@ -33,6 +33,8 @@
--font-size-heading: 40px;
--font-size-nav-title: 35px;
--font-size-nav-text: 20px;
--font-size-title: 150px;
--font-size-sub-title: 80px;
}
}
@@ -43,6 +45,8 @@
--font-size-heading: 30px;
--font-size-nav-title: 30px;
--font-size-nav-text: 15px;
--font-size-title: 100px;
--font-size-sub-title: 50px;
}
}
Binary file not shown.
Binary file not shown.
@@ -25,17 +25,17 @@
<!-- Start of the Top Navigation Bar that contains the Navigation Menu -->
<div id="nav_bar" class="really_fixed">
<div id="left_side">
<a id="nav_ball" href="#">
<a id="nav_ball">
<svg height="50px" width="50px">
<circle cx="25" cy="25" r="20" stroke="var(--color-light-text)" stroke-width="10" fill="var(--color-dark-text)" />
<circle cx="25" cy="35" r="5" stroke="var(--color-light-text)" stroke-width="5" fill="var(--color-dark-text)" />
<circle cx="50%" cy="50%" r="40%" stroke="var(--color-light-text)" stroke-width="20%" fill="var(--color-dark-text)" />
<circle cx="50%" cy="75%" r="10%" stroke="var(--color-light-text)" stroke-width="10%" fill="var(--color-dark-text)" />
</svg>
</a>
</div>
<div id="right_side">
<a id="nav_title" href="#">Raster Graphics</a>
<ul id="nav_buttons">
<li id="nav_button1" style="top: -100%"><a href="#">Home</a></li>
<li id="nav_button1" style="top: -100%"><a href="index.html">Home</a></li>
<li id="nav_button2" style="top: -100%"><a href="#">Our Research</a></li>
<li id="nav_button3" style="top: -100%"><a href="#">About Us</a></li>
<li id="nav_button4" style="top: -100%"><a href="#">Have a Question?</a></li>
@@ -46,8 +46,35 @@
<!-- Start of the Main container where all the content (text and pictures) will go -->
<div id="main">
<div id="page_title_container">
<h1 id="page_title">Raster<br>Graphics</h1>
<div>
<h1 id="page_title">Raster<br>Graphics</h1>
<h2>Pixelated<br>Graphics and<br>their impact in<br>today's video<br>game culture</h2>
</div>
</div>
<hr class="wrapped80">
<div id="content_container" class="wrapped60">
<p>80's arcade style graphics are the "new" hip way to design video game art and it is gaining popularity in the past few years.</p>
<div class="wrapped80">
<img class="content_image" src="images/MarioBackground1-1.jpg" class="wrapped80" alt="Super Mario Bros">
<p class="content_image_subtitle">Super Mario Bros</p>
</div>
<p>Using sprites and low resolution graphics, pixel art in past were comon and all we had, low-powered hardware could only render that much detal.</p>
<!-- Even then characters like Super Mario or Link (from Legend of Zelda) were easly recognisable, the red plumber hat or the green pixie hat were iconic elements in the character's look making them pop out from the rest of the game -->
<div class="wrapped80">
<img class="content_image" src="images/MarioOdyssey01.jpg" class="wrapped80" alt="Super Mario Odyssey">
<!-- Taken from Nintendo Website-->
<p class="content_image_subtitle">Super Mario Odyssey</p>
</div>
<p>Nowadays we have super-powered machines that ovecome these others by over 2666 times (when comparing the nintendo switch and the nintendo snes) that can render almost anything.</p>
<div class="wrapped80">
<img class="content_image" src="images/MarioOdyssey02.jpg" alt="Super Mario Odyssey (Pipes)">
<p class="content_image_subtitle"> Super Mario Odyssey (8-bit Pipes)</p>
</div>
<p>So why are pixel graphics gathering so much atention?</p>
</div>
<p class="three_dots">...</p>
<hr class="wrapped80">
<p style="text-align:center; color:var(--color-light-text); font-size: var(--font-size-nav-quote)">Can't find the Navigation Bar? Click <a id="nav_not_shown_thing_button">here</a></p>
</div>
<!-- End of the Main container -->
<!-- Footer (nothing to declare) -->
@@ -1,7 +1,10 @@
var nav_is_shown = false;
var window_height = $(window).height();
console.log(window_height);
function onload() {
console.log("Javascript Read");
$("#page_title_container").css("height", window_height + "px");
}
$(function() {
@@ -10,11 +13,9 @@ $(function() {
switch (nav_is_shown) {
case false:
$("#darkness").css("opacity", "0.6");
$("#darkness").css("pointer-events", "all");
$("#darkness").css("pointer-events", "all");
$("#nav_button1, #nav_button2, #nav_button3, #nav_button4").css("visibility", "visible");
$("#nav_button1, #nav_button2, #nav_button3, #nav_button4").css("opacity", "1");
$("#nav_ball").css("transform", "scale(-1)");
$("#nav_ball svg").css("transform", "scale(-1)");
$("#nav_ball svg").css("transform", "rotate(-" + 90 + "deg)");
$("#nav_bar").css("transform", "rotate(-5deg)");
setTimeout(function() {
$("li#nav_button1").css("top", 10 + "px");
@@ -37,7 +38,7 @@ $(function() {
break;
case true:
$("#darkness").css("opacity", "0");
$("#darkness").css("pointer-events", "none");
$("#darkness").css("pointer-events", "none");
setTimeout(function() {
$("li#nav_button1").css("top", "-100%");
$("li#nav_button2").css("top", "-100%");
@@ -49,9 +50,7 @@ $(function() {
}, 100);
setTimeout(function() {
$("#nav_button1, #nav_button2, #nav_button3, #nav_button4").css("visibility", "hidden");
$("#nav_button1, #nav_button2, #nav_button3, #nav_button4").css("opacity", "0");
$("#nav_ball").css("transform", "scale(1)");
$("#nav_ball svg").css("transform", "scale(1)");
$("#nav_ball svg").css("transform", "rotate(" + 0 + "deg)");
$("#nav_bar").css("transform", "rotate(95deg)");
}, 300);
setTimeout(function() {

0 comments on commit ae3ca4f

Please sign in to comment.