fresh 2020

master
lidia pereira 4 years ago
parent e632f18382
commit 769271a96d

@ -7,7 +7,7 @@ by Gitea.
https://git.xpub.nl/XPUB/project.xpub.nl 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 and pushing to it. The changes will be immediately live on
https://project.xpub.nl https://project.xpub.nl
@ -26,47 +26,48 @@ need to present, namely:
1. the page must have a bio + link to personal site/domain (if relevant) 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 project + link(s) to relevant wiki pages (if useful) + link(s) to git repos
(if any) + year of the work (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) photos, drawing, generated stuff, whatever is relevant and illustrative)
4. the page must have link to final PDF + visual documentation of the 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 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 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 show + link from home
6. License/copyright statement. You're free to decide how you want your 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 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 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 standard copyright, it's always nice and useful to be explicit about
your position (whatever this can be!) in that regard, and regardless of your position (whatever this can be!) in that regard, and regardless of
what alternative you choose (or not): default copyright, full fledged what alternative you choose (or not): default copyright, full fledged
free culture license, situationist style statement, underground press free culture license, situationist style statement, underground press
copywrong trolling, anti-copyright notice, etc. copywrong trolling, anti-copyright notice, etc.
Also from a technical POV, make sure that: 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/ https://project.xpub.nl/the-name-of-your-project/
no underscores, only dashes for space. no underscores, only dashes for space.
inside the the-name-of-your-project/ folder, your project page should 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 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 name, do not link to index.html directly. The web server will serve
index.html automatically. index.html automatically.
See how it's done for last year's projects See how it's done for last year's projects
- do not load external resources, such as fonts or js scripts. Serve - do not load external resources, such as fonts or js scripts. Serve
*everything* from the project folder. Basically your project page *everything* from the project folder. Basically your project page
should work locally and offline. should work locally and offline.
How all this is presented is really up to you and there are no How all this is presented is really up to you and there are no
restrictions (Joca for instance is using a functional chat bot restrictions (Joca for instance is using a functional chat bot
interface). interface).
You can always use one of the pages made by Lídia for last year's You can always use the template for student projects Lídia 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*).
projects as a starting point if you like.
*!important (both for front page and individual pages):
Use class="int" on \<a>s for internal links and class="ext" on \<a>s for external links. Add target='_blank' on links with class='ext' to open link in a new tab

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

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

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

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

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

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

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

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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.6 KiB

After

Width:  |  Height:  |  Size: 4.6 KiB

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

After

Width:  |  Height:  |  Size: 5.9 KiB

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

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

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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 194 KiB

After

Width:  |  Height:  |  Size: 168 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 188 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 218 KiB

After

Width:  |  Height:  |  Size: 190 KiB

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

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

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

@ -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>

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

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

Loading…
Cancel
Save