diff --git a/Gruntfile.js b/Gruntfile.js index e826c6d..e40b4fc 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,16 +1,14 @@ module.exports = function(grunt) { - - const sass = require('node-sass'); + const sass = require("node-sass"); // Nacteme vsechny grunt tasky a urychlime srandu require("jit-grunt")(grunt); grunt.initConfig({ - sass: { options: { - implementation: sass, - sourceMap: true + implementation: sass, + sourceMap: true }, default: { files: { @@ -56,7 +54,7 @@ module.exports = function(grunt) { options: { syntax: "scss" }, - src: ["scss/**/*.scss"] + src: ["scss/components-new/**/*.scss"] }, watch: { diff --git a/css/style.css b/css/style.css index 8fba9ef..66bb576 100644 --- a/css/style.css +++ b/css/style.css @@ -1,1581 +1,1605 @@ @charset "UTF-8"; /* - 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"); } +body { + margin: 0; + padding: 0; } -#fancybox-overlay { - position: fixed; - top: 0; - left: 0; - bottom: 0; - right: 0; - background: #000; - z-index: 1100; - display: none; } +a img, +img { + border: 0; } -#fancybox-tmp { - padding: 0; +form { margin: 0; - border: 0; - overflow: auto; - display: none; } + padding: 0; } -#fancybox-wrap { - position: absolute; - top: 0; - left: 0; - margin: 0; - padding: 20px; - z-index: 1101; - display: none; } +img { + -ms-interpolation-mode: bicubic; + max-width: 100%; + height: auto; } -#fancybox-outer { - position: relative; - width: 100%; - height: 100%; - background: #FFF; } +/* -#fancybox-inner { - position: absolute; - top: 0; - left: 0; - width: 1px; - height: 1px; - padding: 0; - margin: 0; - outline: none; - overflow: hidden; } +Vzhled body +=========== -#fancybox-inner:hover { - z-index: 1109; } +*/ +body { + background: #eee; + color: #000; } + @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; } +/* -#fancybox-close:hover { - background-position: bottom left; } +Typografie a linearni design +============================ -#fancybox_error { - color: #444; - font: normal 12px/20px Arial; - padding: 7px; - margin: 0; } +*/ +body, +input, +textarea, +option, +select { + font-size: 16px; + line-height: 22px; + font-family: Arial, Helvetica, sans-serif; } -#fancybox-content { - height: auto; - width: auto; - padding: 0; - margin: 0; } +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: Arial, Helvetica, sans-serif; } -#fancybox-img { - width: 100%; - height: 100%; +a { + color: #0eb10e; + text-decoration: none; } + a:hover, a:focus, a:active { + color: #075207; + text-decoration: underline; } + +p, +ul, +ol, +table, +blockquote { padding: 0; margin: 0; - border: none; - outline: none; - line-height: 0; - vertical-align: top; - -ms-interpolation-mode: bicubic; } - -#fancybox-frame { - position: relative; - width: 100%; - height: 100%; - border: none; - display: block; } - -#fancybox-title { - position: absolute; - bottom: 0; - left: 0; - z-index: 1102; } + margin-bottom: 22px; } -.fancybox-title-inside { - padding: 10px 0; - text-align: center; - color: #333; } +h1, +.h1 { + font-size: 24px; + line-height: 28px; + margin: 0 0 27px 5px; + color: #666; + font-weight: normal; } + @media only screen and (min-width: 768px) { + h1, + .h1 { + font-size: 24px; + line-height: 28px; } } -.fancybox-title-outside { - padding-top: 5px; - color: #FFF; - text-align: center; } +h2, +.h2 { + font-size: 16px; + line-height: 20px; + margin: 0 0 9px 0; + padding: 0; + font-weight: normal; + color: #999; } + @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"); - display: block; } +h4, +.h4 { + display: block; + font-size: 16px; + line-height: 22px; + 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"); } +h2 small, +h3 small { + font-size: 16px; + line-height: 22px; + color: #999; } -#fancybox-title-left, -#fancybox-title-right { - display: none; } +big { + font-size: 14px; + line-height: 18px; + font-weight: bold; } -#fancybox-title-main { - color: #fff; - text-align: left; - display: block; - opacity: 1; } +ul, +ol { + margin: 0 0 22px 14px; + padding: 0 0 0 0; + color: #ccc; } -/* 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; } +ul ul, +ul ol, +ol ol, +ol ul { + margin-bottom: 0; } -#fancybox-left { - left: 0px; } +ul { + list-style-type: square; } -#fancybox-right { - right: 0px; } +ul li, +ol li { + color: #000; } -#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; } +@media only screen and (min-width: 768px) { + h2 small.float_right { + margin-top: 5px; } } -#fancybox-left-ico { - background-image: url("../../images/fancygallery/fancy_nav_left.png"); - left: 0px; } +/* +Kontejner layoutu +================= +*/ +.container { + max-width: 1200px; + background: #fff url(../../images/layout/sidebox-bg.gif) repeat-y right top; + margin: 0 auto; + margin-bottom: 15px; + position: relative; + -webkit-box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.1); + box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.1); } -#fancybox-right-ico { - background-image: url("../../images/fancygallery/fancy_nav_right.png"); - left: auto; - right: 0px; } +/* # Layout -#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; } +Obsah ma celkem 940px (1000px + 30px paddingy). -/* Shadows are off */ -.fancy-bg { - display: none; } +## TODO -/* ================================================================= - 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; } +- refaktor po prechodu na novou strukturu, viz dole +- % jednotky -.jcarousel-clip { - z-index: 2; - padding: 0; - margin: 0; - overflow: hidden; - position: relative; } +## Struktura layoutu -.jcarousel-list { - z-index: 1; - overflow: hidden; - position: relative; - top: 0; - left: 0; - margin: 0; - padding: 0; } +Stará: -.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; } +``` +#container + .head + #content + #content_head + #content_body + (.row) + .column|.double_column|.triple_column|.half_column + #footNew + #footBottom +``` -/** - * The buttons are added dynamically by jCarousel before - * the