I'm stretched to the size of my parent
```
*/
.stretch {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/*
---
name: .abs
category: Shared/Helpers
tag:
- helpers
---
`.abs` Set the element position to absolute
*/
.abs {
position: absolute;
}
/*
---
name: .rel
category: Shared/Helpers
tag:
- helpers
---
`.rel` Set the element position to relative
*/
.rel {
position: relative;
}
/*
---
name: .vcenter
category: Shared/Helpers
tag:
- helpers
---
`.vcenter` Sets vertical-align to middle
*/
.vcenter {
vertical-align: middle;
}
/*
---
name: .hcenter
category: Shared/Helpers
tag:
- helpers
---
`.hcenter` Sets text-align to center
*/
.hcenter {
text-align: center;
}
/*
---
name: .floatleft
category: Shared/Helpers
tag:
- helpers
---
`.floatleft` Sets float to left
*/
.floatleft {
float: left;
}
/*
---
name: .floatright
category: Shared/Helpers
tag:
- helpers
---
`.floatright` Sets float to right
*/
.floatright {
float: right;
}
/*
---
name: .hidden
category: Shared/Helpers
tag:
- helpers
---
`.hidden` Sets display to none.
*/
.hidden {
display: none;
}
/*
---
name: rem( pixels )
category: Shared/Mixins
template: mixin
tag:
- mixin
parameters:
- name: pixels
description: The pixel value to convert into rem based on the 16px root font-size
optional: false
---
This less function turns a pixel value into a rem value based on the root font-size set to 16px.
An example usage looks like this:
```less
.example {
padding: rem( 15px ) rem( 12px )
}
```
*/
/*
---
name: .for( @array, @code )
category: Shared/Mixins
template: mixin
tag:
- mixin
parameters:
- name: array
description: The array of values to loop over
optional: false
- name: code
description: The code that is executed on every value. You can access the index with `@i` and the value with `@value`
optional: false
---
This mixin allows to execute code over an array
An example usage looks like this:
```less
@colors: #1abc9c, #2ecc71, #3498db, #9b59b6;
.for(@colors, {
.color-@{i} {
color: @value;
}
});
```
This generates:
```css
.color-1 {
color: #1abc9c;
}
.color-2 {
color: #2ecc71;
}
.color-3 {
color: #3498db;
}
.color-4 {
color: #9b59b6;
}
```
*/
/*
---
name: Global Reset
category: Shared
---
The lernetz css library has a set of reset style to have the same behaviour on every browser.
Furthermore this reset sets some global variables like:
* body font-families
* body line-height
* body text-rendering
* :root font-size for proper rem conversion
*/
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: inherit;
vertical-align: baseline;
}
:root {
font-size: 16px;
}
html {
font-size: 100%;
}
body {
line-height: inherit;
color: #000;
font-family: "Akkurat-Regular";
text-rendering: optimizeLegibility;
background-color: #fff;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
select {
vertical-align: middle;
}
textarea {
width: 100%;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
button,
input,
optgroup,
select,
textarea {
color: inherit;
font: inherit;
margin: 0;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/*
* Normalize the behaviour of all browsers
*
* Instead of setting box-sizing fix on all elements we only set it on the root element
* and tell all elements to inherit it's property from the parent
* That way it's possible to overwrite the box-sizing anywhere while keeping proper inheritance
*/
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
a {
text-decoration: none;
color: #ec6449;
}
a > img {
display: block;
}
/*
---
name: Colors
category: Shared/Variables
template: colors
tag:
- variables
- colors
colors:
- variable: "@text-color"
description: "The default text color on the body"
value: "#3F3F40"
- variable: "@text-inverted-color"
description: "The default inverted text color on the body"
value: "#FFF"
- variable: "@action-color"
description: "The main action color used for links and buttons"
value: "#EC6449"
- variable: "@body-color"
description: "The main background color"
value: "#FFF"
---
The color variables that are used throughout the library.
*/
/*
---
name: Global settings
category: Shared/Variables
template: variables
tag:
- variables
variables:
- name: "@text-line-height"
description: "The line height of the body"
default: "1.5rem"
- name: "@font-family"
description: "The font-family of the body"
default: "'Helvetica', sans-serif"
- name: "@text-rendering"
description: "The text-rendering of the body"
default: "optimizeLegibility"
- name: "@transition-duration"
description: "The duration of the slide transitions"
default: "0.4s"
---
These variables setups some global text formatting and styling.
*/
/*
---
name: Size settings
category: Shared/Variables
template: variables
tag:
- variables
- grid
variables:
- name: "@grid-gutter"
description: "The space between the grid children"
default: "rem( 30px )"
- name: "@grid-break-points"
description: "The screensize when the grid should break."
default: "rem(600px), rem(1024px)"
- name: "@grid-break-labels"
description: "The breakpoint label corresponding to the entie in the `@grid-break-points` list"
default: "medium, large"
- name: "@page-padding"
description: "The padding for the .page-fluid component"
default: "rem( 60px )"
---
These variables setups some global sizes mainly for the grid.
*/
/*
---
name: .button-default
category: Buttons/Default
tag:
- component
- button
---
The default button sets some basic properties so it is working as a `button` or `a` tag.
An example for a button:
```jade
button.button-default My Button
```
An example for a link:
```jade
a.button-default My Link
```
*/
.button-default {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: transparent;
border: none;
display: inline-block;
cursor: pointer;
outline: none;
}
/*
---
name: .grid
category: Layout/Grid
tag:
- component
- responsive
compile: true
---
A simple grid system that wraps children nodes based on the viewport width.
## Simple side by side rendering
The easiest use case is to use simple `.col-1`, `.col-1-2`, `.col-1-3`, `.col-1-4` for a side-by-side rendering.
The default value for all child elements of a `.grid` is equivalent to `.col-1`, so for only one child it will span the full width.
```jade
div.grid
div.col-1-2
div.aigis-debug col-1-2
div.col-1-2
div.aigis-debug col-1-2
```
```jade
div.grid
div.col-1-4
div.aigis-debug col-1-4
div.col-3-4
div.aigis-debug col-3-4
```
## Layouts on different devices
The breakpoints for different screen sizes are specified in the `@grid-break-points`, `@grid-break-labels` variables.
The default values define two breakpoints with labels: `.medium-X-X` and `.large-X-X`.
So an example grid with two breakpoints looks like this:
```jade
div.grid
div.medium-1-2.large-1-4.xlarge-1-2
div.aigis-debug col-1 medium-1-2 large-1-4
div.medium-1-2.large-1-4.xlarge-1-2
div.aigis-debug col-1 medium-1-2 large-1-4
div.col-1-2.medium-1-2.large-1-4.xlarge-1-2
div.aigis-debug col-1-2 medium-1-2 large-1-4
div.col-1-2.medium-1-2.large-1-4.xlarge-1-2
div.aigis-debug col-1-2 medium-1-2 large-1-4
```
**Note:** The `col-1` classes are not present on the first two nodes, since this is the default behaviour.
## Reverse order
To reverse the order in which the columns are displayed, you can add the modifier class `.-reverse` to your grid.
The columns will be in DOM order when viewport switches to small layout.
```jade
div.grid.-reverse
div.col-1-4
div.aigis-debug First column in DOM
div.col-1-4
div.aigis-debug Second column in DOM
div.col-1-4
div.aigis-debug Third column in DOM
div.col-1-4
div.aigis-debug Fourth column in DOM
```
## No gutter
If you dont need a spacing/gutter between the grid columns you can use the modifier `.-nogutter`.
```jade
div.grid.-nogutter
div.col-1-4
div.aigis-debug First column in DOM
div.col-1-4
div.aigis-debug Second column in DOM
div.col-1-4
div.aigis-debug Third column in DOM
div.col-1-4
div.aigis-debug Fourth column in DOM
```
*/
.grid {
margin: 0 -0.9375rem;
/**
* Generate all media breakpoints based on the @grid-break-points, @grid-break-labels variables.
*/
}
.grid:after {
content: "";
display: table;
clear: both;
}
.grid > * {
float: left;
position: relative;
width: 100%;
padding: 0 0.9375rem;
}
.grid.-reverse > * {
float: right;
}
.grid.-nogutter {
margin: 0;
}
.grid.-nogutter > * {
padding: 0;
}
.grid .col-1 {
width: 100%;
}
.grid .col-1-2 {
width: 50%;
}
.grid .col-1-3 {
width: 33.33333333%;
}
.grid .col-2-3 {
width: 66.66666667%;
}
.grid .col-1-4 {
width: 25%;
}
.grid .col-3-4 {
width: 75%;
}
@media all and (min-width: 37.5rem) {
.grid > .medium-1 {
width: 100%;
}
.grid > .medium-1-2 {
width: 50%;
}
.grid > .medium-1-3 {
width: 33.33333333%;
}
.grid > .medium-2-3 {
width: 66.66666667%;
}
.grid > .medium-1-4 {
width: 25%;
}
.grid > .medium-3-4 {
width: 75%;
}
}
@media all and (min-width: 64rem) {
.grid > .large-1 {
width: 100%;
}
.grid > .large-1-2 {
width: 50%;
}
.grid > .large-1-3 {
width: 33.33333333%;
}
.grid > .large-2-3 {
width: 66.66666667%;
}
.grid > .large-1-4 {
width: 25%;
}
.grid > .large-3-4 {
width: 75%;
}
}
/*
---
name: img.responsive
category: Layout/Image
tag:
- responsive
compile: true
---
This class makes the image scaling to its max width.
```jade
img.responsive(src='http://www.byui.edu/images/agriculture-life-sciences/flower.jpg')
```
*/
img.responsive {
max-width: 100%;
height: auto;
}
/*
---
name: .media-responsive
category: Layout/Media
tag:
- responsive
compile: true
---
`.media-responsive` - This makes a the `.media-responsive` div a container for any media element (iframe, video, ... ) that responsive scales with a fix ratio.
The media element ( child ) needs the class `.stretch` to fully fill out the parents size.
The `.media-responsive` component has to predefined modifiers: `.-media-4-3`, `.-media-16-9` that define a fix ratio.
```jade
div.media-responsive.-media-16-9
iframe.stretch(src="https://www.youtube.com/watch?v=TCd6PfxOy0Y")
```
*/
.media-responsive {
width: 100%;
position: relative;
padding-bottom: 50%;
}
.media-responsive.-media-4-3 {
padding-bottom: 75%;
}
.media-responsive.-media-16-9 {
padding-bottom: 56.26%;
}
/*
---
name: .page-fluid
category: Page/Fluid
tag:
- responsive
compile: true
---
`.page-fluid` centers the page content and adds a padding so the page sticks not to the browser viewport.
Furthermore it has a max-width based on the last `@grid-break-points` value.
```jade
div.page-fluid
div.aigis-debug Some page content
```
## Max-width page
To broaden the width of the page you can add the modifier `.-unlimited`. Thsi will span the page to the full width.
```jade
div.page-fluid.-unlimited
div.aigis-debug Some page content
```
*/
.page-fluid {
max-width: 70.25rem;
margin: auto;
padding: 0 3.125rem;
}
.page-fluid.-unlimited {
max-width: none;
}
/*
---
name: .row
category: Layout/Row
tag:
- component
compile: true
---
This styling allow to place containers in a row. They will **not** break as the `.grid` but resize them accordingly.
Some benefits of the `.row` approach is the easy vertical centering and the usage of the `.col-auto` class.
## Basic row with vertical centering
You can use the sizing classes `.col-X-X` to define the width of a column as the following example shows.
```jade
div.row
div.col-1-4.aigis-debug col-1-4 with a lot of text that spans the column.
div.col-3-4.aigis-debug col-3-4 content.
```
## Fixed row
There is a `.-fixed` modifier where each column has the same width.
```jade
div.row.-fixed
div.aigis-debug evenly spreadout column
div.aigis-debug evenly spreadout column with more content
div.aigis-debug evenly spreadout column
div.aigis-debug evenly spreadout column with much more content than the other
div.aigis-debug.vcenter evenly spreadout column with .vcenter
```
## Auto sized column width and vcenter
There is a special `.col-auto` class that resizes the column to the size of its content.
This is usefull for example if you have a fixed size logo and the rest of the header has to resize.
```jade
div.row.-center
div.col-auto.aigis-debug
img(src="http://placehold.it/100x100")
div.col-1.aigis-debug The rest
div.col-auto.aigis-debug
img(src="http://placehold.it/200x100")
```
*/
.row {
display: table;
width: 100%;
}
.row.-fixed {
table-layout: fixed;
}
.row.-center > * {
vertical-align: middle;
}
.row.-bottom > * {
vertical-align: bottom;
}
.row.-padded > * + * {
padding-left: 1.875rem;
}
.row > * {
display: table-cell;
}
.row > *.col-1 {
width: 100%;
}
.row > *.col-1-2,
.row > *.col-2-4 {
width: 50%;
}
.row > *.col-1-3 {
width: 33.33333333%;
}
.row > *.col-2-3 {
width: 66.66666667%;
}
.row > *.col-1-4 {
width: 25%;
}
.row > *.col-3-4 {
width: 75%;
}
.row > *.col-auto {
width: auto;
white-space: nowrap;
}
/*
---
name: Colors
category: Shared/Variables
template: colors
tag:
- variables
- colors
colors:
- variable: "@text-color"
description: "The default text color on the body"
value: "#3F3F40"
- variable: "@text-color-inverted"
description: "The default inverted text color on the body"
value: "#FFF"
- variable: "@action-color"
description: "The main action color used for links and buttons"
value: "#EC6449"
- variable: "@border-color"
description: "The color for the border"
value: "#223322"
---
The color variables that are used throughout the library.
*/
/*
* Legal Disclaimer
*
* These Fonts are licensed only for use on these domains and their subdomains:
* lernetz.ch
*
* It is illegal to download or use them on other websites.
*
* While the @font-face statements below may be modified by the client, this
* disclaimer may not be removed.
*
* Lineto.com, 2016
*/
/*
*
* INSTRUCTIONS
*
* Copy the Legal Disclaimer and the @font-faces statements to your regular CSS file.
* The fonts folder(s) should be placed relative to the regular CSS file.
*
* You can use either the complete or subsetted fonts:
* If you don’t require the entire range of characters, you can use the smaller, subsetted webfonts instead.
* See "Glyphs & Languages" for an overview of the characters in the *_subsetted.html file in the root directory of this package.
*
*/
/* Complete */
@font-face {
font-family: "Akkurat-Light";
src: url("fonts/lineto-akkurat-light.eot");
src: url("fonts/lineto-akkurat-light.eot?#iefix") format("embedded-opentype"), url("fonts/lineto-akkurat-light.woff") format("woff");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Akkurat-Regular";
src: url("fonts/lineto-akkurat-regular.eot");
src: url("fonts/lineto-akkurat-regular.eot?#iefix") format("embedded-opentype"), url("fonts/lineto-akkurat-regular.woff") format("woff");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Akkurat-Lightitalic";
src: url("fonts/lineto-akkurat-lightitalic.eot");
src: url("fonts/lineto-akkurat-lightitalic.eot?#iefix") format("embedded-opentype"), url("fonts/lineto-akkurat-lightitalic.woff") format("woff");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Akkurat-Italic";
src: url("fonts/lineto-akkurat-italic.eot");
src: url("fonts/lineto-akkurat-italic.eot?#iefix") format("embedded-opentype"), url("fonts/lineto-akkurat-italic.woff") format("woff");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Akkurat-Bold";
src: url("fonts/lineto-akkurat-bold.eot");
src: url("fonts/lineto-akkurat-bold.eot?#iefix") format("embedded-opentype"), url("fonts/lineto-akkurat-bold.woff") format("woff");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Akkurat-Bolditalic";
src: url("fonts/lineto-akkurat-bolditalic.eot");
src: url("fonts/lineto-akkurat-bolditalic.eot?#iefix") format("embedded-opentype"), url("fonts/lineto-akkurat-bolditalic.woff") format("woff");
font-weight: normal;
font-style: normal;
}
/* first color: second color: third color: */
.home-colors-mixin {
background-color: #011a33;
color: #f3f3f2;
}
.home-colors-mixin a {
color: #f3f3f2;
}
.home-colors-mixin a:hover {
color: #003160;
}
.home-colors-mixin .logo path {
fill: #f3f3f2;
}
.project-colors-mixin {
background-color: #f3f3f2;
color: #003160;
}
.project-colors-mixin a {
color: #003160;
}
.project-colors-mixin a:hover {
color: #003160;
}
.project-colors-mixin .logo path {
fill: #003160;
}
.projects-colors-mixin {
background-color: #f3f3f2;
color: #003160;
}
.projects-colors-mixin a {
color: #003160;
}
.projects-colors-mixin a:hover {
color: #003160;
}
.projects-colors-mixin .logo path {
fill: #003160;
}
.events-colors-mixin {
background-color: #00aecb;
color: #f3f3f2;
}
.events-colors-mixin a {
color: #f3f3f2;
}
.events-colors-mixin a:hover {
color: #f3f3f2;
}
.events-colors-mixin .logo path {
fill: #f3f3f2;
}
.team-colors-mixin {
background-color: white;
color: #ec6449;
}
.team-colors-mixin a {
color: #ec6449;
}
.team-colors-mixin a:hover {
color: #d33516;
}
.team-colors-mixin .logo path {
fill: #ec6449;
}
.newsletter-colors-mixin {
background-color: #011A33;
color: white;
}
.newsletter-colors-mixin a {
color: white;
}
.newsletter-colors-mixin a:hover {
color: #d9d9d9;
}
.newsletter-colors-mixin .logo path {
fill: white;
}
.offer-colors-mixin {
background-color: #011A33;
color: #f3f3f2;
}
.offer-colors-mixin a {
color: #f3f3f2;
}
.offer-colors-mixin a:hover {
color: #f3f3f2;
}
.offer-colors-mixin .logo path {
fill: #f3f3f2;
}
.contact-colors-mixin {
background-color: #ec6449;
color: #d9d9da;
}
.contact-colors-mixin a {
color: #d9d9da;
}
.contact-colors-mixin a:hover {
color: #f3f3f2;
}
.contact-colors-mixin .logo path {
fill: #d9d9da;
}
.blog-colors-mixin {
background-color: #3f3f40;
color: #f3f3f2;
}
.blog-colors-mixin a {
color: #f3f3f2;
}
.blog-colors-mixin a:hover {
color: #f3f3f2;
}
.blog-colors-mixin .logo path {
fill: #f3f3f2;
}
.center-vertical-mixin {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.center {
display: block;
margin: 0 auto;
}
/*
---
name: Global settings
category: Shared/Variables
template: variables
tag:
- variables
variables:
- name: "@text-line-height"
description: "The line height of the body"
default: "1.5rem"
- name: "@font-family"
description: "The font-family of the body"
default: "'Helvetica', sans-serif"
- name: "@text-rendering"
description: "The text-rendering of the body"
default: "optimizeLegibility"
---
These variables setups some global text formatting and styling.
*/
/*
---
name: Size settings
category: Shared/Variables
template: variables
tag:
- variables
- grid
variables:
- name: "@grid-gutter"
description: "The space between the grid children"
default: "rem( 30px )"
- name: "@grid-break-points"
description: "The screensize when the grid should break."
default: "rem(600px), rem(1024px)"
- name: "@grid-break-labels"
description: "The breakpoint label corresponding to the entie in the `@grid-break-points` list"
default: "medium, large"
- name: "@page-padding"
description: "The padding for the .page-fluid component"
default: "rem( 60px )"
---
These variables setups some global sizes mainly for the grid.
*/
a {
color: #000000;
}
.paragraph-element a {
text-decoration: underline;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Akkurat-Bold";
}
h1 {
font-size: 2.8125rem;
letter-spacing: 0.030625rem;
line-height: 2.8125rem;
}
h2 {
font-size: 2.25rem;
letter-spacing: 0.105625rem;
line-height: 2.875rem;
text-transform: uppercase;
margin-bottom: 1.25rem;
}
h3 {
font-size: 1.875rem;
font-family: "Akkurat-Regular";
line-height: 2.375rem;
}
h4 {
font-size: 1.5625rem;
line-height: 2.0625rem;
}
b,
strong {
font-family: "Akkurat-Bold";
}
p,
ul,
ol {
font-size: 1.3125rem;
font-family: "Akkurat-Light";
line-height: 2.125rem;
}
p.lead,
.lead > p {
font-size: 1.875rem;
margin-bottom: 4.375rem;
line-height: 2.375rem;
font-family: "Akkurat-Regular";
}
.small > p {
font-size: 1.0625rem;
font-family: "Akkurat-Regular";
line-height: 1.625rem;
letter-spacing: 0.19px;
}
@media screen and (max-width: 600px) {
h1 {
font-size: 2.5625rem;
letter-spacing: 0.028125rem;
line-height: 3.375rem;
}
h2 {
font-size: 2rem;
letter-spacing: 0.09375rem;
line-height: 2.75rem;
}
h3 {
font-size: 1.75rem;
line-height: 2.375rem;
}
h4 {
font-size: 1.4375rem;
line-height: 2.0625rem;
}
p,
ul,
ol {
font-size: 1.25rem;
line-height: 1.9375rem;
}
}
@media screen and (max-width: 400px) {
h1 {
font-size: 1.875rem;
letter-spacing: 0.019375rem;
line-height: 2.5rem;
}
h2 {
font-size: 1.625rem;
letter-spacing: 0.07625rem;
line-height: 2.25rem;
}
h3 {
font-size: 1.4375rem;
line-height: 1.9375rem;
}
h4 {
font-size: 1.25rem;
line-height: 1.75rem;
}
p,
ul,
ol {
font-size: 1.0625rem;
line-height: 1.6875rem;
}
}
@-webkit-keyframes arrow-up-down {
0% {
bottom: 3.75rem;
}
50% {
bottom: 1.875rem;
}
100% {
bottom: 3.75rem;
}
}
@keyframes arrow-up-down {
0% {
bottom: 3.75rem;
}
50% {
bottom: 1.875rem;
}
100% {
bottom: 3.75rem;
}
}
@-webkit-keyframes arrow-up-down-small {
0% {
bottom: 1.875rem;
}
50% {
bottom: 0.625rem;
}
100% {
bottom: 1.875rem;
}
}
@keyframes arrow-up-down-small {
0% {
bottom: 1.875rem;
}
50% {
bottom: 0.625rem;
}
100% {
bottom: 1.875rem;
}
}
.abstract-footer {
background-color: #f2f2f2;
padding: 2.5rem 0;
margin-top: -6.25rem;
}
.abstract-footer .contact {
margin-top: 1.5rem;
}
.abstract-footer .client p {
margin-bottom: 1.1875rem;
}
.abstract-footer .client h4 {
margin-bottom: 0.25rem;
}
.abstract-footer .client.-left {
clear: left;
padding-top: 1.5rem;
}
.abstract-footer .photo {
float: left;
border-radius: 100%;
width: 129px;
height: 129px;
margin-right: 1.9375rem;
}
@media screen and (max-width: 600px) {
.abstract-footer {
text-align: center;
margin-top: 0;
}
.abstract-footer .photo {
float: none;
margin-bottom: 0.9375rem;
}
.abstract-footer .contact {
margin-bottom: 0.9375rem;
}
}
/*
---
name: Close button
category: Buttons/Coffee
tag:
- components
compile: true
---
```jade
button.button-close
```
*/
.button-close {
position: absolute;
top: 1.875rem;
right: 3.125rem;
border: 0;
border-radius: 100%;
width: 1.3125rem;
height: 1.3125rem;
cursor: pointer;
margin: 0;
}
.button-close:before {
font-size: 1.3125rem;
}
@media only screen and (max-width: 600px) {
.button-close {
right: 1.25rem;
}
}
/*
---
name: Coffee button
category: Buttons/Coffee
tag:
- components
compile: true
---
```jade
button.button-coffee Gimme Coffee
```
*/
.button-coffee {
height: 55px;
width: 55px;
color: white;
background-color: #ec6449;
box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.3);
border-radius: 100%;
display: inline-block;
position: relative;
transition: all 0.3s ease-in-out;
}
.button-coffee:hover {
-webkit-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
}
.-contact .button-coffee {
visibility: hidden;
}
/*
---
name: Main button
category: Buttons/Main
tag:
- components
compile: true
---
```jade
button.button-main My button
```
*/
.button-main {
background-color: #123456;
border: 0;
color: #FFF;
cursor: pointer;
margin: 0;
padding: 0.3125rem 0.625rem;
text-decoration: none;
border-radius: 4px;
font-size: 1rem;
}
/*
---
name: Socialmedia buttons
category: Buttons/Socialmedia
tag:
- components
compile: true
---
```jade
.socialmedia f
```
*/
.socialmedia {
font-size: 1.4375rem;
}
.socialmedia a {
margin-right: 10px;
}
.form-group {
margin: 0 0 0.9375rem 0;
font-size: 1rem;
/*
&.-full {
width:100%;
}
&.-half {
width:49%;
}
*/
}
.form-group label {
display: block;
font-size: 0.8125rem;
margin-bottom: 0.1875rem;
}
.form-group .help-block {
color: red;
font-size: 1rem;
padding: 0.625rem;
}
.form-group .input {
line-height: 2.5rem;
padding: 0 0.3125rem;
width: 50%;
border: 2px solid black;
}
.form-group input[type=submit] {
background: transparent;
cursor: pointer;
padding: 5px 20px 3px 20px;
border: 2px solid #000000;
border-radius: 100px;
font-size: 0.875rem;
text-transform: uppercase;
}
.form-group textarea {
line-height: 20px;
padding: 0 0.3125rem;
width: 50%;
height: 8em;
border: 2px solid black;
}
@media screen and (max-width: 600px) {
.form-group .input {
width: 100%;
}
}
.image-container {
margin-top: 0.9375rem;
margin-bottom: 0.9375rem;
}
.image-container .image {
margin-top: 1.875rem;
}
.image-container .caption {
padding: 0;
padding-left: 0.9375rem;
font-size: 0.9375rem;
font-family: "Akkurat-Light";
line-height: 1.4375rem;
letter-spacing: 0.01rem;
margin-top: 0.6875rem;
}
@media screen and (max-width: 1024px) {
.image-container {
margin-top: 1.25rem;
margin-bottom: 1.25rem;
}
.image-container .caption {
font-size: 0.8125rem;
line-height: 1.3125rem;
letter-spacing: 0.00875rem;
margin-top: 0.4375rem;
}
}
@media screen and (max-width: 400px) {
.image-container {
margin-top: 0.625rem;
margin-bottom: 0.625rem;
}
.image-container .image {
margin-top: 1.25rem;
padding: 0;
}
.image-container .caption {
font-size: 0.6875rem;
letter-spacing: 0.0075rem;
line-height: 1.0625rem;
padding: 0;
}
}
.link-element {
margin-top: 0.625rem;
font-family: "Akkurat-light";
font-size: 1.3125rem;
}
.link-element .description {
font-family: "Akkurat-Bold";
}
.link-element a:hover {
color: #003160;
}
.link-element.-arrow a:before {
content: url(../images/arrow_right.svg);
margin-right: 1rem;
}
.link-element.-button a {
font-family: "Akkurat-Regular";
font-weight: 400;
background: transparent;
cursor: pointer;
padding: 5px 20px 3px 20px;
border: 2px solid #000000;
border-radius: 100px;
font-size: 0.875rem;
text-transform: uppercase;
}
.paragraph-element > a {
color: black;
border-bottom: 2px solid black;
padding-bottom: 2px;
}
.paragraph-element > a:hover {
color: #003160;
}
.paragraph-element > a:visited {
color: black;
}
.paragraph-element.lead > p {
margin-bottom: 4.375rem;
}
.paragraph-element ul,
.paragraph-element ol {
margin-top: 1.25rem;
margin-left: 1.3125rem;
}
@media screen and (max-width: 600px) {
.paragraph-element.lead > p {
font-size: 1.75rem;
margin-bottom: 3.125rem;
}
}
@media screen and (max-width: 400px) {
.paragraph-element.lead > p {
font-size: 1.4375rem;
margin-bottom: 2.1875rem;
}
}
.quote-element {
margin: 0 0 1.5rem 0;
text-align: center;
}
.quote-element .quote {
quotes: "«" "»";
}
.quote-element .quote > p {
display: inline;
padding: 0;
}
.quote-element .quote:before {
font-size: 1.3125rem;
font-family: "Akkurat-Light";
line-height: 2.125rem;
content: open-quote;
}
.quote-element .quote:after {
font-size: 1.3125rem;
font-family: "Akkurat-Light";
line-height: 2.125rem;
content: close-quote;
}
.quote-element .author {
margin-top: 0.625rem;
}
.quote-element .author > p {
font-style: italic;
text-align: center;
padding: 0;
}
.content-element .quote-element + .content-element .quote-element {
margin-top: 4.6875rem;
border: 1px solid black;
}
.titel-element {
margin-bottom: 0.625rem;
}
.titel-element h1 {
margin-bottom: 2.8125rem;
}
.titel-element h2 {
margin-top: 2.8125rem;
margin-bottom: 1.25rem;
}
.titel-element h3 {
margin-top: 2.8125rem;
margin-bottom: 0.625rem;
}
.titel-element h4 {
margin-top: 1rem;
margin-bottom: 0.625rem;
}
.titel-element .-first {
margin-top: 4.375rem;
}
.titel-element .-last {
padding-top: 3.125rem;
margin-top: 6.25rem;
border-top: 1px solid #b3b3b5;
text-align: center;
}
@media screen and (max-width: 600px) {
.titel-element {
margin-bottom: 0;
}
.titel-element h1 {
margin-bottom: 1.875rem;
}
.titel-element h2 {
margin-top: 2.5rem;
margin-bottom: 0.875rem;
}
.titel-element h3 {
line-height: 2.375rem;
}
.titel-element h4 {
margin-top: 0.625rem;
margin-bottom: 0.625rem;
}
.titel-element .-first {
margin-top: 2.8125rem;
}
.titel-element .-last {
padding-top: 1.875rem;
margin-top: 4.375rem;
}
}
@media screen and (max-width: 400px) {
.titel-element h1 {
line-height: 2.5rem;
margin-bottom: 1.25rem;
}
.titel-element h2 {
margin-top: 1.875rem;
margin-bottom: 0.625rem;
}
.titel-element h3 {
line-height: 1.9375rem;
}
.titel-element h4 {
margin-top: 1.25rem;
margin-bottom: 0.375rem;
}
.titel-element.-last {
padding-top: 1.25rem;
margin-top: 3.125rem;
}
}
/*
---
name: Lernetz Logo
category: Components/Logo
tag:
- components
---
```html