Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 29c3941

Browse files
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)

AltStyle によって変換されたページ (->オリジナル) /