Commit 2a34c462 authored by colm's avatar colm

lost of changes to the site, js, interface elements, highlighting, classnames fixes, etch

parent 9fe4e607
var typed = new Typed('#main-title', {
strings: ['Collection of uncertainties ', 'Sammlung von Unsicherheiten', 'Collectie van onzekerheden', 'Collection des incertitudes'],
strings: ['Collection of <span class="title-uncertain">uncertainties</span> / Sammlung von <span class="title-uncertain">Unsicherheiten</span>','Sammlung von <span class="title-uncertain">Unsicherheiten</span> / Collectie van <span class="title-uncertain">onzekerheden</span>', 'Collectie van <span class="title-uncertain">onzekerheden</span> / Collection of <span class="title-uncertain">uncertainties</span>', 'Collection des <span class="title-uncertain">incertitudes</span> / Collectie van <span class="title-uncertain">onzekerheden</span>'],
typeSpeed: 200,
backSpeed: 50,
cursorChar: '',
......@@ -10,9 +10,11 @@ var typed = new Typed('#main-title', {
$(".passepartout").hover(function(){
var itemNo = $(this).attr('class').split(' ')[1];
$("span." + itemNo).css("color", "yellow");
var itemTitle = $(this).attr('title')
$("span." + itemNo).css("color", "grey");
// console.log("hovering over "+ itemNo + "attempting to hightlight span" + itemNo);
$("#inventoryNb").html("current item: " + itemNo);
$("#itemTitle").html("item title: " + itemTitle);
}, function(){
var itemNo = $(this).attr('class').split(' ')[1];
$("span." + itemNo).css("color", "black");
......@@ -22,10 +24,12 @@ $("span.description").hover(function(){
// console.log("hovering over span.description")
var itemNo = $(this).attr('class').split(' ')[0];
// console.log(itemNo)
$(".passepartout " + itemNo).css("outline", "2px solid yellow");
$(".passepartout." + itemNo).css("outline", "3px solid yellow");
$(".passepartout." + itemNo).css("filter", "none");
}, function(){
var itemNo = $(this).attr('class').split(' ')[0];
$(".passepartout" + itemNo).css("outline", "none");
$(".passepartout." + itemNo).css("outline", "none");
$(".passepartout." + itemNo).css("filter", "greyscale(1) !important");
});
updateTime();
......@@ -41,3 +45,40 @@ function setDate(){
var date = today.getFullYear()+'/'+(today.getMonth()+1)+'/'+today.getDate();
document.getElementById('date').innerHTML=date;
}
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: ['probabl*', 'possibl*', 'peut-être'],
datasets: [{
label: 'results per word pattern',
backgroundColor: 'rgb(0, 0, 0)',
borderColor: 'rgba(255, 255, 255, 1)',
data: [241, 52, 2495]
}]
},
options: {
"responsive": true,
"maintainAspectRatio": false,
scales: {
yAxes: [{ticks: {fontSize: 12, fontFamily: "'AntiqueNobleLight', sans-serif", fontColor: 'rgb(255,255,255)', fontStyle: '500'}}],
xAxes: [{ticks: {fontSize: 12, fontFamily: "'AntiqueNobleLight', sans-serif", fontColor: 'rgb(255,255,255)', fontStyle: '500'}}]
},
legend: {
labels: {
"fontFamily": 'AntiqueNobleLight',
}
}
}
});
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
......@@ -77,150 +77,6 @@ textarea {
clear: both;
}
div.last-draft {
min-height: 400px;
margin-bottom: 15px;
}
.lt-ie9 div.last-draft {
min-height: 600px;
}
@media screen and (min-width: 600px) {
div.last-draft {
min-height: 600px;
}
}
div.last-draft h2 {
text-transform: capitalize;
padding-top: 100px;
padding-left: 15px;
color: white;
font-weight: bold;
font-size: 4em;
word-break: break-all;
}
.lt-ie9 div.last-draft h2 {
padding-left: 30px;
padding-top: 250px;
word-break: initial;
hyphens: auto;
}
@media screen and (min-width: 600px) {
div.last-draft h2 {
padding-left: 30px;
padding-top: 250px;
word-break: initial;
hyphens: auto;
}
}
div.home-content img {
width: 100%;
}
div.hero-detail p {
float: left;
}
div.hero-detail p a {
display: none;
}
div.hero-detail p i {
display: none;
}
div.hero-detail p.hero-detail-text {
float: left;
font-family: monospace;
}
div.hero-detail blockquote {
display: none;
}
div.hero-detail blockquote:first-of-type {
display: block;
margin: 0;
padding-left: 7.5px;
font-family: monospace;
float: left;
font-size: 1em;
}
div.hero-detail strong {
display: none;
}
div.about {
display: none;
}
div.feed a.toggle-visible {
font-size: 1.1em;
font-family: monospace;
}
div.feed ul {
margin-left: 0em;
}
div.feed ul li {
padding-top: 7.5px;
list-style-type: none;
border-top: 1px dashed grey;
}
div.feed ul blockquote {
font-size: 1em;
font-style: normal !important;
width: 100%;
max-height: 200px;
display: block;
overflow-y: hidden;
}
div.feed ul blockquote p {
display: block;
}
div.feed ul pre {
max-height: 200px;
overflow: hidden;
font-family: monospace;
background: lightgrey;
padding: 8px;
}
div.feed ul p {
display: none;
}
div.commit-content {
font-size: 0.8em;
}
div.commit-content blockquote {
font-size: 1em;
font-style: italic;
border-left: 1px solid grey;
padding-left: 15px;
}
div.commit-content a.link-to-commit {
font-family: monospace;
color: blue;
text-decoration: underline;
font-size: 1.2em;
}
div.commit-content img.gravatar {
display: none;
}
div.commit-content pre.code {
font-family: monospace;
background-color: grey;
padding: 15px;
}
a.more-commits {
margin-bottom: 7.5px;
padding-right: 7.5px;
}
div.more-git-commits {
display: none;
}
.lower-nav {
position: fixed;
bottom: 50px;
}
/* ::Base styles */
/* ------------------------------------------------------------ */
html {
......@@ -245,17 +101,31 @@ a:hover, a:focus, a:active {
color: grey;
}
ul {
margin: 0;
}
.is-typeset ul {
margin: 0 !important;
list-style-type: none !important;
}
div.main-nav {
min-height: 8vh;
height: 8vh;
margin-top: 2.2em;
}
div.main-nav h1 {
text-align: center;
font-size: 2.5em;
}
div.main-nav h1 span.title-uncertain {
color: #e6e619;
}
div.main-nav .row {
width: 100%;
}
div.top-left-context, div.top-right-context {
position: fixed;
top: 20px;
}
div.top-left-context ul, div.top-right-context ul {
......@@ -267,22 +137,21 @@ div.top-left-context ul li, div.top-right-context ul li {
margin-bottom: 0.4em;
}
div.top-left-context {
left: 20px;
}
div.top-right-context {
right: 20px;
text-align: right;
}
span.uncertain_match {
color: #e6e619;
}
div.hp-half::-webkit-scrollbar {
width: 6px;
height: 6px;
}
div.hp-half::-webkit-scrollbar-track-piece {
background-color: #333333;
background-color: #e6e619;
}
div.hp-half::-webkit-scrollbar-thumb:vertical {
......@@ -290,6 +159,11 @@ div.hp-half::-webkit-scrollbar-thumb:vertical {
background-color: black;
}
div.white-row {
background-color: white;
height: 75vh;
}
div.hp-half {
position: fixed;
height: 75vh;
......@@ -297,27 +171,38 @@ div.hp-half {
overflow-y: scroll;
webkit-scrollbar-width: thin;
scrollbar-width: thin;
scrollbar-color: black #333333;
scrollbar-color: black #e6e619;
}
div.hp-half-left {
left: 20px;
width: 48%;
left: 0px;
width: 50%;
}
div.hp-half-right {
right: 20px;
width: 48%;
right: 0px;
width: 50%;
padding: 20px;
background-color: white;
}
div.hp-half-right div.text-container {
color: black;
}
div.hp-half-right div.text-container a {
color: black;
}
div.hp-half-right div.text-container .description {
font-size: 1.1em;
}
div.hp-half-right div.text-container .description span {
font-size: 1.1em;
}
div.hp-half-right div.text-container .description:hover {
color: grey;
}
div.vignette {
width: 110px;
height: 280px;
height: 200px;
margin: 2px;
float: left;
}
......@@ -331,16 +216,53 @@ div.vignette .passepartout:hover {
}
div.vignette figcaption {
margin-top: 6px;
font-size: 12px;
line-height: 14px;
font-size: 0.8em;
line-height: 1.1em;
font-family: AntiqueNobleLight;
font-weight: light;
color: black;
white-space: pre-wrap;
word-break: initial;
word-wrap: break-word;
}
img.large-thumbnail {
width: 400px;
}
div.reg-page-container {
padding-top: 40px;
font-size: 1.2em;
color: black;
font-family: AntiqueNobleLight;
}
div.reg-page-container p.chapeau {
font-size: 2em;
line-height: 1.2em;
font-family: AntiqueNobleRegular;
}
div.reg-page-container a {
color: #e6e619;
}
.lower-nav {
position: fixed;
width: 100%;
margin-top: 0.55em;
}
.lower-nav .row {
width: 100%;
}
.lower-nav ul {
list-style-type: none;
}
.lower-nav ul li {
margin: 0;
}
.lower-nav .language-select {
text-align: right;
}
/* ::Import styles */
/* ------------------------------------------------------------ */
h1 {
......
......@@ -43,8 +43,9 @@ $al-green : #67b2b1;
$beige-ruth : #f5f0e0;
$agent-orange : #c64f24;
$betty-blue : #a8d9f4;
$project-yellow : #e6e619;
$sb-forg : black;
$sb-backg : #333333;
$sb-backg : $project-yellow;
// Assign colours to variable roles
......
div.last-draft{
min-height: 400px;
@include respond-to($c-vp){
min-height: 600px;
}
margin-bottom: $para;
h2{
text-transform: capitalize;
padding-top: 100px;
padding-left: $para;
@include respond-to($c-vp){
padding-left: $para*2;
padding-top: 250px;
word-break: initial;
hyphens: auto;
}
color: white;
font-weight: bold;
font-size: 4em;
word-break: break-all;
// text-align: center;
}
}
div.home-content{
img{
width: 100%;
}
}
div.hero-detail{
p{
float: left;
a{
display: none;
}
i{
display: none;
}
}
p.hero-detail-text{
float: left;
font-family: monospace;
}
blockquote{
display: none;
}
blockquote:first-of-type{
display: block;
margin: 0;
padding-left: $para/2;
font-family: monospace;
float: left;
font-size: 1em;
}
strong{
display: none;
}
}
div.about{
display: none;
}
div.feed{
a.toggle-visible{
font-size: 1.1em;
font-family: monospace;
}
ul{
margin-left: 0em;
li{
padding-top: $para/2;
list-style-type: none;
border-top: 1px dashed grey;
}
blockquote{
p{
display: block;
}
font-size: 1em;
font-style: normal !important;
width: 100%;
max-height: 200px;
display: block;
overflow-y: hidden;
}
pre{
max-height: 200px;
// overflow-y: hidden;
overflow: hidden;
font-family: monospace;
background: lightgrey;
padding: 8px;
}
p{
display: none;
}
// li:before{
// content: "\2192 ";
// padding-right: $para/2;
// }
}
}
div.commit-content{
// display: none;
font-size: 0.8em;
//padding: $para;
//border: 1px dashed grey;
blockquote{
font-size: 1em;
font-style: italic;
border-left: 1px solid grey;
padding-left: $para;
}
a.link-to-commit{
font-family: monospace;
color: blue;
text-decoration: underline;
font-size: 1.2em;
}
img.gravatar{
display: none;
}
pre.code{
font-family: monospace;
background-color: grey;
padding: $para;
}
}
a.more-commits{
margin-bottom: $para/2;
padding-right: $para/2;
}
div.more-git-commits{
display: none;
}
......@@ -3,8 +3,3 @@
// ------------------------------------------------------------
// Place your BEM/SMACSS style .scss modules in the modules folder
.lower-nav{
position: fixed;
bottom: 50px;
}
......@@ -36,17 +36,31 @@ a {
}
}
ul{
margin: 0;
}
.is-typeset ul{
margin: 0 !important;
list-style-type: none !important;
}
div.main-nav{
min-height: 8vh;
height: 8vh;
@include leader(8);
h1{
text-align: center;
// text-align: center;
font-size: 2.5em;
span.title-uncertain{
color: $project-yellow;
}
}
.row{
width: 100%;
}
}
div.top-left-context, div.top-right-context{
position: fixed;
top: 20px;
ul{
list-style-type: none;
......@@ -59,14 +73,15 @@ div.top-left-context, div.top-right-context{
}
div.top-left-context{
left: 20px;
}
div.top-right-context{
right: 20px;
text-align: right;
}
span.uncertain_match{
color: $project-yellow;
}
div.hp-half::-webkit-scrollbar {
width: 6px;
......@@ -80,6 +95,11 @@ div.hp-half::-webkit-scrollbar-thumb:vertical {
background-color: $sb-forg;
}
div.white-row{
background-color: white;
height: 75vh;
}
div.hp-half{
position: fixed;
height: 75vh;
......@@ -91,23 +111,34 @@ div.hp-half{
}
div.hp-half-left{
left: 20px;
width: 48%;
left: 0px;
width: 50%;
}
div.hp-half-right{
right: 20px;
width: 48%;
right: 0px;
width: 50%;
padding: 20px;
background-color: white;
div.text-container{
color: black;
a{
color: black;
}
.description{
font-size: 1.1em;
span{
font-size: 1.1em;
}
}
.description:hover{
color: grey;
}
}
}
div.vignette{
width: 110px;
height: 280px;
height: 200px;
margin: 2px;
float: left;
// outline: 1px red solid;
......@@ -122,10 +153,16 @@ div.vignette{
}
figcaption{
margin-top: 6px;
font-size: 12px;
line-height: 14px;
font-size: 0.8em;
line-height: 1.1em;
font-family: AntiqueNobleLight;
font-weight: light;
color: black;
white-space: pre-wrap;
word-break: initial;
word-wrap: break-word;
}
}
......@@ -134,6 +171,39 @@ img.large-thumbnail{
width: 400px;
}
div.reg-page-container{
padding-top: 40px;
font-size: 1.2em;
color: black;
font-family: AntiqueNobleLight;
p.chapeau{
font-size: 2em;
line-height: 1.2em;
font-family: AntiqueNobleRegular;
}
a{
color: $project-yellow;
}
}
.lower-nav{
position: fixed;
width: 100%;
@include leader(2);
.row{
width: 100%;
}
ul{
list-style-type: none;
li{
margin: 0;
}
}
.language-select{
text-align: right;
}
}
/* ::Import styles */
/* ------------------------------------------------------------ */
......
{% extends "base.html" %}
{% block content %}
<div class="row-parent white-row">
<div class="row">
<div class="colspan12-8 push12-2 reg-page-container ">
<p class="chapeau">The Collection of uncertainties finds its source in the Belgian digitized heritage collections made public.</p>
<p>Thanks to the online catalogues and the progressive digitization of the collections, the search opens up not only to scientific classifications and descriptions but also to the "notes" or "remarks" of the notice. Hence, facilitating cross-referencing and mixing of the keywords from the thesaurus with elements entered more freely. Thus, paradoxically, the more details the scientist or archivist provides - by annotating and thereby introducing nuances - on the origin of an object, the more the fields of the probable, the unsolved and the possible open up to us. Objects sometimes frozen at a date or function can now become objects illustrating doubt, another possible or unclear story. The Collection of uncertainties is composed of all "/items/" whose notice contains vocabulary with an uncertain tendency, i.e. words such as "probable", "probably", "undoubtedly", "perhaps", "almost", "sometimes", "uncertain", etc., in French, Dutch or English. It consists of about ten to a few thousand "articles" depending on the languages or levels of uncertainty chosen, with no identical results for translated or similar words. Depending on the additions or modifications, the Collection of uncertainties is in perpetual evolution, much like knowledge, it evolves according to the uncertain knowledge and recognition of the scientific world.</p>
<p>The project is led by <a href="http://marielecrivain.com/">Marie Lécrivain</a> and <a href="http://colm.be">Colm O'Neill</a> and was supported by Fédération Wallonie-Bruxelles and <a href="https://constantvzw.org">constant vzw</a>.</p>
<p>It was initiated together by <a href="http://copyright.rip/">Martin Campillo</a> and Marie Lécrivain in December 2016 during <a href="http://www.constantvzw.org/site/-diversions-.html?lang=en"><i>DiVersions</i></a>, a worksession organized by Constant Association for Art and Media, in collaboration with the Brussels Royal Museum of Art and History.</p>
</div>
</div>
</div>
{% endblock %}
......@@ -11,6 +11,7 @@
<link rel='shortcut icon' type='image/png' sizes='32x32' href=''>
<link rel="stylesheet" href="/static/build/screen.css">
<script src="/static/build/jquery-3.2.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
{% endblock head %}
</head>
......@@ -19,31 +20,90 @@
{% block nav %}
<div class="main-nav row-parent">
<div class="top-left-context">
<ul>
<li id="date"></li>
<li id="time"></li>