titlebar colors, page additions
This commit is contained in:
yosh
parent
9e83bf9b68
commit
f2cdad026c
11 changed files with 177 additions and 22 deletions
54
credits.html
Normal file
54
credits.html
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf8">
|
||||
<title>~yosh</title>
|
||||
<link rel="stylesheet" href="style/style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>~yosh@unix.dog</h1>
|
||||
</header>
|
||||
<section id="lbartop">
|
||||
<div class="titlebar tb-pink" aria-hidden="true">
|
||||
<span class="tbl" title="navigation"></span>
|
||||
<span class="tbr"></span>
|
||||
</div>
|
||||
<nav>
|
||||
<h2>navigation</h2>
|
||||
<ul>
|
||||
<li><a href="index.html">home</a>
|
||||
<li><a href="info.html">information</a>
|
||||
<li><a href="thoughts.html">thoughts</a>
|
||||
<li><a href="software.html">software, scripts</a>
|
||||
<li><a href="links.html">links</a>
|
||||
<li><a href="credits.html">credits</a>
|
||||
</ul>
|
||||
</nav>
|
||||
</section>
|
||||
<section id="lbarbot">
|
||||
<div class="titlebar tb-lblue" aria-hidden="true">
|
||||
<span class="tbl" title="miscellaneous!!"></span>
|
||||
<span class="tbr"></span>
|
||||
</div>
|
||||
<hr>
|
||||
<ul class="displist sbgridlist" aria-hidden="true">
|
||||
<li><img src="img/buttons/tosviolation.gif" alt="this page is a tos violation">
|
||||
<li><img src="img/buttons/anybrowser.gif" alt="best viewed with any browser">
|
||||
</ul>
|
||||
</section>
|
||||
<main>
|
||||
<div class="titlebar tb-green" aria-hidden="true">
|
||||
<span class="tbl" title="welcome!"></span>
|
||||
<span class="tbr"></span>
|
||||
</div>
|
||||
<h2>credits</h2>
|
||||
<p>renard background image by <a href="https://www.furaffinity.net/user/squeedgemonster">squeedgemonster</a>
|
||||
</main>
|
||||
<footer>
|
||||
<p>this site is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a><br>
|
||||
see the <a href="https://git.unix.dog/yosh/website">source code repository</a></p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
BIN
img/bunnies.gif
Normal file
BIN
img/bunnies.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
BIN
img/buttons/anybrowser.gif
Normal file
BIN
img/buttons/anybrowser.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1,002 B |
BIN
img/buttons/email.gif
Normal file
BIN
img/buttons/email.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
BIN
img/buttons/mastodon.gif
Normal file
BIN
img/buttons/mastodon.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
img/buttons/tosviolation.gif
Normal file
BIN
img/buttons/tosviolation.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
BIN
img/buttons/twitter.gif
Normal file
BIN
img/buttons/twitter.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
34
index.html
34
index.html
|
|
@ -10,20 +10,34 @@
|
|||
<header>
|
||||
<h1>~yosh@unix.dog</h1>
|
||||
</header>
|
||||
<section id="lbar">
|
||||
<div class="titlebar tb-green" aria-hidden="true">
|
||||
<section id="lbartop">
|
||||
<div class="titlebar tb-pink" aria-hidden="true">
|
||||
<span class="tbl" title="navigation"></span>
|
||||
<span class="tbr"></span>
|
||||
</div>
|
||||
<nav>
|
||||
<h2>navigation</h2>
|
||||
<ul>
|
||||
<li><a href="index.html">home</a>
|
||||
<li><a href="info.html">information</a>
|
||||
<li><a href="thoughts.html">thoughts</a>
|
||||
<li><a href="software.html">software, scripts</a>
|
||||
<li><a href="links.html">links</a>
|
||||
<li><a href="credits.html">credits</a>
|
||||
</ul>
|
||||
</nav>
|
||||
</section>
|
||||
<section id="lbarbot">
|
||||
<div class="titlebar tb-lblue" aria-hidden="true">
|
||||
<span class="tbl" title="miscellaneous!!"></span>
|
||||
<span class="tbr"></span>
|
||||
</div>
|
||||
<hr>
|
||||
<ul class="displist sbgridlist" aria-hidden="true">
|
||||
<li><img src="img/buttons/tosviolation.gif" alt="this page is a tos violation">
|
||||
<li><img src="img/buttons/anybrowser.gif" alt="best viewed with any browser">
|
||||
</ul>
|
||||
</section>
|
||||
<main>
|
||||
<div class="titlebar tb-green" aria-hidden="true">
|
||||
<span class="tbl" title="welcome!"></span>
|
||||
|
|
@ -32,22 +46,10 @@
|
|||
<h2>welcome!</h2>
|
||||
<p>yo what up. welcome to my unix.dog page<br>
|
||||
take a look around!</p>
|
||||
<h2>myself</h2>
|
||||
<p>I'm yosh. or yoshi. or yoshiyosh... or yoshiyoshiyosh...<br>
|
||||
my names get taken a lot. wonder why.<br>
|
||||
I enjoy many things. honestly don't really know where to begin<br>
|
||||
always hated introductions and talking about myself<br>
|
||||
I like shell scripting, linux, the look of old UI, archival, anthropomorphic animals, and music. lots of music<br>
|
||||
I'm also kinda a video game junkie. I enjoy doing hard stuff in video games I like<br>
|
||||
<h2>site</h2>
|
||||
<p>this is probably gonna be a more "social" site ??<br>
|
||||
not sure how to really explain it, but here's where I'll probably put webrings n shit connecting to a bunch of other people in the same vein. who knows<br>
|
||||
the actual design is more or less something that popped into my head while messing around with twm on my computer. I like the look of it<br>
|
||||
in a perfect world this site would resemble those kinda "design group" abstract-y2k websites that I adore, but that usually requires making actual visual images. I do not have that skill</p>
|
||||
</main>
|
||||
<footer>
|
||||
<p><img alt="under construction" src="img/construction.gif"><br>
|
||||
very, very much under construction</p>
|
||||
</main>
|
||||
<footer>
|
||||
<p>this site is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a><br>
|
||||
see the <a href="https://git.unix.dog/yosh/website">source code repository</a></p>
|
||||
</footer>
|
||||
|
|
|
|||
70
info.html
Normal file
70
info.html
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf8">
|
||||
<title>~yosh</title>
|
||||
<link rel="stylesheet" href="style/style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>~yosh@unix.dog</h1>
|
||||
</header>
|
||||
<section id="lbartop">
|
||||
<div class="titlebar tb-pink" aria-hidden="true">
|
||||
<span class="tbl" title="navigation"></span>
|
||||
<span class="tbr"></span>
|
||||
</div>
|
||||
<nav>
|
||||
<h2>navigation</h2>
|
||||
<ul>
|
||||
<li><a href="index.html">home</a>
|
||||
<li><a href="info.html">information</a>
|
||||
<li><a href="thoughts.html">thoughts</a>
|
||||
<li><a href="software.html">software, scripts</a>
|
||||
<li><a href="links.html">links</a>
|
||||
<li><a href="credits.html">credits</a>
|
||||
</ul>
|
||||
</nav>
|
||||
</section>
|
||||
<section id="lbarbot">
|
||||
<div class="titlebar tb-lblue" aria-hidden="true">
|
||||
<span class="tbl" title="miscellaneous!!"></span>
|
||||
<span class="tbr"></span>
|
||||
</div>
|
||||
<hr>
|
||||
<ul class="displist sbgridlist" aria-hidden="true">
|
||||
<li><img src="img/buttons/tosviolation.gif" alt="this page is a tos violation">
|
||||
<li><img src="img/buttons/anybrowser.gif" alt="best viewed with any browser">
|
||||
</ul>
|
||||
</section>
|
||||
<main>
|
||||
<div class="titlebar tb-green" aria-hidden="true">
|
||||
<span class="tbl" title="information"></span>
|
||||
<span class="tbr"></span>
|
||||
</div>
|
||||
<h2>myself</h2>
|
||||
<p>I'm yosh. or yoshi. or yoshiyosh... or yoshiyoshiyosh...<br>
|
||||
my names get taken a lot. wonder why.<br>
|
||||
I enjoy many things. honestly don't really know where to begin<br>
|
||||
always hated introductions and talking about myself<br>
|
||||
I like shell scripting, linux, the look of old UI, archival, anthropomorphic animals, and music. lots of music<br>
|
||||
I'm also kinda a video game junkie. I enjoy doing hard stuff in video games I like<br>
|
||||
<h2>site</h2>
|
||||
<p>this is probably gonna be a more "social" site ??<br>
|
||||
not sure how to really explain it, but here's where I'll probably put webrings n shit connecting to a bunch of other people in the same vein. who knows<br>
|
||||
the actual design is more or less something that popped into my head while messing around with twm on my computer. I like the look of it<br>
|
||||
in a perfect world this site would resemble those kinda "design group" abstract-y2k websites that I adore, but that usually requires making actual visual images. I do not have that skill</p>
|
||||
<h2>contact</h2>
|
||||
<p>you can contact me with any of these new-fangled fancy "buttons" the kids are using nowadays</p>
|
||||
<ul class="gridlist displist">
|
||||
<li><a href="mailto:yosh@unix.dog"><img src="img/buttons/email.gif" alt="e-mail"></a>
|
||||
<li><a href="https://wetdry.world/@Yoshi"><img src="img/buttons/mastodon.gif" alt="fediverse"></a>
|
||||
<li><a href="https://twitter.com/yoshiyoshiyoshh"><img src="img/buttons/twitter.gif" alt="twitter"></a>
|
||||
</ul>
|
||||
</main>
|
||||
<footer>
|
||||
<p>this site is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a><br>
|
||||
see the <a href="https://git.unix.dog/yosh/website">source code repository</a></p>
|
||||
</footer>
|
||||
</body>
|
||||
|
|
@ -20,9 +20,10 @@ body {
|
|||
gap: 16px;
|
||||
text-align: center;
|
||||
grid-template:
|
||||
"header header" auto
|
||||
"lbar main " 1fr
|
||||
"footer footer" auto
|
||||
"header header " auto
|
||||
"lbartop main " auto
|
||||
"lbarbot main " 1fr
|
||||
"footer footer " auto
|
||||
/ 216px 1fr;
|
||||
}
|
||||
|
||||
|
|
@ -42,11 +43,33 @@ h2 {
|
|||
}
|
||||
|
||||
p {
|
||||
margin: 16px;
|
||||
margin: 1rem;
|
||||
line-height: 1.2em;
|
||||
|
||||
}
|
||||
|
||||
li::marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
text-align: left;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
.displist {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gridlist {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.sbgridlist {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
body > * {
|
||||
|
|
@ -58,8 +81,12 @@ header {
|
|||
grid-area: header;
|
||||
}
|
||||
|
||||
#lbar {
|
||||
grid-area: lbar;
|
||||
#lbartop {
|
||||
grid-area: lbartop;
|
||||
}
|
||||
#lbarbot {
|
||||
grid-area: lbarbot;
|
||||
background: url("../img/bunnies.gif") #CCEEDDAA repeat;
|
||||
}
|
||||
|
||||
main {
|
||||
|
|
|
|||
|
|
@ -53,3 +53,5 @@
|
|||
/* specific colors */
|
||||
|
||||
.tb-green { --tb-bg: #5dbc99; --tb-fg: #000000; --tb-img-bg: #f4f0e8; }
|
||||
.tb-lblue { --tb-bg: #67a2bc; --tb-fg: #000000; --tb-img-bg: #f4f0e8; }
|
||||
.tb-pink { --tb-bg: #dc9786; --tb-fg: #000000; --tb-img-bg: #f4f0e8; }
|
||||
|
|
|
|||
Loading…
Reference in a new issue