initial content commit

Adding the base template code (I hope), as well as CSS code and images

css/old.css

@@ -0,0 +1,55 @@
+/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
+   HTML content. To learn how to do something, just try searching Google for questions like
+   "how to change link color." */
+
+body {
+  /* background-color: white; */
+  color: white;
+  font-family: Verdana;
+  background-image: url("../img/backdrop_02.gif");
+}
+a:link{
+  color: #CCFF00;
+}
+a:hover{
+  color: #50BFE6;
+}
+a:visited{
+  color: #FF00CC;
+}
+a:active{
+  color: #FFFF66;
+}
+#container{
+  margin: 0 auto;   
+  width: 800px;
+  position: relative;
+}
+#content{
+  /* background-color: #0e2c5e; */
+  /* background-image: url("../img/carpet.png"); */
+  width: 800px;
+  /* text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; */
+}
+.sectionHeading {
+  width: 800px;
+  height: 25px;
+  background-image: url("../img/bluetexture.gif");
+  background-color: #50BFE6;
+  text-align: center;
+  font-weight: bolder;
+  margin-top: 50px;
+  padding-top: 5px;
+  position:absolute;
+  left: 50%;
+  transform: translate(-50%);
+  /* color: green; */
+}
+
+.section {
+  padding-top: 50px;
+}
+
+DEL{
+    text-decoration: line-through;
+}

css/scrollbar.css

@@ -0,0 +1,38 @@
+/* Inspiration taken from cameronsworld.net, a great site. I made the scrollbar buttons myself. You can use this on your site. */
+::-webkit-scrollbar {
+    width: 15px;
+    height: 15px;
+    background-color: #000;
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACAQMAAABIeJ9nAAAABlBMVEX////AwMCU81DAAAAADElEQVQIHWNoYHAAAAHEAMEKQ169AAAAAElFTkSuQmCC);
+    background-size: 2px;
+  }
+  ::-webkit-scrollbar-track {
+  }
+  ::-webkit-scrollbar-thumb {
+    background-color: silver;
+    border-left: ridge 2px #fff;
+    border-top: ridge 2px #fff;
+    border-right: ridge 2px grey;
+    border-bottom: ridge 2px grey;
+  }
+  ::-webkit-scrollbar-thumb:active {
+    background-color: #d0d0d0;
+  }
+  ::-webkit-scrollbar-button {
+    background-color: darkgrey;
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAAPBAMAAABKPLFCAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAIVBMVEUAAACGhILr6ulbWlqop6ddXV0hISHk4+MAAABubm3///8cDMtbAAAAAXRSTlMAQObYZgAAAAFiS0dECmjQ9FYAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfgChMNNQqYsOkJAAAAfElEQVQY02MQhAABQRTAABVlEFICA0EIpYjGpZ60CUTaGcoNQpVWTodIlxmBuaqtEGl3JXUnED+sCCKtngqWNptmBJY2KwKqF1RS7YTZPSMIyFVOV08GSytnJith6lYpUiqB2B0RhM1uuMtVsbucusGCTZoRJYpgACoqCABTOTzVZ8THeQAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxNi0xMC0xOVQxNTo1MToyOCswMjowMPJE7xwAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTYtMTAtMTlUMTU6NTE6MjgrMDI6MDCDGVegAAAAAElFTkSuQmCC);
+    width: 15px;
+    height: 15px;
+  }
+  ::-webkit-scrollbar-button:vertical:start {
+    background-position: -45px 0;
+  }
+  ::-webkit-scrollbar-button:vertical:end {
+    background-position: 0 0;
+  }
+  ::-webkit-scrollbar-button:horizontal:start {
+    background-position: -15px 0;
+  }
+  ::-webkit-scrollbar-button:horizontal:end {
+    background-position: -30px 0;
+  }

css/style.css

@@ -0,0 +1,265 @@
+/* user styles */
+
+            /* styles are what change the color and sizes of stuff on your site. */
+
+            /* these are variables that are being used in the code
+    these tended to confuse some people, so I only kept 
+    the images as variables */
+
+    :root {
+      --header-image: url('https://sadhost.neocities.org/images/layouts/wp.jpeg');
+      --body-bg-image: url('../img/background.jpg');
+
+      /* colors */
+      --content: #43256E;
+  }
+
+  /* if you have the URL of a font, you can set it below */
+  /* feel free to delete this if it's not your vibe */
+
+  /* this seems like a lot for just one font and I would have to agree 
+but I wanted to include an example of how to include a custom font.
+If you download a font file you can upload it onto your Neocities
+and then link it! Many fonts have separate files for each style
+(bold, italic, etc. T_T) which is why there are so many!
+
+*/
+
+  @font-face {
+      font-family: Nunito;
+      src: url('Nunito-Regular.ttf');
+  }
+
+  @font-face {
+      font-family: Nunito;
+      src: url('Nunito-Bold.ttf');
+      font-weight: bold;
+  }
+
+  @font-face {
+      font-family: Nunito;
+      src: url('Nunito-Italic.ttf');
+      font-style: italic;
+  }
+
+  @font-face {
+      font-family: Nunito;
+      src: url('Nunito-BoldItalic.ttf');
+      font-style: italic;
+      font-weight: bold;
+  }
+
+  body {
+      font-family: 'Nunito', sans-serif;
+      margin: 0;
+      background-color: #08031A;
+      color: #fceaff;
+      background-image: var(--body-bg-image);
+  }
+
+  * {
+      box-sizing: border-box;
+  }
+
+  /* below this line is CSS for the layout */
+
+  #container {
+      max-width: 900px;
+      margin: 0 auto;
+  }
+
+  /* the area below is for all links on your page
+EXCEPT for the navigation */
+  #container a {
+      color: #ED64F5;
+      font-weight: bold;
+      /* if you want to remove the underline
+you can add a line below here that says:
+text-decoration:none; */
+  }
+
+  #header {
+      width: 100%;
+      background-color: #5e4e8c;
+      /* header color here! */
+      height: 150px;
+      /* this is only for a background image! */
+      /* if you want to put images IN the header, 
+you can add them directly to the <div id="header"></div> element! */
+      background-image: var(--header-image);
+      background-size: 100%;
+  }
+
+  /* navigation section!! */
+  #navbar {
+      height: 40px;
+      background-color: #13092D;
+      /* navbar color */
+      width: 100%;
+  }
+
+  #navbar ul {
+      display: flex;
+      padding: 0;
+      margin: 0;
+      list-style-type: none;
+      justify-content: space-evenly;
+  }
+
+  #navbar li {
+      padding-top: 10px;
+  }
+
+  /* navigation links*/
+  #navbar li a {
+      color: #ED64F5;
+      /* navbar text color */
+      font-weight: 800;
+      text-decoration: none;
+      /* this removes the underline */
+  }
+
+  /* navigation link when a link is hovered over */
+  #navbar li a:hover {
+      color: #a49cba;
+      text-decoration: underline;
+  }
+
+  #flex {
+      display: flex;
+  }
+
+  /* this colors BOTH sidebars
+if you want to style them separately,
+create styles for #leftSidebar and #rightSidebar */
+  aside {
+      background-color: #241445;
+      width: 200px;
+      padding: 20px;
+      font-size: smaller;
+      /* this makes the sidebar text slightly smaller */
+  }
+
+
+  /* this is the color of the main content area,
+between the sidebars! */
+  main {
+      background-color: #43256E;
+      flex: 1;
+      padding: 20px;
+      order: 2;
+  }
+
+  /* what's this "order" stuff about??
+allow me to explain!
+if you're using both sidebars, the "order" value
+tells the CSS the order in which to display them.
+left sidebar is 1, content is 2, and right sidebar is 3! */
+
+  */ #leftSidebar {
+      order: 1;
+  }
+
+  #rightSidebar {
+      order: 3;
+  }
+
+  footer {
+      background-color: #13092D;
+      /* background color for footer */
+      width: 100%;
+      height: 80px;
+      padding: 10px;
+      text-align: center;
+      /* this centers the footer text */
+  }
+
+  h1,
+  h2,
+  h3 {
+      color: #ED64F5;
+  }
+
+  h1 {
+      font-size: 25px;
+  }
+
+  strong {
+      /* this styles bold text */
+      color: #ED64F5;
+  }
+
+  /* this is just a cool box, it's the darker colored one */
+  .box {
+      background-color: #13092D;
+      border: 1px solid #ED64F5;
+      padding: 10px;
+  }
+
+  /* CSS for extras */
+
+  #topBar {
+      width: 100%;
+      height: 30px;
+      padding: 10px;
+      font-size: smaller;
+      background-color: #13092D;
+  }
+
+
+  /* BELOW THIS POINT IS MEDIA QUERY */
+
+  /* so you wanna change the width of your page? 
+by default, the container width is 900px.
+in order to keep things responsive, take your new height,
+and then subtrack it by 100. use this new number as the 
+"max-width" value below
+*/
+
+  @media only screen and (max-width: 800px) {
+      #flex {
+          flex-wrap: wrap;
+      }
+
+      aside {
+          width: 100%;
+      }
+
+      /* the order of the items is adjusted here for responsiveness!
+since the sidebars would be too small on a mobile device.
+feel free to play around with the order!
+*/
+      main {
+          order: 1;
+      }
+
+      #leftSidebar {
+          order: 2;
+      }
+
+      #rightSidebar {
+          order: 3;
+      }
+
+      #navbar ul {
+          flex-wrap: wrap;
+      }
+  }
+
+  /* Custom Things */
+  li.new {
+    list-style-image: url("../img/new.gif");
+    list-style-type: square;
+  }
+  ul.nobull {
+    list-style-type: none;
+  }
+  .bamboo {
+    background-image: url("../img/bamboo_bar_brown.jpg");
+    width: 75%;
+   height: 7px;
+   background-repeat: repeat-x;
+   position: absolute;
+   left: 50%;
+   transform: translate(-50%);
+  }

index-template.html

@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
+<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
+<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
+<!--[if gt IE 8]>      <html class="no-js"> <!--<![endif]-->
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <title>[[*pagetitle]]</title>
+        <meta name="description" content="">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="author" href="humans.txt" />
+        <link rel="stylesheet" href="css/style.css"> <!-- main stylesheet -->
+        <link rel="stylesheet" href="css/scrollbar.css"> <!-- custom scrollbar -->
+    </head>
+    <body>
+        <div id="container">
+            <div id="headerArea">
+                <div id="header" style="height: 249px;"></div>
+                <nav id="navbar" style="margin-bottom: 0px;">
+                    <ul>
+                        <li><a href="/">Home</a></li>
+                        <li><a href="about-me.html">About</a></li>
+                        <!-- <li><a href="#">Blog</a></li> --> <!-- Uncomment when I have a blog I want to share -->
+                        <li><a href="links.html">Links</a></li>
+                        <li><a href="shrines.html">Shrines</a></li>
+                        <li><a href="manifesto.html">Manifesto</a></li>
+                        <!-- <li><a href="#">Sitemap</a></li> -->
+                    </ul>
+                </nav>
+            </div>
+
+            <div id="flex">
+                <!-- START OF THE SIDEBAR -->
+                <aside id="leftSidebar" style="margin-right: 0px;">
+                    <h2>Updates</h2>
+                    <div class="box">
+                        <p>My Most Recent Updates Are Found Here! (For more real-time stuff, check the Mastodon account linked on the right)</p>
+                        <ul style="padding-left:10px;">
+                            <li>Rebuilt this site using tools from <a href="https://sadgrl.online/" target="_blank">Sadgrl</a></li>
+                            <li>Built a MTG Deck with input from friends based around Demons, Devils, and Tieflings</li>
+                            <li>I joined Mastodon, finally.</li>
+                        </ul>
+                    </div>
+                    <!-- <h2>Hi there!</h2>
+                    <p>(fill this in)</p>
+                    <h3>Other Tools</h3>
+                    <ul>
+                        <li></li>
+                    </ul> -->
+                    <h2>Have some 88x31s</h2>
+                    <p>Context: These are either links to tools or websites I like, or just neat fucking images. Hover over them!</p>
+                    <ul class="nobull">
+                        <li><img src="img/got_html.gif"></li>
+                        <li><a href="https://code.visualstudio.com/" target="_blank"><img src="img/vscbutton.gif"></a></li>
+                        <li><a href="humans.txt"><img src="img/humanstxt-isolated-blank.gif"></a></li>
+                        <li><img src="img/discord.gif" title=""></li>
+                        <li><img src="img/nonbinary.png" title="they/them"></li>
+                        <li><a href="https://www.mozilla.org/en-US/firefox/new/"><img src="img/firefox2.gif"></a></li>
+                        <li><a href="https://store.steampowered.com" target="_blank"><img src="img/steam.gif" title="Play games with people!"></a></li>
+                        <li><a href="https://yesterweb.org/" target="_blank"><img src="https://yesterweb.org/img/button.png" alt="a button that says Yesterweb Reclaim The Net" /></a></li>
+                        <li><a rel="me" href="https://tech.lgbt/@nexxy"><img src="img/mastodon.gif"></a></li>
+                    </ul>
+                </aside>
+                <!-- END OF THE SIDEBAR -->
+                <main>
+                    [[*pageContent]]
+                </main>
+                
+            </div>
+            <footer id="footer" style="margin-top: 0px;"><a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png" /></a><br /><a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a> | Nexan 2020-2022</footer>
+            
+        </div>
+        <!--[if lt IE 7]>
+            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
+        <![endif]-->
+    </body>
+</html>