Reposted https://dragon.style/@packbat/105340208057313766 by packbats in existencepackbats in existence (dragon.style)
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.”

Principles

  • 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.

Usage

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.

Implementation

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

Document Framing

Body
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
footer,  {
  padding: 1em 0;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
}

Block Design

Section
section {
  border-bottom: 0.1em solid #444;
  margin-bottom: 1em;
}
Blockquote
blockquote {
  padding: 0.5rem;
  border-left: 0.1em solid #444;
}
Table
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;
}

Typography

Headlines
h2, h3, h4, h5, h6 {
  font-family: sans-serif;
  margin: 0.5em;
}
Links
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;
}

Acknowledgements