Formatting and Style changes
- Modify the h-card information to remove duplication of information by integrating it with the "footer" information - Update the layouts to make the page title link back to root - Update the styles for above changes
This commit is contained in:
parent
76dc6bbec2
commit
ff0e47266e
5 changed files with 77 additions and 70 deletions
|
|
@ -8,39 +8,60 @@
|
|||
|
||||
<hr />
|
||||
|
||||
<section id="about">
|
||||
<h5>The Site</h5>
|
||||
<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>
|
||||
<h5>The Vagabond</h5>
|
||||
<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>
|
||||
</section>
|
||||
<section id="social">
|
||||
<a rel="me" href="https://github.com/VagabondAzulien">
|
||||
<img src="{{ site.url }}/src/images/github_light.png"
|
||||
width="32" height="32" alt="GitHub"
|
||||
title="My GitHub Repos" />
|
||||
<section class="h-card">
|
||||
<section id="about">
|
||||
<h5>The Site</h5>
|
||||
<a class="u-url u-uid" href="https://theinternetvagabond.com"></a>
|
||||
<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>
|
||||
<h5>The Vagabond</h5>
|
||||
<p>
|
||||
My name is <span class="p-name">Bill Niblock</span>. <span
|
||||
class="p-note">I'm a computer scientist by education, a technologist
|
||||
by trade, a gamer by hobby, and a philosopher by accident. I
|
||||
currently live in <span class="p-locality">Buffalo</span>, <span
|
||||
class="p-region">New York</span>, <span class="p-country-name">USA
|
||||
</span>.
|
||||
</p>
|
||||
</section>
|
||||
<section id="social">
|
||||
<a class="u-url" rel="me" 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 class="u-url" rel="me" 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>
|
||||
<a class="u-url" rel="me" 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>
|
||||
<a class="u-url" rel="me" href="https://matrix.to/#/@vagabondazulien:exp.farm">
|
||||
<img src="{{ site.url }}/src/images/matrix_light.png"
|
||||
width="32" height="32" alt="Matrix"
|
||||
title="Speak to me on Matrix" />
|
||||
</a>
|
||||
</section>
|
||||
<section id="email">
|
||||
<a class="u-email" rel="me"
|
||||
href="mailto:bill@theinternetvagabond.com">
|
||||
bill at theinternetvagabond.com
|
||||
</a>
|
||||
<a rel="me" 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>
|
||||
<a rel="me" 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>
|
||||
<a rel="me" href="https://matrix.to/#/@vagabondazulien:exp.farm">
|
||||
<img src="{{ site.url }}/src/images/matrix_light.png"
|
||||
width="32" height="32" alt="Matrix"
|
||||
title="My Steam Profile" />
|
||||
</a>
|
||||
</section>
|
||||
<section id="email">
|
||||
bill at theinternetvagabond.com
|
||||
</section>
|
||||
<section style="display: none;">
|
||||
<span class="p-category">Gaming</span>
|
||||
<span class="p-category">Technology</span>
|
||||
<span class="p-category">Philosophy</span>
|
||||
<span class="p-category">Open Source Software</span>
|
||||
<span class="p-category">Self-Hosting</span>
|
||||
<span class="p-category">Coffee</span>
|
||||
</section>
|
||||
</section>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -14,43 +14,19 @@
|
|||
href="{{ site.url }}/src/images/favicon.ico" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="cor_page">
|
||||
<div class="cor_page">
|
||||
|
||||
<header>
|
||||
<div>The</div><div>Internet</div><div>Vagabond</div>
|
||||
</header>
|
||||
<header>
|
||||
<a href="/">
|
||||
<div>The</div><div>Internet</div><div>Vagabond</div>
|
||||
</a>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
{{ content }}
|
||||
</main>
|
||||
<main>
|
||||
{{ content }}
|
||||
</main>
|
||||
|
||||
{% include cor_menu.html %}
|
||||
</div>
|
||||
<!-- IndieWeb h-card -->
|
||||
<section style="display: none;" class="h-card">
|
||||
<!-- IndieWeb: About Me -->
|
||||
<span class="p-name">Bill Niblock</span>
|
||||
<span class="p-note">
|
||||
I'm a computer scientist by education, a technologist
|
||||
by trade, a gamer by hobby, and a philosopher by accident.
|
||||
</span>
|
||||
<!-- IndieWeb: Profile Pic (WIP) -->
|
||||
<!-- IndieWeb: Location -->
|
||||
<span class="p-locality">Buffalo</span>
|
||||
<span class="p-region">New York</span>
|
||||
<span class="p-country-name">United States of America</span>
|
||||
<!-- IndieWeb: Links -->
|
||||
<a class="u-url u-uid" href="https://theinternetvagabond.com"></a>
|
||||
<a class="u-email" rel="me" href="mailto:bill@theinternetvagabond.com"></a>
|
||||
<a class="u-url" rel="me" href="https://github.com/VagabondAzulien"></a>
|
||||
<a class="u-url" rel="me" href="https://steamcommunity.com/id/azulien"></a>
|
||||
<a class="u-url" rel="me" href="https://matrix.to/#/@vagabondazulien:exp.farm"></a>
|
||||
<!-- IndieWeb: Categories -->
|
||||
<span class="p-category">Gaming</span>
|
||||
<span class="p-category">Technology</span>
|
||||
<span class="p-category">Philosophy</span>
|
||||
<span class="p-category">Open Source Software</span>
|
||||
<span class="p-category">Coffee</span>
|
||||
</section>
|
||||
{% include cor_menu.html %}
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,9 @@
|
|||
<body>
|
||||
<div class="cor_page">
|
||||
<header>
|
||||
<div> The </div><div> Internet </div><div> Vagabond </div>
|
||||
<a href="/">
|
||||
<div>The</div><div>Internet</div><div>Vagabond</div>
|
||||
</a>
|
||||
</header>
|
||||
<main>
|
||||
<article>
|
||||
|
|
|
|||
|
|
@ -12,11 +12,15 @@ header {
|
|||
background-color: #202020;
|
||||
border-bottom: 1px solid var(--hilite);
|
||||
box-shadow: 0px 5px 30px -5px var(--hilite);
|
||||
}
|
||||
|
||||
header a {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-content: space-between;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
footer {
|
||||
|
|
@ -133,7 +137,7 @@ h3 + table {
|
|||
"body body body body body body body foot foot";
|
||||
}
|
||||
|
||||
header {
|
||||
header a {
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding-left: 10px;
|
||||
|
|
|
|||
|
|
@ -25,6 +25,10 @@ header div {
|
|||
color: darkgrey; letter-spacing: 0.8em;
|
||||
}
|
||||
|
||||
header a:hover > div {
|
||||
color: white;
|
||||
}
|
||||
|
||||
header div::first-letter {
|
||||
color: white;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue