Howl-o, World!
Welcome to my web dev site! This is a place where I want to write and share as much as I can about web design. I'll be providing resources, guides, demos, and assets. Accessibility is also a top priority - so expect for my guides and resources to focus on that part of web design off the bat.
Please be patient, though. I'm just one person putting all of this together and won't always have the time to chip at this daily. Got lots of other stuff going on in my life too. Regardless, I'm dedicated to finally create this space I've wanted to create for a long time. I'm more confident in my understanding of accessibility to also make these guides wholly accessible for everyone.
I'm open to feedback in my Visitor Board from anyone of any walk of life. If you would like to bring something to my attention about the compatibility of my website with any devices (for accessibility or other niche uses) and any other issue, please submit your comment there! I'll appreciate it.
Website Progress
- Prepare color variables and some bare basic properties in the CSS
- Actually have a visual layout going
- A page for Web Design Fundamentals guide
- A page for HTML and CSS guides
- A parent page for my web dev projects and demos
- JavaScript implementations and features (including color settings)
Webpage's Birth: July 31st, 2023
Latest Update: August 21st, 2023
Test Paragraph
Our good friend: Lorem ipsum.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro facilis enim magnam nisi corporis nostrum ex in, dignissimos eum, vero amet quam tempore, nulla earum sit velit repellendus ab qui?
Testing Block Quote
"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi non, quo ab iusto amet animi ipsum dolores natus sapiente mollitia temporibus consequatur qui? Laboriosam natus ullam sed! Rerum, perspiciatis laudantium."
Testing Source Code Blocks
HTML:
<!--- This is how I make my "OS window" design on my Neocities site (Credit: WolfKat from wolfkat-webdev.neocities.org) --->
<article class="window window--classic">
<h1 class="window-title">Page/Window Title</h1>
<div class="inner-window">
<span id="article-top"></span>
<section>
<h2>Heading</h2>
<p>Content goes here! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi non, quo ab iusto amet animi ipsum dolores natus sapiente mollitia temporibus consequatur qui? Laboriosam natus ullam sed! Rerum, perspiciatis laudantium.</p>
<p class="back-to-top wolfOS-font--classic">
<a href="#article-top">Back to Top</a>
</p>
</section>
</div>
</article>
<!--- The window classes can be applied to <aside> elements as well for more windows! Be sure the "h1" window title is changed to "h2" as there shoud only be one h1 on an entire page. --->
<aside class="window window--classic">
<h2 class="window-title">Another Window Title</h2>
<a href="#" class="exit-button wolfOS-font--classic wolfOS-button--classic">X</a>
<div class="inner-window">
<span id="aside1-top"></span>
<section>
<h3>Heading</h3>
<p>Content goes here! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi non, quo ab iusto amet animi ipsum dolores natus sapiente mollitia temporibus consequatur qui? Laboriosam natus ullam sed! Rerum, perspiciatis laudantium.</p>
<p class="back-to-top wolfOS-font--classic">
<a href="#aside1-top">Back to Top</a>
</p>
</section>
</div>
</aside>CSS:
/* This gives the actual visual appearance and functions of my "OS window" design (Credit: WolfKat from wolfkat-webdev.neocities.org) */
*,
*::before,
*::after {
margin: 0;
padding: 0;
font: inherit;
box-sizing: border-box;
}
:root {
--color-black: #121212;
--color-white: #ebebeb;
/* Put in your own colors! */
--main-color: #323232; /* For backgrounds */
--aux-color: #232323;
--contrast-color: #fefefe; /* For text | Should contrast well against the main and aux colors */
--accent-color: #33ccff; /* Whatever pops out from main and aux! Use --color-white or --color-black for contrast when this is a background color behind text (like in my "window-title" class) */
--shadow-color: #111111;
--font-size--base: 20px;
--font-size--small: 0.9em;
--font-size--medium: 1.1em;
--font-size--large: 1.6em;
--font-size--largest: 2.2em;
--font-family--general: "Fanwood", Arial, Georgia;
--font-family--titles: "League Spartan", Helvetica, Tahoma;
--font-family--bulky-digital: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
--font-family--sleek-digital: "Orbitron", "Agency FB Bold", Arial, Helvetica, sans-serif;
--window-title-height: 1.5em;
}
body {
background-color: var(--aux-color);
color: var(--contrast-color);
font-family: var(--font-family--general);
font-size: var(--font-size--base);
line-height: 1.25em;
}
h1,
h2,
h3,
h4,
h5,
h6 {
display: block;
margin: 1.3em auto 1rem auto;
width: 90%;
font-family: var(--font-family--titles);
line-height: 1em;
text-wrap: balance;
text-align: center;
}
h1 {
margin: 1rem auto;
font-size: var(--font-size--largest);
}
h2 {
font-size: var(--font-size--large);
}
h3,
h4,
h5,
h6 {
font-size: var(--font-size--medium);
}
article,
aside {
display: block;
position: relative;
margin: 2rem auto;
width: 100%;
min-height: 8em;
max-height: 90vh;
}
.window p,
.window blockquote {
display: block;
width: 98%;
height: auto;
margin: 2em auto;
text-align: left;
}
.window p {
max-width: 75ch;
}
.window blockquote {
padding: 1em 0px;
max-width: 55ch;
border-width: 1px 0px;
border-style: solid;
border-color: var(--accent-color);
font-size: var(--font-size--medium);
font-style: italic;
letter-spacing: 1px;
line-height: 1.3em;
}
.window ol,
.window ul {
display: block;
margin: 1rem auto;
max-width: 45ch;
text-align: left;
}
.window ul {
list-style-type: none;
}
.window li {
margin: 0.9rem 0.2rem;
}
.window {
overflow: hidden;
display: flex;
/* Flex ensures that the inner-window contents aren't cut off from the overflow, as it won't fit into the scroll space without this. */
flex-direction: column;
padding: 0;
min-width: 45ch;
max-width: 70vw;
background-color: var(--main-color);
border-color: var(--accent-color);
box-shadow: 0px 0px 6px 0px var(--shadow-color);
}
/* The "classic" and "modern" classes are modular properties depending on the window styles you want */
.window--classic {
border-width: 6px;
border-style: ridge;
}
.window--modern {
border-width: 1px;
border-style: solid;
}
.window .window-title {
position: relative;
top: 0px;
left: 0px;
right: 0px;
padding: 0 1ch;
margin: 0px;
width: 100%;
height: var(--window-title-height);
background-color: var(--accent-color);
color: var(--color-black);
line-height: var(--window-title-height);
}
@media (prefers-color-scheme: light) {
.window .window-title {
color: var(--color-white);
}
}
.window--classic .window-title {
border-width: 0px;
border-style: ridge;
border-color: var(--accent-color);
border-bottom-width: 6px;
font-family: var(--font-family--bulky-digital);
}
/* Other modular style classes */
.wolfOS-font--classic {
font-family: var(--font-family--bulky-digital);
}
.wolfOS-font--modern {
font-family: var(--font-family--sleek-digital);
}
.wolfOS-button--classic {
border-style: outset;
border-width: 2px;
}
.wolfOS-button--modern {
border-style: solid;
border-width: 1px;
}
/* Screen size adjustments */
@media (max-width: 700px) {
.window {
margin: 5px auto;
min-width: 20ch;
max-width: 70ch;
}
}
.inner-window {
overflow: auto;
display: block;
position: relative;
padding: 1em 2em 0px 2em;
width: 100%;
height: 100%;
flex-grow: 1;
}
.window .back-to-top {
width: 99%;
height: 3em;
text-align: center;
}
.window .back-to-top a:link,
.window .back-to-top a:visited {
margin: 0px auto;
color: var(--accent-color);
font-size: var(--font-size--medium);
}
.exit-button:link,
.exit-button:visited {
display: block;
position: absolute;
top: 0px;
right: 0px;
padding: 0.5em 0.6em;
margin: 2px;
background-color: var(--main-color);
font-size: var(--font-size--medium);
line-height: 0.5em;
text-decoration: none;
text-align: center;
}