adding more styling

This commit is contained in:
Cristina Cochior 2019-05-27 22:40:57 +02:00
parent 2ba573fc32
commit d9abe92f2d
18 changed files with 141 additions and 30 deletions

BIN
.DS_Store vendored

Binary file not shown.

View File

@ -157,7 +157,7 @@ def diverge():
now = datetime.now() #description time now = datetime.now() #description time
session['wordpath'].append(searchterm) session['wordpath'].append(searchterm)
session['clicktime'].append(now) 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') @app.route('/listofwords')
def listofwords(): def listofwords():

BIN
static/.DS_Store vendored

Binary file not shown.

BIN
static/css/Compagnon-Bold.woff Executable file

Binary file not shown.

BIN
static/css/Compagnon-Bold.woff2 Executable file

Binary file not shown.

BIN
static/css/Compagnon-Italic.woff Executable file

Binary file not shown.

BIN
static/css/Compagnon-Italic.woff2 Executable file

Binary file not shown.

BIN
static/css/Compagnon-Light.woff Executable file

Binary file not shown.

BIN
static/css/Compagnon-Light.woff2 Executable file

Binary file not shown.

BIN
static/css/Compagnon-Medium.woff Executable file

Binary file not shown.

BIN
static/css/Compagnon-Medium.woff2 Executable file

Binary file not shown.

BIN
static/css/Compagnon-Roman.woff Executable file

Binary file not shown.

BIN
static/css/Compagnon-Roman.woff2 Executable file

Binary file not shown.

View File

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

View File

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

View File

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

View File

@ -2,14 +2,14 @@
{% block content %} {% block content %}
<div class="index_intro"> <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. 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> 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, 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 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> 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. 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> </div>