clear content

This commit is contained in:
Jana Deutschländer 2017-01-10 14:43:13 +01:00
commit 54bed87c4e
2 changed files with 438 additions and 431 deletions

View file

@ -166,6 +166,9 @@
} }
} }
} }
+ a{
clear: right;
margin-top: 20px;
}
} }

View file

@ -1,430 +1,434 @@
/** /**
* This file provides the basic vars and reset styles. * This file provides the basic vars and reset styles.
* *
* @author Jana Deutschlaender <deutschlaender@cosmocode.de> * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
*/ */
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* converted vars */ /* converted vars */
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
@background_page-header: __background_page-header__; @background_page-header: __background_page-header__;
@border-radius: __default_border_radius__; @border-radius: __default_border_radius__;
@font_family_screen: __font_family_screen__; @font_family_screen: __font_family_screen__;
@color-text: __text__; @color-text: __text__;
@color-border: __border__; @color-border: __border__;
@color-nav: __nav_menu_color__; @color-nav: __nav_menu_color__;
@color-nav-hover: __nav_menu_hover_color__; @color-nav-hover: __nav_menu_hover_color__;
@color-nav-hover-bg: __nav_menu_hover_bg__; @color-nav-hover-bg: __nav_menu_hover_bg__;
@color-content-bg: __background_content__; @color-content-bg: __background_content__;
@color-site-bg: __background_site__; @color-site-bg: __background_site__;
@color-link: __existing__; @color-link: __existing__;
@color-link-hover: @color-nav; @color-link-hover: @color-nav;
@button_color: __button_color__; @button_color: __button_color__;
@button_background: __button_background__; @button_background: __button_background__;
@box-shadow-offset: __box_shadow_offset__; @box-shadow-offset: __box_shadow_offset__;
@box-shadow: __box_shadow__; @box-shadow: __box_shadow__;
@box-shadow-colored: __box_shadow_colored__; @box-shadow-colored: __box_shadow_colored__;
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* global vars */ /* global vars */
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
@height-context-bar: 50px; @height-context-bar: 50px;
@margin-small: 1rem; @margin-small: 1rem;
@margin-default: 1.5rem; @margin-default: 1.5rem;
@margin-big: 2.5rem; @margin-big: 2.5rem;
@grid: @margin-small; @grid: @margin-small;
@transition: ease-out .30s; @transition: ease-out .30s;
/* + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* fonts */ /* fonts */
@font-size-small: .75rem; @font-size-small: .75rem;
@font-size-default: .88rem; @font-size-default: .88rem;
@font-size-big: 1.5rem; @font-size-big: 1.5rem;
@font-size-bigger: 1.75rem; @font-size-bigger: 1.75rem;
@line-height-default: 125%; @line-height-default: 125%;
@line-height-big: 135%; @line-height-big: 135%;
@line-height-bigger: 140%; @line-height-bigger: 140%;
/* + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* breakpoints */ /* breakpoints */
@break-min-xxs: 480; @break-min-xxs: 480;
@break-max-xxs: (@break-min-xxs - 1); @break-max-xxs: (@break-min-xxs - 1);
@break-min-xs: 768; @break-min-xs: 768;
@break-max-xs: (@break-min-xs - 1); @break-max-xs: (@break-min-xs - 1);
@break-min-sm: 992; @break-min-sm: 992;
@break-max-sm: (@break-min-xs - 1); @break-max-sm: (@break-min-xs - 1);
@break-min-md: 1024; @break-min-md: 1024;
@break-max-md: (@break-min-md - 1); @break-max-md: (@break-min-md - 1);
@break-min-lg: 1200; @break-min-lg: 1200;
@break-max-lg: (@break-min-lg - 1); @break-max-lg: (@break-min-lg - 1);
@break-min-xlg: 1440; @break-min-xlg: 1440;
@break-max-xlg: (@break-min-xlg - 1); @break-max-xlg: (@break-min-xlg - 1);
@break-min-xxlg: 1600; @break-min-xxlg: 1600;
@break-max-xxlg: (@break-min-xlg - 1); @break-max-xxlg: (@break-min-xlg - 1);
/* + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* media queries for breakpoints */ /* media queries for breakpoints */
@screen_min-xxs: ~"only screen and (min-width: " ~"@{break-min-xxs}px)"; @screen_min-xxs: ~"only screen and (min-width: " ~"@{break-min-xxs}px)";
@screen_max-xxs: ~"only screen and (max-width: " ~"@{break-max-xxs}px)"; @screen_max-xxs: ~"only screen and (max-width: " ~"@{break-max-xxs}px)";
@screen_min-xs: ~"only screen and (min-width: " ~"@{break-min-xs}px)"; @screen_min-xs: ~"only screen and (min-width: " ~"@{break-min-xs}px)";
@screen_max-xs: ~"only screen and (max-width: " ~"@{break-max-xs}px)"; @screen_max-xs: ~"only screen and (max-width: " ~"@{break-max-xs}px)";
@screen_min-sm: ~"only screen and (min-width: " ~"@{break-min-sm}px)"; @screen_min-sm: ~"only screen and (min-width: " ~"@{break-min-sm}px)";
@screen_max-sm: ~"only screen and (max-width: " ~"@{break-max-sm}px)"; @screen_max-sm: ~"only screen and (max-width: " ~"@{break-max-sm}px)";
@screen_min-md: ~"only screen and (min-width: " ~"@{break-min-md}px)"; @screen_min-md: ~"only screen and (min-width: " ~"@{break-min-md}px)";
@screen_max-md: ~"only screen and (max-width: " ~"@{break-max-md}px)"; @screen_max-md: ~"only screen and (max-width: " ~"@{break-max-md}px)";
@screen_only-md: ~"only screen and (min-width: 800px) and (max-width: " ~"@{break-max-md}px)"; @screen_only-md: ~"only screen and (min-width: 800px) and (max-width: " ~"@{break-max-md}px)";
@screen_min-lg: ~"only screen and (min-width: " ~"@{break-min-lg}px)"; @screen_min-lg: ~"only screen and (min-width: " ~"@{break-min-lg}px)";
@screen_max-lg: ~"only screen and (max-width: " ~"@{break-max-lg}px)"; @screen_max-lg: ~"only screen and (max-width: " ~"@{break-max-lg}px)";
@screen_min-xlg: ~"only screen and (min-width: " ~"@{break-min-xlg}px)"; @screen_min-xlg: ~"only screen and (min-width: " ~"@{break-min-xlg}px)";
@screen_max-xlg: ~"only screen and (max-width: " ~"@{break-max-xlg}px)"; @screen_max-xlg: ~"only screen and (max-width: " ~"@{break-max-xlg}px)";
@screen_min-xxlg: ~"only screen and (min-width: " ~"@{break-min-xxlg}px)"; @screen_min-xxlg: ~"only screen and (min-width: " ~"@{break-min-xxlg}px)";
@screen_max-xxlg: ~"only screen and (max-width: " ~"@{break-max-xxlg}px)"; @screen_max-xxlg: ~"only screen and (max-width: " ~"@{break-max-xxlg}px)";
/* + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* col width */ /* col width */
@c12: 100%; @c12: 100%;
@c11: 91.66666667%; @c11: 91.66666667%;
@c10: 83.33333333%; @c10: 83.33333333%;
@c9: 75%; @c9: 75%;
@c8: 66.66666667%; @c8: 66.66666667%;
@c7: 58.33333333%; @c7: 58.33333333%;
@c6: 50%; @c6: 50%;
@c5: 41.66666667%; @c5: 41.66666667%;
@c4: 33.33333333%; @c4: 33.33333333%;
@c3: 25%; @c3: 25%;
@c2: 16.66666667%; @c2: 16.66666667%;
@c1: 8.33333333%; @c1: 8.33333333%;
@grid-columns: 12; @grid-columns: 12;
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* all media */ /* all media */
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
html, html,
body { body {
.reset(); .reset();
font-size: 100.1%; font-size: 100.1%;
} }
header, header,
.nav-direct{ .nav-direct{
.elementsReset(); .elementsReset();
} }
div, span, object, div, span, object,
h1, h2, h3, h4, h5, h6, p, blockquote, h1, h2, h3, h4, h5, h6, p, blockquote,
a, abbr, em,acronym, img, strong, a, abbr, em,acronym, img, strong,
dl, dt, dd, ol, ul, li, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, table, caption, tbody, tfoot, thead, tr, th, td,
input, select, option, textarea, button { input, select, option, textarea, button {
font-size: 1rem; font-size: 1rem;
line-height: 100%; line-height: 100%;
} }
ol, ol,
ul { ul {
list-style: none outside none; list-style: none outside none;
} }
blockquote, blockquote,
q { q {
quotes: none; quotes: none;
} }
acronym { acronym {
cursor: help; cursor: help;
border-bottom: dotted 1px #333; border-bottom: dotted 1px #333;
} }
*:focus { *:focus {
outline: 0; outline: 0;
} }
table{ table{
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; border-spacing: 0;
empty-cells: show; empty-cells: show;
caption-side: top; caption-side: top;
} }
caption, caption,
th, th,
td { td {
text-align: left; text-align: left;
vertical-align: top; vertical-align: top;
} }
img { img {
display: block; display: block;
float: none; float: none;
border: none 0; border: none 0;
line-height: @line-height-default; line-height: @line-height-default;
} }
*, *,
div, div,
nav, nav,
header { header {
box-sizing: border-box; box-sizing: border-box;
} }
header, header,
footer, footer,
.container, .container,
.row, nav, .row, nav,
nav > ul { nav > ul {
&::before, &::before,
&::after { &::after {
display: table; display: table;
content: " "; content: " ";
clear: both; clear: both;
} }
} }
/* + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* css behaviour */ /* css behaviour */
.sr-out { .sr-out {
.sr-out(); .sr-out();
} }
.sr-only { .sr-only {
.sr-only(); .sr-only();
} }
.structure, .clearer{
.none, clear: both;
.mobile-only { }
display: none;
} .structure,
.none,
.mobile-only { .mobile-only {
display: none; display: none;
@media @screen_max-md { }
display: inline-block;
} .mobile-only {
} display: none;
@media @screen_max-md {
.mobile-hide { display: inline-block;
display: inline-block; }
}
@media @screen_max-md {
display: none; .mobile-hide {
} display: inline-block;
}
@media @screen_max-md {
display: none;
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ }
/* screen only */ }
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
@media screen { /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
html { /* screen only */
-ms-text-size-adjust: 100%; /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
-webkit-text-size-adjust: 100%;
} @media screen {
html {
article, aside, details, figcaption, figure, footer, header, -ms-text-size-adjust: 100%;
main, menu, nav, section, summary { -webkit-text-size-adjust: 100%;
display: block; }
}
article, aside, details, figcaption, figure, footer, header,
audio, main, menu, nav, section, summary {
canvas, display: block;
progress, }
video {
display: inline-block; audio,
vertical-align: baseline; canvas,
} progress,
video {
audio:not([controls]) { display: inline-block;
display: none; vertical-align: baseline;
height: 0; }
}
audio:not([controls]) {
[hidden], display: none;
template { height: 0;
display: none; }
}
[hidden],
a:active, template {
a:hover { display: none;
outline: 0; }
}
a:active,
abbr[title] { a:hover {
border-bottom: 1px dotted; outline: 0;
} }
small { abbr[title] {
font-size: 80%; border-bottom: 1px dotted;
} }
sub, small {
sup { font-size: 80%;
font-size: 75%; }
line-height: 0;
position: relative; sub,
vertical-align: baseline; sup {
} font-size: 75%;
line-height: 0;
sup { position: relative;
top: -0.5em; vertical-align: baseline;
} }
sub { sup {
bottom: -0.25em; top: -0.5em;
} }
svg:not(:root) { sub {
overflow: hidden; bottom: -0.25em;
} }
hr { svg:not(:root) {
box-sizing: content-box; overflow: hidden;
height: 0; }
}
hr {
pre { box-sizing: content-box;
overflow: auto; height: 0;
} }
code, pre {
kbd, overflow: auto;
pre, }
samp {
font-family: monospace, monospace; code,
font-size: 1em; kbd,
} pre,
samp {
button, font-family: monospace, monospace;
input, font-size: 1em;
optgroup, }
select,
textarea { button,
color: inherit; input,
font: inherit; optgroup,
margin: 0; select,
} textarea {
color: inherit;
button, font: inherit;
select { margin: 0;
text-transform: none; }
}
button,
button { select {
overflow: visible; text-transform: none;
} }
input { button {
&[type="checkbox"], overflow: visible;
&[type="radio"] { }
box-sizing: border-box;
padding: 0; input {
} &[type="checkbox"],
&[type="radio"] {
&[type="number"] { box-sizing: border-box;
&::-webkit-inner-spin-button, padding: 0;
&::-webkit-outer-spin-button { }
height: auto;
} &[type="number"] {
} &::-webkit-inner-spin-button,
&::-webkit-outer-spin-button {
&[type="search"] { height: auto;
-webkit-appearance: textfield; }
box-sizing: content-box; }
&::-webkit-search-cancel-button, &[type="search"] {
&::-webkit-search-decoration { -webkit-appearance: textfield;
-webkit-appearance: none; box-sizing: content-box;
}
} &::-webkit-search-cancel-button,
} &::-webkit-search-decoration {
-webkit-appearance: none;
legend { }
border: 0; }
padding: 0; }
}
legend {
textarea { border: 0;
overflow: auto; padding: 0;
} }
table { textarea {
border-collapse: collapse; overflow: auto;
border-spacing: 0; }
}
table {
td, border-collapse: collapse;
th { border-spacing: 0;
padding: 0; }
}
td,
html, body, div, span, applet, object, iframe, th {
h1, h2, h3, h4, h5, h6, p, blockquote, padding: 0;
a, abbr, acronym, address, big, cite, del, dfn, em, img, ins, kbd, q, s, samp, }
small, strike, strong, sub, sup, tt, var,
b, u, i, center, html, body, div, span, applet, object, iframe,
dl, dt, dd, ol, ul, li, h1, h2, h3, h4, h5, h6, p, blockquote,
fieldset, form, label, legend, a, abbr, acronym, address, big, cite, del, dfn, em, img, ins, kbd, q, s, samp,
table, caption, tbody, tfoot, thead, tr, th, td, small, strike, strong, sub, sup, tt, var,
article, aside, canvas, details, embed, b, u, i, center,
figure, figcaption, footer, header, dl, dt, dd, ol, ul, li,
menu, nav, output, ruby, section, summary, fieldset, form, label, legend,
time, mark, audio, video { table, caption, tbody, tfoot, thead, tr, th, td,
font-family: @font_family_screen; article, aside, canvas, details, embed,
color: @ini_text; figure, figcaption, footer, header,
} menu, nav, output, ruby, section, summary,
} time, mark, audio, video {
font-family: @font_family_screen;
color: @ini_text;
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ }
/* print only */ }
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
@media print { /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
body { /* print only */
font-size: 12pt; /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
}
} @media print {
body {
font-size: 12pt;
}
}