tuned-city
clone your own copy | download snapshot

Snapshots | iceberg

Inside this repository
path_list.ejs
text/html

Download raw (3.9 KB)

<!DOCTYPE HTML>

<% var MAX_ANNOTATIONS = 6 ; %>

<html>
<head>
    <meta charset="utf-8"/>
    <title>Tuned city</title>
    <link href='http://fonts.googleapis.com/css?family=Oswald:400,700,300' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Karla:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
    <link rel='stylesheet' href='/stylesheets/reset.css' />
</head>

<body>
    
    <style>
    
    .clearfix:after {
        content: ".";
        display: block;
        clear: both;
        visibility: hidden;
        line-height: 0;
        height: 0;
    }
    
    .clearfix {
            display: inline-block;
    }
    
    html[xmlns] .clearfix {
            display: block;
    }
    
    * html .clearfix {
            height: 1%;
    }
    
    body{
        background-color:#eee;
    }
    
    .content{
        margin:32px;
    }
    
    h1{
        font-size:34pt;
        font-family:Oswald;
    }
    
    .subtitle{
        font-size:22pt;
        font-family:Oswald;
        color:#77db8f;
        margin-top: 6px;
    }
    
    .path_list_box{
        margin-top:32px;
    }
    
/*    ul.path_list li{
        margin-top:12px;
    }*/
    
    .path_item{
        width:280px;
        float:left;
        margin:12px 24px 12px 0;
        height:180px;
        overflow:hidden;
/*         overflow-y:auto; */
        background-color:white;
        border-left:2px solid white;
        padding:8px 8px 8px 6px;
    }
    
    .path_link{
        text-decoration:none;
        font-family:Oswald;
        font-size:16pt;
        color: black;
    }
    
    .path_item:hover{
        border-left:2px solid #77db8f;
    }
    
    .path_item:hover .path_link{
        color: #FF4D00;
    }
    
    .path_text{
        margin-top:6px;
    }
    
    <% var annot_fs = 12 ; %>
    
    .annotation{
        font-family:Karla;
        line-height:<%= annot_fs %>pt;
    }
    
    <% for(var i=0; i < MAX_ANNOTATIONS; i++){ %>
    <% var fs = (annot_fs * (MAX_ANNOTATIONS - i) / MAX_ANNOTATIONS); %>
    .annot_<%= i %> {
        font-size: <%= fs %>pt;
    }
    <% } %>
    
    .rationale{
        font-family:Karla;
        font-size:10pt;
        line-height:13pt;
        margin-top:16px;
    }
    
    .rationale div{
        margin: 1%;
        width: 29%;
        float:left;
        min-width:220pt;
    }
    
    .rationale div:first-child{
        margin-left:0;
    }
    
    .rationale div a{
        color:black;
/*         font-weight:bold; */
        font-style:italic;
        font-size:110%;
        text-decoration:none;
    }
    .rationale div a:hover{
        color:#77db8f;
        border-bottom:1px solid;
    }
    
    
    </style>
    
</head>

<body>
    <div class="content">
        <h1>
        Archive | Archief
        </h1>
        <div class="subtitle">
        An archiving experiment towards digital sound spaces for Tuned City Brussels.
        </div>
        
        <div class="rationale clearfix">
        <%= include partials/intro.ejs %>
        </div>
        
        <div class="path_list_box">
<!--             <ul class="path_list"> -->
            <% for(var i=0; i<path_list.length; i++) {%>
                <div class="path_item">
                    <a class="path_link" href="/<%= path_list[i]._id %>"><%= path_list[i].title %></a> 
<!--                     (<%= path_list[i].trackpoints.length %>) -->
                    <div class="path_text">
                    <% var T = text[ path_list[i]._id ]; %>
                    <% for(var tid in T){ if(tid >= MAX_ANNOTATIONS){break;} var t=T[tid]; %>
                        <p class="annotation annot_<%= tid %>" >
                        <%= t.split(' ').slice(0,24).join(' ') %>
                        </p>
                    <% } %>
                    </div>
                </div>
            <% } %>
<!--             </ul> -->
        </div>
    </div>
</body>
</html>