Implement Corrupt: My custom Jekyll Theme
Corrupt is a very simple site layout. It has two columns, one which is the main content column, and one which serves as a small summary column. The layout is designed for simplicity, and does not feature any significant menu. The layout is responsive, too!
This commit is contained in:
Bill Niblock
parent
49c67d18ee
commit
e45a841503
6 changed files with 438 additions and 80 deletions
73
_layouts/corrupt.html
Normal file
73
_layouts/corrupt.html
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
<!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" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" type="text/css" href="{{ site.url }}/src/corrupt.css" />
|
||||
<link rel="icon" type="image/x-icon" href="{{ site.url }}/src/images/favicon.ico" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="cor_page">
|
||||
<div class="cor_content">
|
||||
<div class="cor_head">
|
||||
<div class="title">
|
||||
<div>The</div><div>Internet</div><div>Vagabond</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="content">
|
||||
{{ content }}
|
||||
<h4>[{{ page.author }}][{{ page.pub }}][{{ page.tags }}]</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cor_menu">
|
||||
<div class="" id="tags">
|
||||
</div>
|
||||
<div class="cor_footer">
|
||||
<div class="" id="about">
|
||||
<h2>The Site</h2>
|
||||
<p>This site is a small slice of internet real-estate that I use for
|
||||
occasional writing. Nothing I say is visionary or profound. I
|
||||
will tend to focus on technology, gaming, and philosophy.</p>
|
||||
<h2>The Vagabond</h2>
|
||||
<p>My name is Bill Niblock. I'm a computer scientist by education, a
|
||||
technologist by trade, a gamer by hobby, and a philosopher by
|
||||
mistake.</p>
|
||||
</div>
|
||||
<div id="social">
|
||||
<div class="">
|
||||
<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>
|
||||
</div>
|
||||
<div class="">
|
||||
<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>
|
||||
</div>
|
||||
<div class="">
|
||||
<a href="https://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>
|
||||
</div>
|
||||
<div class="">
|
||||
<a href="https://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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,76 +0,0 @@
|
|||
<!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" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="stylesheet" type="text/css" href="{{ site.url }}/src/styles.css" />
|
||||
<link rel="stylesheet" type="text/css" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css"
|
||||
integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
|
||||
crossorigin="anonymous" />
|
||||
<link rel="icon" type="image/x-icon" href="{{ site.url }}/src/images/favicon.ico" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="pure-g">
|
||||
<div class="pure-u-4-5">
|
||||
<div class="header pure-u-1">
|
||||
<div class="title">
|
||||
<div>The</div><div>Internet</div><div>Vagabond</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pure-u-1">
|
||||
<div id="content">
|
||||
{{ content }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pure-g pure-u-1-5 menu">
|
||||
<div class="pure-u-1" id="tags">
|
||||
</div>
|
||||
<div class="pure-g" id="footer">
|
||||
<div class="pure-u-1" id="about">
|
||||
<h2>The Site</h2>
|
||||
<p>This site is a small slice of internet real-estate that I use for
|
||||
occasional writing. Nothing I say is visionary or profound. I
|
||||
will tend to focus on technology, gaming, and philosophy.</p>
|
||||
<h2>The Vagabond</h2>
|
||||
<p>My name is Bill Niblock. I'm a computer scientist by education, a
|
||||
technologist by trade, a gamer by hobby, and a philosopher by
|
||||
mistake.</p>
|
||||
</div>
|
||||
<div class="pure-u-1-4">
|
||||
<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>
|
||||
</div>
|
||||
<div class="pure-u-1-4">
|
||||
<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>
|
||||
</div>
|
||||
<div class="pure-u-1-4">
|
||||
<a href="https://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>
|
||||
</div>
|
||||
<div class="pure-u-1-4">
|
||||
<a href="https://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 class="pure-u-1" id="cw">Niblock©2015</div><br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
132
_layouts/old.html
Normal file
132
_layouts/old.html
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>
|
||||
|
|
@ -1,14 +1,13 @@
|
|||
---
|
||||
layout: default
|
||||
tabtitle: Home
|
||||
---
|
||||
|
||||
{% for post in site.posts %}
|
||||
<div id="posts">
|
||||
<h1><a href="{{ post.url }}">{{ post.title }}</a></h1>
|
||||
<div class="pure-g" id="details">
|
||||
<div class="pure-u-1-2" id="date">Published: {{ post.date }}</div>
|
||||
<div class="pure-u-1-2" id="tags">Tagged: {{ post.tags }}</div>
|
||||
<div class="" id="details">
|
||||
<div class="" id="date">Published: {{ post.pub }}</div>
|
||||
<div class="" id="tags">Tagged: {{ post.tags }}</div>
|
||||
</div>
|
||||
<div id="desc">{{ post.short_desc }}</div>
|
||||
</div>
|
||||
|
|
|
|||
230
src/corrupt.css
Normal file
230
src/corrupt.css
Normal file
|
|
@ -0,0 +1,230 @@
|
|||
/*
|
||||
* Corrupt: A simple, responsive theme for Jekyll
|
||||
* CSS for theinternetvagabond.com
|
||||
* (C)2015 Bill Niblock
|
||||
* Licensed under the WTFPL [http://www.wtfpl.net]
|
||||
*/
|
||||
|
||||
|
||||
/* General */
|
||||
html {
|
||||
font-family: sans-serif;
|
||||
/* Change this value to any color you want */
|
||||
--hilite: #8D3FC5;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #202020;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a,a:visited,a:link,a:focus {
|
||||
text-decoration: underline; color: white;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.cor_page {
|
||||
display: flex; flex-flow: row wrap;
|
||||
}
|
||||
|
||||
.cor_content {
|
||||
width: 100%;
|
||||
background-color: #3B3B3B;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.cor_head {
|
||||
position: fixed; top: 0px; left: 0px; right: 0px;
|
||||
margin: 0px; padding: 10px; z-index: 1;
|
||||
background-color: #202020;
|
||||
border-bottom: 1px solid var(--hilite);
|
||||
box-shadow: 0px 5px 30px -5px var(--hilite);
|
||||
}
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
margin: 0px 25px; padding: 0px;
|
||||
}
|
||||
|
||||
.title div {
|
||||
margin: 0px; padding: 0px;
|
||||
font: 0.8em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
||||
color: darkgrey; letter-spacing: 0.8em;
|
||||
}
|
||||
|
||||
.title div::first-letter {
|
||||
margin: 0px; padding: 0px 2px;
|
||||
font: 0.8em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Sidebar */
|
||||
.cor_menu {
|
||||
display: flex;
|
||||
background-color: #202020;
|
||||
z-index: 2; width: 100%;
|
||||
}
|
||||
|
||||
.cor_menu a:link,a:visited,a:focus {
|
||||
text-decoration: none;
|
||||
color: darkgrey;
|
||||
}
|
||||
|
||||
.cor_menu a:hover {
|
||||
font-weight: normal;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.cor_footer {
|
||||
display: flex; flex-flow: row wrap;
|
||||
text-align: center;
|
||||
border-top: 1px solid var(--hilite);
|
||||
box-shadow: 0px 0px 30px 0px var(--hilite);
|
||||
}
|
||||
|
||||
.cor_footer #about {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
.cor_footer #about p {
|
||||
line-height: 1.5em; letter-spacing: 0.1em; text-align: left; color: white;
|
||||
padding: 0em 1em;
|
||||
}
|
||||
|
||||
.cor_footer #about h2 {
|
||||
text-align: right;
|
||||
padding: 10px;
|
||||
font: 1.0em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
||||
color: darkgrey; letter-spacing: 0.6em;
|
||||
}
|
||||
|
||||
.cor_footer #social {
|
||||
display: flex; flex-flow: row; width: 100%;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.cor_footer #social div {
|
||||
width: 25%; text-align: center;
|
||||
}
|
||||
|
||||
/* Index */
|
||||
#posts a,a:visited,a:link,a:focus {
|
||||
color: darkgrey;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#posts a:hover {
|
||||
font-style: normal;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#posts #details {
|
||||
display: flex; flex-flow: row wrap;
|
||||
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;
|
||||
}
|
||||
|
||||
#posts #date {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: grey;
|
||||
}
|
||||
|
||||
#posts #tags {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: grey;
|
||||
}
|
||||
|
||||
#posts #desc {
|
||||
padding: 0em 2em 2em 2em;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Content */
|
||||
#content {
|
||||
margin: 75px 5% 5% 5%;
|
||||
line-height: 1.5em; letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
#content h1 {
|
||||
padding: 10px;
|
||||
font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
||||
color: darkgrey; letter-spacing: 0.5em;
|
||||
}
|
||||
|
||||
#content h1::first-letter {
|
||||
margin: 0px; padding: 0px;
|
||||
font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#content h2 {
|
||||
text-align: left;
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid darkgrey;
|
||||
font: 1.0em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
||||
color: darkgrey; letter-spacing: 0.6em;
|
||||
}
|
||||
|
||||
#content h3 {
|
||||
text-align: right;
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid darkgrey;
|
||||
font: 1.0em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
||||
color: darkgrey; letter-spacing: 0.6em;
|
||||
}
|
||||
|
||||
#content 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;
|
||||
}
|
||||
|
||||
#content p {
|
||||
padding: 0em 2em;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Mobile First */
|
||||
@media only screen and (min-width: 1250px) and (min-height: 750px) {
|
||||
.title div {
|
||||
font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
||||
color: darkgrey; letter-spacing: 1.2em;
|
||||
}
|
||||
.title div::first-letter {
|
||||
font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
||||
}
|
||||
.cor_content {
|
||||
width: 80%;
|
||||
}
|
||||
#posts #date {
|
||||
width: 50%;
|
||||
text-align: left;
|
||||
color: grey;
|
||||
}
|
||||
|
||||
#posts #tags {
|
||||
width: 50%;
|
||||
text-align: right;
|
||||
color: grey;
|
||||
}
|
||||
.cor_menu {
|
||||
width: 20%;
|
||||
}
|
||||
.cor_footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
border: none;
|
||||
box-shadow: unset;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue