Skip to content

Commit c13d7fa

Browse files
machalmachal
committed
Added theming - bad and ugly
1 parent 7c74834 commit c13d7fa

File tree

5 files changed

+363
-2
lines changed

5 files changed

+363
-2
lines changed

‎css/style.css

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2389,4 +2389,41 @@ Na velkých displejích vedle sebe, na malých většina schovaná do ikonek.
23892389
padding-left: 300px;
23902390
padding-right: 300px;
23912391
}
2392+
}
2393+
/* # Tmave barevne schema
2394+
2395+
dark.html
2396+
2397+
*/
2398+
.theme-dark {
2399+
background: #444;
2400+
}
2401+
.theme-dark {
2402+
color: white !important;
2403+
}
2404+
.theme-dark h1,
2405+
.theme-dark h2,
2406+
.theme-dark h3 {
2407+
color: white !important;
2408+
}
2409+
.theme-dark .list-item.active,
2410+
.theme-dark .list-item:hover,
2411+
.theme-dark .list-item:focus,
2412+
.theme-dark .list-item:active {
2413+
background-color: #555;
2414+
border-color: #eee;
2415+
color: white;
2416+
}
2417+
.theme-dark .list-item.active h2 a,
2418+
.theme-dark .list-item:hover h2 a,
2419+
.theme-dark .list-item:focus h2 a,
2420+
.theme-dark .list-item:active h2 a {
2421+
color: white;
2422+
text-decoration: underline;
2423+
}
2424+
.js .theme-dark .list-item.active,
2425+
.js .theme-dark .list-item:hover,
2426+
.js .theme-dark .list-item:focus,
2427+
.js .theme-dark .list-item:active {
2428+
background-color: #666;
23922429
}

‎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.

‎dark.html

Lines changed: 277 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,277 @@
1+
<!DOCTYPE html>
2+
3+
<html lang="cs" class="no-js">
4+
5+
<head>
6+
<meta charset="UTF-8">
7+
8+
<meta content="width=device-width, initial-scale=1.0" name="viewport">
9+
10+
<link href="css/style.css" rel="stylesheet" type="text/css">
11+
12+
<title>Ubytování na Jižní Moravě</title>
13+
14+
<meta content="Nejteplejší a nejúrodnější oblast u nás, kde si na své přijdou jak milovníci přírodních krás, tak zájemci o kulturní bohatství. V tomto nížinatém kraji naleznete sice jen malé kopce, ale zato vás čeká příležitost ke koštování vína a seznámení s dávnými lidovými zvyky a tradicemi." name="description">
15+
16+
<script>
17+
document.documentElement.className =
18+
document.documentElement.className.replace("no-js","js");
19+
</script>
20+
21+
</head>
22+
23+
<body>
24+
25+
<div class="container">
26+
27+
<p class="site-logo">
28+
CESTOVKA
29+
</p>
30+
31+
<nav class="site-nav" role="navigation">
32+
<div class="site-nav__main" id="navigace">
33+
<ul class="pine-level-1">
34+
<li>
35+
<a href="#">Najít ubytování</a>
36+
</li>
37+
<li>
38+
<a href="#">Státy</a>
39+
</li>
40+
<li>
41+
<a href="#">Slevy a Last Minute</a>
42+
</li>
43+
<li>
44+
<a href="#">Skupiny a konference</a>
45+
</li>
46+
<li>
47+
<a href="#">Novinky</a>
48+
</li>
49+
<li>
50+
<a href="#">O nás</a>
51+
</li>
52+
<li>
53+
<a href="#">Kontakt</a>
54+
</li>
55+
</ul>
56+
</div>
57+
</nav>
58+
59+
60+
<main class="content theme-dark" role="main">
61+
62+
<div class="content__head without_nav">
63+
<h1>Ubytování na Jižní Moravě</h1>
64+
</div>
65+
<!-- .content__head -->
66+
67+
<div id="subdivisions">
68+
69+
<div class="inline-list">
70+
<h2 class="inline-list__heading inline-list__heading--invisible">
71+
Města v této oblasti
72+
</h2>
73+
<a class="inline-list__item" href="#">Brno</a>
74+
<a class="inline-list__item" href="#">Hodonín</a>
75+
<a class="inline-list__item" href="#">Hustopeče</a>
76+
<a class="inline-list__item" href="#">Kostelec u Zlína</a>
77+
<a class="inline-list__item" href="#">Lednice</a>
78+
<a class="inline-list__item" href="#">Luhačovice</a>
79+
<a class="inline-list__item" href="#">Lukov</a>
80+
<a class="inline-list__item" href="#">Valtice</a>
81+
<a class="inline-list__item" href="#">Znojmo</a>
82+
</div>
83+
84+
</div>
85+
<!-- id=subdivisions -->
86+
87+
<div class="clearBothZero"></div>
88+
89+
<div class="content__body">
90+
<div class="row">
91+
92+
<article class="list-item bordered">
93+
<p class="image">
94+
<a href="#">
95+
<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">
96+
</a>
97+
<span class="flags">
98+
<strong class="list-item_flag flag flag--ratings">Skvělé hodnocení</strong>
99+
<a class="list-item_flag flag flag--lastminute" href="#">Last Minute</a>
100+
</span>
101+
</p>
102+
<!-- .image -->
103+
<div class="content">
104+
<h2>
105+
<a href="#">Minirelax v lázních AKCE -20%</a>
106+
</h2>
107+
<p>
108+
WELLNESS HOTEL POHODA, Luhačovice, Jižní Morava, Česká republika
109+
<br>
110+
<strong>termíny:</strong> 02.04.2018 - 20.04.2018
111+
</p>
112+
<p class="price price--big">
113+
<strong>4 noci od</strong> 5 570 Kč
114+
</p>
115+
</div>
116+
<!-- .content -->
117+
<div class="clear_zero">&nbsp;</div>
118+
</article>
119+
<!-- .list-item -->
120+
121+
<article class="list-item">
122+
<p class="image">
123+
<a href="#">
124+
<img alt="Mandloňový pobyt" src="http://www.ck-rekrea.cz/katalogy-data/images/mista/885/Hotel_Cento0_s.jpg" height="215" width="286">
125+
</a>
126+
<span class="flags">
127+
<a class="list-item_flag flag flag--lastminute" href="#">Last Minute</a>
128+
</span>
129+
</p>
130+
<!-- .image -->
131+
<div class="content">
132+
<h2>
133+
<a href="#">Mandloňový pobyt</a>
134+
</h2>
135+
<p>
136+
<strong>termíny:</strong> 23.03.2018 - 25.03.2018
137+
</p>
138+
<p class="price price--big">
139+
<strong>2 noci od</strong> 2 975 Kč
140+
</p>
141+
</div>
142+
<!-- .content -->
143+
<div class="clear_zero">&nbsp;</div>
144+
</article>
145+
<!-- .list-item -->
146+
147+
<article class="list-item">
148+
<p class="image">
149+
<a href="#">
150+
<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">
151+
</a>
152+
<span class="flags">
153+
<a class="list-item_flag flag flag--lastminute" href="#">Last Minute</a>
154+
</span>
155+
</p>
156+
<!-- .image -->
157+
<div class="content">
158+
<h2>
159+
<a href="#">Velikonoční gurmánský pobyt</a>
160+
</h2>
161+
<p>
162+
<strong>termíny:</strong> 30.03.2018 - 02.04.2018
163+
</p>
164+
<p class="price price--big">
165+
<strong>2-3 noci od</strong> 3 245 Kč
166+
</p>
167+
</div>
168+
<!-- .content -->
169+
<div class="clear_zero">&nbsp;</div>
170+
</article>
171+
<!-- .list-item -->
172+
173+
<article class="list-item">
174+
<p class="image">
175+
<a href="#">
176+
<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">
177+
</a>
178+
<span class="flags">
179+
<a class="list-item_flag flag flag--lastminute" href="#">Last Minute</a>
180+
</span>
181+
</p>
182+
<!-- .image -->
183+
<div class="content">
184+
<h2>
185+
<a href="#">Jarovín Rosé pobytový balíček</a>
186+
</h2>
187+
<p>
188+
<strong>termíny:</strong> 06.04.2018 - 08.04.2018
189+
</p>
190+
<p class="price price--big">
191+
<strong>2 noci od </strong>2 595 Kč
192+
</p>
193+
</div>
194+
<!-- .content -->
195+
<div class="clear_zero">&nbsp;</div>
196+
</article>
197+
<!-- .list-item -->
198+
199+
<article class="list-item">
200+
<p class="image">
201+
<a href="#">
202+
<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">
203+
</a>
204+
<span class="flags">
205+
<strong class="list-item_flag flag flag--ratings">Skvělé hodnocení</strong>
206+
<a class="list-item_flag flag flag--lastminute" href="#">Last Minute</a>
207+
</span>
208+
</p>
209+
<!-- .image -->
210+
<div class="content">
211+
<h2>
212+
<a href="#">Relax v Pohodě AKCE -20%</a>
213+
</h2>
214+
<p>
215+
<strong>termíny:</strong> 15.04.2018 - 20.04.2018
216+
</p>
217+
<p class="price price--big">
218+
<strong>3 noci od</strong> 4 560 Kč
219+
</p>
220+
</div>
221+
<!-- .content -->
222+
<div class="clear_zero">&nbsp;</div>
223+
</article>
224+
<!-- .list-item -->
225+
226+
<article class="list-item">
227+
<p class="image">
228+
<a href="#">
229+
<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+
</a>
231+
<span class="flags"></span>
232+
</p>
233+
<!-- .image -->
234+
<div class="content">
235+
<h2>
236+
<a href="#">PENZION ONYX</a>
237+
</h2>
238+
<p>
239+
Lednice
240+
<br>
241+
Penzion Onyx se nachází v klidové zóně obce Lednice. Je vzdálený jen 800 m od centra obce.
242+
</p>
243+
<p class="price price--big">
244+
<strong>1 noc od</strong> 595 Kč
245+
</p>
246+
</div>
247+
<!-- .content -->
248+
<div class="clear_zero">&nbsp;</div>
249+
</article>
250+
<!-- .list-item -->
251+
252+
253+
<div class="clearBothZero"></div>
254+
255+
</div>
256+
<!-- /.row -->
257+
258+
</div>
259+
<!-- .content__body -->
260+
</main>
261+
<!-- .content -->
262+
263+
<p id="foot">
264+
&copy; 2005 &ndash; 2018 Cestovka
265+
</p>
266+
267+
268+
269+
</div>
270+
<!-- .container -->
271+
272+
<script src="js/lib/jquery.js"></script>
273+
<script src="js/rekrea-footer.js"></script>
274+
275+
</body>
276+
277+
</html>

‎less/index.less

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,5 +27,8 @@
2727
@import "components/site_logo";
2828
@import "components/site_nav";
2929

30-
// Unikatní moduly - strankove
30+
// Unikatni moduly - strankove
3131
@import "components/page/about";
32+
33+
// Tmave tema
34+
@import "themes/dark";

‎less/themes/dark.less

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
/* # Tmave barevne schema
2+
3+
dark.html
4+
5+
*/
6+
7+
.theme-dark {
8+
background: #444;
9+
}
10+
11+
.theme-dark {
12+
color: white !important;
13+
14+
h1, h2, h3 {
15+
color: white !important;
16+
}
17+
}
18+
19+
20+
// List Item
21+
22+
.theme-dark {
23+
.list-item.active,
24+
.list-item:hover,
25+
.list-item:focus,
26+
.list-item:active {
27+
background-color: #555;
28+
border-color: #eee;
29+
color: white;
30+
31+
h2 a {
32+
color: white;
33+
text-decoration: underline;
34+
}
35+
36+
// Funkcnost s povolenym JS
37+
38+
.js & {
39+
background-color: #666;
40+
}
41+
}
42+
}
43+
44+

0 commit comments

Comments
 (0)