Commit 896d60c9 authored by Hydrox6's avatar Hydrox6

A lot of things

1. Moved css for all pages into base.css. Should have done this a lot sooner.
2. Added the various elements that will be present on the projects page. TODO: Make a template file for easy addition later.
3. Fixed some navigation bugs.
parent a971db16
body
{
background-color: #222222;
color:#dddddd;
font-family: "Helvetica Neue","Arial","sans-serif";
font-size: 16px;
line-height: 1.6em;
letter-spacing: 0em;
font-weight: normal;
font-style: normal;
}
div.container
{
padding-top: 50px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 10px;
max-width: 50em;
margin: 0 auto;
text-align: center;
}
p.site-tagline
{
font-size: 14px;
line-height: 1.2em;
text-transform: uppercase;
text-decoration: none;
letter-spacing: .05em;
font-weight: normal;
font-style: normal;
color: #ddd;
}
nav.nav ul
{
padding-left: 0;
text-align: center;
margin-top: 0;
}
li.nav-item
{
display: inline-block;
margin-right: 0.1em;
}
li.nav-item a
{
text-transform: uppercase;
font-size: 14px;
text-decoration: none;
font-weight: bold;
letter-spacing: .05em;
line-height: 1.2em;
}
h1.site-title a
{
text-transform: uppercase;
text-decoration: none;
font-size: 64px;
font-weight: bold;
}
a
{
text-decoration: underline;
text-transform: none;
}
a:visited
{
color:#dddddd;
}
h1.site-title a:hover
{
color:#dddddd;
}
a:hover
{
color:#999999;
}
h1.cent-head
{
font-size: 2em;
text-align: center;
}
div.line
{
background-color: #dddddd;
padding-top: 1px;
margin: 0 auto;
border: none;
width: 70%;
}
\ No newline at end of file
body
main#main
{
background-color: #222222;
color:#dddddd;
font-family: "Helvetica Neue","Arial","sans-serif";
font-size: 16px;
line-height: 1.6em;
letter-spacing: 0em;
font-weight: normal;
font-style: normal;
}
div.main
{
padding-top: 50px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 10px;
max-width: 50em;
margin: 0 auto;
text-align: center;
}
p.site-tagline
{
font-size: 14px;
line-height: 1.2em;
text-transform: uppercase;
text-decoration: none;
letter-spacing: .05em;
font-weight: normal;
font-style: normal;
color: #ddd;
}
nav.nav ul
{
padding-left: 0;
text-align: center;
margin-top: 0;
}
li.nav-item
{
display: inline-block;
margin-right: 0.1em;
}
li.nav-item a
{
text-transform: uppercase;
font-size: 14px;
text-decoration: none;
font-weight: bold;
letter-spacing: .05em;
line-height: 1.2em;
}
h1.site-title a
{
text-transform: uppercase;
text-decoration: none;
font-size: 64px;
font-weight: bold;
}
a
{
text-decoration: underline;
text-transform: none;
}
a:visited
{
color:#dddddd;
}
h1.site-title a:hover
{
color:#dddddd;
}
a:hover
{
color:#999999;
text-align: left;
padding-top: 20px;
color:#cccccc;
padding-left: 17px;
padding-right: 17px;
}
\ No newline at end of file
......@@ -4,6 +4,7 @@
<!--Mobile Compatability HO!-->
<meta name=viewport content="initial-scale=1">
<title>Hydrox.IO</title>
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="index.css">
<!--Fixes for links loading blue & non-dark theme whilst loading on mobile/slow internet-->
<style>
......@@ -12,7 +13,7 @@
</style>
</head>
<body>
<div class="main">
<div class="container">
<header class="site-header">
<!--Title-->
<h1 class="site-title">
......@@ -24,14 +25,20 @@
<nav class="nav">
<ul>
<li class="nav-item">
<a href="Blog.html">Blog</a>
<a href="blog">Blog</a>
</li>
<li class="nav-item">
<a href="Projects.html">Projects</a>
<a href="projects">Projects</a>
</li>
</ul>
</nav>
</header>
<div class="line"></div>
<main id="main">
<h1 class="cent-head">Welcome to my Website</h1>
<p>I'm Hydrox (usually Hydrox6), and I'm a Games Tech student. I write applications as a hobby, mostly in Python. I also write server plugins in Lua for a Garry's Mod Server.</p>
<p>Website's looking pretty sparse at the moment. At least it's not SquareSpace! <img alt="Kappa" src="https://static-cdn.jtvnw.net/emoticons/v1/25/1.0"/></p>
</main>
</div>
</body>
</html>
\ No newline at end of file
body
main#main
{
background-color: #222222;
color:#dddddd;
font-family: "Helvetica Neue","Arial","sans-serif";
font-size: 16px;
line-height: 1.6em;
letter-spacing: 0em;
font-weight: normal;
font-style: normal;
width:100%;
}
div.main
{
padding-top: 50px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 10px;
max-width: 50em;
margin: 0 auto;
text-align: center;
}
p.site-tagline
section.proj-tile
{
font-size: 14px;
line-height: 1.2em;
text-transform: uppercase;
text-decoration: none;
letter-spacing: .05em;
font-weight: normal;
font-style: normal;
color: #ddd;
background-color: #444444;
padding: 20px 20px;
text-align: left;
border-radius: 3px;
word-wrap: break-word;
float:left;
margin:5px;
}
nav.nav ul
section.proj-tile.solo
{
padding-left: 0;
text-align: center;
margin-top: 0;
width:calc(100% - 3em);
max-width: 100%;
}
li.nav-item
section.proj-tile.duo
{
display: inline-block;
margin-right: 0.1em;
width:auto;
max-width: 50%;
min-width: calc(50% - 50px);
}
li.nav-item a
@media (max-width: 840px)
{
text-transform: uppercase;
font-size: 14px;
text-decoration: none;
font-weight: bold;
letter-spacing: .05em;
line-height: 1.2em;
section.proj-tile.duo
{
/*Holy shit thank you Chris Coyier for
writing about calc(). Saved my damn life
on this bug.*/
width:calc(100% - 3em);
max-width: 100%;
}
}
h1.site-title a
h1.proj-name
{
text-transform: uppercase;
text-decoration: none;
font-size: 64px;
margin:0px;
font-size: 26px;
font-weight: bold;
}
a
{
text-decoration: underline;
text-transform: none;
}
a:visited
{
color:#dddddd;
}
h1.site-title a:hover
a.proj-button
{
background-color: #333333;
color:#dddddd;
border: none;
padding: 10px 15px;
border-radius: 3px;
float: left;
text-decoration: none;
font-size: 14px;
font-weight: bold;
}
a:hover
h1.cent-head
{
color:#999999;
font-size: 3em;
}
\ No newline at end of file
......@@ -4,6 +4,7 @@
<!--Mobile Compatability HO!-->
<meta name=viewport content="initial-scale=1">
<title>Hydrox.IO</title>
<link rel="stylesheet" href="../base.css">
<link rel="stylesheet" href="index.css">
<!--Fixes for links loading blue & non-dark theme whilst loading on mobile/slow internet-->
<style>
......@@ -12,11 +13,11 @@
</style>
</head>
<body>
<div class="main">
<div class="container">
<header class="site-header">
<!--Title-->
<h1 class="site-title">
<a href="">Hydrox.IO</a>
<a href="..">Hydrox.IO</a>
<h1>
<!--Tagline-->
<p class="site-tagline">I write applications and make games</p>
......@@ -24,14 +25,33 @@
<nav class="nav">
<ul>
<li class="nav-item">
<a href="blog">Blog</a>
<a href="../blog">Blog</a>
</li>
<li class="nav-item">
<a href="projects">Projects</a>
<li class="nav-item current">
<a href="../projects">Projects</a>
</li>
</ul>
</nav>
</header>
<div class="line"></div>
<main id="main">
<h1 class="cent-head">Projects</h1>
<section class="proj-tile solo">
<h1 class="proj-name">Test 1</h1>
<p>This is a test</p>
<a class="proj-button" href="">View Source</a>
</section>
<section class="proj-tile duo">
<h1 class="proj-name">Test 2</h1>
<p>This is a test</p>
<a class="proj-button" href="">View Source</a>
</section>
<section class="proj-tile duo">
<h1 class="proj-name">Test 3</h1>
<p>This is a test</p>
<a class="proj-button" href="">View Source</a>
</section>
</main>
</div>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment