font, margins, colors, other css

contents.js

@@ -44,7 +44,7 @@ function populateContributions(contributions) {
 
 function createSection(contribution) {
 	let section = reference.cloneNode(true);
-	section.id = contribution.moment;
+	section.id = contribution.moment.replace("'","");
 	section.querySelector(".moment").innerHTML = contribution.moment;
 	section.querySelector(".title").innerHTML = contribution.title;
 	section.querySelector(".author").innerHTML = contribution.author;
@@ -99,7 +99,6 @@ function printViewToggle() {
 		// var btnPrint = document.getElementById("btn-print");
 		// console.log(btnPrint);
 		//-------------------------
-		createBackToWebBtn();
 	} else {
 		//document.getElementsByTagName("head")[0].removeChild(printview);
 		pagedjs.remove();

index.html

@@ -133,7 +133,7 @@
 			</div>
 			<div class="libretto" contenteditable="true">
 				<header class="cover">
-					<div class="release">SI18 Weekly Release #3</div>
+					<div class="release">10.05.2022 <br> SI18 Weekly Release #3 </div>
 					<h1 class="title">Emergent Opera</h1>
 					<div class="description">
 						What does it mean? This week we invite you to make content within a common

print.css

@@ -34,8 +34,11 @@
     .index-title {
         font-weight: bold;
         margin-top: 16px;
+        text-transform: uppercase;
+        text-align: right;
     }
 
+
     .contributions,
     .contribution {
         border-bottom: none;
@@ -93,6 +96,10 @@
         border-bottom: none;
     }
 
+    .contribution .content h2,
+    .contribution .description{
+        font-size: 18px;
+    }
 
     .contribution .title {
         font-size: 28px;
@@ -104,10 +111,14 @@
         overflow: hidden;
     }
 
+    img {
+        margin: 16px auto;
+    }
+ 
 
     /*Sorry Gi, the multicolumn layout is too painful */
     
-    .contribution .content{
+    /* .contribution .content{
         column-count: 2;
         column-fill: auto;
     }  
@@ -117,10 +128,13 @@
 
     .contribution img{
         column-span: all;
-        width: 200%;
+        float: left;
     }
 
 
+     */
+
+
     .content p, .content h2 {
         margin: default;
     }
@@ -135,3 +149,10 @@
     }
 
 }
+
+
+@media print{
+    body, html{
+        background-color: white;
+    }
+}

style.css

@@ -1,7 +1,25 @@
+@font-face {
+    font-family: Fengardo;
+    src: url("fonts/fengardoneue_regular-webfont.woff");
+}
+
+@font-face {
+    font-family: Fengardo;
+    src: url("fonts/fengardoneue_black-webfont.woff");
+    font-weight: bold;
+}
+
+@font-face {
+    font-family: Blocus;
+    src: url("fonts/blocuswebfont.woff");
+}
+
+
 :root {
-    --text:rgb(44, 44, 44);
+    --text:#FF6347;
-    --wireframe:#202020;
+    /* --wireframe:#202020; */
-    --background:#FF6347;
+    --wireframe:#FF6347;
+    --background:#fcf9d9;
 }
 
 *{
@@ -14,8 +32,8 @@ body, html{
     margin: 0;
     padding: 0;
     background-color: var(--background);
-
+    color: var(--text);
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Fengardo;
     font-size: 21px;
     line-height: 1.6;
 
@@ -82,12 +100,13 @@ body, html{
 }
 
 .cover .title {
-    font-size: 56px;
+    font-size: 64px;
     margin: 64px 0;
+  
 }
 
 .cover .description {
-    max-width: 60ch;
+    max-width: 50ch;
 }
 
 dl {
@@ -96,7 +115,6 @@ dl {
 
 dt {
     margin-top: 24px;
-    font-style: italic;
 }
 
 dd {
@@ -121,6 +139,7 @@ dd {
 
 .contribution .title {
     margin: 0;
+    margin-top: 8px;
     font-size: 36px;
 }
 
@@ -143,6 +162,10 @@ dd {
     font-size: 1rem;
 }
 
+.contribution .content ol {
+    padding-inline-start: 16px;
+}
+
 .contribution img {
     width: 100%;
     height: auto;
@@ -167,9 +190,10 @@ dd {
 
 #btn-print {
     display: inline-block;
+    color: var(--text);
     margin-top: 32px;
     background: none;
-    border: 1px solid currentColor;
+    border: 1px solid var(--text);
     padding: 4px 8px;
     font-size: 1rem;
 }