style thingy

contents.js

@@ -44,7 +44,7 @@ function populateContributions(contributions) {
 
 function createSection(contribution) {
 	let section = reference.cloneNode(true);
-	section.id = contribution.moment.replace("'","");
+	section.id = contribution.moment.replace("'", "");
 	section.querySelector(".moment").innerHTML = contribution.moment;
 	section.querySelector(".title").innerHTML = contribution.title;
 	section.querySelector(".author").innerHTML = contribution.author;
@@ -74,27 +74,27 @@ function createIndexSection(contribution) {
 		let tracks = contribution.audio;
 		tracks.forEach((track) => {
 			let row = document.createElement("tr");
-			let col1 = document.createElement("td");
+			let sym = document.createElement("td");
-			let col2 = document.createElement("td");
+			let filename = document.createElement("td");
-			col1.setAttribute("class", "symbol");
+			sym.setAttribute("class", "symbol");
-			col2.setAttribute("class", "filename");
+			sym.innerHTML = symbols[track];
-			col2.innerHTML = track;
+			sym.style.fontFamily = "Arial, sans-serif";
-			row.appendChild(col1);
+			filename.setAttribute("class", "filename");
-			row.appendChild(col2);
+			filename.innerHTML = track;
+			row.appendChild(sym);
+			row.appendChild(filename);
 			table.appendChild(row);
 		});
 		trackList.appendChild(title);
 		trackList.appendChild(table);
 	}
-	
-	
 }
 
 function printViewToggle() {
 	var printview = document.getElementById("printview");
 	if (!printview) {
 		document.getElementsByTagName("head")[0].appendChild(pagedjs);
-		//----------------------- 
+		//-----------------------
 		//sto provando sta porcata qui, ma non funzia uguale. quando la pagina si trasforma in pagedjs la variabile del btn non è più definita (????)
 		// var btnPrint = document.getElementById("btn-print");
 		// console.log(btnPrint);
@@ -106,3 +106,57 @@ function printViewToggle() {
 	}
 }
 
+const symbols = {
+	"stream_01.mp3": "i1",
+	"stream_02.mp3": "i2",
+	"stream_03.mp3": "i3",
+	"stream_04.mp3": "i4",
+	"stream_05.mp3": "i5",
+	"stream_06.mp3": "i6",
+	"stream_07.mp3": "i7",
+	"stream_08.mp3": "i8",
+	"stream_09.mp3": "i9",
+	"stream_10.mp3": "i10",
+	"u.wav": "!!",
+	"t.wav": "-\\-",
+	"s.wav": "\\-",
+	"r.wav": "||",
+	"q.wav": "!—",
+	"p.wav": "!-",
+	"o.wav": ">/",
+	"n.wav": "\\",
+	"m.wav": "~~",
+	"l.wav": "/",
+	"k.wav": "ú",
+	"j.wav": ",-",
+	"i.wav": "|",
+	"h.wav": "^^",
+	"g.wav": "^",
+	"f.wav": "%",
+	"e.wav": "!",
+	"d.wav": "-",
+	"c.wav": ",,",
+	"b.wav": "_",
+	"a.wav": ".",
+	"sample8_Entracte3.mp3": "-c",
+	"sample6_Entracte3.mp3": "—C",
+	"sample3_Entracte3.mp3": "~c",
+	"sample7_Entracte3.mp3": "c-",
+	"sample4_Entracte3.mp3": "c—",
+	"sample2_Entracte3.mp3": "C~",
+	"sample5_Entracte3.mp3": "c/",
+	"sample1_Entracte3.mp3": "c\\",
+	"sample6_Entracte_2_2.mp3": "/b",
+	"sample5_Entracte_2_2.mp3": "\\b",
+	"sample4_Entracte_2_2.mp3": "=B",
+	"sample3_Entracte_2_2.mp3": ">B",
+	"sample2_Entracte_2_2.mp3": "b>",
+	"sample1_Entracte_2_2.mp3": "<b",
+	"sample5_Entracte_1.mp3": "a",
+	"sample4_Entracte_1.mp3": "]A",
+	"sample3_Entracte_1.mp3": ")a",
+	"sample2_Entracte_1.mp3": "A~",
+	"sample1_Entracte_1.mp3": "a|",
+	"voice-hierarchy-week03.mp3": "iii",
+	"Laughing-Opera-Soprano-Violet-Duet.wav": "ii",
+};

print.css

@@ -31,13 +31,7 @@
     }
     
 
-    .index-title {
+    
-        font-weight: bold;
-        margin-top: 16px;
-        text-transform: uppercase;
-        text-align: right;
-    }
-
 
     .contributions,
     .contribution {
@@ -80,13 +74,29 @@
     .index table{
         width: 100%;
         border-collapse: collapse;
-        border-bottom: solid 1px black;
 
     }
     .index tr{
-        border-top: solid 1px black;
+        border-top: solid 1px currentColor;
+        border-bottom: solid 1px currentColor;
     }
 
+    .index-title {
+        font-weight: bold;
+        margin-top: 16px;
+        text-transform: uppercase;
+        text-align: right;
+    }
+
+
+    .symbol {
+        text-transform: lowercase;
+        width: 20%;
+    }
+    
+
+
+
     .libretto {
         overflow: hidden;
         /* height:100%; */
@@ -135,9 +145,9 @@
      */
 
 
-    .content p, .content h2 {
+    /* .content p, .content h2 {
         margin: default;
-    }
+    } */
 
     button#btn-print {
         display: none;
@@ -152,7 +162,14 @@
 
 
 @media print{
-    body, html{
+
-        background-color: white;
+:root {
+        --text: tomato;
+        --wireframe: tomato;
+        --background: #ffffff;
+    }
+
+    html, body{
+        background-color: tomato;
     }
 }

style.css

@@ -16,10 +16,9 @@
 
 
 :root {
-    --text:#FF6347;
+    --text:#111;
-    /* --wireframe:#202020; */
+    --wireframe:#111;
-    --wireframe:#FF6347;
+    --background:#FF6347;
-    --background:#fcf9d9;
 }
 
 *{
@@ -134,22 +133,25 @@ dd {
 
 .contribution {
     padding: 16px;
+    padding-bottom: 64px;
     border-bottom: 1px solid currentColor;
 }
 
 .contribution .title {
     margin: 0;
-    margin-top: 8px;
+    margin-top: 0;
-    font-size: 36px;
+    font-size: 42px;
 }
 
 .contribution .meta {
-    font-size: 0.7em;
+    /* font-size: 0.8em; */
-    font-weight: bold;
+    /* font-weight: bold; */
     text-transform: uppercase;
 }
 
-
+ul, ol {
+    margin: 16px 0;
+}
 
 .contribution .description {
     font-style: italic;
@@ -159,7 +161,8 @@ dd {
 
 .contribution .content h3,
 .contribution .content h2 {
-    font-size: 1rem;
+    font-size: 28px;
+    margin: 16px 0;
 }
 
 .contribution .content ol {