adding more styling

contextualise.py

@@ -157,7 +157,7 @@ def diverge():
     now = datetime.now() #description time
     session['wordpath'].append(searchterm)
     session['clicktime'].append(now)
-    return render_template('diverge.html', wordlist_dict=wordlist_dict, searchterm=searchterm)
+    return render_template('diverge.html', wordlist_dict=wordlist_dict, searchterm=searchterm, index_dict=index_dict)
 
 @app.route('/listofwords')
 def listofwords():

static/css/main.css

@@ -1,11 +1,37 @@
-/* @font-face {
-    font-family: 'whoismono';
-    src: url('whois-mono-webfont.woff2') format('woff2'),
-         url('whois-mono-webfont.woff') format('woff');
-    font-weight: normal;
+@font-face {
+    font-family: 'Compagnon';
+    src: url('Compagnon-Bold.woff2') format('woff2'),
+         url('Compagnon-Bold.woff') format('woff'), ;
+    font-weight: bold;
     font-style: normal;
+}
+@font-face {
+font-family: 'Compagnon';
+src: url('Compagnon-Italic.woff') format('woff');
+font-weight: normal;
+font-style: italic;
+}
+
+@font-face {
+font-family: 'Compagnon';
+src: url('Compagnon-Medium.woff') format('woff');
+font-weight: medium;
+font-style: normal;
+}
 
-} */
+@font-face {
+font-family: 'Compagnon';
+src: url('Compagnon-Light.woff') format('woff');
+font-weight: light;
+font-style: normal;
+}
+
+@font-face {
+font-family: 'Compagnon';
+src: url('Compagnon-Roman.woff') format('woff');
+font-weight: normal;
+font-style: roman;
+}
 
 @import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
 
@@ -24,10 +50,23 @@ a{
   color: black;
 }
 .text a:visited{
-  color: purple;
+  color: red;
 }
 .text a:hover{
-  color: red;
+  background: : red;
+  color: white;
+}
+
+
+/********************************************************/
+/* SELECTION */
+/********************************************************/
+
+::selection {
+  background: magenta; /* WebKit/Blink Browsers */
+}
+::-moz-selection {
+  background: magenta; /* Gecko Browsers */
 }
 
 
@@ -38,7 +77,7 @@ a{
 
 div.home{
   /* padding: 1em 5em 1em 7.5em; */
-	padding-left: 7em;
+	padding-left: 9em;
 	padding-top: 3em;
 	padding-bottom: 3em;
 	padding-right: 0.5em;
@@ -54,13 +93,34 @@ div.home a:hover{
 	/* text-decoration: underline overline dotted red; */
   /* font-weight: bold; */
 	background: red;
+  color: white;
 }
-.explanation {
-	width: 6%;
-	font-size: 0.4em;
-	font-family: monospace;
+div.explanation{
+  width: 100%;
+  position: fixed;
+  bottom: 0;
+  top: -6.5em;
+  left: 9em;
+  right: 0;
+  background: white;
+  color: bla;
+  height: 1em;
+  padding: 10px 0 10px 10px;
+	/* width: 6%; */
+	font-size: 0.75em;
+	/* font-family: monospace; */
 	float: left;
 	padding-right: 0.7em;
+  -webkit-transform-origin: 0 50%;
+     -moz-transform-origin: 0 50%;
+      -ms-transform-origin: 0 50%;
+       -o-transform-origin: 0 50%;
+          transform-origin: 0 50%;
+  -webkit-transform: rotate(-90deg) translate(-50%, 50%);
+     -moz-transform: rotate(-90deg) translate(-50%, 50%);
+      -ms-transform: rotate(-90deg) translate(-50%, 50%);
+       -o-transform: rotate(-90deg) translate(-50%, 50%);
+          transform: rotate(-90deg) translate(-50%, 50%);
 }
 
 
@@ -93,6 +153,9 @@ header{
 #logobox a, #logobox a:visited{
   color: black;
 }
+#logobox a:hover{
+  color: red;
+}
 
 h1{
   font-size: 2em;
@@ -142,8 +205,18 @@ li a{
 	color: #0000FF
 }
 
-li a:hover{
-	color: orange;
+li:hover a{
+	color: white;
+  background-color: red;
+}
+li{
+  padding-left: 5px;
+  padding-right: 5px;
+}
+li:hover {
+  background-color: red;
+  padding-left: 5px;
+  padding-right: 5px;
 }
 
 img{
@@ -165,6 +238,8 @@ div{
 /********************************************************/
 
 #thewordpath{
+	font-family: 'Compagnon';
+	font-style: roman;
 	display: block;
 	background-color: white;
 	position: fixed;
@@ -217,6 +292,10 @@ transform: rotate(90deg); */
   border:1px solid pink; */
 }
 
+.column a:hover{
+  color: white;
+  background-color: red;
+}
 
 /********************************************************/
 /* NAVIGATION BAR AT THE BOTTOM OF DESCRIPTION*/
@@ -241,12 +320,21 @@ nav.nav_bottom {
   overflow: hidden;
   position: fixed;
   background: white;
-  border-top:0.05em solid black;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  /* border-top:0.05em solid black; */
 }
 
 nav.nav_bottom div li {
   margin-right: 2em;
 }
+nav.nav_bottom div li a{
+  color: black
+}
+nav.nav_bottom div li a:hover{
+  color: red;
+  background-color: black;
+}
 
 nav.nav_bottom div li:first-child {
   margin-right: 0;
@@ -273,17 +361,27 @@ div.diverge_all{
 div.diverge_all p{
   font-weight: bold;
   font-size: 1.3em;
-  /* text-transform: uppercase; */
+  margin-left: 14.3em;
 }
 
 div.diverge_list {
-  padding-left: 30%;
+  width: 40%;
+}
+div.diverge_list a{
+
 }
 
+
 div.about{
   padding: 1em 5em 1em 7.5em;
 }
 
+span.folder-corner {
+
+	font-size: 0.8em;
+	font-style: italic;
+}
+
 
 /********************************************************/
 /* INDEX OF FOLDERS */
@@ -295,8 +393,15 @@ div.about{
   padding-top: 50px;
   padding-bottom: 50px;
 }
+.foldersindex a{
+  color: black;
+  width: 100%;
+  /* height: 98%; */
+  display: inline-block;
+}
 .foldersindex a:hover{
-  background-color: yellow;
+  background-color: red;
+  color: white;
   width: 100%;
   /* height: 98%; */
   display: inline-block;

templates/diverge.html

@@ -2,16 +2,20 @@
 {% block content %}
 
 <div class="diverge_all">
-<p>{{ searchterm }} : </p>
+<p>Sentences that have <i>{{ searchterm }}</i> in common : </p><br>
 {% for word in wordlist_dict %}
   {% if searchterm == word %}
     {% set length_d = wordlist_dict[word]|length %}
     <div class="diverge_list">
     {% for item in wordlist_dict[word] %}
       {% set address = "/description?id=" + item['id'] %}
-      <span class="folder-corner">└</span><a href={{address}} class="diverge">
+      <a href={{address}} class="diverge">
         {{ item['sentence'] }}
-        </a><br/><br/><br/>
+        </a><br>
+
+        <span class="folder-corner">└ from {{ item['id'] }} — {{index_dict[ item['id'] ]}}</span>
+
+        <br><br><br>
     {% endfor %}
     </div>
 

templates/home.html

@@ -2,9 +2,7 @@
 {% block content %}
 
 
-<div class="explanation">
-	The selection of keywords next to this paragraph originates from all
-</div>
+
 <div class="home">
 
 			{% for word in wordlist_dict %}
@@ -12,4 +10,8 @@
 		       <a href={{address}}>{{ word }}</a> •
 			{% endfor %}
 </div>
+<div class="explanation">
+	These keywords originate from all the written content embedded within the archive.
+</div>
+
 {% endblock content %}

templates/theindex.html

@@ -2,14 +2,14 @@
 {% block content %}
 
 <div class="index_intro">
-	Pushing  Scores is a two-year artistic research project, initiated by <a href="https://www.deplayer.nl/">De Player</a> and graphic designer Remco van Bladel.
+	Pushing  Scores is a two-year artistic research project, initiated by <a target="_blank" href="https://www.deplayer.nl/">De Player</a> and graphic designer Remco van Bladel.
 	Throughout 2016 and 2018, this project researched the phenomenon of notation and the graphic representation of music.
 	It unfolded through a nomadic program which included the creation of newly commissioned artworks and public events addressing contemporary questions and issues in this particular field.<br><br>
 
-	What are the possibilities of graphic scores, in a day and age in which graphic notation is still usually seen as a ‘drawing’ serving as some kind of sheet music? In an attempt to redefine this concept, <a href="https://www.deplayer.nl/">De Player</a> compiled a programme in which artists, musicians,
-	theoreticians and practitioners were invited to participate. The collective goal was to develop and present new audio-visual and media-technical forms of graphic notation through artistic research and development. Based on our compilation of the most contemporary and innovative graphic notation practices in the fields of music, sound art, performance art, e-culture, new-media art, graphic design and media design, <a href="https://www.deplayer.nl/">De Player</a> introduced artists and designers from various creative disciplines to a national and international audience, with the goal of collectively developing new forms of graphic notation.<br><br>
+	What are the possibilities of graphic scores, in a day and age in which graphic notation is still usually seen as a ‘drawing’ serving as some kind of sheet music? In an attempt to redefine this concept, <a target="_blank" href="https://www.deplayer.nl/">De Player</a> compiled a programme in which artists, musicians,
+	theoreticians and practitioners were invited to participate. The collective goal was to develop and present new audio-visual and media-technical forms of graphic notation through artistic research and development. Based on our compilation of the most contemporary and innovative graphic notation practices in the fields of music, sound art, performance art, e-culture, new-media art, graphic design and media design, <a target="_blank"href="https://www.deplayer.nl/">De Player</a> introduced artists and designers from various creative disciplines to a national and international audience, with the goal of collectively developing new forms of graphic notation.<br><br>
 
-	The incentive for this project is the belief that graphic notation in 20th Century avant-garde music and sound art constitutes an important, still radically innovative but wrongfully marginalised form, which can play a key role in the development of new audio-visual languages and media. <a href="https://www.deplayer.nl/">De Player</a>'s ambition, and that of their collaborating partners, was to emancipate graphic notation from the confines of the modernist tradition, in such a way that it may remain an innovative and provocative medium for decades to come.<br><br>
+	The incentive for this project is the belief that graphic notation in 20th Century avant-garde music and sound art constitutes an important, still radically innovative but wrongfully marginalised form, which can play a key role in the development of new audio-visual languages and media. <a target="_blank" href="https://www.deplayer.nl/">De Player</a>'s ambition, and that of their collaborating partners, was to emancipate graphic notation from the confines of the modernist tradition, in such a way that it may remain an innovative and provocative medium for decades to come.<br><br>
 
 	This archival web publication was generated out of this research. For an overview of the collection that is making up this website, see below.
 </div>