You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

231 lines
5.8 KiB
HTML

6 months ago
<style>
html {
background-color: #181a1b !important;
}
iframe {
color-scheme: initial;
}
html, body {
background-color: #181a1b;
}
html, body {
border-color: #736b5e;
color: #e8e6e3;
}
a {
color: #3391ff;
}
table {
border-color: #545b5e;
}
mark {
color: #e8e6e3;
}
::placeholder {
color: #b2aba1;
}
header {
line-height: 1.42857;
border-bottom: 2px solid #81d742;
border-bottom-color: #81d742);
}
h1 {
font-family: VG5000;
font-size: 50px;
font-weight: lighter;
}
h2 { font-family: VG5000;
font-size: 32px;
color: #81d742;
}
h3 { font-family: VG5000;
font-size: 16px;
color: #81d742;
}
h4 { font-family: VG5000;
font-size: 15px;
color: #81d742;
}
p { font-family: VG5000;
font-size: 14px;
color: #81d742;
}
@font-face {
font-family: Montserrat;
src: url(fonts/Montserrat-VariableFont_wght.ttf);
}
@font-face {
font-family: Montserrat-italic;
src: url(fonts/Montserrat-Italic-VariableFont_wght.ttf);
}
@font-face {
font-family: VG5000;
src: url(fonts/VG5000-Regular.otf);
6 months ago
}
header img {
width:50%;
object-align:right;
}
body {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.box {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
padding: 0;
margin: 0;
list-style: none;
}
.map {
flex: 0 0 65%;
background-color: #81d742; /* Optional, for visual distinction */
overflow: hidden;
}
.info {
flex: 0 0 30%;
background-color: #212529;
height: 100%;
padding: 2%;
overflow-y: scroll;
}
.logo img {
z-index: 200;
width: 16vw;
position: fixed;
right: 32vw;
}
@media only screen and (max-width: 768px) {
iframe {
height:100vw;
}
.map {
flex: 100%;
width: 100%;
}
.info {
flex: 100%;
width: 100%;
}
h1 {
font-family: VG5000;
font-size: 28px;
font-weight: lighter;
color: #81d742;
}
h2 { font-family: VG5000;
font-size: 22px;
color: #81d742;
}
h3 { font-family: VG5000;
font-size: 16px;
color: #81d742;
}
h4 { font-family: VG5000;
font-size: 16px;
color: #81d742;
line-height: 1.42857;
border-bottom: 2px solid #81d742;
}
p { font-family: VG5000;
font-size: 14px;
color: #81d742;
}
h5 {
font-family: VG5000;
font-size: 14px;
color: #fff;
text-align: center;
}
.logo img {
z-index: 200;
width: 44vw;
position: absolute;
top: 70vw;
right:3vw;
}
</style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Rotterdam Points of InAccess (POINXS)</title>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico">
</style>
</head>
<body>
<div class="box">
<div class="map">
<iframe width="100%" height="100%" frameborder="0" allowfullscreen allow="geolocation" src="//umap.openstreetmap.fr/en/map/untitled-map_1084208?scaleControl=false&miniMap=false&scrollWheelZoom=false&zoomControl=true&editMode=disabled&moreControl=true&searchControl=null&tilelayersControl=null&embedControl=null&datalayersControl=true&onLoadPanel=none&captionBar=false&captionMenus=true"></iframe><p><a href="//umap.openstreetmap.fr/en/map/untitled-map_1084208?scaleControl=false&miniMap=false&scrollWheelZoom=true&zoomControl=true&editMode=disabled&moreControl=true&searchControl=null&tilelayersControl=null&embedControl=null&datalayersControl=true&onLoadPanel=none&captionBar=false&captionMenus=true">See full screen</a></p>
</div>
<div class="info">
<header> <p> <a href="https://issue.xpub.nl/24/"> <<< Take me back to the Counter-Tourist Information Center <<< </a> </p> <h2> Rotterdam Points of InAccess </h2> </header>
6 months ago
<br>
<h3>
A critical counter map looking at city marketing/planning versus the city living and experience. It's a parody on postcard surreality and apps/websites portraying cool and flashy 2D/3D imagery without the complicated dimensions of the city without showing what's behind the scenes.</h3>
6 months ago
<h4> Rotterdam is 'back on the map'. POINXS questions that map and looks at a city that has become less livable and affordable and reports the bugs from a hill that leads to a dead end pavement, via private transport to wheelchair inaccessible hotspots with ambitions to become a multi-user platform for reporting other people's POINXS. </h4>
<p>
Before we start, what does inaccess mean?: "Not being able to access something". Using Disability and Inaffordance as points of departure. Having certain impairments opens your eyes to closed systems. The world changes drastically as you're not being able to enter multiple spaces. Making a 'regular' space into a 'liminal' space for wheelchairs.
<br> <br>
How can we afford to live in a city obsessed with future plans and what are the planned inhabitants? A city that grants access for corporations but refuse access based on income, education, etc.
6 months ago
<br>
<br>
POINXS is meant as a construction site. Rotterdam is a city that claims to be proud of the people living / working on developing / making the city. There are already multiple ways to improve Rotterdam, but these are all either based on / located in an institution of infrastructure.
6 months ago
<br>
<br>
POINXS uses geolocation together with stories / anecdotes to humanize the errors and bugs in the system. Anyone willing is welcome to add their POINXS. Rotterdam is also known as the city that is never finished. POINXS continues on that sentiment because an accessible city takes time to develop.
6 months ago
<br>
<br>
Interested in participating or sharing anecdotes? Feel free to contact me <br> @ [ lorenzo.quint[at]gmail[dot]com. ]
6 months ago
<br>
</div>
<div class="logo"> <img src="https://hub.xpub.nl/chopchop/~lorenzo/poinxs/poinxslogo2.png"> </div>
6 months ago
</div>
</body></html>