Reposted by packbats in existencepackbats in existence (
This isn't topical to anything going on, but I want to highlight the assumption that the fediverse exists to let people broadcast content feeds to an audience of /everyone./ That's not true. Many of us value the way this space lets us say things to the world - like with this post, a broadcast - but ...
Watched Towards a Small Web – Howest 2020 by Aral Balkan from Small Technology Foundation
Aral’s live stream to students at Howest in Kortrijk, December 2020

In this talk, Aral starts by distinguishing between the “Big Web” and “Small Web.” Their explanation of the Big Web is a good explanation of how companies like Facebook provide “free” services. They then set up the “Small Web” as a contrast, and define it as a decentralized Web.

Continue reading

Brutstrap is a CSS theme based on David Bryant Copeland’s “Guidelines for Brutalist Web Design,” which advocates “raw content true to its construction.”


  • The website people see is the website in the HTML file. As David Byant Copeland says in his definition, brutalist websites should be “raw content, true to [their] construction.” Here, that means the content is represented as a single column, flowing left to right and top to bottom.
  • Only links, inputs and buttons should respond to interaction. A website should allow two points of interaction: a hyperlink that brings you to a destination, and form which submits information to a server. Those elements, and only those elements, should respond to being clicked, focused, or hovered-over.
  • Components should be named what they are. Classes should be named what they are, not what they’re for.
  • Design should be helpful. Styling should be to help reinforce the context that your content has.


Brutstrap‘s stylesheet is available at ./build/brutstrap/brutstrap.css, but please don’t hotlink to it. You can also view the stylesheet under the “Complete Stylesheet” section.


NOTE: Because I use Org-mode, this CSS is written with rules compatible with its naming scheme.

Document Framing

body {
  position: relative;
  background-color: ;
  color: #444;
  font-family: serif;
  margin: 0 auto;
  padding-bottom: 6rem;
  min-height: 100%;
  font-size: 1.4em;
Header & Title
header, h1 {
  font-family: sans-serif;
  text-align: center;
  width: 100%;
  overflow: hidden;
  font-family: sans-serif;
.title { font-size: 3.2rem; }
.subtitle { font-size: 2.2rem; }
Content Container
main,  {
  width: 75vw;
  max-width: 40em;
  margin: 0 auto;
  line-height: 1.6;
  margin-bottom: 8rem;
footer,  {
  padding: 1em 0;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;

Block Design

section {
  border-bottom: 0.1em solid #444;
  margin-bottom: 1em;
blockquote {
  padding: 0.5rem;
  border-left: 0.1em solid #444;
table {
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
    border: 0.1em solid #444;
thead { font-family: sans-serif; }
td {
  padding: 0 0.3em;
  border: 0.01em solid #444;


h2, h3, h4, h5, h6 {
  font-family: sans-serif;
  margin: 0.5em;
a {
  text-decoration: none;
  color: ;
  display: inline-block;
  position: relative;
  border-bottom: 0.1rem dotted;
  line-height: 1.2;
  transition: border 0.3s;
a:hover {
  color: ;
  outline-style: none;
  border-bottom: 0.1rem solid;
a:visited { color: ; }
a:visited:hover { color: ; }
a:focus {
  outline-style: none;
  border-bottom: 0.1rem solid;

State Rules

Selection Rules
::selection { background-color: #777; color: ; }
a::selection { background-color: ; }

Class Rules

Code Block Rules
pre, .src {
  padding: 0.5em;
  border: 0.1em solid #444;
  white-space: pre-wrap;
  overflow-x: scroll;
  text-overflow: clip;