parallel colonialism
|
After Width: | Height: | Size: 284 KiB |
|
After Width: | Height: | Size: 486 KiB |
|
After Width: | Height: | Size: 687 KiB |
|
After Width: | Height: | Size: 705 KiB |
|
After Width: | Height: | Size: 600 KiB |
|
After Width: | Height: | Size: 492 KiB |
|
After Width: | Height: | Size: 628 KiB |
|
After Width: | Height: | Size: 206 KiB |
|
After Width: | Height: | Size: 207 KiB |
|
After Width: | Height: | Size: 717 KiB |
|
After Width: | Height: | Size: 828 KiB |
|
After Width: | Height: | Size: 306 KiB |
@ -0,0 +1,89 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="date" content="JULY 2020">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<link rel="stylesheet" href="../css/pages.css">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<meta name="description" content="XPUB">
|
||||
<title>PARALLEL COLONIALISM</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="bg-left"></div>
|
||||
<div id="bg-right"></div>
|
||||
|
||||
<!-- XPUB SYNTAX -->
|
||||
<a href='../' id='homebttn' class='ext mytypestyle' > << home</a>
|
||||
|
||||
<header>
|
||||
<h1 id='project-title'>Parallel Colonialism</h1>
|
||||
<h2 id='student-name' class="mytypestyle" ><a href="https://www.bohyewoo.com">Bohye Woo</a></h2>
|
||||
|
||||
<div id='hleft-text'>
|
||||
<div id='inner-hleft-text'>
|
||||
<div id='ihtp'>
|
||||
|
||||
<object>
|
||||
<div id='about-project'>
|
||||
|
||||
<p><i>Parallel Colonialism</i> is a digital text archiving tool that offers a comparative reading application between historical and contemporary documents. It allows users to experience how regulatory terms play in colonialism by offering two types of legal documents: Terms of Services and historical colonial treaties.</p>
|
||||
|
||||
<p>By selecting one of each document, a parallel reading platform is enabled, in which you can comparatively label, highlight and analyze a range of specific terms. This helps you to analyze on how these documents operate similar ways in colonialism, and it opens up discussions in finding a colonial resemblance by mapping out the whole contractual landscape of terms used in each document. </p>
|
||||
|
||||
----------------
|
||||
<p>Parallel Colonialism (2020). has been produced in the context of the graduation research of Bohye Woo from the Experimental Publishing (XPUB) Master course at the Piet Zwart Institute, Willem de Kooning Academy, Rotterdam University of Applied Sciences.</p>
|
||||
|
||||
<p>Licence: This is a free work. You can copy, distribute, and modify it under the terms of the Free Art License (http://artlibre.org/licence/lal/en/)</p>
|
||||
----------------
|
||||
</div>
|
||||
|
||||
|
||||
<div id='about-student'>
|
||||
<p> Bio will be added soon. </p>
|
||||
|
||||
</div>
|
||||
|
||||
</object>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
<section id='main'>
|
||||
<div id="galleries">
|
||||
<div id='work'>
|
||||
<h3 class='gal-title mytypestyle'>Work</h3>
|
||||
|
||||
<ul id='publist'>
|
||||
<li><a href='https://hub.xpub.nl/termsofservice/' target="_blank" class='ext mytypestyle'>↝ Project Website</a></li>
|
||||
</ul>
|
||||
|
||||
<img src="img/parallel-colonialism-01.png" class='workimg'/>
|
||||
<img src="img/parallel-colonialism-02.png" class='workimg'/>
|
||||
<img src="img/parallel-colonialism-06.png" class='workimg'/>
|
||||
<img src="img/parallel-colonialism-10.png" class='workimg'/>
|
||||
<img src="img/parallel-colonialism-12.png" class='workimg'/>
|
||||
<img src="img/parallel-colonialism-13.png" class='workimg'/>
|
||||
</div>
|
||||
|
||||
<div id='publication'>
|
||||
|
||||
<h3 class="gal-title mytypestyle">Publication</h3>
|
||||
|
||||
<ul id='publist'>
|
||||
<li><a href='pdf/bohye-woo-thesis-2020.pdf' target="_blank" class='ext mytypestyle'>↝ Thesis (PDF)</a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,187 @@
|
||||
@font-face {
|
||||
font-family: "Belgika";
|
||||
src: url("fonts/belgika-5th-webfont.ttf");
|
||||
font-weight: 5;
|
||||
font-style: normal;}
|
||||
|
||||
@font-face {
|
||||
font-family: "Belgika";
|
||||
src: url("fonts/belgika-8th-webfont.ttf");
|
||||
font-weight: 8;
|
||||
font-style: normal;}
|
||||
|
||||
@font-face {
|
||||
font-family: "Belgika";
|
||||
src: url("fonts/belgika-16th-webfont.ttf");
|
||||
font-weight: 16;
|
||||
font-style: italic;}
|
||||
|
||||
@font-face {
|
||||
font-family: "Belgika";
|
||||
src: url("fonts/belgika-40th-webfont.ttf");
|
||||
font-weight: 40;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
|
||||
|
||||
body{
|
||||
background: none;
|
||||
}
|
||||
|
||||
a{
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
display: inline;
|
||||
border-bottom: 0px;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.ext{
|
||||
background: none;
|
||||
}
|
||||
|
||||
a:hover{
|
||||
color: grey;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
a:visited{
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* HEADER */
|
||||
|
||||
aside{
|
||||
position: fixed;
|
||||
top: 5px;
|
||||
width: calc(100vw - 15px);
|
||||
font-size: 12px;
|
||||
font-family: "Belgika", Arial, Helvetica, sans-serif;
|
||||
font-weight: 5;
|
||||
font-style: normal;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.marquee {
|
||||
position: relative;
|
||||
width: calc(100vw - 15px);
|
||||
max-width: 100%;
|
||||
overflow-x: hidden;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.track {
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
will-change: transform;
|
||||
animation: marquee 20s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes marquee {
|
||||
from { transform: translateX(0); }
|
||||
to { transform: translateX(-50%); }
|
||||
}
|
||||
|
||||
/* HOME BUTTON */
|
||||
|
||||
.homebutton{
|
||||
background-color: inherit;
|
||||
text-align:right;
|
||||
color:black;
|
||||
position:absolute;
|
||||
top:0;
|
||||
right:0;
|
||||
margin-right:2%;
|
||||
margin-top:25px;
|
||||
padding:0.3% 0 0 0.3%;
|
||||
font-size:0.6em;
|
||||
z-index:999;
|
||||
}
|
||||
|
||||
/* TYPE STYLE */
|
||||
|
||||
#project-title{
|
||||
font-family: "Belgika", Arial, Helvetica, sans-serif;
|
||||
font-weight: 5;
|
||||
font-style: normal;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#about-student{
|
||||
font-family: helvetica;
|
||||
font-style: italic;
|
||||
color: #3c3c3c;
|
||||
font-weight: 16;
|
||||
font-size: calc(8px + 0.3vw);
|
||||
padding-top: 10px;
|
||||
color: white;
|
||||
|
||||
}
|
||||
|
||||
#about-project {
|
||||
color: white;
|
||||
}
|
||||
|
||||
#inner-hleft-text {
|
||||
color: white;
|
||||
|
||||
}
|
||||
|
||||
.mytypestyle{
|
||||
font-family: "Belgika", Arial, Helvetica, sans-serif;
|
||||
font-weight: 4;
|
||||
color: black;
|
||||
}
|
||||
|
||||
#inner-hleft-text{
|
||||
overflow-y: scroll;
|
||||
font-family: helvetica;
|
||||
font-weight: 16;
|
||||
font-size: calc(11px + 0.3vw);
|
||||
color: white;
|
||||
|
||||
|
||||
}
|
||||
|
||||
li{
|
||||
list-style: none;
|
||||
transform-origin: 0 0;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#inner-hleft-text::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.workimg{
|
||||
padding: 0 0 0 0;
|
||||
}
|
||||
|
||||
|
||||
#bg-left{
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: inline-block;
|
||||
width: 25vw;
|
||||
height: 100vh;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
#bg-right{
|
||||
position: fixed;
|
||||
left: 25vw;
|
||||
top: 0;
|
||||
display: inline-block;
|
||||
height: 100vh;
|
||||
width: 75vw;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||