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.

243 lines
6.1 KiB
HTML

<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(./web/fonts/VG5000-Regular.otf);
}
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="logo"> <img src="https://hub.xpub.nl/chopchop/~lorenzo/poinxs/poinxslogo2.png"> </div>
<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> <h2> Rotterdam Points of InAccess </h2> </header>
<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>
<br>
<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>
<br> <p>
Hello! I'm honored to introduce you to these Points of InAccess. I will be your indirect detourguide from the city. :)
Before we start, what does inaccess mean?
<br>
Not being able to access something. So, it could be anything? Yes.
<br>
Starting from a point of disability, the moment you are / you know someone who has impairments, the worlds changes drastically. The experience of not being able to enter multiple spaces. Even the smallest thresholds can be walls to people in wheelchairs.
<br>
<br>
Crossing the street is an obstacle when there is no small ramp on the edge of a pavement.
<br>
<br>
Another Point of InAccess is the affordance. The city of Rotterdam is one with future plans, but what are the planned inhabitants? A city that allows skycrapers merely accessible based on income, educational status or wealthy positions.
<br>
<br>
This project is meant as a construction site. Rotterdam is a city that claims to be proud of how the people live and work on the city and make the city. There are already multiple ways and websites to improve the city. But these are all either based on or located in an institution of infrastructure.
<br>
<br>
POINXS: Points of InAccess is about using geolocation together with stories / anecdotes to humanize the troubles caused by the Points of InAccess. The further intention of the construction site is to collaborate with anyone that experiences 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.
<br>
<br>
Are you interested in participating? Or have some anecdotes to share? Feel free to send me an email <br> @ [ lorenzo.quint[at]gmail[dot]com. ]
<br>
<br>
</div>
</div>
</body></html>