master
onebigear 4 years ago
commit cda7de7ae7

@ -67,6 +67,14 @@ How all this is presented is really up to you and there are no
restrictions (Joca for instance is using a functional chat bot restrictions (Joca for instance is using a functional chat bot
interface). interface).
You can always use one of the pages made by Lídia for last year's You can always use the template for student projects Lídia
projects as a starting point if you like. made as a starting point if you like. You can find this file
(student-template.html) under the templates folder. Note,
however, that both project description **AND** bio need to be
maximum 600 characters, and you need a minimum of 4 images
for each of the different sections (*Work*, *Publication* and *Graduation Show*).
!important (both for front page and individual pages):
Use class="int" on <a>s for internal links and class="ext" on
<a>s for external links. Add target='_blank' on links with
class='ext' to open link in a new tab

@ -14,15 +14,13 @@
<div id='wrapper'></div> <div id='wrapper'></div>
<a href='../' id='homebttn' class='ext'> << home</a> <a href='../' id='homebttn' class='ext'> << home</a>
<header> <header>
<h1 id='project-title'>Alt Reality Lexicon <a href='#hleft-text' class='show'></a><br><a href='../' class='show' id='home'><< </a></h1> <h1 id='project-title'>Alt Reality Lexicon <a href='#hleft-text' class='show'></a></h1>
<div id='sub'>
<h2 id='student-name'>Pleun Gremmen</h2> <h2 id='student-name'>Pleun Gremmen</h2>
</div>
<div id='hleft-text'> <div id='hleft-text'>
<a href=# id='back'> <a href=# id='back'>
<div id='inner-hleft-text'> <div id='inner-hleft-text'>
<div id='ihtp'> <div id='ihtp'>
<object>
<div id='about-project'> <div id='about-project'>
<p>The Alt Reality Lexicon (2018) is a lexicon of neologisms that helps the demystification and clarification of the language used by two prominent far-right online subcultures: the Alt-Right and the Manosphere by translating jargon to common language. In order to keep conversing about our differences the editors of the lexicon build a door in the walls of the echo chamber to open it up to a broader audience.</p> <p>The Alt Reality Lexicon (2018) is a lexicon of neologisms that helps the demystification and clarification of the language used by two prominent far-right online subcultures: the Alt-Right and the Manosphere by translating jargon to common language. In order to keep conversing about our differences the editors of the lexicon build a door in the walls of the echo chamber to open it up to a broader audience.</p>
</div> </div>
@ -30,7 +28,8 @@
<div id='about-student'> <div id='about-student'>
<p>Pleun is a visual artist and graphic designer aiming to research ways to create and share new narratives about current affairs and interests while pushing the boundaries of her practice.</p> <p>Pleun is a visual artist and graphic designer aiming to research ways to create and share new narratives about current affairs and interests while pushing the boundaries of her practice.</p>
</div> </div>
<span id='getback'> go back </span> <a id='getback' class='int'> go back </a>
</object>
</div> </div>
</div> </div>
</a> </a>

@ -14,15 +14,14 @@
<div id='wrapper'></div> <div id='wrapper'></div>
<a href='../' id='homebttn' class='ext'> << home</a> <a href='../' id='homebttn' class='ext'> << home</a>
<header> <header>
<h1 id='project-title'>Anomolous Faces <a href='#hleft-text' class='show'></a><br><a href='../' class='show' id='home'><< </a></h1> <h1 id='project-title'>Anomolous Faces <a href='#hleft-text' class='show'></a></h1>
<div id='sub'>
<h2 id='student-name'>Max Franklin</h2> <h2 id='student-name'>Max Franklin</h2>
</div>
<div id='hleft-text'> <div id='hleft-text'>
<a href=# id='back'> <a href=# id='back'>
<div id='inner-hleft-text'> <div id='inner-hleft-text'>
<div id='ihtp'> <div id='ihtp'>
<object>
<div id='about-project'> <div id='about-project'>
<p>Improvisation poses questions upon the production and dissemination of artistic work in terms of its material value, and traditional attributions of mastery.<br> <p>Improvisation poses questions upon the production and dissemination of artistic work in terms of its material value, and traditional attributions of mastery.<br>
Karen Eliot is an improviser, musician, artist, and activist who works to resist standardised valuation of artistic practice. Her work cannot be characterised in distinct forms, but exists as a multitude of actions, challenging ownership, identity and representation.</p> Karen Eliot is an improviser, musician, artist, and activist who works to resist standardised valuation of artistic practice. Her work cannot be characterised in distinct forms, but exists as a multitude of actions, challenging ownership, identity and representation.</p>
@ -31,7 +30,8 @@
<div id='about-student'> <div id='about-student'>
<p>Max Franklin is a musician and digital artist currently based in Rotterdam. His work is concerned with the fragile nature of improvisation in music, with software. He has worked within this position since completing his studies in Music, moving between a wide range of acts involving music, technology, design, arts and education.</p> <p>Max Franklin is a musician and digital artist currently based in Rotterdam. His work is concerned with the fragile nature of improvisation in music, with software. He has worked within this position since completing his studies in Music, moving between a wide range of acts involving music, technology, design, arts and education.</p>
</div> </div>
<span id='getback'> go back </span> <a id='getback' class='int'> go back </a>
</object>
</div> </div>
</div> </div>
</a> </a>

@ -14,16 +14,13 @@
<div id='wrapper'></div> <div id='wrapper'></div>
<a href='../' id='homebttn' class='ext'> << home</a> <a href='../' id='homebttn' class='ext'> << home</a>
<header> <header>
<h1 id='project-title'>Back It Up <a href='#hleft-text' class='show'></a><br><a href='../' class='show' id='home'><< </a></h1> <h1 id='project-title'>Back It Up <a href='#hleft-text' class='show'></a></h1>
<div id='sub'>
<h2 id='student-name'><a href='http://www.karinadukalska.com' target='_blank' class='ext' id='student-page'>Karina Dukalska</a></h2> <h2 id='student-name'><a href='http://www.karinadukalska.com' target='_blank' class='ext' id='student-page'>Karina Dukalska</a></h2>
</div>
<div id='hleft-text'> <div id='hleft-text'>
<a href=# id='back'> <a href=# id='back'>
<div id='inner-hleft-text'> <div id='inner-hleft-text'>
<div id='ihtp'> <div id='ihtp'>
<object>
<div id='about-project'> <div id='about-project'>
<p>The intangibility of social dances create a disruptive beauty of pure fulfilment in the moment, a true sense of flow, as well as a yearning for the fleeting memory that may be lost forever. Back It Up (2018) is an interactive performance of two swing dancers whose steps are controlled by the audience. It is accompanied by graphical notation systems, traces of the non-verbal dialogue between dancers and the atmosphere in the room recorded by the audience. The difference in perception of the experience is what makes every recording unique.</p> <p>The intangibility of social dances create a disruptive beauty of pure fulfilment in the moment, a true sense of flow, as well as a yearning for the fleeting memory that may be lost forever. Back It Up (2018) is an interactive performance of two swing dancers whose steps are controlled by the audience. It is accompanied by graphical notation systems, traces of the non-verbal dialogue between dancers and the atmosphere in the room recorded by the audience. The difference in perception of the experience is what makes every recording unique.</p>
</div> </div>
@ -31,7 +28,8 @@
<div id='about-student'> <div id='about-student'>
<p>Karina Dukalska is a graphic designer challenging the physicality of books by enforcing physical interaction. Engaging with the content through materials, tangibility and actions deepens the experience of consuming the content itself.</p> <p>Karina Dukalska is a graphic designer challenging the physicality of books by enforcing physical interaction. Engaging with the content through materials, tangibility and actions deepens the experience of consuming the content itself.</p>
</div> </div>
<span id='getback'> go back </span> <a id='getback' class='int'> go back </a>
</object>
</div> </div>
</div> </div>
</a> </a>

@ -0,0 +1,932 @@
@font-face {
font-family: inconsolata;
src: url(fonts/inconsolata.ttf);
}
@font-face {
font-family: inconsolatabold;
src: url(fonts/inconsolatabold.ttf);
}
@font-face {
font-family: tenor;
src: url(fonts/tenor.ttf);
}
* {
box-sizing: border-box;
}
html{
font-size: calc(0.85em + 1vw);
}
body{
font-family:inconsolata, sans-serif;
color:white;
min-width:320px;
}
#wrapper {
position:fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
background-color: #2f2f2f;
}
/*header*/
header{
position:relative;
width:100%;
padding-bottom:5%;
display:block;
overflow:hidden;
margin-left:1.3%;
line-height:1.3vw;
}
header h1{
font-family:tenor;
font-size:9vw;
float:left;
width:60%;
margin-bottom:5%;
}
.show{
font-size:0.9em;
color:#0f0;
text-decoration:none;
}
.show:hover{
color:magenta;
}
#sub{
white-space:nowrap;
font-family:inconsolata;
float:right;
padding-top:3%;
padding-right:3%;
width:40%;
}
#sub > a {
display:inline-block;
width:45%;
text-align:right;
font-size:0.8em;
}
#sub > a:visited {
color:white;
}
#hleft-text{
display:none;
margin-top:0;
background:rgba(0,0,0,0.5);
width:100%;
height:100%;
left:0;
top:0;
position:fixed;
color:white;
z-index:55;
cursor:pointer;
}
#inner-hleft-text{
background-color:black;
width:90vw;
height:95vh;
position:fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform:translate(-50%, -50%);
transform: translate(-50%, -50%);
overflow-y:auto;
}
#ihtp{
width:80%;
height:95%;
position:fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform:translate(-50%, -50%);
transform: translate(-50%, -50%);
font-size:0.8em;
line-height:130%;
}
#hleft-text:target{
display:block;
}
#getback{
text-decoration:underline;
text-decoration-color:#0f0;
z-index:100;
}
#getback:hover{
text-decoration: overline;
text-decoration-color:magenta;
}
#back, #back:hover, #back:visited{
text-decoration:none;
color:white;
}
/*xpuf*/
[id*="att"]{
background:rgba(0,0,0,0.7);
overflow:hidden;
height:100%;
width:100%;
top:0;
left:0;
margin:0 auto;
position:fixed;
z-index:10;
display:none;
}
.wrap{
background:rgba(0,0,0,0.3);
position:fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform:translate(-50%, -50%);
transform: translate(-50%, -50%);
overflow-y:hidden;
height:80%;
width:90%;
display:flex;
flex-direction:column;
}
.upbar {
height:5%;
width:100%;
background-color:#0f0;
position:relative;
}
.upbar a {
display:block;
height:100%;
}
.upbar p {
position:absolute;
width:97%;
margin:0 auto;
position: absolute;
top: 50%;
left:50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform:translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.uptitle {
color:white;
float:left;
font-size:3vh;
}
.upclose {
color:white;
float:right;
text-decoration:none;
font-size:3vh;
}
.upclose:hover {
color:magenta;
}
.twowrap {
height:95%;
overflow-y:auto;
overflow-x:hidden;
}
[id*="att"] img{
width:100%;
padding:1% 3%;
}
[id*="att"]:target{
display: block;
}
.twowrap-trailer{
overflow-x:hidden;
overflow-y: auto;
height:91%;
}
.iframe-container {
overflow:hidden;
padding-top: 56%;
position: relative;
}
.iframe-container iframe {
border: 0;
height: 100%;
left: 0;
position: absolute;
top:0;
width: 100%;
}
.video-container{
overflow:hidden;
padding-top: 0%;
position: relative;
}
[id*="att-video"] > .wrap{
background:rgba(0,0,0,0);
}
/*main*/
section#main{
position:relative;
margin-left:0;
left:0;
width:100%;
padding-left:1%;
display: flex;
flex-direction: column;
}
.logo{
display:none;
}
[class*="col"]{
float:left;
width:21.75%;
height:100%;
display: flex;
flex-direction: column;
padding-right:2%;
}
[class*="col"] p, img, h2{
padding-right:7%;
}
[class*="col"] p{
font-size:0.65em;
line-height:1.5em;
}
.col1 {
width:13%;
display:initial;
}
.col6 {
width:65.25%;
padding-right:0;
}
[class*="subcl"]{
width:33%;
float:left;
}
.col2 p,.col1 p {
word-wrap:break-word;
}
p.subcl3{
padding-right:1%;
}
.row{
padding-bottom:2.2vh;
padding-top:2.2vh;
border-bottom-style:solid;
border-bottom-color:white;
border-bottom-width:3px;
}
#categories{
font-family:inconsolata, serif;
margin:0 auto;
width:100%;
border-bottom-style:double;
border-bottom-width:4px;
}
#categories.row {
padding-top:0.7%;
padding-bottom:0.5%;
-webkit-padding-after:0.5%;
}
#categories h2{
font-size:0.7em;
}
a{
color:white;
text-decoration-color:plum;
}
.ext:hover {
text-decoration: overline;
text-decoration-color:#f3ca1b;
}
.int:hover {
text-decoration: overline;
text-decoration-color:magenta;
}
.gradShow {
font-weight:bold;
}
.row::after {
content: "";
clear: both;
display: table;
}
/* --------- 2nd case --------- */
@media all and (min-width: 600px) and (max-width: 720px){
/*header*/
#ihtp{
/*font-size:calc(9px + 1.7vh);*/
line-height:130%;
}
#sub > a {
width:47%;
}
/*xpuf*/
.wrap {
height:85%;
}
/*main*/
[class*="col"]{
width:20.75%;
}
.col1 {
width:17%;
}
.col6 {
width:62.25%;
}
/*[class*="col"] p{
font-size:calc(10px + 0.6vw);
}*/
.row{
border-bottom-width:4px;
}
#categories{
border-bottom-width:4px;
}
/*#categories h2{
font-size:2.5vw;
}*/
}
/* --------- 3rd case --------- */
@media all and (min-width: 720px) and (max-width: 992px){
/*header*/
#ihtp{
font-size:calc(11px + 1.7vh);
line-height:130%;
}
#sub > a {
width:47%;
/*font-size:2.1vw;*/
}
/*xpuf*/
/*main*/
[class*="col"]{
width:20.75%;
}
.col1 {
width:17%;
}
.col6 {
width:62.25%;
}
/*[class*="col"] p{
font-size:calc(11px + 0.6vw);
}*/
.row{
border-bottom-width:5px;
}
p.subcl3{
padding-right:5%;
}
#categories{
border-bottom-width:5px;
}
#categories.row {
width:100%;
}
/*#categories h2{
font-size:2.1vw;
}*/
}
/* --------- 4th case --------- */
@media all and (min-width: 992px) and (max-width: 1400px) {
/*header*/
header{
width:25%;
position:fixed;
left:0;
top:2%;
bottom:0;
padding-bottom:0;
float:left;
margin-left:2%;
display:flex;
flex-direction: column;
}
header h1{
font-size:2.3em;
width:77%;
padding-bottom:3%;
-webkit-padding-after:7%;
float:none;
}
#page-title {
margin-bottom:13%;
}
.show{
display:none;
}
#sub{
padding-top:0;
float:none;
width:100%;
}
#sub > a {
font-size:0.7em;
width: 35%;
text-align:left;
}
#hleft-text{
position:relative;
display:block;
background:none;
padding-top:5%;
width:100%;
overflow-y:auto;
overflow-x:hidden;
padding-right:30%;
box-sizing:initial;
cursor:default;
}
#inner-hleft-text{
width:100%;
height:inherit;
position:relative;
top:0;
left:0;
transform:none;
-webkit-transform:none;
-ms-transform:none;
overflow-y:hidden;
background-color:initial;
}
#ihtp{
width:80%;
position:relative;
top:0;
left:0;
-webkit-transform:none;
-ms-transform:none;
transform:none;
font-size:1em;
line-height:120%;
}
#getback{
display:none;
}
#back, #back:hover, #back:visited{
background-color:none;
cursor:default;
color:white;
font-size:0.55em;
}
/*xpuf*/
.wrap{
width:60%;
height:82%;
}
.uptitle {
font-size:2.5vh;
}
.upclose {
font-size:2.5vh;
}
/*main*/
section#main{
position:fixed;
top:0;
bottom:0;
overflow:hidden;
left:25%;
width:75%;
padding-left:1%;
}
#content{
padding-top:1%;
overflow-y:auto;
overflow-x:hidden;
}
.logo{
display:block;
width:70%;
}
[class*="col"]{
width:20.75%;
}
.col1 {
width:17%;
}
.col6 {
width:62.25%;
}
[class*="col"] p {
font-size:0.55em;
}
.subrow p{
padding-right:7%;
}
p.subcl3{
padding-right:5%;
}
.row{
border-bottom-width:5px;
}
#categories{
margin-left:0;
border-bottom-width:5px;
width:98%;
}
/*#categories h2{
font-size:1.5em;
}*/
}
/* --------- 5th case --------- */
@media all and (min-width: 1400px){
/*header*/
header{
width:25%;
position:fixed;
left:0;
top:2%;
bottom:0;
padding-bottom:0;
float:left;
margin-left:2%;
display:flex;
flex-direction: column;
}
header h1{
/*font-size:4vw;*/
width:77%;
float:none;
}
#page-title {
margin-bottom:13%;
}
.show{
display:none;
}
#sub{
padding-top:0;
float:none;
width:100%;
}
#sub > a {
/*font-size:1.2em;*/
width: 35%;
text-align:left;
}
#hleft-text{
position:relative;
display:block;
background:none;
margin-top:9%;
width:100%;
overflow-y:auto;
overflow-x:hidden;
padding-right:30%;
box-sizing:initial;
cursor:default;
}
#inner-hleft-text{
width:100%;
height:inherit;
position:relative;
top:0;
left:0;
transform:none;
-webkit-transform:none;
-ms-transform:none;
overflow-y:hidden;
background-color:initial;
}
#ihtp{
width:70%;
position:relative;
top:0;
left:0;
-webkit-transform:none;
-ms-transform:none;
transform:none;
/*font-size:calc(9px + 0.5vw);*/
line-height:125%;
}
#getback{
display:none;
}
#back, #back:hover, #back:visited{
background-color:none;
cursor:default;
}
/*xpuf*/
.wrap{
height:70%;
width:53%;
}
.uptitle {
font-size:2vh;
}
.upclose {
font-size:2vh;
}
/*main*/
section#main{
position:fixed;
top:0;
bottom:0;
overflow:hidden;
left:25%;
width:75%;
padding-left:1%;
}
#content{
padding-top:1%;
overflow-y:auto;
overflow-x:hidden;
}
.logo{
display:block;
width:70%;
}
[class*="col"]{
width:20.75%;
}
.col1 {
width:17%;
}
.col6 {
width:62.25%;
}
/*[class*="col"] p {
font-size:calc(8px + 0.6vw);
}*/
.subrow p{
padding-right:7%;
}
p.subcl3{
padding-right:5%;
}
.row{
border-bottom-width:5px;
}
#categories{
border-bottom-width:7px;
width:99%;
margin-left:0;
}
/*
#categories h2{
font-size:calc(12px + 0.6vw);
}
*/
}
/* --------- 6th case --------- */
@media all and (max-height: 450px) {
[id*="att-video"] > .wrap{
width:400px;
}
.upbar{
height:7%;
}
}
/* hiding years */
div#year2020 { display:none; }

@ -0,0 +1,926 @@
@font-face {
font-family: inconsolata;
src: url(fonts/inconsolata.ttf);
}
@font-face {
font-family: inconsolatabold;
src: url(fonts/inconsolatabold.ttf);
}
@font-face {
font-family: tenor;
src: url(fonts/tenor.ttf);
}
* {
box-sizing: border-box;
}
body{
font-family:inconsolata, sans-serif;
color:white;
min-width:320px;
}
#wrapper {
position:fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
background-color: #2f2f2f;
}
/*header*/
header{
position:relative;
width:100%;
padding-bottom:5%;
display:block;
overflow:hidden;
margin-left:1.3%;
line-height:1.3vw;
}
header h1{
font-family:tenor;
font-size:9vw;
float:left;
width:60%;
margin-bottom:5%;
}
.show{
font-size:7vw;
color:#0f0;
text-decoration:none;
}
.show:hover{
color:magenta;
}
#sub{
white-space:nowrap;
font-family:inconsolata;
float:right;
padding-top:3%;
padding-right:3%;
width:40%;
}
#sub > a {
display:inline-block;
width:45%;
text-align:right;
font-size:calc(9px + 0.9vw);
}
#sub > a:visited {
color:white;
}
#hleft-text{
display:none;
margin-top:0;
background:rgba(0,0,0,0.5);
width:100%;
height:100%;
left:0;
top:0;
position:fixed;
color:white;
z-index:55;
cursor:pointer;
overflow:hidden;
}
#inner-hleft-text{
background-color:black;
width:90vw;
height:95vh;
position:fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform:translate(-50%, -50%);
transform: translate(-50%, -50%);
overflow-y:auto;
}
#ihtp{
width:80%;
height:95%;
position:fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform:translate(-50%, -50%);
transform: translate(-50%, -50%);
font-size:calc(8px + 1.5vh);
line-height:130%;
}
#hleft-text:target{
display:block;
}
#getback{
text-decoration:underline;
text-decoration-color:#0f0;
z-index:100;
}
#getback:hover{
text-decoration: overline;
text-decoration-color:magenta;
}
#back, #back:hover, #back:visited{
text-decoration:none;
color:white;
}
/*xpuf*/
[id*="att"]{
background:rgba(0,0,0,0.7);
overflow:hidden;
height:100%;
width:100%;
top:0;
left:0;
margin:0 auto;
position:fixed;
z-index:10;
display:none;
}
.wrap{
background:rgba(0,0,0,0.3);
position:fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform:translate(-50%, -50%);
transform: translate(-50%, -50%);
overflow-y:hidden;
height:80%;
width:90%;
display:flex;
flex-direction:column;
}
.upbar {
height:5%;
width:100%;
background-color:#0f0;
position:relative;
}
.upbar a {
display:block;
height:100%;
}
.upbar p {
position:absolute;
width:97%;
margin:0 auto;
position: absolute;
top: 50%;
left:50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform:translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.uptitle {
color:black;
float:left;
font-size:3vh;
}
.upclose {
color:black;
float:right;
text-decoration:none;
font-size:3vh;
}
.upclose:hover {
color:magenta;
}
.twowrap {
height:95%;
overflow-y:auto;
overflow-x:hidden;
}
[id*="att"] img{
width:100%;
padding:1% 3%;
}
[id*="att"]:target{
display: block;
}
.twowrap-trailer{
overflow-x:hidden;
overflow-y: auto;
height:91%;
}
.iframe-container {
overflow:hidden;
padding-top: 56%;
position: relative;
}
.iframe-container iframe {
border: 0;
height: 100%;
left: 0;
position: absolute;
top:0;
width: 100%;
}
.video-container{
overflow:hidden;
padding-top: 0%;
position: relative;
}
[id*="att-video"] > .wrap{
background:rgba(0,0,0,0);
}
/*main*/
section#main{
position:relative;
margin-left:0;
left:0;
width:100%;
padding-left:1%;
display: flex;
flex-direction: column;
}
.logo{
display:none;
}
[class*="col"]{
float:left;
width:21.75%;
height:100%;
display: flex;
flex-direction: column;
padding-right:2%;
}
[class*="col"] p, img, h2{
padding-right:7%;
}
[class*="col"] p{
font-size:calc(9px + 0.6vw);
line-height:130%;
}
.col1 {
width:13%;
display:initial;
}
.col6 {
width:65.25%;
padding-right:0;
}
[class*="subcl"]{
width:33%;
float:left;
}
.col2 p,.col1 p {
word-wrap:break-word;
}
p.subcl3{
padding-right:1%;
}
.row{
padding-bottom:2.2vh;
padding-top:2.2vh;
border-bottom-style:solid;
border-bottom-color:white;
border-bottom-width:3px;
}
#categories{
font-family:inconsolata, serif;
margin:0 auto;
width:100%;
border-bottom-style:double;
border-bottom-width:4px;
}
#categories.row {
padding-top:0.7%;
padding-bottom:0.5%;
-webkit-padding-after:0.5%;
}
#categories h2{
font-size:2.7vw;
}
a{
color:white;
text-decoration-color:#0f0;
}
.ext:hover {
text-decoration: overline;
text-decoration-color:#f3ca1b;
}
.int:hover {
text-decoration: overline;
text-decoration-color:magenta;
}
.gradShow {
font-weight:bold;
}
.row::after {
content: "";
clear: both;
display: table;
}
/* --------- 2nd case --------- */
@media all and (min-width: 600px) and (max-width: 720px){
/*header*/
#ihtp{
font-size:calc(9px + 1.7vh);
line-height:130%;
}
#sub > a {
width:47%;
}
/*xpuf*/
.wrap {
height:85%;
}
/*main*/
[class*="col"]{
width:20.75%;
}
.col1 {
width:17%;
}
.col6 {
width:62.25%;
}
[class*="col"] p{
font-size:calc(10px + 0.6vw);
}
.row{
border-bottom-width:4px;
}
#categories{
border-bottom-width:4px;
}
#categories h2{
font-size:2.5vw;
}
}
/* --------- 3rd case --------- */
@media all and (min-width: 720px) and (max-width: 992px){
/*header*/
#ihtp{
font-size:calc(11px + 1.7vh);
line-height:130%;
}
#sub > a {
width:47%;
font-size:2.1vw;
}
/*xpuf*/
/*main*/
[class*="col"]{
width:20.75%;
}
.col1 {
width:17%;
}
.col6 {
width:62.25%;
}
[class*="col"] p{
font-size:calc(11px + 0.6vw);
}
.row{
border-bottom-width:5px;
}
p.subcl3{
padding-right:5%;
}
#categories{
border-bottom-width:5px;
}
#categories.row {
width:100%;
}
#categories h2{
font-size:2.1vw;
}
}
/* --------- 4th case --------- */
@media all and (min-width: 992px) and (max-width: 1400px) {
/*header*/
header{
width:25%;
position:fixed;
left:0;
top:2%;
bottom:0;
padding-bottom:0;
float:left;
margin-left:2%;
display:flex;
flex-direction: column;
}
header h1{
font-size:7vw;
width:77%;
padding-bottom:3%;
-webkit-padding-after:7%;
float:none;
}
#page-title {
margin-bottom:13%;
}
.show{
display:none;
}
#sub{
padding-top:0;
float:none;
width:100%;
}
#sub > a {
font-size:calc(10px + 0.6vw);
width: 35%;
text-align:left;
}
#hleft-text{
position:relative;
display:block;
background:none;
padding-top:5%;
width:100%;
overflow-y:auto;
overflow-x:hidden;
padding-right:30%;
box-sizing:initial;
cursor:default;
}
#inner-hleft-text{
width:100%;
height:inherit;
position:relative;
top:0;
left:0;
transform:none;
-webkit-transform:none;
-ms-transform:none;
overflow-y:hidden;
background-color:initial;
}
#ihtp{
width:80%;
position:relative;
top:0;
left:0;
-webkit-transform:none;
-ms-transform:none;
transform:none;
font-size:calc(8px + 0.6vw);
line-height:120%;
}
#getback{
display:none;
}
#back, #back:hover, #back:visited{
background-color:none;
cursor:default;
}
/*xpuf*/
.wrap{
width:60%;
height:82%;
}
.uptitle {
font-size:2.5vh;
}
.upclose {
font-size:2.5vh;
}
/*main*/
section#main{
position:fixed;
top:0;
bottom:0;
overflow:hidden;
left:25%;
width:75%;
padding-left:1%;
}
#content{
padding-top:1%;
overflow-y:auto;
overflow-x:hidden;
}
.logo{
display:block;
width:70%;
}
[class*="col"]{
width:20.75%;
}
.col1 {
width:17%;
}
.col6 {
width:62.25%;
}
[class*="col"] p {
font-size:calc(10px + 0.6vw);
}
.subrow p{
padding-right:7%;
}
p.subcl3{
padding-right:5%;
}
.row{
border-bottom-width:5px;
}
#categories{
margin-left:0;
border-bottom-width:5px;
width:98%;
}
#categories h2{
font-size:calc(11px + 0.6vw);
}
}
/* --------- 5th case --------- */
@media all and (min-width: 1400px){
/*header*/
header{
width:25%;
position:fixed;
left:0;
top:2%;
bottom:0;
padding-bottom:0;
float:left;
margin-left:2%;
display:flex;
flex-direction: column;
}
header h1{
font-size:6vw;
width:77%;
float:none;
}
#page-title {
margin-bottom:13%;
}
.show{
display:none;
}
#sub{
padding-top:0;
float:none;
width:100%;
}
#sub > a {
font-size:1.2em;
width: 35%;
text-align:left;
}
#hleft-text{
position:relative;
display:block;
background:none;
margin-top:9%;
width:100%;
overflow-y:auto;
overflow-x:hidden;
padding-right:30%;
box-sizing:initial;
cursor:default;
}
#inner-hleft-text{
width:100%;
height:inherit;
position:relative;
top:0;
left:0;
transform:none;
-webkit-transform:none;
-ms-transform:none;
overflow-y:hidden;
background-color:initial;
}
#ihtp{
width:70%;
position:relative;
top:0;
left:0;
-webkit-transform:none;
-ms-transform:none;
transform:none;
font-size:calc(9px + 0.5vw);
line-height:125%;
}
#getback{
display:none;
}
#back, #back:hover, #back:visited{
background-color:none;
cursor:default;
}
/*xpuf*/
.wrap{
height:70%;
width:53%;
}
.uptitle {
font-size:2vh;
}
.upclose {
font-size:2vh;
}
/*main*/
section#main{
position:fixed;
top:0;
bottom:0;
overflow:hidden;
left:25%;
width:75%;
padding-left:1%;
}
#content{
padding-top:1%;
overflow-y:auto;
overflow-x:hidden;
}
.logo{
display:block;
width:70%;
}
[class*="col"]{
width:20.75%;
}
.col1 {
width:17%;
}
.col6 {
width:62.25%;
}
[class*="col"] p {
font-size:calc(8px + 0.6vw);
}
.subrow p{
padding-right:7%;
}
p.subcl3{
padding-right:5%;
}
.row{
border-bottom-width:5px;
}
#categories{
border-bottom-width:7px;
width:99%;
margin-left:0;
}
#categories h2{
font-size:calc(12px + 0.6vw);
}
}
/* --------- 6th case --------- */
@media all and (max-height: 450px) {
[id*="att-video"] > .wrap{
width:400px;
}
.upbar{
height:7%;
}
}
/* hiding years */
div#year2020 { display:none; }

@ -0,0 +1,948 @@
@font-face {
font-family: inconsolata;
src: url(fonts/inconsolata.ttf);
}
@font-face {
font-family: inconsolatabold;
src: url(fonts/inconsolatabold.ttf);
}
@font-face {
font-family: tenor;
src: url(fonts/tenor.ttf);
}
* {
box-sizing: border-box;
}
body{
font-family:inconsolata, sans-serif;
color:white;
min-width:320px;
}
#wrapper {
position:fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
background-color: #2f2f2f;
}
/*header*/
header{
position:relative;
width:100%;
padding-bottom:5%;
padding-left:1%;
display:block;
overflow:hidden;
margin-left:1.3%;
line-height:1.3vw;
background-color:#777;
}
header h1{
font-family:tenor;
font-size:9vw;
float:left;
width:60%;
margin-bottom:5%;
}
.show{
font-size:7vw;
color:#0f0;
text-decoration:none;
}
.show:hover{
color:magenta;
}
#sub{
white-space:nowrap;
font-family:inconsolata;
float:right;
padding-top:3%;
padding-right:3%;
width:40%;
}
#sub > a {
display:inline-block;
width:45%;
text-align:right;
font-size:calc(9px + 0.9vw);
}
#sub > a:visited {
color:white;
}
#hleft-text{
display:none;
margin-top:0;
background:rgba(0,0,0,0.5);
width:100%;
height:100%;
left:0;
top:0;
position:fixed;
color:white;
z-index:55;
cursor:pointer;
overflow:hidden;
}
#inner-hleft-text{
background-color:black;
width:90vw;
height:95vh;
position:fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform:translate(-50%, -50%);
transform: translate(-50%, -50%);
overflow-y:auto;
}
#ihtp{
width:80%;
height:95%;
position:fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform:translate(-50%, -50%);
transform: translate(-50%, -50%);
font-size:calc(8px + 1.5vh);
line-height:130%;
}
#hleft-text:target{
display:block;
}
#getback{
text-decoration:underline;
text-decoration-color:#0f0;
z-index:100;
}
#getback:hover{
text-decoration: overline;
text-decoration-color:magenta;
}
#back, #back:hover, #back:visited{
text-decoration:none;
color:white;
}
/*xpuf*/
[id*="att"]{
background:rgba(0,0,0,0.7);
overflow:hidden;
height:100%;
width:100%;
top:0;
left:0;
margin:0 auto;
position:fixed;
z-index:10;
display:none;
}
.wrap{
background:rgba(0,0,0,0.3);
position:fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform:translate(-50%, -50%);
transform: translate(-50%, -50%);
overflow-y:hidden;
height:80%;
width:90%;
display:flex;
flex-direction:column;
}
.upbar {
height:5%;
width:100%;
background-color:#0f0;
position:relative;
}
.upbar a {
display:block;
height:100%;
}
.upbar p {
position:absolute;
width:97%;
margin:0 auto;
position: absolute;
top: 50%;
left:50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform:translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.uptitle {
color:black;
float:left;
font-size:3vh;
}
.upclose {
color:black;
float:right;
text-decoration:none;
font-size:3vh;
}
.upclose:hover {
color:magenta;
}
.twowrap {
height:95%;
overflow-y:auto;
overflow-x:hidden;
}
[id*="att"] img{
width:100%;
padding:1% 3%;
}
[id*="att"]:target{
display: block;
}
.twowrap-trailer{
overflow-x:hidden;
overflow-y: auto;
height:91%;
}
.iframe-container {
overflow:hidden;
padding-top: 56%;
position: relative;
}
.iframe-container iframe {
border: 0;
height: 100%;
left: 0;
position: absolute;
top:0;
width: 100%;
}
.video-container{
overflow:hidden;
padding-top: 0%;
position: relative;
}
[id*="att-video"] > .wrap{
background:rgba(0,0,0,0);
}
/*main*/
section#main{
position:relative;
margin-left:0;
left:0;
width:100%;
padding-left:1%;
display: flex;
flex-direction: column;
}
#content{
background-color:#555;
padding-left:1%;
}
.logo{
display:none;
}
[class*="col"]{
float:left;
width:21.75%;
height:100%;
display: flex;
flex-direction: column;
padding-right:2%;
}
[class*="col"] p, img, h2{
padding-right:7%;
}
[class*="col"] p{
font-size:calc(9px + 0.6vw);
line-height:130%;
}
.col1 {
width:13%;
display:initial;
box-shadow: 5px 10px:
}
.col6 {
width:65.25%;
padding-right:0;
}
.col6 p, .col1 p, .subcl3 p{
color:pink;
}
[class*="subcl"]{
width:33%;
float:left;
}
.col2 p,.col1 p {
word-wrap:break-word;
}
p.subcl3{
padding-right:1%;
}
.row{
padding-bottom:2.2vh;
padding-top:2.2vh;
border-bottom-style:solid;
border-bottom-color:#2f2f2f;
border-bottom-width:3px;
}
#categories{
font-family:inconsolata, serif;
margin:0 auto;
width:100%;
border-bottom:none;
padding-left:1%;
/*border-bottom-width:4px;*/
}
#categories.row {
padding-top:0.7%;
padding-bottom:0.5%;
-webkit-padding-after:0.5%;
}
#categories h2{
font-size:2.7vw;
}
a{
color:white;
}
.ext{
text-decoration-color:#0f0;
}
.ext:hover {
text-decoration: none;
/*text-decoration-color:#f3ca1b;*/
background-image: linear-gradient(to top, #555 , #555, #0f0, #555, #555);
}
.int{
text-decoration-color:magenta;
}
.int:hover {
text-decoration: none;
background-image: linear-gradient(to top, #555 , magenta, #555);
}
.gradShow {
font-weight:bold;
}
.row::after {
content: "";
clear: both;
display: table;
}
/* --------- 2nd case --------- */
@media all and (min-width: 600px) and (max-width: 720px){
/*header*/
#ihtp{
font-size:calc(9px + 1.7vh);
line-height:130%;
}
#sub > a {
width:47%;
}
/*xpuf*/
.wrap {
height:85%;
}
/*main*/
[class*="col"]{
width:20.75%;
}
.col1 {
width:17%;
}
.col6 {
width:62.25%;
}
[class*="col"] p{
font-size:calc(10px + 0.6vw);
}
.row{
border-bottom-width:4px;
}
/*#categories{
border-bottom-width:4px;
}*/
#categories h2{
font-size:2.5vw;
}
}
/* --------- 3rd case --------- */
@media all and (min-width: 720px) and (max-width: 992px){
/*header*/
#ihtp{
font-size:calc(11px + 1.7vh);
line-height:130%;
}
#sub > a {
width:47%;
font-size:2.1vw;
}
/*xpuf*/
/*main*/
[class*="col"]{
width:20.75%;
}
.col1 {
width:17%;
}
.col6 {
width:62.25%;
}
[class*="col"] p{
font-size:calc(11px + 0.6vw);
}
.row{
border-bottom-width:5px;
}
p.subcl3{
padding-right:5%;
}
/*#categories{
border-bottom-width:5px;
}*/
#categories.row {
width:100%;
}
#categories h2{
font-size:2.1vw;
}
}
/* --------- 4th case --------- */
@media all and (min-width: 992px) and (max-width: 1400px) {
/*header*/
header{
width:25%;
position:fixed;
left:0;
top:2%;
bottom:0;
padding-bottom:0;
float:left;
margin-left:2%;
display:flex;
flex-direction: column;
}
header h1{
font-size:4vw;
width:77%;
padding-bottom:3%;
-webkit-padding-after:7%;
float:none;
}
#page-title {
margin-bottom:13%;
}
.show{
display:none;
}
#sub{
padding-top:0;
float:none;
width:100%;
}
#sub > a {
font-size:calc(10px + 0.6vw);
width: 35%;
text-align:left;
}
#hleft-text{
position:relative;
display:block;
background:none;
padding-top:5%;
width:100%;
overflow-y:auto;
overflow-x:hidden;
padding-right:30%;
box-sizing:initial;
cursor:default;
}
#inner-hleft-text{
width:100%;
height:inherit;
position:relative;
top:0;
left:0;
transform:none;
-webkit-transform:none;
-ms-transform:none;
overflow-y:hidden;
background-color:initial;
}
#ihtp{
width:80%;
position:relative;
top:0;
left:0;
-webkit-transform:none;
-ms-transform:none;
transform:none;
font-size:calc(8px + 0.6vw);
line-height:120%;
}
#getback{
display:none;
}
#back, #back:hover, #back:visited{
background-color:none;
cursor:default;
}
/*xpuf*/
.wrap{
width:60%;
height:82%;
}
.uptitle {
font-size:2.5vh;
}
.upclose {
font-size:2.5vh;
}
/*main*/
section#main{
position:fixed;
top:0;
bottom:0;
overflow:hidden;
left:25%;
width:75%;
padding-left:1%;
}
#content{
padding-top:1%;
overflow-y:auto;
overflow-x:hidden;
}
.logo{
display:block;
width:70%;
}
[class*="col"]{
width:20.75%;
}
.col1 {
width:17%;
}
.col6 {
width:62.25%;
}
[class*="col"] p {
font-size:calc(10px + 0.6vw);
}
.subrow p{
padding-right:7%;
}
p.subcl3{
padding-right:5%;
}
.row{
border-bottom-width:5px;
}
#categories{
margin-left:0;
/*border-bottom-width:5px;*/
width:98%;
}
#categories h2{
font-size:calc(11px + 0.6vw);
}
}
/* --------- 5th case --------- */
@media all and (min-width: 1400px){
/*header*/
header{
width:25%;
position:fixed;
left:0;
top:2%;
bottom:0;
padding-bottom:0;
float:left;
margin-left:2%;
display:flex;
flex-direction: column;
}
header h1{
font-size:3vw;
width:77%;
float:none;
}
#page-title {
margin-bottom:13%;
}
.show{
display:none;
}
#sub{
padding-top:0;
float:none;
width:100%;
}
#sub > a {
font-size:1.2em;
width: 35%;
text-align:left;
}
#hleft-text{
position:relative;
display:block;
background:none;
margin-top:9%;
width:100%;
overflow-y:auto;
overflow-x:hidden;
padding-right:30%;
box-sizing:initial;
cursor:default;
}
#inner-hleft-text{
width:100%;
height:inherit;
position:relative;
top:0;
left:0;
transform:none;
-webkit-transform:none;
-ms-transform:none;
overflow-y:hidden;
background-color:initial;
}
#ihtp{
width:70%;
position:relative;
top:0;
left:0;
-webkit-transform:none;
-ms-transform:none;
transform:none;
font-size:calc(9px + 0.5vw);
line-height:125%;
}
#getback{
display:none;
}
#back, #back:hover, #back:visited{
background-color:none;
cursor:default;
}
/*xpuf*/
.wrap{
height:70%;
width:53%;
}
.uptitle {
font-size:2vh;
}
.upclose {
font-size:2vh;
}
/*main*/
section#main{
position:fixed;
top:0;
bottom:0;
overflow:hidden;
left:25%;
width:75%;
padding-left:1%;
}
#content{
padding-top:1%;
overflow-y:auto;
overflow-x:hidden;
}
.logo{
display:block;
width:70%;
}
[class*="col"]{
width:20.75%;
}
.col1 {
width:17%;
}
.col6 {
width:62.25%;
}
[class*="col"] p {
font-size:calc(8px + 0.6vw);
}
.subrow p{
padding-right:7%;
}
p.subcl3{
padding-right:5%;
}
.row{
border-bottom-width:5px;
}
#categories{
/*border-bottom-width:7px;*/
width:99%;
margin-left:0;
}
#categories h2{
font-size:calc(12px + 0.6vw);
}
}
/* --------- 6th case --------- */
@media all and (max-height: 450px) {
[id*="att-video"] > .wrap{
width:400px;
}
.upbar{
height:7%;
}
}
/* hiding years */
div#year2020 { display:none; }

@ -17,9 +17,12 @@
box-sizing: border-box; box-sizing: border-box;
} }
html{
font-size: calc(0.85em + 1vw);
}
body{ body{
font-family:inconsolata, sans-serif; font-family:inconsolata, sans-serif;
color:white;
min-width:320px; min-width:320px;
} }
@ -32,7 +35,45 @@ body{
bottom: 0; bottom: 0;
right: 0; right: 0;
z-index: -1; z-index: -1;
background-color: #2f2f2f; background-color: white;
}
a{
color:black;
text-decoration:none;
background:transparent;
border-bottom:1.5px solid #99f;
padding-top:.05rem;
padding-bottom:.05rem;
background:linear-gradient(to bottom, #99f 0, #99f 100%);
background-position:0 100%;
background-repeat:repeat-x;
background-size: 0 0;
transition:background .2s ease-in-out;
}
.ext {
border-bottom-color: #99f;
background:linear-gradient(to bottom, #99f 0, #99f 100%);
background-position:0 100%;
background-repeat:repeat-x;
background-size: 0 0;
transition:background .2s ease-in-out;
}
.int {
border-bottom-color:#c6f;
background:linear-gradient(to bottom, #c6f 0, #c6f 100%);
background-position:0 100%;
background-repeat:repeat-x;
background-size: 0 0;
transition:background .2s ease-in-out;
}
a:hover, a:active, a:focus {
outline:0;
background-size:.5rem .3rem ;
} }
/*header*/ /*header*/
@ -44,12 +85,12 @@ header{
display:block; display:block;
overflow:hidden; overflow:hidden;
margin-left:1.3%; margin-left:1.3%;
line-height:1.3vw; line-height:1.5vh;
} }
header h1{ header h1{
font-family:tenor; font-family:tenor;
font-size:9vw; font-size:2em;
float:left; float:left;
width:60%; width:60%;
margin-bottom:5%; margin-bottom:5%;
@ -57,9 +98,10 @@ header h1{
} }
.show{ .show{
font-size:7vw; font-size:0.8em;
color:#0f0; color:#c6f;
text-decoration:none; border-bottom:none;
background:none;
} }
.show:hover{ .show:hover{
@ -77,15 +119,18 @@ header h1{
} }
#sub > a { #sub{
display:inline-block; display:inline-block;
width:45%;
text-align:right; text-align:right;
font-size:calc(9px + 0.9vw); font-size:0.7em;
}
#sub > span:first-child{
margin-right:20%;
} }
#sub > a:visited { #sub > a:visited {
color:white; color:black;
} }
@ -98,7 +143,7 @@ header h1{
left:0; left:0;
top:0; top:0;
position:fixed; position:fixed;
color:white; color:black;
z-index:55; z-index:55;
cursor:pointer; cursor:pointer;
overflow:hidden; overflow:hidden;
@ -128,12 +173,13 @@ header h1{
-webkit-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);
-ms-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%);
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
font-size:calc(8px + 1.5vh); font-size:0.8em;
line-height:130%; line-height:130%;
} }
#hleft-text:target{ #hleft-text:target{
display:block; display:block;
@ -141,20 +187,18 @@ header h1{
} }
#getback{ #getback{
text-decoration:underline;
text-decoration-color:#0f0;
z-index:100; z-index:100;
color:white;
} }
#getback:hover{
text-decoration: overline;
text-decoration-color:magenta;
}
#back, #back:hover, #back:visited{ #back, #back:hover, #back:visited{
text-decoration:none; text-decoration:none;
color:white; color:white;
display:block;
border-bottom:none;
background:none;
} }
@ -193,7 +237,7 @@ header h1{
.upbar { .upbar {
height:5%; height:5%;
width:100%; width:100%;
background-color:#0f0; background-color:#f9f9eb;
position:relative; position:relative;
} }
@ -201,6 +245,8 @@ header h1{
.upbar a { .upbar a {
display:block; display:block;
height:100%; height:100%;
border-bottom:none;
background:none;
} }
.upbar p { .upbar p {
@ -218,18 +264,18 @@ header h1{
.uptitle { .uptitle {
color:black; color:black;
float:left; float:left;
font-size:3vh; font-size:0.8em;
} }
.upclose { .upclose {
color:black; color:black;
float:right; float:right;
text-decoration:none; text-decoration:none;
font-size:3vh; font-size:0.8em;
} }
.upclose:hover { .upclose:hover {
color:magenta; color:#000099;
} }
@ -280,13 +326,6 @@ header h1{
position: relative; position: relative;
} }
[id*="att-video"] > .wrap{
background:rgba(0,0,0,0);
}
/*main*/ /*main*/
section#main{ section#main{
@ -300,12 +339,12 @@ section#main{
} }
.logo{ .logo{
display:none; width:70%;
} }
[class*="col"]{ [class*="col"]{
float:left; float:left;
width:21.75%; width:28%;
height:100%; height:100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -319,33 +358,53 @@ section#main{
} }
[class*="col"] p{ [class*="col"] p{
font-size:calc(9px + 0.6vw); font-size:0.65em;
line-height:130%; line-height:1.5em;
} }
.col1 { .col1 {
width:13%;
display:initial; display:initial;
} }
.short{
display:block;
}
.long{
display:none;
}
.col5 {
width:16%;
}
.col6 { .col6 {
width:65.25%; width:72%;
padding-right:0; padding-right:0;
} }
[class*="subcl"]{ [class*="subcl"]{
width:33%; width:38.5%;
float:left; float:left;
} }
.col2 p,.col1 p { .subcl3{
width:22.5%;
}
.col1 p {
word-wrap:break-word; word-wrap:break-word;
} }
.attch {
padding-top:7%;
}
p.subcl3{ p.subcl3{
padding-right:1%; padding-right:1%;
} }
@ -353,8 +412,11 @@ p.subcl3{
.row{ .row{
padding-bottom:2.2vh; padding-bottom:2.2vh;
padding-top:2.2vh; padding-top:2.2vh;
}
.row:not(:last-child){
border-bottom-style:solid; border-bottom-style:solid;
border-bottom-color:white; border-bottom-color:black;
border-bottom-width:3px; border-bottom-width:3px;
} }
@ -378,27 +440,12 @@ p.subcl3{
} }
#categories h2{ #categories h2{
font-size:2.7vw; font-size:0.7em;
}
a{
color:white;
text-decoration-color:#0f0;
}
.ext:hover {
text-decoration: overline;
text-decoration-color:#f3ca1b;
}
.int:hover {
text-decoration: overline;
text-decoration-color:magenta;
} }
.gradShow { .gradShow {
font-weight:bold; font-weight:900;
} }
@ -408,19 +455,26 @@ a{
display: table; display: table;
} }
/* --------- 2nd case --------- */ /* --------- 2nd case --------- */
@media all and (min-width: 600px) and (max-width: 720px){ @media all and (min-width: 600px) and (max-width: 720px){
a{
border-bottom:2px solid #99f;
}
/*header*/ /*header*/
#ihtp{ #ihtp{
font-size:calc(9px + 1.7vh); /*font-size:calc(9px + 1.7vh);*/
line-height:130%; line-height:130%;
} }
#sub > a { #sub > span:first-child {
width:47%; margin-right:22%;
} }
/*xpuf*/ /*xpuf*/
@ -432,27 +486,15 @@ a{
/*main*/ /*main*/
.short{
[class*="col"]{ display:none;
width:20.75%;
}
.col1 {
width:17%;
}
.col6 {
width:62.25%;
} }
[class*="col"] p{ .long{
font-size:calc(10px + 0.6vw); display:block;
} }
.row{ .row:not(:last-child){
border-bottom-width:4px; border-bottom-width:4px;
} }
@ -461,12 +503,6 @@ a{
border-bottom-width:4px; border-bottom-width:4px;
} }
#categories h2{
font-size:2.5vw;
}
} }
@ -474,6 +510,10 @@ a{
@media all and (min-width: 720px) and (max-width: 992px){ @media all and (min-width: 720px) and (max-width: 992px){
a{
border-bottom:2px solid #99f;
}
/*header*/ /*header*/
@ -482,9 +522,13 @@ a{
line-height:130%; line-height:130%;
} }
#sub > a { #sub > span:first-child{
width:47%; margin-right:22%;
font-size:2.1vw; /*font-size:2.1vw;*/
}
.show{
font-size:0.6em;
} }
/*xpuf*/ /*xpuf*/
@ -492,27 +536,15 @@ a{
/*main*/ /*main*/
[class*="col"]{ .short{
width:20.75%; display:none;
}
.col1 {
width:17%;
}
.col6 {
width:62.25%;
} }
.long{
[class*="col"] p{ display:block;
font-size:calc(11px + 0.6vw);
} }
.row{ .row:not(:last-child){
border-bottom-width:5px; border-bottom-width:5px;
} }
@ -531,20 +563,17 @@ p.subcl3{
} }
#categories h2{
font-size:2.1vw;
}
} }
/* --------- 4th case --------- */ /* --------- 4th case --------- */
@media all and (min-width: 992px) and (max-width: 1400px) { @media all and (min-width: 992px) and (max-width: 1400px) {
/*header*/ a{
border-bottom:2px solid #99f;
}
/*header*/
header{ header{
width:25%; width:25%;
@ -560,7 +589,7 @@ header{
} }
header h1{ header h1{
font-size:7vw; font-size:2.3em;
width:77%; width:77%;
padding-bottom:3%; padding-bottom:3%;
-webkit-padding-after:7%; -webkit-padding-after:7%;
@ -579,25 +608,25 @@ header h1{
padding-top:0; padding-top:0;
float:none; float:none;
width:100%; width:100%;
} font-size:0.6em;
#sub > a {
font-size:calc(10px + 0.6vw);
width: 35%;
text-align:left; text-align:left;
} }
#sub > span:first-child{
margin-right: 20%;
}
#hleft-text{ #hleft-text{
position:relative; position:relative;
display:block; display:block;
background:none; background:none;
padding-top:5%; margin-top:7%;
width:100%; width:100%;
overflow-y:auto; overflow-y:auto;
overflow-x:hidden; overflow-x:hidden;
padding-right:30%; padding-right:1%;
box-sizing:initial; box-sizing:border-box;
cursor:default; cursor:default;
} }
@ -624,8 +653,8 @@ header h1{
-webkit-transform:none; -webkit-transform:none;
-ms-transform:none; -ms-transform:none;
transform:none; transform:none;
font-size:calc(8px + 0.6vw); font-size:1em;
line-height:120%; line-height:130%;
} }
@ -636,6 +665,8 @@ header h1{
#back, #back:hover, #back:visited{ #back, #back:hover, #back:visited{
background-color:none; background-color:none;
cursor:default; cursor:default;
color:black;
font-size:0.55em;
} }
/*xpuf*/ /*xpuf*/
@ -661,8 +692,8 @@ section#main{
top:0; top:0;
bottom:0; bottom:0;
overflow:hidden; overflow:hidden;
left:25%; left:27%;
width:75%; width:73%;
padding-left:1%; padding-left:1%;
} }
@ -679,22 +710,16 @@ section#main{
width:70%; width:70%;
} }
[class*="col"] p {
[class*="col"]{ font-size:0.55em;
width:20.75%;
}
.col1 {
width:17%;
} }
.col6 { .short{
width:62.25%; display:none;
} }
[class*="col"] p { .long{
font-size:calc(10px + 0.6vw); display:block;
} }
.subrow p{ .subrow p{
@ -706,7 +731,7 @@ p.subcl3{
padding-right:5%; padding-right:5%;
} }
.row{ .row:not(:last-child){
border-bottom-width:5px; border-bottom-width:5px;
} }
@ -717,16 +742,17 @@ p.subcl3{
width:98%; width:98%;
} }
#categories h2{
font-size:calc(11px + 0.6vw);
}
} }
/* --------- 5th case --------- */ /* --------- 5th case --------- */
@media all and (min-width: 1400px){ @media all and (min-width: 1400px){
a{
border-bottom:2px solid #99f;
}
/*header*/ /*header*/
@ -744,7 +770,7 @@ header{
} }
header h1{ header h1{
font-size:6vw; font-size:2.3em;
width:77%; width:77%;
float:none; float:none;
} }
@ -761,14 +787,13 @@ header h1{
padding-top:0; padding-top:0;
float:none; float:none;
width:100%; width:100%;
} font-size:0.6em;
#sub > a {
font-size:1.2em;
width: 35%;
text-align:left; text-align:left;
} }
#sub > span:first-child{
margin-right: 20%;
}
#hleft-text{ #hleft-text{
position:relative; position:relative;
@ -778,8 +803,8 @@ header h1{
width:100%; width:100%;
overflow-y:auto; overflow-y:auto;
overflow-x:hidden; overflow-x:hidden;
padding-right:30%; padding-right:1%;
box-sizing:initial; box-sizing:border-box;
cursor:default; cursor:default;
} }
@ -806,8 +831,7 @@ header h1{
-webkit-transform:none; -webkit-transform:none;
-ms-transform:none; -ms-transform:none;
transform:none; transform:none;
font-size:calc(9px + 0.5vw); line-height:130%;
line-height:125%;
} }
@ -818,6 +842,8 @@ header h1{
#back, #back:hover, #back:visited{ #back, #back:hover, #back:visited{
background-color:none; background-color:none;
cursor:default; cursor:default;
color:black;
font-size:0.65em;
} }
/*xpuf*/ /*xpuf*/
@ -843,8 +869,8 @@ section#main{
top:0; top:0;
bottom:0; bottom:0;
overflow:hidden; overflow:hidden;
left:25%; left:27%;
width:75%; width:73%;
padding-left:1%; padding-left:1%;
} }
@ -862,24 +888,19 @@ section#main{
} }
[class*="col"]{ [class*="col"] p {
width:20.75%; font-size:0.55em;
} }
.col1 { .short{
width:17%; display:none;
} }
.col6 { .long{
width:62.25%; display:block;
} }
[class*="col"] p {
font-size:calc(8px + 0.6vw);
}
.subrow p{ .subrow p{
padding-right:7%; padding-right:7%;
@ -890,7 +911,7 @@ p.subcl3{
padding-right:5%; padding-right:5%;
} }
.row{ .row:not(:last-child){
border-bottom-width:5px; border-bottom-width:5px;
} }
@ -901,24 +922,14 @@ p.subcl3{
margin-left:0; margin-left:0;
} }
#categories h2{
font-size:calc(12px + 0.6vw);
}
} }
/* --------- 6th case --------- */ /* --------- 6th case --------- */
@media all and (max-height: 450px) { @media all and (max-height: 450px) {
[id*="att-video"] > .wrap{
width:400px;
}
.upbar{ .upbar{
height:7%; height:7%;
} }
} }
/* hiding years */
div#year2020 { display:none; }

@ -1,5 +1,6 @@
@import url("main.css"); @import url("main.css");
body{ body{
color:black; color:black;
} }
@ -10,9 +11,27 @@ body{
/*header*/ /*header*/
header{padding-bottom:2%;}
header h1{float:none;}
#homebttn{
background-color: inherit;
text-align:right;
color:black;
position:absolute;
top:0;
right:0;
margin-right:6%;
margin-top:15px;
padding:0.3% 0 0 0.3%;
font-size:0.6em;
z-index:44;
}
#project-title { #project-title {
font-size:calc(17px + 1.5vw); font-size:1.4em;
line-height:135%; line-height:135%;
margin-bottom:1%; margin-bottom:1%;
} }
@ -20,7 +39,7 @@ body{
#student-name { #student-name {
margin-bottom:0; margin-bottom:0;
font-weight:normal; font-weight:normal;
font-size:calc(10px + 0.6vw); font-size:0.8em;
} }
a#student-page{color:black;} a#student-page{color:black;}
@ -35,7 +54,6 @@ a#student-page{color:black;}
} }
#ihtp{ #ihtp{
margin-top:3%; margin-top:3%;
width:80%; width:80%;
color:black; color:black;
@ -44,30 +62,21 @@ a#student-page{color:black;}
#about-student{ #about-student{
width:95%; width:95%;
color:#2f2f2f; color:#2f2f2f;
font-size:calc(8px + 0.5vw); font-size:1em;
line-height: 130%;
font-style:italic; font-style:italic;
} }
object{
padding-bottom:7%;
}
hr{ hr{
width:50%; width:50%;
color:#ccc; color:#ccc;
} }
a.show{ .show{
font-size:calc(13px + 1.5vw); font-size:1em;
}
a#home {
font-size:calc(7px + 1.5vw);
color:black;
text-decoration:underline;
text-decoration-color:#0f0;
}
a#home:hover{
text-decoration:overline;
text-decoration-color:#f3ca1b;
} }
#project-link{ #project-link{
@ -80,7 +89,6 @@ a#home:hover{
section#main{ section#main{
overflow:auto; overflow:auto;
padding-left:1.5%; padding-left:1.5%;
} }
#galleries{ #galleries{
@ -88,15 +96,16 @@ section#main{
} }
.gal-title{ .gal-title{
font-size:calc(12px + 0.7vw); font-size:0.8em;
} }
#publist { #publist {
line-height:155%; line-height:80%;
} }
#galleries a{ #galleries li, #galleries p{
color:black; color:black;
font-size:0.9em;;
} }
.workimg{ .workimg{
@ -107,40 +116,30 @@ section#main{
@media all and (min-width: 600px) and (max-width: 720px){ @media all and (min-width: 600px) and (max-width: 720px){
#about-student{ #galleries{
font-size:calc(8px + 1.7vh); padding-top:1%;
line-height:130%;
} }
#galleries li, #galleries p{
font-size:0.8em;
} }
@media all and (min-width: 720px) and (max-width: 992px){
/*header*/
#about-student{
font-size:calc(10px + 1.7vh);
line-height:130%;
}
} }
@media all and (max-width: 600px){ @media all and (min-width: 720px) and (max-width: 992px){
/*header*/ #galleries{
padding-top:1%;
}
#about-student{ #galleries li, #galleries p{
font-size:calc(7px + 1.5vh); font-size:0.8em;;
line-height:130%;
} }
} }
@media all and (max-width: 992px){ @media all and (max-width: 992px){
#homebttn{
display:none;
}
/*header*/ /*header*/
#sub{ #sub{
width:30%; width:30%;
@ -149,38 +148,32 @@ section#main{
} }
#student-name{ #student-name{
text-align:right;
line-height:125%; line-height:125%;
} }
#ihtp, #about-student{ #ihtp, #about-student, #ihtp a{
color:white; color:white;
} }
#getback {
padding-bottom:5%;
}
} }
@media all and (min-width: 992px){ @media all and (min-width: 992px){
#homebttn{ #homebttn{
background-color:white;
text-align:right;
color:black;
position:absolute;
top:0;
right:0;
margin-right:3%; margin-right:3%;
margin-top:0.7%; margin-top:0.7%;
padding:0.3% 0 0.4% 0.3%;
font-size:calc(7px + 0.6vw);
z-index:100;
} }
/*header*/
#student-name {
font-size:0.6em;
}
/*main*/
section#main{ section#main{
width:74%; width:74%;
left:27%; left:27%;
@ -188,10 +181,26 @@ section#main{
} }
#galleries{ #galleries{
padding-left:1%; padding-left:1%;
} }
#galleries li, #galleries p{
font-size:0.62em;
}
}
@media all and (min-width: 1400px){
#galleries li, #galleries p{
font-size:0.55em;
}
.gal-title{
font-size:0.73em;
}
} }

@ -62,8 +62,6 @@ He graduated from Design Academy Eindhoven and currently studies Media Design ma
<li><a href='https://git.xpub.nl/ZalanSzakacs/EigengrauScripts' target="_blank" class='ext'>Project Website</a></li> <li><a href='https://git.xpub.nl/ZalanSzakacs/EigengrauScripts' target="_blank" class='ext'>Project Website</a></li>
</ul> </ul>
<img src="img/EIGENGRAU_1.jpg" class='workimg'/> <img src="img/EIGENGRAU_1.jpg" class='workimg'/>
</div> </div>
<div id='publication'> <div id='publication'>
<h3 class='gal-title'>Publication</h3> <h3 class='gal-title'>Publication</h3>

@ -0,0 +1,143 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ilinx</title>
<meta name="description" content="XPUB">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/pages.css">
<style type="text/css">
body { font-family: "Lucida Console", Monaco, monospace !important;
color: white;
background-color: black !important;
background: radial-gradient(15px 5px at 25% 0, transparent 0%, transparent 80%, rgba(255, 255, 255, 0.06) 80%, rgba(255, 255, 255, 0.06) 99%, transparent 99%, transparent 100%),
radial-gradient(15px 5px at 75% 100%, transparent 0%, transparent 80%, rgba(255, 255, 255, 0.06) 80%, rgba(255, 255, 255, 0.06) 99%, transparent 99%, transparent 100%),
radial-gradient(10px 3px at 25% 0, transparent 0%, transparent 70%, rgba(255, 255, 255, 0.05) 70%, rgba(255, 255, 255, 0.05) 99%, transparent 99%, transparent 100%),
radial-gradient(10px 3px at 75% 100%, transparent 0%, transparent 70%, rgba(255, 255, 255, 0.05) 70%, rgba(255, 255, 255, 0.05) 99%, transparent 99%, transparent 100%),
radial-gradient(30px 8px at 25% 0, transparent 0%, transparent 55%, rgba(255, 255, 255, 0.02) 55%, rgba(255, 255, 255, 0.02) 99%, transparent 99%, transparent 100%),
radial-gradient(30px 8px at 75% 100%, transparent 0%, transparent 55%, rgba(255, 255, 255, 0.02) 55%, rgba(255, 255, 255, 0.02) 99%, transparent 99%, transparent 100%), #c4cbc3;
background-size: 60px 40px, 60px 40px, 40px 24px, 40px 24px, 120px 64px, 120px 64px;
background-position: 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%;
-webkit-animation: wave 5s linear infinite;
animation: wave 5s linear infinite;
}
@-webkit-keyframes wave {
0% {
background-position: 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%;
}
20% {
background-position: 51% 48%, 51% 48%, 53% 52%, 53% 52%, 48% 47%, 48% 47%;
}
40% {
background-position: 49% 51%, 49% 51%, 48% 51%, 48% 51%, 54% 50%, 54% 50%;
}
60% {
background-position: 53% 54%, 53% 54%, 46% 54%, 46% 54%, 53% 46%, 53% 46%;
}
80% {
background-position: 51% 52%, 51% 52%, 49% 49%, 49% 49%, 49% 48%, 49% 48%;
}
0% {
background-position: 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%;
}
}
@keyframes wave {
0% {
background-position: 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%;
}
20% {
background-position: 51% 48%, 51% 48%, 53% 52%, 53% 52%, 48% 47%, 48% 47%;
}
40% {
background-position: 49% 51%, 49% 51%, 48% 51%, 48% 51%, 54% 50%, 54% 50%;
}
60% {
background-position: 53% 54%, 53% 54%, 46% 54%, 46% 54%, 53% 46%, 53% 46%;
}
80% {
background-position: 51% 52%, 51% 52%, 49% 49%, 49% 49%, 49% 48%, 49% 48%;
}
0% {
background-position: 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%;
}
}
h1 { font-family: "Lucida Console", Monaco, monospace !important; }
#wrapper {background-color: #0000 !important}
#ihtp {color: white !important}
a{color: white !important;}
a#student-page{color: white !important;}
.ext2 {
border-bottom-color: #00fc33;
background:linear-gradient(to bottom, #00fc33 0, #00fc33 100%);
background-position:0 100%;
background-repeat:repeat-x;
background-size: 0 0;
transition:background .2s ease-in-out;
}
#about-student {
color: #00fc33;
}
</style>
</head>
<body>
<div id='wrapper'>
<a href='../' id='homebttn' class='ext'> << home</a>
<header>
<h1 id='project-title'>ilinx <a href='#hleft-text' class='show'></a></h1>
<h2 id='student-name'><a href='http://hub.xpub.nl/ilinx/dls/' target='_blank' class='ext2' id='student-page'>Tancredi Di Giovanni</a></h2>
<div id='hleft-text'>
<a href=# id='back'>
<div id='inner-hleft-text'>
<div id='ihtp'>
<object>
<div id='about-project'>
<p>BlaBlaBlAbLAblAlbLaaiaufiaeufjiajdoaidja</p>
</div>
<hr align='left'>
<div id='about-student'>
<p>BlaBlaBlAbLAblAlbLaaiaufiaeufjiajdoaidja</p>
</div>
<a id='getback' class='int'> go back </a>
</object>
</div>
</div>
</a>
</div>
</header>
<section id='main'>
<div id="galleries">
<div id='work'>
<h3 class='gal-title'>Work</h3>
<ul id='publist'>
<li><a href='http://hub.xpub.nl/ilinx' target="_blank" class='ext2'>Project Website</a></li>
</ul>
</div>
<div id='galleries'>
<img src="img/1.jpg" class='workimg'/>
<img src="img/2.jpg" class='workimg'/>
<img src="img/3.jpg" class='workimg'/>
<img src="img/4.jpg" class='workimg'/>
<img src="img/5.jpg" class='workimg'/>
</div>
<div id='publication'>
<h3 class='gal-title'>Thesis</h3>
<ul id='publist'>
<li><a href='pdf/OHE.pdf' target="_blank" class='ext2'>Out-of-Hardware Experience: Consciousness and Software [PDF]</a></li>
</ul>
</div>
</div>
</section>
</div>
</body>
</html>

Binary file not shown.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.6 KiB

After

Width:  |  Height:  |  Size: 4.6 KiB

@ -0,0 +1,70 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<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"
viewBox="0 0 359.74652 401.79145"
version="1.1"
id="svg33"
sodipodi:docname="xpub_logo_2018.svg"
width="359.74652"
height="401.79144"
inkscape:version="0.92.1 r15371">
<metadata
id="metadata37">
<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>Asset 3</dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1366"
inkscape:window-height="704"
id="namedview35"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:zoom="0.30376817"
inkscape:cx="276.52374"
inkscape:cy="200.93489"
inkscape:window-x="0"
inkscape:window-y="27"
inkscape:window-maximized="1"
inkscape:current-layer="svg33" />
<defs
id="defs4">
<style
id="style2">.cls-1{fill:#fff;}</style>
</defs>
<title
id="title6">Asset 3</title>
<path
id="path4520"
d="m 0.30707467,265.22154 c -1.38999997,-22.22 1.89000003,-40.83 10.84000033,-55.56 6.85,-12.75 19.63,-29.75 30.85,-41.34 20,-20.53 39.67,-50.62 48.17,-72.859997 5.55,-14.83 10.999995,-37.16 11.259995,-46.35 a 107.63,107.63 0 0 1 2.95,-19 c 6.16,-23.9999997 15.93,-31.5599997 37.69,-29.88999968 23.8,1.72999998 44.1,18.34999968 49.58,40.31999968 1.24,4.13 3.15,8.61 4.46,10.36 2.62,3.49 13.69,9.61 22.79,12.94 a 29.69,29.69 0 0 1 10.37,6.44 c 3.63,3.86 4,4.55 1.85,6.53 -1.39,1 -9,3.82 -17.22,6 -8.22,2.18 -15.81,4.64 -17.21,5.62 -5.23,3.93 1.23,38.879997 9.12,48.659997 6.9,8.72 24.34,18.1 48.62,26.66 12.82,4.47 25.31,8.25 28.37,8.68 l 5.44,0.5 0.73,-13.27 c 0.59,-8.5 1.78,-13.92 3.17,-14.9 1.74,-1.31 6.83,-0.48 19.68,3 9.46,2.67 21.3,5.74 26.38,6.58 5.08,1.17 9.8,2.68 10.46,3.38 0.65,1 -0.22,7.49 -2.49,14.92 -1.92,7.44 -2,10.16 -3.53,15.57 0.3,1.37 2.69,1.1 8.05,4.33 5.36,3.23 8.68,6.05 9,7.08 0.32,1.03 -0.67,11.23 -2.54,16.62 -4.44,11.8 -14.34,12.52 -18,11.05 -4.39,-1.49 -5.42,-1.18 -7.64,4.88 -3.33,8.76 -5.74,9.71 -15.52,6.35 -4.73,-1.5 -12.83,-4.13 -17.89,-5.64 l -9.45,-3 -0.46,-7.51 c -0.17,-5.8 -1.21,-5.15 -5.29,-5.61 -11.22,-1 -12.91,-1.41 -25.78,-3.83 -7.46,-1.24 -16.28,-2.53 -17,-1.87 -0.72,0.66 2.14,8.24 3.25,16.79 3.65,26.35 3.55,52.58 0,69.18 -9.1,42.67 -13.16,53.11 -22.17,58 -5.89,3.23 -6.31,5.95 -1.74,12.56 4.25,5.92 7.31,6.35 13.23,2.1 5.58,-4.26 7.92,-2.85 7.78,1.91 -0.18,6.13 -7.15,11.4 -21,18.14 -9.33,4.49 -13.12,5.74 -14.44,4.34 -1,-1.39 -1.28,-2.76 0.15,-5.11 1.44,-2.68 0.8,-4.07 -3.82,-9 l -5.63,-5.62 -21.45,-0.64 c -11.92,-0.35 -25.51,-1.44 -30.6,-2.27 l -9.15,-1.63 -3.6,6.37 c -3.25,6 -3.61,6.71 -1,9.17 1.32,1.4 4.68,3.21 7,4.3 8.75,3.67 3.56,14.12 -5.57,11.81 -7.78,-1.93 -31.07,-17.33 -33.379995,-19.78 -3.31,-3.17 -1.12,-8.21 2.939995,-7.07 4.73,1.5 6.84,-0.82 8.06,-7.6 0.86,-6.11 0.53,-6.46 -8.11,-13.87 -20.609995,-17.31 -32.999995,-36.42 -37.449995,-58.7 -3,-14.4 -2,-47.09 1.77,-59.58 1.52,-5.41 3.41,-11.48 3.82,-13.86 l 0.8,-4.07 -3.53,4 c -1.77,2.33 -3.55,4.67 -3.57,5.35 -0.02,0.68 -6.43,13 -14.02,27.72 -10.09,18.49 -12.13,22.15 -15.76,28.4 -3.63,6.25 -13.05,12.36 -17.75,9.84 -5.7000003,-3.24 -9.3600003,-6.64 -12.1800003,-13.73 -0.25,-2.05 -2.47000003,-9.51 -2.69000003,-13.29 z M 102.06707,62.761543 a 92.58,92.58 0 0 1 -3.849995,14.88 c -0.79,3.72 3.579995,5.56 8.569995,9.8 a 53.23,53.23 0 0 0 13.4,7.89 c 7.75,3 16.58,3.9 16.64,1.86 0,-0.68 -3.28,-4.19 -7.27,-7.71 -9.3,-8.11 -11.54,-13 -13.15,-27.65 -1.34,-12.31 -7.29,-18.62 -10,-19.38 -3,-0.77 -1.89,6.42 -4.35,20.32 z m 38.5,241.379997 c -7.92,25.66 -7.71,30.1 0.2,39.19 4,3.87 9.32,7.43 12.36,8.2 14.89,3.51 51.4,1.87 64.83,-2.85 6.2,-2.2 9.82,-9.25 18,-42.74 3.55,-16.25 4.86,-37.34 4.08,-57.13 -1.32,-13 -3.78,-33.51 -11.09,-51.1 -5.13,-10.72 -15.54,-27.38 -26.61,-45.09 -11.7,-19.09 -19.7,-25.12 -32.29,-25.83 -9.86,-0.63 -17.16,4.26 -22.94,15 -4,7.72 -4.36,9.07 -4.23,27.82 0,11.59 1,23.54 2.56,28.7 2.45,9.27 5.17,32.53 5.93,52.65 0.33,11.94 -2.48,26.17 -10.78,53.18 z m 152.43,-128.72 -0.82,16 c 0.07,9.2 -1,11.22 -0.12,26.92 0.18,5.46 3.49,8.62 6.88,9.4 2.7,0.76 16.19,5.59 18.54,6.68 6.4,2.58 7.62,-4.2 10.15,-8.9 1.81,-3.69 0.13,-4.43 -5.17,-9.35 -14.92,-14.07 -21,-26.52 1,-32.34 10.86,1.34 13.83,4.84 14,-0.95 0,-1.36 -27.09,-5.92 -36.95,-6.55 z m 2.72,-22.75 c -1.06,1.33 -1.87,5.74 -1.63,9.15 -1.29,9.16 -0.28,9.53 22.79,12.94 21,3 23.39,4.1 25.7,-4.69 q 3.32,-8.59 -5.83,-10.4 c -2.71,-0.42 -13.21,-2.78 -22,-5.08 -13.19,-3.46 -18,-3.6 -19,-1.93 z"
inkscape:connector-curvature="0" />
<path
class="cls-1"
d="m 158.60707,59.531543 a 11,11 0 0 0 -4.48,-8 c -2.37,-1.71 -2.49,-1.85 -0.17,-3.79 3,-2.51 6.11,-4.93 9,-7.57 a 4.41,4.41 0 0 0 1.2,-3.18 c -0.18,-2.31 -1.55,-2.87 -3.51,-1.51 -3.1,2.15 -6.16,4.38 -9.13,6.7 -2.97,2.32 -3.31,2.27 -5.29,-0.73 -1.66,-2.52 -3.5,-4.94 -5.23,-7.42 -1,-1.38 -2.06,-2 -3.51,-0.72 -1.29,1.18 -2,2.42 -0.69,4.18 2,2.72 3.75,5.61 5.7,8.37 0.9,1.27 0.84,2.2 -0.42,3.15 a 14.92,14.92 0 0 0 -2.53,2.38 3.78,3.78 0 0 0 0.32,5.5 c 1.92,1.45 3.33,0.3 4.52,-1.2 1.19,-1.5 2.5,-1.86 3.91,-0.16 a 53.82,53.82 0 0 0 4.7,5.32 c 0.85,0.78 2.46,1.52 3.4,1.23 0.94,-0.29 1.66,-1.86 2.21,-2.55 z"
id="path9"
inkscape:connector-curvature="0"
style="fill:#ffffff" />
</svg>

After

Width:  |  Height:  |  Size: 5.9 KiB

@ -15,17 +15,20 @@
<header> <header>
<h1 id='page-title'>XPUB <a href='#hleft-text' class='show'></a></h1> <h1 id='page-title'>XPUB <a href='#hleft-text' class='show'></a></h1>
<div id='sub'> <div id='sub'>
<a href="https://xpub.nl" target="_blank" class='ext'>xpub.nl</a> <span><a href="https://xpub.nl" target="_blank" class='ext'>xpub.nl</a></span>
<a href="http://pzwiki.wdka.nl/mediadesign/" target="_blank" class='ext'>XPUB wiki</a></div> <span><a href="http://pzwiki.wdka.nl/mediadesign/" target="_blank" class='ext'>XPUB wiki</a></span>
</div>
<div id='hleft-text'> <div id='hleft-text'>
<a href=# id='back'> <a href=# id='back'>
<div id='inner-hleft-text'> <div id='inner-hleft-text'>
<div id='ihtp'> <div id='ihtp'>
<object>
<p>XPUB is the Master of Arts in Fine Art and Design: Experimental Publishing of the Piet Zwart Institute. XPUB focuses on the acts of making things public and creating publics in the age of post-digital networks. XPUB's interests in publishing are twofold:</br></br> <p>XPUB is the Master of Arts in Fine Art and Design: Experimental Publishing of the Piet Zwart Institute. XPUB focuses on the acts of making things public and creating publics in the age of post-digital networks. XPUB's interests in publishing are twofold:</br></br>
-> first, publishing as the inquiry and participation into the technological frameworks, political context and cultural processes through which things are made public;</br></br> -> first, publishing as the inquiry and participation into the technological frameworks, political context and cultural processes through which things are made public;</br></br>
-> and second, how these are, or can be, used to create publics by expanding the means of discourse circulation beyond print media and its direct digital translation.</br></br><span id='getback'> go back </span> </p> -> and second, how these are, or can be, used to create publics by expanding the means of discourse circulation beyond print media and its direct digital translation.</br></br><a id='getback' class='int'> go back </a> </p>
</object>
</div> </div>
</div> </div>
</a> </a>
@ -35,38 +38,24 @@
<section id='main'> <section id='main'>
<!-- This is the section where you upload the pop-up material: e.g.: IMGs of your publication. -->
<div id='luxurious-xpuf'> <div id='luxurious-xpuf'>
<div id='2020'> <div id='2020'>
<div id='2020-att-video'>
<div class='wrap'>
<div class='upbar'><a href="#"><p><span class='uptitle'>trailer.mp4</span><span class='upclose'>X</span></p></a></div>
<div class='twowrap-trailer'>
<div class='iframe-container'>
<iframe src="https://player.vimeo.com/video/159634567" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<div id='2020-att1'> <div id='2020-att1'>
<div class='wrap'> <div class='wrap'>
<!--to avoid jumps, href for class='close' on top divs (corresponding to the most recent graduation year) should be left at '#'--> <!--to avoid jumps, href for class='close' on top divs (corresponding to the most recent graduation year) should be left at '#'-->
<div class='upbar'><a href="#"><p><span class='uptitle'>publication name</span><span class='upclose'>X</span></p></a></div> <div class='upbar'><a href="#"><p><span class='uptitle'>project name</span><span class='upclose'>X</span></p></a></div>
<div class='twowrap'> <div class='twowrap'>
<img src='img/ex1.jpg'/> <img src='img/ex1.jpg'/>
<img src='img/ex2.jpg'/> <img src='img/ex2.jpg'/>
<img src='img/ex3.jpg'/></div> <img src='img/ex3.jpg'/></div>
</div> </div>
</div> </div>
<div id='2020-att2'> <div id='2020-att2'>
<div class='wrap'> <div class='wrap'>
<div class='upbar'><a href="#"><p><span class='uptitle'>publication name</span><span class='upclose'>X</span></p></a></div> <div class='upbar'><a href="#"><p><span class='uptitle'>project name</span><span class='upclose'>X</span></p></a></div>
<div class='twowrap'> <div class='twowrap'>
<img src='img/ex1.jpg'/> <img src='img/ex1.jpg'/>
<img src='img/ex2.jpg'/> <img src='img/ex2.jpg'/>
@ -75,7 +64,7 @@
</div> </div>
<div id='2020-att3'> <div id='2020-att3'>
<div class='wrap'> <div class='wrap'>
<div class='upbar'><a href="#"><p><span class='uptitle'>publication name</span><span class='upclose'>X</span></p></a></div> <div class='upbar'><a href="#"><p><span class='uptitle'>project name</span><span class='upclose'>X</span></p></a></div>
<div class='twowrap'> <div class='twowrap'>
<img src='img/ex1.jpg'/> <img src='img/ex1.jpg'/>
<img src='img/ex2.jpg'/> <img src='img/ex2.jpg'/>
@ -84,7 +73,7 @@
</div> </div>
<div id='2020-att4'> <div id='2020-att4'>
<div class='wrap'> <div class='wrap'>
<div class='upbar'><a href="#"><p><span class='uptitle'>publication name</span><span class='upclose'>X</span></p></a></div> <div class='upbar'><a href="#"><p><span class='uptitle'>project name</span><span class='upclose'>X</span></p></a></div>
<div class='twowrap'> <div class='twowrap'>
<img src='img/ex1.jpg'/> <img src='img/ex1.jpg'/>
<img src='img/ex2.jpg'/> <img src='img/ex2.jpg'/>
@ -93,7 +82,7 @@
</div> </div>
<div id='2020-att5'> <div id='2020-att5'>
<div class='wrap'> <div class='wrap'>
<div class='upbar'><a href="#"><p><span class='uptitle'>publication name</span><span class='upclose'>X</span></p></a></div> <div class='upbar'><a href="#"><p><span class='uptitle'>project name</span><span class='upclose'>X</span></p></a></div>
<div class='twowrap'> <div class='twowrap'>
<img src='img/ex1.jpg'/> <img src='img/ex1.jpg'/>
<img src='img/ex2.jpg'/> <img src='img/ex2.jpg'/>
@ -102,7 +91,7 @@
</div> </div>
<div id='2020-att6'> <div id='2020-att6'>
<div class='wrap'> <div class='wrap'>
<div class='upbar'><a href="#"><p><span class='uptitle'>publication name</span><span class='upclose'>X</span></p></a></div> <div class='upbar'><a href="#"><p><span class='uptitle'>project name</span><span class='upclose'>X</span></p></a></div>
<div class='twowrap'> <div class='twowrap'>
<img src='img/ex1.jpg'/> <img src='img/ex1.jpg'/>
<img src='img/ex2.jpg'/> <img src='img/ex2.jpg'/>
@ -127,30 +116,8 @@
<img src='img/ex3.jpg'/></div> <img src='img/ex3.jpg'/></div>
</div> </div>
</div> </div>
<div id='2020-att9'>
<div class='wrap'>
<div class='upbar'><a href="#"><p><span class='uptitle'>publication name</span><span class='upclose'>X</span></p></a></div>
<div class='twowrap'>
<img src='img/ex1.jpg'/>
<img src='img/ex2.jpg'/>
<img src='img/ex3.jpg'/></div>
</div>
</div>
</div> </div>
<div id='2019'> <div id='2019'>
<div id='2019-att-video'>
<div class='wrap'>
<div class='upbar'><a href="#"><p><span class='uptitle'>trailer.mp4</span><span class='upclose'>X</span></p></a></div>
<div class='twowrap-trailer'>
<div class='iframe-container'>
<iframe src="https://player.vimeo.com/video/159634567" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<div id='2019-att1'> <div id='2019-att1'>
<div class='wrap'> <div class='wrap'>
<div class='upbar'><a href="#"><p><span class='uptitle'>publication name</span><span class='upclose'>X</span></p></a></div> <div class='upbar'><a href="#"><p><span class='uptitle'>publication name</span><span class='upclose'>X</span></p></a></div>
@ -162,22 +129,6 @@
</div> </div>
</div> </div>
<div id='2018'> <div id='2018'>
<div id='2018-att-video'>
<div class='wrap'>
<div class='upbar'><a href="#"><p><span class='uptitle'>XPUB Gradshow 2018</span><span class='upclose'>X</span></p></a></div>
<div class='twowrap-trailer'>
<div class='video-container'>
<video controls="" width="100%">
<source src="https://media.xpub.nl/gradshow-2018-web.mp4" poster="" type="video/mp4">
Your browser does not support the video tag :(
Try a recent version of Firefox or Chromium!
</video>
</div>
</div>
</div>
</div>
<div id='2018-att1'> <div id='2018-att1'>
<div class='wrap'> <div class='wrap'>
<div class='upbar'><a href="#year2018"><p><span class='uptitle'>Back It Up</span><span class='upclose'>X</span></p></a></div> <div class='upbar'><a href="#year2018"><p><span class='uptitle'>Back It Up</span><span class='upclose'>X</span></p></a></div>
@ -275,76 +226,72 @@
</div> </div>
<div id='categories' class='row'> <div id='categories' class='row'>
<div class='col1'><h2>Year</h2></div> <div class='col1'><h2>Year</h2></div>
<div class='col2'><h2>Attachments</h2></div>
<div class='col3'><h2>Students</h2></div> <div class='col3'><h2>Students</h2></div>
<div class='col4'><h2>Projects</h2></div> <div class='col4'><h2>Projects</h2></div>
<div class='col5'><h2>Publications</h2></div> <div class='col5'><h2><span class='long'>Publications</span><span class='short'>Pub.</span></h2></div>
</div> </div>
<div id='content'> <div id='content'>
<!-- ATTENTION 2020 STUDENTS !!! THIS IS YOUR AREA. UNCOMMENT IT WHEN YOU ARE READY TO PUBLISH.
<div id='year2020' class='row'> <div id='year2020' class='row'>
<div class='col1'><img src='img/logo.jpg' class='logo'/><p class='gradShow'>Grad Show Title</p><p>2020</p></div> <div class='col1'><img src='img/logo.jpg' class='logo'/><p class='gradShow'>Grad Show Title</p><p>2020</p></div>
<div class='col2'> <div class='attch'>
<p><a href='#2020-att-video' class='int'>trailer.mp4</a></p> <p><a href="linkto/attachment1" target='_blank' class="ext">📎 Attachment 1</a></p>
<p><a href="linkto/attachment2" class="int">📎 Attachment 2</a></p>
</div> </div>
<div class='col6'> <div class='col6'>
<div class='subrow'> <div class='subrow'>
<p class='subcl1'>Student Name</p> <p class='subcl1'>Simon Browne</p>
<p class='subcl2'><a href='empty.html' target="_blank" class='ext'>Project Name</a></p> <p class='subcl2'><a href='empty.html' target="_blank" class='ext'>Project Name</a></p>
<p class='subcl3'><a href='test.pdf' target="_blank" class='ext'>PDF</a> // <a href='#2020-att1' class='int'>IMG</a></p> <p class='subcl3'><a href='test.pdf' target="_blank" class='ext'>PDF</a> // <a href='#2020-att1' class='int'>IMG</a></p>
</div> </div>
<div class='subrow'> <div class='subrow'>
<p class='subcl1'>Student Name</p> <p class='subcl1'>Tancredi Di Giovanni</p>
<p class='subcl2'><a href='empty.html' target="_blank" class='ext'>Project Name</p> <p class='subcl2'><a href='ilinx/' target="_blank" class='ext'>ilinx</p>
<p class='subcl3'><a href='test.pdf' target="_blank" class='ext'>PDF</a> // <a href='#2020-att2' class='int'>IMG</a></p> <p class='subcl3'><a href='ilinx/pdf/OHE.pdf' target="_blank" class='ext'>Out of Hardware Experience: Consciousness and Software</a> // <a href='#2020-att2' class='int'>IMG</a></p>
</div> </div>
<div class='subrow'> <div class='subrow'>
<p class='subcl1'>Student Name</p> <p class='subcl1'>Bohye Woo</p>
<p class='subcl2'><a href='empty.html' target="_blank" class='ext'>Project Name</a></p> <p class='subcl2'><a href='empty.html' target="_blank" class='ext'>Project Name</a></p>
<p class='subcl3'><a href='test.pdf' target="_blank" class='ext'>PDF</a> // <a href='#2020-att3' class='int'>IMG</a></p> <p class='subcl3'><a href='test.pdf' target="_blank" class='ext'>PDF</a> // <a href='#2020-att3' class='int'>IMG</a></p>
</div> </div>
<div class='subrow'> <div class='subrow'>
<p class='subcl1'>Student Name</p> <p class='subcl1'>Paloma Garcia</p>
<p class='subcl2'><a href='empty.html' target="_blank" class='ext'>Project Name</a></p> <p class='subcl2'><a href='empty.html' target="_blank" class='ext'>Project Name</a></p>
<p class='subcl3'><a href='test.pdf' target="_blank" class='ext'>PDF</a> // <a href='#2020-att4' class='int'>IMG</a></p> <p class='subcl3'><a href='test.pdf' target="_blank" class='ext'>PDF</a> // <a href='#2020-att4' class='int'>IMG</a></p>
</div> </div>
<div class='subrow'> <div class='subrow'>
<p class='subcl1'>Student Name</p> <p class='subcl1'>Artemis Gryliaki</p>
<p class='subcl2'><a href='empty.html' target="_blank" class='ext'>Project Name</a></p> <p class='subcl2'><a href='empty.html' target="_blank" class='ext'>Project Name</a></p>
<p class='subcl3'><a href='test.pdf' target="_blank" class='ext'>PDF</a> // <a href='#2020-att5' class='int'>IMG</a></p> <p class='subcl3'><a href='test.pdf' target="_blank" class='ext'>PDF</a> // <a href='#2020-att5' class='int'>IMG</a></p>
</div> </div>
<div class='subrow'> <div class='subrow'>
<p class='subcl1'>Student Name</p> <p class='subcl1'>Pedro Sá Couto</p>
<p class='subcl2'><a href='empty.html' target="_blank" class='ext'>Project Name</a></p> <p class='subcl2'><a href='empty.html' target="_blank" class='ext'>Project Name</a></p>
<p class='subcl3'><a href='test.pdf' target="_blank" class='ext'>PDF</a> // <a href='#2020-att6' class='int'>IMG</a></p> <p class='subcl3'><a href='test.pdf' target="_blank" class='ext'>PDF</a> // <a href='#2020-att6' class='int'>IMG</a></p>
</div> </div>
<div class='subrow'> <div class='subrow'>
<p class='subcl1'>Student Name</p> <p class='subcl1'>Rita Graça</p>
<p class='subcl2'><a href='empty.html' target="_blank" class='ext'>Project Name</a></p> <p class='subcl2'><a href='empty.html' target="_blank" class='ext'>Project Name</a></p>
<p class='subcl3'><a href='test.pdf' target="_blank" class='ext'>PDF</a> // <a href='#2020-att7' class='int'>IMG</a></p> <p class='subcl3'><a href='test.pdf' target="_blank" class='ext'>PDF</a> // <a href='#2020-att7' class='int'>IMG</a></p>
</div> </div>
<div class='subrow'> <div class='subrow'>
<p class='subcl1'>Student Name</p> <p class='subcl1'>Biyi Wen</p>
<p class='subcl2'><a href='empty.html' target="_blank" class='ext'>Project Name</a></p> <p class='subcl2'><a href='empty.html' target="_blank" class='ext'>Project Name</a></p>
<p class='subcl3'><a href='test.pdf' target="_blank" class='ext'>PDF</a> // <a href='#2020-att8' class='int'>IMG</a></p> <p class='subcl3'><a href='test.pdf' target="_blank" class='ext'>PDF</a> // <a href='#2020-att8' class='int'>IMG</a></p>
</div> </div>
<div class='subrow'>
<p class='subcl1'>Student Name</p>
<p class='subcl2'><a href='empty.html' target="_blank" class='ext'>Project Name</a></p>
<p class='subcl3'><a href='test.pdf' target="_blank" class='ext'>PDF</a> // <a href='#2020-att9' class='int'>IMG</a></p>
</div>
</div> </div>
</div> </div>
-->
<div id='year2019' class='row'> <div id='year2019' class='row'>
<div class='col1'><img src='img/xpub_logo_2019.png' class='logo'/><p class='gradShow'>UPSETTING SETTINGS</p><p>July 2019</p></div> <div class='col1'><img src='img/xpub_logo_2019.png' class='logo'/><p class='gradShow'>UPSETTING SETTINGS</p><p>July 2019</p>
<div class='col2'> <div class='attch'>
<p><a href="2019/postergenerator/">poster generator</a></p> <p><a href="2019/postergenerator/" target='_blank' class="ext">📎 poster generator</a></p>
<p><a href="README19.NFO">README19.NFO</a></p> <p><a href="README19.NFO" class="int">📎 README19.NFO</a></p>
<p><!--a href='#2019-att-video' class='int'>trailer.mp4</a--></p> </div>
<p><!--a href='test.pdf' target="_blank" class='ext'>publication.pdf</a--></p>
<p><!--a href='#2019-att1' class='int'>publication.png</a--></p>
</div> </div>
<div class='col6'> <div class='col6'>
<div class='subrow'> <div class='subrow'>
@ -382,9 +329,10 @@
</div> </div>
</div> </div>
<div id='year2018' class='row'> <div id='year2018' class='row'>
<div class='col1'><img src='img/2018_grad_logo_inverted.png' class='logo'/><p class='gradShow'>Ex, XPUB</p><p>July 2018</p></div> <div class='col1'><img src='img/xpub_logo_2018.svg' class='logo'/><p class='gradShow'>Ex, XPUB</p><p>July 2018</p>
<div class='col2'> <div class='attch'>
<p><a href='#2018-att-video' class='int'>gradshow.mp4</a></p> <p><a href='https://media.xpub.nl/gradshow-2018-web.mp4' target='_blank' class='ext'>📎 gradshow.mp4</a></p>
</div>
</div> </div>
<div class='col6'> <div class='col6'>
<div class='subrow'> <div class='subrow'>

@ -15,15 +15,14 @@
<div id='wrapper' style="background-image: linear-gradient(to bottom left, rgba(255,255,255,1), rgba(222,244,255,0.5), rgba(255,0,180,0.3))"></div> <div id='wrapper' style="background-image: linear-gradient(to bottom left, rgba(255,255,255,1), rgba(222,244,255,0.5), rgba(255,0,180,0.3))"></div>
<a href='../' id='homebttn' class='ext'> << home </a> <a href='../' id='homebttn' class='ext'> << home </a>
<header> <header>
<h1 id='project-title'>Instant Warnet <a href='#hleft-text' class='show'></a><br><a href='../' class='show' id='home'><< </a></h1> <h1 id='project-title'>Instant Warnet <a href='#hleft-text' class='show'></a></h1>
<div id='sub'>
<h2 id='student-name'><a href='http://www.tashberting.com' target='_blank' class='ext' id='student-page'>Natasha Berting</a></h2> <h2 id='student-name'><a href='http://www.tashberting.com' target='_blank' class='ext' id='student-page'>Natasha Berting</a></h2>
</div>
<div id='hleft-text'> <div id='hleft-text'>
<a href=# id='back'> <a href=# id='back'>
<div id='inner-hleft-text'> <div id='inner-hleft-text'>
<div id='ihtp'> <div id='ihtp'>
<object>
<div id='about-project'> <div id='about-project'>
<p><i>Instant Warnet</i> is a live-action role-playing game which pokes and prods at networks of harassment on social media. In this collective performance, you are invited to assume fictional characters on the massively multiplayer arena of Instagram, with the goal of disrupting and defusing some of its more hostile practices and spaces. <br><br> Composed entirely of found tactics, scenarios and language used by the worlds most cunning trolls, buzzers and campaign operatives, Instant Warnet is an experiment which aims to flip the script on online toxicity. Instead of looking away or logging off, players are encouraged to live vicariously through their characters, using performance as a mode of talking back and reclaiming space on the platform. <p><i>Instant Warnet</i> is a live-action role-playing game which pokes and prods at networks of harassment on social media. In this collective performance, you are invited to assume fictional characters on the massively multiplayer arena of Instagram, with the goal of disrupting and defusing some of its more hostile practices and spaces. <br><br> Composed entirely of found tactics, scenarios and language used by the worlds most cunning trolls, buzzers and campaign operatives, Instant Warnet is an experiment which aims to flip the script on online toxicity. Instead of looking away or logging off, players are encouraged to live vicariously through their characters, using performance as a mode of talking back and reclaiming space on the platform.
<br><br> <i>Instant Warnet</i> (2019) is published under the terms of the Peer Production License (PPL). The Peer Production License is an example of CopyFair licensing, in which only other commoners, collectives and nonprofits can share and re-use the material in question.<br><br></p> <br><br> <i>Instant Warnet</i> (2019) is published under the terms of the Peer Production License (PPL). The Peer Production License is an example of CopyFair licensing, in which only other commoners, collectives and nonprofits can share and re-use the material in question.<br><br></p>
@ -32,7 +31,8 @@
<div id='about-student'> <div id='about-student'>
<p> Natasha Berting (Cirebon, 1992) is a media artist and writer. Her work often explores the ways that netizenship and citizenship inform each other, revealing intersections and facilitating encounters between art, technology and culture. </p> <p> Natasha Berting (Cirebon, 1992) is a media artist and writer. Her work often explores the ways that netizenship and citizenship inform each other, revealing intersections and facilitating encounters between art, technology and culture. </p>
</div> </div>
<span id='getback'> go back </span> <a id='getback' class='int'> go back </a>
</object>
</div> </div>
</div> </div>
</a> </a>

@ -15,15 +15,14 @@
<div id='wrapper' style="background-color: #f1f1f1"></div> <div id='wrapper' style="background-color: #f1f1f1"></div>
<a href='../' id='homebttn' class='ext'> << home </a> <a href='../' id='homebttn' class='ext'> << home </a>
<header> <header>
<h1 id='project-title'>Is is time to eat, or is there no more time to eat? <a href='#hleft-text' class='show'></a><br><a href='../' class='show' id='home'><< </a></h1> <h1 id='project-title'>Is is time to eat, or is there no more time to eat? <a href='#hleft-text' class='show'></a></h1>
<div id='sub'>
<h2 id='student-name'><a href='http://www.alicestrete.me' target='_blank' class='ext' id='student-page'>Alice Strete</a></h2> <h2 id='student-name'><a href='http://www.alicestrete.me' target='_blank' class='ext' id='student-page'>Alice Strete</a></h2>
</div>
<div id='hleft-text'> <div id='hleft-text'>
<a href=# id='back'> <a href=# id='back'>
<div id='inner-hleft-text'> <div id='inner-hleft-text'>
<div id='ihtp'> <div id='ihtp'>
<object>
<div id='about-project'> <div id='about-project'>
<p><i>Is it time to eat, or is there no more time to eat</i> is an extensive review of the most prominent techno-solutionist creation in terms of food. It manifests itself into a desktop film and an essay, alongside an archive of images, articles, videos and more, which together deconstruct the culture of future food, born in the valley of technological quick-fixes. <p><i>Is it time to eat, or is there no more time to eat</i> is an extensive review of the most prominent techno-solutionist creation in terms of food. It manifests itself into a desktop film and an essay, alongside an archive of images, articles, videos and more, which together deconstruct the culture of future food, born in the valley of technological quick-fixes.
</p> </p>
@ -43,14 +42,14 @@ Copyleft: This is a free work, you can copy, distribute, and modify it under the
<div id='about-student'> <div id='about-student'>
<p> Alice Strete (1991, RO) is a researcher and, otherwise, person interested in the intricate relationship between humans and the technologies they surround themselves with. Her work is currently focusing on food. </p> <p> Alice Strete (1991, RO) is a researcher and, otherwise, person interested in the intricate relationship between humans and the technologies they surround themselves with. Her work is currently focusing on food. </p>
</div> </div>
<span id='getback'> go back </span> <a id='getback' class='int'> go back </a>
</object>
</div> </div>
</div> </div>
</a> </a>
</div> </div>
</header> </header>
</div>
</p></div>
<section id='main'> <section id='main'>
<div id="galleries"> <div id="galleries">
<div id='work'> <div id='work'>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 194 KiB

After

Width:  |  Height:  |  Size: 168 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 188 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 218 KiB

After

Width:  |  Height:  |  Size: 190 KiB

@ -4,12 +4,12 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<style type="text/css"> <style type="text/css">
a { /*a {
color: black !important; color: black !important;
} }
#inner-hleft-text{ #inner-hleft-text{
height:auto !important; height:auto !important;*/
} }
@ -25,16 +25,13 @@
<div id='wrapper'></div> <div id='wrapper'></div>
<a href='../' id='homebttn' class='ext'> << home</a> <a href='../' id='homebttn' class='ext'> << home</a>
<header> <header>
<h1 id='project-title'>Let's Amplify Unspeakable Things <a href='#hleft-text' class='show'></a><br><a href='../' class='show' id='home'><< </a></h1> <h1 id='project-title'>Let's Amplify Unspeakable Things <a href='#hleft-text' class='show'></a></h1>
<h2 id='student-name'><a href='http://pzwiki.wdka.nl/mediadesign/User:Angeliki' target='_blank' class='ext' id='student-page'>Angeliki Diakrousi</a></h2>
<div id='sub'>
<h2 id='student-name'><a href='http://www.w-i-t-m.net/' target='_blank' class='ext' id='student-page'>Angeliki Diakrousi</a></h2>
</div>
<div id='hleft-text'> <div id='hleft-text'>
<a href=# id='back'> <a href=# id='back'>
<div id='inner-hleft-text'> <div id='inner-hleft-text'>
<div id='ihtp'> <div id='ihtp'>
<object>
<div id='about-project'> <div id='about-project'>
<p>'Let's Amplify Unspeakable Things' is an online platform of exploration and research, regarding female voices in public and their amplification. It creates a space for excluded voices to be explored, that questions the establishment of authoritative voices — which construct exclusive speech platforms and binaries, along the assumption that voices have to be rational in public dialogues. It includes a set of podcasts that revisit and overlay an archive of audio recordings, produced in situated workshops and soundwalks, and media sources from a body of research. The project is based on the concept that amplification can provide presence through repetition and multiplication, as the structure of the workshops and the website reveals. The project itself is a process of feedback and iteration of actions, throughout a period of four months, situated around the space of <a href="http://www.leeszaalrotterdamwest.nl/">Leeszaal</a> and <a href="https://hub.xpub.nl/">hub.xpub.nl</a>.</p> <p>'Let's Amplify Unspeakable Things' is an online platform of exploration and research, regarding female voices in public and their amplification. It creates a space for excluded voices to be explored, that questions the establishment of authoritative voices — which construct exclusive speech platforms and binaries, along the assumption that voices have to be rational in public dialogues. It includes a set of podcasts that revisit and overlay an archive of audio recordings, produced in situated workshops and soundwalks, and media sources from a body of research. The project is based on the concept that amplification can provide presence through repetition and multiplication, as the structure of the workshops and the website reveals. The project itself is a process of feedback and iteration of actions, throughout a period of four months, situated around the space of <a href="http://www.leeszaalrotterdamwest.nl/">Leeszaal</a> and <a href="https://hub.xpub.nl/">hub.xpub.nl</a>.</p>
</div> </div>
@ -43,19 +40,19 @@
<p>Angeliki Diakrousi (n, 1990, GR) is an artist and researcher, and currently an Onassis Scholar. Her research focuses on politics and structures of art, architecture, technology and their infusion into public spheres.<br> <p>Angeliki Diakrousi (n, 1990, GR) is an artist and researcher, and currently an Onassis Scholar. Her research focuses on politics and structures of art, architecture, technology and their infusion into public spheres.<br>
</p> </p>
</div> </div>
<span id='getback'> go back </span> <a id='getback' class='int'> go back </a>
</object>
</div> </div>
</div> </div>
</a> </a>
</div> </div>
</header> </header>
</div>
<section id='main'> <section id='main'>
<div id="galleries"> <div id="galleries">
<div id='work'> <div id='work'>
<h3 class='gal-title'>Work</h3> <h3 class='gal-title'>Work</h3>
<ul id='publist'> <ul id='publist'>
<li><a href='http://eaiaiaiaoi.w-i-t-m.net/' target="_blank" class='ext'>Project Website</a></li> <li><a href='https://hub.xpub.nl/eaiaiaiaoi/' target="_blank" class='ext'>Project Website</a></li>
<img src="img/meeting-20190530-leeszaal-1.jpg" class='workimg'/> <img src="img/meeting-20190530-leeszaal-1.jpg" class='workimg'/>
<img src="img/angeliki-catalogue-1.jpg" class='workimg'/> <img src="img/angeliki-catalogue-1.jpg" class='workimg'/>
<img src="img/gradproject-player-website-adiakrousi.jpg" class='workimg'/> <img src="img/gradproject-player-website-adiakrousi.jpg" class='workimg'/>
@ -66,9 +63,9 @@ Your browser does not support the video tag.
</video> </video>
<img align="top" src="img/vowels-20190329-finearts.jpg" class='workimg'/> <img align="top" src="img/vowels-20190329-finearts.jpg" class='workimg'/>
<li><a href="http://artlibre.org/licence/lal/en/" target="_blank" class='ext'>License</a></li> <li><a href="http://artlibre.org/licence/lal/en/" target="_blank" class='ext'>License</a></li>
[Angeliki Diakrousi, Let's Amplify Unspeakable Things, 2019. Rotterdam].<br> <p>[Angeliki Diakrousi, Let's Amplify Unspeakable Things, 2019. Rotterdam].<br>
Copyleft: This is a free work, you can copy, distribute, and modify it under the terms of the Free Art License<br> Copyleft: This is a free work, you can copy, distribute, and modify it under the terms of the Free Art License<br>
http://artlibre.org/licence/lal/en/ http://artlibre.org/licence/lal/en/</p>
</ul> </ul>
</div> </div>
<div id='publication'> <div id='publication'>

@ -1,3 +1,4 @@
@font-face { @font-face {
font-family: inconsolata; font-family: inconsolata;
src: url(fonts/inconsolata.ttf); src: url(fonts/inconsolata.ttf);
@ -405,7 +406,9 @@ a{
@media all and (min-width: 600px) and (max-width: 720px){ @media all and (min-width: 600px) and (max-width: 720px){
/*header*/ /*header*/
#wrapper{
background-color: blue;
}
#ihtp{ #ihtp{
font-size:calc(9px + 1.7vh); font-size:calc(9px + 1.7vh);
line-height:130%; line-height:130%;

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 284 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 486 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 687 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 705 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 600 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 492 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 628 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 206 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 207 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 717 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 828 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 306 KiB

@ -0,0 +1,89 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="date" content="JULY 2020">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="../css/pages.css">
<link rel="stylesheet" href="style.css">
<meta name="description" content="XPUB">
<title>PARALLEL COLONIALISM</title>
</head>
<body>
<div id="bg-left"></div>
<div id="bg-right"></div>
<!-- XPUB SYNTAX -->
<a href='../' id='homebttn' class='ext mytypestyle' > << home</a>
<header>
<h1 id='project-title'>Parallel Colonialism</h1>
<h2 id='student-name' class="mytypestyle" ><a href="https://www.bohyewoo.com">Bohye Woo</a></h2>
<div id='hleft-text'>
<div id='inner-hleft-text'>
<div id='ihtp'>
<object>
<div id='about-project'>
<p><i>Parallel Colonialism</i> is a digital text archiving tool that offers a comparative reading application between historical and contemporary documents. It allows users to experience how regulatory terms play in colonialism by offering two types of legal documents: Terms of Services and historical colonial treaties.</p>
<p>By selecting one of each document, a parallel reading platform is enabled, in which you can comparatively label, highlight and analyze a range of specific terms. This helps you to analyze on how these documents operate similar ways in colonialism, and it opens up discussions in finding a colonial resemblance by mapping out the whole contractual landscape of terms used in each document. </p>
----------------
<p>Parallel Colonialism (2020) has been produced in the context of the graduation research of Bohye Woo from the Experimental Publishing (XPUB) Master course at the Piet Zwart Institute, Willem de Kooning Academy, Rotterdam University of Applied Sciences.</p>
<p>Licence: This is a free work. You can copy, distribute, and modify it under the terms of the Free Art License (http://artlibre.org/licence/lal/en/)</p>
----------------
</div>
<div id='about-student'>
<p> Bio will be added soon. </p>
</div>
</object>
</div>
</div>
</div>
</header>
<section id='main'>
<div id="galleries">
<div id='work'>
<h3 class='gal-title mytypestyle'>Work</h3>
<ul id='publist'>
<li><a href='https://hub.xpub.nl/termsofservice/' target="_blank" class='ext mytypestyle'>↝ Project Website</a></li>
</ul>
<img src="img/parallel-colonialism-01.png" class='workimg'/>
<img src="img/parallel-colonialism-02.png" class='workimg'/>
<img src="img/parallel-colonialism-06.png" class='workimg'/>
<img src="img/parallel-colonialism-10.png" class='workimg'/>
<img src="img/parallel-colonialism-12.png" class='workimg'/>
<img src="img/parallel-colonialism-13.png" class='workimg'/>
</div>
<div id='publication'>
<h3 class="gal-title mytypestyle">Publication</h3>
<ul id='publist'>
<li><a href='pdf/bohye-woo-thesis-2020.pdf' target="_blank" class='ext mytypestyle'>↝ Thesis (PDF)</a></li>
</ul>
</div>
</div>
</section>
</body>
</html>

Binary file not shown.

@ -0,0 +1,187 @@
@font-face {
font-family: "Belgika";
src: url("fonts/belgika-5th-webfont.ttf");
font-weight: 5;
font-style: normal;}
@font-face {
font-family: "Belgika";
src: url("fonts/belgika-8th-webfont.ttf");
font-weight: 8;
font-style: normal;}
@font-face {
font-family: "Belgika";
src: url("fonts/belgika-16th-webfont.ttf");
font-weight: 16;
font-style: italic;}
@font-face {
font-family: "Belgika";
src: url("fonts/belgika-40th-webfont.ttf");
font-weight: 40;
font-style: normal;
}
body{
background: none;
}
a{
color: white;
text-decoration: none;
display: inline;
border-bottom: 0px;
background: none;
}
.ext{
background: none;
}
a:hover{
color: grey;
text-decoration: none;
cursor: pointer;
}
a:visited{
text-decoration: none;
}
/* HEADER */
aside{
position: fixed;
top: 5px;
width: calc(100vw - 15px);
font-size: 12px;
font-family: "Belgika", Arial, Helvetica, sans-serif;
font-weight: 5;
font-style: normal;
z-index: 999;
}
.marquee {
position: relative;
width: calc(100vw - 15px);
max-width: 100%;
overflow-x: hidden;
height: 50px;
}
.track {
position: absolute;
white-space: nowrap;
will-change: transform;
animation: marquee 20s linear infinite;
}
@keyframes marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* HOME BUTTON */
.homebutton{
background-color: inherit;
text-align:right;
color:black;
position:absolute;
top:0;
right:0;
margin-right:2%;
margin-top:25px;
padding:0.3% 0 0 0.3%;
font-size:0.6em;
z-index:999;
}
/* TYPE STYLE */
#project-title{
font-family: "Belgika", Arial, Helvetica, sans-serif;
font-weight: 5;
font-style: normal;
color: white;
}
#about-student{
font-family: helvetica;
font-style: italic;
color: #3c3c3c;
font-weight: 16;
font-size: calc(8px + 0.3vw);
padding-top: 10px;
color: white;
}
#about-project {
color: white;
}
#inner-hleft-text {
color: white;
}
.mytypestyle{
font-family: "Belgika", Arial, Helvetica, sans-serif;
font-weight: 4;
color: black;
}
#inner-hleft-text{
overflow-y: scroll;
font-family: helvetica;
font-weight: 16;
font-size: calc(11px + 0.3vw);
color: white;
}
li{
list-style: none;
transform-origin: 0 0;
color: white;
}
#inner-hleft-text::-webkit-scrollbar {
display: none;
}
.workimg{
padding: 0 0 0 0;
}
#bg-left{
position: fixed;
left: 0;
top: 0;
display: inline-block;
width: 25vw;
height: 100vh;
background-color: black;
}
#bg-right{
position: fixed;
left: 25vw;
top: 0;
display: inline-block;
height: 100vh;
width: 75vw;
background-color: white;
}
p {
line-height: 1.5em;
}

@ -14,15 +14,14 @@
<div id='wrapper'></div> <div id='wrapper'></div>
<a href='../' id='homebttn' class='ext'> << home</a> <a href='../' id='homebttn' class='ext'> << home</a>
<header> <header>
<h1 id='project-title'>Referendum Medialogs <a href='#hleft-text' class='show'></a><br><a href='../' class='show' id='home'><< </a></h1> <h1 id='project-title'>Referendum Medialogs <a href='#hleft-text' class='show'></a></h1>
<div id='sub'>
<h2 id='student-name'>Franc González</h2> <h2 id='student-name'>Franc González</h2>
</div>
<div id='hleft-text'> <div id='hleft-text'>
<a href=# id='back'> <a href=# id='back'>
<div id='inner-hleft-text'> <div id='inner-hleft-text'>
<div id='ihtp'> <div id='ihtp'>
<object>
<div id='about-project'> <div id='about-project'>
<p>Referendum Medialogs (2018) is a work in progress, mapping a journey of the events before, during and after the referendum, showing a series of conflicts leading to both blocking and distributing practices, in a context strongly characterized by nonstop overloads of inaccurate information. At the same time, Referendum Medialogs digs into the issue of disinformation and media noise, using open source revision control software to track and log article revisionism.</p> <p>Referendum Medialogs (2018) is a work in progress, mapping a journey of the events before, during and after the referendum, showing a series of conflicts leading to both blocking and distributing practices, in a context strongly characterized by nonstop overloads of inaccurate information. At the same time, Referendum Medialogs digs into the issue of disinformation and media noise, using open source revision control software to track and log article revisionism.</p>
</div> </div>
@ -30,7 +29,8 @@
<div id='about-student'> <div id='about-student'>
<p>Franc is a visual designer from Barcelona. His work intersects printed matter digging into the political side of software and design as part of his studies, in an ongoing quest to better understand the radical implications of digital tools to society and individuals in general. This has led to his current research in the use of revision control software applied to journalism, in the dramatic context surrounding the Catalan referendum.</p> <p>Franc is a visual designer from Barcelona. His work intersects printed matter digging into the political side of software and design as part of his studies, in an ongoing quest to better understand the radical implications of digital tools to society and individuals in general. This has led to his current research in the use of revision control software applied to journalism, in the dramatic context surrounding the Catalan referendum.</p>
</div> </div>
<span id='getback'> go back </span> <a id='getback' class='int'> go back </a>
</object>
</div> </div>
</div> </div>
</a> </a>

Binary file not shown.

After

Width:  |  Height:  |  Size: 335 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 233 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 535 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 844 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 164 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 185 KiB

@ -0,0 +1,84 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Syster Papyri Magicae</title>
<meta name="description" content="XPUB">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/pages.css">
<style>
@font-face {
font-family: BLKCHCRY;
src: url("fonts/BLKCHCRY.TTF");
}
#project-title {
font-family: BLKCHCRY!important;
}
h3 {
font-family: BLKCHCRY;
}
</style>
</head>
<body>
<div id='wrapper' style="background: linear-gradient(90deg, rgba(59,232,255,0.79) 0%, rgba(59,232,255,0.55) 26%, rgba(191,89,255,0.91) 100%);"></div>
<a href='../' id='homebttn' class='ext'> << home</a>
<header>
<h1 id='project-title'>Syster Papyri Magicae <a href='#hleft-text' class='show'></a></h1>
<h2 id='student-name'>Artemis Gryllaki</h2>
<div id='hleft-text'>
<a href=# id='back'>
<div id='inner-hleft-text'>
<div id='ihtp'>
<object>
<div id='about-project'>
<p><i>Syster Papyri Magicae</i> is a project that unfolds the phenomenon of gender exclusions in male-dominated tech environments, aiming to document, discuss and activate a variety of feminist practices that respond to this issue.
</p>
<p>
The Syster Papyri Magicae website enables a playful navigation to a collection of stories and practices that are gathered in a growing, editable Wiki. Aided by the early web magic of hyperlinks, one may discover documentation of sexist incidents in tech, feminist hacker projects, wiki pages to write their versions of stories, or even dead-ends. A fictional context of sorcery provides a game-like atmosphere but is also tactically used. On the one hand, the witch as an excluded figure symbolises female strength, that challenges patriarchal systems. On the other hand, witchcraft is a theme ever-present in the geek culture, proposing that technology has a source of magical power, that one can harness for their own sense of agency and empowerment.</p>
<p>
Strolling through the website, the visitor encounters several quests, that challenge them to choose what they would do in situations of exclusion. This method helps them realise how hard it is, to take action under these circumstances. It is also a way to open discussions on diverse feminist approaches, learn about feminist hacker practices, and if interested, become a contributor. </p>
<p>
<i>Syster Papyri Magicae</i> (2020) is published under the terms of the Peer Production License (PPL). The Peer Production License is an example of CopyFair licensing, in which only other commoners, collectives and nonprofits can share and re-use the material in question.
</p>
</div>
<hr align='left'>
<div id='about-student'>
<p> Artemis Gryllaki is a researcher and media artist, with a background in architecture and music. Her current work focuses on the urgencies and potentials of autonomous networks and feminist communities. </p>
</div>
<a id='getback' class='int'> go back </a>
</object>
</div>
</div>
</a>
</div>
</header>
<section id='main'>
<div id="galleries">
<div id='work'>
<h3 class='gal-title'>Work</h3>
<ul id='publist'>
<li><a href='https://hub.xpub.nl/systers/' target="_blank" class='ext'>Project Website</a></li>
<li><a href='https://hub.xpub.nl/systers/mediawiki/' target="_blank" class='ext'>Project Wiki</a></li>
</ul>
<img src="img/homepage-systers.png" class='workimg'/>
<img src="img/etc-papyrus.png" class='workimg'/>
<img src="img/wiki-collection.png" class='workimg'/>
<img src="img/wiki-radio-drama.png" class='workimg'/>
<img src="img/varia-hack-meetings.png" class='workimg'/>
<img src="img/discuss-feminism.png" class='workimg'/>
</div>
<div id='publication'>
<h3 class='gal-title'>Publication</h3>
<ul id='publist'>
<li><a href='pdf/ArtemisGryllaki-Thesis.pdf' target="_blank" class='ext'>Thesis (PDF) </a></li>
</ul>
</div>
</div>
</section>
</div>
</body>
</html>

Binary file not shown.

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 235 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 121 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 566 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 815 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 470 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 633 KiB

@ -0,0 +1,96 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="date" content="JULY 2020">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="../css/pages.css">
<link rel="stylesheet" href="style.css">
<link rel="icon" href="img/beau.png">
<meta name="description" content="XPUB">
<title>TACTICAL WATERMARKS</title>
</head>
<body>
<div id="indexyellowleft"></div>
<div id="indexyellowright"></div>
<aside>
<div class="leftmarquee">
<div class="marquee">
<div class="track">
<div class="content"><a class="head" href="https://hub.xpub.nl/watermark/">TACTICAL WATERMARKS TACTICAL WATERMARKS TACTICAL WATERMARKS TACTICAL WATERMARKS TACTICAL WATERMARKS TACTICAL WATERMARKS TACTICAL WATERMARKS TACTICAL WATERMARKS TACTICAL WATERMARKS TACTICAL WATERMARKS TACTICAL WATERMARKS TACTICAL WATERMARKS TACTICAL WATERMARKS TACTICAL WATERMARKS TACTICAL WATERMARKS TACTICAL WATERMARKS TACTICAL WATERMARKS TACTICAL WATERMARKS TACTICAL WATERMARKS TACTICAL WATERMARKS</a></div>
</div>
</div>
</div>
</aside>
<!-- XPUB SYNTAX -->
<a href='https://project.xpub.nl/' class='homebutton'> ↜ HOME </a>
<header>
<h1 id='project-title'>Tactical Watermarks</h1>
<h2 id='student-name' class="mytypestyle"><a href="https://pedrosacouto.com">Pedro Sá Couto</a></h2>
<div id='hleft-text'>
<div id='inner-hleft-text'>
<div id='ihtp'>
<object>
<div id='about-project'>
<p><i>Tactical Watermarks</i> is an online republishing platform that exists in both the clear and <i>dark</i> web. I actively make use of digital watermarks as a means to explore topics such as anonymity, paywalls, archives, and provenance. While the primary intention of analogue watermarks was to leave traces of authenticity, marks of quality or even aesthetic enhancements, digital watermarks are being used as a way to create accountability for users. Through this platform, I describe and document ways of living within and resist a culture of surveillance in the realm of publishing. </p>
<p>I am motivated by all the invisible individuals behind extra-legal publishing platforms, from curators, the ones who host, upload and even download material. Through the act of watermarking, I embed layers of information often dissolved within the processes of sharing texts. I experiment on how the process of adding stains can be twisted and revived. Stains are what I call user patches or marks that are difficult to remove and that do not play an active role in archives. </p>
<p>In this platform, users can upload and request different titles. While talking with members from the Library Genesis forum, I understood the need to create a tool that allows people to share watermarked pdfs in a safe way. My platform is NOT a library, and it is also NOT an archive. I don't keep the files or intend to archive them. What I open is a space to de-watermark files, and append new anonymous watermarks with the technical and personal regards around sharing specific texts. In the end, these stories will circulate alongside the main narrative. This is an automated republishing stream that spreads these new and unique files to Library Genesis. </p>
<p><i>Tactical Watermarks</i> (2020). License — Copyleft: This is a free work. You can copy, distribute, and modify it underthe terms of the Free Art License http://artlibre.org/licence/lal/en/</p>
</div>
<div id='about-student'>
<p> Pedro Sá Couto is a media researcher, hacker and graphic designer from Porto, Portugal. His research focuses on bypassing surveillance in the realm of publishing, while questioning authorship, protecting users identity and revealing hidden processes required to subvert surveillance in physical and digital media.</p>
</div>
</object>
</div>
</div>
</div>
</header>
<section id='main'>
<div id="galleries">
<div id='work'>
<h3 class='gal-title mytypestyle'>Work</h3>
<ul id='publist'>
<li><a href='https://hub.xpub.nl/watermark/' target="_blank" class='ext mytypestyle'>↝ Project Website</a></li>
</ul>
<img src="img/psc01.jpg" class='workimg'/>
<img src="img/psc02.jpg" class='workimg'/>
<img src="img/psc03.jpg" class='workimg'/>
<img src="img/psc04.jpg" class='workimg'/>
<img src="img/psc05.jpg" class='workimg'/>
<img src="img/psc06.jpg" class='workimg'/>
</div>
<div id='publication'>
<h3 class="gal-title mytypestyle">Publication</h3>
<ul id='publist'>
<li><a href='pdf/Thesis_Master_PSC_HD.pdf' target="_blank" class='ext mytypestyle'>↝ Thesis (PDF)</a></li>
</ul>
</div>
</div>
</section>
</body>
</html>

@ -0,0 +1,177 @@
@font-face {
font-family: "Lyon";
src: url("fonts/LyonJeanTrue.ttf");
font-weight: 300;
font-style: normal;}
@font-face {
font-family: "Favorit";
src: url("fonts/Favorit_Regular.ttf");
font-weight: 300;
font-style: normal;}
@font-face {
font-family: "Favorit";
src: url("fonts/Favorit_Regular-Italic.ttf");
font-weight: 300;
font-style: italic;}
@font-face {
font-family: "Favorit";
src: url("fonts/Favorit_Medium.ttf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "Favorit";
src: url("fonts/Favorit_Medium-Italic.ttf");
font-weight: 400;
font-style: italic;}
body{
background: none;
}
a{
color: #000;
text-decoration: none;
display: inline;
border-bottom: 0px;
background: none;
}
.ext{
background: none;
}
a:hover{
color: #c3c3c3;
text-decoration: none;
cursor: pointer;
}
a:visited{
text-decoration: none;
}
/* HEADER */
aside{
position: fixed;
top: 5px;
width: calc(100vw - 15px);
font-size: 12px;
font-family: "Lyon", Arial, Helvetica, sans-serif;
font-weight: 300;
font-style: normal;
z-index: 999;
}
.marquee {
position: relative;
width: calc(100vw - 15px);
max-width: 100%;
overflow-x: hidden;
height: 50px;
}
.track {
position: absolute;
white-space: nowrap;
will-change: transform;
animation: marquee 20s linear infinite;
}
@keyframes marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* HOME BUTTON */
.homebutton{
background-color: inherit;
text-align:right;
color:black;
position:absolute;
top:0;
right:0;
margin-right:2%;
margin-top:25px;
padding:0.3% 0 0 0.3%;
font-size:0.6em;
z-index:999;
}
/* TYPE STYLE */
#project-title{
font-family: "Lyon", Arial, Helvetica, sans-serif;
font-weight: 300;
font-style: normal;
}
#about-student{
font-family: "Favorit", Arial, Helvetica, sans-serif;
font-style: italic;
color: #3c3c3c;
font-weight: 300;
font-size: calc(8px + 0.3vw);
padding-top: 10px;
}
.mytypestyle{
font-family: "Favorit", Arial, Helvetica, sans-serif;
font-weight: 300;
transform: scaleX(0.75);
transform-origin: 0 0;
text-transform: uppercase;
}
#inner-hleft-text{
overflow-y: scroll;
font-family: "Favorit", Arial, Helvetica, sans-serif;
font-weight: 300;
font-size: calc(12px + 0.3vw);
}
li{
list-style: none;
transform: scaleX(0.75);
transform-origin: 0 0;
}
#inner-hleft-text::-webkit-scrollbar {
display: none;
}
/* TWO BACKGROUND COLORS */
#indexyellowleft{
position: fixed;
left: 0;
top: 0;
display: inline-block;
width: 25vw;
height: 100vh;
background-color: white;
}
#indexyellowright{
position: fixed;
left: 25vw;
top: 0;
display: inline-block;
height: 100vh;
width: 75vw;
background-color: #cfff00;
}
img{
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 8px 0 rgba(0, 0, 0, 0.19);
}
.workimg{
padding: 0 0 0 0;
}

@ -0,0 +1,71 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Project Title</title>
<meta name="description" content="XPUB">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/pages.css">
</head>
<body>
<div id='wrapper'></div>
<a href='../' id='homebttn' class='ext'> << home</a>
<header>
<h1 id='project-title'>Project Title <a href='#hleft-text' class='show'></a></h1>
<h2 id='student-name'>Sudent name</h2>
<div id='hleft-text'>
<a href=# id='back'>
<div id='inner-hleft-text'>
<div id='ihtp'>
<object>
<div id='about-project'>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit ligula a aenean ultricies, montes venenatis sapien sodales ac dictumst enim porttitor curae porta facilisi massa, consequat sollicitudin libero bibendum in neque suscipit nulla quisque taciti. Hendrerit mauris himenaeos proin sem habitasse per ut est enim elementum eget nisl, pretium id ornare torquent lectus curae interdum conubia vivamus auctor. </p>
</div>
<hr align='left'>
<div id='about-student'>
<p>Bibendum maecenas cum faucibus per tincidunt metus ac, diam aliquam aliquet sociosqu parturient a mollis est, felis sem hendrerit rhoncus nisl urna. Ultricies ut risus class ridiculus vestibulum.</p>
</div>
<a id='getback' class='int'> go back </a>
</object>
</div>
</div>
</a>
</div>
</header>
<section id='main'>
<div id="galleries">
<div id='work'>
<h3 class='gal-title'>Work</h3>
<ul id='publist'>
<li><a href='https://yourdomain.org' target="_blank" class='ext'>Project Website</a></li>
</ul>
<img src="img/img1.jpg" class='workimg'/>
<img src="img/img2.jpg" class='workimg'/>
<img src="img/img3.jpg" class='workimg'/>
<img src="img/img4.jpg" class='workimg'/>
</div>
<div id='publication'>
<h3 class='gal-title'>Publication</h3>
<ul id='publist'>
<li><a href='pdf/thesis.pdf' target="_blank" class='ext'>Publication PDF</a></li>
</ul>
<img src="img/pub1.jpg" class='workimg'/>
<img src="img/pub2.jpg" class='workimg'/>
<img src="img/pub3.jpg" class='workimg'/>
<img src="img/pub4.jpg" class='workimg'/>
</div>
<div id='gradshow'>
<h3 class='gal-title'>Graduation Show</h3>
<img src="img/gradshow1.jpg" class='workimg'/>
<img src="img/gradshow2.jpg" class='workimg'/>
<img src="img/gradshow3.jpg" class='workimg'/>
<img src="img/gradshow4.jpg" class='workimg'/>
</div>
</div>
</section>
</div>
</body>
</html>

Binary file not shown.

@ -14,15 +14,14 @@
<div id='wrapper'></div> <div id='wrapper'></div>
<a href='../' id='homebttn' class='ext'> << home</a> <a href='../' id='homebttn' class='ext'> << home</a>
<header> <header>
<h1 id='project-title'>Unlearning the Rules of Collectivity <a href='#hleft-text' class='show'></a><br><a href='../' class='show' id='home'><< </a></h1> <h1 id='project-title'>Unlearning the Rules of Collectivity <a href='#hleft-text' class='show'></a></h1>
<div id='sub'>
<h2 id='student-name'><a href='https://giuliadegiovanelli.com' target='_blank' class='ext' id='student-page'>Giulia de Giovanelli</a></h2> <h2 id='student-name'><a href='https://giuliadegiovanelli.com' target='_blank' class='ext' id='student-page'>Giulia de Giovanelli</a></h2>
</div>
<div id='hleft-text'> <div id='hleft-text'>
<a href=# id='back'> <a href=# id='back'>
<div id='inner-hleft-text'> <div id='inner-hleft-text'>
<div id='ihtp'> <div id='ihtp'>
<object>
<div id='about-project'> <div id='about-project'>
<p>Unlearning the Rules of Collectivity (2018) is a research project that studies practices of collaboration for art and education models and existent communities. In the thesis, there is an interest in looking at the meaning of community and cooperation, and in rethinking these concepts in different terms. My proposal is to introduce different values that would aim to create a balance between individuals and their natural competitive forces, and the collective, with a need for community and cooperation. The research explores a variety of possibilities and values which calls for a need for balance.</p> <p>Unlearning the Rules of Collectivity (2018) is a research project that studies practices of collaboration for art and education models and existent communities. In the thesis, there is an interest in looking at the meaning of community and cooperation, and in rethinking these concepts in different terms. My proposal is to introduce different values that would aim to create a balance between individuals and their natural competitive forces, and the collective, with a need for community and cooperation. The research explores a variety of possibilities and values which calls for a need for balance.</p>
</div> </div>
@ -31,7 +30,8 @@
<p>Giulia de Giovanelli (Trento, 1992), is an Italian designer and researcher. Her work explores alternative models of collaboration within design and publishing fields. Giulia is interested in dialogical structures for sharing and making and counter-practices for the organization of communal life. An important part of her methodology is the use of technology as a medium for physical interaction, participation and performance. The starting point of her work is a political and sociological research which often grow from collaborating with existing communities.<br> <p>Giulia de Giovanelli (Trento, 1992), is an Italian designer and researcher. Her work explores alternative models of collaboration within design and publishing fields. Giulia is interested in dialogical structures for sharing and making and counter-practices for the organization of communal life. An important part of her methodology is the use of technology as a medium for physical interaction, participation and performance. The starting point of her work is a political and sociological research which often grow from collaborating with existing communities.<br>
</p> </p>
</div> </div>
<span id='getback'> go back </span> <a id='getback' class='int'> go back </a>
</object>
</div> </div>
</div> </div>
</a> </a>

@ -14,14 +14,13 @@
<div id='wrapper'></div> <div id='wrapper'></div>
<a href='../' id='homebttn' class='ext'> << home</a> <a href='../' id='homebttn' class='ext'> << home</a>
<header> <header>
<h1 id='project-title'>Unpublishing <a href='#hleft-text' class='show'></a><br><a href='../' class='show' id='home'><< </a></h1> <h1 id='project-title'>Unpublishing <a href='#hleft-text' class='show'></a></h1>
<div id='sub'>
<h2 id='student-name'>Nadine Rotem-Stibbe</h2> <h2 id='student-name'>Nadine Rotem-Stibbe</h2>
</div>
<div id='hleft-text'> <div id='hleft-text'>
<a href=# id='back'> <a href=# id='back'>
<div id='inner-hleft-text'> <div id='inner-hleft-text'>
<div id='ihtp'> <div id='ihtp'>
<object>
<div id='about-project'> <div id='about-project'>
<p>Nadine works diligently, though in all likelihood her work will be forgotten. Surely, that is a basic right. However, those interested in her or her work, might still find her by typing a particular combination of letters and words into a search engine. There is little doubt that these titbits will instantly appear; further undesired information can be seen when clicking on next page until something interesting and satisfying might show up. Given such an eccentric name, finding the appropriate results should be quite easy.</p> <p>Nadine works diligently, though in all likelihood her work will be forgotten. Surely, that is a basic right. However, those interested in her or her work, might still find her by typing a particular combination of letters and words into a search engine. There is little doubt that these titbits will instantly appear; further undesired information can be seen when clicking on next page until something interesting and satisfying might show up. Given such an eccentric name, finding the appropriate results should be quite easy.</p>
</div> </div>
@ -29,7 +28,8 @@
<div id='about-student'> <div id='about-student'>
<p>Nadine Rotem-Stibbe [EU] (1990 unknown) beloved daughter, cherished granddaughter, ruthless sister and fickle friend. She is forever seeking to attain the role of an independent artist and designer, mistakingly thinking she could make the world a better place. She resides in our hearts, occupies our mind and will reluctantly live forever on social media.</p> <p>Nadine Rotem-Stibbe [EU] (1990 unknown) beloved daughter, cherished granddaughter, ruthless sister and fickle friend. She is forever seeking to attain the role of an independent artist and designer, mistakingly thinking she could make the world a better place. She resides in our hearts, occupies our mind and will reluctantly live forever on social media.</p>
</div> </div>
<span id='getback'> go back </span> <a id='getback' class='int'> go back </a>
</object>
</div> </div>
</div> </div>
</a> </a>

Loading…
Cancel
Save