acastro
/
pzimediadesign
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge branch 'master' of https://gitlab.com/Castro0o/iki2Frontend-MMDC

Browse Source
master
lasse 10 years ago
parent bb66ea0132 3fc8785398
commit a8c9ce58a5
14 changed files with 220 additions and 278 deletions
Show Stats Download Patch File Download Diff File

24
README.md
Unescape Escape View File

@ -7,11 +7,19 @@ Or index all the gaduation works:
`python mmdc_wiki2web.py --category Graduation_work`
## Thumbnails
thumbnails in work pages are hidden. this can be changed.
style_projectpage.css:
`#thumnail {
display: none;
}`
## template files
web/page-template.html
1) SCRIPTS in buttom of generated pages does not close proberly. And non-relevant scripts are also still in.
1) SCRIPTS in bottom of generated pages does not close proberly. And non-relevant scripts are also still in.
should be:
=========
@ -31,15 +39,19 @@ is now:
<script src="./js/imagesloaded.pkgd.min.js" />
<script src="./js/mainScripts_single.js" />
2)
web/index-template.html
web/index-template.html:
1) FIXED broken img files in index-temlpate: white logo + arrowDown/Up
2)
web/page-template.html:
1) [minor] ADDED a space between arrowBack and title for mobile version
css:
Lot's of changes to CSS, including thumbnail not displayed on project page;
iframes no borders, h1/h2/h3 styling, fixes in sidebar, url 'breaks' word now.
## To Do
* add auxiliar JSON creation

14
mmdc_modules.py
Unescape Escape View File

@ -79,8 +79,10 @@ def api_thumb_url(filename):
# PROCESSING MODULES
def write_html_file(html_tree, filename):
print 'WRITE HTML FILE'
doctype = "<!DOCTYPE HTML>"
html = doctype + ET.tostring(html_tree, encoding='utf-8', method='html')
print 'TREE', type(html_tree)
html = doctype + ET.tostring(html_tree, method='html', encoding='utf-8', )
edited = open(filename, 'w') #write
edited.write(html)
edited.close()
@ -121,7 +123,7 @@ def pandoc2html(mw_content):
gallery_exp=re.compile('<gallery>(.*?)</gallery>', re.S)
imgfile_exp=re.compile('(File:(.*?)\.(gif|jpg|jpeg|png|svg))')
imgfile_exp=re.compile('(File:(.*?)\.(gif|jpg|jpeg|png))')
def replace_gallery(content):
content = re.sub(imgfile_exp, '[[\g<1>]]', content) #add [[ ]] to File:.*?
@ -146,6 +148,10 @@ def index_addwork(parent, workid, href, thumbnail, title, creator, date):
'data-creator':creator,
'data-date':date})
grandchild_a = ET.SubElement(child_div, 'a', attrib={'href':href, 'class':'work'})
grandgrandchild_img = ET.SubElement(grandchild_a, 'img', attrib={'class':'work', 'src':thumbnail})
grandchild_a = ET.SubElement(child_div, 'a', attrib={'href':href, 'class':'work'})
if thumbnail is '':
grandgrandchild_h3 = ET.SubElement(grandchild_a, 'h3', attrib={'class':'work', 'id':'thumbnail_replacement'})
grandgrandchild_h3.text=title
else:
grandgrandchild_img = ET.SubElement(grandchild_a, 'img', attrib={'class':'work', 'src':thumbnail})
# need to add css width to div.item

76
mmdc_wiki2web.py
Unescape Escape View File

@ -37,15 +37,9 @@ endpoint = "http://pzwiki.wdka.nl/mw-mediadesign/api.php?format=json&"
# CREATE INDEX
########
memberpages=mw_cats(args)
#memberpages['Ctrl-F Reader','As We Speak']
print 'memberpages', memberpages
#memberpages = api_pagesincategories('Graduation work', '2015') #list, containing dictionary of all pages ids. Example: [{u'ns': 0, u'pageid': 15974, u'title': u'Ahhhh'}, {u'ns': 0, u'pageid': 16005, u'title': u'Artyom-graduation-work'}]
#memberpages = [{u'ns': 0, u'pageid': 15982, u'title': u'The Aesthetics of Ethics'}]
#memberpages = [{u'ns': 0, u'pageid': 16005, u'title': u'Artyom-graduation-work'}]
#memberpages = [{u'ns': 0, u'pageid': 16007, u'title': u'U ntitled'}]
#memberpages = [{u'ns': 0, u'pageid': 15965, u'title': u'Qq'}]
## output: memberpages [{u'ns': 0, u'pageid': 15982, u'title': u'The Aesthetics of Ethics'}]
########
# Templates
@ -72,27 +66,35 @@ for member in memberpages:
workpage_mw = replace_gallery(workpage_mw)
workpage_mw = replace_video(workpage_mw)
workdict = parse_work(member, workpage_mw) # create dictionary workpage_mw template
if len(workdict['Creator'])>1 and len(workdict['Title'])>1 and len(workdict['Description'])>1 and len(workdict['Thumbnail'])>1:
for key in workdict.keys(): # convert Extra, Description, Bio to HTML
if key in ['Extra', 'Description', 'Bio'] and workdict[key]:
workdict[key] = pandoc2html( (workdict[key].decode('utf-8')))
elif key in ['Creator']:
workdict[key] = workdict[key].replace(',','' ) #remove comma
#replace empty dict values with ' ' # to avoid empty tags
for key in workdict.keys():
if workdict[key] is '' and key is not 'Thumbnail':
workdict[key] = ' '
elif key is 'Thumbnail' and workdict[key]:
img = '<img id="thumnail" src="{}" />'.format(workdict[key])
# append img to text
workdict[key] = workdict[key] # + img
print 'THUMB', workdict[key]
for key in workdict.keys(): # convert Extra, Description, Bio to HTML
if key in ['Extra', 'Description', 'Bio'] and workdict[key]:
workdict[key] = pandoc2html( (workdict[key].decode('utf-8')) )
print 'EXTRA', type (workdict['Extra']), workdict['Extra']
# fill template with dictionary/mw_page values
pprint.pprint(workdict)
if len(workdict['Creator'])>1 and len(workdict['Creator'])>1:
if type(workdict[key]) is unicode:
workdict[key]=workdict[key].encode('utf-8')
# print workdict[key]
workpage_html = page_template.format(title=('Title'),#workdict['Title']),
creator=(workdict['Creator']),
workpage_html = page_template.format(title=workdict['Title'],
creator=workdict['Creator'],
date=workdict['Date'],
website=workdict['Website'],
thumbnail=workdict['Thumbnail'],
bio=(workdict['Bio']),
description=(workdict['Description']),
extra=( workdict['Extra'] )
bio=workdict['Bio'],
description=workdict['Description'],
extra=workdict['Extra']
)
# parse workpage_html # process html: img full url
@ -105,33 +107,31 @@ for member in memberpages:
if newsrc:
img.set('src', newsrc)
website = tree.find('.//p[@class="hightlightSidebar"]/a')
if not website.get('href'): # if no website link.
#remove empty <a> .//p[@class="hightlightSidebar"]/a
website_parent = tree.find('.//p[@class="hightlightSidebar"]')
website_parent.remove(website)
#######
# INDEX
#######
# save workpage_html
workpage_html = ET.tostring(tree)
creator = workdict['Creator'].decode('ascii', 'ignore')
creator = workdict['Creator']#.decode('ascii', 'ignore')
creator = creator.replace(' ','_')
work_filename = 'web/{}-{}.html'.format(workdict['Date'], creator)
work_file = open(work_filename, "w")
work_file.write(workpage_html)
work_file.close()
print 'DICT', type(workdict['Title'])
# insert work to index
# insert work to index
index_addwork( parent=index_container,
workid=key,
href=work_filename.replace('web/',''),
title=(workdict['Title']),#.decode('utf-8'),
creator=workdict['Creator'].decode('utf-8'),
title=workdict['Title'],#.decode('utf-8'),
creator=workdict['Creator'],#.decode('utf-8'),
date=workdict['Date'],
thumbnail=workdict['Thumbnail'],
thumbnail=workdict['Thumbnail']
)
# print '----', workdict['Title']
# print ET.tostring(tree)
print index_tree, type(index_tree)
write_html_file(index_tree, 'web/index.html')
print
print

24
web/2015-Artyom.html
Unescape Escape View File

@ -2,7 +2,7 @@
<meta charset="UTF-8" />
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport" />
<title>Title</title>
<title>Artyom-graduation-work</title>
<link href="./css/style.css" rel="stylesheet" />
<link href="./css/style_projectpage.css" rel="stylesheet" />
<link href="./fonts/fontstylesheet01.css" rel="stylesheet" />
@ -20,19 +20,19 @@
<div id="sideBarDescInner">
<!-- we used h2's and p's instead of divs here, moved 2015 and deleted http://pzwiki.wdka.nl/mw-mediadesign/images/thumb/6/6a/Screen_Shot_2014-10-26_at_16.10.08.jpg/500px-Screen_Shot_2014-10-26_at_16.10.08.jpg -->
<!-- we used h2's and p's instead of divs here, moved date and deleted thumbnail -->
<h2 id="creator">Artyom</h2>
<p id="title">Title 2015</p>
<p id="title">Artyom-graduation-work 2015</p>
<!-- moved up <p>Artyom&#8217;s work entitled &#8220;New Image&#8221; is a series of images of that have been made using Google Image search results. In his work Artyom explores the relations between images and the technology that is responsible for their production and distribution. Namely how technological endeavors came to affect the dynamics within image culture.</p>
-->
<!-- moved up description -->
<div id="description"><p>Artyom&#8217;s work entitled &#8220;New Image&#8221; is a series of images of that have been made using Google Image search results. In his work Artyom explores the relations between images and the technology that is responsible for their production and distribution. Namely how technological endeavors came to affect the dynamics within image culture.</p>
</div>
<div id="bio" />
<div id="bio"><p>Artyom Kocharyan (AM) is visual artist based in Rotterdam. His work explores the contemporary visual culture, namely the culture of images that increasingly dominate the world of communication. Artyom&#8217;s work is concerned with the representation aspect of images and their ability to determine our vision of the world. Artyom is engaged with the representation apparatus that is peculiar to current digital and online culture.</p>
</div>
<p class="hightlightSidebar"><a href="www.artyomkocharyan.com" target="_blank">www.artyomkocharyan.com</a></p>
@ -48,7 +48,7 @@
<div class="zwartArea zwartAreaWhite sidebarBorderLeft" id="section02">
<div class="fixedsticky" id="filter" style="top:0;">
<div class="themes" id="sortArea">
<a class="hoverBackB" href="index.html"><img src="./img/arrowBack.svg" /></a><p>Title</p><a class="closeSidebar"><img src="./img/arrowUpW.svg" /></a>
<a class="hoverBackB" href="index.html"><img src="./img/arrowBack.svg" /></a> <p>Artyom-graduation-work</p><a class="closeSidebar"><img src="./img/arrowUpW.svg" /></a>
</div>
</div>
@ -66,12 +66,10 @@
</div>
</div>
<script src="./js/jquery-2.1.3.min.js" />
<script src="./js/fixedfixed.js" />
<script src="./js/fixedsticky.js" />
<script src="./js/isotope.pkgd.min.js" />
<script src="./js/imagesloaded.pkgd.min.js" />
<script src="./js/mainScripts_single.js" />
<script src="./js/jquery-2.1.3.min.js"> </script>
<script src="./js/fixedfixed.js"> </script>
<script src="./js/fixedsticky.js"> </script>
<script src="./js/mainScripts_single.js"> </script>

28
web/2015-Henk-Jelle_de_Groot.html
Unescape Escape View File

@ -2,7 +2,7 @@
<meta charset="UTF-8" />
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport" />
<title>Title</title>
<title>U ntitled</title>
<link href="./css/style.css" rel="stylesheet" />
<link href="./css/style_projectpage.css" rel="stylesheet" />
<link href="./fonts/fontstylesheet01.css" rel="stylesheet" />
@ -20,21 +20,21 @@
<div id="sideBarDescInner">
<!-- we used h2's and p's instead of divs here, moved 2015 and deleted http://pzwiki.wdka.nl/mw-mediadesign/images/e/e7/9m4MBqRM1w-6.png -->
<!-- we used h2's and p's instead of divs here, moved date and deleted thumbnail -->
<h2 id="creator">Henk-Jelle de Groot</h2>
<p id="title">Title 2015</p>
<p id="title">U ntitled 2015</p>
<!-- moved up <p>Untitled is a work about visualizing non audible and non visual acoustic properties of a space. Every space has a certain acoustic reverberation, a property that can't be heard or seen on it's own. With this project I aim to visualize that property trough data visualization. Untitled contains a (few) examples of spaces that have been mapped and visualized in a new form and material. These sculptures are presented in a way that the viewer may contextualize on it's own what the nature of the sculpture is</p>
-->
<!-- moved up description -->
<div id="description"><p>Untitled is a work about visualizing non audible and non visual acoustic properties of a space. Every space has a certain acoustic reverberation, a property that can't be heard or seen on it's own. With this project I aim to visualize that property trough data visualization. Untitled contains a (few) examples of spaces that have been mapped and visualized in a new form and material. These sculptures are presented in a way that the viewer may contextualize on it's own what the nature of the sculpture is</p>
</div>
<div id="bio" />
<div id="bio"><p>Henk-Jelle de Groot is a Rotterdam based sound designer and musician. After graduating with an Audio / Visual design bachelor Henk-Jelle setup a sound studio in Rotterdam to work in the Audio / Visual industry. After 7 years of working he returned to the Piet Zwart Institute to graduate in a Master of comm design something something. In addition to working in the Audio / Visual industry, he is muscian and builder of electronic instruments.</p>
</div>
<p class="hightlightSidebar" />
<p class="hightlightSidebar"><a href=" " target="_blank"> </a></p>
<!-- // -->
@ -48,7 +48,7 @@
<div class="zwartArea zwartAreaWhite sidebarBorderLeft" id="section02">
<div class="fixedsticky" id="filter" style="top:0;">
<div class="themes" id="sortArea">
<a class="hoverBackB" href="index.html"><img src="./img/arrowBack.svg" /></a><p>Title</p><a class="closeSidebar"><img src="./img/arrowUpW.svg" /></a>
<a class="hoverBackB" href="index.html"><img src="./img/arrowBack.svg" /></a> <p>U ntitled</p><a class="closeSidebar"><img src="./img/arrowUpW.svg" /></a>
</div>
</div>
@ -56,7 +56,7 @@
<div class="project" id="extra">
<img id="thumnail" src="http://pzwiki.wdka.nl/mw-mediadesign/images/e/e7/9m4MBqRM1w-6.png" />
</div>
<!---->
@ -64,12 +64,10 @@
</div>
</div>
<script src="./js/jquery-2.1.3.min.js" />
<script src="./js/fixedfixed.js" />
<script src="./js/fixedsticky.js" />
<script src="./js/isotope.pkgd.min.js" />
<script src="./js/imagesloaded.pkgd.min.js" />
<script src="./js/mainScripts_single.js" />
<script src="./js/jquery-2.1.3.min.js"> </script>
<script src="./js/fixedfixed.js"> </script>
<script src="./js/fixedsticky.js"> </script>
<script src="./js/mainScripts_single.js"> </script>

24
web/2015-Lucia_Dossin.html
Unescape Escape View File

@ -2,7 +2,7 @@
<meta charset="UTF-8" />
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport" />
<title>Title</title>
<title>Mina</title>
<link href="./css/style.css" rel="stylesheet" />
<link href="./css/style_projectpage.css" rel="stylesheet" />
<link href="./fonts/fontstylesheet01.css" rel="stylesheet" />
@ -20,19 +20,19 @@
<div id="sideBarDescInner">
<!-- we used h2's and p's instead of divs here, moved 2015 and deleted http://pzwiki.wdka.nl/mw-mediadesign/images/5/59/3legs.jpg -->
<!-- we used h2's and p's instead of divs here, moved date and deleted thumbnail -->
<h2 id="creator">Lucia Dossin</h2>
<p id="title">Title 2015</p>
<p id="title">Mina 2015</p>
<!-- moved up <p>Mina is a smart chat bot, a commercial project designed by a promising startup to fulfill humans' need of talking to someone else in a world where communication has become almost completely mediated by social media services. To keep the illusion alive, the software aims to be invisible.</p>
-->
<!-- moved up description -->
<div id="description"><p>Mina is a smart chat bot, a commercial project designed by a promising startup to fulfill humans' need of talking to someone else in a world where communication has become almost completely mediated by social media services. To keep the illusion alive, the software aims to be invisible.</p>
</div>
<div id="bio">hoi </div>
<div id="bio"><p>The bio is coming soon.</p>
</div>
<p class="hightlightSidebar"><a href="www.example.com" target="_blank">www.example.com</a></p>
@ -48,7 +48,7 @@
<div class="zwartArea zwartAreaWhite sidebarBorderLeft" id="section02">
<div class="fixedsticky" id="filter" style="top:0;">
<div class="themes" id="sortArea">
<a class="hoverBackB" href="index.html"><img src="./img/arrowBack.svg" /></a><p>Title</p><a class="closeSidebar"><img src="./img/arrowUpW.svg" /></a>
<a class="hoverBackB" href="index.html"><img src="./img/arrowBack.svg" /></a> <p>Mina</p><a class="closeSidebar"><img src="./img/arrowUpW.svg" /></a>
</div>
</div>
@ -71,12 +71,10 @@
</div>
</div>
<script src="./js/jquery-2.1.3.min.js" />
<script src="./js/fixedfixed.js" />
<script src="./js/fixedsticky.js" />
<script src="./js/isotope.pkgd.min.js" />
<script src="./js/imagesloaded.pkgd.min.js" />
<script src="./js/mainScripts_single.js" />
<script src="./js/jquery-2.1.3.min.js"> </script>
<script src="./js/fixedfixed.js"> </script>
<script src="./js/fixedsticky.js"> </script>
<script src="./js/mainScripts_single.js"> </script>

23
web/2015-Luther_Blisset.html
Unescape Escape View File

@ -2,7 +2,7 @@
<meta charset="UTF-8" />
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport" />
<title>Title</title>
<title>Qq</title>
<link href="./css/style.css" rel="stylesheet" />
<link href="./css/style_projectpage.css" rel="stylesheet" />
<link href="./fonts/fontstylesheet01.css" rel="stylesheet" />
@ -20,19 +20,19 @@
<div id="sideBarDescInner">
<!-- we used h2's and p's instead of divs here, moved 2015 and deleted http://pzwiki.wdka.nl/mw-mediadesign/images/thumb/8/85/Luther-blissett-300.jpg/500px-Luther-blissett-300.jpg -->
<!-- we used h2's and p's instead of divs here, moved date and deleted thumbnail -->
<h2 id="creator">Luther Blisset</h2>
<p id="title">Title 2015</p>
<p id="title">Qq 2015</p>
<!-- moved up <p>The novel <strong>Q</strong> was written by four Bologna-based members of the LBP, as a final contribution to the project, and published in Italy in 1999. So far, it has been translated into English (British and American), Spanish, German, Dutch, French, Portuguese (Brazilian), Danish, Polish, Greek, Czech, Russian, Turkish, Basque and Korean. In August 2003 the book was nominated for the Guardian First Book Prize.</p>
-->
<!-- moved up description -->
<div id="description"><p>The novel <strong>Q</strong> was written by four Bologna-based members of the LBP, as a final contribution to the project, and published in Italy in 1999. So far, it has been translated into English (British and American), Spanish, German, Dutch, French, Portuguese (Brazilian), Danish, Polish, Greek, Czech, Russian, Turkish, Basque and Korean. In August 2003 the book was nominated for the Guardian First Book Prize.</p>
</div>
<div id="bio" />Oh </div>
<div id="bio"><p>Luther Blissett is a multiple-use name, an open pop star informally adopted and shared by hundreds of artists and activists all over Europe and the Americas since 1994. The pseudonym first appeared in Bologna, Italy, in mid-1994, when a number of cultural activists began using it for staging a series of urban and media pranks and to experiment with new forms of authorship and identity. From Bologna the multiple-use name spread to other European cities, such as Rome and London, as well as countries such as Germany, Spain, and Slovenia.[1] Sporadic appearances of Luther Blissett have been also noted in Canada, the United States, and Brazil.</p>
</div>
<p class="hightlightSidebar"><a href="https://en.wikipedia.org/wiki/Luther_Blissett_(nom_de_plume)" target="_blank">https://en.wikipedia.org/wiki/Luther_Blissett_(nom_de_plume)</a></p>
@ -48,7 +48,7 @@
<div class="zwartArea zwartAreaWhite sidebarBorderLeft" id="section02">
<div class="fixedsticky" id="filter" style="top:0;">
<div class="themes" id="sortArea">
<a class="hoverBackB" href="index.html"><img src="./img/arrowBack.svg" /></a><p>Title</p><a class="closeSidebar"><img src="./img/arrowUpW.svg" /></a>
<a class="hoverBackB" href="index.html"><img src="./img/arrowBack.svg" /></a> <p>Qq</p><a class="closeSidebar"><img src="./img/arrowUpW.svg" /></a>
</div>
</div>
@ -73,10 +73,11 @@
</div>
</div>
<script src="./js/jquery-2.1.3.min.js"></script>
<script src="./js/fixedfixed.js"></script>
<script src="./js/fixedsticky.js"></script>
<script src="./js/mainScripts_single.js"></script>
<script src="./js/jquery-2.1.3.min.js"> </script>
<script src="./js/fixedfixed.js"> </script>
<script src="./js/fixedsticky.js"> </script>
<script src="./js/mainScripts_single.js"> </script>
</body></html>

24
web/2015-Max_Dovey.html
Unescape Escape View File

@ -2,7 +2,7 @@
<meta charset="UTF-8" />
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport" />
<title>Title</title>
<title>User:Max Dovey/maxgradbio</title>
<link href="./css/style.css" rel="stylesheet" />
<link href="./css/style_projectpage.css" rel="stylesheet" />
<link href="./fonts/fontstylesheet01.css" rel="stylesheet" />
@ -20,19 +20,19 @@
<div id="sideBarDescInner">
<!-- we used h2's and p's instead of divs here, moved 2015 and deleted http://pzwiki.wdka.nl/mw-mediadesign/images/1/16/Pointer.gif -->
<!-- we used h2's and p's instead of divs here, moved date and deleted thumbnail -->
<h2 id="creator">Max Dovey</h2>
<p id="title">Title 2015</p>
<p id="title">User:Max Dovey/maxgradbio 2015</p>
<!-- moved up <p>How to be more or less human.</p>
-->
<!-- moved up description -->
<div id="description"><p>How to be more or less human.</p>
</div>
<div id="bio" />
<div id="bio"><p>My Bio</p>
</div>
<p class="hightlightSidebar"><a href="http://maxdovey.com" target="_blank">http://maxdovey.com</a></p>
@ -48,7 +48,7 @@
<div class="zwartArea zwartAreaWhite sidebarBorderLeft" id="section02">
<div class="fixedsticky" id="filter" style="top:0;">
<div class="themes" id="sortArea">
<a class="hoverBackB" href="index.html"><img src="./img/arrowBack.svg" /></a><p>Title</p><a class="closeSidebar"><img src="./img/arrowUpW.svg" /></a>
<a class="hoverBackB" href="index.html"><img src="./img/arrowBack.svg" /></a> <p>User:Max Dovey/maxgradbio</p><a class="closeSidebar"><img src="./img/arrowUpW.svg" /></a>
</div>
</div>
@ -65,12 +65,10 @@
</div>
</div>
<script src="./js/jquery-2.1.3.min.js" />
<script src="./js/fixedfixed.js" />
<script src="./js/fixedsticky.js" />
<script src="./js/isotope.pkgd.min.js" />
<script src="./js/imagesloaded.pkgd.min.js" />
<script src="./js/mainScripts_single.js" />
<script src="./js/jquery-2.1.3.min.js"> </script>
<script src="./js/fixedfixed.js"> </script>
<script src="./js/fixedsticky.js"> </script>
<script src="./js/mainScripts_single.js"> </script>

9
web/css/style.css
Unescape Escape View File

@ -115,6 +115,12 @@ body {
font-family: "texgyreheroscnbold", monospace;
}
.colophon a {
color: white;
text-decoration: none;
border-bottom: 3px solid white;
}
#sortArea label{
margin-right: 6px;
}
@ -289,7 +295,8 @@ label{
max-width: 100%;
max-height: 100%;
vertical-align: middle;
width:500px;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);

86
web/css/style_projectpage.css
Unescape Escape View File

@ -12,6 +12,9 @@ h2 {
font-family: "inconsolata", monospace;
font-weight: normal;
margin: 0;
}
#creator {
border-bottom: 0;
padding-bottom: 0;
}
@ -21,6 +24,8 @@ h2 {
width: 80%;
float: right;
position:relative;
height: 100%;
display: table;
}
.zwartAreaText{
@ -45,7 +50,6 @@ h2 {
color: white;
}
.colophon, .highlight{
color: white;
}
@ -56,17 +60,33 @@ h2 {
#sideBarDescInfo{
border-bottom: 3px solid white;
/*height: 60px;*/
padding: 10px;
}
#sideBarDescInfo p{
display: initial;
}
#sideBarDescInner p:first-of-type{
padding-top: 0;
.hightlightSidebar {
word-wrap: break-word;
}
#sideBarDescInner p{
border-bottom: 3px double white;
}
#bio {
line-height: 22px;
font-size: 16px;
font-family: "inconsolata", monospace;
padding: 10px;
border-bottom: 3px double white;
}
#title {
padding-top: 0 !important;
}
#sideBarDescInner a,
#sideBarDescInner a:active,
#sideBarDescInner a:visited,
@ -152,6 +172,39 @@ h2 {
max-height: 600px;
}
.project h1,
.project h2,
.project h3 {
font-family: 'texgyreheroscnbold';
}
.project h1 {
font-size: 25px;
padding-left: 10px;
text-indent: 50px;
}
.project h2 {
font-size: 23px;
padding-left: 10px;
text-indent: 50px;
}
.project h3 {
font-size: 21px;
padding-left: 10px;
text-indent: 50px;
}
#thumnail {
display: none;
}
iframe {
border: none;
}
@media only screen and (max-width:1600px){
.project {
@ -179,11 +232,9 @@ h2 {
}
@media only screen and (max-width:1280px){
.project {
width: 90%;
}
}
@media only screen and (max-width: 768px){
@ -200,10 +251,25 @@ h2 {
border-bottom: 3px solid white;
}
#sideBarDescInfo p {
padding: 0;
}
.project {
width: 100%;
margin-top: 50px;
}
width: 100%;
margin-top: 50px;
}
.project img {
max-width: 100%;
padding: 10px 0 10px 0;
}
iframe {
border: none;
max-width: 100%;
padding: 10px 0 10px 0;
}
.sidebarBorderLeft {
border-left: 0;
@ -213,7 +279,7 @@ h2 {
-webkit-box-shadow: inset 0px -3px 0px 0px white;
-moz-box-shadow: inset 0px -3px 0px 0px white;
box-shadow: inset 0px -3px 0px 0px white;
}
}
.hoverBackA {
display: none !important;

71
web/img/arrowa.svg
Unescape Escape View File

@ -1,71 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="58.688324"
height="41.601223"
id="svg2"
version="1.1"
inkscape:version="0.48.3.1 r9886"
sodipodi:docname="arrow2.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1.4"
inkscape:cx="45.383594"
inkscape:cy="-124.96541"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:window-width="1920"
inkscape:window-height="1151"
inkscape:window-x="0"
inkscape:window-y="29"
inkscape:window-maximized="1"
showguides="false" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-264.24648,-231.20752)">
<g
transform="matrix(9.7769443e-8,6.8051692,-6.8051692,9.7769443e-8,1249.5812,-1226.1354)"
style="font-size:12px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Crimson Text;-inkscape-font-specification:Crimson Text"
id="flowRoot2985">
<path
d="m 220.26552,138.23638 0,6.55572 -0.99609,0 0,-5.55963 -3.47646,0 1.36523,1.36524 -0.70312,0.70312 -2.30274,-2.30273 0,-0.52734 2.30274,-2.30274 0.70312,0.70313 -1.36523,1.36523 4.47255,0"
id="path2994"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccccccccc" />
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.5 KiB

71
web/img/arrowb.svg
Unescape Escape View File

@ -1,71 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="58.688324"
height="41.601223"
id="svg2"
version="1.1"
inkscape:version="0.48.3.1 r9886"
sodipodi:docname="arrowa.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1.4"
inkscape:cx="45.383592"
inkscape:cy="-124.96538"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:window-width="1920"
inkscape:window-height="1151"
inkscape:window-x="0"
inkscape:window-y="29"
inkscape:window-maximized="1"
showguides="false" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-264.24648,-231.20755)">
<g
transform="matrix(9.7769443e-8,-6.8051692,-6.8051692,-9.7769443e-8,1249.5812,1730.1517)"
style="font-size:12px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Crimson Text;-inkscape-font-specification:Crimson Text"
id="flowRoot2985">
<path
d="m 220.26552,138.23638 0,6.55572 -0.99609,0 0,-5.55963 -3.47646,0 1.36523,1.36524 -0.70312,0.70312 -2.30274,-2.30273 0,-0.52734 2.30274,-2.30274 0.70312,0.70313 -1.36523,1.36523 4.47255,0"
id="path2994"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccccccccc" />
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.5 KiB

10
web/index.html
Unescape Escape View File

@ -1,8 +1,8 @@
<!DOCTYPE HTML><html><head>
<meta charset="UTF-8"></meta>
<meta content="yes" name="apple-mobile-web-app-capable"></meta>
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport"></meta>
<meta charset="UTF-8">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
<title>Piet Zwart Institute: Master Media Design &amp; Communication</title>
@ -70,7 +70,7 @@
</div>
</div>
<div id="logoWrap">
<img id="logo" src="img/black_PZI_logo_p.svg">
<img id="logo" src="./img/black_PZI_logo_p.svg">
</div>
</div>
@ -102,7 +102,7 @@
&lt;div class="item video flash"&gt;&lt;img src="img/project_roel2.png"&gt;&lt;/div&gt;
&lt;div class="item narrative"&gt;&lt;img src="img/project_andre.jpeg"&gt;&lt;/div-->
<div class="item" data-creator="Max Dovey" data-date="2015" data-title="User:Max Dovey/maxgradbio" id="Extra"><a class="work" href="2015-Max_Dovey.html"><img class="work" src="http://pzwiki.wdka.nl/mw-mediadesign/images/1/16/Pointer.gif"></a></div><div class="item" data-creator="Luther Blisset" data-date="2015" data-title="Qq" id="Extra"><a class="work" href="2015-Luther_Blisset.html"><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><div class="item" data-creator="Artyom" data-date="2015" data-title="Artyom-graduation-work" id="Extra"><a class="work" href="2015-Artyom.html"><img class="work" src="http://pzwiki.wdka.nl/mw-mediadesign/images/thumb/6/6a/Screen_Shot_2014-10-26_at_16.10.08.jpg/500px-Screen_Shot_2014-10-26_at_16.10.08.jpg"></a></div><div class="item" data-creator="Joseph Knierzinger" data-date="2015" data-title="User:Joak/graduation/catalog1" id="Extra"><a class="work" href="2015-Joseph_Knierzinger.html"><img class="work" src="http://pzwiki.wdka.nl/mw-mediadesign/images/1/16/Pointer.gif"></a></div><div class="item" data-creator="Ana Luísa Moura" data-date="2015" data-title="The Aesthetics of Ethics" id="Extra"><a class="work" href="2015-Ana_Lusa_Moura.html"><img class="work" src="http://pzwiki.wdka.nl/mw-mediadesign/images/b/bd/Collage_007_thumbnail.jpg"></a></div><div class="item" data-creator="Lucia Dossin" data-date="2015" data-title="Mina" id="Extra"><a class="work" href="2015-Lucia_Dossin.html"><img class="work" src="http://pzwiki.wdka.nl/mw-mediadesign/images/5/59/3legs.jpg"></a></div><div class="item" data-creator="Henk-Jelle de Groot" data-date="2015" data-title="U ntitled" id="Extra"><a class="work" href="2015-Henk-Jelle_de_Groot.html"><img class="work" src="http://pzwiki.wdka.nl/mw-mediadesign/images/e/e7/9m4MBqRM1w-6.png"></a></div></div>
<div class="item" data-creator="Max Dovey" data-date="2015" data-title="User:Max Dovey/maxgradbio" id="Extra"><a class="work" href="2015-Max_Dovey.html"><img class="work" src="http://pzwiki.wdka.nl/mw-mediadesign/images/1/16/Pointer.gif"></a></div><div class="item" data-creator="Luther Blisset" data-date="2015" data-title="Qq" id="Extra"><a class="work" href="2015-Luther_Blisset.html"><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><div class="item" data-creator="Artyom" data-date="2015" data-title="Artyom-graduation-work" id="Extra"><a class="work" href="2015-Artyom.html"><img class="work" src="http://pzwiki.wdka.nl/mw-mediadesign/images/thumb/6/6a/Screen_Shot_2014-10-26_at_16.10.08.jpg/500px-Screen_Shot_2014-10-26_at_16.10.08.jpg"></a></div><div class="item" data-creator="Lucia Dossin" data-date="2015" data-title="Mina" id="Extra"><a class="work" href="2015-Lucia_Dossin.html"><img class="work" src="http://pzwiki.wdka.nl/mw-mediadesign/images/5/59/3legs.jpg"></a></div><div class="item" data-creator="Henk-Jelle de Groot" data-date="2015" data-title="U ntitled" id="Extra"><a class="work" href="2015-Henk-Jelle_de_Groot.html"><img class="work" src="http://pzwiki.wdka.nl/mw-mediadesign/images/e/e7/9m4MBqRM1w-6.png"></a></div></div>
</div>
<div class="sidebarBorderLeft zwartArea" id="section03">

14
web/page-template.html
Unescape Escape View File

@ -22,13 +22,13 @@
<div id="sideBarDescInner">
<!-- we used h2's and p's instead of divs here, moved {date} and deleted {thumbnail} -->
<!-- we used h2's and p's instead of divs here, moved date and deleted thumbnail -->
<h2 id="creator">{creator}</h2>
<p id="title">{title} {date}</p>
<!-- moved up {description} -->
<!-- moved up description -->
<div id="description">{description}</div>
@ -48,7 +48,7 @@
<div class="zwartArea zwartAreaWhite sidebarBorderLeft" id="section02">
<div class="fixedsticky" id="filter" style="top:0;">
<div class="themes" id="sortArea">
<a href="index.html" class="hoverBackB"><img src="./img/arrowBack.svg"></a><p>{title}</p><a class="closeSidebar"><img src="./img/arrowUpW.svg"/></a>
<a href="index.html" class="hoverBackB"><img src="./img/arrowBack.svg"></a> <p>{title}</p><a class="closeSidebar"><img src="./img/arrowUpW.svg"/></a>
</div>
</div>
@ -64,10 +64,10 @@
</div>
</div>
<script src='./js/jquery-2.1.3.min.js'></script>
<script src='./js/fixedfixed.js'></script>
<script src='./js/fixedsticky.js'></script>
<script src='./js/mainScripts_single.js'></script>
<script src='./js/jquery-2.1.3.min.js'> </script>
<script src='./js/fixedfixed.js'> </script>
<script src='./js/fixedsticky.js'> </script>
<script src='./js/mainScripts_single.js'> </script>
</body>
</html>

Write Preview
Loading…
Cancel
Save