Just fired up my own server. I'm doug@dsserv.net

I am happy to help 😀

I did everything quickly, so I only did minor testing to make sure everything turned out all right. (I had family over at the time)

I'm hoping it gets you going in the right direction. I am also happy to answer questions or help fix things in the future!

Back in the late 2000s, I was in the Dallas Comic Con scene with a media badge. I was fortunate enough to get to meet some very interesting people. I think my favorite was Katee Sackhoff and Tricia Helfer from the Battlestar Galactica reboot. Genuinely good human beings, and funny. But, I always loved meeting the comic book artists. Just some of the most creative people, and many of them light up when you take notice of their work.

Song for the Forgotten Gate

At midnight’s hush, a rusted gate
Creaks softly as it contemplates
A thousand steps that passed before
Faded laughter, hopes, and more.
Alone it stands in weedy rest,
A silent guardian, at its best.

I wanted to ask everyone their opinions on site mascots!
If you have one why? If you don’ have one, why not?
What makes a good mascot for a site? What makes a bad mascot?
I want to hear all sorts of thoughts on site mascots so please leave your thoughts here for me!

I have several mascots, and I have a fictional organization they are a part of: The Department of Peculiar things. The penguin was created by my son, and the cat by my youngest daughter.



Lord Humphrey Slothington, Keeper of the Shacks
Professor Percival P. Pickle III, Ph.D.
Emperor Judias Penguinder XIII
Queen Snowy the Melodious

Since these are characters we've made up for random purposes around the house, it made sense to me to make them part of my little online world.

The culprit here is your header. You can fix it by changing your .header to a grid-column of 1/6

Code

.header {
    grid-column: 1/6; 
                
    background-repeat: no-repeat;
    background-size: contain;
}

Your entire CSS should look like this now:

Code

:root {
    --header-image: url("https://strange-things-happen.neocities.org/sth%20daytime.png");
    --content: #483457;
}
 
@font-face {
    font-family: PixelOperator;
    src: url(fonts/PixelOperator.ttf);
}
 
* {
    font-family: PixelOperator;
}
 
.parent {
    margin: auto;
    max-width: 940px;
    height: 700px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}
 
body {
    margin: auto;
    background-color: white;
    color: #B71887;
    background-image: url("https://strange-things-happen.neocities.org/sth%20bg%20night.png");
    image-rendering: pixelated;
    background-attachment: fixed;
    background-position: 25%;
    background-size: cover;
    background-repeat: no-repeat;
}
 
* {
    box-sizing: border-box;
}
 
#container {
    margin: auto;
    max-width: 100%;
    max-height: 880px;
}
 
.header {
    grid-column: 1/6;
    background-repeat: no-repeat;
    background-size: contain;
}
 
.header img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}
 
.two {
    display: grid;
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 2;
    grid-row-end: 5;
    z-index: 0;
    pointer-events: none;
}
 
 
#newsdiv {
    position: fixed;
    height: 150px;
    width: 100px;
    overflow: scroll;
    z-index: 9;
    background-color: grey;
    color: black;
    padding: 1px;
    right: 380px;
    top: 80px;
    cursor: pointer;
    border: outset;
    text-align: center;
    text-decoration: none;
}
 
#newsdiv::-webkit-scrollbar {
    width: 5px;
}
 
#newsdivHeader {
    height: 18px;
    cursor: move;
    z-index: 10;
    background: rgb(6, 9, 58);
    background: linear-gradient(90deg, rgba(6, 9, 58, 1) 0%, rgba(98, 13, 116, 1) 58%);
    text-align: center;
    color: white;
}
 
/* navigation section!! */
 
/* this colors BOTH sidebars
if you want to style them separately,
create styles for #leftSidebar and #rightSidebar */
aside {
    display: grid;
    grid-column: 2;
    grid-row: 2;
    background-color: #FBDD6E;
 
    width: 150px;
    padding: -1px;
    margin: 5px;
    /* this makes the sidebar text slightly smaller */
}
 
.sidebarbtn:hover {
    filter: hue-rotate(230deg);
}
 
#navigationButton {
    filter: grayscale(80%);
 
}
 
.sidebarbtn {
    border: groove #F8B175;
    display: flex;
}
 
 
/* this is the color of the main content area,
between the sidebars! */
 
main {
    display: grid;
    grid-column: 3 / 5;
    grid-row: 2 / 2;
    background: bottom;
    background-color: #EEB3FF;
    background-image: url("https://strange-things-happen.neocities.org/dandelions.png");
    background-size: 100%;
    background-repeat: no-repeat;
    color: #B71887;
    flex: 1;
    padding: 20px;
    margin: 5px;
    border-image: url("https://64.media.tumblr.com/47d4d7688278aee63436613bc8843674/fb978ef4c9e61e33-3e/s500x750/4f5f3b69a346a35014643b171c933f2ba1acbcca.png");
    border: 2px dashed #B71887;
    order: 2;
}
 
#innerbox {
    width: auto;
    position: relative;
    background-color: #edeab7;
    padding: 5px;
    padding-right: 20px;
    margin: auto;
    image-rendering: initial;
}
 
#innerboxb {
    background-color: #edeab7;
    overflow: scroll;
    margin: auto;
    width: 650px;
    padding: 5px;
    image-rendering: initial;
}
 
.collumn {
    float: left;
    width: 50%;
    padding: 5px;
}
 
.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 70%;
    text-align: center;
}
 
#musictv {
    display: grid;
    grid-column: 4;
    grid-row: 3;
    position: relative;
    z-index: 2;
    pointer-events: none;
}
 
#musicvideo {
    display: grid;
    grid-column: 4;
    grid-row: 3;
    z-index: 1;
    position: relative;
    align-items: center;
}
 
#chatbox {
    display: grid;
    grid-column: 2;
    grid-row: 3;
    width: 150px;
}
 
.gifsidebar {
    z-index: 2;
}
 
iframe {
    object-position: top;
}
 
/* 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: #EEB3FF;
    display: grid;
    grid-column: 2 / 5;
    grid-row: 4;
    width: auto;
    height: 45px;
    padding: 5px;
    margin: 5px;
    border: 2px dashed #B71887;
    text-align: center;
    align-items: center;
    z-index: 2;
}
 
#spacestamp {
    -position: center;
}
 
h1,
h2,
h3 {
    color: #B71887;
}
 
h1 {
    font-size: 25px;
}
 
strong {
    /* this styles bold text */
    color: #882D19;
}
 
/* this is just a cool box, it's the darker colored one */
.box {
    background-color: #F7D394;
    padding: 10px;
}
 
/* CSS for extras */
 
/* 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: 600px) {
    #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;
    }
}

I can say with absolute certainty that most of us back then had no idea that anything was being archived. I don't remember when I became aware of the Internet Archive's Wayback Machine, but I know I found some of my old stuff from the late 90s on there and being hit with a sense of nostalgia - even back then.

I am aware now, and would be honored if something I made was still being reused that far in the future.

And, I truly hope that this isn't just a one and done revival. Web 1.0 was the best web, full of creativity.

I have a strong case of ADHD with a bit of autism on the side. So I tend to have extremely strong interests that exist for brief periods of time. I would create something online only to tear it down not too long afterwards as I would move on to something else.

After about 25 years of doing this, I decided to just put all of my half baked ideas together and call it my shack.

And that is where Doug's Shack comes from.

The other names I went by online:

• silvercrest80 - because it was 1996 and I was big into D&D, fantasy, MtG, etc.
• Kefka - because I love Final Fantasy VI
• Astinus - the Dragonlance series was the first books to make me a reader
• Dubhghlas - my given name, Scottish-fied

My first console was the NES that I got for Christmas 1988. I got the Super Mario/Duck Hunt/Track Meet combo, Skate or Die, and Monster Party.

That was the beginning of a life long hobby obsession.

Won't you tell us a bedtime story about the old internet? (kidding! XD)

It was slow, colorful, and noisy. 😂 It truly was the wild west. Before the vile sorcery of search engine optimization.

It was like exploring a large house with a lot of nooks and places to hide.

We didn't know what we had until we lost it. Now most websites have about as much character as a cubical farm.

Greetings! My name is Doug and I've been using the Information Super Highway (laser sounds intensify!) in one form or another since 1996. After learning basic HTML, I created personal websites on all the happening spots: Geocities, Angelfire, and Tripod. I feel that those were the best days of the internet, before the corporate take over.

I am a toddler wrangler and diaper technician - though they're not that old anymore, a fan of all things tech, self-taught computer programmer, an amateur photographer, fanatic about sports, a gamer, and an ally. And, I am an advocate of the Personal Web (Web 1.0).

I am loving this idea of returning to the old ways! I can't even remember the last time I was on a forum.