Skip to content

Commit 29c3941

Browse files
machalmachal
committed
List Item: fixnuti komponenty do flexboxu atd.
1 parent 4b1ceb8 commit 29c3941

File tree

11 files changed

+104
-184
lines changed

11 files changed

+104
-184
lines changed

‎css/style.css

Lines changed: 51 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -525,8 +525,8 @@ Typografie a linearni design
525525
526526
*/
527527
body, input, textarea, option, select {
528-
font-size: 12px;
529-
line-height: 18px;
528+
font-size: 16px;
529+
line-height: 24px;
530530
font-family: Arial, Helvetica, sans-serif; }
531531

532532
h1, h2, h3, h4, h5, h6 {
@@ -542,7 +542,7 @@ a {
542542
p, ul, ol, table, blockquote {
543543
padding: 0;
544544
margin: 0;
545-
margin-bottom: 18px; }
545+
margin-bottom: 24px; }
546546

547547
h1,
548548
.h1 {
@@ -584,17 +584,17 @@ h3,
584584
h4,
585585
.h4 {
586586
display: block;
587-
font-size: 12px;
588-
line-height: 18px;
587+
font-size: 16px;
588+
line-height: 24px;
589589
margin: 0;
590590
padding: 0;
591591
font-weight: bold;
592592
color: #666; }
593593

594594
h2 small,
595595
h3 small {
596-
font-size: 12px;
597-
line-height: 18px;
596+
font-size: 16px;
597+
line-height: 24px;
598598
color: #999; }
599599

600600
big {
@@ -604,7 +604,7 @@ big {
604604

605605
ul,
606606
ol {
607-
margin: 0 0 18px 14px;
607+
margin: 0 0 24px 14px;
608608
padding: 0 0 0 0;
609609
color: #ccc; }
610610

@@ -1003,7 +1003,7 @@ Nová (od 12/2015)
10031003
## Řádka layoutu je `.row`
10041004
*/
10051005
.row {
1006-
margin-bottom: 18px;
1006+
margin-bottom: 24px;
10071007
*zoom: 1; }
10081008
.row:before, .row:after {
10091009
display: table;
@@ -1162,7 +1162,7 @@ Hlavička obsahu stránky
11621162
*/
11631163
.content__head {
11641164
text-align: center;
1165-
padding: 36px;
1165+
padding: 48px;
11661166
text-align: center; }
11671167

11681168
.content__head h1 {
@@ -1184,6 +1184,7 @@ Flag - priznaky slev, Last Minute atd.
11841184
=========================================
11851185
*/
11861186
.flag {
1187+
font-size: 12px;
11871188
display: inline-block;
11881189
font-weight: normal;
11891190
text-transform: uppercase;
@@ -1241,48 +1242,15 @@ a.flag:active {
12411242
left: 2px; }
12421243

12431244
.flags .flag + .flag {
1244-
top: 32px; }
1245+
top: 38px; }
12451246
@media only screen and (min-width: 768px) {
12461247
.flags .flag + .flag.flag--lg {
1247-
top: 40px; } }
1248+
top: 46px; } }
12481249
.flags .flag + .flag.flag--sm {
1249-
top: 28px; }
1250+
top: 34px; }
12501251
@media only screen and (max-width: 420px) {
12511252
.flags .flag + .flag {
1252-
top: 28px; } }
1253-
1254-
.flags .flag + .flag + .flag {
1255-
top: 62px; }
1256-
@media only screen and (min-width: 768px) {
1257-
.flags .flag + .flag + .flag.flag--lg {
1258-
top: 78px; } }
1259-
.flags .flag + .flag + .flag.flag--sm {
1260-
top: 54px; }
1261-
@media only screen and (max-width: 420px) {
1262-
.flags .flag + .flag + .flag {
1263-
top: 54px; } }
1264-
1265-
.flags .flag + .flag + .flag + .flag {
1266-
top: 92px; }
1267-
@media only screen and (min-width: 768px) {
1268-
.flags .flag + .flag + .flag + .flag.flag--lg {
1269-
top: 116px; } }
1270-
.flags .flag + .flag + .flag + .flag.flag--sm {
1271-
top: 80px; }
1272-
@media only screen and (max-width: 420px) {
1273-
.flags .flag + .flag + .flag + .flag {
1274-
top: 80px; } }
1275-
1276-
.flags .flag + .flag + .flag + .flag + .flag {
1277-
top: 122px; }
1278-
@media only screen and (min-width: 768px) {
1279-
.flags .flag + .flag + .flag + .flag + .flag.flag--lg {
1280-
top: 154px; } }
1281-
.flags .flag + .flag + .flag + .flag + .flag.flag--sm {
1282-
top: 106px; }
1283-
@media only screen and (max-width: 420px) {
1284-
.flags .flag + .flag + .flag + .flag + .flag {
1285-
top: 106px; } }
1253+
top: 34px; } }
12861254

12871255
/*
12881256
@@ -1324,7 +1292,9 @@ Foot - stara paticka
13241292
clip: rect(0, 0, 0, 0);
13251293
border: 0; }
13261294
.inline-list__item {
1327-
padding: 9px 8px 8px;
1295+
display: inline-block;
1296+
padding: 4px 8px;
1297+
margin-bottom: 8px;
13281298
background-color: transparent;
13291299
border: 1px solid #ccc;
13301300
white-space: nowrap;
@@ -1349,47 +1319,49 @@ Foot - stara paticka
13491319
Napr. seznamy ubytovatelu, pobytu, last-minute atd.
13501320
13511321
*/
1322+
.list-items {
1323+
display: -webkit-box;
1324+
display: -ms-flexbox;
1325+
display: flex;
1326+
-ms-flex-wrap: wrap;
1327+
flex-wrap: wrap;
1328+
-webkit-box-pack: justify;
1329+
-ms-flex-pack: justify;
1330+
justify-content: space-between; }
1331+
13521332
.list-item {
1353-
position: relative;
1354-
padding: 9px 0;
13551333
border: 1px solid transparent;
1356-
color: #666;
1334+
color: #555;
13571335
-webkit-box-sizing: border-box;
1358-
box-sizing: border-box; }
1336+
box-sizing: border-box;
1337+
padding: 9px;
1338+
margin-bottom: 18px;
1339+
display: -webkit-box;
1340+
display: -ms-flexbox;
1341+
display: flex; }
13591342
@media only screen and (min-width: 768px) {
13601343
.list-item {
1361-
float: left;
1362-
width: calc((100% - 42px) / 3);
1363-
height: 352px;
1364-
padding: 18px 9px 9px;
1365-
margin: 0 7px 0 7px; } }
1344+
display: block;
1345+
width: calc(33.3% - 28px/3); } }
13661346

13671347
.list-item .image {
1368-
position: relative;
1369-
float: left;
1370-
width: 36%;
1371-
margin-right: 4%; }
1348+
width: 33.3%;
1349+
margin-right: 14px;
1350+
position: relative; }
1351+
.list-item .image a, .list-item .image img {
1352+
display: block; }
13721353
@media only screen and (min-width: 768px) {
13731354
.list-item .image {
13741355
width: auto;
1375-
float: none;
1376-
height: 165px;
1377-
overflow: hidden;
13781356
margin-bottom: 12px;
13791357
margin-right: 0; } }
1380-
@media only screen and (min-width: 1180px) {
1381-
.list-item .image {
1382-
height: 215px; } }
1383-
.list-item .image img {
1384-
max-width: 100%; }
13851358

13861359
.list-item .content {
1387-
float: left;
1388-
width: 60%;
1360+
position: relative;
1361+
width: calc(66.6% - 14px);
13891362
padding: 0; }
13901363
@media only screen and (min-width: 768px) {
13911364
.list-item .content {
1392-
float: none;
13931365
width: auto; } }
13941366
.list-item .content p {
13951367
margin-bottom: 0; }
@@ -1400,12 +1372,8 @@ Napr. seznamy ubytovatelu, pobytu, last-minute atd.
14001372
@media only screen and (min-width: 768px) {
14011373
.list-item .content .price {
14021374
position: absolute;
1403-
right: 3px;
1404-
top: 150px; } }
1405-
1406-
@media only screen and (min-width: 1180px) {
1407-
.list-item .content .price {
1408-
top: 200px; } }
1375+
top: -52px;
1376+
right: -3px; } }
14091377

14101378
.list-item.without_border {
14111379
border-bottom: 0; }
@@ -1495,10 +1463,10 @@ Ceny, datumy - velke "cenovky"
14951463
font-size: 24px;
14961464
font-weight: bold;
14971465
color: #9BD04E;
1498-
padding: 18px 0; }
1466+
padding: 24px 0; }
14991467
@media only screen and (min-width: 768px) {
15001468
.site-logo {
1501-
padding: 54px 0; } }
1469+
padding: 72px 0; } }
15021470

15031471
/* # Modul Site Nav
15041472
@@ -1536,7 +1504,7 @@ Na velkých displejích vedle sebe, na malých většina schovaná do ikonek.
15361504
-webkit-box-align: center;
15371505
-ms-flex-align: center;
15381506
align-items: center;
1539-
height: 36px;
1507+
height: 48px;
15401508
color: #fff; }
15411509
.site-nav a:hover, .site-nav a:focus, .site-nav a:active {
15421510
text-decoration: underline; }
@@ -1551,7 +1519,7 @@ Na velkých displejích vedle sebe, na malých většina schovaná do ikonek.
15511519
-ms-flex: 1;
15521520
flex: 1; }
15531521
.site-nav a {
1554-
height: 54px; } }
1522+
height: 72px; } }
15551523

15561524
/* Modul About
15571525
===========
@@ -1587,7 +1555,7 @@ Na velkých displejích vedle sebe, na malých většina schovaná do ikonek.
15871555
@media only screen and (min-width: 768px) {
15881556
.about-person-full-text,
15891557
.about-person-full-contact {
1590-
margin-top: 9px; } }
1558+
margin-top: 12px; } }
15911559

15921560
.about-history {
15931561
background-color: #d8dbd8;

‎css/style.css.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎img/hotel_1.jpg

467 KB
Loading

‎img/hotel_2.jpg

161 KB
Loading

‎img/hotel_3.jpg

102 KB
Loading

‎img/hotel_4.jpg

97.8 KB
Loading

‎index.html

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,8 @@
2525
<div class="container">
2626

2727
<p class="site-logo">
28-
CESTOVKA
28+
Kunratická
29+
cestovní kancelář
2930
</p>
3031

3132
<nav class="site-nav" role="navigation">
@@ -81,12 +82,12 @@ <h2 class="inline-list__heading inline-list__heading--invisible">
8182
<div class="clearBothZero"></div>
8283

8384
<div class="content__body">
84-
<div class="row">
85+
<div class="list-items">
8586

8687
<article class="list-item bordered">
8788
<p class="image">
8889
<a href="#">
89-
<img alt="Minirelax v lázních AKCE -20%" src="http://www.ck-rekrea.cz/katalogy-data/images/mista/614/Hotel_Pohoda_Luhacovice1_s.jpg" height="215" width="286">
90+
<img alt="Minirelax v lázních AKCE -20%" src="img/hotel_1.jpg">
9091
</a>
9192
<span class="flags">
9293
<strong class="list-item_flag flag flag--ratings">Skvělé hodnocení</strong>
@@ -115,7 +116,7 @@ <h2>
115116
<article class="list-item">
116117
<p class="image">
117118
<a href="#">
118-
<img alt="Mandloňový pobyt" src="http://www.ck-rekrea.cz/katalogy-data/images/mista/885/Hotel_Cento0_s.jpg" height="215" width="286">
119+
<img alt="Mandloňový pobyt" src="img/hotel_2.jpg">
119120
</a>
120121
<span class="flags">
121122
<a class="list-item_flag flag flag--lastminute" href="#">Last Minute</a>
@@ -128,6 +129,8 @@ <h2>
128129
</h2>
129130
<p>
130131
<strong>termíny:</strong> 23.03.2018 - 25.03.2018
132+
<br>
133+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto fuga eius earum perspiciatis exercitationem.
131134
</p>
132135
<p class="price price--big">
133136
<strong>2 noci od</strong> 2 975 Kč
@@ -141,7 +144,7 @@ <h2>
141144
<article class="list-item">
142145
<p class="image">
143146
<a href="#">
144-
<img alt="Velikonoční gurmánský pobyt" src="http://www.ck-rekrea.cz/katalogy-data/images/mista/885/Hotel_Cento0_s.jpg" height="215" width="286">
147+
<img alt="Velikonoční gurmánský pobyt" src="img/hotel_3.jpg">
145148
</a>
146149
<span class="flags">
147150
<a class="list-item_flag flag flag--lastminute" href="#">Last Minute</a>
@@ -154,6 +157,8 @@ <h2>
154157
</h2>
155158
<p>
156159
<strong>termíny:</strong> 30.03.2018 - 02.04.2018
160+
<br>
161+
Sapiente veritatis iure eligendi iusto molestias at, nobis enim?
157162
</p>
158163
<p class="price price--big">
159164
<strong>2-3 noci od</strong> 3 245 Kč
@@ -167,7 +172,7 @@ <h2>
167172
<article class="list-item">
168173
<p class="image">
169174
<a href="#">
170-
<img alt="Jarovín Rosé pobytový balíček" src="http://www.ck-rekrea.cz/katalogy-data/images/mista/885/Hotel_Cento0_s.jpg" height="215" width="286">
175+
<img alt="Jarovín Rosé pobytový balíček" src="img/hotel_4.jpg">
171176
</a>
172177
<span class="flags">
173178
<a class="list-item_flag flag flag--lastminute" href="#">Last Minute</a>
@@ -179,7 +184,8 @@ <h2>
179184
<a href="#">Jarovín Rosé pobytový balíček</a>
180185
</h2>
181186
<p>
182-
<strong>termíny:</strong> 06.04.2018 - 08.04.2018
187+
<strong>termíny:</strong> 06.04.2018 - 08.04.2018 <br>
188+
Consequatur impedit quas corporis sint animi id quod vel officiis, repellat ad reprehenderit.
183189
</p>
184190
<p class="price price--big">
185191
<strong>2 noci od </strong>2 595 Kč
@@ -193,7 +199,7 @@ <h2>
193199
<article class="list-item">
194200
<p class="image">
195201
<a href="#">
196-
<img alt="Relax v Pohodě AKCE -20%" src="http://www.ck-rekrea.cz/katalogy-data/images/mista/614/Hotel_Pohoda_Luhacovice1_s.jpg" height="215" width="286">
202+
<img alt="Relax v Pohodě AKCE -20%" src="img/hotel_1.jpg">
197203
</a>
198204
<span class="flags">
199205
<strong class="list-item_flag flag flag--ratings">Skvělé hodnocení</strong>
@@ -206,7 +212,8 @@ <h2>
206212
<a href="#">Relax v Pohodě AKCE -20%</a>
207213
</h2>
208214
<p>
209-
<strong>termíny:</strong> 15.04.2018 - 20.04.2018
215+
<strong>termíny:</strong> 15.04.2018 - 20.04.2018<br>
216+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
210217
</p>
211218
<p class="price price--big">
212219
<strong>3 noci od</strong> 4 560 Kč
@@ -220,7 +227,7 @@ <h2>
220227
<article class="list-item">
221228
<p class="image">
222229
<a href="#">
223-
<img alt="PENZION ONYX foto" src="http://www.ck-rekrea.cz/katalogy-data/images/mista/413/Penzion_onyx0_s.jpg" height="215" width="286">
230+
<img alt="PENZION ONYX foto" src="img/hotel_3.jpg">
224231
</a>
225232
<span class="flags"></span>
226233
</p>

0 commit comments

Comments
 (0)