css tweaks

src/index.md

@@ -2,6 +2,34 @@
 title: nycki.net
 ...
 
-## Hello World
+## welcome!
 
-lorem ipsum dolor sit amet.
+my name is Nycki ([ˈnɪki](http://ipa-reader.xyz/?text=%CB%88n%C9%AAki)), and [this is a website!](http://hrwiki.org/wiki/First_Time_Here%3F)
+
+## capitalization?
+
+yep, I'm doing the 'intentionally lowercase' thing. I like to reserve capital letters for names. more thoughts on this in my [cookbook](https://klay.gay/self-host).
+
+## contact
+
+some of these will change as I transition from my old internet name 'nupa' to my new one 'nycki'. it's just personal preference, I'll still answer to either name for the time being. oh yeah my pronouns are she/they now, thanks!
+
+- nupanick at google mail
+- <https://github.com/nycki93>
+- <https://cohost.org/nycki>
+- <https://www.reddit.com/user/nupanick>
+- <https://twitter.com/nupanick>
+
+## creations
+
+stuff I've made!
+
+### braceless javascript
+2018\. a couple of short programs written in browser JavaScript, with the special restriction that I can't use any instructions that require curly braces, like 'if' or 'for'. instead, I replace these instructions with ternaries and lambdas, which makes this a functional programming exercise!
+
+- [fizzbuzz](https://github.com/nycki93/braceless-javascript/blob/master/fizzbuzz.html)
+- [99 bottles](https://github.com/nycki93/braceless-javascript/blob/master/bottles.html)
+
+## todo
+
+- fill out the 'creations' section a bit more before publishing this

src/style.css

@@ -1,30 +1,25 @@
-@import 'xkcd-rgb.css';
+@import 'xkcd.css';
 
 :root {
+    --background: black;
+    --foreground: var(--xkcd-light-grey);
+    --link: var(--xkcd-steel-blue);
+
     font-family: sans-serif;
-    color: var(--xkcd-pale-magenta);
+    background-color: var(--background);
-    padding: 2rem;
+    color: var(--foreground);
-    background-color: black;
     max-width: 100ch;
-    margin: 0 auto;
+    margin: auto;
-}
+    padding: 1rem;
-
-h1 {
-    text-align: center;
-}
-
-div.subtitle {
-    text-align: center;
-    font-style: italic;
 }
 
 a {
-    color: var(--xkcd-magenta);
+    color: var(--link);
 }
 
-section {
+section.level2 {
     margin-top: 2ch;
-    border-top: 1.5ch double;
+    border-top: 1.5ch double var(--xkcd-magenta);
 }
 
 section img {

static/index.html

@@ -12,7 +12,7 @@
     <div class='subtitle'>A place to show off my projects.</div>
 </header>
 
-<section>
+<section class='level2'>
     <h2>Braceless Javascript</h2>
     <p>
         2018. 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. 
@@ -23,7 +23,7 @@
     </p>
     </section>
 
-<section>
+<section class='level2'>
     <h2>Flistify</h2>
     <p>
         2018. A script to bulk-resize images for an f-list gallery, using windows batch and imagemagick. 
@@ -33,7 +33,7 @@
     </p>
 </section>
 
-<section>
+<section class='level2'>
     <h2>Portal ZZT</h2>
     <p>
         2008. A portal clone in the ZZT Engine. Available at the Museum of ZZT.
@@ -43,7 +43,7 @@
     </p>
 </section>
 
-<section>
+<section class='level2'>
     <h2>ZZT Nanogames</h2>
     <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. 
@@ -53,7 +53,7 @@
     </p>
 </section>
 
-<section>
+<section class='level2'>
     <h2>Collabyrinth</h2>
     <img src='images/collabyrinth-title.png' alt='The title screen for the game Collabyrinth. The twelve letters of the word "COLLABYRINTH" are arranged in a 3 by 4 grid. Most of them are just an ordinary letter, but the O, L, L, Y, and R have been decorated in a variety of mismatched styles.'/>
     <p>
@@ -77,7 +77,7 @@
     </p>
 </section>
 
-<section>
+<section class='level2'>
     <h2>Traps and Zoids</h2>
     <img src='images/traps-and-zoids_home.png' alt='A screenshot of an old website. Red text on a light blue background says "Welcome to Nick.Lamicela.Org!". There is a compass rose at an angle, so that the letters read "NEWS" from top to bottom, and a link underneath says "News". There is a black and white cartoon face that looks like a folded boat or paper airplane, and a link underneath that says "Cartoons". At the bottom of the page is the text "Last Updated: 08/01/07.'>
     <p>