css design etc

contextualise.py

@@ -149,7 +149,7 @@ def description():
                     textfile = f.read()
                     textfile = Markup(textfile)
                     textfiles.append(textfile)
-    return render_template('description.html', datafromjson=datafromjson, itemid=itemid, textfiles=textfiles, idno=idno)
+    return render_template('description.html', datafromjson=datafromjson, itemid=itemid, textfiles=textfiles, idno=idno, index_dict=index_dict)
 
 @app.route('/diverge', methods=['GET'])
 def diverge():
@@ -275,21 +275,12 @@ def get_file():
         #joining the strings with linebreaks
         tadam = '\n'.join(out)
 
-
-######################################################################################
-#INDEX PAGE
-######################################################################################
-@app.route("/index")
-def index():
-    return render_template('theindex.html', wordlist_dict=wordlist_dict, index_dict=index_dict)
-
 # have a message in file if no nav has been recorded so it's less dull than error page
     if tadam is None:
         tadam = "This score is Null"
 
     # print("verylastnow : "+str(clickongetfilefime)+"\n")
 
-
     print(tadam)
 
     return Response(tadam,
@@ -298,5 +289,18 @@ def index():
                                     "attachment;filename=yourveryspecialscore.txt"})
 
 
+
+
+
+######################################################################################
+#INDEX PAGE
+######################################################################################
+@app.route("/index")
+def index():
+    return render_template('theindex.html', wordlist_dict=wordlist_dict, index_dict=index_dict)
+
+
+
+
 if __name__ == '__main__':
     app.run(debug=True)

static/css/main.css

@@ -1,25 +1,95 @@
-@font-face {
+/* @font-face {
     font-family: 'whoismono';
     src: url('whois-mono-webfont.woff2') format('woff2'),
          url('whois-mono-webfont.woff') format('woff');
     font-weight: normal;
     font-style: normal;
 
-}
+} */
+
+@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
+
+
 
 body{
 	background: #ffffff;
-	color:blue;
+	color:black;
-	font-family: 'whoismono';
+	font-family: 'Montserrat', sans-serif;
-	width: 100%;
 	top:0;
 	left: 0;
   margin: 0;
-  padding: 0;
+
+}
+a{
+  color: black;
+}
+.text a:visited{
+  color: purple;
+}
+.text a:hover{
+  color: red;
+}
+
+
+/********************************************************/
+/* FIRST PAGE */
+/********************************************************/
+
+
+div.home{
+  padding: 1em 5em 1em 7.5em;
+  text-align: justify;
+  font-size: 1em;
+}
+div.home a:hover{
+  font-style: italic;
+  font-size: 0.95em;
+  /* font-weight: bold; */
+}
+
+
+
+/********************************************************/
+/* NAVIGATION */
+/********************************************************/
+header{
+  padding-top: 3em;
+}
+
+#logobox{
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  height: 1.5em;
+  margin: auto;
+  background: none;
+  left: 0;
+  -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%);
+}
+#logobox a, #logobox a:visited{
+  color: black;
 }
 
 h1{
-	margin-top: 50px;
+  font-size: 2em;
+  line-height: 1.5;
+  display:inline;
+  background-color: none;
+  /* width: 100%; */
+}
+
+ul.menu {
+  margin-left: 0.4em;
+  position: fixed;
 }
 
 /********************************************************/
@@ -34,10 +104,7 @@ a:visited {
     color:purple;
 }
 
-a:hover{
-	background: pink;
 
-}
 
 
 ul{
@@ -53,12 +120,12 @@ li a:hover{
 }
 
 img{
-	max-width: 500px;
+	max-width: 90%;
 	margin-bottom: 15px;
 	/* float: left; */
 }
 video{
-	max-width: 400px;
+	max-width: 90%;
 }
 
 div{
@@ -72,8 +139,9 @@ div{
 
 #thewordpath{
 	display: block;
-	/* background-color: yellow; */
+	background-color: white;
 	position: fixed;
+  /* border-bottom: black 1.5px solid; */
 	width: 100%;
 	top:0;
 	right: 0;
@@ -83,7 +151,7 @@ div{
 	padding: 10px;
 	z-index: 2;
 	width: auto;
-	background-color: white;
+	/* background-color: white; */
 	/* border:1px blue solid; */
 /* -webkit-transform-origin: right top;
 	-webkit-transform: rotate(90deg);
@@ -93,7 +161,7 @@ div{
 transform: rotate(90deg); */
 }
 .word{
-	color:silver;
+	color:black;
 
 }
 
@@ -103,43 +171,28 @@ transform: rotate(90deg); */
 
 .description{
 	width: 80%;
-	/* border: 1px solid red; */
 }
 .text{
 	float: right;
 	width: 50%;
-	/* border:1px solid #444; */
 	/* position: relative; */
  }
-
 .item{
 	/* position: relative; */
 	float: left;
 	width: 50%;
 	/* vertical-align: top; */
-	/* border:1px solid #444; */
+  padding-top: 7.8%;
  }
 
-/* .text{
+.column h2{
-	float: right;
+  /* color: pink;
-}
+  border:1px solid pink; */
-.item{
-	float: left;
 }
 
-.column{
-  padding: 10px;
-	float: left;
-width: 40%;
-}
-.allcontent:after {
-  content: "";
-  display: table;
-  clear: both;
-} */
 
 /********************************************************/
-/* NAVIGATION AT THE BOTTOM OF DESCRIPTION*/
+/* NAVIGATION BAR AT THE BOTTOM OF DESCRIPTION*/
 /********************************************************/
 .index {
 	display: block;
@@ -159,6 +212,9 @@ nav.nav_bottom {
   -moz-osx-font-smoothing: grayscale;
   list-style-type: none;
   overflow: hidden;
+  position: fixed;
+  background: white;
+  border-top:1.5px solid black;
 }
 
 nav.nav_bottom div li {
@@ -169,23 +225,57 @@ nav.nav_bottom div li:first-child {
   margin-right: 0;
 }
 
-div#bottom_descrip_left, div#bottom_descrip_right {
+li.index, li.about {
-
-}
-
-
-li.index {
 	float: left;
+  margin-left: 10px;
 }
 
 li.prev_item, li.next_item, li.no_here {
 	float: right;
 }
 
+
 /********************************************************/
 /* DIVERGE */
 /********************************************************/
 
-.diverge{
+div.diverge_all{
-	margin-left: 1em;
+  padding: 1em 6.3em 1em;
+}
+
+div.diverge_all p{
+  font-weight: bold;
+  font-size: 1.3em;
+  /* text-transform: uppercase; */
+}
+
+div.diverge_list {
+  padding-left: 30%;
+}
+
+div.about{
+  padding: 1em 5em 1em 7.5em;
+}
+
+
+/********************************************************/
+/* INDEX OF FOLDERS */
+/********************************************************/
+
+.foldersindex{
+  /* border: black 1px solid; */
+  width: 35%;
+  padding-top: 50px;
+  padding-bottom: 50px;
+}
+.foldersindex a:hover{
+  background-color: yellow;
+  width: 100%;
+  /* height: 98%; */
+  display: inline-block;
+}
+
+
+h1.logo a {
+  text-transform: uppercase;
 }

templates/description.html

@@ -2,8 +2,6 @@
 {% block content %}
 <div class="description">
 
-<h2 style = "text-align: center;">{{ itemid }}</h2>
-
 <!--passing files
 		<p>{{ datafromjson }}</p>-->
 
@@ -25,6 +23,7 @@
 {% endfor %}
 </div>
 <div class="text column">
+  <h2>{{ itemid }}. {{index_dict[itemid]}}</h2>
 {% set count=[0] %}
 {% for item in datafromjson %}
     {% if item.lower().endswith(('.html')) %}
@@ -72,7 +71,8 @@
 
 <nav class="nav_bottom">
   <div id="bottom_descrip_left">
-    <li class="index"><a href="/">index</a></li>
+    <li class="index"><a href="/index">index</a></li>
+    <li class="about"><a href="/about">about</a></li>
   </div>
 
   <div id="bottom_descrip_right">

templates/diverge.html

@@ -1,19 +1,21 @@
 {% extends "layout.html" %}
 {% block content %}
 
+<div class="diverge_all">
 <p>{{ searchterm }} : </p>
 {% 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'] %}
       <a href={{address}} class="diverge">
         {{ item['sentence'] }}
         </a><br/><br/><br/>
     {% endfor %}
+    </div>
 
   {% endif %}
 {% endfor %}
-
+</div>
 {% endblock %}

templates/home.html

@@ -5,7 +5,7 @@
 			{% for word in wordlist_dict %}
 		       {% set address = "/diverge?search=" + word %}
 		       <a href={{address}}>
-		       {{ word }}
+		       {{ word }} <a style="color:red;">•</a>
 					 </a>
 			{% endfor %}
 </div>

templates/layout.html

@@ -3,24 +3,23 @@
     <head>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>P.u.s.h.i.n.g.S.c.o.r.e.s</title>
+    <title>Pushing Scores</title>
     <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
   </head>
       <body>
         <header>
 
-          <div class="index">
-            {% block index %}
-            {% endblock index %}
-          </div>
 
           <div class="container">
-            <h1 class="logo"><a href="{{ url_for('home') }}">P.u.s.h.i.n.g.S.c.o.r.e.s</a></h1>
+            <div id="logobox">
+            <h1 class="logo"><a href="{{ url_for('home') }}">Pushing Scores</a></h1>
+          </div>
+
             <strong><nav>
               <ul class="menu">
-                <li><a href="{{ url_for('index') }}">Index</a></li>
                 <li><a href="{{ url_for('about') }}">About</a></li>
-                <li><a href="{{ url_for('get_file') }}">Generate the score</a></li>
+                <li><a href="{{ url_for('index') }}">Index</a></li>
+                <li><a href="{{ url_for('get_file') }}">Score</a></li>
               </ul>
             </nav></strong>
           </div>

templates/theindex.html

@@ -1,15 +1,15 @@
 {% extends "layout.html" %}
 {% block content %}
-<div class="foldersindex">
 
-<h1>COUCOU BLABLA</h1>
 
-</div>
+<div class="foldersindex">
 
-{% endblock %}
 {% block index %}
 	{% for each in index_dict %}
 		{% set address = "/description?id=" + each %}
-		<a href={{address}}>{{index_dict[each]}}</a> |
+		<a href={{address}}>{{index_dict[each]}}</a> <br />
 	{% endfor %}
 {% endblock index %}
+</div>
+
+{% endblock %}