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

10 years later #1

Merged
sthag merged 374 commits from development into main 2026-03-07 00:18:59 +01:00
Conversation 0 Commits 374 Files changed 135 +906 -568
15 changed files with 906 additions and 568 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit d8a0b5e8d0 - Show all commits

23
_abovethefold.scss Normal file
View file

@ -0,0 +1,23 @@
/*
* # TABLE OF CONTENTS
*
* - Reset
* - Priority CSS Rules
*
*/
// Reset
// Use a file outside of hippie i.e. other/normalize.css
// -----------------------------------------------------------------------------
// @import "other/normalize.css";
/*
* # NOTE
*
* CSS rules for content which is presented immediately
* to the screen and needs priority loading
*
*/

58
_hippie.scss
View file

@ -1,19 +1,44 @@
// Add Bourbon and Bitters /*
// ------------------------------------------------------------------------------ * # TABLE OF CONTENTS
// @import "bourbon/bourbon"; *
* - Reset
* - Configuration
* - Special modules
* - Basic styles
* - Sections
* - Typography
* - I/O
* - Modules
*
* - Elements
* - Navigation
* - Links
* - Menus
* - Accessibility
* - Alignments
* - Clearings
* - Widgets
* - Content
* - Posts and pages
* - Comments
* - Infinite scroll
* - Media
* - Captions
* - Galleries
*
*/
// Reset // Reset
// Use a file outside of hippie i.e. other/normalize.css // Use a file outside of hippie i.e. other/normalize.css
// ------------------------------------------------------------------------------ // -----------------------------------------------------------------------------
@import "other/normalize.css"; @import "other/normalize.css";
// Global configuration with default values // Global configuration with default values
// Adjustments can be made by copying values from default to config // Adjustments can be made by copying values from default to config
// ------------------------------------------------------------------------------ // -----------------------------------------------------------------------------
@import "default"; // NOTE // do not edit @import "default"; // NOTE // do not edit
@import "config"; // EDIT THIS // copy default values and adjust @import "config"; // EDIT THIS // copy default values and adjust
@ -21,7 +46,7 @@
// Modules and variables // Modules and variables
// Additional modules can be defined here // Additional modules can be defined here
// ------------------------------------------------------------------------------ // -----------------------------------------------------------------------------
@import "modules/flexbox"; @import "modules/flexbox";
@import "modules/vendor"; @import "modules/vendor";
//@import modules/all deprecated because of the new vendor mixin //@import modules/all deprecated because of the new vendor mixin
@ -30,15 +55,22 @@
// Basic styles - this is the core of definitions // Basic styles - this is the core of definitions
// Individual styles can be added her // Individual styles can be added her
// ------------------------------------------------------------------------------ // -----------------------------------------------------------------------------
@import "basic/typo"; @import "basic/common";
@import "basic/io"; @import "basic/typography";
@import "basic/layout"; // Following the w3c document element structure
// https://w3c.github.io/html/index.html#contents
@import "basic/sections";
@import "basic/grouping";
@import "basic/textlevel";
@import "basic/embedded";
@import "basic/tables";
@import "basic/interactive";
// ADD HERE // @import "{name}/example"; // ADD HERE // @import "{name}/example";
// Individual Modules and variables // Individual Modules and variables
// in dependency to other styles // in dependency to other styles
// ------------------------------------------------------------------------------ // -----------------------------------------------------------------------------
@import "modules/card/card_module"; @import "modules/card/card_module";
@import "modules/editor/editor_module"; @import "modules/editor/editor_module";
@import "modules/explanation/explanation_module"; @import "modules/explanation/explanation_module";

119
basic/_common.scss Normal file
View file

@ -0,0 +1,119 @@
// Clearing and floating
// ------------------------------------------------------------------------------
.clear {
clear: both;
&::before,
&::after {
clear: both;
}
}
.float_left {
float: left;
margin-right: $space_3;
}
.overflow {
overflow: auto;
}
// General positioning attributes
// ------------------------------------------------------------------------------
.center_50 {
margin-right: 25%;
margin-left: 25%;
}
.center_25 {
margin-right: 37.5%;
margin-left: 37.5%;
}
.width_full {
width: 100%;
margin-right: 0;
margin-left: 0;
}
// Structure attributes
// ------------------------------------------------------------------------------
// Simulate new body element
.div_body {
width: $basic_width;
@media screen and (orientation: landscape) {
@media (min-width: $screen_small) {
width: $width_2;
}
@media (min-width: $screen_medium) {
width: $width_3;
}
@media (min-width: $screen_large) {
width: $width_4;
}
}
@media screen and (orientation: portrait) {
@media (min-width: $screen_small) {
width: $width_2;
}
}
margin: 0 auto;
border-top-width: $border_width_8;
border-top-style: solid;
border-color: $basic_border_color;
padding-top: $space_3;
}
// Fixed elements
.relative {
position: relative;
}
.div_fix {
position: fixed;
}
.bottom {
bottom: 0;
}
// Space and placeholders
.space_box {
float: left;
display: table;
width: $space_4;
text-align: center;
vertical-align: middle;
span {
display: table-cell;
}
}
.div_placeholder {
width: 100%;
height: $space_4;
border: $border_width_4 solid rgba($black,.1);
border-radius: $basic_corner;
padding: $basic_space;
background-color: rgba($black,.1);
svg {
vertical-align: top;
}
}
.div_placeholder_bkg {
width: 100%;
height: $space_4;
border: $border_width_4 solid rgba($black,.1);
border-radius: $basic_corner;
padding: $basic_space;
/*data:[<mime type>][;charset=<charset>][;base64],<encoded data>*/
background: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0' y='0' width='100%' height='100%'><line x1='2%' y1='2%' x2='98%' y2='98%' stroke='#000' stroke-width='.5'/><line x1='0' y1='100%' x2='100%' y2='0' stroke='#000' stroke-width='.5'/></svg>") no-repeat;
background-color: rgba($black,.1);
}
.div_info {
padding: $space_2 $basic_indent;
border-right: $basic_space solid rgba($echo_color, .6);
background-color: rgba($echo_color, .1) !important;
}

50
basic/_embedded.scss Normal file
View file

@ -0,0 +1,50 @@
// Edits
// -----------------------------------------------------------------------------
// Images
// -----------------------------------------------------------------------------
img {
vertical-align: top;
}
picture {
}
source {
}
// Other stuff
// -----------------------------------------------------------------------------
iframe {
}
embed {
}
object {
}
video {
}
audio {
}
map {
}
area {
}

141
basic/_grouping.scss Normal file
View file

@ -0,0 +1,141 @@
// Basic content
// -----------------------------------------------------------------------------
// Paragraph
p {
@extend %basic;
margin: $basic_space 0;
color: $basic_font_color;
code {
padding: $tiny_space $half_space;
font-size: 1em;
line-height: 1;
}
}
.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;
}
// Address
address {
}
// 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;
}
// Preformat
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;
}
}
// Quote
blockquote {
margin: $basic_space $basic_indent;
}
.quote_mark {
p::before {
content: "\201E \0020";
}
p::after {
content: "\201C \0020";
}
.quote_source {
&::before, &::after {
content: "";
}
}
}
// 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;
}
}
}
// Embedded
figure {
margin: $space_2 $basic_indent;
}
figcaption {
@extend %basic;
}
// Special elements
// -----------------------------------------------------------------------------
main {
}
div {
}

120
basic/_interactive.scss Normal file
View file

@ -0,0 +1,120 @@
// Form basics
// -----------------------------------------------------------------------------
form {
}
fieldset {
margin: $basic_space 0;
border: $basic_border;
}
legend {
@extend %basic;
padding: 0 $half_space;
}
// Common
// -----------------------------------------------------------------------------
label {
@extend %basic;
display: table;
margin: $half_space 0;
input {
display: table-cell;
margin-left: $basic_space;
padding: $half_space ($half_space + 1);
border-style: solid;
border-color: transparent;
background-color: $basic_io_background_color;
color: $basic_io_font_color;
&:hover {
background-color: $black;
color: $white;
}
}
}
input {
}
// More
// -----------------------------------------------------------------------------
button {
}
select {
}
datalist {
}
optgroup {
}
option {
}
textarea {
}
output {
}
progress {
}
meter {
}
// Interactive elements
// -----------------------------------------------------------------------------
details {
}
summary {
}
menu {
}
menuitem {
}
dialog {
}
// Canvas
// -----------------------------------------------------------------------------
canvas {
}

31
basic/_io.scss
View file

@ -1,31 +0,0 @@
// Input/Output styles
// ------------------------------------------------------------------------------
// Common
fieldset {
margin: $basic_space 0;
border: $basic_border;
}
legend {
@extend %basic;
padding: 0 $half_space;
}
label {
@extend %basic;
display: table;
margin: $half_space 0;
input {
display: table-cell;
margin-left: $basic_space;
padding: $half_space ($half_space + 1);
border-style: solid;
border-color: transparent;
background-color: $basic_io_background_color;
color: $basic_io_font_color;
&:hover {
background-color: $black;
color: $white;
}
}
}

225
basic/_layout.scss
View file

@ -1,225 +0,0 @@
// Basic styles
// ------------------------------------------------------------------------------
html {
height: 100%;
box-sizing: border-box;
}
*,
::before,
::after {
box-sizing: inherit;
}
body {
background-color: $basic_background_color;
}
img {
vertical-align: top;
}
.center_50 {
margin-right: 25%;
margin-left: 25%;
}
.center_25 {
margin-right: 37.5%;
margin-left: 37.5%;
}
.width_full {
width: 100%;
margin-right: 0;
margin-left: 0;
}
.clear {
clear: both;
&::before,
&::after {
clear: both;
}
}
.float_left {
float: left;
margin-right: $space_3;
}
.overflow {
overflow: auto;
}
// Layout structure
// ------------------------------------------------------------------------------
// Simulate new body element
.div_body {
width: $basic_width;
@media screen and (orientation: landscape) {
@media (min-width: $screen_small) {
width: $width_2;
}
@media (min-width: $screen_medium) {
width: $width_3;
}
@media (min-width: $screen_large) {
width: $width_4;
}
}
@media screen and (orientation: portrait) {
@media (min-width: $screen_small) {
width: $width_2;
}
}
margin: 0 auto;
border-top-width: $border_width_8;
border-top-style: solid;
border-color: $basic_border_color;
padding-top: $space_3;
}
// Fixed elements
.relative {
position: relative;
}
.div_fix {
position: fixed;
}
.bottom {
bottom: 0;
}
// Layout elements
// ------------------------------------------------------------------------------
// Tabellen
table {
margin-top: $space_2;
margin-bottom: $space_2;
border: $basic_border;
}
th, td {
padding: $half_space;
}
th {
border: $basic_border_width dotted $basic_border_color;
border-bottom: $basic_border;
}
.precol {
border-right: $basic_border;
}
td {
border: $basic_border_width dotted $basic_border_color;
}
.table_blank {
border: $basic_border_width solid transparent;
th, td {
border: $basic_border_width solid transparent;
}
}
.table_free {
border: $basic_border_width solid transparent;
}
.table_stripe {
td {
border-top: 0;
border-bottom: 0;
}
tr:nth-child(even) td {
background-color: rgba($white,.1);
}
}
.table_fix {
table-layout: fixed;
}
// Freiraum
.space_box {
float: left;
display: table;
width: $space_4;
text-align: center;
vertical-align: middle;
span {
display: table-cell;
}
}
.div_placeholder {
width: 100%;
height: $space_4;
border: $border_width_4 solid rgba($black,.1);
border-radius: $basic_corner;
padding: $basic_space;
background-color: rgba($black,.1);
svg {
vertical-align: top;
}
}
.div_placeholder_bkg {
width: 100%;
height: $space_4;
border: $border_width_4 solid rgba($black,.1);
border-radius: $basic_corner;
padding: $basic_space;
/*data:[<mime type>][;charset=<charset>][;base64],<encoded data>*/
background: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0' y='0' width='100%' height='100%'><line x1='2%' y1='2%' x2='98%' y2='98%' stroke='#000' stroke-width='.5'/><line x1='0' y1='100%' x2='100%' y2='0' stroke='#000' stroke-width='.5'/></svg>") no-repeat;
background-color: rgba($black,.1);
}
.div_info {
padding: $space_2 $basic_indent;
border-right: $basic_space solid rgba($echo_color, .6);
background-color: rgba($echo_color, .1) !important;
}
// Print
.div_print {
margin: $space_3 auto;
padding: 1.2cm 0.6cm 0.6cm 2.4cm;
background-color: $white;
}
.dina5 {
width: 14.8cm;
height: 21.0cm;
}
.test {
li:after {
content: "";
display: block;
height: 16px;
}
}
.front_color_1 { color: $alpha_color; &:after { background-color: $alpha_color; } }
.front_color_2 { color: $bravo_color; &:after { background-color: $bravo_color; } }
.front_color_3 { color: $charlie_color; &:after { background-color: $charlie_color; } }
.front_color_4 { color: $delta_color; &:after { background-color: $delta_color; } }
.front_color_5 { color: $echo_color; &:after { background-color: $echo_color; } }
.back_color_1 { background-color: $alpha_color;}
.back_color_2 { background-color: $bravo_color;}
.back_color_3 { background-color: $charlie_color;}
.back_color_4 { background-color: $delta_color;}
.back_color_5 { background-color: $echo_color;}
%label {
padding: 0 $half_space;
}
.label_1 {
@extend %label;
@extend .back_color_1;
}
.label_2 {
@extend %label;
@extend .back_color_2;
}
.label_3 {
@extend %label;
@extend .back_color_3;
}

35
basic/_new.scss Normal file
View file

@ -0,0 +1,35 @@
.test {
li:after {
content: "";
display: block;
height: 16px;
}
}
.front_color_1 { color: $alpha_color; &:after { background-color: $alpha_color; } }
.front_color_2 { color: $bravo_color; &:after { background-color: $bravo_color; } }
.front_color_3 { color: $charlie_color; &:after { background-color: $charlie_color; } }
.front_color_4 { color: $delta_color; &:after { background-color: $delta_color; } }
.front_color_5 { color: $echo_color; &:after { background-color: $echo_color; } }
.back_color_1 { background-color: $alpha_color;}
.back_color_2 { background-color: $bravo_color;}
.back_color_3 { background-color: $charlie_color;}
.back_color_4 { background-color: $delta_color;}
.back_color_5 { background-color: $echo_color;}
%label {
padding: 0 $half_space;
}
.label_1 {
@extend %label;
@extend .back_color_1;
}
.label_2 {
@extend %label;
@extend .back_color_2;
}
.label_3 {
@extend %label;
@extend .back_color_3;
}

18
basic/_print.scss Normal file
View file

@ -0,0 +1,18 @@
// Print elements
// ------------------------------------------------------------------------------
.div_print {
margin: $space_3 auto;
padding: 1.2cm 0.6cm 0.6cm 2.4cm;
background-color: $white;
}
.dina4 {
width: 21.0cm;
height: 29.7cm;
}
.dina5 {
width: 14.8cm;
height: 21.0cm;
}

93
basic/_sections.scss Normal file
View file

@ -0,0 +1,93 @@
// Document
// -----------------------------------------------------------------------------
html {
height: 100%;
box-sizing: border-box;
}
*,
::before,
::after {
box-sizing: inherit;
}
// Basic sections
// -----------------------------------------------------------------------------
body {
font-family: $primary_font_family;
font-size: $basic_size;
line-height: $basic_line;
color: $basic_font_color;
background-color: $basic_background_color;
}
article {
}
section {
}
nav {
}
aside {
}
header {
}
footer {
}
// Headings
// -----------------------------------------------------------------------------
h1, h2, h3, h4, h5. h6 {
}
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;
}

61
basic/_tables.scss Normal file
View file

@ -0,0 +1,61 @@
// Table
// -----------------------------------------------------------------------------
table {
margin-top: $space_2;
margin-bottom: $space_2;
border: $basic_border;
}
th, td {
@extend %basic;
padding: $half_space;
}
th {
border: $basic_border_width dotted $basic_border_color;
border-bottom: $basic_border;
text-align: left;
}
.precol {
border-right: $basic_border;
}
td {
border: $basic_border_width dotted $basic_border_color;
}
.table_blank {
border: $basic_border_width solid transparent;
th, td {
border: $basic_border_width solid transparent;
}
}
.table_free {
border: $basic_border_width solid transparent;
}
.table_stripe {
td {
border-top: 0;
border-bottom: 0;
}
tr:nth-child(even) td {
background-color: rgba($white,.1);
}
}
.table_fix {
table-layout: fixed;
}
caption {
@extend p;
padding: $half_space 0;
border: $basic_border_width dotted $basic_border_color;
text-align: center;
}

143
basic/_textlevel.scss Normal file
View file

@ -0,0 +1,143 @@
// Links
// -----------------------------------------------------------------------------
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;
}
}
// Other elements
// -----------------------------------------------------------------------------
i, em {
font-style: italic;
}
b, strong {
font-weight: 500;
}
small {
}
// Cite
cite {
font-style: italic;
}
q {
}
dfn {
}
abbr {
}
data {
}
time {
}
// Code
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;
}
samp {
}
kbd {
}
sub, sup {
}
u {
}
// Marks
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;
}
.span_solo {
@extend %basic;
color: $basic_font_color;
}
br {
}
wbr {
}
// Edits
// -----------------------------------------------------------------------------
ins {
}
del {
}

299
basic/_typo.scss
View file

@ -1,299 +0,0 @@
// Basic styles
// ------------------------------------------------------------------------------
%basic {
font-family: $primary_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-family: $primary_font_family;
font-size: $basic_size;
line-height: $basic_line;
color: $basic_font_color;
}
// 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;
}

58
basic/_typography.scss Normal file
View file

@ -0,0 +1,58 @@
// Basic styles
// -----------------------------------------------------------------------------
%basic {
font-family: $primary_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
// -----------------------------------------------------------------------------
.txt_center {
text-align: center;
}
.txt_right {
text-align: right;
}