Simpler style using css border property for stripes

This commit is contained in:
Nycki 2021-09-03 17:38:50 -04:00
parent f0151a9480
commit e653246e15
10 changed files with 115 additions and 44 deletions

0
.gitignore vendored Normal file
View file

View file

Before

Width:  |  Height:  |  Size: 672 B

After

Width:  |  Height:  |  Size: 672 B

View file

Before

Width:  |  Height:  |  Size: 672 B

After

Width:  |  Height:  |  Size: 672 B

View file

Before

Width:  |  Height:  |  Size: 665 B

After

Width:  |  Height:  |  Size: 665 B

View file

Before

Width:  |  Height:  |  Size: 663 B

After

Width:  |  Height:  |  Size: 663 B

View file

@ -3,58 +3,49 @@
<head>
<title>Nupa's Page</title>
<meta charset='utf-8'/>
<link rel='stylesheet' href='style-3.css'>
<style>
html {
margin: 0 auto;
max-width: 80ch;
}
body {
background-image: url('magenta-tile-4.png');
background-size: 3vmin;
color: darkgray;
text-shadow: 2px 2px black;
font-family: sans-serif;
font-weight: bold;
max-width: 120ch;
}
h1, h3 {
text-align: center;
}
ul {
list-style: none;
padding-left: 0px;
}
li:before {
content: '●';
padding: 20px;
text-shadow: 2px 2px black;
}
</style>
</head>
<body>
<div id='title'>
<h1>Nupa's Page</h1>
<span class='subtitle'>A place to show off my projects.</span>
<h3>A place to show off my projects.</h3>
</div>
<div id='content'>
<h2>Stuff I've made:</h2>
<h3>Flistify</h3>
<p>
A script to bulk-resize images for an f-list gallery, using python and imagemagick.
</p>
<ul>
<li>Portal ZZT</li>
<li>The ZZT Nanogame Collection</li>
<li>Collabyrinth, a ZZT collab</li>
<li>My 2007 Homepage and drawings</li>
<li>flistify: a script to bulk-resize images for f-list</li>
<li>braceless-javascript: a subset of javascript that looks like lisp.</li>
</ul>
<h3>Braceless Javascript</h3>
<p>
A couple of short programs written in a subset of javascript. Specifically, javascript but you can't use anything with curly braces in it, like 'if' or 'for'. Instead, ternaries and lambdas give you all the flow control you need. Has a lispy flavor.
</p>
<h3>Portal ZZT</h3>
<p>
2008. A portal clone in the ZZT Engine.
</p>
<h3>ZZT Nanogames</h3>
<p>
2008. A collection of ZZT games that use only one screen each. Also includes <em>Eight Legged Express</em>, which I believe was made in one weekend as a challenge.
</p>
<h3>Collabyrinth</h3>
<p>
2008.
</p>
<h3>Traps and Zoids</h3>
<p>
2007.
</p>
</div>
</body>
</html>

29
style-1.css Normal file
View file

@ -0,0 +1,29 @@
html {
margin: 0 auto;
max-width: 80ch;
}
body {
background-image: url('images/magenta-tile-1.png');
background-size: 2rem;
color: white;
text-shadow: 2px 2px black;
font-family: sans-serif;
font-weight: bold;
max-width: 120ch;
}
h1, h3 {
text-align: center;
}
ul {
list-style: none;
padding-left: 0px;
}
li:before {
content: '●';
padding: 20px;
text-shadow: 2px 2px black;
}

29
style-2.css Normal file
View file

@ -0,0 +1,29 @@
html {
margin: 0 auto;
max-width: 80ch;
}
body {
background-image: url('images/magenta-tile-4.png');
background-size: 2rem;
color: darkgray;
text-shadow: 2px 2px black;
font-family: sans-serif;
font-weight: bold;
max-width: 120ch;
}
h1, h3 {
text-align: center;
}
ul {
list-style: none;
padding-left: 0px;
}
li:before {
content: '●';
padding: 20px;
text-shadow: 2px 2px black;
}

22
style-3.css Normal file
View file

@ -0,0 +1,22 @@
html {
margin: 0 auto;
max-width: 40rem;
}
body {
font-family: sans-serif;
background-color: black;
color: hotpink;
max-width: 120ch;
border: 1rem double purple;
padding: 1rem;
}
#title {
text-align: center;
}
.subtitle {
font-style: italic;
}