changed project name in index
|
After Width: | Height: | Size: 189 KiB |
|
After Width: | Height: | Size: 130 KiB |
|
After Width: | Height: | Size: 86 KiB |
|
After Width: | Height: | Size: 76 KiB |
|
After Width: | Height: | Size: 82 KiB |
|
After Width: | Height: | Size: 82 KiB |
|
After Width: | Height: | Size: 120 KiB |
|
After Width: | Height: | Size: 188 KiB |
|
After Width: | Height: | Size: 117 KiB |
|
After Width: | Height: | Size: 118 KiB |
|
After Width: | Height: | Size: 122 KiB |
|
After Width: | Height: | Size: 117 KiB |
|
After Width: | Height: | Size: 110 KiB |
|
After Width: | Height: | Size: 157 KiB |
|
After Width: | Height: | Size: 164 KiB |
|
After Width: | Height: | Size: 156 KiB |
|
After Width: | Height: | Size: 51 KiB |
|
After Width: | Height: | Size: 221 KiB |
|
After Width: | Height: | Size: 191 KiB |
@ -0,0 +1,73 @@
|
||||
<!doctype html>
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>Alt Reality Lexicon</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'>Alt Reality Lexicon <a href='#hleft-text' class='show'> ⓘ</a><br><a href='../' class='show' id='home'><< </a></h1>
|
||||
<div id='sub'>
|
||||
<h2 id='student-name'>Pleun Gremmen</h2>
|
||||
</div>
|
||||
<div id='hleft-text'>
|
||||
|
||||
<a href=# id='back'>
|
||||
<div id='inner-hleft-text'>
|
||||
<div id='ihtp'>
|
||||
<div id='about-project'>
|
||||
<p>The Alt Reality Lexicon (2018) is a lexicon of neologisms that helps the demystification and clarification of the language used by two prominent far-right online subcultures: the Alt-Right and the Manosphere by translating jargon to common language. In order to keep conversing about our differences the editors of the lexicon build a door in the walls of the echo chamber to open it up to a broader audience.</p>
|
||||
</div>
|
||||
<hr align='left'>
|
||||
<div id='about-student'>
|
||||
<p>Pleun is a visual artist and graphic designer aiming to research ways to create and share new narratives about current affairs and interests while pushing the boundaries of her practice.</p>
|
||||
</div>
|
||||
<span id='getback'> go back </span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
<section id='main'>
|
||||
<div id="galleries">
|
||||
<div id='work'>
|
||||
<h3 class='gal-title'>Work</h3>
|
||||
<img src="img/wiki-1.jpg" class='workimg'/>
|
||||
<img src="img/wiki-2.jpg" class='workimg'/>
|
||||
<img src="img/videoscreenshot.jpg" class='workimg'/>
|
||||
</div>
|
||||
<div id='publication'>
|
||||
<h3 class='gal-title'>Publication</h3>
|
||||
<ul id='publist'>
|
||||
<li><a href='pdf/Publication-AltRealityLexBook.pdf' target="_blank" class='ext'>Publication PDF</a></li>
|
||||
<li><a href='pdf/Publication-AltRealityLexBook-print.pdf' target="_blank" class='ext'>Printed publication PDF</a></li>
|
||||
</ul>
|
||||
<img src="img/pzithesis-4.jpg" class='workimg'/>
|
||||
<img src="img/pzithesis-2.jpg" class='workimg'/>
|
||||
<img src="img/pzithesis-7.jpg" class='workimg'/>
|
||||
<img src="img/pzithesis-8.jpg" class='workimg'/>
|
||||
<img src="img/PublicationAltRealityLexicon-1.jpg" class='workimg'/>
|
||||
<img src="img/PublicationAltRealityLexicon-2.jpg" class='workimg'/>
|
||||
</div>
|
||||
<div id='gradshow'>
|
||||
<h3 class='gal-title'>Graduation Show</h3>
|
||||
<img src="img/gradshow-1.jpg" class='workimg'/>
|
||||
<img src="img/gradshow-2.jpg" class='workimg'/>
|
||||
<img src="img/gradshow-3.jpg" class='workimg'/>
|
||||
<img src="img/gradshow-4.jpg" class='workimg'/>
|
||||
<img src="img/gradshow-5.jpg" class='workimg'/>
|
||||
<img src="img/gradshow-6.jpg" class='workimg'/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 104 KiB |
|
After Width: | Height: | Size: 110 KiB |
|
After Width: | Height: | Size: 112 KiB |
|
After Width: | Height: | Size: 71 KiB |
|
After Width: | Height: | Size: 67 KiB |
|
After Width: | Height: | Size: 27 KiB |
|
After Width: | Height: | Size: 101 KiB |
|
After Width: | Height: | Size: 115 KiB |
|
After Width: | Height: | Size: 107 KiB |
|
After Width: | Height: | Size: 102 KiB |
|
After Width: | Height: | Size: 119 KiB |
|
After Width: | Height: | Size: 112 KiB |
@ -0,0 +1,69 @@
|
||||
<!doctype html>
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>Anomolous Faces</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'>Anomolous Faces <a href='#hleft-text' class='show'> ⓘ</a><br><a href='../' class='show' id='home'><< </a></h1>
|
||||
<div id='sub'>
|
||||
<h2 id='student-name'>Max Franklin</h2>
|
||||
</div>
|
||||
<div id='hleft-text'>
|
||||
|
||||
<a href=# id='back'>
|
||||
<div id='inner-hleft-text'>
|
||||
<div id='ihtp'>
|
||||
<div id='about-project'>
|
||||
<p>Improvisation poses questions upon the production and dissemination of artistic work in terms of its material value, and traditional attributions of mastery.<br>
|
||||
Karen Eliot is an improviser, musician, artist, and activist who works to resist standardised valuation of artistic practice. Her work cannot be characterised in distinct forms, but exists as a multitude of actions, challenging ownership, identity and representation.</p>
|
||||
</div>
|
||||
<hr align='left'>
|
||||
<div id='about-student'>
|
||||
<p>Max Franklin is a musician and digital artist currently based in Rotterdam. His work is concerned with the fragile nature of improvisation in music, with software. He has worked within this position since completing his studies in Music, moving between a wide range of acts involving music, technology, design, arts and education.</p>
|
||||
</div>
|
||||
<span id='getback'> go back </span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
<section id='main'>
|
||||
<div id="galleries">
|
||||
<div id='work'>
|
||||
<h3 class='gal-title'>Work</h3>
|
||||
<img src="img/pd_patch.png" class='workimg'/>
|
||||
</div>
|
||||
<div id='publication'>
|
||||
<h3 class='gal-title'>Publication</h3>
|
||||
<ul id='publist'>
|
||||
<li><a href='pdf/Publication-POD_Thesis_Max-Franklin.pdf' target="_blank" class='ext'>Publication PDF</a></li>
|
||||
<li><a href='pdf/Publication-POD_Thesis_Max-Franklin-print.pdf' target="_blank" class='ext'>Printed publication PDF</a></li>
|
||||
</ul>
|
||||
<img src="img/pzithesis-5.jpg" class='workimg'/>
|
||||
<img src="img/pzithesis-3.jpg" class='workimg'/>
|
||||
<img src="img/pzithesis-4.jpg" class='workimg'/>
|
||||
<img src="img/pzithesis-2.jpg" class='workimg'/>
|
||||
</div>
|
||||
<div id='gradshow'>
|
||||
<h3 class='gal-title'>Graduation Show</h3>
|
||||
<img src="img/gradshow-1.jpg" class='workimg'/>
|
||||
<img src="img/gradshow-2.jpg" class='workimg'/>
|
||||
<img src="img/gradshow-3.jpg" class='workimg'/>
|
||||
<img src="img/gradshow-4.jpg" class='workimg'/>
|
||||
<img src="img/gradshow-5.jpg" class='workimg'/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 89 KiB |
|
After Width: | Height: | Size: 80 KiB |
|
After Width: | Height: | Size: 90 KiB |
|
After Width: | Height: | Size: 95 KiB |
|
After Width: | Height: | Size: 57 KiB |
|
After Width: | Height: | Size: 96 KiB |
|
After Width: | Height: | Size: 99 KiB |
|
After Width: | Height: | Size: 94 KiB |
|
After Width: | Height: | Size: 103 KiB |
|
After Width: | Height: | Size: 100 KiB |
|
After Width: | Height: | Size: 125 KiB |
|
After Width: | Height: | Size: 104 KiB |
|
After Width: | Height: | Size: 114 KiB |
|
After Width: | Height: | Size: 98 KiB |
|
After Width: | Height: | Size: 265 KiB |
|
After Width: | Height: | Size: 102 KiB |
|
After Width: | Height: | Size: 124 KiB |
|
After Width: | Height: | Size: 58 KiB |
@ -0,0 +1,73 @@
|
||||
<!doctype html>
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>Back It Up</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'>Back It Up <a href='#hleft-text' class='show'> ⓘ</a><br><a href='../' class='show' id='home'><< </a></h1>
|
||||
|
||||
<div id='sub'>
|
||||
<h2 id='student-name'><a href='http://www.karinadukalska.com' target='_blank' class='ext' id='student-page'>Karina Dukalska</a></h2>
|
||||
</div>
|
||||
<div id='hleft-text'>
|
||||
|
||||
<a href=# id='back'>
|
||||
<div id='inner-hleft-text'>
|
||||
<div id='ihtp'>
|
||||
<div id='about-project'>
|
||||
<p>The intangibility of social dances create a disruptive beauty of pure fulfilment in the moment, a true sense of flow, as well as a yearning for the fleeting memory that may be lost forever. Back It Up (2018) is an interactive performance of two swing dancers whose steps are controlled by the audience. It is accompanied by graphical notation systems, traces of the non-verbal dialogue between dancers and the atmosphere in the room recorded by the audience. The difference in perception of the experience is what makes every recording unique.</p>
|
||||
</div>
|
||||
<hr align='left'>
|
||||
<div id='about-student'>
|
||||
<p>Karina Dukalska is a graphic designer challenging the physicality of books by enforcing physical interaction. Engaging with the content through materials, tangibility and actions deepens the experience of consuming the content itself.</p>
|
||||
</div>
|
||||
<span id='getback'> go back </span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
<section id='main'>
|
||||
<div id="galleries">
|
||||
<div id='work'>
|
||||
<h3 class='gal-title'>Work</h3>
|
||||
<ul id='publist'>
|
||||
<li><a href='http://www.karinadukalska.com/#/back-it-up/' target="_blank" class='ext'>Project Website</a></li>
|
||||
</ul>
|
||||
<img src="img/web-screenshot.jpg" class='workimg'/>
|
||||
</div>
|
||||
<div id='publication'>
|
||||
<h3 class='gal-title'>Publication</h3>
|
||||
<ul id='publist'>
|
||||
<li><a href='pdf/Publication-Karina_ABC_thesis.pdf' target="_blank" class='ext'>Publication PDF</a></li>
|
||||
<li><a href='pdf/Publication-Karina_ABC_thesis-print.pdf' target="_blank" class='ext'>Printed publication PDF</a></li>
|
||||
</ul>
|
||||
<img src="img/pzithesis-3.jpg" class='workimg'/>
|
||||
<img src="img/pzithesis-6.jpg" class='workimg'/>
|
||||
<img src="img/pzithesis-5.jpg" class='workimg'/>
|
||||
<img src="img/pzithesis-7.jpg" class='workimg'/>
|
||||
<img src="img/publication-mockup.jpg" class='workimg'/>
|
||||
</div>
|
||||
<div id='gradshow'>
|
||||
<h3 class='gal-title'>Graduation Show</h3>
|
||||
<img src="img/gradshow-1.jpg" class='workimg'/>
|
||||
<img src="img/gradshow-2.jpg" class='workimg'/>
|
||||
<img src="img/gradshow-3.jpg" class='workimg'/>
|
||||
<img src="img/gradshow-4.jpg" class='workimg'/>
|
||||
<img src="img/gradshow-5.jpg" class='workimg'/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,922 @@
|
||||
@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;
|
||||
}
|
||||
|
||||
|
||||
#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 {
|
||||
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,197 @@
|
||||
@import url("main.css");
|
||||
|
||||
body{
|
||||
color:black;
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
background-color:white;
|
||||
}
|
||||
|
||||
/*header*/
|
||||
|
||||
|
||||
#project-title {
|
||||
font-size:calc(17px + 1.5vw);
|
||||
line-height:135%;
|
||||
margin-bottom:1%;
|
||||
}
|
||||
|
||||
#student-name {
|
||||
margin-bottom:0;
|
||||
font-weight:normal;
|
||||
font-size:calc(10px + 0.6vw);
|
||||
}
|
||||
|
||||
a#student-page{color:black;}
|
||||
|
||||
#hleft-text{
|
||||
overflow-y:auto;
|
||||
overflow-x:hidden;
|
||||
padding-right:1%;
|
||||
box-sizing:border-box;
|
||||
cursor:default;
|
||||
|
||||
}
|
||||
|
||||
#ihtp{
|
||||
|
||||
margin-top:3%;
|
||||
width:80%;
|
||||
color:black;
|
||||
}
|
||||
|
||||
#about-student{
|
||||
width:95%;
|
||||
color:#2f2f2f;
|
||||
font-size:calc(8px + 0.5vw);
|
||||
line-height: 130%;
|
||||
font-style:italic;
|
||||
}
|
||||
|
||||
hr{
|
||||
width:50%;
|
||||
color:#ccc;
|
||||
}
|
||||
|
||||
a.show{
|
||||
font-size:calc(13px + 1.5vw);
|
||||
}
|
||||
|
||||
a#home {
|
||||
font-size:calc(7px + 1.5vw);
|
||||
color:black;
|
||||
text-decoration:underline;
|
||||
text-decoration-color:#0f0;
|
||||
}
|
||||
|
||||
a#home:hover{
|
||||
text-decoration:overline;
|
||||
text-decoration-color:#f3ca1b;
|
||||
}
|
||||
|
||||
#project-link{
|
||||
color:black;
|
||||
}
|
||||
|
||||
|
||||
/*section*/
|
||||
|
||||
section#main{
|
||||
overflow:auto;
|
||||
padding-left:1.5%;
|
||||
|
||||
}
|
||||
|
||||
#galleries{
|
||||
padding-top:3%;
|
||||
}
|
||||
|
||||
.gal-title{
|
||||
font-size:calc(12px + 0.7vw);
|
||||
}
|
||||
|
||||
#publist {
|
||||
line-height:155%;
|
||||
}
|
||||
|
||||
#galleries a{
|
||||
color:black;
|
||||
}
|
||||
|
||||
.workimg{
|
||||
max-width: 47%;
|
||||
height: auto;
|
||||
padding: 0.5% 0.5% 0.5% 0;
|
||||
}
|
||||
|
||||
@media all and (min-width: 600px) and (max-width: 720px){
|
||||
|
||||
#about-student{
|
||||
font-size:calc(8px + 1.7vh);
|
||||
line-height:130%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@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){
|
||||
|
||||
|
||||
/*header*/
|
||||
|
||||
#about-student{
|
||||
font-size:calc(7px + 1.5vh);
|
||||
line-height:130%;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 992px){
|
||||
|
||||
#homebttn{
|
||||
display:none;
|
||||
}
|
||||
/*header*/
|
||||
#sub{
|
||||
width:30%;
|
||||
padding-right:5%;
|
||||
white-space:normal;
|
||||
}
|
||||
|
||||
#student-name{
|
||||
text-align:right;
|
||||
line-height:125%;
|
||||
}
|
||||
|
||||
#ihtp, #about-student{
|
||||
color:white;
|
||||
}
|
||||
|
||||
#getback {
|
||||
padding-bottom:5%;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 992px){
|
||||
|
||||
|
||||
#homebttn{
|
||||
background-color:white;
|
||||
text-align:right;
|
||||
color:black;
|
||||
position:absolute;
|
||||
top:0;
|
||||
right:0;
|
||||
margin-right:3%;
|
||||
margin-top:0.7%;
|
||||
padding:0.3% 0 0.4% 0.3%;
|
||||
font-size:calc(7px + 0.6vw);
|
||||
z-index:100;
|
||||
}
|
||||
|
||||
|
||||
|
||||
section#main{
|
||||
width:74%;
|
||||
left:26%;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
#galleries{
|
||||
padding-left:1%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
After Width: | Height: | Size: 1023 B |
|
After Width: | Height: | Size: 84 KiB |
|
After Width: | Height: | Size: 92 KiB |
|
After Width: | Height: | Size: 73 KiB |
|
After Width: | Height: | Size: 78 KiB |
|
After Width: | Height: | Size: 272 KiB |
|
After Width: | Height: | Size: 240 KiB |
|
After Width: | Height: | Size: 249 KiB |
|
After Width: | Height: | Size: 121 KiB |
|
After Width: | Height: | Size: 143 KiB |
|
After Width: | Height: | Size: 135 KiB |
|
After Width: | Height: | Size: 111 KiB |
|
After Width: | Height: | Size: 118 KiB |
|
After Width: | Height: | Size: 112 KiB |
|
After Width: | Height: | Size: 121 KiB |
|
After Width: | Height: | Size: 117 KiB |
@ -0,0 +1,72 @@
|
||||
<!doctype html>
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>Referendum Medialogs</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'>Referendum Medialogs <a href='#hleft-text' class='show'> ⓘ</a><br><a href='../' class='show' id='home'><< </a></h1>
|
||||
<div id='sub'>
|
||||
<h2 id='student-name'>Franc González</h2>
|
||||
</div>
|
||||
<div id='hleft-text'>
|
||||
|
||||
<a href=# id='back'>
|
||||
<div id='inner-hleft-text'>
|
||||
<div id='ihtp'>
|
||||
<div id='about-project'>
|
||||
<p>Referendum Medialogs (2018) is a work in progress, mapping a journey of the events before, during and after the referendum, showing a series of conflicts leading to both blocking and distributing practices, in a context strongly characterized by nonstop overloads of inaccurate information. At the same time, Referendum Medialogs digs into the issue of disinformation and media noise, using open source revision control software to track and log article revisionism.</p>
|
||||
</div>
|
||||
<hr align='left'>
|
||||
<div id='about-student'>
|
||||
<p>Franc is a visual designer from Barcelona. His work intersects printed matter digging into the political side of software and design as part of his studies, in an ongoing quest to better understand the radical implications of digital tools to society and individuals in general. This has led to his current research in the use of revision control software applied to journalism, in the dramatic context surrounding the Catalan referendum.</p>
|
||||
</div>
|
||||
<span id='getback'> go back </span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
<section id='main'>
|
||||
<div id="galleries">
|
||||
<div id='work'>
|
||||
<h3 class='gal-title'>Work</h3>
|
||||
<ul id='publist'>
|
||||
<li><a href='http://referendumedialogs.referata.com/' target="_blank" class='ext'>Project Website</a></li>
|
||||
</ul>
|
||||
<img src="img/mainpagefrancwiki.jpg" class='workimg'/>
|
||||
<img src="img/mainfg.jpg" class='workimg'/>
|
||||
<img src="img/log-revisions.jpg" class='workimg'/>
|
||||
</div>
|
||||
<div id='publication'>
|
||||
<h3 class='gal-title'>Publication</h3>
|
||||
<ul id='publist'>
|
||||
<li><a href='pdf/Publication-referendum_medialogs.pdf' target="_blank" class='ext'>Publication PDF</a></li>
|
||||
<li><a href='pdf/Publication-referendum_medialogs-print.pdf' target="_blank" class='ext'>Printed publication PDF</a></li>
|
||||
</ul>
|
||||
<img src="img/pzithesis-1.jpg" class='workimg'/>
|
||||
<img src="img/pzithesis-5.jpg" class='workimg'/>
|
||||
<img src="img/pzithesis-7.jpg" class='workimg'/>
|
||||
<img src="img/pzithesis-2.jpg" class='workimg'/>
|
||||
</div>
|
||||
<div id='gradshow'>
|
||||
<h3 class='gal-title'>Graduation Show</h3>
|
||||
<img src="img/gradshow-1.jpg" class='workimg'/>
|
||||
<img src="img/gradshow-2.jpg" class='workimg'/>
|
||||
<img src="img/gradshow-3.jpg" class='workimg'/>
|
||||
<img src="img/gradshow-4.jpg" class='workimg'/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 161 KiB |
|
After Width: | Height: | Size: 105 KiB |
|
After Width: | Height: | Size: 76 KiB |
|
After Width: | Height: | Size: 89 KiB |
|
After Width: | Height: | Size: 87 KiB |
|
After Width: | Height: | Size: 117 KiB |
|
After Width: | Height: | Size: 122 KiB |
|
After Width: | Height: | Size: 121 KiB |
|
After Width: | Height: | Size: 123 KiB |
|
After Width: | Height: | Size: 122 KiB |
|
After Width: | Height: | Size: 134 KiB |
|
After Width: | Height: | Size: 126 KiB |
|
After Width: | Height: | Size: 127 KiB |
|
After Width: | Height: | Size: 122 KiB |
|
After Width: | Height: | Size: 122 KiB |