From c02654ab986c24fbe274bde9ef266dd329912290 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Martin=20Micha=CC=81lek?= Date: Thu, 21 Jun 2018 09:48:34 +0200 Subject: [PATCH] The changes we made on course at 20-06-2018 --- Gruntfile.js | 2 +- css/style.css | 3848 +++++++++-------- css/style.css.map | 2 +- index.html | 60 +- js/rekrea-footer.js | 2574 ++++++++--- less/base/body.less | 1 - less/base/helpers.less | 32 +- less/base/reset.less | 8 +- less/base/typo.less | 32 +- .../inline-list.less | 5 +- less/components-new/list-item.less | 145 + less/components/fancybox.less | 4 +- less/components/flag.less | 58 +- less/components/foot.less | 8 +- less/components/form.less | 97 +- less/components/freestyle_grid.less | 4 +- less/components/list-item.less | 120 - less/components/page/about.less | 36 +- less/components/page/slovnik.less | 31 +- less/components/price-date.less | 41 +- less/components/sister-websites.less | 46 +- less/components/site_logo.less | 31 +- less/components/site_nav.less | 57 +- less/components/text.less | 39 +- less/index.less | 25 +- less/layout/container.less | 2 +- less/layout/layout.less | 92 +- less/lib/fancygallery.less | 133 +- less/lib/mixins.less | 4 +- less/themes/dark.less | 9 +- less/variables/variables.less | 42 +- 31 files changed, 4405 insertions(+), 3183 deletions(-) rename less/{components => components-new}/inline-list.less (95%) create mode 100644 less/components-new/list-item.less delete mode 100644 less/components/list-item.less 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..3fc3aff 100644 --- a/css/style.css +++ b/css/style.css @@ -7,1413 +7,1475 @@ } /* - Stylopis pro Fancygallery (prototyp) - Knihovna pro zobrazovani galerii obrazku. - Verze z 20. 10. 2011 - Autor: Martin Michalek, michalek@shortcat.cz - - 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 - - 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 +Reset +===== */ -/* ================================================================= - 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; -} -#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; -} -#fancybox-loading div { - position: absolute; - top: 0; - left: 0; - width: 40px; - height: 480px; - background-image: url('../../images/fancygallery/fancybox.png'); -} -#fancybox-overlay { - position: fixed; - top: 0; - left: 0; - bottom: 0; - right: 0; - background: #000; - z-index: 1100; - display: none; -} -#fancybox-tmp { - padding: 0; +body { margin: 0; + padding: 0; +} +a img, +img { border: 0; - overflow: auto; - display: none; } -#fancybox-wrap { - position: absolute; - top: 0; - left: 0; +form { margin: 0; - padding: 20px; - z-index: 1101; - display: none; + padding: 0; } -#fancybox-outer { - position: relative; - width: 100%; - height: 100%; - background: #FFF; +img { + -ms-interpolation-mode: bicubic; + max-width: 100%; + height: auto; } -#fancybox-inner { - position: absolute; - top: 0; - left: 0; - width: 1px; - height: 1px; - padding: 0; - margin: 0; - outline: none; - overflow: hidden; +/* + +Vzhled body +=========== + +*/ +body { + background: #eee; + color: #000; } -#fancybox-inner:hover { - z-index: 1109; +@media only screen and (min-width: 768px) { + body { + padding-bottom: 50px; + } } -#fancybox-hide-sel-frame { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: transparent; +@media only screen and (min-width: 768px) { + body.ajax { + background: #fff; + padding: 0; + } + body.ajax .container { + -webkit-box-shadow: none; + box-shadow: none; + } } -#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; +/* + +Typografie a linearni design +============================ + +*/ +body, +input, +textarea, +option, +select { + font: 12px / 18px Arial, Helvetica, sans-serif; } -#fancybox-close:hover { - background-position: bottom left; +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: Arial, Helvetica, sans-serif; } -#fancybox_error { - color: #444; - font: normal 12px/20px Arial; - padding: 7px; - margin: 0; +a { + color: #0eb10e; + text-decoration: none; } -#fancybox-content { - height: auto; - width: auto; - padding: 0; - margin: 0; +a:hover, +a:focus, +a:active { + color: #075207; + text-decoration: underline; } -#fancybox-img { - width: 100%; - height: 100%; +p, +ul, +ol, +table, +blockquote { padding: 0; margin: 0; - border: none; - outline: none; - line-height: 0; - vertical-align: top; - -ms-interpolation-mode: bicubic; + margin-bottom: 18px; } -#fancybox-frame { - position: relative; - width: 100%; - height: 100%; - border: none; - display: block; +h1, +.h1 { + font-size: 24px; + line-height: 28px; + margin: 0 0 27px 5px; + color: #666; + font-weight: normal; } -#fancybox-title { - position: absolute; - bottom: 0; - left: 0; - z-index: 1102; +@media only screen and (min-width: 768px) { + h1, + .h1 { + font-size: 24px; + line-height: 28px; + } } -.fancybox-title-inside { - padding: 10px 0; - text-align: center; - color: #333; +h2, +.h2 { + font-size: 16px; + line-height: 20px; + margin: 0 0 9px 0; + padding: 0; + font-weight: normal; + color: #999; } -.fancybox-title-outside { - padding-top: 5px; - color: #FFF; - text-align: center; +@media only screen and (min-width: 768px) { + h2, + .h2 { + font-size: 18px; + line-height: 24px; + } } -.fancybox-title-over { - color: #FFF; - text-align: left; +h3, +.h3 { + display: block; + font-size: 14px; + line-height: 18px; + margin: 0 0 4px 0; + padding: 0; + font-weight: normal; + color: #666; } -#fancybox-title-over { - padding: 10px; - background-image: url('../../images/fancygallery/fancy_title_over.png'); +h4, +.h4 { display: block; + font-size: 12px; + line-height: 18px; + margin: 0; + padding: 0; + font-weight: bold; + color: #666; } -/* 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'); -} -#fancybox-title-left, -#fancybox-title-right { - display: none; -} -#fancybox-title-main { - color: #fff; - text-align: left; - display: block; - opacity: 1; -} -/* 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; +h2 small, +h3 small { + font-size: 12px; + line-height: 18px; + color: #999; } -#fancybox-left { - left: 0px; +big { + font-size: 14px; + line-height: 18px; + font-weight: bold; } -#fancybox-right { - right: 0px; +ul, +ol { + margin: 0 0 18px 14px; + padding: 0 0 0 0; + color: #ccc; } -#fancybox-left-ico, -#fancybox-right-ico { - position: absolute; - top: 50%; - left: -9999px; - width: 61px; - height: 77px; - margin-top: -30px; - cursor: pointer; - z-index: 1107; - display: block; +ul ul, +ul ol, +ol ol, +ol ul { + margin-bottom: 0; } -#fancybox-left-ico { - background-image: url('../../images/fancygallery/fancy_nav_left.png'); - left: 0px; +ul { + list-style-type: square; } -#fancybox-right-ico { - background-image: url('../../images/fancygallery/fancy_nav_right.png'); - left: auto; - right: 0px; -} -#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; +ul li, +ol li { + color: #000; } -/* Shadows are off */ -.fancy-bg { - display: none; +@media only screen and (min-width: 768px) { + h2 small.float_right { + margin-top: 5px; + } } -/* ================================================================= - 2) jquery.jcarousel.css - Zakladni stylopis pro jCarousel +/* +Kontejner layoutu +================= */ -/** - * This
element is wrapped by jCarousel around the list - * and has the classname "jcarousel-container". - */ -.jcarousel-container { +.container { + width: 1000px; + max-width: 100%; + background: #fff url(../../images/layout/sidebox-bg.gif) repeat-y right top; + margin: 0 auto; + margin-bottom: 15px; position: relative; + -webkit-box-shadow: 0 0 50px rgba(0, 0, 0, 0.1); + box-shadow: 0 0 50px rgba(0, 0, 0, 0.1); } -.jcarousel-clip { - z-index: 2; - padding: 0; - margin: 0; - overflow: hidden; - position: relative; +/* # Layout + +Obsah ma celkem 940px (1000px + 30px paddingy). + +## TODO + +- refaktor po prechodu na novou strukturu, viz dole +- % jednotky + +## Struktura layoutu + +Stará: + +``` +#container + .head + #content + #content_head + #content_body + (.row) + .column|.double_column|.triple_column|.half_column + #footNew + #footBottom +``` + +Nová (od 12/2015) + +``` +.container + .head + .content + .content__head + .content__body + (.row) + .column|.double_column|.triple_column|.half_column + #footNew + #footBottom +``` + +*/ +.container { + background-image: none !important; + /* DEPRECATED if newlayout */ } -.jcarousel-list { - z-index: 1; - overflow: hidden; - position: relative; - top: 0; - left: 0; +.container.ajax { + -webkit-box-shadow: none; + box-shadow: none; margin: 0; - padding: 0; -} -.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; } -/** - * The buttons are added dynamically by jCarousel before - * the