pedf
/
oli
Archived
2
0
Fork 0

Posunutí těla a odkaz na začátku cesty příběhu

Na začátek cesty byl přidán odkaz, který posouvá stránku k prvnímu bodu
příběhu. Zároveň byl celý příběh posunutý blíž k hlavičce a vnitřek
hlavního těla byl přeškálován na relativní jednotky.
master
Emil Miler 4 years ago
parent 64801b0707
commit 19800a60f8

@ -41,19 +41,30 @@ p { line-height: 1.6; }
header { width: auto; } header { width: auto; }
header .logo { padding: 2em; float: right; text-align: center; box-sizing: border-box; } header .logo { padding: 2em; float: right; text-align: center; box-sizing: border-box; }
header .logo img { height: 7.5em; } header .logo img { height: 7.5em; }
header .row { height: 45em; margin: 0; padding-bottom: 150px; margin-bottom: -300px; } header .row { height: 45em; margin: 0; padding-bottom: 10em; }
header .row img { max-height: 32em; } header .row img { max-height: 32em; }
header .row p { text-align: justify; max-width: 45%; font-size: 1.2em; margin: 2em 0; } header .row p { text-align: justify; max-width: 45%; font-size: 1.2em; margin: 2em 0; }
main { main {
padding-top: 200px; margin-top: -200px; padding: 12em 0;
padding-bottom: 100px; margin-bottom: -100px; margin-top: -22em;
margin-bottom: -12em;
background: url(../img/timeline.svg) no-repeat center top; background: url(../img/timeline.svg) no-repeat center top;
background-size: auto 100%; background-size: auto 100%;
} }
.pathstart {
width: 8em;
height: 8em;
position: relative;
left: 50%;
top: -12em; /* padding main */
margin-left: -2.5em; /* začátek ve vektoru není vycentrovaný */
}
.row { height: auto; width: 100%; display: flex; justify-content: space-between; align-items: center; flex-direction: row; margin: 5em 0; } .row { height: auto; width: 100%; display: flex; justify-content: space-between; align-items: center; flex-direction: row; margin: 5em 0; }
.row>img { max-height: 30em; max-width: 40%; } .row>img { max-height: 30em; max-width: 40%; }
#pribeh { padding-top: 4em; }
article { article {
background-image: url(../img/box-border-m.png); background-image: url(../img/box-border-m.png);
@ -80,6 +91,8 @@ article:nth-child(2) h2 { margin-left: -1.5em; }
main { background: none; } main { background: none; }
.pathstart { display: none; }
.row { flex-direction: column; margin: 4em 0; } .row { flex-direction: column; margin: 4em 0; }
.row:nth-child(even) { flex-direction: column-reverse; } .row:nth-child(even) { flex-direction: column-reverse; }
.row>img { max-height: 80%; max-width: 80%; margin: 1em 0; } .row>img { max-height: 80%; max-width: 80%; margin: 1em 0; }

@ -71,7 +71,9 @@
<div class="wrap"> <div class="wrap">
<main> <main>
<div class="row"> <a href="#pribeh"><div class="pathstart"></div></a>
<div class="row" id="pribeh">
<img src="img/skladani.png" alt="oli"> <img src="img/skladani.png" alt="oli">
<article> <article>
<h2>Vše do sebe zapadlo</h2> <h2>Vše do sebe zapadlo</h2>