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

Renaming

Browse source
This commit is contained in:
Stephan Hagedorn 2017-08-23 11:25:00 +02:00
parent 615e5df2d9
commit 8ec7ce370f
8 changed files with 31 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

14
elements/_grouping.scss
View file

@ -12,17 +12,17 @@ p {
}
}
.p__col_line {
.p__column_line {
column-rule: $basic_border_width solid $darkest_color;
}
.p__col_2, .p__col_3 {
.p__column_2, .p__column_3 {
@extend p;
}
.p__col_2 {
.p__column_2 {
column-count: 2;
column-gap: $space_3;
}
.p__col_3 {
.p__column_3 {
column-count: 3;
column-gap: $space_4;
}
@ -89,7 +89,7 @@ blockquote {
// List
dl, ul, ol {
margin: $space_2 0 $basic_space;
margin: $double_space 0 $basic_space;
}
ul, ol {
@ -156,7 +156,7 @@ ul {
// Embedded
figure {
margin: $space_2 $basic_indent;
margin: $double_space $basic_indent;
}
figcaption {
@ -177,7 +177,7 @@ div {
}
.box__info {
padding: $space_2 $basic_indent;
padding: $double_space $basic_indent;
border-right: $basic_space solid rgba($echo_color, .6);
background-color: rgba($echo_color, .1) !important;
}

6
elements/_sections.scss
View file

@ -121,19 +121,19 @@ h2 {
h3 {
@extend %head_3;
margin: $space_2 0 $space_2;
margin: $double_space 0 $double_space;
text-transform: uppercase;
}
h4 {
@extend %head_3;
margin: $space_2 0 $space_2;
margin: $double_space 0 $double_space;
text-transform: none;
}
h5 {
@extend %head_4;
margin: $space_2 0 $basic_space;
margin: $double_space 0 $basic_space;
text-transform: none;
}

24
example.css
View file

@ -180,7 +180,7 @@ textarea:not([disabled]):focus {
color: white;
border-color: transparent; }
.span__solo, h6, p, .p__col_2, .p__col_3, caption, li, dt, dd, figcaption, th, td, legend, label {
.span__solo, h6, p, .p__column_2, .p__column_3, caption, li, dt, dd, figcaption, th, td, legend, label {
font-family: Roboto, Segoe UI, Liberation Sans, Source Sans, Trebuchet MS, Helvetica, Arial, sans-serif, sans;
font-size: 1em;
line-height: 1.5; }
@ -190,7 +190,7 @@ pre, code, .code__solo {
font-size: 1em;
line-height: 1.5; }
.print_body *[class^="din"] p, .print_body *[class^="din"] .p__col_2, .print_body *[class^="din"] .p__col_3, .print_body *[class^="din"] caption {
.print_body *[class^="din"] p, .print_body *[class^="din"] .p__column_2, .print_body *[class^="din"] .p__column_3, .print_body *[class^="din"] caption {
font-family: Courier New, monospace;
font-size: 1em;
line-height: 1.5; }
@ -303,21 +303,21 @@ h6 {
text-transform: none;
font-weight: bold; }
p, .p__col_2, .p__col_3, caption {
p, .p__column_2, .p__column_3, caption {
margin: 8px 0; }
p code, .p__col_2 code, .p__col_3 code, caption code {
p code, .p__column_2 code, .p__column_3 code, caption code {
padding: 1px 4px;
font-size: 1em;
line-height: 1; }
.p__col_line {
.p__column_line {
column-rule: 1px solid black; }
.p__col_2 {
.p__column_2 {
column-count: 2;
column-gap: 32px; }
.p__col_3 {
.p__column_3 {
column-count: 3;
column-gap: 64px; }
@ -346,9 +346,9 @@ hr, .hr__hidden, .hr__dotted {
blockquote {
margin: 8px 2em; }
.quote__mark p::before, .quote__mark .p__col_2::before, .quote__mark .p__col_3::before, .quote__mark caption::before {
.quote__mark p::before, .quote__mark .p__column_2::before, .quote__mark .p__column_3::before, .quote__mark caption::before {
content: "\201E \0020"; }
.quote__mark p::after, .quote__mark .p__col_2::after, .quote__mark .p__col_3::after, .quote__mark caption::after {
.quote__mark p::after, .quote__mark .p__column_2::after, .quote__mark .p__column_3::after, .quote__mark caption::after {
content: "\201C \0020"; }
.quote__mark .quote__source::before, .quote__mark .quote__source::after {
content: ""; }
@ -775,7 +775,7 @@ nav li {
font-size: 24px;
line-height: 1.4em;
font-weight: normal; }
.card_body p, .card_body .p__col_2, .card_body .p__col_3, .card_body caption {
.card_body p, .card_body .p__column_2, .card_body .p__column_3, .card_body caption {
margin-top: 0;
margin-bottom: 16px;
font-size: 12px;
@ -950,7 +950,7 @@ nav li {
flex-direction: row; }
.print_body *[class^="din"] .page_foot *:last-child {
margin-bottom: 0; }
.print_body *[class^="din"] .page_foot p, .print_body *[class^="din"] .page_foot .p__col_2, .print_body *[class^="din"] .page_foot .p__col_3, .print_body *[class^="din"] .page_foot caption {
.print_body *[class^="din"] .page_foot p, .print_body *[class^="din"] .page_foot .p__column_2, .print_body *[class^="din"] .page_foot .p__column_3, .print_body *[class^="din"] .page_foot caption {
flex: 1 0 auto;
margin: 0;
font-size: 8pt;
@ -961,7 +961,7 @@ nav li {
font-size: 20pt;
line-height: 1;
text-align: right; }
.print_body *[class^="din"] .page_foot p:first-child, .print_body *[class^="din"] .page_foot .p__col_2:first-child, .print_body *[class^="din"] .page_foot .p__col_3:first-child, .print_body *[class^="din"] .page_foot caption:first-child {
.print_body *[class^="din"] .page_foot p:first-child, .print_body *[class^="din"] .page_foot .p__column_2:first-child, .print_body *[class^="din"] .page_foot .p__column_3:first-child, .print_body *[class^="din"] .page_foot caption:first-child {
text-align: left; }
.print_body *[class^="din"] .page_content {
margin-top: 10cm;

6
example.html
View file

@ -83,9 +83,9 @@
<hr class="hr__dotted js_pop" emmet/><div class="exp_pop"><code class="code__solo">hr.hr__dotted</code></div><!--hr.hr__dotted-->
<hr class="center_50 js_pop"/><div class="exp_pop"><code class="code__solo">hr.center_50</code></div>
<hr class="hr__dotted center_25 js_pop"/><div class="exp_pop"><code class="code__solo">hr.hr__dotted.center_25</code></div>
<p class="p__col_2 js_pop">Zur horizontalen Unterteilung kommt natürlich auch eine vertikale Trennung hinzu. Text kann so zum Beispiel in mehrere Spalten unterteilt werden. Dies ist hilfreich, wenn ein Text durch eine breite Fläche sehr lange Zeilen bekommen würde. Es ist dann schwer den neuen Zeilanfang zu finden. Die vertikale Trennung dient in erster Linie dazu, diesem Umstand zu begegnen. Auch hier kann die Unterteilung viele Formen annehmen.</p><div class="exp_pop"><code class="code__solo">p.p__col_2</code></div>
<p class="p__col_3 p__col_line js_pop">Drei Spalten gilt es jetzt also zu Füllen. Dann erst wird die Trennung der Spalten durch eine Linie sichtbar.</p><div class="exp_pop"><code class="code__solo">p.p__col_3.p__col_line</code></div>
<p class="p__col_3 p__col_line">Ist der Text nicht lang genug bleibt eventuell eine Spalte leer. Diesmal wird dies aber nicht passieren, denn das Anschauungsbeispiel ist ja nun durch den vorherigen Absatz schon gegeben.<br/>Oft ist es sinnvoll, Absätze mit mehreren Spalten deutlich von nachfolgenden Absätzen zu trennen. Da der Textfluss spaltenweise verläuft, liest man eventuell an der falschen Stelle weiter. Ach das ziegen diese beiden Absätze ganz gut.</p>
<p class="p__column_2 js_pop">Zur horizontalen Unterteilung kommt natürlich auch eine vertikale Trennung hinzu. Text kann so zum Beispiel in mehrere Spalten unterteilt werden. Dies ist hilfreich, wenn ein Text durch eine breite Fläche sehr lange Zeilen bekommen würde. Es ist dann schwer den neuen Zeilanfang zu finden. Die vertikale Trennung dient in erster Linie dazu, diesem Umstand zu begegnen. Auch hier kann die Unterteilung viele Formen annehmen.</p><div class="exp_pop"><code class="code__solo">p.p__column_2</code></div>
<p class="p__column_3 p__column_line js_pop">Drei Spalten gilt es jetzt also zu Füllen. Dann erst wird die Trennung der Spalten durch eine Linie sichtbar.</p><div class="exp_pop"><code class="code__solo">p.p__column_3.p__column_line</code></div>
<p class="p__column_3 p__column_line">Ist der Text nicht lang genug bleibt eventuell eine Spalte leer. Diesmal wird dies aber nicht passieren, denn das Anschauungsbeispiel ist ja nun durch den vorherigen Absatz schon gegeben.<br/>Oft ist es sinnvoll, Absätze mit mehreren Spalten deutlich von nachfolgenden Absätzen zu trennen. Da der Textfluss spaltenweise verläuft, liest man eventuell an der falschen Stelle weiter. Ach das ziegen diese beiden Absätze ganz gut.</p>
<p>Es gibt die Möglichkeit vorformatierten Text darzustellen <code>&lt;pre&gt;</code>.</p>
<pre>Dadurch<br/> bleiben<br/> Einrückungen<br/> durch<br/> Tabulatoren<br/> erhalten.</pre>
<p>Text bekommt durch Listen besondere optische wie auch inhaltliche Struktur. Es gibt ungeordnete <code>&lt;ul&gt;</code> und geordnete Listen <code>&lt;ol&gt;</code> sowie Beschreibungslisten <code>&lt;dl&gt;</code>. Die beiden ersten Varianten beinhalten das Listenelement <code>&lt;li&gt;</code>. Beschreibungslisten beinhalten jeweils das Paar von Ausdruck <code>&lt;dt&gt;</code> und Beschreibung <code>&lt;dd&gt;</code>. Im Folgenden eine Liste der Listen in ihrer Ausgangskonfiguration:</p>

2
global/_config.scss
View file

@ -128,7 +128,7 @@ $width_large: 48%;
$basic_space: $default_space;
$half_space: $basic_space / 2;
$space_2: $basic_space * 2;
$double_space: $basic_space * 2;
$space_3: $basic_space * 4;
$space_4: $basic_space * 8;
$space_5: $basic_space * 16;

4
modules/demo/_demo_module.scss
View file

@ -7,7 +7,7 @@
}
.demo__header {
padding: $space_2;
padding: $double_space;
nav {
@ -59,7 +59,7 @@
.demo__footer {
width: 100%;
// height: 128px;
padding: $space_2 0;
padding: $double_space 0;
background-color: $dark_color;
color: $bright_color;

4
modules/explanation/_explanation_module.scss
View file

@ -83,8 +83,8 @@
}
.exp_help_btn {
display: table;
right: $space_2;
bottom: $space_2;
right: $double_space;
bottom: $double_space;
background-color: rgba($darkest_color, .4);
&:hover {
background-color: $brightest_color;

2
modules/navigation/_nav_module.scss
View file

@ -120,7 +120,7 @@ nav {
// display: table;
// width: 3em;
right: 0;
bottom: $space_2;
bottom: $double_space;
ul {
margin: $basic_space 0;