Backup old site design
This commit is contained in:
Bill Niblock
parent
b691bee803
commit
5340420360
2 changed files with 391 additions and 0 deletions
132
_layouts/default.html.bkp
Normal file
132
_layouts/default.html.bkp
Normal file
|
|
@ -0,0 +1,132 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>The Internet Vagabond :: {{ page.tabtitle }}</title>
|
||||||
|
|
||||||
|
<meta name="description"
|
||||||
|
content="Rants of a wandering techy, in search of truth,
|
||||||
|
knowledge, and a decent ping." />
|
||||||
|
<meta name="author" content="Bill 'Vagabond Azulien' Nibz" />
|
||||||
|
|
||||||
|
<link rel="stylesheet" type="text/css"
|
||||||
|
href="{{ site.url }}/src/styles.css" />
|
||||||
|
|
||||||
|
<link rel="icon" type="image/x-icon"
|
||||||
|
href="{{ site.url }}/src/images/favicon.ico" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- Top Bar -->
|
||||||
|
<header>
|
||||||
|
<ul id="title">
|
||||||
|
<li>The</li><li>Internet</li><li>Vagabond</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="clean"></div>
|
||||||
|
|
||||||
|
<!--Sidebar -->
|
||||||
|
<label for="toggle-navbar" id="toggle" style="position:fixed">☰</label>
|
||||||
|
<input type="checkbox" id="toggle-navbar" />
|
||||||
|
<nav id="bar">
|
||||||
|
<section id="header">
|
||||||
|
<input type="radio" name="menu_buttons" checked="checked" id="mb_1" />
|
||||||
|
<ul id="menu" name="navigation">
|
||||||
|
<li><a href="http://www.theinternetvagabond.com">
|
||||||
|
Home</a></li>
|
||||||
|
<li><label for="mb_2" id="projs_label">Projects</label></li>
|
||||||
|
<ul id="projects">
|
||||||
|
{% for pr in site.projects limit:3 %}
|
||||||
|
<li>{{ pr.title }}<br />
|
||||||
|
<div>
|
||||||
|
<a href="{{ pr.p_url }}">[ Page ]</a>
|
||||||
|
<a href="{{ pr.s_url }}">[ Source ]</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
<li><label for="mb_3" id="posts_label"> Posts</label></li>
|
||||||
|
<ul id="posts">
|
||||||
|
{% for post in site.posts limit:3 %}
|
||||||
|
<li>
|
||||||
|
<a href="{{ post.url }}">
|
||||||
|
{{ post.title }}</a>
|
||||||
|
</li>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
</ul>
|
||||||
|
<input type="radio" name="menu_buttons" id="mb_2" />
|
||||||
|
<ul id="menu" name="projects_all">
|
||||||
|
<li><label for="mb_1" id="nav_label">Main Menu</label></li>
|
||||||
|
{% for pr in site.projects %}
|
||||||
|
<li>{{ pr.title }}<br />
|
||||||
|
<div>
|
||||||
|
<a href="{{ pr.p_url }}">[ Page ]</a>
|
||||||
|
<a href="{{ pr.s_url }}">[ Source ]</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
<input type="radio" name="menu_buttons" id="mb_3" />
|
||||||
|
<ul id="menu" name="posts_all">
|
||||||
|
<li><label for="mb_1" id="nav_label">Main Menu</label></li>
|
||||||
|
{% for post in site.posts %}
|
||||||
|
<li>
|
||||||
|
<a href="{{ post.url }}">
|
||||||
|
{{ post.title }}</a>
|
||||||
|
</li>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
<section id="footer">
|
||||||
|
<div id="follow">
|
||||||
|
<a href="https://github.com/VagabondAzulien">
|
||||||
|
<img src="{{ site.url }}/src/images/github_light.png"
|
||||||
|
width="32" height="32" alt="GitHub"
|
||||||
|
title="My GitHub Repos" />
|
||||||
|
</a>
|
||||||
|
<a href="https://twitter.com/Azulien">
|
||||||
|
<img src="{{ site.url }}/src/images/twitter_light.png"
|
||||||
|
width="32" height="32" alt="Twitter"
|
||||||
|
title="My Twitter Feed" />
|
||||||
|
</a>
|
||||||
|
<a href="http://www.twitch.tv/vagabondazulien/profile">
|
||||||
|
<img src="{{ site.url }}/src/images/twitch_light.png"
|
||||||
|
width="32" height="32" alt="Twitch"
|
||||||
|
title="My Twitch Profile" />
|
||||||
|
</a>
|
||||||
|
<a href="http://steamcommunity.com/id/azulien">
|
||||||
|
<img src="{{ site.url }}/src/images/steam_light.png"
|
||||||
|
width="32" height="32" alt="Steam"
|
||||||
|
title="My Steam Profile" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div id="info">
|
||||||
|
<div id="cw">Niblock©2015</div><br />
|
||||||
|
<a href="http://www.wtfpl.net/">
|
||||||
|
<img src="{{ site.url }}/src/images/wtfpl-badge.png"
|
||||||
|
width="80" height="15" alt="WTFPL"
|
||||||
|
title="Licensed under the WTFPL." />
|
||||||
|
</a>
|
||||||
|
<a href="http://www.w3.org/html/logo/">
|
||||||
|
<img src="{{ site.url }}/src/images/html5-badge.png"
|
||||||
|
width="50" height="15" alt="HTML5 | CSS3"
|
||||||
|
title="HTML5 Powered, CSS3 Styled" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="clean"></div>
|
||||||
|
|
||||||
|
<!-- Main Content Section -->
|
||||||
|
<main>
|
||||||
|
|
||||||
|
{{ content }}
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<div class="clean"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
259
src/styles.css.bkp
Normal file
259
src/styles.css.bkp
Normal file
|
|
@ -0,0 +1,259 @@
|
||||||
|
/*
|
||||||
|
* CSS for theinternetvagabond.com
|
||||||
|
* (C)2015 Bill Niblock
|
||||||
|
* Licensed under the WTFPL [http://www.wtfpl.net]
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* General */
|
||||||
|
|
||||||
|
.clean { clear:both;}
|
||||||
|
|
||||||
|
body {
|
||||||
|
position: relative;
|
||||||
|
background-color: #EBEBFA;
|
||||||
|
}
|
||||||
|
|
||||||
|
a,a:visited,a:link,a:focus {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
label:hover{
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**********
|
||||||
|
* *
|
||||||
|
* Header *
|
||||||
|
* *
|
||||||
|
**********/
|
||||||
|
|
||||||
|
header {
|
||||||
|
position: fixed; top: 0px; left: 0px; right: 0px;
|
||||||
|
margin: 0px; padding: 10px; z-index: 1;
|
||||||
|
background-color: white;
|
||||||
|
border-bottom: 1px solid lightgrey;
|
||||||
|
box-shadow: 0px 2px 10px -5px blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
#title {
|
||||||
|
float: left;
|
||||||
|
list-style: none;
|
||||||
|
margin: 0px 25px; padding: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#title li {
|
||||||
|
float:left; margin: 0px; padding: 0px;
|
||||||
|
font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
||||||
|
text-shadow: 2px 2px #DEDEDE; color: darkgrey; letter-spacing: 1.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#title li::first-letter {
|
||||||
|
margin: 0px; padding: 0px 2px;
|
||||||
|
font: 1.3em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
||||||
|
color: white; text-shadow: 0px 0px 10px blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
#toggle {
|
||||||
|
position: absolute; right: 0px;
|
||||||
|
margin: 0px; padding: 8px 25px; z-index: 3;
|
||||||
|
font: 1.3em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
||||||
|
color: darkgrey; text-shadow: 0px 0px 5px white;
|
||||||
|
}
|
||||||
|
|
||||||
|
#toggle-navbar {
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/***********
|
||||||
|
* *
|
||||||
|
* Sidebar *
|
||||||
|
* *
|
||||||
|
***********/
|
||||||
|
|
||||||
|
#bar {
|
||||||
|
position: fixed; top: 0px; right: -300px; bottom: 0px;
|
||||||
|
width: 300px; margin: 0px; padding: 0px; overflow-x: hidden;
|
||||||
|
background-color: #202020;
|
||||||
|
z-index: 2;
|
||||||
|
transition: right 0.5s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#toggle-navbar:checked + #bar {
|
||||||
|
right: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#bar #header {
|
||||||
|
position: absolute; top: 0px; bottom: 40px;
|
||||||
|
margin: 10% 0px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#menu {
|
||||||
|
position: absolute;
|
||||||
|
margin: 10px; padding: 10px; width: 100%; height: 100%;
|
||||||
|
z-index: 4;
|
||||||
|
list-style: none;
|
||||||
|
color: darkgrey; background-color: #202020;
|
||||||
|
}
|
||||||
|
|
||||||
|
#menu a:link,a:visited,a:focus {
|
||||||
|
color: darkgrey;
|
||||||
|
}
|
||||||
|
|
||||||
|
#menu a:hover {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
#menu li {
|
||||||
|
padding: 15px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
[name=navigation] {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
#projects {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#projects li {
|
||||||
|
padding: 10px;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
#projects div {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 0.9em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#posts {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#posts li {
|
||||||
|
padding: 10px 0px;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
#posts a {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
[name=projects_all] div {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 0.9em;
|
||||||
|
}
|
||||||
|
|
||||||
|
[name=projects_all] li {
|
||||||
|
font-weight: normal;
|
||||||
|
margin: 0px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
[name=posts_all] a{
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
[name=posts_all] li {
|
||||||
|
font-weight: normal;
|
||||||
|
margin: 0px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
[name=menu_buttons] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
[name=menu_buttons]:checked + #menu {
|
||||||
|
z-index: 5;
|
||||||
|
}
|
||||||
|
|
||||||
|
#bar #footer {
|
||||||
|
position: absolute; bottom: 0px;
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px 0px;
|
||||||
|
text-align: center;
|
||||||
|
background-color: #202020;
|
||||||
|
z-index: 6;
|
||||||
|
}
|
||||||
|
|
||||||
|
#follow { }
|
||||||
|
|
||||||
|
#follow a {
|
||||||
|
padding: 0px 9px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#info {
|
||||||
|
padding: 10px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#info #cw {
|
||||||
|
font: 0.9em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
||||||
|
letter-spacing: 0.4em; color: grey;
|
||||||
|
}
|
||||||
|
|
||||||
|
#info a {
|
||||||
|
padding: 0px 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/********
|
||||||
|
* *
|
||||||
|
* Body *
|
||||||
|
* *
|
||||||
|
********/
|
||||||
|
|
||||||
|
main {
|
||||||
|
position: relative; top: 0px; left: 0px; z-index: 0;
|
||||||
|
width: 60%; min-width: 800px; height: 100%; min-height: 800px;
|
||||||
|
margin: 0px auto;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
article {
|
||||||
|
margin: 50px auto; padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
article h1 {
|
||||||
|
padding: 10px;
|
||||||
|
font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
||||||
|
text-shadow: 2px 2px #DEDEDE; color: darkgrey; letter-spacing: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
article h1::first-letter {
|
||||||
|
margin: 0px; padding: 0px;
|
||||||
|
font: 1.3em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
||||||
|
color: white; text-shadow: 0px 0px 10px blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
article h2 {
|
||||||
|
text-align: left;
|
||||||
|
padding: 10px;
|
||||||
|
border-bottom: 1px solid darkgrey;
|
||||||
|
font: 1.0em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
||||||
|
text-shadow: 2px 2px #DEDEDE; color: darkgrey; letter-spacing: 0.6em;
|
||||||
|
}
|
||||||
|
|
||||||
|
article h3 {
|
||||||
|
text-align: right;
|
||||||
|
padding: 10px;
|
||||||
|
border-bottom: 1px solid darkgrey;
|
||||||
|
font: 1.0em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
||||||
|
text-shadow: 2px 2px #DEDEDE; color: darkgrey; letter-spacing: 0.6em;
|
||||||
|
}
|
||||||
|
|
||||||
|
article h4 {
|
||||||
|
text-align: center;
|
||||||
|
padding: 10px;
|
||||||
|
border-top: 1px solid darkgrey;
|
||||||
|
font: 0.8em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
||||||
|
color: darkgrey; letter-spacing: 0.4em;
|
||||||
|
}
|
||||||
|
|
||||||
|
article p {
|
||||||
|
padding: 0px 25px;
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue