interaktionsweise/hippie
1
1
Fork 0
Code Issues Pull requests Releases 3 Activity Actions

Added sass and changed basic structure

Browse source 
Many things to do.
This commit is contained in:
Stephan 2016-12-01 15:37:49 +01:00
parent ad4697dd9e
commit f2dfe32ca2
22 changed files with 1827 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

297
basic/_typo.scss Normal file
View file

@ -0,0 +1,297 @@
// Basic styles
// ------------------------------------------------------------------------------
%basic {
font-family: $secondary_font_family;
font-size: $text_size_1;
line-height: $text_line_1;
}
%basic_mono {
font-family: $third_font_family;
font-size: $text_size_1;
line-height: $text_line_1;
}
%head_all {
color: $basic_head_color;
}
%head_1 {
font-family: $secondary_font_family;
font-size: $head_size_1;
font-weight: 300;
line-height: $head_line_1;
}
%head_2 {
font-family: $secondary_font_family;
font-size: $head_size_2;
font-weight: 300;
line-height: $head_line_2;
}
%head_3 {
font-family: $secondary_font_family;
font-size: $head_size_3;
font-weight: 300;
line-height: $head_line_3;
}
%head_4 {
font-family: $secondary_font_family;
font-size: $head_size_4;
font-weight: 300;
line-height: $head_line_4;
}
// Specific styles
// ------------------------------------------------------------------------------
body {
font-size: $basic_size;
line-height: $basic_line;
}
// Grouping
p {
@extend %basic;
margin: $basic_space 0;
color: $basic_font_color;
code {
padding: $tiny_space $half_space;
font-size: 1em;
line-height: 1;
}
}
pre {
@extend %basic_mono;
}
.pre_code {
border-color: rgba($white,.1);
border-style: dotted;
border-width: 0 0 0 $border_width_4;
border-radius: $basic_corner;
padding: $basic_space;
background-color: rgba($white,.1);
code {
background-color: transparent;
}
}
blockquote {
margin: $basic_space $basic_indent;
}
figure {
margin: $space_2 $basic_indent;
}
figcaption {
@extend %basic;
}
// Formatting
.p_col_line {
column-rule: $basic_border_width solid $black;
}
.p_col_2, .p_col_3 {
@extend p;
}
.p_col_2 {
column-count: 2;
column-gap: $space_3;
}
.p_col_3 {
column-count: 3;
column-gap: $space_4;
}
.span_solo {
@extend %basic;
color: $basic_font_color;
}
b, strong {
font-weight: 500;
}
i, em {
font-style: italic;
}
mark {
background-color: $alpha_color;
}
.mark_cursor {
color: $basic_highlight_color;
background-color: $black;
}
::-moz-selection {
color: $basic_highlight_color;
background-color: $black;
}
::selection {
color: $basic_highlight_color;
background-color: $black;
}
.txt_center {
text-align: center;
}
.txt_right {
text-align: right;
}
// Special
code {
@extend %basic_mono;
color: lighten($black, 12%);
background-color: rgba($white,.1);
}
.code_solo {
@extend %basic_mono;
padding: $tiny_space $half_space;
color: $basic_font_color;
}
// Quotation
.quote_mark {
p::before {
content: "\201E \0020";
}
p::after {
content: "\201C \0020";
}
.quote_source {
&::before, &::after {
content: "";
}
}
}
cite {
font-style: italic;
}
// Line
hr {
margin: $space_3 auto;
border-width: $basic_border_width 0 0;
border-style: solid;
border-color: $black;
}
.hr_hidden {
@extend hr;
border-color: transparent;
}
.hr_dotted {
@extend hr;
border-style: dotted;
}
// Heading
h1 {
@extend %head_1;
margin: $space_5 0 $space_3;
}
h2 {
@extend %head_2;
margin: $space_4 0 $space_3;
}
h3 {
@extend %head_3;
margin: $space_2 0 $space_2;
text-transform: uppercase;
}
h4 {
@extend %head_3;
margin: $space_2 0 $space_2;
text-transform: none;
}
h5 {
@extend %head_4;
margin: $space_2 0 $basic_space;
text-transform: none;
}
h6 {
@extend %basic;
margin: $basic_space 0;
text-transform: none;
font-weight: bold;
}
// Link
a {
color: $basic_link_color;
// color: lighten($basic_action_color, 20%);
text-decoration: none;
&:active,
&:focus,
&:hover {
color: $basic_highlight_color;
}
}
.link_line {
border-bottom-width: $tiny_space;
border-bottom-style: dotted;
border-color: $basic_border_color;
background-color: transparent;
color: $basic_font_color;
transition: color $basic_duration $basic_timing;
&:active,
&:focus,
&:hover {
background-color: $basic_action_color;
color: $basic_highlight_color;
}
}
// List
dl, ul, ol {
margin: $space_2 0 $basic_space;
}
ul, ol {
padding-left: $basic_indent;
}
li, dt, dd {
@extend %basic;
color: $black;
}
dd {
margin-left: $basic_indent;
}
ul {
li {
list-style: none;
position: relative;
&:before {
content: "_";
position: absolute;
left: -1em;
}
}
}
// Table
th, td {
@extend %basic;
}
th {
text-align: left;
}
caption {
@extend p;
padding: $half_space 0;
border: $basic_border_width dotted $basic_border_color;
text-align: center;
}