diff --git a/css/base.less b/css/base.less index e80363c..846e6cb 100755 --- a/css/base.less +++ b/css/base.less @@ -4,6 +4,30 @@ * @author Jana Deutschlaender */ + +/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ +/* converted vars */ +/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ + +@height-context-bar: 50px; + +@border-radius: __default_border_radius__; + +@font_family_screen: __font_family_screen__; + +@color-border: __border__; +@color-nav: __nav_menu_color__; +@color-nav-hover: __nav_menu_hover_color__; +@color-nav-hover-bg: __nav_menu_hover_bg__; + +@color-content-bg: __background_content__; +@color-site-bg: __background_site__; + +@color-link: __existing__; + +@margin-big: 2.5rem; + + /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* global vars */ /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ @@ -11,6 +35,7 @@ /* + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* fonts */ + @line-height-default: 125%; @line-height-big: 135%; @line-height-bigger: 140%; @@ -18,6 +43,7 @@ /* + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* breakpoints */ + @break-min-xxs: 480; @break-max-xxs: (@break-min-xxs - 1); @@ -68,6 +94,7 @@ /* + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* col width */ + @c12: 100%; @c11: 91.66666667%; @c10: 83.33333333%; @@ -83,68 +110,89 @@ @grid-columns: 12; -/* + + + + + + + + + + + + + + + + + + + + + + + + + + */ -/* margin / padding */ -@margin-big: 2.5rem; - -@border-radius: __default_border_radius__; - - - -@color-border: __border__; -@color-nav: __nav_menu_color__; -@color-nav-hover: __nav_menu_hover_color__; -@color-nav-hover-bg:__nav_menu_hover_bg__; - -@color-content-bg: __background_content__; -@color-site-bg: __background_site__; - -@color-link: __existing__; - -@height-context-bar: 50px; /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* all media */ /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ -html, body{ - font-size: 100.1%; + +html, +body { .reset(); + + font-size: 100.1%; } -header, .nav-direct{ +header, +.nav-direct{ .elementsReset(); } - - div, span, object, h1, h2, h3, h4, h5, h6, p, blockquote, a, abbr, em,acronym, img, strong, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, -input, select, option, textarea, button{ - font-size: 1rem; line-height: 100%; +input, select, option, textarea, button { + font-size: 1rem; + line-height: 100%; } -ol, ul{ list-style: none outside none; } -blockquote, q{ quotes: none; } -acronym{ cursor: help; border-bottom: dotted 1px #333; } +ol, +ul { + list-style: none outside none; +} -*:focus{ outline: 0; } +blockquote, +q { + quotes: none; +} -table{ border-collapse: collapse; border-spacing: 0; empty-cells: show; caption-side: top; } -caption, th, td{ text-align: left; vertical-align: top; } +acronym { + cursor: help; + border-bottom: dotted 1px #333; +} -img{ display: block; float: none; border: none 0; line-height: @line-height-default; } +*:focus { + outline: 0; +} -*, div, nav, header{ +table{ + border-collapse: collapse; + border-spacing: 0; + empty-cells: show; + caption-side: top; +} + +caption, +th, +td { + text-align: left; + vertical-align: top; +} + +img { + display: block; + float: none; + border: none 0; + line-height: @line-height-default; +} + +*, +div, +nav, +header { box-sizing: border-box; } -header, footer, .container, .row, nav, nav > ul{ - &::before, &::after{ +header, +footer, +.container, +.row, nav, +nav > ul { + &::before, + &::after { display: table; content: " "; clear: both; @@ -152,6 +200,8 @@ header, footer, .container, .row, nav, nav > ul{ } +/* + + + + + + + + + + + + + + + + + + + + + + + + + + */ +/* css behaviour */ .sr-out { .sr-out(); @@ -161,7 +211,9 @@ header, footer, .container, .row, nav, nav > ul{ .sr-only(); } -.structure, .none, .mobile-only { +.structure, +.none, +.mobile-only { display: none; } @@ -182,13 +234,11 @@ header, footer, .container, .row, nav, nav > ul{ } - /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* screen only */ /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ -@media screen{ - +@media screen { html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; @@ -199,7 +249,10 @@ header, footer, .container, .row, nav, nav > ul{ display: block; } - audio, canvas, progress, video { + audio, + canvas, + progress, + video { display: inline-block; vertical-align: baseline; } @@ -251,9 +304,11 @@ header, footer, .container, .row, nav, nav > ul{ box-sizing: content-box; height: 0; } + pre { overflow: auto; } + code, kbd, pre, @@ -271,42 +326,50 @@ header, footer, .container, .row, nav, nav > ul{ font: inherit; margin: 0; } - button { - overflow: visible; - } button, select { text-transform: none; } - input[type="checkbox"], - input[type="radio"] { - box-sizing: border-box; - padding: 0; + button { + overflow: visible; } - input[type="number"]::-webkit-inner-spin-button, - input[type="number"]::-webkit-outer-spin-button { - height: auto; + input { + &[type="checkbox"], + &[type="radio"] { + box-sizing: border-box; + padding: 0; + } + + &[type="number"] { + &::-webkit-inner-spin-button, + &::-webkit-outer-spin-button { + height: auto; + } + } + + &[type="search"] { + -webkit-appearance: textfield; + box-sizing: content-box; + + &::-webkit-search-cancel-button, + &::-webkit-search-decoration { + -webkit-appearance: none; + } + } } - input[type="search"] { - -webkit-appearance: textfield; - box-sizing: content-box; - } - - input[type="search"]::-webkit-search-cancel-button, - input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; - } legend { border: 0; padding: 0; } + textarea { overflow: auto; } + table { border-collapse: collapse; border-spacing: 0; @@ -329,17 +392,18 @@ header, footer, .container, .row, nav, nav > ul{ figure, figcaption, footer, header, menu, nav, output, ruby, section, summary, time, mark, audio, video { - font-family: __font_family_screen__; + font-family: @font_family_screen; color: @ini_text; } - } + /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* print only */ /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ -@media print{ - body{ + +@media print { + body { font-size: 12pt; } } diff --git a/css/base_mixins.less b/css/base_mixins.less index 71d4e9f..c478f3b 100755 --- a/css/base_mixins.less +++ b/css/base_mixins.less @@ -4,10 +4,12 @@ * @author Jana Deutschlaender */ + /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* Fonts */ /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ -.setLocalFontFace(@fontFamily,@fontWeight,@localFontName,@localFontNameVar,@filename){ + +.setLocalFontFace(@fontFamily,@fontWeight,@localFontName,@localFontNameVar,@filename) { @font-face { font-family: @fontFamily; font-style: normal; @@ -17,7 +19,7 @@ } } -.setIconFontFace(@fontFamily,@filename){ +.setIconFontFace(@fontFamily,@filename) { @font-face { font-family: @fontFamily; src: ~"url('fonts/icons/"~"@{filename}.eot?6762325')"; @@ -27,9 +29,8 @@ } } -.fontello(){ - - &::before{ +.fontello() { + &::before { font-family: "fontello"; font-style: normal; font-weight: normal; @@ -62,12 +63,11 @@ /* Uncomment for 3D effect */ /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ } - } -.fontello-double(){ - - &::before, &::after{ +.fontello-double() { + &::before, + &::after { font-family: "fontello"; font-style: normal; font-weight: normal; @@ -100,14 +100,13 @@ /* Uncomment for 3D effect */ /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ } - } - /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* Screenreader / Hide */ /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ + .sr-out() { display: block; width: 1px; @@ -118,7 +117,7 @@ left: -200000em; } -.sr-only(){ +.sr-only() { position: absolute; width: 1px; height: 1px; @@ -141,7 +140,7 @@ } } -.hide-text-show-before(){ +.hide-text-show-before() { display: inline-block; overflow: hidden; white-space: nowrap; @@ -150,21 +149,24 @@ width: 1rem; min-height: 1.2em; min-width: 1.4em; + &::before{ text-indent: 0; float: left; } + &::after{ text-indent: 0; float: left; } } + /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* Screenreader / Hide */ /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ -.reset(){ +.reset() { background: transparent; border: none 0; outline: 0; vertical-align: baseline; font-style: normal; @@ -178,7 +180,7 @@ dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, - input, select, option, textarea, button{ + input, select, option, textarea, button { .reset(); } } @@ -187,6 +189,7 @@ /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* Col Grid */ /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ + .make-grid(@class) { .float-grid-columns(@class); .loop-grid-columns(@grid-columns, @class, width); @@ -209,6 +212,3 @@ width: percentage((@index / @grid-columns)); } } - - - diff --git a/style.ini b/style.ini index 6931245..16c4a8d 100755 --- a/style.ini +++ b/style.ini @@ -76,6 +76,7 @@ css/area_nav-pagetools.less = all css/plugins/magic-matcher.less = all css/plugins/do_tasks.less = all + ; _____________ print styles _____________ css/print.css = print