adding a prototype that departs from danny's sketches

directions-streams-invitations-documentation/stylesheet.css

@@ -0,0 +1,154 @@
+body{
+	top:0;
+	left:0;
+	margin:0;
+	background-color: pink;
+}
+section#main{
+	position: relative;
+	width: calc(100% - 1em);
+	left:0;
+	top:0;
+	padding:1em 0.5em;
+}
+div.column{
+	float: left;
+	width: calc(33.333% - 3em);
+	height: 500vh;
+	margin: 0 0.5em 3em;
+	padding:0 1em;
+}
+div.row{
+	width: calc(100% - 3em);
+	margin: 0 0.5em 5em;
+	padding:0 1em;
+}
+hr{
+	border:0;
+	border-bottom:1px dotted black;
+}
+a{
+	color: black;
+}
+h1{
+	color:red;
+}
+
+/* header + buttons */
+header {
+	width: calc(100% - 4em);
+	margin: 2em 1.5em;
+	font-family: "header";
+	font-size: 200%;
+	line-height: 1.5;
+	letter-spacing: -0.03em;
+}
+.buttons {
+	position: absolute;
+	font-size: 14px;
+	margin: 0;
+	padding: 0;
+}
+.buttons.top, .buttons.side {
+	top: 10px;
+	right: 15px;
+	text-align: right;
+}
+.buttons.top.left {
+	top: 10px;
+	left: 35px;
+	text-align: left;
+}
+.buttons li {
+	list-style: none;
+	display: inline-block;
+	padding-left: 3px;
+}
+.buttons.top, .buttons.side {
+	text-align: right;
+}
+
+/* directions */
+div#directions a{
+	font-size: 150%;
+	line-height: 1.6;
+}
+div#directions #tags{
+	float: left;
+	width: 80%;
+	color:blue;
+	margin-right: 2em;
+}
+
+/* streams */
+
+div#streams #xmppstream div{
+	width: calc(20% - 0em);
+	float: left;
+}
+div#streams #xmppstream .filename{
+	display: none;
+}
+
+div#streams #fediverse{
+	clear: both;
+}
+div#streams div.item{
+	width: calc(100% - 2em);
+	padding:1em;
+	margin:0 0 1em 0;
+}
+div#streams #fediverse div.item{
+	background-color: white;
+}
+div#streams .ui.repository.list div.item{
+	background-color: yellow;
+}
+div#streams #pads table{
+	border: 0;
+	width: 100%;
+}
+div#streams #pads tr{
+	display: grid;
+	margin:0 0 1em;
+}	
+div#streams #pads td.name{	
+	background-color: lime;
+	padding:1em;
+}
+div#streams #pads thead,
+div#streams #pads td.versions,
+div#streams #pads td.lastedited,
+div#streams #pads td.revisions,
+div#streams #pads td.authors{	
+	display: none;
+}
+
+/* invitations */
+div#invitations.column article{
+	width: calc(50% - 1.25em);
+	margin:0 1em 5em 0; 
+	display: inline-block;
+	vertical-align: top;
+}
+div.column img{
+	width: 100%;
+	margin:1em 0 0 0;
+}
+.entry-title {
+	display: block;
+	width: 100%;
+	font-family: "kop";
+	font-size: 150%;
+	font-weight: bold;
+	line-height: 1.15;
+	margin: 0;
+}
+
+/* documentation */
+.date{
+	margin:1em 0 2em 1em;
+}
+div#documentation.column article{
+	margin:1em 0 3em;
+}