r/alleswatikvoel
r/alleswatikvoel
1
0
Fork 0
Code Pull requests Releases Activity

Add info overlay

Browse source
This commit is contained in:
Ruben 2017-03-11 12:42:21 +01:00
parent ac95a59cca
commit ae4753ba6a
1 changed files with 52 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
templates/index.html
View file

@ -135,6 +135,41 @@
width:100%; width:100%;
} }
#info{
background: blue;color:white;
width: 30em;
height: 30em;
padding: 1em;
border-radius: 50%;
margin: auto;
text-align: center;
position: absolute;
top: calc(47.5% - 15em);
left: calc(50% - 15em);
display: none;
flex-direction: column;
justify-content: center;
}
#info.show{
display:flex;
}
a:link, a:visited{
color:yellow;
text-decoration: none;
}
a:hover{
color:red;
text-decoration: underline;
}
h3{
cursor:pointer;
}
h3:hover:after{
content:' (?)';
color:blue;
}
/* Standard syntax */ /* Standard syntax */
@keyframes rotate { @keyframes rotate {
from {transform: rotate(0deg);} from {transform: rotate(0deg);}
@ -144,7 +179,7 @@
</head> </head>
<body> <body>
<aside id='selects'> <aside id='selects'>
<h3>Alles wat ik voel</h3> <h3 onclick='toggleInfo()'>Alles wat ik voel</h3>
<!-- <h3>Toon op basis van...</h3> <!-- <h3>Toon op basis van...</h3>
<h4>groep</h4> <h4>groep</h4>
<ul> <ul>
@ -192,6 +227,16 @@
<div id='detail'><img id='detail-img' src=''></div> <div id='detail'><img id='detail-img' src=''></div>
<section id='info'>
<h4>Over deze publicatie.</h4>
<p>Op deze pagina zie je een automatische categorisering van de kleuren in kunstwerkjes die zijn gemaakt door scholieren van de Sint Janschool, in Amsterdam. Ze zijn gemaakt in maart 2017 ter gelegenheid van het uitkomen van <em>Alles wat ik voel</em>, het nieuwe boek van <a href="http://stinejensen.nl">Stine Jensen</a> (uitgegeven door <a href="http://www.kluitman.nl">Kluitman</a>).</p>
<p>Deze pagina is ontworpen en uitgevoerd door media-ontwerper <a href="https://rubenvandeven.com">Ruben van de Ven</a>.</p>
<p>[ <a href="" onclick="toggleInfo();return false;">sluiten</a> ]</p>
</section>
<script type="text/javascript"> <script type="text/javascript">
function updateProgress(evt) function updateProgress(evt)
{ {
@ -272,6 +317,12 @@
{ {
document.getElementById('detail').classList.remove('active'); document.getElementById('detail').classList.remove('active');
} }
var infoEl = document.getElementById('info');
function toggleInfo()
{
infoEl.classList.toggle('show');
}
</script> </script>
</body> </body>
</html> </html>