master
onebigear 4 years ago
commit cda7de7ae7

@ -7,7 +7,7 @@ by Gitea.
https://git.xpub.nl/XPUB/project.xpub.nl
To change the content of this folder, only do it via cloning the repos
To change the content of this folder, only do it via cloning the repos
and pushing to it. The changes will be immediately live on
https://project.xpub.nl
@ -26,47 +26,55 @@ need to present, namely:
1. the page must have a bio + link to personal site/domain (if relevant)
2. the page must have a description of the project + link(s) to the
2. the page must have a description of the project + link(s) to the
project + link(s) to relevant wiki pages (if useful) + link(s) to git repos
(if any) + year of the work
3. the page must have visual documentation of the work (screenshots,
3. the page must have visual documentation of the work (screenshots,
photos, drawing, generated stuff, whatever is relevant and illustrative)
4. the page must have link to final PDF + visual documentation of the
printed version (I don't mean the thesis but the outcome of the book
4. the page must have link to final PDF + visual documentation of the
printed version (I don't mean the thesis but the outcome of the book
sprint and final form of the published thesis) + link from home
5. the page must have visual documentation of the work during the grad
5. the page must have visual documentation of the work during the grad
show + link from home
6. License/copyright statement. You're free to decide how you want your
work, from its documentation to its assets and core components, to be
distributed and reused, if you don't specify anything it will default to
standard copyright, it's always nice and useful to be explicit about
your position (whatever this can be!) in that regard, and regardless of
what alternative you choose (or not): default copyright, full fledged
free culture license, situationist style statement, underground press
6. License/copyright statement. You're free to decide how you want your
work, from its documentation to its assets and core components, to be
distributed and reused, if you don't specify anything it will default to
standard copyright, it's always nice and useful to be explicit about
your position (whatever this can be!) in that regard, and regardless of
what alternative you choose (or not): default copyright, full fledged
free culture license, situationist style statement, underground press
copywrong trolling, anti-copyright notice, etc.
Also from a technical POV, make sure that:
- you follow the following URL structure:
- you follow the following URL structure:
https://project.xpub.nl/the-name-of-your-project/
no underscores, only dashes for space.
inside the the-name-of-your-project/ folder, your project page should
be named index.html, and from the main site only link to the folder
name, do not link to index.html directly. The web server will serve
inside the the-name-of-your-project/ folder, your project page should
be named index.html, and from the main site only link to the folder
name, do not link to index.html directly. The web server will serve
index.html automatically.
See how it's done for last year's projects
- do not load external resources, such as fonts or js scripts. Serve
*everything* from the project folder. Basically your project page
- do not load external resources, such as fonts or js scripts. Serve
*everything* from the project folder. Basically your project page
should work locally and offline.
How all this is presented is really up to you and there are no
restrictions (Joca for instance is using a functional chat bot
How all this is presented is really up to you and there are no
restrictions (Joca for instance is using a functional chat bot
interface).
You can always use one of the pages made by Lídia for last year's
projects as a starting point if you like.
You can always use the template for student projects Lídia
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>
<a href='../' id='homebttn' class='ext'> << home</a>
<header>
<h1 id='project-title'>Alt Reality Lexicon <a href='#hleft-text' class='show'></a><br><a href='../' class='show' id='home'><< </a></h1>
<div id='sub'>
<h1 id='project-title'>Alt Reality Lexicon <a href='#hleft-text' class='show'></a></h1>
<h2 id='student-name'>Pleun Gremmen</h2>
</div>
<div id='hleft-text'>
<a href=# id='back'>
<div id='inner-hleft-text'>
<div id='ihtp'>
<object>
<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>
</div>
@ -30,7 +28,8 @@
<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>
</div>
<span id='getback'> go back </span>
<a id='getback' class='int'> go back </a>
</object>
</div>
</div>
</a>

@ -14,15 +14,14 @@
<div id='wrapper'></div>
<a href='../' id='homebttn' class='ext'> << home</a>
<header>
<h1 id='project-title'>Anomolous Faces <a href='#hleft-text' class='show'></a><br><a href='../' class='show' id='home'><< </a></h1>
<div id='sub'>
<h1 id='project-title'>Anomolous Faces <a href='#hleft-text' class='show'></a></h1>
<h2 id='student-name'>Max Franklin</h2>
</div>
<div id='hleft-text'>
<a href=# id='back'>
<div id='inner-hleft-text'>
<div id='ihtp'>
<object>
<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>
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'>
<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>
<span id='getback'> go back </span>
<a id='getback' class='int'> go back </a>
</object>
</div>
</div>
</a>

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

@ -1,5 +1,6 @@
@import url("main.css");
body{
color:black;
}
@ -10,9 +11,27 @@ body{
/*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 {
font-size:calc(17px + 1.5vw);
font-size:1.4em;
line-height:135%;
margin-bottom:1%;
}
@ -20,7 +39,7 @@ body{
#student-name {
margin-bottom:0;
font-weight:normal;
font-size:calc(10px + 0.6vw);
font-size:0.8em;
}
a#student-page{color:black;}
@ -35,7 +54,6 @@ a#student-page{color:black;}
}
#ihtp{
margin-top:3%;
width:80%;
color:black;
@ -44,30 +62,21 @@ a#student-page{color:black;}
#about-student{
width:95%;
color:#2f2f2f;
font-size:calc(8px + 0.5vw);
line-height: 130%;
font-size:1em;
font-style:italic;
}
object{
padding-bottom:7%;
}
hr{
width:50%;
color:#ccc;
}
a.show{
font-size:calc(13px + 1.5vw);
}
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;
.show{
font-size:1em;
}
#project-link{
@ -80,7 +89,6 @@ a#home:hover{
section#main{
overflow:auto;
padding-left:1.5%;
}
#galleries{
@ -88,15 +96,16 @@ section#main{
}
.gal-title{
font-size:calc(12px + 0.7vw);
font-size:0.8em;
}
#publist {
line-height:155%;
line-height:80%;
}
#galleries a{
#galleries li, #galleries p{
color:black;
font-size:0.9em;;
}
.workimg{
@ -107,40 +116,30 @@ section#main{
@media all and (min-width: 600px) and (max-width: 720px){
#about-student{
font-size:calc(8px + 1.7vh);
line-height:130%;
#galleries{
padding-top:1%;
}
#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{
font-size:calc(7px + 1.5vh);
line-height:130%;
#galleries li, #galleries p{
font-size:0.8em;;
}
}
@media all and (max-width: 992px){
#homebttn{
display:none;
}
/*header*/
#sub{
width:30%;
@ -149,38 +148,32 @@ section#main{
}
#student-name{
text-align:right;
line-height:125%;
}
#ihtp, #about-student{
#ihtp, #about-student, #ihtp a{
color:white;
}
#getback {
padding-bottom:5%;
}
}
@media all and (min-width: 992px){
#homebttn{
background-color:white;
text-align:right;
color:black;
position:absolute;
top:0;
right:0;
margin-right:3%;
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{
width:74%;
left:27%;
@ -188,10 +181,26 @@ section#main{
}
#galleries{
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>
</ul>
<img src="img/EIGENGRAU_1.jpg" class='workimg'/>
</div>
<div id='publication'>
<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>
<h1 id='page-title'>XPUB <a href='#hleft-text' class='show'></a></h1>
<div id='sub'>
<a href="https://xpub.nl" target="_blank" class='ext'>xpub.nl</a>
<a href="http://pzwiki.wdka.nl/mediadesign/" target="_blank" class='ext'>XPUB wiki</a></div>
<span><a href="https://xpub.nl" target="_blank" class='ext'>xpub.nl</a></span>
<span><a href="http://pzwiki.wdka.nl/mediadesign/" target="_blank" class='ext'>XPUB wiki</a></span>
</div>
<div id='hleft-text'>
<a href=# id='back'>
<div id='inner-hleft-text'>
<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>
-> 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>
</a>
@ -35,38 +38,24 @@
<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='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 class='wrap'>
<!--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'>
<img src='img/ex1.jpg'/>
<img src='img/ex2.jpg'/>
<img src='img/ex3.jpg'/></div>
</div>
</div>
<div id='2020-att2'>
<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'>
<img src='img/ex1.jpg'/>
<img src='img/ex2.jpg'/>
@ -75,7 +64,7 @@
</div>
<div id='2020-att3'>
<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'>
<img src='img/ex1.jpg'/>
<img src='img/ex2.jpg'/>
@ -84,7 +73,7 @@
</div>
<div id='2020-att4'>
<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'>
<img src='img/ex1.jpg'/>
<img src='img/ex2.jpg'/>
@ -93,7 +82,7 @@
</div>
<div id='2020-att5'>
<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'>
<img src='img/ex1.jpg'/>
<img src='img/ex2.jpg'/>
@ -102,7 +91,7 @@
</div>
<div id='2020-att6'>
<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'>
<img src='img/ex1.jpg'/>
<img src='img/ex2.jpg'/>
@ -127,30 +116,8 @@
<img src='img/ex3.jpg'/></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 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 class='wrap'>
<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 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 class='wrap'>
<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 id='categories' class='row'>
<div class='col1'><h2>Year</h2></div>
<div class='col2'><h2>Attachments</h2></div>
<div class='col3'><h2>Students</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 id='content'>
<!-- ATTENTION 2020 STUDENTS !!! THIS IS YOUR AREA. UNCOMMENT IT WHEN YOU ARE READY TO PUBLISH.
<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='col2'>
<p><a href='#2020-att-video' class='int'>trailer.mp4</a></p>
</div>
<div class='attch'>
<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 class='col6'>
<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='subcl3'><a href='test.pdf' target="_blank" class='ext'>PDF</a> // <a href='#2020-att1' class='int'>IMG</a></p>
</div>
<div class='subrow'>
<p class='subcl1'>Student Name</p>
<p class='subcl2'><a href='empty.html' target="_blank" class='ext'>Project Name</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='subcl1'>Tancredi Di Giovanni</p>
<p class='subcl2'><a href='ilinx/' target="_blank" class='ext'>ilinx</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 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='subcl3'><a href='test.pdf' target="_blank" class='ext'>PDF</a> // <a href='#2020-att3' class='int'>IMG</a></p>
</div>
<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='subcl3'><a href='test.pdf' target="_blank" class='ext'>PDF</a> // <a href='#2020-att4' class='int'>IMG</a></p>
</div>
<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='subcl3'><a href='test.pdf' target="_blank" class='ext'>PDF</a> // <a href='#2020-att5' class='int'>IMG</a></p>
</div>
<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='subcl3'><a href='test.pdf' target="_blank" class='ext'>PDF</a> // <a href='#2020-att6' class='int'>IMG</a></p>
</div>
<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='subcl3'><a href='test.pdf' target="_blank" class='ext'>PDF</a> // <a href='#2020-att7' class='int'>IMG</a></p>
</div>
<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='subcl3'><a href='test.pdf' target="_blank" class='ext'>PDF</a> // <a href='#2020-att8' class='int'>IMG</a></p>
</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 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='col2'>
<p><a href="2019/postergenerator/">poster generator</a></p>
<p><a href="README19.NFO">README19.NFO</a></p>
<p><!--a href='#2019-att-video' class='int'>trailer.mp4</a--></p>
<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 class='col1'><img src='img/xpub_logo_2019.png' class='logo'/><p class='gradShow'>UPSETTING SETTINGS</p><p>July 2019</p>
<div class='attch'>
<p><a href="2019/postergenerator/" target='_blank' class="ext">📎 poster generator</a></p>
<p><a href="README19.NFO" class="int">📎 README19.NFO</a></p>
</div>
</div>
<div class='col6'>
<div class='subrow'>
@ -382,9 +329,10 @@
</div>
</div>
<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='col2'>
<p><a href='#2018-att-video' class='int'>gradshow.mp4</a></p>
<div class='col1'><img src='img/xpub_logo_2018.svg' class='logo'/><p class='gradShow'>Ex, XPUB</p><p>July 2018</p>
<div class='attch'>
<p><a href='https://media.xpub.nl/gradshow-2018-web.mp4' target='_blank' class='ext'>📎 gradshow.mp4</a></p>
</div>
</div>
<div class='col6'>
<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>
<a href='../' id='homebttn' class='ext'> << home </a>
<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>
</div>
<div id='hleft-text'>
<a href=# id='back'>
<div id='inner-hleft-text'>
<div id='ihtp'>
<object>
<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.
<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'>
<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>
<span id='getback'> go back </span>
<a id='getback' class='int'> go back </a>
</object>
</div>
</div>
</a>

@ -15,15 +15,14 @@
<div id='wrapper' style="background-color: #f1f1f1"></div>
<a href='../' id='homebttn' class='ext'> << home </a>
<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>
</div>
<div id='hleft-text'>
<a href=# id='back'>
<div id='inner-hleft-text'>
<div id='ihtp'>
<object>
<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>
@ -43,14 +42,14 @@ Copyleft: This is a free work, you can copy, distribute, and modify it under the
<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>
</div>
<span id='getback'> go back </span>
<a id='getback' class='int'> go back </a>
</object>
</div>
</div>
</a>
</div>
</header>
</p></div>
</div>
<section id='main'>
<div id="galleries">
<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>
<meta charset="utf-8">
<style type="text/css">
a {
/*a {
color: black !important;
}
#inner-hleft-text{
height:auto !important;
height:auto !important;*/
}
@ -25,16 +25,13 @@
<div id='wrapper'></div>
<a href='../' id='homebttn' class='ext'> << home</a>
<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>
<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>
<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='hleft-text'>
<a href=# id='back'>
<div id='inner-hleft-text'>
<div id='ihtp'>
<object>
<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>
</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>
</div>
<span id='getback'> go back </span>
<a id='getback' class='int'> go back </a>
</object>
</div>
</div>
</a>
</div>
</header>
</div>
<section id='main'>
<div id="galleries">
<div id='work'>
<h3 class='gal-title'>Work</h3>
<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/angeliki-catalogue-1.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>
<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>
[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>
http://artlibre.org/licence/lal/en/
http://artlibre.org/licence/lal/en/</p>
</ul>
</div>
<div id='publication'>
@ -97,4 +94,4 @@ http://artlibre.org/licence/lal/en/
</section>
</div>
</body>
</html>
</html>

@ -1,3 +1,4 @@
@font-face {
font-family: inconsolata;
src: url(fonts/inconsolata.ttf);
@ -405,7 +406,9 @@ a{
@media all and (min-width: 600px) and (max-width: 720px){
/*header*/
#wrapper{
background-color: blue;
}
#ihtp{
font-size:calc(9px + 1.7vh);
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>
<a href='../' id='homebttn' class='ext'> << home</a>
<header>
<h1 id='project-title'>Referendum Medialogs <a href='#hleft-text' class='show'></a><br><a href='../' class='show' id='home'><< </a></h1>
<div id='sub'>
<h1 id='project-title'>Referendum Medialogs <a href='#hleft-text' class='show'></a></h1>
<h2 id='student-name'>Franc González</h2>
</div>
<div id='hleft-text'>
<a href=# id='back'>
<div id='inner-hleft-text'>
<div id='ihtp'>
<object>
<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>
</div>
@ -30,7 +29,8 @@
<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>
</div>
<span id='getback'> go back </span>
<a id='getback' class='int'> go back </a>
</object>
</div>
</div>
</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>
<a href='../' id='homebttn' class='ext'> << home</a>
<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>
<div id='sub'>
<h1 id='project-title'>Unlearning the Rules of Collectivity <a href='#hleft-text' class='show'></a></h1>
<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'>
<a href=# id='back'>
<div id='inner-hleft-text'>
<div id='ihtp'>
<object>
<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>
</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>
</div>
<span id='getback'> go back </span>
<a id='getback' class='int'> go back </a>
</object>
</div>
</div>
</a>

@ -14,14 +14,13 @@
<div id='wrapper'></div>
<a href='../' id='homebttn' class='ext'> << home</a>
<header>
<h1 id='project-title'>Unpublishing <a href='#hleft-text' class='show'></a><br><a href='../' class='show' id='home'><< </a></h1>
<div id='sub'>
<h1 id='project-title'>Unpublishing <a href='#hleft-text' class='show'></a></h1>
<h2 id='student-name'>Nadine Rotem-Stibbe</h2>
</div>
<div id='hleft-text'>
<a href=# id='back'>
<div id='inner-hleft-text'>
<div id='ihtp'>
<object>
<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>
</div>
@ -29,7 +28,8 @@
<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>
</div>
<span id='getback'> go back </span>
<a id='getback' class='int'> go back </a>
</object>
</div>
</div>
</a>

Loading…
Cancel
Save