Continue redesign
This commit is contained in:
Bill Niblock
parent
fe5610ad70
commit
7285356d64
3 changed files with 127 additions and 97 deletions
|
|
@ -27,24 +27,19 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="pure-g pure-u-1-5 menu">
|
<div class="pure-g pure-u-1-5 menu">
|
||||||
<div class="pure-u-1">
|
<div class="pure-u-1" id="tags">
|
||||||
<ul>
|
|
||||||
<li><a href="/">Home</a></li>
|
|
||||||
<li>Projects</li>
|
|
||||||
<ul id="projects">
|
|
||||||
{% for pr in site.projects limit:3 %}
|
|
||||||
<li>{{ pr.title }}</li>
|
|
||||||
{% endfor %}
|
|
||||||
</ul>
|
|
||||||
<li>Posts</li>
|
|
||||||
<ul id="posts">
|
|
||||||
{% for post in site.posts limit:3 %}
|
|
||||||
<li><a href="{{ post.url }}">{{ post.title }}</a></li>
|
|
||||||
{% endfor %}
|
|
||||||
</ul>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="pure-g" id="footer">
|
<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">
|
<div class="pure-u-1-4">
|
||||||
<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"
|
||||||
|
|
|
||||||
38
index.html
38
index.html
|
|
@ -3,31 +3,13 @@
|
||||||
tabtitle: Home
|
tabtitle: Home
|
||||||
---
|
---
|
||||||
|
|
||||||
<article>
|
{% for post in site.posts %}
|
||||||
<h1>Welcome</h1>
|
<div id="posts">
|
||||||
<p>Welcome to The Internet Vagabond, a small slice of Internet
|
<h1><a href="{{ post.url }}">{{ post.title }}</a></h1>
|
||||||
real-estate for Bill Niblock. Nothing I say is visionary or
|
<div class="pure-g" id="details">
|
||||||
profound, and sometimes it makes sense. You can find a list of
|
<div class="pure-u-1-2" id="date">Published: {{ post.date }}</div>
|
||||||
any posts and projects I've made available in the menu on the right.
|
<div class="pure-u-1-2" id="tags">Tagged: {{ post.tags }}</div>
|
||||||
Just click the menu button in the upper-right to view it.</p>
|
</div>
|
||||||
|
<div id="desc">{{ post.short_desc }}</div>
|
||||||
<h2>About the Site</h2>
|
</div>
|
||||||
<p>The Internet Vagabond is a simple website I use for the rare
|
{% endfor %}
|
||||||
blog posts I make, information about me and the projects I work
|
|
||||||
on, and a digital plot of e-land. It is programmed as much in
|
|
||||||
HTML and CSS as possible, and designed with a small footprint.
|
|
||||||
The site is hosted on GitHub, and utilizes Jekyll for further
|
|
||||||
organization and optimization. If you're interested in more
|
|
||||||
technical details, check out the GitHub Project page for this
|
|
||||||
repository [WIP]. You can easily get to it via the menu on the right.</p>
|
|
||||||
|
|
||||||
<h2>About the Vagabond</h2>
|
|
||||||
<p>I'm a computer scientist by education, a technologist by
|
|
||||||
trade, a gamer by hobby, a philosopher by choice, and the list goes
|
|
||||||
on. I'm quite fond of Linux, in particular the command line, and the myriad
|
|
||||||
of fascinating and intricate programs which call them home. I'm an avid
|
|
||||||
gamer, though I tend to shy away from the AAA releases. I am actively
|
|
||||||
pursuing a better understanding of Stoicism, and, more generally, our
|
|
||||||
universe. Learning is my ultimate passion, and I act accordingly to live my
|
|
||||||
passions every day.</p>
|
|
||||||
</article>
|
|
||||||
|
|
|
||||||
157
src/styles.css
157
src/styles.css
|
|
@ -7,16 +7,16 @@
|
||||||
/* General */
|
/* General */
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-color: #3b3b3b;
|
background-color: #3b3b3b;
|
||||||
}
|
}
|
||||||
|
|
||||||
a,a:visited,a:link,a:focus {
|
a,a:visited,a:link,a:focus {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:hover {
|
a:hover {
|
||||||
font-weight: bold;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**********
|
/**********
|
||||||
|
|
@ -26,28 +26,28 @@ a:hover {
|
||||||
**********/
|
**********/
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
position: fixed; top: 0px; left: 0px; right: 0px;
|
position: fixed; top: 0px; left: 0px; right: 0px;
|
||||||
margin: 0px; padding: 10px; z-index: 1;
|
margin: 0px; padding: 10px; z-index: 1;
|
||||||
background-color: #202020;
|
background-color: #202020;
|
||||||
border-bottom: 1px solid #8D3FC5;
|
border-bottom: 1px solid #8D3FC5;
|
||||||
box-shadow: 0px 5px 30px -5px #8D3FC5;
|
box-shadow: 0px 5px 30px -5px #8D3FC5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
display: flex;
|
display: flex;
|
||||||
margin: 0px 25px; padding: 0px;
|
margin: 0px 25px; padding: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title div {
|
.title div {
|
||||||
margin: 0px; padding: 0px;
|
margin: 0px; padding: 0px;
|
||||||
font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
||||||
color: darkgrey; letter-spacing: 1.2em;
|
color: darkgrey; letter-spacing: 1.2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title div::first-letter {
|
.title div::first-letter {
|
||||||
margin: 0px; padding: 0px 2px;
|
margin: 0px; padding: 0px 2px;
|
||||||
font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
/***********
|
/***********
|
||||||
|
|
@ -78,6 +78,26 @@ a:hover {
|
||||||
color: darkgrey;
|
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 {
|
#footer {
|
||||||
position: absolute; bottom: 1em; left: 0px; right: 0px;
|
position: absolute; bottom: 1em; left: 0px; right: 0px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
@ -89,57 +109,90 @@ a:hover {
|
||||||
color: darkgrey;
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
/********
|
/********
|
||||||
* *
|
* *
|
||||||
* Body *
|
* Blog *
|
||||||
* *
|
* *
|
||||||
********/
|
********/
|
||||||
#content {
|
#content {
|
||||||
margin: 0em 5em;
|
margin: 5em;
|
||||||
|
line-height: 1.5em; letter-spacing: 0.1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
article {
|
#content h1 {
|
||||||
margin: 50px auto; padding: 10px;
|
padding: 10px;
|
||||||
line-height: 1.5em; letter-spacing: 0.1em;
|
font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
||||||
|
color: darkgrey; letter-spacing: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
article h1 {
|
#content h1::first-letter {
|
||||||
padding: 10px;
|
margin: 0px; padding: 0px;
|
||||||
font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
||||||
color: darkgrey; letter-spacing: 0.5em;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
article h1::first-letter {
|
#content h2 {
|
||||||
margin: 0px; padding: 0px;
|
text-align: left;
|
||||||
font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
padding: 10px;
|
||||||
color: white;
|
border-bottom: 1px solid darkgrey;
|
||||||
|
font: 1.0em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
||||||
|
color: darkgrey; letter-spacing: 0.6em;
|
||||||
}
|
}
|
||||||
|
|
||||||
article h2 {
|
#content h3 {
|
||||||
text-align: left;
|
text-align: right;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
border-bottom: 1px solid darkgrey;
|
border-bottom: 1px solid darkgrey;
|
||||||
font: 1.0em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
font: 1.0em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
||||||
color: darkgrey; letter-spacing: 0.6em;
|
color: darkgrey; letter-spacing: 0.6em;
|
||||||
}
|
}
|
||||||
|
|
||||||
article h3 {
|
#content h4 {
|
||||||
text-align: right;
|
text-align: center;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
border-bottom: 1px solid darkgrey;
|
border-top: 1px solid darkgrey;
|
||||||
font: 1.0em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
font: 0.8em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
||||||
color: darkgrey; letter-spacing: 0.6em;
|
color: darkgrey; letter-spacing: 0.4em;
|
||||||
}
|
}
|
||||||
|
|
||||||
article h4 {
|
#content p {
|
||||||
text-align: center;
|
padding: 0em 2em;
|
||||||
padding: 10px;
|
color: white;
|
||||||
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;
|
|
||||||
color: white;
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue