Improvements to front page and adding page for CSS art.
parent
69b32acccb
commit
cfaca7af90
|
|
@ -0,0 +1,55 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<title>CSS "Art"</title>
|
||||||
|
<style>
|
||||||
|
|
||||||
|
html {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: linear-gradient(to bottom right, steelblue, #152837);
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 1em auto;
|
||||||
|
padding: 2em;
|
||||||
|
background: white;
|
||||||
|
box-shadow: 3px 3px 6px black;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
<h1>CSS Art</h1>
|
||||||
|
|
||||||
|
<p>The following pages are rendered with pure HTML and CSS.</p>
|
||||||
|
|
||||||
|
<p><strong>Note:</strong> These are likely disasters as far as accessibility and portability goes. They may not work well with custom browsers settings or even on mobile.</p>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li><a href='./vaporwave/'>Generic Vaporwave</a></li>
|
||||||
|
<li>
|
||||||
|
<a href='./says/trans/rights/'>Some</a>
|
||||||
|
<a href='./says/black/lives/matter/'>things</a>
|
||||||
|
I
|
||||||
|
want
|
||||||
|
to
|
||||||
|
say.
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Binary file not shown.
47
index.html
47
index.html
|
|
@ -1,13 +1,33 @@
|
||||||
<html>
|
<!DOCTYPE html>
|
||||||
|
<html lang='en'>
|
||||||
<head>
|
<head>
|
||||||
<title>gamerdonkey's ~ page</title>
|
<title>gamerdonkey's ~ page</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||||
<style>
|
<style>
|
||||||
|
@font-face {
|
||||||
|
font-family: "PixelOperator";
|
||||||
|
src: url("./fonts/PixelOperator-Bold.ttf");
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
display: flex;
|
display: flex;
|
||||||
background: repeating-linear-gradient(rgb(0,0,170), rgb(0,0,170) 20px, rgb(0,170,170) 20px, rgb(0,170,170) 40px);
|
background: repeating-linear-gradient(rgb(0,0,170), rgb(0,0,170) 20px, rgb(0,170,170) 20px, rgb(0,170,170) 40px);
|
||||||
height: 100%;
|
min-height: 100%;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-family: monospace, fixed;
|
font-family: PixelOperator, monospace, fixed;
|
||||||
|
font-size: 14pt;
|
||||||
|
}
|
||||||
|
|
||||||
|
a, a:visited {
|
||||||
|
color: #000070;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style-type: '> ';
|
||||||
}
|
}
|
||||||
|
|
||||||
div.terminal {
|
div.terminal {
|
||||||
|
|
@ -15,20 +35,22 @@
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background: lightgray;
|
background: lightgray;
|
||||||
height: 92%;
|
min-height: 92%;
|
||||||
width: 92%;
|
width: 92%;
|
||||||
max-width: 1280px;
|
max-width: 1280px;
|
||||||
margin: auto;
|
margin: 2em auto;
|
||||||
box-shadow: 6px 8px;
|
box-shadow: 6px 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
header {
|
header {
|
||||||
margin-top: 2em;
|
margin-top: 2em;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
font-size: 12pt;
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
main {
|
||||||
width: 80ch;
|
max-width: 80ch;
|
||||||
|
margin: 0 0.5em;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
@ -44,26 +66,21 @@
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<h1> Welcome </h1>
|
<h1> Welcome to My Small Corner of ~town</h1>
|
||||||
|
|
||||||
<p> To my small corner of ~town.</p>
|
<p> I'm a software developer and maker. I love <a href='https://tildeverse.org/' target='_blank'>tilde communities</a> and I try to use this space to explore my own creativity and some of the more beautiful aspects of the internet. More about me is on <a href='https://gamerdonkey.com' target='_blank'>my primary website</a>. If you're on tilde.town, feel free to email me or find me on IRC. </p>
|
||||||
<p> After all this time, I'm still trying to feel out what I want this space to be. Some of what I do makes it to the internet, though. Check it out below. </p>
|
|
||||||
<ul>
|
|
||||||
<li>For more information about what this place is, check out the <a href='http://tilde.town/' target='_blank'>tilde.town front page</a> and <a href='https://medium.com/message/tilde-club-i-had-a-couple-drinks-and-woke-up-with-1-000-nerds-a8904f0a2ebf' target='_blank'>this blog post</a>.</li>
|
|
||||||
<li>You can learn more about me at <a href='https://gamerdonkey.com' target='_blank'>my primary website</a>.</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h3> My Things </h3>
|
<h3> My Things </h3>
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href='./gbcamera'>Game Boy Camera Photography</a></li>
|
<li><a href='./gbcamera'>Game Boy Camera Photography</a></li>
|
||||||
|
<li><a href='./css-art.html'>CSS "Art"</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<h3> Things I Enjoy </h3>
|
<h3> Other People's Things </h3>
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href='https://xkcd.com/1732/'>This comic</a> from XKCD. (Also <a href='https://xkcd.com/926/'>this one</a>)</li>
|
<li><a href='https://xkcd.com/1732/'>This comic</a> from XKCD. (Also <a href='https://xkcd.com/926/'>this one</a>)</li>
|
||||||
<li><a href='https://www.indiebound.org/book/9780593084694'><em>Humble Pi</em></a> by Matt Parker</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</main>
|
</main>
|
||||||
</div> <!-- terminal -->
|
</div> <!-- terminal -->
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue