website_template/scss/main.scss
2014-06-29 12:46:19 +02:00

141 lines
1.9 KiB
SCSS

/*----------------------------------------*\
Schwerkraftlabor.de | @Gehirnfussel
\*----------------------------------------*/
/* Imports
--------------------------*/
/* @import 'normalize'; */
/* @import 'font-awesome'; */
@import 'mixins';
@import 'defaults';
/* Content
--------------------------*/
$linkcolor: #660000;
body {
color: #000;
font-family: $font-sans-serif;
font-size: 12pt;
@include font-smoothing(off);
}
h1, h2, h3 {
font-family: $font-sans-serif;
font-weight: 700;
line-height: 1.2em;
margin: 0.4em 0.0em;
}
h1 {
font-size: 2.0em;
word-break: break-all;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.25em;
}
p {
line-height: 1.45em;
padding: 0.5em 0;
}
ul {
li {
margin: 0.3em 0em 0.3em 0.5em;
list-style-position: inside;
list-style-type: square;
font-size: 1em;
p {
padding-left: 1em;
}
}
}
a {
color: $linkcolor;
@include transition(color 0.2s ease);
&:hover, &:active, &:focus{
color: lighten($linkcolor, 15%);
}
&:active {
position: relative;
top: 1px;
}
}
a.notdown {
&:active {
position: inherit;
}
}
@media screen {
a.external:after {
content: "\00A0" "[" "\2197" "]";
}
}
/* Header
--------------------------*/
#instantclick-bar {
background: #f00;
}
/* Content
--------------------------*/
/* Footer
--------------------------*/
/* Responsive Stuff
--------------------------*/
@media screen and (max-width: 768px) {
.column.full,
.column.three-fourth,
.column.two-thirds,
.column.half {
float: none;
margin: 0;
width: 100%;
}
.column.one-third,
.column.one-fourth {
float: left;
margin: 0;
width: 50%;
padding: 0.4em;
}
}
@media screen and (max-width: 568px) {
.column.one-third,
.column.two-third {
float: none;
margin: 0;
width: 100%;
}
}
@media screen and (max-width: 480px) {
.column.one-third,
.column.one-fourth,
.column.full,
.column.three-fourth,
.column.two-thirds,
.column.half,
.column.full {
float: left;
margin: 0;
width: 100%;
}
}