This describes the template that controls the overall look and layout of this site.
Grid
height: line 30, interline 15; page width: 12 columns + 11 intercolumns, centered
| Screen |
Column |
Intercolumn |
Page width |
Notes |
| <768 |
|
|
auto |
margins l/r 1em |
| >768 |
27 |
30 |
654 |
|
| >980 |
46 |
30 |
882 |
default |
| >1200 |
52 |
30 |
954 |
|
| >1600 |
70 |
30 |
1170 |
|
Font
'Roboto' 300; h3: 400; h1, h2: 100
| Screen |
small |
body |
h3 |
h2, intro |
h1 |
| >1600 |
12 |
19 |
21 |
42 |
130 |
| >980 |
12 |
19 |
21 |
40/1.5 |
110/1 |
| >768 |
12 |
19 |
21 |
40 |
80 |
| <768 |
12 |
19 |
21 |
29 |
49/1.2 |
Color
| #f3f3f4 |
background |
| #373749 |
text |
| #d9e3e3 |
hover, borders, selection background |
| white |
top menu background over the main text area |
Transition
0.4s ease
- width 100%, height 30
- margins: 30, <768 1em
- (dis)appears on scroll down/up
- background change on scroll to/from main text area(js)
- pager: left/right arrows, ip_iconsregular 30px, right
- width 100%, heading as h3
- active/hover item transparency 7%
- 2 templates: icons block margins top/bottom 75, icons left
- default template: width as page width, icons block margin left 30,
- icon columns <768 1, >768 3, >980 4 margins left/bottom 30
- xwidth template: icons block max. width 2400 ~(screen width / 300) * 300 (js) center, icons 270x270 margins left/right 15 bottom 30
Header
- width 100%, height 80%
- background: image, center/center, size cover – scale the background image to be as large as possible so that the background area is completely covered by the background image.
- h1 as page width; margin bottom: 105, <768: 60; transparency change on scroll(js)
- additional css formatting from the editor
Article
- width as page width
- margin top: 105, <768 60; margin bottom: 90
- text, image, video, gallery: margin bottom 105 except last
- body text, tracklist: width >1200 41em
- tracklist: description margin bottom 30 except last
- credits: columns 50%, padding 15 except left, border bottom except last
Gallery
- width 100%, <768 margins left/right 1em
- aspect ratio: 16:9, <980 narrow gallery 1:1
- image: center/center, margin bottom 90
- caption: height 30, position image bottom margin 0
- controls: height 45, position gallery bottom 30
- control buttons: previous/next, dtm: desktop/tablet/mobile
