vagabond/the-internet-vagabond-dot-com
1
0
Fork 0
Code Issues 3 Pull requests Projects 2 Activity Actions

Merge pull request #2 from VagabondAzulien/menu

Browse source 
Implement Topic menu
This commit is contained in:
Bill Niblock 2018-01-13 21:58:18 -05:00 committed by GitHub
commit 6c399feeeb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 95 additions and 152 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
_includes/cor_menu.html Normal file
View file

@ -0,0 +1,50 @@
<div class="cor_menu">
<div class="cor_topics">
<div><a href="/">home</a></div>
{% for topic in site.topics %}
<div><a href="/topics/{{ topic.title }}">{{ topic.title }}</a></div>
{% endfor %}
</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
accident.</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>

2
_includes/topics.html
View file

@ -6,7 +6,7 @@
<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}}">{{topic}}</a>
{% endfor %} {% endfor %}
</div> </div>
</div> </div>

47
_layouts/corrupt_collection.html
View file

@ -22,52 +22,7 @@
{{ content }} {{ content }}
</div> </div>
</div> </div>
<div class="cor_menu"> {% include cor_menu.html %}
<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> </div>
</body> </body>
</html> </html>

51
_layouts/corrupt_index.html
View file

@ -19,57 +19,12 @@
</div> </div>
<div id="content"> <div id="content">
{{ content }} {{ content }}
</div> <div id="all_button">
<div id="all_button"> <a href="/topics/all">All Posts</a>
<a href="/topics/all.html">All Posts</a>
</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>
</div> </div>
{% include cor_menu.html %}
</div> </div>
</body> </body>
</html> </html>

47
_layouts/corrupt_post.html
View file

@ -22,52 +22,7 @@
<h4>[{{ page.author }}][{{ page.pub }}][{{ page.tags }}]</h4> <h4>[{{ page.author }}][{{ page.pub }}][{{ page.tags }}]</h4>
</div> </div>
</div> </div>
<div class="cor_menu"> {% include cor_menu.html %}
<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> </div>
</body> </body>
</html> </html>

2
index.html
View file

@ -10,7 +10,7 @@
<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}}">{{topic}}</a>
{% endfor %} {% endfor %}
</div> </div>
</div> </div>

48
src/styles/corrupt.css
View file

@ -14,7 +14,7 @@ html {
} }
body { body {
background-color: #202020; background-color: #3B3B3B;
margin: 0; margin: 0;
} }
@ -64,8 +64,11 @@ a:hover {
/* Sidebar */ /* Sidebar */
.cor_menu { .cor_menu {
display: flex; display: flex;
flex-flow: column wrap;
background-color: #202020; background-color: #202020;
z-index: 2; width: 100%; 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 { .cor_menu a:link,a:visited,a:focus {
@ -78,11 +81,30 @@ a:hover {
color: white; 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 { .cor_footer {
display: flex; flex-flow: row wrap; display: flex; flex-flow: row wrap;
width: 100%;
text-align: center; text-align: center;
border-top: 1px solid var(--hilite);
box-shadow: 0px 0px 30px 0px var(--hilite);
} }
.cor_footer #about { .cor_footer #about {
@ -219,14 +241,16 @@ a:hover {
} }
/* Mobile First */ /* Mobile First */
@media only screen and (min-width: 1250px) and (min-height: 750px) { @media only screen and (min-width: 768px) {
.title div { .title div { 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 {
font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif; font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
} }
}
@media only screen and (min-width: 1250px) and (min-height: 750px) {
.cor_content { .cor_content {
width: 80%; width: 80%;
} }
@ -243,11 +267,15 @@ a:hover {
} }
.cor_menu { .cor_menu {
width: 20%; width: 20%;
}
.cor_footer {
position: fixed;
bottom: 0;
border: none; border: none;
box-shadow: unset; 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;
}
} }