diff --git a/.stylelintrc b/.stylelintrc index 97ac20e..b9ac5e7 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -30,7 +30,6 @@ "selector-attribute-quotes": "always", "selector-list-comma-newline-after": null, "selector-max-compound-selectors": 3, - "selector-max-id": 0, "selector-max-specificity": "0,3,0", "selector-max-universal": 1, "selector-no-vendor-prefix": true, diff --git a/Gruntfile.js b/Gruntfile.js index f71e5ef..9a89b79 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -53,7 +53,7 @@ module.exports = function(grunt) { options: { syntax: "less" }, - src: ["less/**/*.less"] + src: ["less/components-new/**/*.less"] }, watch: { diff --git a/css/style.css b/css/style.css index 5ef2eb8..fa06559 100644 --- a/css/style.css +++ b/css/style.css @@ -1,1259 +1,1289 @@ -.hide-text { - font: 0/0 a; - color: transparent; - text-shadow: none; - background-color: transparent; - border: 0; -} /* - Stylopis pro Fancygallery (prototyp) - Knihovna pro zobrazovani galerii obrazku. - Verze z 20. 10. 2011 - Autor: Martin Michalek, michalek@shortcat.cz +Reset +===== - Obsah: - 1) jquery.fancybox.mod_shortcat.css Shortcat vzhled FancyBoxu - 2) jquery.jcarousel.css Zakladni stylopis pro jCarousel - 3) jquery.jcarousel.skin.shortcat.css Shortcat vizual pro jCarousel - 4) fancygallery.css Styly pro FancyGallery, ktere neobsahuje Fancybox Shortcat mod +*/ +body { + margin: 0; + padding: 0; +} +a img, +img { + border: 0; +} +form { + margin: 0; + padding: 0; +} +img { + -ms-interpolation-mode: bicubic; + max-width: 100%; + height: auto; +} +/* - Z-indexy: - 1110 #fancybox-loading, #fancybox-thumbnails .jcarousel-item .hover-image (FB Gallery mouseover) - 1109 #fancybox-inner:hover (Hover nad obrazkem) - 1108 #fancybox-thumbnails (FB Gallery lista s thumbnaily) - 1108 #fancybox-close - 1107 #fancybox-left, #fancybox-right, #fancybox-left-ico, #fancybox-right-ico - 1102 #fancybox-title - 1101 #fancybox-wrap - 1100 #fancybox-overlay +Vzhled body +=========== */ -/* ================================================================= - 1) jquery.fancybox.mod_shortcat.css - Shortcat vzhled FancyBoxu -*/ -/* - * FancyBox - jQuery Plugin - * Simple and fancy lightbox alternative - * - * Examples and documentation at: http://fancybox.net - * - * Copyright (c) 2008 - 2010 Janis Skarnelis - * - * Version: 1.3.1 (05/03/2010) - * Requires: jQuery v1.3+ - * - * Dual licensed under the MIT and GPL licenses: - * http://www.opensource.org/licenses/mit-license.php - * http://www.gnu.org/licenses/gpl.html - */ -/* Do not show scrollbars when FB is open */ -body.fancybox-active { - overflow: hidden; +body { + background: #eee; + color: #000; } -#fancybox-loading { - position: fixed; - top: 50%; - left: 50%; - height: 40px; - width: 40px; - margin-top: -20px; - margin-left: -20px; - cursor: pointer; - overflow: hidden; - z-index: 1104; - display: none; +@media only screen and (min-width: 768px) { + body { + padding-bottom: 50px; + } } -#fancybox-loading div { - position: absolute; - top: 0; - left: 0; - width: 40px; - height: 480px; - background-image: url('../../images/fancygallery/fancybox.png'); +@media only screen and (min-width: 768px) { + body.ajax { + background: #fff; + padding: 0; + } + body.ajax .container { + -webkit-box-shadow: none; + box-shadow: none; + } } -#fancybox-overlay { - position: fixed; - top: 0; - left: 0; - bottom: 0; - right: 0; - background: #000; - z-index: 1100; - display: none; +/* + +Typografie a linearni design +============================ + +*/ +body, +input, +textarea, +option, +select { + font: 12px / 18px Arial, Helvetica, sans-serif; } -#fancybox-tmp { - padding: 0; - margin: 0; - border: 0; - overflow: auto; - display: none; +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: Arial, Helvetica, sans-serif; } -#fancybox-wrap { - position: absolute; - top: 0; - left: 0; - margin: 0; - padding: 20px; - z-index: 1101; - display: none; +a { + text-decoration: none; + color: #0eb10e; } -#fancybox-outer { - position: relative; - width: 100%; - height: 100%; - background: #FFF; +a:hover, +a:focus, +a:active { + color: #075207; + text-decoration: underline; } -#fancybox-inner { - position: absolute; - top: 0; - left: 0; - width: 1px; - height: 1px; +p, +ul, +ol, +table, +blockquote { padding: 0; margin: 0; - outline: none; - overflow: hidden; -} -#fancybox-inner:hover { - z-index: 1109; + margin-bottom: 18px; } -#fancybox-hide-sel-frame { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: transparent; +h1, +.h1 { + font-size: 24px; + line-height: 28px; + margin: 0 0 27px 5px; + color: #666; + font-weight: normal; } -#fancybox-close { - position: fixed; - right: 22px; - top: 24px; - width: 37px; - height: 37px; - background-image: url('../../images/fancygallery/fancy_close.gif'); - background-position: top left; - cursor: pointer; - z-index: 1108; - display: none; +@media only screen and (min-width: 768px) { + h1, + .h1 { + font-size: 24px; + line-height: 28px; + } } -#fancybox-close:hover { - background-position: bottom left; +h2, +.h2 { + font-size: 16px; + line-height: 20px; + margin: 0 0 9px 0; + padding: 0; + font-weight: normal; + color: #999; } -#fancybox_error { - color: #444; - font: normal 12px/20px Arial; - padding: 7px; - margin: 0; +@media only screen and (min-width: 768px) { + h2, + .h2 { + font-size: 18px; + line-height: 24px; + } } -#fancybox-content { - height: auto; - width: auto; +h3, +.h3 { + display: block; + font-size: 14px; + line-height: 18px; + margin: 0 0 4px 0; padding: 0; - margin: 0; + font-weight: normal; + color: #666; } -#fancybox-img { - width: 100%; - height: 100%; - padding: 0; +h4, +.h4 { + display: block; + font-size: 12px; + line-height: 18px; margin: 0; - border: none; - outline: none; - line-height: 0; - vertical-align: top; - -ms-interpolation-mode: bicubic; + padding: 0; + font-weight: bold; + color: #666; } -#fancybox-frame { - position: relative; - width: 100%; - height: 100%; - border: none; - display: block; -} -#fancybox-title { - position: absolute; - bottom: 0; - left: 0; - z-index: 1102; +h2 small, +h3 small { + font-size: 12px; + line-height: 18px; + color: #999; } -.fancybox-title-inside { - padding: 10px 0; - text-align: center; - color: #333; +big { + font-size: 14px; + line-height: 18px; + font-weight: bold; } -.fancybox-title-outside { - padding-top: 5px; - color: #FFF; - text-align: center; +ul, +ol { + margin: 0 0 18px 14px; + padding: 0 0 0 0; + color: #ccc; } -.fancybox-title-over { - color: #FFF; - text-align: left; +ul ul, +ul ol, +ol ol, +ol ul { + margin-bottom: 0; } -#fancybox-title-over { - padding: 10px; - background-image: url('../../images/fancygallery/fancy_title_over.png'); - display: block; +ul { + list-style-type: square; } -/* Outer title content */ -#fancybox-title-wrap { - position: fixed; - left: 22px; - top: 24px; - width: auto; - max-width: 400px; - max-height: 80%; - overflow-y: auto; - display: inline-block; - padding: 8px 10px; - background-image: url('../../images/fancygallery/fancy_title_over.png'); +ul li, +ol li { + color: #000; } -#fancybox-title-left, -#fancybox-title-right { - display: none; +@media only screen and (min-width: 768px) { + h2 small.float_right { + margin-top: 5px; + } } -#fancybox-title-main { - color: #fff; - text-align: left; - display: block; - opacity: 1; +/* Modul About + =========== + + Stránka "O nás". +*/ +.about-perex { + text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); } -/* Left and right navigation arrows */ -#fancybox-left, -#fancybox-right { - position: fixed; - bottom: 0px; - height: 100%; - width: 35%; - cursor: pointer; - outline: none; - background-image: url('../../images/fancygallery/blank.gif'); - z-index: 1107; - display: none; +@media only screen and (min-width: 360px) and (max-width: 767px) { + .about-perex { + padding-left: 50px; + padding-right: 50px; + } } -#fancybox-left { - left: 0px; +@media only screen and (min-width: 768px) { + .about-perex { + padding-left: 250px; + padding-right: 250px; + } } -#fancybox-right { - right: 0px; +.about-person { + text-align: center; } -#fancybox-left-ico, -#fancybox-right-ico { - position: absolute; - top: 50%; - left: -9999px; - width: 61px; - height: 77px; - margin-top: -30px; - cursor: pointer; - z-index: 1107; +.about-person-image img { + border-radius: 50%; + overflow: hidden; + max-width: 138px; display: block; + margin: 0 auto; } -#fancybox-left-ico { - background-image: url('../../images/fancygallery/fancy_nav_left.png'); - left: 0px; +.about-person-short-text { + max-width: 200px; + margin-left: auto; + margin-right: auto; } -#fancybox-right-ico { - background-image: url('../../images/fancygallery/fancy_nav_right.png'); - left: auto; - right: 0px; +@media only screen and (min-width: 768px) { + .about-person-full-text, + .about-person-full-contact { + margin-top: 9px; + } } -#fancybox-left:hover #fancybox-left-ico, -#fancybox-left:focus #fancybox-left-ico, -#fancybox-left:active #fancybox-left-ico, -#fancybox-right:hover #fancybox-right-ico, -#fancybox-right:focus #fancybox-right-ico, -#fancybox-right:active #fancybox-right-ico { - background-position: 0 -77px; +.about-history { + background-color: #d8dbd8; + background-position: center center; } -/* Shadows are off */ -.fancy-bg { - display: none; +@media only screen and (max-width: 767px) { + .about-history { + background-image: url(http://dovolena.ck-rekrea.cz/images/about/rekrea-katalogy-small.jpg); + } } -/* ================================================================= - 2) jquery.jcarousel.css - Zakladni stylopis pro jCarousel -*/ -/** - * This
element is wrapped by jCarousel around the list - * and has the classname "jcarousel-container". - */ -.jcarousel-container { - position: relative; +@media only screen and (min-width: 768px) { + .about-history { + background-image: url(http://dovolena.ck-rekrea.cz/images/about/rekrea-katalogy-medium.jpg); + background-attachment: fixed; + } } -.jcarousel-clip { - z-index: 2; - padding: 0; - margin: 0; - overflow: hidden; - position: relative; +.about-history-perex { + background: #fff; + background: rgba(255, 255, 255, 0.95); + padding: 3em 2em 2em 2em; + margin-top: 5em; + margin-bottom: 5em; } -.jcarousel-list { - z-index: 1; - overflow: hidden; - position: relative; - top: 0; - left: 0; - margin: 0; - padding: 0; +.about-history-perex .h1 { + margin-bottom: 10px; } -.jcarousel-list li, -.jcarousel-item { - float: left; - list-style: none; - /* We set the width/height explicitly. No width/height causes infinite loops. */ - width: 75px; - height: 75px; +.about-history-perex .h2 { + margin-bottom: 20px; } -/** - * The buttons are added dynamically by jCarousel before - * the