adding website files

9 years ago · 58210feae8
parent 465209a47f
commit 58210feae8
8 changed files with 10287 additions and 0 deletions
--- a/web/allworks_mmdc.json
+++ b/web/allworks_mmdc.json
--- a/web/css/style.css
+++ b/web/css/style.css
@ -0,0 +1,345 @@
+* {
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
+html body{
+    padding: 0;
+    margin: 0;
+      
+}
+
+h1, p {
+  padding: 0;
+  margin: 0;
+}
+
+h1{
+  font-size: 32px;
+}
+
+.hiddenOverflow{
+  position: fixed; 
+  overflow-y:scroll;
+  width: 100%;
+}
+
+
+body {
+  font-family: 'texgyreheroscnbold';
+  font-size: 18px;
+  line-height: 18px;
+}
+
+#zwartIntro{
+
+    height: auto;
+    overflow: hidden;
+
+}
+
+
+.zwartArea{
+  min-height: 100vh;
+  background-color: black;
+  width: 70%;
+  float: right;
+      transition-delay: 0.2s !important;
+    -webkit-transition: ease-out 1s;
+    -moz-transition:  ease-out 1s;
+    -o-transition: ease-out 1s;
+    transition: ease-out 1s;
+}
+
+.zwartArea p, h1{
+  
+  /*font-size: 26px;*/
+  padding: 10px;
+
+  font-weight: normal;
+  line-height: 1.1;
+  /*font-family: 'texgyreheroscnbold';*/
+}
+
+.zwartAreaText{
+  color: white;
+  padding-top: 10px;
+}
+
+.zwartAreaWhite{
+  background-color: white;
+}
+
+.zwartAreaFull{
+  width: 80%;
+  float: left;
+  
+  margin-left: 10%;
+  padding-top: 40px;
+  padding-bottom: 60px;
+}
+
+.zwartAreaFull p{
+  font-size: 32px;
+  line-height: 1.3;
+}
+.zwartAreaFull h1{
+  font-size: 32px;
+  text-indent: 20px;
+}
+
+
+
+.zwartAreaColLeft{
+  width: 80%;
+  float: left;
+  
+  margin-left: 10%;
+  padding-top: 40px;
+  padding-bottom: 60px;
+}
+
+.zwartAreaColLeft p{
+  font-size: 32px;
+  line-height: 1.3;
+}
+.zwartAreaColLeft h1{
+  font-size: 32px;
+  text-indent: 20px;
+}
+
+
+
+.zwartAreaColRight{
+  width: 50%;
+  float: right;
+  padding-left: 20px;
+}
+
+.highlight{
+  color: white;
+  font-family: Vollkorn !important;
+  padding-top: 40px;
+}
+
+.colophon{
+  color: white;
+  font-family: arial !important;
+  padding-top: 40px;
+  font-size: 22px !important;
+    -webkit-columns: 100px 2; /* Chrome, Safari, Opera */
+    -moz-columns: 100px 2; /* Firefox */
+    columns: 100px 2;
+}
+
+
+
+#logo{
+  width: 25%;
+  position: fixed;
+  bottom: 10px;
+  left: 10px;
+}
+
+.underlineFilter{ 
+  transform: scaleX(2) translateX(25%);
+  -webkit-transform: scaleX(2) translateX(25%);
+  -moz-transform: scaleX(2) translateX(25%);
+  -o-transform: scaleX(2) translateX(25%);
+  
+
+}
+
+#sortArea{
+  line-height: 56px;
+}
+
+#sortArea label{
+  margin-right: 6px; 
+}
+
+#sortArea input{
+  display: none;
+}
+#sidebar{
+  width: 25%;
+  /*position: absolute;*/
+  position: fixed;
+  top: 0px;
+  padding-left: 10px;
+  /*border-bottom: 1px solid black;*/
+
+}
+
+#sideBarDesc{
+  display: none
+}
+
+#sideBarDesc .filterDesc{
+  display: none;
+  margin-top: 6px;
+  margin-bottom: 20px;
+}
+
+#sideBarDescInfo{
+  width:100%;
+  height: 60px;
+  line-height: 30px;
+  background-color: white;
+  color: black;
+  z-index: 9999999;
+  border-bottom: 4px solid black;
+  font-size: 26px;
+
+}
+
+#sideBarDescInfo p{
+  height: 56px;
+  line-height: 56px;
+}
+
+
+.filterDesc u{
+  text-decoration: none;
+  text-transform: capitalize;
+  margin-right: 20px;
+  margin-left: 20px;
+}
+
+
+
+#filter{
+  width:70%;
+  float: right;
+  /*left: 250px;*/
+  padding-left: 10px;
+  height: 60px;
+  line-height: 30px;
+  /*top: 0px;*/
+  /*position: fixed;*/
+  background-color: white;
+  color: black;
+  z-index: 9999999;
+  /*padding: 10px;*/
+  border-bottom: 4px solid black;
+  /*border-top: 4px solid black;*/
+
+  font-size: 26px;
+  font-family: 'texgyreheroscnbold';
+
+}
+
+
+label{
+  float: left;
+}
+
+.fixedBar{
+  position: fixed;
+  right: 0;
+  top: 0;
+}
+
+
+
+/* ---- isotope ---- */
+
+.isotope {
+  margin-top: 50px;
+  /*background: #ddd;*/
+  z-index: 1;
+  width: 100%;
+  overflow: hidden;
+  color: black;
+  /*min-height: 100vh;*/
+    transition-delay: 0.2s !important;
+    -webkit-transition: ease-out 1s;
+    -moz-transition:  ease-out 1s;
+    -o-transition: ease-out 1s;
+    transition: ease-out 1s;
+
+}
+
+
+/*.isotope>div{
+  width: 33.333%;
+}*/
+
+/* ---- isotope items ---- */
+
+
+
+.item,
+.grid-sizer {
+  width: 33.333%;
+}
+
+.item {
+  float: left;
+  height: 500px;
+  margin: 0 auto;
+  text-align: center;
+  padding: 30px;
+  
+  /*border: 2px solid black;*/
+  /*border-color: hsla(0, 0%, 0%, 0.7);*/
+  /*display: table; */
+
+}
+
+
+.item>*{
+  position: relative;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+
+
+.item.widthA { width: 66.666%; }
+/*.item.height2 { height: 200px; }*/
+
+
+/* clear fix */
+.isotope:after {
+  content: '';
+  display: block;
+  clear: both;
+}
+
+img {
+  max-width: 100%;
+  max-height: 100%;
+
+  -webkit-filter: grayscale(100%);
+  -moz-filter: grayscale(100%);
+  -ms-filter: grayscale(100%);
+  -o-filter: grayscale(100%);
+  filter: grayscale(100%);
+  filter: gray; /* IE 6-9 */
+}
+
+
+
+
+@media (max-width: 768px) {
+  .item {
+    width: 100%;
+  }
+  .item.widthA { width: 100%; }
+  .grid-sizer {
+    width: 100%;
+  }
+  .zwartAreaText{
+    padding-left: 10px;
+    padding-right: 10px;
+    color: white;
+  }
+
+}
+
+@media (max-width: 500px) {
+
+}
+
--- a/web/fontstylesheet01.css
+++ b/web/fontstylesheet01.css
@ -0,0 +1,12 @@
+@font-face {
+    font-family: 'texgyreheroscnbold';
+    src: url('texgyreheroscn-bold-webfont.eot');
+    src: url('texgyreheroscn-bold-webfont.eot?#iefix') format('embedded-opentype'),
+         url('texgyreheroscn-bold-webfont.woff') format('woff'),
+         url('texgyreheroscn-bold-webfont.ttf') format('truetype'),
+         url('texgyreheroscn-bold-webfont.svg#texgyreheroscnbold') format('svg');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
--- a/web/index.html
+++ b/web/index.html
@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <title>Media Design & Communication - Piet Zwart Institute</title>
+    <link rel="stylesheet" href="css/style.css">
+    <link rel="stylesheet" href="./fonts/fontstylesheet01.css">
+    <link href='http://fonts.googleapis.com/css?family=Vollkorn' rel='stylesheet' type='text/css'>
+  </head>
+  <body>
+    <div id="zwartIntro">
+      <div class="zwartArea" id="section00">
+      </div>
+      <div class="zwartArea zwartAreaText" id="section01">
+	<div class="zwartAreaFull">
+	  <h1>Media Design & Communication - Piet Zwart Institute</h1>
+	  <h1 class="highlight">Graduation 2012</h1>
+	</div>
+      </div>
+    </div>
+    <div id="filter">
+      <div id="sortArea" class="themes">
+	<label><input name="video" class="video" value=".video" type="checkbox"><p>Video</p></label>
+	<label><input name="flash" class="flash" value=".flash" type="checkbox"><p>Flash</p></label>
+	<label><input name="narrative" class="narrative" value=".narrative" type="checkbox"><p>Narrative</p></label>
+      </div>
+    </div>
+    <div id="sidebar">
+      <img id="logo" src="./img/black_PZI_logo_p.svg"/>
+      <div id="sideBarDesc">
+	<div id="sideBarDescInfo" class=""><p>Graduation 2015<p></div>
+      </div>
+    </div>
+    <!--   <h1>Isotope - cellsByRow, element sizing</h1> -->
+    <div id="section02" class="zwartArea zwartAreaWhite">
+      <!-- <div  class="isotope"></div> -->
+      <!-- WORKS DIV WILL BE ADDED HERE -->
+      
+    </div>
+
+    <!-- <script src="./js/jquery-2.1.3.min.js"></script> -->
+    <!-- <script src="./js/isotope.pkgd.min.js"></script> -->
+    <!-- <script src="./js/imagesloaded.pkgd.min.js"></script> -->
+    <!-- <script src="./js/mainScripts.js"></script> -->
+  </body>
+</html>
--- a/web/index_edited.html
+++ b/web/index_edited.html
@ -0,0 +1,46 @@
+<!DOCTYPE HTML><html><head>
+    <meta charset="UTF-8">
+    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
+    <title>Media Design &amp; Communication - Piet Zwart Institute</title>
+    <link href="css/style.css" rel="stylesheet">
+    <link href="./fonts/fontstylesheet01.css" rel="stylesheet">
+    <link href="http://fonts.googleapis.com/css?family=Vollkorn" rel="stylesheet" type="text/css">
+  </head>
+  <body>
+    <div id="zwartIntro">
+      <div class="zwartArea" id="section00">
+      </div>
+      <div class="zwartArea zwartAreaText" id="section01">
+	<div class="zwartAreaFull">
+	  <h1>Media Design &amp; Communication - Piet Zwart Institute</h1>
+	  <h1 class="highlight">Graduation 2012</h1>
+	</div>
+      </div>
+    </div>
+    <div id="filter">
+      <div class="themes" id="sortArea">
+	<label><input class="video" name="video" type="checkbox" value=".video"><p>Video</p></label>
+	<label><input class="flash" name="flash" type="checkbox" value=".flash"><p>Flash</p></label>
+	<label><input class="narrative" name="narrative" type="checkbox" value=".narrative"><p>Narrative</p></label>
+      </div>
+    </div>
+    <div id="sidebar">
+      <img id="logo" src="./img/black_PZI_logo_p.svg">
+      <div id="sideBarDesc">
+	<div class="" id="sideBarDescInfo"><p>Graduation 2015</p><p></p></div>
+      </div>
+    </div>
+    <!--   &lt;h1&gt;Isotope - cellsByRow, element sizing&lt;/h1&gt; -->
+    <div class="zwartArea zwartAreaWhite" id="section02">
+      <!-- &lt;div  class="isotope"&gt;&lt;/div&gt; -->
+      <!-- WORKS DIV WILL BE ADDED HERE -->
+      
+    <div class="item" id="15986"><a class="work" href="#"><img class="work" src="http://pzwiki.wdka.nl/mw-mediadesign/images/1/16/Pointer.gif"></a><div class="work"><p class="work">User:Joak/graduation/catalog1</p><p class="work">Joseph Knierzinger</p><p class="work">2015</p></div></div><div class="item" id="15974"><a class="work" href="#"><img class="work" src="http://pzwiki.wdka.nl/mw-mediadesign/images/thumb/a/af/22xxxxx.jpg/500px-22xxxxx.jpg"></a><div class="work"><p class="work">Ahhhh</p><p class="work">JOK</p><p class="work">2015</p></div></div><div class="item" id="15982"><a class="work" href="#"><img class="work" src="http://pzwiki.wdka.nl/mw-mediadesign/images/b/bd/Collage_007_thumbnail.jpg"></a><div class="work"><p class="work">The Aesthetics of Ethics</p><p class="work">Ana Luísa Moura</p><p class="work">2015</p></div></div><div class="item" id="15965"><a class="work" href="#"><img class="work" src="http://pzwiki.wdka.nl/mw-mediadesign/images/thumb/8/85/Luther-blissett-300.jpg/500px-Luther-blissett-300.jpg"></a><div class="work"><p class="work">Qq</p><p class="work">Luther Blisset</p><p class="work">2015</p></div></div></div>
+
+    <!-- &lt;script src="./js/jquery-2.1.3.min.js"&gt;&lt;/script&gt; -->
+    <!-- &lt;script src="./js/isotope.pkgd.min.js"&gt;&lt;/script&gt; -->
+    <!-- &lt;script src="./js/imagesloaded.pkgd.min.js"&gt;&lt;/script&gt; -->
+    <!-- &lt;script src="./js/mainScripts.js"&gt;&lt;/script&gt; -->
+  
+
+</body></html>
--- a/web/jquery-1.10.2.js
+++ b/web/jquery-1.10.2.js
--- a/web/pages.json
+++ b/web/pages.json
--- a/web/prototype_json.html
+++ b/web/prototype_json.html
@ -0,0 +1,47 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <meta charset="utf-8" />
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
+    <!--script type="text/javascript" src="jquery-1.10.2.js"></script-->
+    <script type="text/javascript">
+
+
+var myjson;
+
+function query(workid){
+    console.log(workid);
+    var title = myjson[workid]['Title'];
+    var creator = myjson[workid]['Creator'];
+    var description = myjson[workid]['Description'];
+    console.log(title, creator, description);
+
+}
+
+function readJSON(){
+    $.getJSON( "allworks_mmdc.json", function(data){
+    	myjson=data;
+	console.log(myjson);	
+        console.log(Object.keys(myjson));
+	testJSON(myjson);
+	hover();
+    })    
+
+$('span').hover(
+    function(){
+	var thisid = $(this).attr('id')
+	query(thisid);
+    }
+)
+
+}
+      
+    </script>
+
+</head>
+
+  <body onload="javascript:readJSON();" >
+    <h3>Testing <span id="9961">JSON</span></h3>
+    <h3>Hover over the words <span id="9939">JSON</span> and look at the console</h3>
+  </body>
+</html>