32bitcafe
/
32bit.cafe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

initial work to convert to Hugo

This commit is contained in:
yequari 2024-04-30 17:33:01 -07:00
parent 22c8b48370
commit 382d9b86ff
81 changed files with 3035 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
archetypes/default.md Normal file
View File

@ -0,0 +1,5 @@
+++
title = '{{ replace .File.ContentBaseName "-" " " | title }}'
date = {{ .Date }}
draft = true
+++

9
content/_index.html Normal file
View File

@ -0,0 +1,9 @@
<img src="bitty.png" style="float: right; width: 50%; padding: 10px;" title="Bitty the Kitty, created by community member Surge" alt="Bitty the Kitty, created by community member Surge">
<section>
<p>You made it! Welcome to the 32-Bit Cafe. We're a community of like-minded website hobbyists and professionals helping to make the personal web fruitful and bountiful again, full of self-expression and removing the capitalistic drive out of it. Want to get out of the same cycle of bouncing between different social media? Us too, that's why we're working together to change how we live digitally and online.</p>
<p>Want to read more about <a href="../mission">what we do</a>? Or <a href="../updates/">see what we've been up to</a>!</p>
</section>
<section>
<p>This site is under construction, and anything not linked is coming soon! Please send any glaring errors to <a href="/cgi-bin/m.php?user=" data-user="ardnax" class="rev">e<!---->fac.tib23[t&#x430;]ardnax</a> or <a class="rev" href="/cgi-bin/m.php?user=" data-user="eelyak">efac.tib23[t&#x430;]eelya<!---->k</a>.</p>
</section>
<div style="clear: both;"></div>

14
content/about.html Normal file
View File

@ -0,0 +1,14 @@
<h2>Our History</h2>
<section>
<p>The 32-Bit Cafe originally started as an adults-only <a href="../discord/">Discord server</a> in autumn 2022. With the 2000s and Y2K trends growing among a younger generation, notable websites of what's been called the "old web" have been a great way to get younger folks acquainted with the idea of building websites as a hobby. There hadn't really been many chatrooms for adults to converge in safe-for-work discussions about the webweaving, webcrafting, website-building hobby that focuses on self-expression and art without heavily focusing on that "old web" aesthetic or focusing on nostalgia. We wanted to be driven, productive, and focused about building up the personal web, so we thought we'd double-down on our own community of folks to do just that.</p>
<p>The 32-Bit Cafe, we learned, isn't unique. There are so many communities around the web who are driving the idea of getting more people to build websites, self-host their own instances of services, and help rebuild the independent web. We're one of many, but we're happy to be part of the movement of getting people to take back their sides of the internet. In order for this to work collectively, we believe decentralized communities are the way to achieve our goal of increasing the size of the independent web.</p>
</section>
<section>
<p>The Discord was started by <a href="https://xandra.cc" target="_blank">Alexandra</a>. <a href="https://kaylee.wtf" target="_blank">Kaylee</a> began moderating the Discord and providing the backend technical knowledge in order to turn the 32-Bit Cafe into a community project, taking the next step of helping others discover and grow this side of the web. We want to offer de-corporatized alternatives to popular services to help unplug from the corporate internet and help guide folks to express themselves on the web.</p>
<p><a href="https://keysklubhouse.com" target="_blank">Key</a> and <a href="https://flamedfury.com" target="_blank">fLaMEd</a> also help moderate the Discord, providing the backbone for our moderation team to be able to make the 32-Bit Cafe a welcoming and encouraging place to build community and talk about building websites. <a href="https://transrats.neocities.org/" target="_blank">Jay</a> and <a href="https://yequari.com" target="_blank">Yequari</a> joined the moderation team in October 2023.</p>
<p>While the Discord server is still adults-only, anyone is able to participate in events or aspects on the website, which are accessible by form submission. A great first step to getting involved is to <a href="../cyowebsite/">create your own website</a>. Be safe on the web, and express yourself!</p>
</section>

24
content/community.md Normal file
View File

@ -0,0 +1,24 @@
+++
title = 'Community'
date = 2024-04-30T08:41:29-07:00
+++
- [my.32bit.cafe](https://my.32bit.cafe)
- [Discourse Forum](https://discourse.32bit.cafe)
- [Discord](/discord)
- [Tilde Server](https://tilde.32bit.cafe)
- [32-Bit Recipe Book](/cookbook)
## Free Services
- [@32bit.cafe Email](https://webmail.32bit.cafe)
- [Etherpad Collaborative Docs](https://my.32bit.cafe/etherpad)
- [RSS Reader](https://rss.32bit.cafe)
- [Git Server](https://git.32bit.cafe)
## Get Involved
- [Advertising Network](/advertising)
- [Project Teams](/projectteams)
- [Submit a Website Theme](/themes)
- [Link to 32-Bit Cafe](/linktous)

14
content/events/index.html Normal file
View File

@ -0,0 +1,14 @@
---
title: Events
---
<ul>
<li><a href="/spring23">Spring 2023</a></li>
<li><a href="https://nft.32bit.cafe/" target="_blank">April Fools 2023</a></li>
<li><a href="/pride23">Pride 2023</a></li>
<li><a href="https://tilde.32bit.cafe/~hermit/community_jam_1/" target="_blank">July 2023 Code Jam</a></li>
<li><a href="https://tilde.32bit.cafe/~hermit/community_jam_2/" target="_blank">August 2023 Code Jam</a></li>
<li><a href="https://tilde.32bit.cafe/~slug/events/halloween-2023/" target="_blank">Halloween 2023</a></li>
<li><a href="https://32bit.cafe/holidays2023" target="_blank">Holidays 2023</a></li>
<li><a href="https://tilde.32bit.cafe/~ribose/events/valentines2024/" target="_blank">Valentine's Day 2024</a></li>
<li><a href="https://tilde.32bit.cafe/~hermit/community_jam_3/" target="_blank">March 2024 Code Jam</a></li>
</ul>

BIN
content/events/pride23/badge.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
content/events/pride23/bg.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

214
content/events/pride23/index.php Normal file
View File

@ -0,0 +1,214 @@
<?php include('../includes/header.php'); ?>
<style>
.main {
background: url(bg.jpeg);
background-repeat: repeat;
}
form {
text-align: center;
}
input, textarea {
width: 30vw;
}
.main-content {
background-color: #FFF;
padding: 10px;
font-family: Arial, sans serif;
color: #000;
}
.main-content strong {
color: orange;
}
.main-content p, li {
font-size: 11pt;
}
.main-content h2 {
color: #FF595E;
text-align: center;
cursor: default;
}
.main-content h2:hover {
color: #FFCA3A;
cursor: default;
}
.main-content ul {
list-style: none;
}
.field {
font-family: Arial, sans serif;
font-size: 10pt;
font-weight: bold;
color: #1982C4;
line-height: 16pt;
}
.field label {
color: #FFF;
background-color: #8AC926;
padding: 2px 5px;
line-height: 20pt;
}
.field sup {
opacity: 0.5;
}
input, textarea {
background-color: #1982C4;
border: 1px solid #410647;
color: #FFF;
font-family: Arial, sans serif;
font-size: 8pt;
letter-spacing: 0.5pt;
line-height: 11pt;
outline: none;
}
textarea {
height: 10vh;
}
.column img {
width: 100%;
padding: 10px;
background-color: #f2ccc3;
border: 1px #d3ab9e dashed;
}
.gallery {
background-color: #fde2e4;
text-align: center;
}
.gallery strong {
color: #cfbaf0;
font-size: 0.9rem;
}
.gallery p {
color: #52b2cf;
font-size: 8.5pt;
line-height: 10pt;
}
.gallery h4 {
color: #ff9b85;
text-align: center;
}
.row:after {
content: "";
display: table;
clear: both;
}
form {
margin: 0 auto;
text-align: center;
}
.button {
display: inline-block;
width: 15vw !important;
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
border: 1px solid #000 !important;
color: #FFF;
font-weight: bold !important;
padding: 15px 32px;
text-align: center;
text-decoration: none !important;
font-size: 16pt !important;
text-shadow: #000 2px 2px;
text-transform: uppercase;
}
.button:hover {
border: 1px solid #000 !important;
color: #FFF !important;
font-weight: bold !important;
text-align: center;
text-decoration: none !important;
letter-spacing: 2px;
}
thead {
text-align: center;
font-weight: bold;
background-color: #F1F1F1;
}
td {
padding: 5px;
border: 1px solid #000;
}
* {
scrollbar-width: auto;
scrollbar-color: #d7c0d0 #ffffff;
}
*::-webkit-scrollbar {
width: 8px;
}
*::-webkit-scrollbar-track {
background: #ffffff;
}
*::-webkit-scrollbar-thumb {
background-color: #d7c0d0;
border-radius: 0px;
border: 0px none #ffffff;
}
@media screen and (max-width: 600px) {
.gallery strong {
display: none;
}
}
</style>
<section class="main-content">
<h2>🌈 32-bit cafe pride '23 event 🌈</h2>
<section>
<p>a huge part of the personal web is self-expression and unapologetically being who you are. our community voted to have a <strong>pride zine</strong> for our mid-year event! submissions were open until may 31st, 2023. <strong>missed the deadline?</strong> reach out to <a href="mailto:xandra@32bit.cafe">xandra</a> to have your entry included.</p>
</section>
<section>
<p align="center"><a href="zine.php" target="_new" class="button">read the zine!</a></p>
</section>
<section>
<h3 style="text-align: center;">table of contents</h3>
<p align="center">
<table>
<thead>
<td>author</td>
<td>description</td>
</tr>
</thead>
<tr>
<td><a href="https://transrats.neocities.org/click/pride23" target="_new">Jay</a></td>
<td>A little collection of all the queer parts of my website :)</td>
</tr>
<tr>
<td><a href="https://lostletters.neocities.org/pride" target="_new">Lost Letters</a></td>
<td>This interactive work focuses on my pansexuality, but also explores themes of self-love / self-determination, intersectional identities, and queer allyship.</td>
</tr>
<tr>
<td><a href="https://pride23.flamedfury.com" target="_new">fLaMEd</a></td>
<td>A brief look into Pride in Aotearoa (New Zealand). Make sure you scroll down!</td>
</tr>
<tr>
<td><a href="http://sbcv.co.uk/index.md" target="_new">J</a></td>
<td>A university essay I wrote (and wish I had a higher word count for), detailing the negative ways BBC news represents transgender people in one article, and the impact this has on the the transgender community and perceptions of it as a whole.</td>
</tr>
<tr>
<td><a href="https://avas.space/magnetpoetry/" target="_new">Ava</a></td>
<td>i created a magnet poetry page for pride. the selection of words expresses a lot of aspects, characteristics and identities within the lgbtq community from my perspective, and through the possibility of combining them freely, is giving people a way to express their experiences and own relation to the community and pride. underneath the word selection and fridge is an example section that as of now contains three examples of magnet poetry created on the site, but more will be added when i make more or receive some from others!</td>
</tr>
<tr>
<td><a href="https://space-bar.neocities.org/pride23" target="_new">Cris</a></td>
<td>A short story about a small-town bar.</td>
</tr>
<tr>
<td><a href="https://blog.carlbettis.com/2023-pride.html" target="_new">Carl Bettis</a></td>
<td>The brand new Pride category of my personal blog, Random Modulation. I'll be adding to it throughout the month. For the initial post, a relevant poem of mine.</td>
</tr>
<tr>
<td><a href="https://keysklubhouse.com/pride2023" target="_new">CooperationIsKey</a></td>
<td>I'm sort of obsessed with rainbows. To the point that I have a bunch of stuff that's rainbow-themed, from clothes to toys to my beach chair. So for Pride 2023, I decided to share my collection with the world!</td>
</tr>
<tr>
<td><a href="https://xandra.cc/pride2023" target="_new">Alexandra</a></td>
<td>an emotional expression from the receiving end of bisexual erasure.</td>
</tr>
<tr>
<td>Mikka</td>
<td>For pride month this year, I've made a website which debunks the most common claims made against transgender individuals using multiple sources to invalidate such claims.<br>
<em>Currently Offline</em></td>
</table>
</p>
</section>
<?php include('../includes/footer.php'); ?>

32
content/events/pride23/main_zine.php Normal file
View File

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: url(bg.jpeg);
background-repeat: repeat;
font-family: Arial, sans serif;
color: #000;
}
h1 {
text-align: center;
}
p {
background-color: #FFF;
padding: 10px;
width: 60vw;
margin: 0 auto;
}
</style>
</head>
<body>
<h1>The 32-Bit Cafe Pride 2023 Zine</h1>
<p>Welcome to the Pride 2023 zine! This was an event that was organized by the event planners of the 32-Bit Cafe and contributed to by members of the community. For a table of contents, please go to the <a href="https://32bit.cafe/pride23">32-Bit Cafe event page</a>.</p>
<p>Use the left and right buttons in the frame above to navigate through the entries of the zine.</p>
<p>For this zine, the members of 32-Bit Cafe organized various forms of self-expression to celebrate their LGBTQIA+ pride, utilizing our websites to express something about queerness for Pride:</p>
<p>Make a poem on Ava's fridge. Read through the scholarship of Jay's essay. Check out Key's rainbow collection. Peruse Alexandra's prose about how she feels about bisexual erasure. Learn about how Aotearoa (New Zealand) celebrates Pride from fLaMEd. Browse through queer sections of Jay and Carl's websites. Click and drag through Lost Letters' memories. Read Cris' short story about a small-town bar.</p>
<p>We hope you enjoy! <strong>Happy Pride!</strong></p>
</body>
</html>

123
content/events/pride23/sent.php Normal file
View File

@ -0,0 +1,123 @@
<?php include('../includes/header.php'); ?>
<style>
.main {
background: url(bg.jpeg);
background-repeat: repeat;
}
form {
text-align: center;
}
input, textarea {
width: 30vw;
}
.main-content {
background-color: #FFF;
padding: 10px;
font-family: Arial, sans serif;
color: #000;
}
.main-content strong {
color: orange;
}
.main-content p, li {
font-size: 11pt;
}
.main-content h2 {
color: #FF595E;
text-align: center;
cursor: default;
}
.main-content h2:hover {
color: #FFCA3A;
cursor: default;
}
.main-content ul {
list-style: none;
}
.field {
font-family: Arial, sans serif;
font-size: 10pt;
font-weight: bold;
color: #1982C4;
line-height: 16pt;
}
.field label {
color: #FFF;
background-color: #8AC926;
padding: 2px 5px;
line-height: 20pt;
}
.field sup {
opacity: 0.5;
}
input, textarea {
background-color: #1982C4;
border: 1px solid #410647;
color: #FFF;
font-family: Arial, sans serif;
font-size: 8pt;
letter-spacing: 0.5pt;
line-height: 11pt;
outline: none;
}
textarea {
height: 10vh;
}
.gallery {
background-color: #fde2e4;
text-align: center;
}
.gallery strong {
color: #cfbaf0;
font-size: 0.9rem;
}
.gallery p {
color: #52b2cf;
font-size: 8.5pt;
line-height: 10pt;
}
.gallery h4 {
color: #ff9b85;
text-align: center;
}
.row:after {
content: "";
display: table;
clear: both;
}
form {
margin: 0 auto;
text-align: center;
}
* {
scrollbar-width: auto;
scrollbar-color: #d7c0d0 #ffffff;
}
*::-webkit-scrollbar {
width: 8px;
}
*::-webkit-scrollbar-track {
background: #ffffff;
}
*::-webkit-scrollbar-thumb {
background-color: #d7c0d0;
border-radius: 0px;
border: 0px none #ffffff;
}
@media screen and (max-width: 600px) {
.gallery strong {
display: none;
}
}
</style>
<section class="main-content">
<h2>🌈 32-bit cafe pride '23 event 🌈</h2>
<section>
<p>your submission has been entered! thank you for participating!</p>
<p>for your participation, feel free to add this to your site linking back to the event page: <img src="badge.png"></p>
<p align="center"><a href="../pride23/index.php">go back</a></p>
</section>
<?php include('../includes/footer.php'); ?>

49
content/events/pride23/top_frame.php Normal file
View File

@ -0,0 +1,49 @@
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #FFF;
font-family: Arial, sans serif;
color: #000;
overflow: hidden;
}
a {
padding: 10px;
color: #343a40;
}
a:hover {
background-color: #FFF;
color: #000;
text-decoration: none;
}
</style>
</head>
<body>
<p align="center">
<a name="link1"></a><br><a href="https://transrats.neocities.org/click/pride23" target="main" onclick="self.location.href = '#link2'">Start!</a>
<br><br><br><br><br><br>
<a name="link2"></a><br><a href="https://lostletters.neocities.org/pride" target="main" onclick="self.location.href = '#link3'">Next</a> | <a href="main_zine.php" target="main" onclick="self.location.href = '#link1'">Previous</a>
<br><br><br><br><br><br>
<a name="link3"></a><br><a href="https://pride23.flamedfury.com/" target="main" onclick="self.location.href = '#link4'">Next</a> | <a href="https://transrats.neocities.org/click/pride23" target="main" onclick="self.location.href = '#link2'">Previous</a>
<br><br><br><br><br><br>
<a name="link4"></a><br><a href="https://sbcv.co.uk/index.md" target="main" onclick="self.location.href = '#link5'">Next</a> | <a href="https://lostletters.neocities.org/pride" target="main" onclick="self.location.href = '#link3'">Previous</a>
<br><br><br><br><br><br>
<a name="link5"></a><br><a href="https://avas.space/magnetpoetry/" target="main" onclick="self.location.href = '#link6'">Next</a> | <a href="https://pride23.flamedfury.com/" target="main" onclick="self.location.href = '#link4'">Previous</a>
<br><br><br><br><br><br>
<a name="link6"></a><br><a href="https://space-bar.neocities.org/pride23" target="main" onclick="self.location.href = '#link7'">Next</a> | <a href="https://sbcv.co.uk/index.md" target="main" onclick="self.location.href = '#link5'">Previous</a>
<br><br><br><br><br><br>
<a name="link7"></a><br><a href="https://blog.carlbettis.com/2023-06-11-pride.html" target="main" onclick="self.location.href = '#link8'">Next</a> | <a href="https://avas.space/magnetpoetry/" target="main" onclick="self.location.href = '#link6'">Previous</a>
<br><br><br><br><br><br>
<a name="link8"></a><br><a href="https://keysklubhouse.com/pride2023" target="main" onclick="self.location.href = '#link9'">Next</a> | <a href="https://space-bar.neocities.org/pride23" target="main" onclick="self.location.href = '#link7'">Previous</a>
<br><br><br><br><br><br>
<a name="link9"></a><br><a href="https://xandra.cc/pride2023" target="main" onclick="self.location.href = '#link10'">Next</a> | <a href="https://sbcv.co.uk/index.md" target="main" onclick="self.location.href = '#link8'">Previous</a>
<br><br><br><br><br><br>
<a name="link10"></a><br><a href="main_zine.php" target="main" onclick="self.location.href = '#link1'">Next</a> | <a href="https://keysklubhouse.com/pride2023" target="main" onclick="self.location.href = '#link9'">Previous</a>
<br><br><br><br><br><br>
</p>
</body>
</html>

17
content/events/pride23/zine.php Normal file
View File

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html>
<head>
<title>The 32-Bit Cafe Pride 2023 Zine</title>
</head>
<frameset rows = "8%,92%" border="0">
<frame name = "top" src = "top_frame.php" />
<frame name = "main" src = "main_zine.php" />
<noframes>
<body>Your browser does not support frames. Please visit the <a href="../pride23/index.php">Table of Contents</a>.</body>
</noframes>
</frameset>
</html>

BIN
content/events/spring23/1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 137 KiB

BIN
content/events/spring23/2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 187 KiB

BIN
content/events/spring23/3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 233 KiB

BIN
content/events/spring23/4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 66 KiB

BIN
content/events/spring23/5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 349 KiB

BIN
content/events/spring23/6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 115 KiB

BIN
content/events/spring23/7.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 456 KiB

BIN
content/events/spring23/8.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 107 KiB

201
content/events/spring23/index.html Normal file
View File

@ -0,0 +1,201 @@
---
title: 🌸 32-bit cafe spring '23 event 🌸
aliases:
- /spring23
---
<style>
.main {
background: url(spring-bg.gif);
background-repeat: repeat;
}
@media screen and (max-width: 600px) {
.form {
width: 45vw;
}
input, textarea {
width: 40vw;
}
}
@media screen and (min-width: 600px) {
.form {
width: 18vw;
}
input, textarea {
width: 15vw;
}
}
.main-content {
background-color: #FFF;
padding: 10px;
font-family: Verdana, sans serif;
}
.main-content strong {
color: #73956F;
}
.main-content p, li {
font-size: 11pt;
}
.main-content h2 {
color: #410647;
text-align: center;
cursor: default;
}
.main-content h2:hover {
color: #AF1B3F;
cursor: default;
}
.main-content ul {
list-style: none;
}
.field {
font-family: Verdana, sans serif;
font-size: 10pt;
font-weight: bold;
color: #410647;
line-height: 16pt;
}
.field label {
color: #FFF;
background-color: #AF1B3F;
padding: 2px 5px;
line-height: 20pt;
}
.field sup {
opacity: 0.5;
}
input, textarea {
background-color: #D7C0D0;
border: 1px solid #410647;
color: #410647;
font-family: Verdana, sans serif;
font-size: 8pt;
letter-spacing: 0.5pt;
line-height: 10pt;
outline: none;
}
.column {
float: left;
width: 33.33%;
}
.column img {
width: 100%;
padding: 10px;
background-color: #f2ccc3;
border: 1px #d3ab9e dashed;
}
.gallery {
background-color: #fde2e4;
width: 17vw;
margin: 0.1vw;
padding: 1vw;
text-align: center;
}
.gallery strong {
color: #cfbaf0;
font-size: 0.9rem;
}
.gallery p {
color: #52b2cf;
font-size: 8.5pt;
line-height: 10pt;
}
.gallery h4 {
color: #ff9b85;
text-align: center;
}
.row:after {
content: "";
display: table;
clear: both;
}
.form {
margin: 0 auto;
text-align: center;
}
* {
scrollbar-width: auto;
scrollbar-color: #d7c0d0 #ffffff;
}
*::-webkit-scrollbar {
width: 8px;
}
*::-webkit-scrollbar-track {
background: #ffffff;
}
*::-webkit-scrollbar-thumb {
background-color: #d7c0d0;
border-radius: 0px;
border: 0px none #ffffff;
}
@media screen and (max-width: 600px) {
.gallery strong {
display: none;
}
.column .gallery {
display: block;
width: 29.8vw;
}
</style>
<section class="main-content">
<h2>🌸 32-bit cafe spring '23 event 🌸</h2>
<section>
<p>submissions could include: a seasonal adoptable that folks can grab from your site, a recipe page with your favorite spring recipes (spring-themed cake, anyone?), a page showcasing your favorite ways to celebrate the spring equinox on march 20, or showing off your favorite trees and flowers! for our friends in the southern hemisphere, what about showing your favorite autumn activities or ways that you celebrate autumn in your part of the world?</p>
<p>submissions closed on march 21, 2023. <strong>thank you to everyone who submitted to the event!</strong> check out the gallery of participants below.</p>
</section>
<div class="row center">
<div class="column gallery">
<h4>kaylee</h4>
<p><strong>kaylee.wtf</strong></p>
<a href="https://kaylee.wtf/spring" target="_new"><img src="1.png"></a>
<p>boing</p>
</div>
<div class="column gallery">
<h4>lian</h4>
<p><strong>libre.town</strong></p>
<a href="https://libre.town/creative/spring23.xhtml" target="_new"><img src="2.png"></a>
<p>Spring seasonal page complete with a countdown to March 20, little badges, mini recipes, a photo gallery, and a little cute design. :]</p>
</div>
<div class="column gallery">
<h4>levya</h4>
<p><strong>linwood.neocities.org</strong></p>
<a href="https://linwood.neocities.org/events" target="_new"><img src="3.png"></a>
<p>a page filled with ways to celebrate spring, including flower graphics, a spring youtube playlist, a spring-themed adoptable, and some recipes!</p>
</div>
</div>
<div class="row center">
<div class="column gallery">
<h4>melon!</h4>
<p><strong>melonking.net</strong></p>
<a href="https://melonking.net/email/emails/pixel-flower-garden" target="_new"><img src="4.png"></a>
<p>Please enjoy the flower garden :^]</p>
</div>
<div class="column gallery">
<h4>jade</h4>
<p><strong>glitchlynx.neocities.org</strong></p>
<a href="https://glitchlynx.neocities.org/spring23" target="_new"><img src="5.png"></a>
<p>A spring themed zine, focused mainly on the bugs I usually see in the spring.</p>
</div>
<div class="column gallery">
<h4>jmart</h4>
<p><strong>the-now-now.neocities.org</strong></p>
<a href="https://the-now-now.neocities.org/" target="_new"><img src="6.png"></a>
<p>The spring is a very mindful season for me. It stands out because it's nice, but limited time. I made a NOW page for my spring '23 event. It's like an about me page, but designed to be limited time, you delete the old update in favor of the new one. Thank you so much xandra.cc for helping me with getting the animation to work <3 <3 <3 SPRING FACT: The purple I picked for the <code>h1</code> is Bluebonnet Purple. Bluebonnets are the official flower of Texas that only blooms in the spring.</p>
</div>
</div>
<div class="row center">
<div class="column gallery">
<h4>loren</h4>
<p><strong>ribo.zone</strong></p>
<a href="https://ribo.zone/bugs/spring23/" target="_new"><img src="7.png"></a>
<p>bugs of early spring: an animated and interactive insect garden made entirely of photos taken in march 2023</p>
</div>
<div class="column gallery">
<h4>alexandra</h4>
<p><strong>xandra.cc</strong></p>
<a href="https://xandra.cc/spring2023.html" target="_new"><img src="8.png"></a>
<p>celebrating spring with my favorite springtime recipe (sicilian cake!) and some adoptables for your website! happy equinox!</p>
</div>
</div>

98
content/events/spring23/sent.php Normal file
View File

@ -0,0 +1,98 @@
<style>
.main {
background: url(spring-bg.gif);
background-repeat: repeat;
}
@media screen and (max-width: 600px) {
.form {
width: 45vw;
}
input, textarea {
width: 40vw;
}
}
@media screen and (min-width: 600px) {
.form {
width: 18vw;
}
input, textarea {
width: 15vw;
}
}
.main-content {
background-color: #FFF;
padding: 10px;
font-family: Verdana, sans serif;
}
.main-content strong {
color: #73956F;
}
.main-content p, li {
font-size: 11pt;
}
.main-content h2 {
color: #410647;
text-align: center;
cursor: default;
}
.main-content h2:hover {
color: #AF1B3F;
cursor: default;
}
.main-content ul {
list-style: none;
}
.field {
font-family: Verdana, sans serif;
font-size: 10pt;
font-weight: bold;
color: #410647;
line-height: 16pt;
}
.field label {
color: #FFF;
background-color: #AF1B3F;
padding: 2px 5px;
line-height: 20pt;
}
.field sup {
opacity: 0.5;
}
input, textarea {
background-color: #D7C0D0;
border: 1px solid #410647;
color: #410647;
font-family: Verdana, sans serif;
font-size: 8pt;
letter-spacing: 0.5pt;
line-height: 10pt;
outline: none;
}
.form {
margin: 0 auto;
text-align: center;
}
* {
scrollbar-width: auto;
scrollbar-color: #d7c0d0 #ffffff;
}
*::-webkit-scrollbar {
width: 8px;
}
*::-webkit-scrollbar-track {
background: #ffffff;
}
*::-webkit-scrollbar-thumb {
background-color: #d7c0d0;
border-radius: 0px;
border: 0px none #ffffff;
}
</style>
<section class="main-content">
<h2>🌸 32-bit cafe spring '23 event 🌸</h2>
<p>your submission has been sent! thank you for participating!</p>
<p>for your participation, feel free to add this to your site linking back to the page: <img src="spring2023participation.png" style="vertical-align:middle"></p>
<p align="center"><a href="../spring23/index.php">go back</a></p>
</section>

BIN
content/events/spring23/spring-bg.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.3 KiB

BIN
content/events/spring23/spring2023participation.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 914 B

244
content/guides/cyowebsite.html Normal file
View File

@ -0,0 +1,244 @@
---
title: Creating Your Own Website
author: xandra
aliases:
- /cyowebsite
---
<h2>Creating Your Own Website</h2>
<blockquote>Lovingly written and submitted by <a href="https://xandra.cc" target="_blank">Xandra</a>.</blockquote>
<section>
<ul>
<li><a href="#0">0. What kind of website do you want to make?</a></li>
<li><a href="#1">1. Find a host</a></li>
<li><a href="#2">2. Decide if you want a domain or not</a></li>
<li><a href="#3">3. Learn how to code while building your site</a></li>
<li><a href="#4">4. Join webrings and get involved in communities</a></li>
<li><a href="#5">5. Keep your website alive</a></li>
</ul>
</section>
<h3>You can do this!</h3>
<section>
<p>Yes, you <strong>can build a website, and using nothing but your keyboard and a text editor</strong>! Anyone can learn how to code a website, and thanks to the many tutorials and documentation around on the web, you can get started for free as you learn. The best part about building your own website is that you have complete control over how you want it to look, behave, and everything is up to you.</p>
<p>Building a website can seem difficult, but half the battle is just getting started! We wanted to put this guide together as an easy compilation of tutorials and places to learn exactly what you need to get started.</p>
<p>Here are some common misconceptions about coding your own website:</p>
<ul>
<li>You need a website builder</li>
<li>You have to use WordPress, Wix, Weebly, or Squarespace to make your own website</li>
<li>Your website has to make money in some way to be worth it</li>
<li>Coding is hard and requires a professional</li>
<li>Creating your own website is expensive</li>
</ul>
<p><strong>None of these are true!</strong></p>
<p>We hope this guide helps make everything feel more accessible to you, because it is! The internet belongs to all of us, so be sure to stake your claim in it.</p>
</section>
<h3 name="0" id="0">0. What kind of website do you want to make?</h3>
<section>
<p>There is a whole hobby surrounding building websites for personal use. Websites can cover, display, or talk about anything you're interested in, and building a website can be a great way to supplement your already-existing hobbies. Before you start down the path of building your own website, think about what type of content would be the most motivating to build or maintain. For instance, what is missing from social media profiles? Human context. You're more than just posting images to Instagram or funny statuses on Twitter. Having a website can fully encompass all different types of media all in one place, showcasing the full breadth of your interests.</p>
<p>What can a website be about? Here's some ideas from the community:</p>
<ul>
<li>A digital art gallery to show off photography</li>
<li>A compilation of university notes to be referenced</li>
<li>A business card to compile your digital presence</li>
<li>Published essays, papers, and other writings</li>
<li>A custom homepage to see whenever you launch a browser</li>
<li>A digital journal or daily planner completely owned by you</li>
<li>A customized library of topics you're interested in</li>
<li>An interactive log of all the countries or places you've visited</li>
<li>A dated log for dreams, food, or anything you want to keep track of</li>
<li>A capsule of all the information you know about your favorite things</li>
<li>Reviews of books, movies, and other media you enjoy</li>
<li>Digital scrapbooking of your life, displayed however you want</li>
<li>Playlists of music you enjoy, mixing different platforms and media</li>
<li>A reading list of interesting articles alongside your thoughts on them</li>
</ul>
<p>Or your website can just be all about you, which could include <em>all of these things</em>!</p>
</section>
<h3 name="1" id="1">1. Find a host</h3>
<section>
<p>While I'm sure you've heard of services like Wix and Squarespace from your favorite podcasts, what you want for this is a <strong>webhost</strong> or a <strong>hosting provider</strong>. Most likely, what you're looking for is <em>static hosting</em>. Services like Wix and Squarespace are good options for professional portfolios, business websites, and stores, but as far as individualized and unique websites go, these are not good options for expressive, hand-coded, personal websites.</p>
<p>If you want a standard blog that looks like every other website out there, then sure, maybe give those hosts a try with standard templates. If you want to learn skills that not only help you create a website for you to display whatever you want and express yourself but also help you expand your skillset that could be used for jobs, projects, or a hobby all on its own, then let's keep going!</p>
<p>Webhosts have been around for a long time, and because of this, we've generally figured out who the better ones are (spoiler: the ones that have been around for a long time). The good news is, depending on the webhost, you might not even have to buy a domain to start coding, which is perfect for a beginner. Many free webhosts offer an included subdomain and some paid webhosts offer an included domain, so you will have a URL ready to go that you can begin linking and sharing.</p>
<h4>Free Webhosts</h4>
<ul>
<li><a href="https://mmm.page" target="_new">mmm.page</a> (free tier, drag & drop web builder!)</li>
<li><a href="https://neocities.org" target="_new">Neocities</a> (free tier, up to 1GB)</li>
<li><a href="https://pages.github.com" target="_new">Github Pages</a></li>
<li><a href="https://ichi.city" target="_new">Ichi.city</a></li>
<li><a href="https://leprd.space" target="_blank">Leprd.space</a> (application-based, up to 1GB)</li>
<li><a href="https://www.w3schools.com/spaces/index.php" target="_blank">W3Schools' Spaces</a></li>
</ul>
<p>&#128161; <em>More might be listed on the <a href="https://discuss.32bit.cafe/wiki/resources#free-webhosts" target="_blank">32-Bit Cafe's Resource List</a>.</em></p>
<h4>Paid Webhosts</h4>
<ul>
<li><a href="https://dreamhost.com" target="_blank">Dreamhost</a> (starts at $4.95/month)</li>
<li><a href="https://nearlyfreespeech.net" target="_blank">NearlyFreeSpeech</a> (pay-as-you-go)</li>
<li><a href="https://porkbun.com" target="_blank">Porkbun</a> (starts at $3/month)</li>
<li><a href="https://www.hetzner.com" target="_blank">Hetzner</a> (starts at €2.09/month)</li>
<li><a href="https://uberspace.de" target="_blank">Uberspace</a> (starts at €5/month)</li>
</ul>
<p>Your host will likely either have a web interface system to upload your site, but if not, you'll need to dig into the host's documentation about how to upload your files. The best way to learn is to jump in and try!</p>
<h4>How to upload your site</h4>
<p>The below table is a compilation of methods to upload your site using the hosts suggested above, ranked in level of difficulty. None of these are <em>hard</em>, but some may require some additional learning to understand. Ultimately, you want to make sure you're reading and understanding how things work to better learn how to use these methods to your advantage.</p>
<p>A <strong>web interface</strong> means that the uploading process is entirely accessible from your browser, usually through an upload form or a button to find files on your computer. <strong>FTP</strong> (File Transfer Protocol) means transferring (often dragging and dropping) files from one server to another. A <strong>repository</strong> is using Git to push your files to the published site, but this tends to be a more <a href="https://www.gitkraken.com/learn/git/tutorials/what-is-a-git-repository" target="_blank">advanced method</a>.</p>
<table style="overflow-x:auto; width: inherit;">
<thead>
<th>Level</th>
<th>Method</th>
<th>Host</th>
<th>Tutorial</th>
</thead>
<tr>
<td>Easy</td>
<td>Web Interface/FTP</td>
<td>Neocities</td>
<td><a href="https://sadgrl.online/learn/articles/beginners-guide-neocities" target="_blank">Absolute beginner's guide to Neocities</a></td>
</tr>
<tr>
<td>Easy</td>
<td>Web Interface/FTP</td>
<td>Dreamhost</td>
<td><a href="https://help.dreamhost.com/hc/en-us/articles/215613657-How-do-I-upload-my-site-to-DreamHost" target="_blank">How do I upload my site to Dreamhost?</a></td>
</tr>
<tr>
<td>Intermediate</td>
<td>FTP</td>
<td>NearlyFreeSpeech.NET</td>
<td><a href="https://www.nearlyfreespeech.net/about/start" target="_blank">NearlyFreeSpeech.NET Getting Started Guide
</a></td>
</tr>
<tr>
<td>Intermediate</td>
<td>FTP</td>
<td>Most</td>
<td><a href="https://www.wikihow.com/Upload-Files-to-an-FTP-Server" target="_blank">How to Upload Files to an FTP Server</a></td>
</tr>
<tr>
<td>Advanced</td>
<td>Repository</td>
<td>GitHub Pages</td>
<td><a href="https://medium.com/@svinkle/publish-and-share-your-own-website-for-free-with-github-2eff049a1cb5" target="_blank">Publish and share your own website for free with GitHub</a></td>
</tr>
</table>
</section>
<h3 name="2" id="2">2. Decide if you want a domain or not</h3>
<section>
<p>A domain, such as <u>32bit.cafe</u>, can be a great way to have a catchy site name or have something short to share easily. And, if anything happens to any of your hosts, you can always transfer your domain to your new host. A domain is also good way to maintain a short URL, which can be easier to share or remember. The great news is that some webhosts can either give you a free domain with paid hosting or you can buy domains through the host. There's a couple of different routes to go, but it's completely up to you. Try not to use any of <a href="https://researchasahobby.com/full-list-eig-hosting-companies-brands/" target="_blank">EIG/Newfold Digital providers</a> if you can avoid it.</p>
<h4>Domain Providers</h4>
<ul>
<li><a href="https://namecheap.com" target="_blank">Namecheap</a></li>
<li><a href="https://porkbun.com" target="_blank">Porkbun</a></li>
<li><a href="https://dreamhost.com" target="_blank">Dreamhost</a></li>
</ul>
</section>
<h3 name="3" id="3">3. Learn how to code while building your site</h3>
<section>
<p>You don't need images or a bunch of custom graphics to get you started. You can make a website entirely from text and coded shapes, just like the 32-Bit Cafe!</p>
<p>Think of a website as a clothed stick figure waving. The <em>stick figure</em> is the HyperText Markup Language (HTML), the <em>clothes</em> are the CSS (Cascading Stylesheets), and the <em>waving</em> is JavaScript (and totally optional!). These three layers come together to make a clothed stick figure waving, but you can just have the stick figure standing still. You can even just have a naked stick figure: a website made up completely of HTML only.</p>
<p>HTML and CSS are some of the easiest types of code to learn, because it's written in a way that's easier to remember and centered on the content that fills it. You can code a website entirely in HTML without CSS or JavaScript, but you have to have the stick figure first in order to have something appear in your browser.</p>
<p>With some webhosts, you are able to edit and save your <code>.html</code> files directly using their web interface. However, since it's always best to have a backup, you can have a built-in backup by creating and editing your <code>.html</code> files locally. You can access your local files and test your website as you go. Just open your <code>.html</code> file in your favorite browser and begin testing!</p>
<blockquote>Unsure how to structure your website files for easy reference and uploading? Check out our <a href="../folderstructure101/">Folder Structure 101</a> guide.
</blockquote>
<h4>Editors</h4>
<p>How do you make <code>.html</code> files? Since we're looking for ways to code our websites by hand, any plaintext editor (that makes <code>.txt</code> files) is what you're looking for here. If you're looking for a different way of creating your website, a drag-and-drop webhost is going to be the best course of action. The best kind of tool is one that you'll use, so be sure to try out different types of editors and builders that make sense for the way you digest, process, and convey information.</p>
<p>Coding it by hand is really the best way to completely control the look and feel of every aspect of your website. Here are a list of some favorites, but it may make sense for you to start with your operating system's default, such as Windows' Notepad, to get started.</p>
<ul>
<li><a href="https://notepad-plus-plus.org/" target="_blank">Notepad++</a></li>
<li><a href="https://code.visualstudio.com/" target="_blank">Visual Studio Code</a></li>
<li><a href="https://brackets.io/" target="_blank">Brackets</a></li>
</ul>
<p>You can just open your text editor, put in some HTML, and <em>Save As...</em> the file as an <code>.html</code> file instead of a <code>.txt</code> in a folder on your computer. Open it in your favorite browser&#8212;boom!</p>
<h4>Getting started with HTML</h4>
<p>There are so many tutorials across the web, so we want to link some here that will take you, from start to finish, how to code your website. Some tutorials here even have barebones website layouts, so you can have a framework to the content you want to have inside of it.</p>
<p>The list here might seem like a lot at first glance, but it's not meant to overwhelm you with a lot of information. The idea here is to give you options of the best voice, method, and style of learning specific to you. Most of the time, whether someone "gets" something depends on the teacher, not the student. There are tutorials here that will guide you from start to finish, starting with a complete blank slate about making your own website.</p>
<h5>Beginner Tutorials</h5>
<ul>
<li><a href="https://html.com/#tutorial" target="_blank">HTML.com's HTML For Beginners The Easy Way</a></li>
<li><a href="https://www.w3schools.com/html/html_intro.asp" target="_blank">W3Schools' HTML Tutorial</a></li>
<li><a href="https://webguide.neocities.org/" target="_blank">A Beginner's Guide to HTML and CSS</a></li>
<li><a href="https://thoughts.melonking.net/guides/introduction-to-the-web-revival-2-learn-about-websites" target="_blank">MelonKing's Learn about Websites</a></li>
<li><a href="https://www.dragonflycave.com/html-guide" target="_blank">The Cave of Dragonflies HTML Guide</a></li>
</ul>
<h5>HTML Documentation and References</h5>
<p>You might learn just by trying things out on your own, so included here is documentation for HTML and reference material so you can dive in by messing around in the playground you're creating.</p>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web" target="_blank">Mozilla's Web Docs</a></li>
<li><a href="https://brisray.com/web/" target="_blank">Ray's Web Stuff</a></li>
<li><a href="https://www.w3schools.com/cssref/index.php" target="_blank">CSS Reference</a></li>
</ul>
<p>&#128161; <em>More might be listed on the <a href="https://discuss.32bit.cafe/wiki/resources#beginner-html-guides" target="_blank">32-Bit Cafe's Resource List</a>.</em></p>
<p>If you have to pick an order of what to learn, understand HTML before diving into CSS. It's hard to put clothes on a stick figure you're not sure the size of yet! CSS heavily relies on understanding how different HTML elements work with each other, so learning how to structure your site with HTML first will put you at an advantage in learning CSS.</p>
<p>Don't get discouraged if you have trouble with coding. <em>Everyone</em> does, no matter the skill level or how long we've been doing it! Even professional web developers have to search online for the solution to their problems every once in a while. Compare your work to the work of others and see how other people accomplish the same things you want to. There's never just one way to code something.</p>
<p>It can be really helpful to use your favorite search engine to search for keywords like "how to do XYZ in HTML" if there's something specific you want to learn how to code. Learning how to research your problem by searching keywords like "how to make two-column layout html" or "make an image gallery in HTML and CSS only" will help you <em>so much</em> in the future. If you ever run into issues, searching online will often yield you the answer on forums and websites. If you're coding alongside a tutorial and don't really understand, try breaking apart the problem to get to the crux of it. Coding, sometimes, is a puzzle! That's why it's so, so satisfying when you finally fix a problem that's been holding up your website.</p>
</section>
<h3 name="4" id="4">4. Join webrings and get involved in communities</h3>
<section>
<p>The next step of having a website is having people see it! This part is totally optional, but knowing folks are visiting your site can be a real motivational push to maintain and keep your site up to date. On <a href="https://neocities.org" target="_blank">Neocities</a>, there is a built-in following/activity feed, where you can see sites that are being <a href="https://neocities.org/activity" target="_blank">updated in real time</a> and find websites to follow that you enjoy. You can also find directories of websites for "this side of the web" including personal sites, like <a href="https://indieseek.xyz/" target="_blank">Indieseek.xyz</a>, <a href="https://peelopaalu.neocities.org/" target="_blank">Peelopaalu</a>, <a href="https://list-me.com/" target="_blank">List-Me.com</a>, and <a href="https://www.linklane.net/" target="_blank">Link Lane</a>.</p>
<p>Webring directories, like <a href="https://brisray.com/web/webring-list.htm" target="_blank">Ray's Webring List</a>, highlight that webrings are the best way to be linked by a wide array of like-minded folks. Webrings aren't seen around the web as often anymore since the social web has taken over, but they've been steadily growing once more as a place for websites to interconnect. Once you've published your site, check out webrings and see which ones you or your site falls into. You very well might even make some friends!</p>
<h4>Web Visitor Etiquette</h4>
<p>In visiting a lot of sites, you might begin seeing that there's static ways of interacting with the website owner: guestbooks, shoutboxes (also known as Cbox), and comment systems. It's polite to comment on the site you're visiting; in particular, it'll make that person's day to give them a compliment about some aspect of their site! It's also a great way to get your site out there, since whoever is receiving your comment will likely come to your site to return the favor and browse yours. (And then you'll see how good it feels!)</p>
<blockquote>Want to learn more about interacting with other websites once you have yours built? Check out our <a href="../interactingontheweb/">Interacting with Other Websites</a> guide.
</blockquote>
</section>
<h3 name="5" id="5">5. Keep your website alive</h3>
<section>
<p>At some point, you feel like you've added everything you've thought of to your website. Struggling to come up with ideas and seeing websites that look "better" than yours, you might begin to slowly dedicate less and less time to this new hobby of yours. I implore you to <strong>keep at it</strong>!</p>
<p>Your website does not have to be updated every week in order to be a participant in the personal web. Change up your layout once a year or every season. Talk about something important to you every six months. Whatever level of activity you can fit into your life, the <em>consistency</em> is what is most important. Start a blog? Maintain it. Have a to-do list? Check off items. Show progression through your website as you journey through your life, so your website can reflect the person you are now.</p>
<blockquote>Need some more ideas for pages to add to your personal site or ways to improve? Our <a href="https://32bit.cafe/websiteideas/">Ideas for Your Personal Website</a> guide has you covered.</blockquote>
<p>Learning more about how HTML and CSS interact can eventually open you up to advanced methods of design, allowing you to experiment with new methods and ways to display your content. You'll learn different ways to design your site, and you might want to change up your layout! All it takes is for you to search for it and seek out code snippets, CSS tricks, and other ways to improve your coding.</p>
<p>Keep in mind that this isn't a competition, and there's no Hall of Fame here. People will enjoy your site because of what you put on it, not because it's the best-coded website ever (whatever that means). Nobody is comparing your site to someone else's, because they exist for different reasons. You might showcase your photography, which will look completely different from a site of someone displaying their pixel art.</p>
<p>We all started where you are now, regardless of where we are now. You are not alone, and a ton of communities like the 32-Bit Cafe exist because we want <strong>you</strong> to create the website <strong>you</strong> want. If you eventually outgrow the current iteration, change things up or start all over again. It's your world!</p>
</section>

88
content/guides/discourse101.html Normal file
View File

@ -0,0 +1,88 @@
---
title: Discourse 101
aliases:
- /discourse101
---
<h2>Discourse 101</h2>
<section>
<p>This guide is meant to be helpful in initially navigating through our new <a href="https://discourse.32bit.cafe" target="_blank">Discourse forum</a>, which is meant to serve as our main communication hub moving forward.</p>
</section>
<section>
<h3>Forums <em>and</em> Chat</h3>
<p>The first thing to recognize is that Discourse is both forums and chatroom channels. If you're already familiar with forums, a lot of these concepts relayed in the tutorials given in the onboarding you will likely already know, but be sure to stick with it. A lot of initial questions can usually be answered by the onboarding. Give it a try without skipping ahead or dismissing the guide. Discourse is not laid out in the same way that a lot of forums are, so it would be beneficial to take this as a new platform rather than try to retrofit your knowledge onto a brand new platform to you.</p>
<h3>First Impressions</h3>
<img src="sidebar.png" style="float: right; width: 30%;">
<p>There are three navigation items to call out initially. There's the sidebar; the top chat navigation, which launches the chat while you browse; and your profile picture, which opens to your notifications but has additional menu items.</p>
<p>The sidebar is the center of navigation to the forum. The top section includes the Categories view, Topics view, all the live Chat Channels, and Badges page for basic navigation to start talking with other members.</p>
<p>The second section, under the 32-Bit Cafe label, has important information for navigating the community itself: Community Guidelines, Forum Rules, Event Calendar, Project Teams, and our massive Resources List. These are worth taking a look at even initially to get a feel for what to expect within the community.</p>
<p>Under that section, you can customize your view of what Categories and Tags you want to follow, as well as your Messages inbox and easy access to all the <em>chat</em> threads you've posted in under My Threads. Finally, you'll see the live chat channels directly in your sidebar and DMs you might have with other members.</p>
<p>The most important things to note that the forum system uses <strong>Categories</strong> to indicate different types of forums (Webweaving, Technology, Announcements), and within those forums, <strong>Tags</strong> are used to narrow down topics even further (e.g. "feedback" in the Webweaving category for folks who want feedback on their website). The forums are far more broad than our Discord server was, because we utilize the tagging system within the forum to help navigate topics. Don't stress too much about tags if you're unsure. Staff will be around to help move and tag threads as folks get used to the new system, and you can always ask questions in <strong>The Coffee Bar</strong> chat channel for help.</p>
<p>Navigating initially using the Categories link on the sidebar might help at first, but as you get to know the forum, knowing that all the topics on the forum are listed under Topics link can be a helpful distinction.</p>
<p>Get to know the navigation of the forum, explore around, and familiarize yourself with all the buttons and navigation you have access to.</p>
<h3>Getting Started</h3>
<p>When you first sign up, you'll have two things happen.</p>
<p>First, an onboarding tutorial will start, showing you where exactly to interact with the forum in order to do basic tasks, like where topics are and how to reply, live on the site. You can always re-enable these tips in your Preferences under the
&#128187; <strong>Interface</strong> tab.</p>
<p>Second, you'll receive a direct message from <strong>discobot</strong>, the onboarding tutorial bot that will guide you through some other basic tasks in using the forum. These are interactive, so be sure to follow the instructions!</p>
<p>If these tutorials, including the advanced tutorial you receive in your DMs after reaching a certain level of activity, are not comprehensive enough, we recommend reading over the <a href="https://meta.discourse.org/t/discourse-new-user-guide/96331" target="_blank">Discourse New User Guide</a> from the official Discourse forum and this <a href="https://www.sitepoint.com/community/t/discourse-cheat-sheet/733" target="_blank">Discourse Cheat Sheet</a> for some tips and tricks.</p>
<p><img src="tutorial1.png" width="100%"></p>
<h4>Setting Up</h4>
<p>When first getting acquainted with the forum, make sure it's readable to you. Navigate to your profile picture, select the &#128100; Profile icon from the menu that pops up, and then select &#9881; <strong>Preferences</strong>. From there, select the &#128187; <strong>Interface</strong> tab. In that section is a theme selector as well as a color scheme selector. We've provided some options initially, but we'll be including more color schemes in the future.</p>
<p>This is also a great opportunity to make your profile in this same area, under the &#128100; <strong>Profile</strong> tab. You can fill out your About me, which will populate in a user card when folks click your username anywhere on the site. You can also select your timezone, website URL, location, pronouns, your DM preferences, and your forum signature, among other settings.</p>
<h3>Badges and Titles</h3>
<p>Luckily, you get a reward for completing these onboarding tasks! Our forum has <strong>Badges</strong>. You'll begin to see them more as you explore the forum, since you'll start collecting Badges the first time you sign up. As you participate in the forum, you'll receive Badges that can then be used as a title next to your username whenever you post. These can change whenever you want and depend on which Badges you have collected. Titles can also be given for participating in a <a href="../community/">project team</a> or community event.</p>
<p>New Badges and titles are being added all the time based on ways you can interact in the community and on the forum, so get to collecting!</p>
<h3>The Trust System</h3>
<p>When you join the forum, you start at Trust Level 0. This helps acclimate folks to the community, as well as how we're using the forum, before being able to dive right in. The requirements for Trust Level 1 is reading 5 topics, reading 30 posts, and spending 10 minutes on the forum. By signing up, you'll get access to our General forum, where folks introduce themselves, community event discussions are posted, and random topics are discussed that don't fit in other categories. Once you reach Trust Level 1, you'll be able to see and join in on what was previously known as Interest Club discussions, now divided into three off-topic forums: Offline Life, Art, and Media.</p>
<p>Your Trust Level affects your ability to see certain aspects of the forum when you first join. You might not have access to the real-time chat function, for example. Continue browsing, replying to posts, and getting to know the forum by using the interactive tutorials to raise your Trust Level without staff intervention.</p>
<p>Initially, your posts might be marked as spam if you're linking to your site repeatedly in your new posts or posting a lot of links. This is because there is a built-in spam catching functionality to Discourse. These posts are just caught in our spam filter, but our Baristas will often restore posts that are caught in this spam filter shortly thereafter if they are legitimate sites (and not actually spam).</p>
<h3>Chat Channels</h3>
<p>You can access the chat channels from three spots in the navigation: in the top navigation, in the Chat Channels navigation item on the sidebar, and under the Channels section label.</p>
<img src="channels.png" style="float: right;">
<p>Additionally, you can browse the channels by clicking the pencil on hover of the Channels subnavigation, where you can see the channel descriptions. Channels that you actively join will be highlighted on the sidebar.</p>
<p>Once you figure out how to access the chat channels, you have access to two: <strong>The Patio</strong> and <strong>Quick Questions & Help</strong> (formerly The Coffee Bar). The Patio is for all chatter that may not be worth a thread or just an opportunity to catch some quick conversation with other members. Quick Questions & Help is a help-centered chat channel to help folks who might have questions about using Discourse, including where to post topics or how to use certain features.</p>
<p>As more folks use the chat channels, we'll continue expanding to different chat channels if that's how the community is going. You will always be able to see the channel descriptions from the <strong>Chat Channels</strong> navigation item in the menu to be able to determine what conversation goes where.</p>
<p>You'll notice you're able to chat live while browsing and posting on the forum. You can keep the chat up or maximize your view.</p>
</section>
<section>
<h3>I still need help!</h3>
<p>We're here for you! Don't be discouraged&mdash;the Baristas are always around to help in Discourse or on Discord in our new #discourse channel.</p>
</section>

52
content/guides/folderstructure101.html Normal file
View File

@ -0,0 +1,52 @@
---
title: Folder Structure 101
author: fLaMEd
aliases:
- /folderstructure101
---
<h2>Folder Structure 101</h2>
<blockquote>Lovingly written and submitted by <a href="https://flamedfury.com/" target="_new">fLaMEd</a>. Thank you, fLaMEd!</blockquote>
<p align="center"><img src="folder-structure.png" title="An image of a folder structure that is replicated below in text"></p>
<h3>How should I organize my files?</h3>
<section>
<p>You can organise all of your website projects with this simple folder structure. You will only need four folders for a nicely organised web project.</p>
<p>The four folders are <code>root</code>, <code>css</code>, <code>img</code>, and <code>js</code>.</p>
<p>The project <code>root</code> folder can be named after your web project, e.g. <code>32bit.cafe</code>. The root folder or your project folder is your primary folder, and all of your HTML files will live here, e.g. <code>index.html</code>, <code>about.html</code>, <code>contact.html</code>, <code>projects.html</code>.</p>
<p>The other three folders will also reside within this project folder. The other three folders are self-explanatory.</p>
<p>The <code>css</code> folder will hold all your CSS files, e.g. <code>styles.css</code> or <code>style.css</code>.</p>
<p>The <code>img</code> folder will hold all your image files (.jpg, .jpeg, .png, .gif, etc.), e.g. <code>header.png</code>, <code>featured-image.jpg</code>, or <code>88x31-button.gif</code>.</p>
<p>The <code>js</code> folder will hold all your JavaScript files, e.g. <code>app.js</code> or <code>site.js</code>.</p>
<p>It's good practice to use lowercase for your folder names.</p>
<p>If you find yourself with large amounts of images, do not be afraid to create subfolders within the <code>img</code> directory.</p>
<p>Use this template as a starting guide and modify it to suit your project needs.</p>
<p>In text format, the folder structure appears like this:</p>
<pre>
32bit.cafe /
|- / CSS /
| styles.css
|- / img /
| 88x31-button.gif
| featured-image.jpg
| header.png
|- / js /
| apps.js
-about.html
-contact.html
-index.html
-projects.html
</pre>
</section>

81
content/guides/forums101.html Normal file
View File

@ -0,0 +1,81 @@
---
title: Web Forums 101
author: xandra
aliases:
- /forums101
---
<h2>Web Forums 101</h2>
<blockquote>Lovingly written and submitted by <a href="https://transrats.neocities.org" target="_new">Jay</a> & <a href="https://xandra.cc" target="_new">Xandra</a>.</blockquote>
<section>
<p>Forums might seem like a long gone feature of the internet of yore, especially now in the time of social media and chat services like Discord. Would it surprise you to know that forums are not just alive and kicking but also making a <em>comeback</em> as sentiment toward social media begins to wane and folks begin branching out their microcosms on the internet? It wouldn't surprise the thousands of people who subscribe to various forums, which are still going strong!</p>
</section>
<h3>What are forums?</h3>
<section>
<p>Forums can be called many things: web forums, message boards, or internet forums. Forums are an online discussion site where people can hold conversations in the form of posted messages. Since the rise of social media, web forums have fallen out of favor with services like Facebook Groups taking their place. However, forums are a great way to disconnect from the dependence upon companies like Meta to host community-driven conversation. Wikipedia's <a href="https://en.wikipedia.org/wiki/Internet_forum" target="_new">article about internet forums</a> outlines the long history of forums and goes into great detail about forum culture, if you're interested.</p>
</section>
<h3>What makes forums different?</h3>
<section>
<p>Message boards can be a great way to engage with a community and interact on a deeper level than chatrooms typically offer. Because it's a slower format, folks are hopefully putting in more effort to their posts than chatting on Discord. You can have more meaningful discussions without getting lost in a sea of messages. It's an asynchronous communication medium, so there's no stress in replying so-called "fast enough," staying "active enough," or keeping up with all the conversation happening. You can subscribe to the threads that interest you and stick to topics that you prefer to discuss at the speed in which you're most comfortable.</p>
<p>What usually discerns forums from other communication media is the level of passion, knowledge, and reference. Forums are often focused on specific niches, but the types of people who join forums tend to be more passionate about the overall forum topic. Gardening forums, for instance, can be a wealth of knowledge for an amateur gardener, who can ask questions and discuss topics with other people who are just as passionate about gardening without feeling overwhelmed by chatter activity. A forum you enjoy might focus on something yet still have amazing conversations about tertiary topics, such video game forum that sometimes discusses the implications of gaming addiction. This can also mean forums can be harder to find, though, so take your time finding a community that fits.</p>
<p>Users can also be as anonymous as they want to be, and posts stay online much longer than chat messages. Be aware of how much you share, and be mindful of how much personal information you're putting online.</p>
<p>Posts on forums usually use either <a href="https://www.phpbb.com/community/help/bbcode" target="_new">BBCode</a> or <a href="https://www.markdownguide.org/cheat-sheet/" target="_new">Markdown</a> to format posts, but usually, there will be guides on the forum itself on how to use its formatting of choice. It's not complicated, though, and most forums offer a What-You-See-Is-What-You-Get (WYSIWYG) editor for posts.</p>
</section>
<h3>What does forum participation look like?</h3>
<section>
<p>Being a good netizen of a forum generally means following the rules of that forum, and standard internet rules apply: be kind and remember there's a person behind the screen. Be sure to read the forum's rules, which are usually enforced by a moderation team.</p>
<p>Forums tend to favor long-form conversation. Don't reply to things with one-word responses like "cool" or "I don't get it" with no follow up. Why do you not get it? What is cool about it? You don't have to write multiple paragraphs with every post, but because you often will not get a response right away, it's good to cut down on confusion by being as clear as possible. When the person you are replying to sees your message, isn't it better they reply in a way that is helpful (if help is needed) rather than having to ask you to clarify?</p>
<p>Be aware of the forum structure. A lot of forums have carefully organized boards and specific spots to put each type of question you may have or cool thing you may want to share. Participation is most important when it comes to forums, though, so don't be afraid to start a new topic or thread. Moderators will often just move the thread to an appropriate topic if you mess up, so no harm, no foul!</p>
<p>Part of the fun of forums is being able to style your signature and avatar, which can reflect you and your interests. Sites like <a href="https://avatars.alphacoders.com/" target="_new">Avatar Abyss</a> and <a href="https://picrew.me/en" target="_new">Picrew</a> can help you find an avatar that fits you if you don't want to create your own. Signatures can either be plain text, link to things you care about, or show a snazzy banner that reflects your personality. WikiHow has a <a href="https://www.wikihow.com/Create-a-Forum-Signature" target="_new">tutorial</a> for creating forum signatures, but feel free to get inspiration from other users on the forum.</p>
</section>
<h3>Be Mindful of the Culture</h3>
<section>
<p>Online communities have to be careful of nefarious community members that can lead someone to be groomed or radicalized into bigotry and hate. This is especially true for self-hosted web forums, which can bypass many common platform rules that would have otherwise removed the community from platforms. While this may seem like something that can be easily avoidable, it can happen subtly and over time, <a href="https://www.mdpi.com/2076-0760/9/4/40" target="_new">especially to young people</a>. Before joining any online forums, be aware of signs of <a href="https://www.britishcouncil.org/anyone-anywhere/explore/dark-side-web/online-grooming-radicalisation" target="_new">online grooming and radicalization</a>. Since forum users can be more anonymous, be aware that folks you talk to might not be who they say they are and might capitalize on feelings of isolation and loneliness. Learn how <a href="https://actearly.uk/radicalisation/online-safety/" target="_new">radicalizers work</a> so you can protect yourself.</p>
<p>Memes are especially easy to hide bigotry behind, as the offending user might just say it's "dark humor" or "irony," but all it does is continue to normalize hateful and discriminatory behavior. Is the joke just that someone is different and not "normal" (e.g. a trans person just being who they are), or is it to cope with a difficult concept (e.g. death or trauma)? Maintaining critical thought, and skepticism, is healthy in online discourse, and this can help with determining what forum content you might be dealing with.</p>
<p>Don't forget that you can leave a community at any time, and you do not owe anyone a goodbye. There's no need to change yourself in order to fit in to any online community, as there's so many out there who will accept you for who you are. If folks are pressuring you to think a certain way or trying to persuade you into doing or talking about things you might be uncomfortable with, leave immediately.</p>
</section>
<h3>Currently Active Forums</h3>
<section>
<p>While we previously linked to a variety of forums through the 32-Bit Cafe's linkroll, we actually have found too many to list, so the community has compiled them here. These are forums that tend to be more on the positive side of the internet, so we're happy to showcase them here as an introduction to forums in general. The 32-Bit Cafe doesn't co-sign anything written or talked about on the forums below, but we wanted to share regardless.</p>
<p><em>Forums that 32-Bit Cafe members enjoy are starred.</em></p>
<ul>
<li><a href="https://basementcommunity.com/" target="_new">Basement Community</a>, general forum with people from all walks of life</li>
<li><a href="https://www.belltreeforums.com/" target="_new">The Bell Tree Forums</a>, forum for Animal Crossing games</li>
<li><a href="https://bus-stop.net/" target="_new">The Bus Stop</a>, a smalltalk message board with messages deleting after 24 hours</li>
<li><a href="https://www.codingforum.net/" target="_new">CodingForum.net</a>, a forum focused on web development and coding</li>
<li><a href="https://board.eclipse.cx/" target="_new">Eclipse Community</a>, a technology-focused forum with member projects</li>
<li><a href="https://gbatemp.net/" target="_new">GBAtemp.net</a>, focused on gaming in general and modifying Nintendo systems and games &#9733;</li>
<li><a href="https://itch.io/community" target="_new">Itch.io Community</a>, a forum focused around indie game development</li>
<li><a href="https://linustechtips.com/" target="_new">LinusTechTips.com</a>, technology-focused forum alongside the YouTube channel</li>
<li><a href="https://forum.melonland.net/" target="_new">MelonLand Forums</a>, forum centered around the <a href="https://wiki.melonland.net/web_revival" target="_new">web revival</a> movement &#9733;</li>
<li><a href="https://garden.org/forums/" target="_new">National Gardening Association Forums</a>, a forum focused on gardening</li>
<li><a href="https://posting.cool/index.php" target="_new">The Orb</a>, general forum with lots of random posts &#9733;</li>
<li><a href="https://pixellounge.boards.net/" target="_new">Pixel Lounge Forum</a>, a pixel art-focused forum &#9733;</li>
<li><a href="https://projectpokemon.org/" target="_new">ProjectPokemon</a>, focused on Pokemon and modifying Pokemon games</li>
<li><a href="https://spacebar.jcink.net/index.php" target="_new">Space Bar</a>, an 18+ forum reminiscent of LGBTQIA+ bars in real life &#9733;</li>
<li><a href="https://speakeasy.midnight.pub/" target="_new">Speakeasy</a>, a smolweb message board themed after a speakeasy &#9733;</li>
<li><a href="https://the-web-raft.boards.net/" target="_new">The Web Raft</a>, a forum to share and connect with others building websites &#9733;</li>
<li><a href="https://youthculture2000.freeforums.net/" target="_new">Youth Culture Network</a>, a forum dedicated to nostalgia with youth culture in the 2000s</li>
</ul>
<p>This is not where the list ends, our fingers just got tired! Due to the nature of forums being decentralized communities, it might be harder to find comprehensive lists of forums that encompass a wide range of interests, outside of Wikipedia's <a href="https://en.wikipedia.org/wiki/List_of_Internet_forums" target="_new">lengthy list of active forums</a> that include some large communities as well as some unsavory ones. You can always look through the <a href="https://www.proboards.com/forum-directory" target="_new">ProBoards Forum Directory</a> for communities as well. On your search engine of choice, search an interest of yours and the word <code>forum</code>, and you just might find a community of like-minded individuals!</p>
</section>

175
content/guides/interactingontheweb.html Normal file
View File

@ -0,0 +1,175 @@
---
title: Interacting with Other Websites
author: xandra
aliases:
- /interactingontheweb
---
<h2>Interacting with Other Websites</h2>
<blockquote>Lovingly written and submitted by <a href="https://xandra.cc" target="_blank">Xandra</a>.</blockquote>
<section>
<p>Interaction on the personal web looks very different than social media, and it could take some getting used to if all you've experienced is scrolling through social media as your main interaction with other people on the web. For one, you're expected to <strong>participate</strong> in the personal web! Social media has made us complacent in how we look at content in the modern internet, but when you create your own website, you're not just creating Content™ to be monetized or trendy; you're showcasing your expression of yourself, your interests, your favorite things, your hobbies—who you are!</p>
<p>People who might be apprehensive about getting involved in the personal web (including making their own website) may believe they don't have "good enough" hobbies, coding skills, writing, or art to share with the world. We're happy to report that none of that is a prerequisite for having enjoyable websites. Your website is a like having a piece of land on the internet, and you get to build whatever you want! The best part about that is folks just want to see what you build. There's a whole demographic of people who just want to see what other people are interested in, what your life is like, and how you express yourself. The pressure is officially off!</p>
<p>We're going to explore how to interact with other websites so you can be a full participant in the communities you might stumble into and be a full citizen of the 'net!</p>
</section>
<h3>0. What does participation mean?</h3>
<section>
<p>Your participation is entirely dependent upon how much time you want to spend on this hobby. Some folks create websites, and others might just browse. Some might even make full-fledged communities of similarly-minded folks. Participation just means you are contributing to the ecosystem of the personal web by making your presence known to your 'net neighbors—leaving comments, getting involved with various events, posting on forums, leaving guestbook entries, or updating your website. Otherwise, this entire ecosystem could feel like a giant void. Doesn't it feel better to know that others are reading and taking in your cool website?</p>
<p>For this guide, we're going to assume you have a website to be able to link to. If you don't already have one, it's never too late to <a href="../cyowebsite/">get started creating your own site</a>.</p>
</section>
<h3>1. Etiquette on the Personal Web</h3>
<section>
<p>Before we get into the different methods, let's talk about etiquette. You should always try to promote positivity, since self-expression is inherently subjective. Even if someone's website doesn't look good to you, someone worked really hard on that website! They should be commended for their efforts and, if warranted, encouraged to continue what they're doing and get better. The golden rule best applies: treat others as you want to be treated. This goes a long way on the personal web. In fact, here's some guidelines our community came up with for moving and participating throughout the independent web.</p>
<h4>32-Bit Cafe's 10 Rules for the Personal Web</h4>
<p>Crowd-sourced from our community!</p>
<ol>
<li>Treat others the way you want to be treated.</li>
<li>Strive to meet the <a href="https://theultimatemotherfuckingwebsite.com/" target="_blank">four WCAG principles</a> for accessibility: Perceivable, Understandable, Operable, and Robust.</li>
<li>Never plagiarize or pass off others' work as your own.</li>
<li>Never <a href="https://simple.wikipedia.org/wiki/Hotlinking" target="_blank">hotlink</a> and keep assets alive as websites die.</li>
<li>Link to others freely and without abandon.</li>
<li>Curation <strong>is</strong> <a href="https://camdez.com/blog/2016/03/30/curation-is-creation/" target="_blank">creation</a>, and a valid form of creation in a world of so much content.</li>
<li>Never gatekeep; share and link to helpful resources you find on the web.</li>
<li>Don't feed the trolls.</li>
<li>Learning how to research is just as important as learning how to build a website.</li>
<li>Cringe culture is dead; embrace the things you're interested in!</li>
</ol>
<h4>Mean Comments</h4>
<p>It should be stated that you might encounter hateful or mean comments throughout your tenure of your website. We promote a positive, encouraging environment for folks, but it's not like that everywhere on the web. Just like on social media, you might get straggles of trolls or just mean-spirited people who want to discourage you from doing what you're doing. <strong>Don't let them.</strong> You have a right to be here, just like everyone else, and you deserve to have a space to express yourself. Be vigilant with the services you have for your website, making sure to remove any negative comments as they appear or turning on moderation and comment approvals. If you give them no attention, they will quickly move to another target. Responding to those comments (which aren't being posted in good faith, anyway) just encourages the behavior and ends up being a misrepresentation of who you are publicly, since visitors to your website become onlookers in the fray.</p>
</section>
<blockquote>We have lots of <a href="../internetsafety/">tips and ideas for staying safe</a> on this side of the web, which is important as you're entering spaces that depend less on systemic moderation (like on the social web) and more on volunteer efforts of stewards within the personal web.</blockquote>
<h3>2. Trading Buttons & Links</h3>
<section>
<p>Trading links is a great way to get folks viewing and interacting with your site, which can be super encouraging. This is probably the baseline way of getting the word out about your site, which is to affiliate with other sites or trade links with other website owners by asking them via email or in their guestbook. Links are usually on their own page, also known as a linkroll, to help guide the visitor to another space on the personal web. <a href="https://thoughts.melonking.net/thoughts/every-site-needs-a-links-page-why-linking-matters" target="_blank">Linking matters</a> because you don't want your site to be a dead-end, you want visitors to continue exploring this side of the web!</p>
<p>The most common way to trade links is through buttons. There are two main sizes of buttons that people tend to use: 88x31 or 32x32. The idea is to create a button wall of many buttons that can be displayed next to each other on a page. Your button can also be a great show of who you are to whoever is browsing since folks will put yours on their button wall. <a href="https://hekate.neocities.org/" target="_blank">Hekate</a> has an awesome <a href="https://hekate2.github.io/buttonmaker/" target="_blank">88x31 button maker</a> if you haven't already made one. One thing to keep in mind is, even if there is a textarea with the code inside on someone's website, don't ever hotlink—or link directly to their images—to display their button. Download the image and upload it to your host where your files are. It helps preserve graphics from disappearing websites, prevents bandwidth theft, and reduces the loading time on your button wall.</p>
<h4>Examples of Button Walls</h4>
<ul>
<li><a href="https://neonaut.neocities.org/cyber/88x31" target="_blank">NeoCitizens</a></li>
<li><a href="https://nostalgic.neocities.org/links/button" target="_blank">Nostalgia for the 2000s' Button Wall</a></li>
<li><a href="https://bytemoth.neocities.org/88s/" target="_blank">Bytemoth's 88x31 Gallery</a></li>
</ul>
<p>Affiliates (also called "affies") means more than trading links: you're frequently visiting each others' sites, interacting on their site often, following them in multiple webspaces, collaborating on projects, or you're just friends with them online. It's an intentional agreement to become web-friends, and it can also be a sign to outsiders that this is a trusted person with like-minded content or at least content that you personally enjoy. Affiliates also tend to send each other gifts to display on their websites for special occasions, holidays, birthdays, or just because.</p>
<p>Finally, listings are directories by another name. It seems as though back in the '90s/'00s, the term "listings" meant it was geared more toward the personal web than "directory," which may have felt too corporate. Nowadays, they're used interchangeably. A directory, or listing, is one way to promote your site among others, which can be helpful for folks browsing for new websites to visit.</p>
<h4>Listings</h4>
<ul>
<li><a href="https://linklane.net/" target="_blank">Link Lane</a>, 379+ links</li>
<li><a href="http://list-me.com/" target="_blank">List-Me.com</a>, 218+ links</li>
<li><a href="https://smoothsailing.asclaria.org/" target="_blank">Smooth Sailing Listings</a></li>
</ul>
<h4>Directories</h4>
<ul>
<li><a href="https://indieseek.xyz/" target="_blank">Indieseek.xyz Indie Web Directory</a></li>
<li><a href="https://peelopaalu.neocities.org/" target="_blank">Peelopaalu Link Directory</a></li>
</ul>
<p>Regardless if it's through a text link or a button, your site added to a links page is a huge honor! If you ever see it, be sure to say hello to that person on their guestbook or cbox. They've clearly seen your stuff already, so return the favor!</p>
</section>
<h3>3. Comments & Guestbooks</h3>
<section>
<p>You're probably already familiar with comment systems, as most social media (thanks to Web 2.0) are centered around commenting as a form of interaction. With websites, webweavers might have comments underneath their blog posts or they might have a tagboard system. Tagboards, also known as shoutboxes or cboxes, are a quick way to leave a mark on someone's website to let them know you enjoyed their website.</p>
<p>When commenting on other people's tagboards, you can generally keep your comment shorter and sweeter—it's a good way to quickly interact if you're short on time. Consider these drive-by comments, whereas more in-depth commentary about the website should be left to guestbooks. Posts on cboxes tend to be moved up and out of the box altogether, so your comment can eventually be pushed up and out of sight.</p>
<p>With guestbooks, picture your entry as being a time capsule, frozen in that moment, for the rest of our digital history. Make note of something you enjoyed about their site in particular, or let them know that you're linking to their site. Guestbooks are also a great way to share your website as well, so make a great first impression! If you're interested in becoming mutuals or sharing buttons, make the first move and include their button first on your site.</p>
<p>Regardless of the system used to communicate with the website owner, make sure to visit and comment again! Folks update their websites all the time, and letting them know you checked out their new update is sure to make their day. This kind of activity makes you more visible as an interactive person. You might see more folks coming to your site and leaving <em>you</em> comments!</p>
<p>If you're interested in adding these to your websites, here are some services you can put on your site:</p>
<h4>Comment Systems</h4>
<ul>
<li><a href="https://www.cbox.ws/" target="_blank">Cbox</a></li>
<li><a href="https://ishoutbox.com/" target="_blank">iShoutbox</a></li>
<li><a href="http://www.yellbox.com/" target="_blank">Yellbox</a></li>
<li><a href="https://commentbox.io/" target="_blank">Commentbox</a></li>
</ul>
<h4>Free Guestbooks</h4>
<ul>
<li><a href="https://www.123guestbook.com/" target="_blank">123Guestbook</a></li>
<li><a href="https://www.bravenet.com/guestbooks" target="_blank">Bravenet Guestbook</a></li>
<li><a href="https://www.smartgb.com/" target="_blank">Smart Guestbook</a></li>
</ul>
</section>
<h3>4. Webrings & Cliques</h3>
<section>
<p>Webrings and web cliques are a great way to join an already-existing group of folks on the internet with websites, especially if you're interesting in aligning with others around a particular interest, aesthetic, or theme. You usually have to reach out to the webring/clique owner or fill out a form in order to join. There is no built-in community in joining webrings or web cliques, but the idea is that you would interact more with sites you're adjacent to with your webrings, cliques, and neighbors in respective "areas" of the web. Interacting with your neighbors by visiting their website with some regularity, commenting on their shoutboxes or guestbooks, and participating in activities on their website, will generally make you a good e-neighbor.</p>
<p>If you want to learn more about webrings, Ray has an amazing <a href="https://brisray.com/web/webring-history.htm">history of webrings</a> that is worth a read. Usually, webrings and cliques will have some set of requirements for you to adhere to with your website and will require some sort of code to be present on your site in order to join.</p>
<h4>Examples of Webrings</h4>
<ul>
<li><a href="https://hotlinewebring.club/" target="_blank">Hotline Webring</a></li>
<li><a href="https://geekring.net/" target="_blank">geekring</a></li>
<li><a href="https://melonland.net/surf-club" target="_blank">MelonLand Surf Club</a></li>
</ul>
<p>If you join a webring, <strong>make sure your webring is visible from the page linked in the webring</strong>. This is usually your splash page or <code>index.html</code> page. Having to search for the "next" button on the webring widget can be annoying for visitors to your site, and it breaks the spirit of being in a webring. The idea is that you can feasibly travel to each website in the webring without having to click off into any other part of the site.</p>
<h4>Webring Directories</h4>
<ul>
<li>Brisray's <a href="https://brisray.com/web/webring-list.htm" target="_blank">Webring List</a></li>
</ul>
<p>Web cliques (shortened to just "cliques") are usually split into a couple of variations: either the clique is a link that goes back to the main clique website which then lists off all the members of the clique (a text clique) or there is an interactive element, such as creating pixel art, displayed on your own website that then links to other members in the clique in order to join (a pixel clique). Cliques can vary widely in theme, aesthetic, and overall function, so try to explore some and see which ones you'd like to add to your site. Pixel cliques are a fun way to express your creativity through pixel art, creating anything that could be collected (from teacups to pills to rooms in a tower, and everything in-between!) to be displayed on your website. (We try to keep up with a <a href="https://discuss.32bit.cafe/wiki/resources#pixel-cliques-clubs" target="_blank">running list on our Resources List</a>.) There are text cliques for your astrological sign, protectors of your websites, fictional character claims, what your website would be scented, whether or not you like cats, whether or not you're a <em>cool</em> cat... the possibilities are endless!</p>
<p>Fanlistings are also a type of clique in a way, but it's a list of people who are a fan of a particular thing, and having a website is not required. You can read more about fanlistings over at <a href="http://thefanlistings.org/tfl101.php" target="_blank">TheFanlistings.org</a>, which is a listing <em>of</em> fanlistings.</p>
<h4>Examples of Cliques</h4>
<ul>
<li><a href="https://aromatic.wings.nu/" target="_blank">Aromatic</a></li>
<li><a href="https://dedicated.mysticwater.org/" target="_blank">Dedicated</a></li>
<li><a href="https://peachsoda.net/element/" target="_blank">Earth Fire Water Air</a></li>
<li><a href="https://keysklubhouse.com/teenytowers" target="_blank">Teeny Towers</a></li>
<li><a href="https://lostletters.neocities.org/afternoontea/" target="_blank">Afternoon Tea</a></li>
</ul>
<h4>Web Clique Directories</h4>
<ul>
<li><a href="https://project.moudoku.com/" target="_blank">Project Clique</a>, a directory of web cliques</li>
<li><a href="https://cliqued.wings.nu/" target="_blank">Cliqued</a>, a collection of text cliques</li>
</ul>
</section>
<h3>5. Adoptables & For You Sections</h3>
<section>
<p>Finally, one of the best and most creative ways to interact with other sites on the web is through a "for you" page on your website: a part of your site dedicated to giving things away to your visitor, who presumably has a website of their own. You can share original graphics that visitors can "adopt" (putting it on their website) in the form of pets, drinks, food, trinkets, toys, or anything you'd like; free layouts or code snippets for anyone to use; interactive elements like a choose-your-own-adventure game; free fonts or other downloadable assets; free web materials like backgrounds or blinkies; or even awards!</p>
<p>If you find yourself not really wanting to create anything new for your visitors, but you want something to offer them for coming by, offering web resources that you've found (especially from the '90s and '00s!) with links to where you found them is a great way of sharing resources on the personal web. It's especially easy to just browse around on the <a href="https://archive.org/" target="_blank">Internet Archive</a>, finding and linking to things like backgrounds, gifs, blinkies, and website assets like bullets, dividers, and userboxes. You'd be helping preserve the "old web" in cases like that! And, bonus, you'd be offering something to your visitors that others may not have.</p>
<p>Adoptables are essentially a collection of pixel art you can download and put on your own website, or digital art that you offer to others to download and display on their sites. Adoptables, which are linked to the creator directly when placed on your website, can range from animals and toys to original characters and inanimate objects at any size. Typically, visitors can see them displayed on a "toybox" page on your website, but you can also have any type of page for collecting things from other websites, put them on your index page, or wherever you'd like. If you create a page full of original art for others to adopt, be sure to tell them to link back to you! And, for others, be sure to read the pages to make sure, when downloading adoptables, that you're downloading from the website of the original creator so you can properly link back.</p>
<h4>Examples of Adoptables</h4>
<ul>
<li><a href="https://itsyaboypedro.neocities.org/adoptables" target="_blank">Pedro's Adoptables</a></li>
<li><a href="https://cinni.net/?z=/adopt" target="_blank">Cinni's Adoption Center</a></li>
<li><a href="https://paintkiller.neocities.org/new/adoptions" target="_blank">PAINTKILLER's Adoptions</a></li>
<li><a href="https://lostletters.neocities.org/toybox/" target="_blank">Lost Letters' Toybox</a></li>
</ul>
<p>Awards can either be free for anyone to download or they can be used as a linkshare. Website owners can submit their websites to pre-determined categories in order to be judged to receive an image to display on their website. This is not just a way to interact with folks visiting your site, but it's also a good way to display winners in a linkroll of sorts, who then link to you as well through the award. It can also be used as a form of curation of favorite personal web content you come across for people visiting your site.</p>
<h4>Examples of Awards</h4>
<ul>
<li><a href="https://nostalgic.neocities.org/goodies/awards/awards" target="_blank">Nostalgia for the 2000s Awards</a></li>
<li><a href="https://dewside.neocities.org/awards" target="_blank">Dewside Awards</a></li>
<li><a href="https://mincerafter42.github.io/fun/8601award.html" target="_blank">Viatrix's ISO 8601 Award</a></li>
<li><a href="https://softheartclinic.neocities.org/subpages/awards" target="_blank">Soft Heart Clinic's Awards</a></li>
</ul>
</section>
<h3>6. The independent web depends on it</h3>
<section>
<p>If websites were islands, I don't think the internet would be very interesting. It certainly wouldn't be the World Wide Web, which is meant to be linked together and explored. Interacting and, ultimately, participating in the independent, non-corporate web is what will make more people create websites. The more people that you interact with, the more they're likely to interact with others, too; and more importantly, keep their website alive.</p>
<p>Keep in mind that this isn't a popularity contest, and there's no "best" personal site. The best personal site is yours—the one that you create yourself, that shares the things you want to share and the things that make you happy or the subjects you know a lot about. Your work in progress inspires other works in progress; and, sorry to say, but your site may never feel <em>done</em>—but people will keep coming and encouraging you. Keep it up! Spread the word! Happy browsing!</p>
</section>
<blockquote>Need ideas for pages for your website? Check out our <a href="../websiteideas/">Ideas for Your Personal Website</a> guide.</blockquote>

150
content/guides/internetsafety.html Normal file
View File

@ -0,0 +1,150 @@
---
title: Staying Safe Online
author: Jay
aliases:
- /internetsafety
---
<h2>Staying Safe Online</h2>
<blockquote>Lovingly written and submitted by <a href="https://transrats.neocities.org" target="_blank">Jay</a>. Thank you, Jay!</blockquote>
<section>
<p>The internet can be a scary place, and there's a lot that could go wrong. Unfortunately, many internet safety guides are incomplete at best and anxiety-inducing at worst. The intention here is to provide a semi-quick primer on internet safety, with links and ideas on how to get more in-depth if you so choose.</p>
</section>
<h3>Personal Details: Do I need to be anonymous?</h3>
<section>
<p>One important thing to remember about the internet — specifically social media spaces and public Discord servers — is you never really know who's looking at what you post. Privating your accounts and only allowing access to close friends is a simple way to avoid this, but what if you want to be a part of a bigger space or want to get your work (whether it be art, writing, an online store) out there? Not all of these points will apply equally to everybody, and it's important to keep your own use-cases in mind. But here's a rundown of information you should generally keep to yourself:</p>
<h4>Full legal name/last name</h4>
<p>It's important to keep these secret in the broader web, especially if you want to keep your personal and work lives separate! By knowing your legal name and/or last name, it's very possible people could find your relatives, school(s), place of work, and more depending on what online databases your information has found itself into.</p>
<p>If you have a really unique first name, it might be best to keep that private as well.</p>
<h4>Address/location</h4>
<p>Obviously you don't want strangers appearing at your house, but as a rule of thumb you shouldn't post your general location online either; that means not saying the name of the place if you're going to a specific small business or local restaurant. Sometimes people post online if they're going to a big event, such as a concert or a convention. Think about waiting until after the event to advertise that you were there!</p>
<p>A lot of the time, photos you take on your phone will have location data embedded in them. This is called metadata; it's important to remove this before posting photos! A quick and easy way to do this just involves taking a screenshot of the photo you want to post, then posting the screenshot. If you want to go more in-depth, you can use <a href="https://github.com/szTheory/exifcleaner" target="_blank">Exifcleaner</a>.</p>
<p>If you want to follow things like school-related pages on social media, it's a good idea to at least have a separate account for that sort of thing.</p>
<p>Generally, sharing your country or state is safe. Just be cautious, of course.</p>
<h4>Age, primarily if you're a minor</h4>
<p>This cannot exactly be used to track you, but it's important to avoid predators whenever possible. If you're a child/teenager, advertising that freely will often cause more predators to interact with you.</p>
<h4>Personal issues, family drama/information, etc.</h4>
<p>Not everyone has a good place to turn to when they need to vent, and that leads to many using social media as a way to cope. This is not inherently bad. If you are going to discuss things like personal mental health struggles, your triggers/traumas, or family issues, it's at least best to do this on a private account. Venting into the void likely won't help you in the long-term, and putting your most vulnerable moments out on the public web can (and sometimes will) be used against you.</p>
</section>
<h3>Password Safety</h3>
<blockquote>This section was lovingly written and submitted by <a href="https://vm70.neocities.org" target="_blank">VM</a>. Thank you, VM!</blockquote>
<section>
<p>The websites you use that require sign-up keep track of your data with your account. Your login credentials, which are made up of both your username and your password, help websites verify your identity so that you can log in. If someone else can guess the password you use, they can access your account. Strong passwords are hard for others to guess, so they keep your info safe from online attackers.</p>
<p>Think of your password like a key for your mailbox. You should only give copies of your key to the people you trust the most (including yourself) with the letters in your mailbox. If someone gets a hold of your key, they can open your mailbox and read your letters. If you use the same key for different mailboxes, they can read your mail from multiple different mailboxes. Similarly, it's important to make sure that you don't share your login credentials so that you can maintain control over who gets to access your account data.</p>
<ul>
<li>If you make your passwords yourself, make sure they are easy for you to remember but hard for others to guess.
<ul>
<li>Don't use common passwords like "password", "123456", or "555555". These are very easy to guess; for example, here are <a href="https://github.com/danielmiessler/SecLists/blob/master/Passwords/2020-200_most_used_passwords.txt" target="_blank">200 of the most common passwords used in 2020</a>.
<li>Don't use single words as passwords like "fortune". These are easy to guess with enough computer power and time. Adding numbers to the end of a single word (like "cookie3") makes it only slightly harder to guess.
<li>Don't use info that other people know about you in your password like names, dates, addresses, phone numbers, pets' names, or car models. If your friends can find it, so can possible attackers.
<li>Make your password at least 16 characters long. Longer passwords with less special characters are usually harder to guess than shorter, more complicated passwords with more special characters.
<li>Include different types of characters in your password like numbers, uppercase / lowercase letters, and special characters.
</ul>
<li>You can use tools to help you make secure passwords if you have trouble coming up with them.
<ul>
<li>Use password checkers like <a href="https://password.kaspersky.com/" target="_blank">Kaspersky Password Checker</a>, <a href="https://www.security.org/how-secure-is-my-password/" target="_blank">security.org Password Checker</a>, or <a href="https://www.uic.edu/apps/strong-password/" target="_blank">UIC Password Checker</a> to make sure they're secure.
<li>Make passwords with special programs like the <a href="https://www.random.org/passwords/" target="_blank">RANDOM.ORG Password Generator</a>.
<li>Use virtual dice like in <a href="https://diceware.dmuth.org/" target="_blank">Diceware</a> to make passphrases from words.</li>
</ul>
<li>Don't share your passwords with other people, especially not with strangers. Doing this removes your control over who gets to see and share your password.
<ul><li>Never share passwords through phone calls, emails, or text. For example, customer service agents shouldn't ask you for your password.</ul>
<li>Never use the same password for two different accounts. Some websites you log into may have their login credentials leaked or published online through a data breach. This gives attackers clues for accessing your accounts on other websites.
<ul>
<li>Tools like <a href="https://haveibeenpwned.com/" target="_blank">Have I been Pwned?</a> or <a href="https://monitor.firefox.com/" target="_blank">Firefox Monitor</a> help check if your email was listed in a data breach.
</ul>
<li>Use tools to help keep track of passwords if you have trouble remembering them.
<ul>
<li>Password managers like your browser's integrated password manager, <a href="https://keepassxc.org/" target="_blank">KeePassXC</a>, and <a href="https://bitwarden.com/" target="_blank">BitWarden</a> can help you securely store passwords and synchronize them across devices. Most of them come with built-in password generators.
</ul>
<li>Use multi-factor authentication, also known as MFA or 2FA, to further protect your account. This lets the website send you a code to type in after entering your login credentials. This adds an extra layer of defense but makes logging in slower.
<li>Set a reminder to regularly update passwords once every few months. This makes sure that the passwords you use won't stay relevant in the event of a data breach.</li>
</ul>
</section>
<h3>Talking to People Online</h3>
<section>
<p>Not everybody on the internet is out to get you, obviously. But some people are, and it's important to be able to identify red flags and know what to do if somebody starts to make you uncomfortable. Coping with harassment and abuse is a bit out of the scope of this guide, but hopefully these tips can help you avoid some of it to begin with.</p>
<h4>Don't feed the trolls</h4>
<p>If somebody is harassing you or your friends, showing up in comment sections looking for a fight, or otherwise making insane, inflammatory statements and nobody knows who they are, they might be just trying to get a rise out of you. The best thing to do is block and move on; do not engage. You will not change anybody's worldview in a YouTube comment section, and by engaging with them (especially publicly) you've given them an opportunity to elaborate on their often hateful views and spread it to more onlookers. People who do this often crave attention; if you don't give it to them, they will normally stop, or at the very least move on to another target.</p>
<p>It can be very fun to mess with these people and call them out publicly, but it's important you try to fight that urge. Even if you find it funny, people scrolling past may be upset by the things the troll says, and putting yourself into a cycle of hatred and constantly talking to people who make you upset is not good for you.</p>
<h4>Stay safe from malicious people</h4>
<p>If you are a child/teenager, and an adult online is acting overly-friendly, calls you mature, wants to share personal life details, or otherwise treats you like the center of their world, be wary. This is often a red flag, and people who do this are often dangerous to you and your friends.</p>
<p>At any age, people talking about and asking for lots of personal details (real name/family life/trauma/age/location) shortly after meeting you is a red flag.</p>
<p>Block people if they make you feel uncomfortable or upset. You do not owe anyone an explanation for no longer talking to them, and this is especially so for folks you meet online. Trust your gut, and ask a trusted friend for input if you're unsure.</p>
<h4>Avoid suspicious links and downloads</h4>
<p>Don't click fishy links! Always check the full URL of links sent to you, especially by strangers. Make sure, for example, a Paypal link you recieve DOES go to paypal.com — not 'paypal.xyz' or 'paypal.payment.co'. You can use <a href="https://www.urlvoid.com/" target="_blank">URLvoid</a> to check a link if you're unsure about it. You never know what a scam website might be doing with your data or device!<p>
<p>Don't download/open fishy files! Always try to check with other real people (e.g. not from people in YouTube comment sections) if a program is legitimate or not. <a href="https://www.virustotal.com/gui/home/upload" target="_blank">VirusTotal</a> can help you if you already did download a file and are unsure if it's safe to open, but it's best not to download suspicious files to begin with.</p>
</section>
<h3>Separation of Identity</h3>
<section>
<p>The world is very connected now! Many schools, workplaces, and local event groups will have an online presence and may even require you to be a part of it. If you want to take part in these things as well as have your own online presence, it's a good idea to separate your identities.</p>
<h4>Using different names</h4>
<p>If you have interests you don't want real-life friends or family to know about, or you're closeted as queer and could be at risk if somebody found out, it's a good idea to use an alias online. If you have some accounts you want to share with people in real life and some that you don't, make sure you use different usernames/aliases with them, and don't link one to the other. Don't put your face on anything you'd be upset at somebody in real life potentially finding.</p>
<h4>Email</h4>
<p>It's a good idea to have at least two emails; one for personal use, which does not use your legal name, so that you can give and recieve email from people online, and one for 'professional' use. The professional email should have your legal/full preferred name and should be something you'd be fine giving to an employer. 32bit.cafe actually offers free email, if you're in the market for a new one.</p>
</section>
<h3>Downloads</h3>
<section>
<p>Adblockers are obvious, but there's other helpful programs you can download or use to keep yourself safe online.</p>
<ul>
<li>Block trackers</li>
<ul>
<li><a href="https://privacybadger.org/" target="_blank">Privacy Badger</a></li>
</ul>
<li>Block ads</li>
<ul>
<li><a href="https://ublockorigin.com/" target="_blank">uBlock Origin</a></li>
<li><a href="https://github.com/gorhill/uMatrix" target="_blank">uMatrix</a> (for more advanced users of uBlock Origin)</li>
<li><a href="https://letsblock.it/filters/search-results" target="_blank">Let's Block It</a> (works with uBlock Origin to block scammy search results)</li>
</ul>
<li>Avoid scams on Amazon and eBay</li>
<ul>
<li><a href="https://www.fakespot.com/" target="_blank">Fakespot</a></li>
</ul>
<li>Delete metadata</li>
<ul>
<li><a href="https://github.com/szTheory/exifcleaner" target="_blank">ExifCleaner</a></li>
<li><a href="https://play.google.com/store/apps/details?id=com.jarsilio.android.scrambledeggsif&pli=1" target="_blank">ScrambledExif</a></li>
</ul>
<li>More secure search engine</li>
<ul>
<li><a href="https://duckduckgo.com" target="_blank">DuckDuckGo</a></li>
</ul>
</ul>
</section>
<h3>Further Reading</h3>
<section>
<ul>
<li><a href="https://websafety.carrd.co/" target="_blank">Staying Safe on the Internet: Tips for Better Personal Protection</a></li>
<li><a href="https://shouldiblockads.com/" target="_blank">Should I block ads? yes, you should use an ad blocker.</a></li>
<li><a href="https://staysafe.org/10-tips-to-stay-safe-online/" target="_blank">10 Tips to Stay Safe Online</a></li>
<li><a href="https://www.reddit.com/r/degoogle/comments/huk4rp/why_you_should_degoogle_intro_degoogling/" target="_blank">Why You Should DeGoogle & Intro DeGoogling Techniques</a></li>
<li><a href="https://www.privacyguides.org/en/" target="_blank">The Guide to Restoring Your Online Privacy</a></li>
<li><a href="https://crimethinc.com/2020/08/26/doxcare-prevention-and-aftercare-for-those-targeted-by-doxxing-and-political-harassment" target="_blank">Doxcare: Prevention and Aftercare for Those Targeted by Doxxing and Political Harassment</a></li>
</ul>
</section>

354
content/guides/websiteideas.html Normal file
View File

@ -0,0 +1,354 @@
---
title: Ideas for Your Personal Website
author: Star
aliases:
- /websiteideas
---
<h2>Ideas for Your Personal Website</h2>
<blockquote>Lovingly written and submitted by <a href="https://fencraft.leprd.space/" target="_blank">Star</a>. Thank you, Star!</blockquote>
<section>
<p>You've just made a website, but now you're unsure where to go from here. Here are some ideas for things to add and techniques to learn. If you need more inspiration, browse other folks' websites (start on <a href="https://neocities.org" target="_blank">Neocities</a>!) and surf the 'net! You'll surely find something that you want to add to your own personal website.</p>
</section>
<section>
<ul>
<li><a href="#pages">Page Ideas</a></li>
<li><a href="#topics">Potential Website Topics</a></li>
<li><a href="#css">CSS & Page Design</a></li>
<li><a href="#art">Art & Graphic Design</a></li>
<li><a href="#tech">Technical Tasks</a></li>
<li><a href="#accessibility">Accessibility</a></li>
<li><a href="#interactivity">Interactivity</a></li>
<li><a href="#social">Social</a>
</ul>
</section>
<h3 id="pages">Page Ideas</h3>
<section>
<ul>
<li>Make an /about page</li>
<li>Make a <a href="https://sive.rs/nowff" target="_blank">/now</a> page
<ul>
<li>Sort of like a six-monthly social media update status - sharing your current projects and where you are in your life, like if an old friend asked, "So, what have you been up to?"</li>
</ul>
<li>Make a <a href="https://uses.tech" target="_blank">/uses</a> page
<ul>
<li>You can use this for your favourite programs, hardware, art equipment, guitars, stationary, tools... anything you use!</li>
</ul>
<li>Make a fonts page, crediting and displaying all the fonts on your site</li>
<li>Create a site map
<ul>
<li>A simple list, often bullet-pointed as a tree, of all the pages on your website</li>
</ul>
</li>
<li>Make a credits page with all the tools, tutorials, and resources you used to make your site</li>
<li>Make a static blog
<ul>
<li>You don't need any <a href="https://discuss.32bit.cafe/wiki/resources#free-blogging-platforms-static-site-generators" target="_blank">blogging software</a> if that's a bit overwhelming right now. Just create a new webpage or section whenever you want to add a post, and then manually update an index or any other links.</li>
</ul>
</li>
<li>Make a personalised 'dashboard/homepage'
<ul>
<li>Like the vintage Yahoo homepage, this might include a news feed, the weather, the moon phase, links to check every day, a 'thought for the day,' and so on</li>
</ul>
</li>
<li>Make a <a href="https://marcus.io/blog/making-rss-more-visible-again-with-slash-feeds" target="_blank">/feeds</a> page
<ul>
<li>If you have multiple RSS feeds, people can find them all in one place! For example, one for your blog, one for any social media, etc.</li>
</ul>
<li>Create a page to display old versions of your website design (if it's been around a while)
</li>
<li>Create a secret page (that people have to search for or solve a puzzle to find)</li>
<li>Add a changelog
<ul>
<li>This is a list of updates to your website over time. <a href="https://keepachangelog.com/en/1.0.0/" target="_blank">Why Keep a Changelog?</a></li>
</ul>
</li>
<li>Make a <a href="https://webgardens.neocities.org" target="_blank">Webgarden</a></li>
<li>Make a shrine
<ul>
<li>This is a page dedicated to a favourite thing - often things like music artists, characters, movies, games, genres, and special interests.</li>
</ul>
<li>Create a page about your favorite memories (especially nostalgic ones) </li>
<li>Create a dream journal</li>
<li>Create a media log (books, tv, games, board games, movies)</li>
<li>Make an art or craft gallery</li>
<li>Create a 'place' evoking a physical space
<ul><li>This could be, for example, a house, a room, or a place in a town.</li>
</ul>
</li>
<li>Make a collections/library page
<ul>
<li>You could include things you collect or own a lot of in one category including images like stamps, gifs, blinkies, and also real-life objects.</li>
</ul></li>
<li>Create a page dedicated to your personal history on the net
<ul><li>You could talk about what websites you used to hang out on, what your processes were like in the past, and how your internet usage changed over time.</ul></li>
<li>Make a 'to-do list' page, tracking your progress on habits, projects, and chores</li>
<li>Make a page sharing layouts, bits of layouts with others, or your favorite code snippets</li>
<li>Make a custom 404 page on your site</li>
<li>Make a page emulating a specific old-school website style</li>
<li>Create a resources page with links to your favorite <a href="https://discuss.32bit.cafe/w/resources" target="_blank">personal web resources</a></li>
<li>Make a graphics page where you share site assets you've made with others</li>
<li>Collect a page of internet bumper stickers, stamps, 88x31 buttons, and other website owners' banners</li>
</ul>
</section>
<h3 id="topics">Potential Website Topics</h3>
<p>Write about any of the following on your website or use these ideas to spark more about aspects of you to cover:</p>
<section>
<ul>
<li>A manifesto about why you're on the small web</li>
<li>Your favourite recipes</li>
<li>Any original characters, constructed languages (conlangs), or worldbuilding you've done</li>
<li>A wishlist for your collections so you can keep track of what you'd like to have in the future</li>
<li>Your pets, including photos and videos</li>
<li>Tutorials for things you know how to do</li>
<li>Resources you have made (e.g. custom RPG content, knitting patterns) </li>
<li>Favourite quotes, poems, or lyrics</li>
<li>Log stats from a game of your choice</li>
<li>Your outfits, closet, and wardrobe items</li>
<li>Look at your current social media presence. Is there anything you want to cross-post from there to your own site?
<ul><li>This could be things like Tumblr posts you are especially proud of or favourite Instagram photos.</li>
</ul>
</section>
<h3 id="css">CSS & Page Design</h3>
<section>
<ul>
<li>Add the correct <a href="https://usability.yale.edu/web-accessibility/articles/headings" target="_blank">heading information and tags</a> to all your pages</li>
<li>Add meta tags to your website/pages:
<ul><li>Start with <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#adding_an_author_and_description" target="_blank">author and description</a>, then look at <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#other_types_of_metadata" target="_blank">OpenGraph data</a></li></ul>
<li>Make a temporary site redesign for an upcoming event (like <a href="https://tilde.32bit.cafe/~slug/events/halloween-2023/" target="_blank">Halloween</a>!)</li>
<li>Try to replicate the style of one of your favourite bits of media (e.g. computer game screens, typography, architecture)</li>
<li>Add a custom scrollbar</li>
<li>Incorporate a clickable image map</li>
<li>Learn how to <a href="https://albertwalicki.com/blog/creating-shapes-in-css" target="_blank">make shapes in pure CSS</a></li>
<li>Visit <a href="https://codepen.io" target="_blank">Codepen</a> and play with code, find something to use or get inspired</li>
<li>Recreate a physical interface or object from real life (e.g. map, restaurant menu, computer screen, phone, book)</li>
<li>Make a new <a href="../themes/">theme</a> for the 32-Bit Cafe website</li>
</ul>
</section>
<h3 id="art" name="art">Art & Graphic Design</h3>
<section>
<ul>
<li>Make a pattern to use as a background</li>
<li>Make a favicon</li>
<li>Add a custom cursor</li>
<li>Make a 88x31 button so people can to link to you on button walls</li>
<li>Create downloadable pixel art other people can adopt from your site</li>
<li>Learn to make an animated gif</li>
<li>Make a pixel-art based layout</li>
<li>Use the <a href="https://web.archive.org/" target="_blank">Wayback Machine</a> to surf old pixel sites for inspiration</li>
<li>Make a 'doll base' or other piece of art that people can use to create their own art</li>
<li>Run a doll fashion contest where people submit designs each round</li>
<li>Make a set of pixel desktop icons</li>
<li>Make a full set of cursors to use on your desktop (or download someone else's)</li>
<li>Make or collect some wallpapers for your desktop</li>
<li>Make a set of user icons
<ul>
<li>Traditionally, user icons are 150x150px, as seen on LiveJournal or <a href="https://dreamwidth.org" target="_blank">Dreamwidth</a></li>
</ul>
</li>
</ul>
<h3 id="tech">Technical Tasks</h3>
<ul>
<li>Set up an RSS feed</li>
<li>Make a blog with a <a href="https://discuss.32bit.cafe/wiki/resources#free-blogging-platforms-static-site-generators" target="_blank">self-hosted platform or static-site generator</a></li>
<li>Replace Google Fonts with <a href="https://discuss.32bit.cafe/wiki/resources#typefaces-fonts" target="_blank">self-hosted fonts or a CDN replacement</a></li>
<li>Archive your site on the <a href="https://web.archive.org/" target="_blank">Wayback Machine</a> at the Internet Archive</li>
<li>Set up a routine for backing up your website locally</li>
<li>Make sure your folders and files are nice and tidy on both your local storage and your website itself</li>
<li>Move your site off Neocities or other hosts and learn to self-host it</li>
<li>Transition to more robust text editors like <a href="https://notepad-plus-plus.org/" target="_blank">Notepad++</a>, <a href="https://code.visualstudio.com/" target="_blank">Visual Studio Code</a>, or <a href="https://brackets.io/" target="_blank">Brackets</a></li>
<li>Learn how to use Git version control
<ul>
<li>You can use this for tracking changes over time and to be able to easily rollback any mistakes.</li>
</ul>
</li>
<li>Learn to use FTP
<ul>
<li>FTP is used for uploading pages to your website more easily.</li>
</ul>
</li>
<li>Self-host apps for your friends</li>
<li>Think about the place you use your computer and make your space more ergonomic
<ul><li>Get a chair and other tools that support your posture, a tray to use your laptop without it overheating, and think about the physical space, if it needs tidying, decorating, or organising.</li></ul>
<li>Tidy your cables and clean your PC fans</li>
</ul>
<h3 id="accessibility">Accessibility</h3>
<ul>
<li>Make your site easier to browse for slower connections
<ul><li>Resize and compress all your images to actual resolution it displays at to decrease file size and load times
<li>Add <a href="https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading" target="_blank">lazy loading</a> by including <code>loading="lazy"</code> on pages with tons of images
<li>Use image sprites</li></ul>
<li>Check your site's <a href="https://www.websitecarbon.com" target="_blank">carbon emissions data</a> and learn about <a href="https://solar.lowtechmagazine.com" target="_blank">low-tech website-making</a>
<ul>
<li>You can make your own simple, static website-carbon display for your site instead of using their code to ensure you don't incur more emissions by using it!</li>
</ul>
</li>
<li>Make your site's layout responsive for mobile visitors</li>
<li>Check how much your site costs to load</li>
<li>Make a page on your site mobile accessible</li>
<li>Check if your site is <a href="https://discuss.32bit.cafe/wiki/resources#accessibility" target="_blank">accessible for screen readers</a></li>
<li>Download a free screen reader and see what your website is like</li>
<li>Make a light mode and dark mode for your site</li>
<li>Create a 'foyer' or 'splash' page ahead of your main index with any necessary information for visitors <ul><li>If you use flashing imagery, have NSFW content, aren't optimised for mobile, or need visitors to have some other kind of warning, this is absolutely recommended.</li></ul>
<li>Add JavaScript so visitors can toggle to freeze gif and animations like <a href="https://github.com/ctrl-freaks/freezeframe.js" target="_blank">freezeframe.js</a></li>
</ul>
<h3 id="interactivity">Interactivity</h3>
<ul>
<li>Make a dollmaker or a <a href="https://picrew.me/en" target="_blank">Picrew</a>-style game</li>
<li>Make a layout or page that changes the design based on the day of the week, month of the year, or time of day</li>
<li>Make a personality quiz with a result that website owners can post on their sites</li>
<li>Make a choose-your-own-adventure story
<ul><li>You can use something like <a href="https://twinery.org/" target="_blank">Twine</a> to help organize your story and post it on your site.</li></ul>
<li>Put a chatbox, comment system, or guestbook on your site</li>
<li>Make a <a href="https://thoughts.melonking.net/guides/creating-a-3d-world-in-x3d" target="_blank">3D digital location</a> for people to visit</li>
<li>Add a cursor trail</li>
<li>Create something on your site that, when you click on it, it makes a sound</li>
<li>Display a random quote, picture, facts about you, or interesting tidbits that change at the push of a button</li>
<li>Incorporate a widget or page where visitors can see local (to them) information (e.g. weather, sunset time)</li>
<li>Make a theme-switcher</li>
<li>Make a background-switcher</li>
</ul>
<h3 id="social">Social</h3>
<ul>
<li>Write a blog post responding to someone else's blog post</li>
<li>Set up an <a href="https://rss.32bit.cafe/i/" target="_blank">RSS feed reader</a> to read other websites</li>
<li>Make a link or bookmark page connecting to other favourite websites</li>
<li>Make a website award and gift it to another site</li>
<li>Join some <a href="https://brisray.com/web/webring-list.htm" target="_blank">webrings</a>
<ul>
<li>A webring is a group of sites with similar themes that link to one another.</li>
</ul>
</li>
<li>Join a <a href="https://discuss.32bit.cafe/wiki/resources#pixel-cliques-clubs" target="_blank">pixel clique</a>
<ul>
<li>A pixel clique is a group of sites that collect pixel art on a theme from other members.</li>
</ul>
</li>
<li>Learn more about how to <a href="https://32bit.cafe/interactingontheweb/">interact with other websites as a website owner</a></li>
<li>Join a 32-Bit Cafe Code Jam, make a <a href="https://sundaysites.cafe/howto" target="_blank">Sunday Site</a>, or go to an <a href="https://events.indieweb.org" target="_blank">Indieweb Personal Website-Maker event</a>
</li>
<li>Join some <a href="https://thefanlistings.org/" target="_blank">fanlistings</a>
<ul>
<li>A fanlisting is a group of sites that are fans of the same thing.</li>
</ul>
</li>
<li>Set up <a href="https://discuss.32bit.cafe/wiki/resources#creating-managing-and-finding-webrings" target="_blank">your own webring</a>, fanlisting, web club, or pixel clique</li>
<li>Explore small-web social media such as <a href="https://dreamwidth.org/" target="_blank">Dreamwidth</a>, <a href="https://spacehey.com/" target="_blank">SpaceHey</a>, or <a href="https://www.wired.com/story/how-to-get-started-use-mastodon/" target="_blank">Mastodon</a></li>
</ul>
</section>

16
content/mission.html Normal file
View File

@ -0,0 +1,16 @@
<h2>What We Do</h2>
<section>
<p>The 32-Bit Cafe, first and foremost, is a community as a resource. We're a loose collective of website developers, artists, website designers, writers, technologists, university students, and internet enthusiasts at varying levels of expertise. We believe that building your own website is important, and this is a hobby that needs to be fostered within a non-judgmental space. Talking to folks interested in the same hobby as you is super fun and building stuff with them is even more fun, so we like to do both.</p>
</section>
<section>
<p>The best part about the 32-Bit Cafe is that we're trying to move the internet forward productively in the ways we can make an impact, participating in the creation of web services, websites, and weird, wacky web projects. We want to bring back the idea of personal websites to the many of us who have been stuck in social media cycles since the emergence of Web 2.0. Not to mention, we're not just helping people build their first websites; we're also making our own hosted services for anyone to use and participate in to help with decentralizing hosted services.</p>
<blockquote>Need an RSS reader, for instance? We've got you covered with a <a href="https://rss.32bit.cafe/" target="_new">FreshRSS reader</a>. And more services are being added all the time, thanks to community members!</blockquote>
</section>
<section>
<p>We do believe in the <a href="https://cheapskatesguide.org/articles/small-internet.html" target="_new">small internet</a>, the <a href="https://smallweb.page" target="_new">small web</a>, the <a href="https://www.slowweb.io/" target="_new">slow web</a>, the personal web, the anti-corporate web: whatever you want to call it, it's grassroots and it's been steadily growing since even before the global pandemic in 2020. We want to stop depending on corporations for everything when it comes to our web services, and we want to help promote building more infrastructure to the internet as a whole. We want more people to build websites for <em>fun</em>, not just to make money. Everyone benefits from an open, free internet, and that includes more self-expression that isn't on social media platforms.</p>
<p>Our goals are along the same lines of other communities that are parallel to our values and technology-centric: the <a href="https://indieweb.org" target="_new">Indieweb</a>, the <a href="https://thoughts.melonking.net/guides/introduction-to-the-web-revival-1-what-is-the-web-revival" target="_new">Web Revival</a>, the beginning of the <a href="https://yesterweb.org" target="_new">Yesterweb</a>, and <a href="https://tildeverse.org/" target="_new">Tildeverse</a> communities like <a href="https://tilde.team/" target="_new">tilde.team</a>. We are not creating anything brand new; we're simply contributing to the decentralization of these concepts of communities within a smaller, more intimate space so community-building is earnest and competent. We are one of many, and happy to be part of this side of the 'net bringing folks into the fold of building the personal web.</p>
</section>

5
content/news/2023-32bitcoin.html Normal file
View File

@ -0,0 +1,5 @@
---
title: "Announcing 32-Bitcoin Cafe"
date: 2023-04-01T00:00:00-07:00
---
<p><s>We're happy to announce our new <a href="https://nft.32bit.cafe/">32-Bitcoin Cafe</a> NFT project! <a href="https://nft.32bit.cafe/#faq-01-175471">Learn more at the 32-Bitcoin Cafe site</a> and start collecting your CryptoCuppaz today.</s> <em>edit:</em> <strong>April Fools!</strong></p>

40
content/news/2023-april-update.html Normal file
View File

@ -0,0 +1,40 @@
---
title: "April Update"
date: 2023-04-07T00:00:00-07:00
---
<p>it's great to see so many new faces here these past couple of days! this community is really starting to take shape, and i think now might be a good time to go over our goals and what we have planned for the near future.</p>
<p>so, if you're just joining us, welcome! we're an indieweb space for adults who want to get away from the corporate-centric modern internet and embrace the creative, people-oriented, community spirit of the old web. <a href="../discord">this discord server</a> is where we started, but we hope to build something great together.</p>
<details>
<summary><strong>What do we have right now?</strong></summary>
<ul>
<li>we have the discord!</li>
<li>we have this website! it contains some tutorials and resources to help you build your own place on the web, among other things.</li>
<li>we offer free email accounts, [you]@32bit.cafe. there's no major usage restrictions, just don't spam or otherwise abuse the service. contact kaylee if you're interested for now, otherwise we will have an intake form soon!</li>
<li>we also sometimes have events, to celebrate and show off our members' creativity! see <a href="../spring23">our spring event</a> for the latest one.</li>
</ul>
</details>
<details>
<summary><strong>Where are we headed?</strong></summary>
<p>this is the exciting part. we have a lot of improvements planned for the next couple of weeks; in no particular order:</p>
<ul>
<li>the website will have some new themes and a bit more polish</li>
<li>more useful content on the site!</li>
<li>we're working on a pubnix / tilde server! everyone will soon have access to a linux shell account, with web and gemini hosting as well as other fun stuff.</li>
<li>we'll soon have a webring for our members to join!</li>
<li>we hope to host a gitlab (or similar) instance for software projects</li>
<li>your email account will soon feature protonmail style encryption! note that you will have to reset your password to activate it when this change is brought in</li>
<li>and much more!</li>
</details>
<details>
<summary><strong>How can I help?</strong></summary>
<p>32-bit cafe is a community project, and everyone is welcome to help build it! you can contribute in many different ways, but here are just a few:</p>
<ul>
<li>you can spread the word, on other servers, forums, or your own site by <a href="../linktous/">linking back to us</a>!</li>
<li>anyone can make their own theme for our website! you can upload a custom CSS stylesheet which will be publicly available in the theme selector! this process is a bit janky and requires manual oversight right now, but soon there will be a way to edit and preview your code before submitting it - just like on myspace :D</li>
<li>art of any kind is incredible! buttons, banners, posters, whatever you want to make. (please no AI generated material - as cool as the technology is, it kinda goes against the spirit of a human-centric community)</li>
<li>we need more content for the site! if you have resources you want to share, knowledge you want to impart, or anything else you think might be useful let us know!</li>
<li>if you're a techy person and you want to help with the infrastructure side of things, let us know and you can join the technomancy group!</li>
<li>last but definitely not least, if you have any other ideas for what we could be doing as a community, please let us know!! suggestions are more than welcomed, they're encouraged :) we're having amazingly productive conversations in our discord about what to do next.</li>
</ul>
</details>
<p>cheers and stay tuned!</p>

6
content/news/2023-concluding-first-codejam.html Normal file
View File

@ -0,0 +1,6 @@
---
title: "Concluding Our First Community Codejam"
date: 2023-08-12T00:00:00-07:00
---
<p>Our <a href="https://tilde.32bit.cafe/~hermit/community_jam_1/" target="_new">first community jam</a> was a total success! Check out the <a href="https://tilde.32bit.cafe/~hermit/community_jam_1/submissions.html" target="_new">entries</a> of our amazing community members.</p>
<p>We hope you'll join us on August 20th for our next <a href="https://tilde.32bit.cafe/~hermit/community_jam_2/" target="_new">code jam</a> that runs through August 26th!</p>

8
content/news/2023-discord-anniversary-event.html Normal file
View File

@ -0,0 +1,8 @@
---
title: "Discord Anniversary Event"
date: 2023-11-08T00:00:00-07:00
---
<p>As the year begins to conclude, we're gearing up for some exciting events around the Cafe. Our Discord anniversary event is in full swing there, but stay tuned for our website's anniversary event in March!</p>
<p>Our year-end event is just around the corner, and we're all super excited about what our <a href="../community/">Event Planners</a> are up to. We'll give more details about that event in December.</p>
<p>If you're not into Discord much, join us over on our <a href="https://discuss.32bit.cafe" target="_blank">Discuss forum</a>, where we're sharing links and resources with each other and the personal web at large.</p>
<p>Keep building up the independent web! We're counting on you!</p>

7
content/news/2023-first-codejam-kickoff.html Normal file
View File

@ -0,0 +1,7 @@
---
title: "Kicking Off Our First Codejam"
date: 2023-07-10T00:00:00-07:00
---
<p>New event alert! Inspired by <a href="https://sundaysites.cafe/" target="_new">Sunday Sites</a>, we are kicking off a monthly event: our first <a href="https://tilde.32bit.cafe/~hermit/community_jam_1/" target="_new">Community Code Jam</a> starts July 16 that will run until July 22. The theme is <strong>That Special Thing Close to My Heart</strong>, where you create a webpage for your fleeting interests during that 7-day timeframe. It could be about your favorite book, movie, or any of your favorite things; maybe something you enjoyed growing up or a hobby you had during the global pandemic. Whatever it's about, as long as you make a webpage dedicated to that topic during this week, send it in!</p>
<p>On July 22, you'll be able to <a href="https://tilde.32bit.cafe/~hermit/community_jam_1/" target="_new">submit</a> your webpage. Start thinking about ideas! If you want coding buddies, join us in the <a href="../discord">Discord</a> for live coding sessions together throughout the week.</p>
<p>Thank you so much to our <a href="../community/">Event Planners</a> for their hard work on this! So excited to see what everyone does!</p>

6
content/news/2023-halloween-event.html Normal file
View File

@ -0,0 +1,6 @@
---
title: "Halloween 2023 Event"
date: 2023-10-01T00:00:00-07:00
---
<p>The month may have just started, but I hope you're all ready for Halloween! Our <a href="/community">Event Planners project team</a> have planned a <a href="https://tilde.32bit.cafe/~slug/events/halloween-2023/" target="_new">Halloween event</a> that starts on October 11 and runs through October 25. Even if you aren't confident in your web-building skills, there's a ton of ways to get involved and participate.</p>
<p>Thank you so much to our <a href="/community">Event Planners</a> for their hard work on this!</p>

7
content/news/2023-holiday-event-kickoff.html Normal file
View File

@ -0,0 +1,7 @@
---
title: "Holiday Event 2023 Kickoff"
date: 2023-12-15T00:00:00-07:00
---
<p>The end of 2023 is near, and we're kicking off our <a href="https://32bit.cafe/holidays2023/">2023 Holiday Event</a>, which celebrates our favorite end-of-year holidays and the New Year!</p>
<p>There's a ton of ways to participate, including a Secret Santa, so check out the <a href="https://32bit.cafe/holidays2023/">event page</a>. The submission deadline is January 10th!</p>
<p>Our Event Planners worked really hard on this one. Thank you so much to them!</p>

6
content/news/2023-holiday-event-wrap-up.html Normal file
View File

@ -0,0 +1,6 @@
---
title: "Holiday Event 2023 Wrap Up"
date: 2024-01-11T00:00:00-07:00
---
<p>The 2023 Holiday Event has wrapped up, and you can see all of the submissions on the <a href="https://32bit.cafe/holidays2023/display/" target="_blank">display page</a>. Thank you to everyone who participated! We had a huge turnout of blog posts, page submissions, and pixel art. Even the background was a submission!</p>
<p>Big thank you to our Event Planners! This took a lot of brainstorming and coordinating!</p>

5
content/news/2023-postmill.html Normal file
View File

@ -0,0 +1,5 @@
---
title: "Announcing our Postmill Instance"
date: 2023-06-16T00:00:00-07:00
---
<p>Super excited about our new Postmill instance, <a href="https://discuss.32bit.cafe/">Discuss</a>! If you're looking for a Reddit fix, or didn't want to join our Discord server, join us over there to participate in discussions. New forums are being added via community suggestions. Hope to see you there!</p>

5
content/news/2023-pride-event-conclusion.html Normal file
View File

@ -0,0 +1,5 @@
---
title: "Pride Event 2023 Conclusion"
date: 2023-06-05T00:00:00-07:00
---
<p>Thank you to everyone who submitted an entry for the <a href="https://32bit.cafe/pride23/">Pride 2023 Zine</a>! We have a zine reader you can use to go through the entries <a href="https://32bit.cafe/pride23/zine.php">here</a>. Happy Pride!</p>

5
content/news/2023-pride-event-reminder.html Normal file
View File

@ -0,0 +1,5 @@
---
title: "Pride Event 2023 Reminder"
date: 2023-05-26T00:00:00-07:00
---
<p>Only a few days left to submit a submission for our Pride 2023 zine, which is our mid-year event this year! Send in your submissions by 11:59 p.m. PT on May 31st for inclusion in the table of contents on the <a href="https://32bit.cafe/pride23/">Pride 2023</a> event page.</p>

5
content/news/2023-resources-list.html Normal file
View File

@ -0,0 +1,5 @@
---
title: "Announcing our Resources List"
date: 2023-06-28T00:00:00-07:00
---
<p>We have started work on a massive <a href="https://discuss.32bit.cafe/wiki/resources" target="_new">Resources List</a>, so feel free to share far and wide! The list is a simple, compiled reference for anyone looking for help and guidance for building websites on the personal web or utilities to help pull back from the corporate web. The best part is it's completely managed by and added to from our community! Check out the <a href="https://discuss.32bit.cafe/wiki/resources" target="_new">32-Bit Cafe's Resources List for the Personal Web</a>.</p>

5
content/news/2023-spring-event-reminder.html Normal file
View File

@ -0,0 +1,5 @@
---
title: "Spring Event 2023 Reminder"
date: 2023-03-21T00:00:00-07:00
---
<p>The final day to submit for the <a href="../spring23/">Spring 2023</a> event! The gallery of sites will be displayed tomorrow with all the submissions. Thank you to everyone who participated, and we look forward to the next community event!</p>

6
content/news/2023-were-live.html Normal file
View File

@ -0,0 +1,6 @@
---
title: "We're Live!"
date: 2023-03-10T00:00:00-07:00
---
<p>We are now live, thanks to <a href="https://kaylee.wtf" target="_new">Kaylee</a>! We are also open for <a href="../themes/">theme submissions</a> to showcase your CSS skills. Feel free to submit a stylesheet to help the 32-Bit Cafe look its best! And don't forget to join our <a href="../spring23/">Spring 2023 event</a>, which ends on March 21st, and open to all.</p>
<p>This site is under construction, so please send any glaring errors to <a href="/cgi-bin/m.php?user=" data-user="ardnax" class="rev">e<!---->fac.tib23[t&#x430;]ardnax</a> or <a class="rev" href="/cgi-bin/m.php?user=" data-user="eelyak">efac.tib23[t&#x430;]eelya<!---->k</a>.</p>

8
content/news/2024-conclude-march-codejam.html Normal file
View File

@ -0,0 +1,8 @@
---
title: 'Concluding the March 2024 Code Jam'
date: 2024-03-24T00:00:00-07:00
---
<p>The <a href="https://tilde.32bit.cafe/~hermit/community_jam_3/" target="_blank">March 2024 Code Jam</a>, our third in the community, is concluding at midnight tonight! This code jam is to commemorate the one-year anniversary of this community's website. It's been a whirlwind of a year, but we feel like this is when we truly began to take shape as more than a Discord server. The experiences we've had with all of our members has helped and continues to help us learn, grow, and build in a multitude of ways.
<p>Baristas have put in a lot of amazing community work over the past year. So grateful for them and for you. We've launched projects, held regular events, and continue to encourage and inspire one another to express themselves and use a website to get out of the walled gardens of the corporate web that has overshadowed this side of the web: the independent web, the more human web, the personal web.</p>
<p>Can't wait to see all the submissions for the code jam, which centered around "<strong>what has creating a website done for you?</strong>"</p>
<p>You can always follow up-to-date event information on our <a href="https://discourse.32bit.cafe/c/general/community-events/43" target="_blank">Discourse forum</a>.</p>

6
content/news/2024-discourse-is-live.html Normal file
View File

@ -0,0 +1,6 @@
---
Title: 'Discourse is Live!'
Date: '2024-02-15T00:00:00-07:00'
---
<p>Our <a href="https://discourse.32bit.cafe/" target="_blank">Discourse forum</a> is live! We are so excited to expand our horizons from just <a href="../discord/">Discord</a> into a longer-form and longer-lasting medium. Our goal is to be around for a long time, and moving to both a forum and having a Discord server is the best way for us to do that. There is also a new <a href="https://32bit.cafe/discourse101/" target="_blank">Discourse 101 guide</a> to help navigate the new platform for those who might not be used to this type of software.</p>
<p>If you haven't wanted to take the leap and join our Discord, consider joining us over at our <a href="https://discourse.32bit.cafe/" target="_blank">forum</a>! Hope to see you there!</p>

6
content/news/2024-happy-new-year.html Normal file
View File

@ -0,0 +1,6 @@
---
title: "Happy New Year!"
date: 2024-01-06T00:00:00-07:00
---
<p>Happy New Year! We're kicking off 2024 with a <a href="https://32bit.cafe/cookbook/">32-Bit Cafe Recipe Book</a>, a cookbook made up of recipes from members of the Cafe. A big thank you to <a href="https://transrats.neocities.org" target="_blank">Jay</a>, who ran the project! If you make any of the recipes, be sure to share it with us and let us know how it went.</p>
<p>Our <a href="https://32bit.cafe/holidays2023/">2023 Holiday Event</a> will be finishing up in a few days, so be sure to get your submissions in before January 10th!</p>

5
content/news/2024-valentines-day-event.md Normal file
View File

@ -0,0 +1,5 @@
---
title: Valentine's Day Event
date: 2024-02-02T00:00:00-07:00
---
So happy to announce that [Loren](https://ribo.zone/) has organized our first [Valentine's Day event](https://tilde.32bit.cafe/~ribose/events/valentines2024/)! The 32-Bit Valentine Cafe will be running from February 5th to February 12th, and even if you don't quite know how to code yet, you can participate. Check out the submission guidelines for more information. We're so excited to show some love!

125
content/updates.html Normal file
View File

@ -0,0 +1,125 @@
<?php include('../includes/header.php'); ?>
<h2>News & Updates</h2>
<section>
<h3>March 24, 2024</h3>
<p>The <a href="https://tilde.32bit.cafe/~hermit/community_jam_3/" target="_blank">March 2024 Code Jam</a>, our third in the community, is concluding at midnight tonight! This code jam is to commemorate the one-year anniversary of this community's website. It's been a whirlwind of a year, but we feel like this is when we truly began to take shape as more than a Discord server. The experiences we've had with all of our members has helped and continues to help us learn, grow, and build in a multitude of ways.
<p>Baristas have put in a lot of amazing community work over the past year. So grateful for them and for you. We've launched projects, held regular events, and continue to encourage and inspire one another to express themselves and use a website to get out of the walled gardens of the corporate web that has overshadowed this side of the web: the independent web, the more human web, the personal web.</p>
<p>Can't wait to see all the submissions for the code jam, which centered around "<strong>what has creating a website done for you?</strong>"</p>
<p>You can always follow up-to-date event information on our <a href="https://discourse.32bit.cafe/c/general/community-events/43" target="_blank">Discourse forum</a>.</p>
</section>
<section>
<h3>February 15, 2024</h3>
<p>Our <a href="https://discourse.32bit.cafe/" target="_blank">Discourse forum</a> is live! We are so excited to expand our horizons from just <a href="../discord/">Discord</a> into a longer-form and longer-lasting medium. Our goal is to be around for a long time, and moving to both a forum and having a Discord server is the best way for us to do that. There is also a new <a href="https://32bit.cafe/discourse101/" target="_blank">Discourse 101 guide</a> to help navigate the new platform for those who might not be used to this type of software.</p>
<p>If you haven't wanted to take the leap and join our Discord, consider joining us over at our <a href="https://discourse.32bit.cafe/" target="_blank">forum</a>! Hope to see you there!</p>
</section>
<section>
<h3>February 2, 2024</h3>
<p>So happy to announce that <a href="https://ribo.zone/" target="_blank">Loren</a> has organized our first <a href="https://tilde.32bit.cafe/~ribose/events/valentines2024/" target="_blank">Valentine's Day event</a>! The 32-Bit Valentine Cafe will be running from February 5th to February 12th, and even if you don't quite know how to code yet, you can participate. Check out the submission guidelines for more information. We're so excited to show some love!</p>
</section>
<h3>January 11, 2024</h3>
<p>The 2023 Holiday Event has wrapped up, and you can see all of the submissions on the <a href="https://32bit.cafe/holidays2023/display/" target="_blank">display page</a>. Thank you to everyone who participated! We had a huge turnout of blog posts, page submissions, and pixel art. Even the background was a submission!</p>
<p>Big thank you to our Event Planners! This took a lot of brainstorming and coordinating!</p>
</section>
<section>
<h3>January 6, 2024</h3>
<p>Happy New Year! We're kicking off 2024 with a <a href="https://32bit.cafe/cookbook/">32-Bit Cafe Recipe Book</a>, a cookbook made up of recipes from members of the Cafe. A big thank you to <a href="https://transrats.neocities.org" target="_blank">Jay</a>, who ran the project! If you make any of the recipes, be sure to share it with us and let us know how it went.</p>
<p>Our <a href="https://32bit.cafe/holidays2023/">2023 Holiday Event</a> will be finishing up in a few days, so be sure to get your submissions in before January 10th!</p>
</section>
<section>
<h3>December 15, 2023</h3>
<p>The end of 2023 is near, and we're kicking off our <a href="https://32bit.cafe/holidays2023/">2023 Holiday Event</a>, which celebrates our favorite end-of-year holidays and the New Year!</p>
<p>There's a ton of ways to participate, including a Secret Santa, so check out the <a href="https://32bit.cafe/holidays2023/">event page</a>. The submission deadline is January 10th!</p>
<p>Our Event Planners worked really hard on this one. Thank you so much to them!</p>
</section>
<section>
<h3>November 8, 2023</h3>
<p>As the year begins to conclude, we're gearing up for some exciting events around the Cafe. Our Discord anniversary event is in full swing there, but stay tuned for our website's anniversary event in March!</p>
<p>Our year-end event is just around the corner, and we're all super excited about what our <a href="../community/">Event Planners</a> are up to. We'll give more details about that event in December.</p>
<p>If you're not into Discord much, join us over on our <a href="https://discuss.32bit.cafe" target="_blank">Discuss forum</a>, where we're sharing links and resources with each other and the personal web at large.</p>
<p>Keep building up the independent web! We're counting on you!</p>
</section>
<section>
<h3>October 1, 2023</h3>
<p>The month may have just started, but I hope you're all ready for Halloween! Our <a href="../community">Event Planners project team</a> have planned a <a href="https://tilde.32bit.cafe/~slug/events/halloween-2023/" target="_new">Halloween event</a> that starts on October 11 and runs through October 25. Even if you aren't confident in your web-building skills, there's a ton of ways to get involved and participate.</p>
<p>Thank you so much to our <a href="../community/">Event Planners</a> for their hard work on this!</p>
</section>
<section>
<h3>August 12, 2023</h3>
<p>Our <a href="https://tilde.32bit.cafe/~hermit/community_jam_1/" target="_new">first community jam</a> was a total success! Check out the <a href="https://tilde.32bit.cafe/~hermit/community_jam_1/submissions.html" target="_new">entries</a> of our amazing community members.</p>
<p>We hope you'll join us on August 20th for our next <a href="https://tilde.32bit.cafe/~hermit/community_jam_2/" target="_new">code jam</a> that runs through August 26th!</p>
</section>
<section>
<h3>July 10, 2023</h3>
<p>New event alert! Inspired by <a href="https://sundaysites.cafe/" target="_new">Sunday Sites</a>, we are kicking off a monthly event: our first <a href="https://tilde.32bit.cafe/~hermit/community_jam_1/" target="_new">Community Code Jam</a> starts July 16 that will run until July 22. The theme is <strong>That Special Thing Close to My Heart</strong>, where you create a webpage for your fleeting interests during that 7-day timeframe. It could be about your favorite book, movie, or any of your favorite things; maybe something you enjoyed growing up or a hobby you had during the global pandemic. Whatever it's about, as long as you make a webpage dedicated to that topic during this week, send it in!</p>
<p>On July 22, you'll be able to <a href="https://tilde.32bit.cafe/~hermit/community_jam_1/" target="_new">submit</a> your webpage. Start thinking about ideas! If you want coding buddies, join us in the <a href="../discord">Discord</a> for live coding sessions together throughout the week.</p>
<p>Thank you so much to our <a href="../community/">Event Planners</a> for their hard work on this! So excited to see what everyone does!</p>
</section>
<section>
<h3>June 28, 2023</h3>
<p>We have started work on a massive <a href="https://discuss.32bit.cafe/wiki/resources" target="_new">Resources List</a>, so feel free to share far and wide! The list is a simple, compiled reference for anyone looking for help and guidance for building websites on the personal web or utilities to help pull back from the corporate web. The best part is it's completely managed by and added to from our community! Check out the <a href="https://discuss.32bit.cafe/wiki/resources" target="_new">32-Bit Cafe's Resources List for the Personal Web</a>.</p>
</section>
<section>
<h3>June 16, 2023</h3>
<p>Super excited about our new Postmill instance, <a href="https://discuss.32bit.cafe/">Discuss</a>! If you're looking for a Reddit fix, or didn't want to join our Discord server, join us over there to participate in discussions. New forums are being added via community suggestions. Hope to see you there!</p>
</section>
<section>
<h3>June 5, 2023</h3>
<p>Thank you to everyone who submitted an entry for the <a href="https://32bit.cafe/pride23/">Pride 2023 Zine</a>! We have a zine reader you can use to go through the entries <a href="https://32bit.cafe/pride23/zine.php">here</a>. Happy Pride!</p>
</section>
<section>
<h3>May 26, 2023</h3>
<p>Only a few days left to submit a submission for our Pride 2023 zine, which is our mid-year event this year! Send in your submissions by 11:59 p.m. PT on May 31st for inclusion in the table of contents on the <a href="https://32bit.cafe/pride23/">Pride 2023</a> event page.</p>
</section>
<section>
<h3>April 7, 2023</h3>
<p>it's great to see so many new faces here these past couple of days! this community is really starting to take shape, and i think now might be a good time to go over our goals and what we have planned for the near future.</p>
<p>so, if you're just joining us, welcome! we're an indieweb space for adults who want to get away from the corporate-centric modern internet and embrace the creative, people-oriented, community spirit of the old web. <a href="../discord">this discord server</a> is where we started, but we hope to build something great together.</p>
<details>
<summary><strong>What do we have right now?</strong></summary>
<ul>
<li>we have the discord!</li>
<li>we have this website! it contains some tutorials and resources to help you build your own place on the web, among other things.</li>
<li>we offer free email accounts, [you]@32bit.cafe. there's no major usage restrictions, just don't spam or otherwise abuse the service. contact kaylee if you're interested for now, otherwise we will have an intake form soon!</li>
<li>we also sometimes have events, to celebrate and show off our members' creativity! see <a href="../spring23">our spring event</a> for the latest one.</li>
</ul>
</details>
<details>
<summary><strong>Where are we headed?</strong></summary>
<p>this is the exciting part. we have a lot of improvements planned for the next couple of weeks; in no particular order:</p>
<ul>
<li>the website will have some new themes and a bit more polish</li>
<li>more useful content on the site!</li>
<li>we're working on a pubnix / tilde server! everyone will soon have access to a linux shell account, with web and gemini hosting as well as other fun stuff.</li>
<li>we'll soon have a webring for our members to join!</li>
<li>we hope to host a gitlab (or similar) instance for software projects</li>
<li>your email account will soon feature protonmail style encryption! note that you will have to reset your password to activate it when this change is brought in</li>
<li>and much more!</li>
</details>
<details>
<summary><strong>How can I help?</strong></summary>
<p>32-bit cafe is a community project, and everyone is welcome to help build it! you can contribute in many different ways, but here are just a few:</p>
<ul>
<li>you can spread the word, on other servers, forums, or your own site by <a href="../linktous/">linking back to us</a>!</li>
<li>anyone can make their own theme for our website! you can upload a custom CSS stylesheet which will be publicly available in the theme selector! this process is a bit janky and requires manual oversight right now, but soon there will be a way to edit and preview your code before submitting it - just like on myspace :D</li>
<li>art of any kind is incredible! buttons, banners, posters, whatever you want to make. (please no AI generated material - as cool as the technology is, it kinda goes against the spirit of a human-centric community)</li>
<li>we need more content for the site! if you have resources you want to share, knowledge you want to impart, or anything else you think might be useful let us know!</li>
<li>if you're a techy person and you want to help with the infrastructure side of things, let us know and you can join the technomancy group!</li>
<li>last but definitely not least, if you have any other ideas for what we could be doing as a community, please let us know!! suggestions are more than welcomed, they're encouraged :) we're having amazingly productive conversations in our discord about what to do next.</li>
</ul>
</details>
<p>cheers and stay tuned!</p>
</section>
<section>
<h3>April 1, 2023</h3>
<p><s>We're happy to announce our new <a href="https://nft.32bit.cafe/">32-Bitcoin Cafe</a> NFT project! <a href="https://nft.32bit.cafe/#faq-01-175471">Learn more at the 32-Bitcoin Cafe site</a> and start collecting your CryptoCuppaz today.</s> <em>edit:</em> <strong>April Fools!</strong></p>
</section>
<section>
<h3>March 21, 2023</h3>
<p>The final day to submit for the <a href="../spring23/">Spring 2023</a> event! The gallery of sites will be displayed tomorrow with all the submissions. Thank you to everyone who participated, and we look forward to the next community event!</p>
</section>
<section>
<h3>March 10, 2023</h3>
<p>We are now live, thanks to <a href="https://kaylee.wtf" target="_new">Kaylee</a>! We are also open for <a href="../themes/">theme submissions</a> to showcase your CSS skills. Feel free to submit a stylesheet to help the 32-Bit Cafe look its best! And don't forget to join our <a href="../spring23/">Spring 2023 event</a>, which ends on March 21st, and open to all.</p>
<p>This site is under construction, so please send any glaring errors to <a href="/cgi-bin/m.php?user=" data-user="ardnax" class="rev">e<!---->fac.tib23[t&#x430;]ardnax</a> or <a class="rev" href="/cgi-bin/m.php?user=" data-user="eelyak">efac.tib23[t&#x430;]eelya<!---->k</a>.</p>
</section>
<?php include('../includes/footer.php'); ?>

22
hugo.yaml Normal file
View File

@ -0,0 +1,22 @@
baseURL: https://32bit.cafe
languageCode: en-us
title: 32-Bit Cafe
theme: 32bitcafe-base
menus:
main:
- name: Our History
pageRef: /about
weight: 10
- name: What We Do
pageRef: /mission
weight: 20
- name: News
pageRef: /news
weight: 30
- name: Guides
pageRef: /guides
weight: 40
- name: Events
pageRef: /events
weight: 60

8
layouts/_defaults/list.html Normal file
View File

@ -0,0 +1,8 @@
{{ define "main" }}
<h1>{{ .Title }}</h1>
{{ .Content }}
{{ range .Pages }}
<h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
{{ .Summary }}
{{ end }}
{{ end }}

10
layouts/_defaults/single.html Normal file
View File

@ -0,0 +1,10 @@
{{ define "main" }}
<h1>{{ .Title }}</h1>
{{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }}
{{ $dateHuman := .Date | time.Format ":date_long" }}
<time datetime="{{ $dateMachine }}">{{ $dateHuman }}</time>
{{ .Content }}
{{ partial "terms.html" (dict "taxonomy" "tags" "page" .) }}
{{ end }}

9
layouts/guides/list.html Normal file
View File

@ -0,0 +1,9 @@
{{ define "main" }}
<h2>{{ .Title }}</h2>
{{ .Content }}
<ul>
{{ range .Pages }}
<li><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a> {{ with .Params.author }}by {{ . }}{{ end }}</li>
{{ end }}
</ul>
{{ end }}

11
layouts/news/list.html Normal file
View File

@ -0,0 +1,11 @@
{{ define "main" }}
<h1>{{ .Title }}</h1>
{{ .Content }}
{{ range .Pages }}
<section>
<h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
<h3>{{ .PublishDate.Format "January 02, 2006" }}</h3>
{{ .Content }}
</section>
{{ end }}
{{ end }}

10
layouts/news/single.html Normal file
View File

@ -0,0 +1,10 @@
{{ define "main" }}
<h1>{{ .Title }}</h1>
{{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }}
{{ $dateHuman := .Date | time.Format ":date_long" }}
<time datetime="{{ $dateMachine }}">{{ $dateHuman }}</time>
{{ .Content }}
{{ partial "terms.html" (dict "taxonomy" "tags" "page" .) }}
{{ end }}

39
layouts/partials/sidebar.html Normal file
View File

@ -0,0 +1,39 @@
<div class="panel visible">
<section>
<h3>Latest News</h3>
<ul>
{{ range first 3 (where .Site.RegularPages.ByDate.Reverse "Section" "news") }}
<li><a href="{{ .RelPermalink }}" target="_blank">{{ .Title }}</a></li>
{{ end }}
</ul>
</section>
<section>
<h3>Community</h3>
<ul>
<li><a href="https://my.32bit.cafe/" target="_blank">my.32bit.cafe</a></li>
<li><a href="https://discourse.32bit.cafe/" target="_blank">Discourse Forum</a></li>
<li><a href="../discord/">Discord</a></li>
<li><a href="https://tilde.32bit.cafe/" target="_blank">Tilde Server</a></li>
<li><a href="https://32bit.cafe/cookbook" target="_blank">32-Bit Recipe Book</a></li>
</ul>
</section>
<section>
<h3>Free Services & Alternatives</h3>
<ul>
<li><a href="https://webmail.32bit.cafe/" target="_blank">@32bit.cafe Email</a></li>
<li><a href="https://my.32bit.cafe/etherpad/" target="_blank">Etherpad Collaborative Docs</a></li>
<li><a href="https://rss.32bit.cafe/" target="_blank">RSS Reader</a></li>
<li><a href="https://git.32bit.cafe/" target="_blank">Git Server</a></li>
<li><a href="https://tilde.32bit.cafe/" target="_blank">Pubnix Hosting</a></li>
</ul>
</section>
<section>
<h3>Get Involved</h3>
<ul>
<li><a href="../advertising/">Advertising Network</a></li>
<li><a href="../community/">Project Teams</a></li>
<li><a href="../themes/">Submit a Website CSS Theme</a></li>
<li><a href="../linktous/">Link to 32-Bit Cafe</a></li>
</ul>
</section>
</div>

1
layouts/partials/theme.html Normal file
View File

@ -0,0 +1 @@
<link rel="stylesheet" href="/css/themes/plantcell.css">

BIN
static/bitty.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 460 KiB

254
static/css/themes/plantcell.css Normal file
View File

@ -0,0 +1,254 @@
/*
* Name: Plant Cell
* Author: loren
* Website: https://ribo.zone
*/
@font-face {
font-family: "heal";
src: url("https://ribo.zone/32bitcafe/HealTheWebA-Regular.otf") format("opentype");
}
* {
font-family: 'courier';
box-sizing: border-box;
scrollbar-width: thin;
}
body {
background: url(https://ribo.zone/32bitcafe/plantcellbg.jpg), rgb(193, 196, 128);
color: rgb(87,93,49);
overflow-y: scroll;
}
h1 {
margin: 0;
padding: 0;
}
h1 a {
font-family: 'heal', 'arial';
font-size: 80px;
color: rgb(87,93,49);
padding: 0 !important;
text-decoration: none;
text-shadow: 5px 5px white;
}
h1 a:hover {
color: #757a42;
}
h2, h3 {
font-family: 'heal', 'arial';
}
a {
font-family: 'heal', 'arial';
color: #757a42;
text-decoration: underline;
}
a:hover {
text-decoration-style: wavy;
color: rgb(87,93,49);
}
h2, h3, h4, h5, p {
margin: 10px;
}
pre {
background: rgb(87,93,49);
color: white;
padding: 15px;
overflow: auto;
margin: 10px;
}
code {
background: rgb(87,93,49);
color: white;
padding: 0 4px;
line-height: 1.2;
}
section {
margin: 10px;
padding: 10px;
border: 2px dotted rgb(193, 196, 128);
}
.header {
padding: 0px;
text-align: left;
width: 100%;
height: auto;
margin: 10px 10px 0 10px;
}
.topnav {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
border: 5px double;
padding: 10px;
background-color: white;
border-radius: 5px;
margin: 10px;
}
.topnav a {
position: static !important;
float: left;
display: block;
color: #757a42;
line-height: 0.8;
font-size: 25px;
padding: 0 5px;
margin: 0;
border:none;
text-decoration:none;
background: none;
}
.topnav a:hover {
text-shadow: 2px 2px rgb(193, 196, 128);
color: rgb(87,93,49);
background: none;
}
.column {
float: left;
}
.main {
margin: 10px;
background-color: white;
border: 5px double;
border-radius: 5px;
width: 50rem !important;
}
.sidebar {
width: 17.5rem !important;
height: fit-content;
}
.panel {
/* height: 0px; */
overflow: hidden;
}
.panel.visible {
background-color: white;
border: 5px double;
border-radius: 5px;
height: auto;
}
.sidebar ul {
list-style-type: none;
margin: 10px;
padding: 5px;
}
.sidebar li {
display: block;
padding: 2px;
}
.row {
display: flex;
flex-wrap: wrap;
}
.row:after {
content: "";
display: table;
clear: both;
}
.footer {
text-align: center;
padding: 10px 15px;
width: fit-content;
margin: 10px auto;
background-color: white;
border: 5px double;
border-radius: 5px;
}
@media screen and (max-width: 700px) {
.container {
padding: 0 !important;
}
.column.sidebar, .column.main {
width: 100% !important;
}
.topnav {
flex-direction: column !important;
padding: 10px !important;
width: 65vw !important;
margin: 5px auto !important;
}
.topnav a {
display: block !important;
margin: 5px !important;
font-size: 16px !important;
}
section {
margin: 5px !important;
padding: 5px !important;
}
.sidebar {
margin: 10px 0 !important;
padding: 0;
}
.panel {
margin: 0;
width: 100%;
}
.header h1 {
float: left;
}
.header button {
float: right;
}
h1, .main {
margin: 5px;
}
h1 a {
font-size: 60px;
}
}
@media screen and (min-width: 700px) and (max-width: 950px) {
.container {
padding: 10px !important;
transform: translate(0) !important;
}
.column.sidebar, .column.main {
width: 100% !important;
}
.topnav {
padding: 5px !important;
}
.topnav a {
display: block !important;
padding: 10px !important;
}
.header button {
float: right;
}
.mobile-only {
display: none;
}
}
@media screen and (min-width: 950px) and (max-width: 1200px) {
.sidebar {
width: 25.5% !important;
}
.main {
width: 72% !important;
}
}
@media screen and (min-width: 950px) {
.container {
position: static !important;
transform: translate(0) !important;
width: 70rem !important;
max-width: 100%;
padding: 10px;
margin: 0 auto;
}
.column.main {
max-height: fit-content !important;
}
.header {
height: auto !important;
}
.header h1 {
top: 0;
max-height: none;
padding: 0;
}
.topnav a {
position: static !important;
text-align: center;
margin: 10px;
}
}

BIN
static/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.1 KiB

21
themes/32bitcafe-base/LICENSE Normal file
View File

@ -0,0 +1,21 @@
MIT License
Copyright (c) [year] [fullname]
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

7
themes/32bitcafe-base/README.md Normal file
View File

@ -0,0 +1,7 @@
# Theme Name
## Features
## Installation
## Configuration

5
themes/32bitcafe-base/archetypes/default.md Normal file
View File

@ -0,0 +1,5 @@
+++
title = '{{ replace .File.ContentBaseName "-" " " | title }}'
date = {{ .Date }}
draft = true
+++

202
themes/32bitcafe-base/assets/css/main.css Normal file
View File

@ -0,0 +1,202 @@
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.header {
padding: 10px;
width: 12%;
white-space: nowrap;
vertical-align: middle;
}
.topnav {
overflow: hidden;
display: flex;
width: 80%;
}
.topnav a {
float: left;
display: block;
}
.topnav a:hover {
background-color: #fff;
color: black;
}
/** added by yequari **/
nav ul {
list-style: none;
margin: 0;
}
nav li {
display: inline-block;
margin: 0;
}
.panel {
height: 0px;
overflow: hidden;
}
.panel.visible {
height: auto;
}
.column {
float: left;
}
.sidebar {
padding: 10px;
}
.sidebar ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.sidebar li {
display: block;
padding: 5px;
}
.main {
padding: 10px;
}
.row {
display: flex;
flex-wrap: wrap;
}
.row:after {
content: "";
display: table;
clear: both;
}
.footer {
background-color: #F1F1F1;
text-align: center;
padding: 10px;
width: 100%;
}
.footer-text {
font-size: 0.8rem;
}
@media screen and (max-width: 699px) {
.column.sidebar, .column.main {
width: 100%;
}
.header, .topnav {
width: 100%;
}
.topnav {
flex-direction: column;
padding: 5px;
}
.topnav a {
display: block;
padding: 5px;
}
.header h1 {
float: left;
}
.header button {
float: right;
}
.footer {
width: 100%;
}
}
@media screen and (min-width: 700px) and (max-width: 950px) {
.container {
padding: 5px;
}
.column.sidebar, .column.main {
width: 100%;
}
.header, .topnav {
width: 100%;
}
.column.main {
width: 75%;
}
.topnav {
flex-direction: column;
padding: 5px;
}
.topnav a {
display: block;
padding: 5px;
}
.header h1 {
float: left;
}
.header button {
float: right;
}
}
@media screen and (min-width: 950px) {
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 75vw;
}
.column.sidebar {
width: 15vw;
}
.column.main {
width: 56.5vw;
overflow-y: auto;
overflow-x: hidden;
max-height: 65vh;
}
.header {
width: 15vw;
height: 10vh;
}
.header h1 {
font-size: 1.5vw;
position: relative;
top: 1.5vh;
max-height: 10vh;
}
.topnav {
overflow-x: auto;
overflow-y: hidden;
}
.topnav a {
position: relative;
top: 3vh;
color: #000;
border: 2px solid #000;
border-radius: 20px;
text-align: center;
padding: 14px 16px;
text-decoration: none;
margin: 5px;
background-color: #F1F1F1;
font-size: 1.1vw;
}
.mobile-only {
display: none;
}
.footer {
width: /*71.5vw;*/100%;
}
}
.rev { unicode-bidi: bidi-override; direction: rtl; }
.obem { position: absolute; display:inline-block; z-index: -1; width: 0px; height: 0px; overflow: hidden; };

1
themes/32bitcafe-base/assets/js/main.js Normal file
View File

@ -0,0 +1 @@
console.log('This site was generated by Hugo.');

23
themes/32bitcafe-base/hugo.toml Normal file
View File

@ -0,0 +1,23 @@
baseURL = 'https://example.org/'
languageCode = 'en-us'
title = 'My New Hugo Site'
[[menus.main]]
name = 'Home'
pageRef = '/'
weight = 10
[[menus.main]]
name = 'Posts'
pageRef = '/posts'
weight = 20
[[menus.main]]
name = 'Tags'
pageRef = '/tags'
weight = 30
[module]
[module.hugoVersion]
extended = false
min = "0.116.0"

29
themes/32bitcafe-base/layouts/_default/baseof.html Normal file
View File

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="{{ or site.Language.LanguageCode site.Language.Lang }}" dir="{{ or site.Language.LanguageDirection `ltr` }}">
<head>
{{ partial "head.html" . }}
</head>
<body>
<div class="container">
<div class="row">
<header class="header">
<h1><a href="{{ site.BaseURL }}">{{ site.Title }}</a></h1>
</header>
{{ partial "menu.html" (dict "menuID" "main" "page" .) }}
<div class="row">
<div class="column sidebar">
{{ partial "sidebar.html" . }}
</div>
<div class="column main">
<main>
{{ block "main" . }}{{ end }}
</main>
</div>
</div>
<footer>
{{ partial "footer.html" . }}
</footer>
</div>
</div>
</body>
</html>

7
themes/32bitcafe-base/layouts/_default/home.html Normal file
View File

@ -0,0 +1,7 @@
{{ define "main" }}
{{ .Content }}
<!-- {{ range site.RegularPages }} -->
<!-- <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2> -->
<!-- {{ .Summary }} -->
<!-- {{ end }} -->
{{ end }}

8
themes/32bitcafe-base/layouts/_default/list.html Normal file
View File

@ -0,0 +1,8 @@
{{ define "main" }}
<h1>{{ .Title }}</h1>
{{ .Content }}
{{ range .Pages }}
<h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
{{ .Summary }}
{{ end }}
{{ end }}

6
themes/32bitcafe-base/layouts/_default/single.html Normal file
View File

@ -0,0 +1,6 @@
{{ define "main" }}
<h1>{{ .Title }}</h1>
{{ .Content }}
{{ partial "terms.html" (dict "taxonomy" "tags" "page" .) }}
{{ end }}

1
themes/32bitcafe-base/layouts/partials/footer.html Normal file
View File

@ -0,0 +1 @@
<p>Copyright {{ now.Year }}. All rights reserved.</p>

9
themes/32bitcafe-base/layouts/partials/head.html Normal file
View File

@ -0,0 +1,9 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="description" content="A web space community that focuses on building websites for self-expression and creativity, made up of professionals, hobbyists, and enthusiasts of the personal web.">
<meta name="keywords" content="HTML, CSS, create your own website, website creation, personal website, indieweb, independent, web, smolweb, small web, yesterweb, web revival, build your own website">
<title>{{ if .IsHome }}{{ site.Title }}{{ else }}{{ printf "%s | %s" .Title site.Title }}{{ end }}</title>
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
{{ partialCached "head/css.html" . }}
{{ partial "theme.html" . }}
{{ partialCached "head/js.html" . }}

9
themes/32bitcafe-base/layouts/partials/head/css.html Normal file
View File

@ -0,0 +1,9 @@
{{- with resources.Get "css/main.css" }}
{{- if eq hugo.Environment "development" }}
<link rel="stylesheet" href="{{ .RelPermalink }}">
{{- else }}
{{- with . | minify | fingerprint }}
<link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
{{- end }}
{{- end }}
{{- end }}

12
themes/32bitcafe-base/layouts/partials/head/js.html Normal file
View File

@ -0,0 +1,12 @@
{{- with resources.Get "js/main.js" }}
{{- if eq hugo.Environment "development" }}
{{- with . | js.Build }}
<script src="{{ .RelPermalink }}"></script>
{{- end }}
{{- else }}
{{- $opts := dict "minify" true }}
{{- with . | js.Build $opts | fingerprint }}
<script src="{{ .RelPermalink }}" integrity="{{- .Data.Integrity }}" crossorigin="anonymous"></script>
{{- end }}
{{- end }}
{{- end }}

0
themes/32bitcafe-base/layouts/partials/header.html Normal file
View File

51
themes/32bitcafe-base/layouts/partials/menu.html Normal file
View File

@ -0,0 +1,51 @@
{{- /*
Renders a menu for the given menu ID.
@context {page} page The current page.
@context {string} menuID The menu ID.
@example: {{ partial "menu.html" (dict "menuID" "main" "page" .) }}
*/}}
{{- $page := .page }}
{{- $menuID := .menuID }}
{{- with index site.Menus $menuID }}
<nav class="topnav">
<ul>
{{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
</ul>
</nav>
{{- end }}
{{- define "partials/inline/menu/walk.html" }}
{{- $page := .page }}
{{- range .menuEntries }}
{{- $attrs := dict "href" .URL }}
{{- if $page.IsMenuCurrent .Menu . }}
{{- $attrs = merge $attrs (dict "class" "active" "aria-current" "page") }}
{{- else if $page.HasMenuCurrent .Menu .}}
{{- $attrs = merge $attrs (dict "class" "ancestor" "aria-current" "true") }}
{{- end }}
{{- $name := .Name }}
{{- with .Identifier }}
{{- with T . }}
{{- $name = . }}
{{- end }}
{{- end }}
<li class="navlink">
<a
{{- range $k, $v := $attrs }}
{{- with $v }}
{{- printf " %s=%q" $k $v | safeHTMLAttr }}
{{- end }}
{{- end -}}
>{{ $name }}</a>
{{- with .Children }}
<ul>
{{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
</ul>
{{- end }}
</li>
{{- end }}
{{- end }}

23
themes/32bitcafe-base/layouts/partials/terms.html Normal file
View File

@ -0,0 +1,23 @@
{{- /*
For a given taxonomy, renders a list of terms assigned to the page.
@context {page} page The current page.
@context {string} taxonomy The taxonomy.
@example: {{ partial "terms.html" (dict "taxonomy" "tags" "page" .) }}
*/}}
{{- $page := .page }}
{{- $taxonomy := .taxonomy }}
{{- with $page.GetTerms $taxonomy }}
{{- $label := (index . 0).Parent.LinkTitle }}
<div>
<div>{{ $label }}:</div>
<ul>
{{- range . }}
<li><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
{{- end }}
</ul>
</div>
{{- end }}

BIN
themes/32bitcafe-base/static/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.1 KiB

31
themes/32bitcafe-base/theme.toml Normal file
View File

@ -0,0 +1,31 @@
name = 'Theme name'
license = 'MIT'
licenselink = 'https://github.com/owner/repo/LICENSE'
description = 'Theme description'
# The home page of the theme, where the source can be found
homepage = 'https://github.com/owner/repo'
# If you have a running demo of the theme
demosite = 'https://owner.github.io/repo'
# Taxonomy terms
tags = ['blog', 'company']
features = ['some', 'awesome', 'features']
# If the theme has multiple authors
authors = [
{name = 'Name of author', homepage = 'Website of author'},
{name = 'Name of author', homepage = 'Website of author'}
]
# If the theme has a single author
[author]
name = 'Your name'
homepage = 'Your website'
# If porting an existing theme
[original]
author = 'Name of original author'
homepage = 'Website of original author'
repo = 'https://github.com/owner/repo'