pedf
/
oli
Archived
2
0
Fork 0

Změna škálování a velikosti textu

master
Emil Miler 4 years ago
parent 274de5279f
commit 9013816568

@ -9,16 +9,14 @@ html, body {
} }
body { body {
font-size: 1.4em; font-size: 1em;
font-family: moderat-regular; font-family: moderat-regular;
background: url(../img/header-pattern.svg) no-repeat left top; background: url(../img/header-pattern.svg) no-repeat left top;
background-size: 90% auto; background-size: 90% auto;
} }
p { text-align: justify; }
.wrap { .wrap {
max-width: 1200px; max-width: 62em;
margin: 0 auto; margin: 0 auto;
padding: 0 1em; padding: 0 1em;
} }
@ -30,15 +28,17 @@ p { text-align: justify; }
} }
.messenger img { max-width: 12em; } .messenger img { max-width: 12em; }
h1 { color: #d63647; margin-bottom: 0; clear: both; } h1 { color: #d63647; margin-bottom: 0; clear: both; font-size: 3em; }
h2, h3 { color: #68c7d2; } h2, h3 { color: #68c7d2; }
p { line-height: 1.6; }
header { width: auto; } header { width: auto; }
header .logo { padding: 30px; float: right; text-align: center; box-sizing: border-box; } header .logo { padding: 30px; float: right; text-align: center; box-sizing: border-box; }
header .logo img { max-width: 150px; } header .logo img { max-width: 150px; }
header .row { height: 600px; margin: 0; padding-bottom: 150px; margin-bottom: -300px; } header .row { height: 600px; margin: 0; padding-bottom: 150px; margin-bottom: -300px; }
header .row img { max-height: 500px; } header .row img { max-height: 500px; }
header .row p { text-align: justify; max-width: 35%; } 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-top: 200px; margin-top: -200px;
@ -48,14 +48,14 @@ main {
} }
.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: 130%; max-width: 40%; } .row>img { max-height: 30em; max-width: 40%; }
article { article {
background-color: #eee; background-color: #eee;
border: 3px solid #ddd; border: 3px solid #ddd;
border-radius: 2% 6% 5% 3% / 1% 1% 2% 6%; border-radius: 2% 6% 5% 3% / 1% 1% 2% 6%;
position: relative; position: relative;
max-width: 35%; padding: 2em; max-width: 32%; padding: 1.7em;
} }
article h2 { margin-top: -1.7em; font-size: 2em; } article h2 { margin-top: -1.7em; font-size: 2em; }
article:nth-child(1) h2 { margin-right: -1.5em; text-align: right; } article:nth-child(1) h2 { margin-right: -1.5em; text-align: right; }

@ -36,7 +36,7 @@
</div> </div>
<div class="row"> <div class="row">
<article style="align-self:flex-end;"> <article>
<h2>Ve dvou se to lépe táhne</h2> <h2>Ve dvou se to lépe táhne</h2>
<p>A tak jsem se tady vzal já malý robot s duší šibala, akorát tak do kapsy, který udělá všechno, aby Kubu postrčil, i když se mu to občas nebude líbit. Začali jsme spolu chodit do školy. Já byl v&nbsp;jeho kapsách, batohu, nebo schovaný v&nbsp;kapuci, a pomalu jsem se pouštěl do díla. Čas od času jsem mu po zemi rozhodil drobné. Když Kuba děkoval kolemjdoucím, kteří mu je podali, červenal se jako rak. I&nbsp;tohle pro něj byla výzva. Nebo tehdy, když jsem mu schoval všechny tužky půlku hodiny si nepsal zápisky, než se odhodlal se zeptat souseda, jestli nemá propisku na půjčení.</p> <p>A tak jsem se tady vzal já malý robot s duší šibala, akorát tak do kapsy, který udělá všechno, aby Kubu postrčil, i když se mu to občas nebude líbit. Začali jsme spolu chodit do školy. Já byl v&nbsp;jeho kapsách, batohu, nebo schovaný v&nbsp;kapuci, a pomalu jsem se pouštěl do díla. Čas od času jsem mu po zemi rozhodil drobné. Když Kuba děkoval kolemjdoucím, kteří mu je podali, červenal se jako rak. I&nbsp;tohle pro něj byla výzva. Nebo tehdy, když jsem mu schoval všechny tužky půlku hodiny si nepsal zápisky, než se odhodlal se zeptat souseda, jestli nemá propisku na půjčení.</p>
</article> </article>
@ -88,7 +88,7 @@
<h2>Už mě nepotřebuje</h2> <h2>Už mě nepotřebuje</h2>
<p>Když se další den šli projít, měl jsem spoustu skvělých nápadů, co by jí měl říct, on mě ale jemně zastrčil do kapsy. Věděl si rady sám a já se sotva udržel, abych nezačal křičet radostí.</p> <p>Když se další den šli projít, měl jsem spoustu skvělých nápadů, co by jí měl říct, on mě ale jemně zastrčil do kapsy. Věděl si rady sám a já se sotva udržel, abych nezačal křičet radostí.</p>
</article> </article>
<img src="img/kapsa.png" alt="oli"> <img style="margin:0 auto;" src="img/kapsa.png" alt="oli">
</div> </div>
</main> </main>