Bill Niblock
GitHub
commit
e871cf19db
14 changed files with 320 additions and 623 deletions
|
|
@ -6,10 +6,11 @@ All stuff here is my opinion yada yada yada.
|
||||||
|
|
||||||
### To-Do
|
### To-Do
|
||||||
* [ ] Update 404 page
|
* [ ] Update 404 page
|
||||||
|
* [ ] Research and implement nicer typography
|
||||||
* [ ] Finalize theme, and publish it?
|
* [ ] Finalize theme, and publish it?
|
||||||
|
|
||||||
#### Latest Update :: 2018-01-11
|
#### Latest Technology Update :: 2018-02-19
|
||||||
* Completely redesigned site to a new custom theme, called Corrupted.
|
* Update Corrupted to use CSS Grid
|
||||||
|
|
||||||
### License
|
### License
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -15,5 +15,5 @@ defaults:
|
||||||
path: ''
|
path: ''
|
||||||
type: "topics"
|
type: "topics"
|
||||||
values:
|
values:
|
||||||
layout: "corrupt_collection"
|
layout: "corrupt_index"
|
||||||
permalink: "/topics/:name"
|
permalink: "/topics/:name"
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,13 @@
|
||||||
{% for post in site.posts %}
|
{% for post in site.posts %}
|
||||||
<div id="posts">
|
<h1><a href="{{ post.url }}">{{ post.title }}</a></h1>
|
||||||
<h1><a href="{{ post.url }}">{{ post.title }}</a></h1>
|
<div class="" id="details">
|
||||||
<div class="" id="details">
|
|
||||||
<div class="" id="date">{{ post.pub }}</div>
|
<div class="" id="date">{{ post.pub }}</div>
|
||||||
<div class="" id="tags">
|
<div class="" id="tags">
|
||||||
{% for topic in post.topics %}
|
{% for topic in post.topics %}
|
||||||
<a href="/topics/{{topic}}.html">{{topic}}</a>
|
<a href="/topics/{{topic}}.html">{{topic}}</a>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="desc">{{ post.short_desc }}</div>
|
<div id="desc">{{ post.short_desc }}</div>
|
||||||
</div>
|
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,50 +1,40 @@
|
||||||
<div class="cor_menu">
|
<footer>
|
||||||
<div class="cor_topics">
|
<nav>
|
||||||
<div><a href="/">home</a></div>
|
<div><a href="/">home</a></div>
|
||||||
{% for topic in site.topics %}
|
{% for topic in site.topics %}
|
||||||
<div><a href="/topics/{{ topic.title }}">{{ topic.title }}</a></div>
|
<div><a href="/topics/{{ topic.title }}">{{ topic.title }}</a></div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
</nav>
|
||||||
<div class="cor_footer">
|
<section id="about">
|
||||||
<div class="" id="about">
|
<h3>The Site</h3>
|
||||||
<h2>The Site</h2>
|
|
||||||
<p>This site is a small slice of internet real-estate that I use for
|
<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
|
occasional writing. Nothing I say is visionary or profound. I
|
||||||
will tend to focus on technology, gaming, and philosophy.</p>
|
will tend to focus on technology, gaming, and philosophy.</p>
|
||||||
<h2>The Vagabond</h2>
|
<h3>The Vagabond</h3>
|
||||||
<p>My name is Bill Niblock. I'm a computer scientist by education, a
|
<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
|
technologist by trade, a gamer by hobby, and a philosopher by
|
||||||
accident.</p>
|
accident.</p>
|
||||||
</div>
|
</section>
|
||||||
<div id="social">
|
<section id="social">
|
||||||
<div class="">
|
|
||||||
<a href="https://github.com/VagabondAzulien">
|
<a href="https://github.com/VagabondAzulien">
|
||||||
<img src="{{ site.url }}/src/images/github_light.png"
|
<img src="{{ site.url }}/src/images/github_light.png"
|
||||||
width="32" height="32" alt="GitHub"
|
width="32" height="32" alt="GitHub"
|
||||||
title="My GitHub Repos" />
|
title="My GitHub Repos" />
|
||||||
</a>
|
</a>
|
||||||
</div>
|
|
||||||
<div class="">
|
|
||||||
<a href="https://twitter.com/Azulien">
|
<a href="https://twitter.com/Azulien">
|
||||||
<img src="{{ site.url }}/src/images/twitter_light.png"
|
<img src="{{ site.url }}/src/images/twitter_light.png"
|
||||||
width="32" height="32" alt="Twitter"
|
width="32" height="32" alt="Twitter"
|
||||||
title="My Twitter Feed" />
|
title="My Twitter Feed" />
|
||||||
</a>
|
</a>
|
||||||
</div>
|
|
||||||
<div class="">
|
|
||||||
<a href="https://www.twitch.tv/vagabondazulien/profile">
|
<a href="https://www.twitch.tv/vagabondazulien/profile">
|
||||||
<img src="{{ site.url }}/src/images/twitch_light.png"
|
<img src="{{ site.url }}/src/images/twitch_light.png"
|
||||||
width="32" height="32" alt="Twitch"
|
width="32" height="32" alt="Twitch"
|
||||||
title="My Twitch Profile" />
|
title="My Twitch Profile" />
|
||||||
</a>
|
</a>
|
||||||
</div>
|
|
||||||
<div class="">
|
|
||||||
<a href="https://steamcommunity.com/id/azulien">
|
<a href="https://steamcommunity.com/id/azulien">
|
||||||
<img src="{{ site.url }}/src/images/steam_light.png"
|
<img src="{{ site.url }}/src/images/steam_light.png"
|
||||||
width="32" height="32" alt="Steam"
|
width="32" height="32" alt="Steam"
|
||||||
title="My Steam Profile" />
|
title="My Steam Profile" />
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</section>
|
||||||
</div>
|
</footer>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
|
<h5>{{ page.tabtitle }}</h5>
|
||||||
{% for post in site.posts %}
|
{% for post in site.posts %}
|
||||||
{% if post.topics contains page.title %}
|
{% if post.topics contains page.title %}
|
||||||
<div id="posts">
|
|
||||||
<h1><a href="{{ post.url }}">{{ post.title }}</a></h1>
|
<h1><a href="{{ post.url }}">{{ post.title }}</a></h1>
|
||||||
<div class="" id="details">
|
<div class="" id="details">
|
||||||
<div class="" id="date">{{ post.pub }}</div>
|
<div class="" id="date">{{ post.pub }}</div>
|
||||||
|
|
@ -11,6 +11,5 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="desc">{{ post.short_desc }}</div>
|
<div id="desc">{{ post.short_desc }}</div>
|
||||||
</div>
|
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
|
|
||||||
|
|
@ -1,28 +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.0" />
|
|
||||||
<link rel="stylesheet" type="text/css" href="{{ site.url }}/src/styles/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">
|
|
||||||
<div id="cor_coll_title">{{ page.tabtitle }}</div>
|
|
||||||
{{ content }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{% include cor_menu.html %}
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -6,24 +6,21 @@
|
||||||
content="Rants of a wandering techy, in search of truth, knowledge, and a decent ping." />
|
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="author" content="Bill 'Vagabond Azulien' Nibz" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<link rel="stylesheet" type="text/css" href="{{ site.url }}/src/styles/corrupt.css" />
|
<link rel="stylesheet" type="text/css"
|
||||||
<link rel="icon" type="image/x-icon" href="{{ site.url }}/src/images/favicon.ico" />
|
href="{{ site.url }}/src/styles/corrupt_layout.css" />
|
||||||
|
<link rel="stylesheet" type="text/css"
|
||||||
|
href="{{ site.url }}/src/styles/corrupt_typog.css" />
|
||||||
|
<link rel="icon" type="image/x-icon"
|
||||||
|
href="{{ site.url }}/src/images/favicon.ico" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="cor_page">
|
<div class="cor_page">
|
||||||
<div class="cor_content">
|
<header>
|
||||||
<div class="cor_head">
|
|
||||||
<div class="title">
|
|
||||||
<div>The</div><div>Internet</div><div>Vagabond</div>
|
<div>The</div><div>Internet</div><div>Vagabond</div>
|
||||||
</div>
|
</header>
|
||||||
</div>
|
<main>
|
||||||
<div id="content">
|
|
||||||
{{ content }}
|
{{ content }}
|
||||||
<div id="all_button">
|
</main>
|
||||||
<a href="/topics/all">All Posts</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{% include cor_menu.html %}
|
{% include cor_menu.html %}
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
|
|
@ -6,25 +6,27 @@
|
||||||
content="Rants of a wandering techy, in search of truth, knowledge, and a decent ping." />
|
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="author" content="Bill 'Vagabond Azulien' Nibz" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<link rel="stylesheet" type="text/css" href="{{ site.url }}/src/styles/corrupt.css" />
|
<link rel="stylesheet" type="text/css"
|
||||||
<link rel="icon" type="image/x-icon" href="{{ site.url }}/src/images/favicon.ico" />
|
href="{{ site.url }}/src/styles/corrupt_layout.css" />
|
||||||
|
<link rel="stylesheet" type="text/css"
|
||||||
|
href="{{ site.url }}/src/styles/corrupt_typog.css" />
|
||||||
|
<link rel="icon" type="image/x-icon"
|
||||||
|
href="{{ site.url }}/src/images/favicon.ico" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="cor_page">
|
<div class="cor_page">
|
||||||
<div class="cor_content">
|
<header>
|
||||||
<div class="cor_head">
|
<div> The </div><div> Internet </div><div> Vagabond </div>
|
||||||
<div class="title">
|
</header>
|
||||||
<div>The</div><div>Internet</div><div>Vagabond</div>
|
<main>
|
||||||
</div>
|
<article>
|
||||||
</div>
|
|
||||||
<div id="content">
|
|
||||||
{{ content }}
|
{{ content }}
|
||||||
<h4>[ {{ page.author }} ][ {{ page.pub }} ][
|
<h4>[ {{ page.author }} ][ {{ page.pub }} ][
|
||||||
{% for topic in page.topics %}
|
{% for topic in page.topics %}
|
||||||
<a href="/topics/{{topic}}">{{topic}}</a>
|
<a href="/topics/{{topic}}">{{topic}}</a>
|
||||||
{% endfor %}]</h4>
|
{% endfor %}]</h4>
|
||||||
</div>
|
</article>
|
||||||
</div>
|
</main>
|
||||||
{% include cor_menu.html %}
|
{% include cor_menu.html %}
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
|
|
@ -43,7 +43,7 @@
|
||||||
many consulships is a great blessing. 5. Rehearse this thought every day,
|
many consulships is a great blessing. 5. Rehearse this thought every day,
|
||||||
that you may be able to depart from life contentedly; for many men clutch
|
that you may be able to depart from life contentedly; for many men clutch
|
||||||
and cling to life, even as those who are carried down a rushing stream
|
and cling to life, even as those who are carried down a rushing stream
|
||||||
clutch and cling to briars and sharp rocks.</p>?
|
clutch and cling to briars and sharp rocks.</p>
|
||||||
|
|
||||||
<p>Most men ebb and flow in wretchedness between the fear of death and the
|
<p>Most men ebb and flow in wretchedness between the fear of death and the
|
||||||
hardships of life; they are unwilling to live, and yet they do not know how
|
hardships of life; they are unwilling to live, and yet they do not know how
|
||||||
|
|
|
||||||
15
index.html
15
index.html
|
|
@ -4,16 +4,15 @@
|
||||||
---
|
---
|
||||||
|
|
||||||
{% for post in site.posts limit:5 %}
|
{% for post in site.posts limit:5 %}
|
||||||
<div id="posts">
|
<h1><a href="{{ post.url }}">{{ post.title }}</a></h1>
|
||||||
<h1><a href="{{ post.url }}">{{ post.title }}</a></h1>
|
<div id="details">
|
||||||
<div class="" id="details">
|
<div id="date">{{ post.pub }}</div>
|
||||||
<div class="" id="date">{{ post.pub }}</div>
|
<div id="tags">
|
||||||
<div class="" id="tags">
|
|
||||||
{% for topic in post.topics %}
|
{% for topic in post.topics %}
|
||||||
<a href="/topics/{{topic}}">{{topic}}</a>
|
<a href="/topics/{{topic}}">{{topic}}</a>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="desc">{{ post.short_desc }}</div>
|
<div id="desc">{{ post.short_desc }}</div>
|
||||||
</div>
|
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
<h6><a href="/topics/all">All Posts</a></h6>
|
||||||
|
|
|
||||||
|
|
@ -1,289 +0,0 @@
|
||||||
/*
|
|
||||||
* 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: #3B3B3B;
|
|
||||||
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;
|
|
||||||
flex-flow: column wrap;
|
|
||||||
background-color: #202020;
|
|
||||||
z-index: 2; width: 100%;
|
|
||||||
border-top: 1px solid var(--hilite);
|
|
||||||
box-shadow: 0px 0px 30px 0px var(--hilite);
|
|
||||||
}
|
|
||||||
|
|
||||||
.cor_menu a:link,a:visited,a:focus {
|
|
||||||
text-decoration: none;
|
|
||||||
color: darkgrey;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cor_menu a:hover {
|
|
||||||
font-weight: normal;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cor_topics {
|
|
||||||
display: flex; flex-flow: row wrap; justify-content: center;
|
|
||||||
font: 1.0em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
|
||||||
text-align: center; color: darkgrey; letter-spacing: 0.6em; line-height: 2.0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cor_topics div {
|
|
||||||
padding: 10px 10px 0px 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cor_topics a,a:visited,a:link,a:focus {
|
|
||||||
color: darkgrey;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cor_topics a:hover {
|
|
||||||
font-style: normal;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cor_footer {
|
|
||||||
display: flex; flex-flow: row wrap;
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
#all_button {
|
|
||||||
padding: 5px; margin: 2em; width: unset;
|
|
||||||
text-align: center;
|
|
||||||
border: 1px solid darkgrey;
|
|
||||||
}
|
|
||||||
|
|
||||||
#all_button a,a:visited,a:link,a:focus {
|
|
||||||
color: darkgrey;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#all_button a:hover {
|
|
||||||
font-style: normal;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Collection */
|
|
||||||
#cor_coll_title {
|
|
||||||
margin: 0px; padding-bottom: 10px;
|
|
||||||
font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
|
||||||
color: darkgrey; letter-spacing: 0.5em; text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
#content ul {
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
#content ol {
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Mobile First */
|
|
||||||
@media only screen and (min-width: 768px) {
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (min-width: 1250px) and (min-height: 750px) {
|
|
||||||
.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%;
|
|
||||||
border: none;
|
|
||||||
box-shadow: unset;
|
|
||||||
}
|
|
||||||
.cor_topics {
|
|
||||||
position: fixed; top: 75px; right: 0px; display: unset;
|
|
||||||
font: 1.0em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
|
||||||
text-align: right; color: darkgrey; letter-spacing: 0.6em; line-height: 2.0em;
|
|
||||||
}
|
|
||||||
.cor_footer {
|
|
||||||
position: fixed; bottom: 0; width: unset;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
136
src/styles/corrupt_layout.css
Normal file
136
src/styles/corrupt_layout.css
Normal file
|
|
@ -0,0 +1,136 @@
|
||||||
|
html {
|
||||||
|
/* Change this value to any color you want */
|
||||||
|
--hilite: #8D3FC5;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: #3B3B3B;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
header {
|
||||||
|
background-color: #202020;
|
||||||
|
border-bottom: 1px solid var(--hilite);
|
||||||
|
box-shadow: 0px 5px 30px -5px var(--hilite);
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row nowrap;
|
||||||
|
align-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
background-color: #202020;
|
||||||
|
border-top: 1px solid var(--hilite);
|
||||||
|
box-shadow: 0px -5px 30px -5px var(--hilite);
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row wrap;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer #social {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row wrap;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
}
|
||||||
|
|
||||||
|
main #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;
|
||||||
|
}
|
||||||
|
|
||||||
|
main #date {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
color: grey;
|
||||||
|
}
|
||||||
|
|
||||||
|
main #tags {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
color: grey;
|
||||||
|
}
|
||||||
|
|
||||||
|
main #desc {
|
||||||
|
padding: 0em 2em 2em 2em;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
@supports (display: grid) {
|
||||||
|
|
||||||
|
.cor_page {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(7, 1fr);
|
||||||
|
grid-template-rows: 50px max-content;
|
||||||
|
grid-template-areas:
|
||||||
|
"head head head head head head head"
|
||||||
|
". body body body body body ."
|
||||||
|
"foot foot foot foot foot foot foot";
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
grid-area: head;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
grid-area: foot;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
grid-area: body;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-width: 1250px) and (min-height: 750px) {
|
||||||
|
.cor_page {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(9, 1fr);
|
||||||
|
grid-template-rows: 50px max-content;
|
||||||
|
grid-template-areas:
|
||||||
|
"head head head head head head head foot foot"
|
||||||
|
". body body body body body . foot foot";
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
padding-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
border-top: 0px;
|
||||||
|
box-shadow: unset;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column nowrap;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: flex-end;
|
||||||
|
padding: 50px 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
main #date {
|
||||||
|
width: 50%;
|
||||||
|
text-align: left;
|
||||||
|
color: grey;
|
||||||
|
}
|
||||||
|
|
||||||
|
main #tags {
|
||||||
|
width: 50%;
|
||||||
|
text-align: right;
|
||||||
|
color: grey;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
90
src/styles/corrupt_typog.css
Normal file
90
src/styles/corrupt_typog.css
Normal file
|
|
@ -0,0 +1,90 @@
|
||||||
|
html {
|
||||||
|
font-family: sans-serif;
|
||||||
|
/* Change this value to any color you want */
|
||||||
|
--hilite: #8D3FC5;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul,ol,p {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
a,a:visited,a:link,a:focus {
|
||||||
|
text-decoration: none;
|
||||||
|
color: darkgrey;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a:hover {
|
||||||
|
color: var(--hilite);
|
||||||
|
}
|
||||||
|
|
||||||
|
header div {
|
||||||
|
color: darkgrey; letter-spacing: 0.8em;
|
||||||
|
}
|
||||||
|
|
||||||
|
header div::first-letter {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
font: 1.0em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
||||||
|
color: darkgrey; letter-spacing: 0.6em; line-height: 2.0em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#about p {
|
||||||
|
line-height: 1.5em; letter-spacing: 0.1em; text-align: left; color: white;
|
||||||
|
padding: 0em 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
padding: 10px;
|
||||||
|
font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
||||||
|
color: darkgrey; letter-spacing: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1::first-letter {
|
||||||
|
font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
text-align: left;
|
||||||
|
padding: 10px;
|
||||||
|
font: 1.0em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
||||||
|
color: darkgrey; letter-spacing: 0.6em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
text-align: right;
|
||||||
|
padding: 10px;
|
||||||
|
font: 1.0em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
||||||
|
color: darkgrey; letter-spacing: 0.6em;
|
||||||
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
h5 {
|
||||||
|
padding: 10px;
|
||||||
|
font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
||||||
|
color: darkgrey; letter-spacing: 0.5em; text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
h6 {
|
||||||
|
padding: 10px;
|
||||||
|
font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
||||||
|
color: darkgrey; letter-spacing: 0.5em; text-align: center;
|
||||||
|
border: 1px solid darkgrey;
|
||||||
|
}
|
||||||
|
|
||||||
|
article p {
|
||||||
|
padding: 0em 2em;
|
||||||
|
}
|
||||||
|
|
@ -1,198 +0,0 @@
|
||||||
/*
|
|
||||||
* CSS for theinternetvagabond.com
|
|
||||||
* (C)2015 Bill Niblock
|
|
||||||
* Licensed under the WTFPL [http://www.wtfpl.net]
|
|
||||||
*/
|
|
||||||
|
|
||||||
/* General */
|
|
||||||
|
|
||||||
body {
|
|
||||||
background-color: #3b3b3b;
|
|
||||||
}
|
|
||||||
|
|
||||||
a,a:visited,a:link,a:focus {
|
|
||||||
text-decoration: underline;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**********
|
|
||||||
* *
|
|
||||||
* Header *
|
|
||||||
* *
|
|
||||||
**********/
|
|
||||||
|
|
||||||
.header {
|
|
||||||
position: fixed; top: 0px; left: 0px; right: 0px;
|
|
||||||
margin: 0px; padding: 10px; z-index: 1;
|
|
||||||
background-color: #202020;
|
|
||||||
border-bottom: 1px solid #8D3FC5;
|
|
||||||
box-shadow: 0px 5px 30px -5px #8D3FC5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
display: flex;
|
|
||||||
margin: 0px 25px; padding: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title div {
|
|
||||||
margin: 0px; padding: 0px;
|
|
||||||
font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
|
||||||
color: darkgrey; letter-spacing: 1.2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title div::first-letter {
|
|
||||||
margin: 0px; padding: 0px 2px;
|
|
||||||
font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
/***********
|
|
||||||
* *
|
|
||||||
* Sidebar *
|
|
||||||
* *
|
|
||||||
***********/
|
|
||||||
.menu {
|
|
||||||
position: fixed; right: 0px; top: 0px; bottom:0px;
|
|
||||||
background-color: #202020;
|
|
||||||
list-style: none;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu a:link,a:visited,a:focus {
|
|
||||||
text-decoration: none;
|
|
||||||
color: darkgrey;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu a:hover {
|
|
||||||
font-weight: normal;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu li {
|
|
||||||
list-style: none;
|
|
||||||
padding: 15px 10px;
|
|
||||||
color: darkgrey;
|
|
||||||
}
|
|
||||||
|
|
||||||
#about {
|
|
||||||
display: flex;
|
|
||||||
flex-flow: column;
|
|
||||||
padding-bottom: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
#about p {
|
|
||||||
line-height: 1.5em; letter-spacing: 0.1em;
|
|
||||||
text-align: left;
|
|
||||||
padding: 0em 1em;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
#about h2 {
|
|
||||||
text-align: right;
|
|
||||||
padding: 10px;
|
|
||||||
font: 1.0em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
|
||||||
color: darkgrey; letter-spacing: 0.6em;
|
|
||||||
}
|
|
||||||
|
|
||||||
#footer {
|
|
||||||
position: absolute; bottom: 1em; left: 0px; right: 0px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#footer #cw {
|
|
||||||
font: 0.9em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
|
||||||
letter-spacing: 0.4em; padding: 1em 0 0.5em 0;
|
|
||||||
color: darkgrey;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*********
|
|
||||||
* Index *
|
|
||||||
********/
|
|
||||||
|
|
||||||
#posts a,a:visited,a:link,a:focus {
|
|
||||||
color: darkgrey;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#posts a:hover {
|
|
||||||
font-style: normal;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
#posts #details {
|
|
||||||
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 {
|
|
||||||
text-align: left;
|
|
||||||
color: grey;
|
|
||||||
}
|
|
||||||
|
|
||||||
#posts #tags {
|
|
||||||
text-align: right;
|
|
||||||
color: grey;
|
|
||||||
}
|
|
||||||
|
|
||||||
#posts #desc {
|
|
||||||
padding: 0em 2em 2em 2em;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
/********
|
|
||||||
* *
|
|
||||||
* Blog *
|
|
||||||
* *
|
|
||||||
********/
|
|
||||||
#content {
|
|
||||||
margin: 5em;
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
Loading…
Reference in a new issue