Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
ubezi
web-ausstellung-virtuell.de
Commits
f234c6c8
Commit
f234c6c8
authored
Dec 18, 2017
by
Jonas Heinrich
Browse files
make right pane scrollable, fix text style, add top menu, add mapbox gl javascript map
parent
b39e65e5
Changes
2
Hide whitespace changes
Inline
Side-by-side
css/main.css
0 → 100644
View file @
f234c6c8
body
{
margin
:
0
;
font-family
:
'Open Sans Bold'
,
sans-serif
;
font-size
:
14px
;
line-height
:
25px
;
color
:
white
;
}
.container
{
height
:
100vh
;
display
:
grid
;
grid-template-rows
:
80px
1
fr
;
grid-template-columns
:
50%
50%
;
grid-row-gap
:
0px
;
}
topmenu-left
{
background
:
white
;
grid-column-start
:
1
;
grid-column-end
:
2
;
grid-row-start
:
1
;
grid-row-end
:
2
;
}
topmenu-right
{
background
:
#f5f6f7
;
grid-column-start
:
2
;
grid-column-end
:
3
;
grid-row-start
:
1
;
grid-row-end
:
2
;
text-align
:
right
;
padding
:
15px
30px
15px
0px
;
}
topmenu-right
ul
li
{
display
:
inline-block
;
margin-left
:
25px
;
font-weight
:
700
;
font-size
:
12px
;
}
topmenu-right
ul
li
a
{
text-decoration
:
none
;
color
:
#142736
;
}
mappane
{
background-image
:
url('../images/map.png')
;
background-size
:
cover
;
}
videopane
{
background
:
#142736
;
overflow-y
:
scroll
;
}
.player
{
width
:
100%
;
}
.description
{
padding
:
15px
80px
15px
80px
;
}
h2
{
font-weight
:
normal
;
font-size
:
22px
;
line-height
:
30px
;
padding-top
:
5px
;
padding-bottom
:
5px
;
}
.prose-big
{
font-size
:
18px
;
line-height
:
30px
;
}
.logo
{
padding
:
10px
;
}
index.html
View file @
f234c6c8
<html>
<head>
<style
type=
"text/css"
>
body
{
margin
:
0
;
font-family
:
'Open Sans Bold'
,
sans-serif
;
font-size
:
14px
;
line-height
:
25px
;
}
<!doctype html>
<html
lang=
"de"
>
.container
{
height
:
100vh
;
display
:
grid
;
grid-template-rows
:
80px
1
fr
;
grid-template-columns
:
50%
50%
;
grid-row-gap
:
0px
;
}
topmenu-left
{
background
:
white
;
grid-column-start
:
1
;
grid-column-end
:
2
;
grid-row-start
:
1
;
grid-row-end
:
2
;
}
topmenu-right
{
background
:
white
;
grid-column-start
:
2
;
grid-column-end
:
3
;
grid-row-start
:
1
;
grid-row-end
:
2
;
text-align
:
right
;
padding
:
30px
;
}
mappane
{
background-image
:
url('images/map.png')
;
background-size
:
cover
;
}
videopane
{
background
:
#142736
;
color
:
white
;
}
.player
{
width
:
100%
;
}
.description
{
padding
:
15px
;
}
h2
{
font-weight
:
normal
;
font-size
:
22px
;
line-height
:
30px
;
padding-top
:
5px
;
padding-bottom
:
5px
;
}
.prose-big
{
font-size
:
18px
;
line-height
:
30px
;
}
.logo
{
padding
:
10px
;
}
</style>
</head>
<head>
<meta
data-react-helmet=
"true"
charset=
"utf-8"
/>
<title>
Ausstellung-Virtuell | Folge und Varianz
</title>
<link
rel=
"stylesheet"
type=
"text/css"
href=
"css/main.css"
>
<script
src=
'https://api.mapbox.com/mapbox-gl-js/v0.42.0/mapbox-gl.js'
></script>
<link
href=
'https://api.mapbox.com/mapbox-gl-js/v0.42.0/mapbox-gl.css'
rel=
'stylesheet'
/>
</head>
<body>
<body>
<div
class=
"container"
>
<topmenu-left>
<img
class=
"logo"
src=
images/logo.png
>
</topmenu-left>
<topmenu-right>
Menu
</topmenu-right>
<mappane></mappane>
<videopane>
<img
class=
"player"
src=
images/player.png
>
<div
class=
"description"
>
<h2>
Josef Albers - Ehrung des Quadrats: Gelbe Zentrum (1954)
</h2>
<p
class=
"prose-big"
>
Bla bla
</p>
Bla bla bla
</div>
<div
class=
"container"
>
<topmenu-left>
<img
class=
"logo"
src=
images/logo.png
>
</topmenu-left>
<topmenu-right>
<ul>
<li><a
href=
overview.html
>
Werkübersicht
</a></li>
<li><a
href=
about.html
>
Über das Projekt
</a></li>
</ul>
</topmenu-right>
<mappane>
<div
id=
'map'
style=
'width: 100%; height: 100%;'
></div>
</mappane>
<videopane>
<video
class=
"player"
poster=
"images/player.png"
></video>
<div
class=
"description"
>
<h2>
Josef Albers - Ehrung des Quadrats: Gelbe Zentrum (1954)
</h2>
<p
class=
"prose-big"
>
Bla bla
</p>
Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
</div>
</videopane>
</div>
</videopane>
</div>
</body>
<script>
mapboxgl
.
accessToken
=
'
pk.eyJ1Ijoib25ueSIsImEiOiJjajhvdnc1eTgwOTM3MnFudG81MXlpZGJrIn0.lDC0PwJDf704okmeI6w61g
'
;
var
map
=
new
mapboxgl
.
Map
({
container
:
'
map
'
,
style
:
'
mapbox://styles/mapbox/light-v9
'
});
</script>
</body>
</html>
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment