demo.6 - Demo content and style changes
- sorted many styles for better groups - started renaming of variables $basic_front_color becomes $color_front_basic for example - new demo page examples - moved config file examples to deprecated file
This commit is contained in:
Stephan
parent
c391799d02
commit
48437cc4f4
18 changed files with 907 additions and 739 deletions
185
DEPRECATED.md
185
DEPRECATED.md
|
|
@ -2,9 +2,194 @@
|
|||
|
||||
## Packages
|
||||
|
||||
```
|
||||
"gulp-ruby-sass": "^2.1.1",
|
||||
"gulp-cssnano": "^2.1.3",
|
||||
"gulp-rename": "^1.2.3",
|
||||
"gulp-changed": "^3.2.0",
|
||||
"gulp-newer": "^1.4.0",
|
||||
"gulp-useref": "^3.1.5",
|
||||
```
|
||||
|
||||
## Style
|
||||
|
||||
```
|
||||
The config file is intended to allow users to quickly redefine core elements of the design
|
||||
that will cascade throughout the css to get your design up and running FAST!
|
||||
|
||||
For instruction, please see https://github.com/Anotheruiguy/toadstool/blob/master/sass/doc-src/config.md
|
||||
|
||||
///// Typography configuration///////
|
||||
-----------------------------------------------------------------------------
|
||||
$font_size: 12;
|
||||
|
||||
$heading_1: 46;
|
||||
$heading_2: 32;
|
||||
$heading_3: 28;
|
||||
$heading_4: 18;
|
||||
$heading_5: 18;
|
||||
$heading_6: 18;
|
||||
|
||||
$line: $font_size * 1.5;
|
||||
|
||||
$small_point_size: 10;
|
||||
$large_point_size: 14;
|
||||
|
||||
$primary_font_family: #{"Helvetica Neue", Arial, sans-serif};
|
||||
$secondary_font_family: #{"Helvetica Neue", Arial, sans-serif};
|
||||
$heading_font_family: #{"Helvetica Neue", Arial, sans-serif};
|
||||
|
||||
$icon_font_alpha: #{'ico-fonts'};
|
||||
|
||||
///// Default webfont directory///////
|
||||
-----------------------------------------------------------------------------
|
||||
$webfont_directory: "/fonts/";
|
||||
|
||||
///// default image directory ///////
|
||||
-----------------------------------------------------------------------------
|
||||
In Sinatra, the images folder resides in the public directory. This directory is not made publically accessible,
|
||||
so simply referencing the images directory will be fine.
|
||||
$imgDir: "/images/";
|
||||
|
||||
///// OOCSS generic base colors///////
|
||||
-----------------------------------------------------------------------------
|
||||
Red, green, yellow, blue, accent and black is not law, but a common theme in most designs.
|
||||
Using Toadstool, all you need to do is edit these 6 hex values and everything else is created
|
||||
by magic, unicorns and fairy dust!
|
||||
|
||||
$alpha_primary: #5a2e2e; // red
|
||||
$bravo_primary: #3e4147; // green
|
||||
$charlie_primary: #fffedf; // yellow
|
||||
$delta_primary: #2a2c31; // blue
|
||||
$echo_primary: #dfba69; // accent
|
||||
|
||||
$alpha_gray: #333; //black
|
||||
|
||||
///// Toadstool color math ///////
|
||||
-----------------------------------------------------------------------------
|
||||
Local color functions to create default color palette
|
||||
@import "color/color_math";
|
||||
@import "color/grayscale_math";
|
||||
@import "color/color_defaults";
|
||||
|
||||
///// Grid configuration ///////
|
||||
-----------------------------------------------------------------------------
|
||||
setting default units of measurement for Toadstool grid solution
|
||||
$grid_type: 12; // sets default column grid
|
||||
$grid_uom: percent; // use either ``em`` or ``percent``
|
||||
$grid_padding_l: 0; // sets default left/right padding inside grid block
|
||||
$grid_padding_r: 0; // sets default left/right padding inside grid block
|
||||
$grid_padding_tb: 0; // sets default top/bottom padding inside grid block
|
||||
$grid_border: 0; // sets default border width on all grid blocks
|
||||
$grid_child: none; // sets parent child relationship between grid blocks
|
||||
$grid_align: default; // by default grids float left. Optional argument is ``center``
|
||||
$col_base: 10; // equal to 10px in the standard 960.gs
|
||||
$col_gutter: $col_base * 2; // sets default grid gutter width
|
||||
$grid_960: 960 / 100%; // grid math for percentages
|
||||
|
||||
|
||||
|
||||
///// HTML 5 feature colors ///////
|
||||
-----------------------------------------------------------------------------
|
||||
used with the `ins` tag
|
||||
http://www.w3schools.com/tags/tag_ins.asp
|
||||
$ins_color: $charlie_color;
|
||||
|
||||
used with the `mark` tag
|
||||
http://www.w3schools.com/html5/tag_mark.asp
|
||||
$mark_color: $charlie_color;
|
||||
|
||||
webkit tap highlight color
|
||||
$webkit_tap_hightlight: $delta_color_bravo;
|
||||
|
||||
overrides the default content selection color in the browser
|
||||
$selection_color: $charlie_color;
|
||||
$selection_text_color: $primary_text;
|
||||
|
||||
|
||||
|
||||
///// Config defaults for forms ///////
|
||||
-----------------------------------------------------------------------------
|
||||
$alert_back_color: $alpha_color;
|
||||
|
||||
$input_disabled: $bravo_gray;
|
||||
$input_disabled_bkg: lighten($input_disabled, 75%);
|
||||
$input_disabled_border: lighten($input_disabled, 50%);
|
||||
$input_disabled_text: lighten($input_disabled, 50%);
|
||||
|
||||
$form_field_back_color: $brightest_color;
|
||||
$form_field_focus_color: $brightest_color;
|
||||
$form_field_fail_bkg: $alpha_color_juliet;
|
||||
|
||||
$form_field_border: $charlie_gray;
|
||||
$form_field_border_fail: $alpha_color_echo;
|
||||
$form_field_focus_border_color: $charlie_gray;
|
||||
|
||||
$form_field_text_fail: $alpha_color_echo;
|
||||
$form_label_color: $alpha_gray;
|
||||
$optional_field_text_color: $delta_gray;
|
||||
$instructional_text: $charlie_gray;
|
||||
$placeholder_text: $hotel_gray;
|
||||
$inline_alert_bkg_color: $alpha_color_delta;
|
||||
$inline_alert_text_color: $brightest_color;
|
||||
|
||||
Non-color defaults (currently not represented in the SG view)
|
||||
---------------------------------------------------------
|
||||
$form_field_border_radius: $standard_round_corner;
|
||||
$form_field_text: $primary_text;
|
||||
$form_field_height: 35;
|
||||
$form_field_padding: 6;
|
||||
$form_label_weight: bold;
|
||||
$form_label_lineheight: 20;
|
||||
$inline_alert_lineheight: 30;
|
||||
$inline_alert_left_padding: 12;
|
||||
$inline_alert_weight: bold;
|
||||
$inline_alert_top_margin: 12;
|
||||
$inline_alert_border_width: 1;
|
||||
|
||||
|
||||
|
||||
///// Config defaults for buttons ///////
|
||||
-----------------------------------------------------------------------------
|
||||
$button-color: $delta-color;
|
||||
$button-text-color: $brightest_color;
|
||||
$button-line-height: 32;
|
||||
$button-border-radius: 3;
|
||||
$button-padding: 20;
|
||||
$button-font-size: 18;
|
||||
$button-weight: bold;
|
||||
$button-text-shadow: true;
|
||||
$button-box-shadow: true;
|
||||
|
||||
///// Config defaults for ``standard_rounded_border`` mixin ///////
|
||||
-----------------------------------------------------------------------------
|
||||
$standard_round_corner: 3; // sets default border radius
|
||||
$standard_corner_width: 1px; // sets default border width
|
||||
$standard_border_color: $border_color; // sets default border color
|
||||
|
||||
///// Config defaults for ``standard_block_spacing`` mixin ///////
|
||||
-----------------------------------------------------------------------------
|
||||
$default_block_spacing: 20; // sets margin-bottom
|
||||
|
||||
///// Config defaults for site border style ///////
|
||||
-----------------------------------------------------------------------------
|
||||
$standard_border_style: solid;
|
||||
|
||||
///// Config defaults for ``standard_hr`` mixin ///////
|
||||
-----------------------------------------------------------------------------
|
||||
$standard_hr_spacing: 40; // sets padding and margin bottom
|
||||
$standard_hr_color: $delta_gray;
|
||||
$standard_hr_width: 1px;
|
||||
|
||||
///// Config values for all default shadows ///////
|
||||
-----------------------------------------------------------------------------
|
||||
$h-shadow: 0; // horizontal shadow settings
|
||||
$v-shadow: 2; // vertical shaddow settings
|
||||
$blur: 3; // blur settings
|
||||
|
||||
$inset_color: $shadow_color; // for use with ``dual_box_shadow`` mixin
|
||||
$ih-shadow: 0; // inset horizontal shadow settings
|
||||
$iv-shadow: 2; // inset vertical shaddow settings
|
||||
$is-shadow: 2; // inset spread shaddow settings
|
||||
$iblur: 3; // inset blur settings
|
||||
```
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@
|
|||
"text": "Elements"
|
||||
},
|
||||
{
|
||||
"href": "demo/os.html",
|
||||
"text": "OS"
|
||||
"href": "demo/examples.html",
|
||||
"text": "Examples"
|
||||
},
|
||||
{
|
||||
"href": "demo/tests.html",
|
||||
|
|
@ -33,6 +33,10 @@
|
|||
{
|
||||
"href": "demo/error/500.html",
|
||||
"text": "500"
|
||||
},
|
||||
{
|
||||
"href": "demo/os.html",
|
||||
"text": "OS"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,8 +18,8 @@
|
|||
<p>You can start using it by replacing this file with your own index page.</p>
|
||||
<p>To do this you need to open the file <code>/gulpfile.js</code> and comment out the line <code>index: "demo.html",</code>. Then you need to place your index file (<code>index.njk</code>) into the folder <code>/source/pages</code>.</p>
|
||||
<p>For a very basic start you can make a copy of the demo page <code>blank.njk</code>. You can find it at <code>/source/pages/demo</code>.</p>
|
||||
<p>The folder <i>demo</i> contains examples and also an overview of definitions made.<br/>Follow the white rabbit.</p>
|
||||
<h3>Overview about all the styles</h3>
|
||||
<p>The <i>demo</i> folder contains an overview of all elements and also examples for style combinations and even whole page layouts.<br/>Follow the white rabbit.</p>
|
||||
<h3>Overview</h3>
|
||||
<ul class="list_link">
|
||||
<!-- Loops through "demoadditionallinks" array -->
|
||||
{% for link in demoadditionallinks %}
|
||||
|
|
|
|||
|
|
@ -39,248 +39,27 @@
|
|||
|
||||
<section class="sec_main_center">
|
||||
<header class="header_txt">
|
||||
<h1>Sammlung formatierter Elemente</h1>
|
||||
<p>Die Elemente werden fortlaufend komplexer</p>
|
||||
<h1>Übersicht aller Elemente</h1>
|
||||
<p>Es werden alle grundlegenden Elemente sowie ihre gestalteten Varianten angegeben. Die Elemente sind in Gruppen eingeteilt, die auch das W3Consortium (<a href="https://www.w3.org/TR/2017/REC-html52-20171214/index.html#contents">www.w3.org/TR/2017/REC-html52-20171214/index.html#contents</a>) verwendet.</p>
|
||||
<p>Zu jedem Element werden alle Attribute aufgelistet und die Umsetzung im HTML Dokument als Emmet Syntax dargestellt.</p>
|
||||
</header>
|
||||
<article>
|
||||
<pre class="pre_code"><code>h3.txt_light_color+p</code></pre>
|
||||
<h3 class="txt_light_color">Helle Überschrift</h3>
|
||||
<p>Mit normalem Textabsatz</p>
|
||||
<pre class="pre_code"><code>a>h4</code></pre>
|
||||
<a href=""><h4>Überschrift als Block-Verweis</h4></a>
|
||||
<pre class="pre_code"><code>section>div.float_space_left>img^p+p</code></pre>
|
||||
<section class="overflow">
|
||||
<div class="float_space_left demo__avatar"><img src="./art/bullet.gif" width="256" height="256" alt="Avatar"></div>
|
||||
<p>Vorname Name<br>Straße 1, 01234 Stadt</p><p>+49 (0)123 1337 0000<br><a class="lineLink" href="mailto:name@domain.tld">name@domain.tld</a></p>
|
||||
</section>
|
||||
<pre class="pre_code"><code>div.box_main_indent</code></pre>
|
||||
<div class="box_main_indent">
|
||||
<hr/>
|
||||
<p>Eingerückter Inhalt</p>
|
||||
<hr/>
|
||||
</div>
|
||||
<pre class="pre_code"><code>nav>ul>(li>a.a_button{Punkt $})*4nav>ul>(li>a.a_button_border{Stufe $})*4</code></pre>
|
||||
<div class="overflow">
|
||||
<nav class="float_space_left">
|
||||
<ul>
|
||||
<li><a href="" class="a_button" data-hippie-button-value="1">Erster Punkt</a></li>
|
||||
<li><a href="" class="a_button" data-hippie-button-value="2">Zweiter Punkt</a></li>
|
||||
<li><a href="" class="a_button" data-hippie-button-value="3">Dritter Punkt</a></li>
|
||||
<li><a href="" class="a_button" data-hippie-button-value="4">Vierter Punkt</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="" class="a_button_border">Stufe 1</a></li>
|
||||
<li><a href="" class="a_button_border">Stufe 2</a></li>
|
||||
<li><a href="" class="a_button_border">Stufe 3</a></li>
|
||||
<li><a href="" class="a_button_border">Stufe 4</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<pre class="pre_code"><code>nav.nav_horizontal>ul>(li>a.a_button{Abschnitt $})*4nav.nav_center_old>ul>(li>a.a_button{Typ $})*4</code></pre>
|
||||
<nav class="nav_horizontal">
|
||||
<ul>
|
||||
<li><a href="" class="a_button">Abschnitt 1</a></li>
|
||||
<li><a href="" class="a_button">Abschnitt 2</a></li>
|
||||
<li><a href="" class="a_button">Abschnitt 3</a></li>
|
||||
<li><a href="" class="a_button">Abschnitt 4</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="overflow">
|
||||
<nav class="nav_center_old">
|
||||
<ul>
|
||||
<li><a href="" class="a_button">Typ 1</a></li>
|
||||
<li><a href="" class="a_button">Typ 2</a></li>
|
||||
<li><a href="" class="a_button">Typ 3</a></li>
|
||||
<li><a href="" class="a_button">Typ 4</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<pre class="pre_code"><code>header.header_page>h1+p+nav.nav_separate_right>ul>(li>a.a_button{Nav $})*4^+nav.nav_right>ul>(li>a.a_button{Nav $})*4</code></pre>
|
||||
<header class="header_page demo__header header_fancy">
|
||||
<h1>Aufmacher</h1>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec consectetur diam. Sed nisl odio, volutpat nec nisi sit amet, commodo faucibus est. Donec lacinia vestibulum sapien. Morbi porttitor nibh quis imperdiet scelerisque. Praesent rutrum quam eu sodales luctus.</p>
|
||||
<nav class="nav_separate_right">
|
||||
<ul>
|
||||
<li><a href="" class="a_button">Mensch</a></li>
|
||||
<li><a href="" class="a_button">Pflanze</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<nav class="nav_right">
|
||||
<ul>
|
||||
<li><a href="" class="a_button">Blau</a></li>
|
||||
<li><a href="" class="a_button">Gelb</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<pre class="pre_code"><code>header.header_page>nav.nav_right>ul>(li>a.a_button{Nav $})*4</code></pre>
|
||||
<div class="box_space height_basic">
|
||||
<header id="js_demo_fix" class="header_page demo__header header_fix">
|
||||
<nav class="nav_right">
|
||||
<ul>
|
||||
<li><a href="" class="a_button">Eins</a></li>
|
||||
<li><a href="" class="a_button">Zwei</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<div class="pos_abs pin_bottom width_full">
|
||||
<pre class="pre_code"><code>footer.pos_abs.pin_bottom>nav.nav_column>ul>(li>a.a_button_text)*4</code></pre>
|
||||
<footer id="js_demo_stop" class="demo__footer">
|
||||
<nav class="nav_column nav_separate">
|
||||
<ul>
|
||||
<li><a href="" class="a_button_text">Alpha</a></li>
|
||||
<li><a href="" class="a_button_text">Bravo</a></li>
|
||||
<li><a href="" class="a_button_text">Charlie</a></li>
|
||||
<li><a href="" class="a_button_text">Delta</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<p class="txt_center demo__credits"><i class="i_bright">👨💻</i> mit <i class="i_bright">❤</i> von <a href="https://interaktionsweise.de">Interaktionsweise</a></p>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="flex_child"></div>
|
||||
<div class="flex_child"></div>
|
||||
<div class="flex_child"></div>
|
||||
<div class="flex_child"></div>
|
||||
<div class="flex_child"></div>
|
||||
</div>
|
||||
<div class="flex_column_wrap">
|
||||
<div class="flex_column"><input value="Undefiniert"/></div>
|
||||
<div class="flex_column"><input type="text" size="8" value="Text"/></div>
|
||||
<div class="flex_column"><input type="text" size="8" value="Deaktiviert" disabled/></div>
|
||||
<div class="flex_column"><input type="button" value="Auswählen"></div>
|
||||
<div class="flex_column"><input type="submit" value="Senden" disabled/></div>
|
||||
</div>
|
||||
<form action="" method="get">
|
||||
<p class="label">
|
||||
Show me a <select name="F">
|
||||
<option value="0"> Plain list</option>
|
||||
<option value="1" selected="selected"> Fancy list</option>
|
||||
<option value="2"> Table list</option>
|
||||
</select>
|
||||
Sorted by <select name="C">
|
||||
<option value="N" selected="selected"> Name</option>
|
||||
<option value="M"> Date Modified</option>
|
||||
<option value="S"> Size</option>
|
||||
<option value="D"> Description</option>
|
||||
</select>
|
||||
<select name="O">
|
||||
<option value="A" selected="selected"> Ascending</option>
|
||||
<option value="D"> Descending</option>
|
||||
</select>
|
||||
<select name="V">
|
||||
<option value="0" selected="selected"> in Normal order</option>
|
||||
<option value="1"> in Version order</option>
|
||||
</select>
|
||||
Matching <input type="text" name="P" value="*" />
|
||||
<input type="submit" name="X" value="Go" />
|
||||
</p>
|
||||
</form>
|
||||
|
||||
<h2>Gruppierung</h2>
|
||||
<pre class="pre_code"><code>ul.list_link>(li>a>img)*2+li>a</code></pre>
|
||||
<ul class="list_link">
|
||||
<li><a href=""><img src="./art/letter.gif" alt="">name@domain.tld</a></li>
|
||||
<li><a href=""><img src="./art/bullet.gif" alt="">Work</a></li>
|
||||
<li><a href="">Projects</a></li>
|
||||
</ul>
|
||||
|
||||
<h2>Tabellen</h2>
|
||||
<pre class="pre_code"><code>table.table_link>thead>tr>th{&nbsp;}+th{Ab / Zy}+th{Neu / Alt}^^(tbody>tr>td.cell_icon[rowspan="2"]>img[width=16 height=16]^+td.cell_link>a[target=_blank]{Name}+a[target=_blank]{URL}^+td.cell_date[rowspan="2"]{YYY-MM-DD}^tr>td.cell_text>div.shorten{Beschreibung})*2</code></pre>
|
||||
<table class="table_link js_pop">
|
||||
<thead>
|
||||
<tr>
|
||||
<th> </th>
|
||||
<th>Ab / Zy</th>
|
||||
<th>Neu / Alt</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="cell_icon" rowspan="2"><img src="" alt="" width="16" height="16"></td>
|
||||
<td class="cell_link"><a href="" target="_blank">Name</a><a href="" target="_blank">URL</a></td>
|
||||
<td class="cell_date" rowspan="2">YYYY-MM-DD</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cell_text">
|
||||
<div class="shorten">Beschreibung</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="cell_icon" rowspan="2"><img src="" alt="" width="16" height="16"></td>
|
||||
<td class="cell_link"><a href="" target="_blank">Name</a><a href="" target="_blank">URL</a></td>
|
||||
<td class="cell_date" rowspan="2">YYYY-MM-DD</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cell_text">
|
||||
<div class="shorten">Beschreibung</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h2>Eingebettet</h2>
|
||||
<div class="box_full_width demo__flag">
|
||||
<svg version="1.1" id="vector" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 1920 1200" preserveAspectRatio="xMinYMax slice" alt="Background flag">
|
||||
<rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"></rect>
|
||||
<polygon id="triangle-6" fill="#8E1F68" points="0,1200 1920,458.25 1920,1200 "></polygon>
|
||||
<polygon id="triangle-7" fill="#D30A51" points="0,1200 1920,522.75 1920,1200 "></polygon>
|
||||
<polygon id="triangle-8" fill="#F2AF13" points="0,1200 1920,741.75 1920,1200 "></polygon>
|
||||
<polygon id="triangle-9" fill="#FAD803" points="0,1200 1920,787.5 1920,1200 "></polygon>
|
||||
<polygon id="triangle-4" fill="#3C579A" points="0,1200 0,0 733.5,0 "></polygon>
|
||||
<polygon id="triangle-3" fill="#B7E0F0" points="0,1200 0,0 688.5,0 "></polygon>
|
||||
<polygon id="triangle-2" fill="#6BC7D9" points="0,1200 0,0 453,0 "></polygon>
|
||||
<polygon id="triangle-1" fill="#52BED1" points="0,1200 0,0 370.5,0 "></polygon>
|
||||
</svg>
|
||||
</div>
|
||||
<h1>Bereiche</h1>
|
||||
<p>Elemente:</p>
|
||||
<pre>// body<br>// article<br>// section<br>// nav<br>// aside<br>// h1-h6<br>// header<br>// footer</pre>
|
||||
<h2><body></h2>
|
||||
<p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
|
||||
<h2><article></h2>
|
||||
<p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
|
||||
<h2><section></h2>
|
||||
<p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
|
||||
<h4>Varianten</h4>
|
||||
<pre class="pre_code"><code>section.sec_main_center</code></pre>
|
||||
<pre class="pre_code"><code>section.sec_main_status</code></pre>
|
||||
<h2><h3></h2>
|
||||
<h2><h4></h2>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<header class="sec_main_center header_txt">
|
||||
<h1>Autarke Seiten</h1>
|
||||
<p>Diese Elemente repräsentieren jeweils eine eigene Seite.</p>
|
||||
</header>
|
||||
<article>
|
||||
<section class="sec_main_status demo__status">
|
||||
<div class="wrap_center">
|
||||
<h1>404</h1>
|
||||
<p>Hier ist nichts.</p>
|
||||
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
|
||||
<p>Die angeforderte Ressource wurde nicht gefunden. Dieser Statuscode kann ebenfalls verwendet werden, um eine Anfrage ohne näheren Grund abzuweisen. Links, welche auf solche Fehlerseiten verweisen, werden auch als Tote Links bezeichnet.</p>
|
||||
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p>
|
||||
</blockquote>
|
||||
</div>
|
||||
{% include "hippie/partials/footer-status.njk" %}
|
||||
</section>
|
||||
<section class="sec_main_status demo__status">
|
||||
<div class="wrap_center">
|
||||
<h1>403</h1>
|
||||
<p>Nicht erlaubt! <dfn>Forbidden</dfn></p>
|
||||
<blockquote>
|
||||
<p>Die Anfrage wurde mangels Berechtigung des Clients nicht durchgeführt, bspw. weil der authentifizierte Benutzer nicht berechtigt ist, oder eine als HTTPS konfigurierte URL nur mit HTTP aufgerufen wurde.</p>
|
||||
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p>
|
||||
</blockquote>
|
||||
</div>
|
||||
{% include "hippie/partials/footer-status.njk" %}
|
||||
</section>
|
||||
<section class="sec_main_status demo__status">
|
||||
<div class="wrap_center">
|
||||
<h1>400</h1>
|
||||
<p>Fehlerhafte Anfrage! <dfn>Bad Request</dfn></p>
|
||||
<blockquote>
|
||||
<p>Die Anfrage-Nachricht war fehlerhaft aufgebaut.</p>
|
||||
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p>
|
||||
</blockquote>
|
||||
</div>
|
||||
{% include "hippie/partials/footer-status.njk" %}
|
||||
</section>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
|
||||
</div>
|
||||
{% include "hippie/partials/footer.njk" %}
|
||||
{% endblock %}
|
||||
|
|
|
|||
289
source/pages/demo/examples.njk
Normal file
289
source/pages/demo/examples.njk
Normal file
|
|
@ -0,0 +1,289 @@
|
|||
<!-- page-elements.njk -->
|
||||
{% set pageId = "examples" %}
|
||||
{% set pageClass = "" %}
|
||||
|
||||
{% extends "hippie/demo-extended.njk" %}
|
||||
|
||||
{% block title %}Examples{% endblock %}
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
{% endblock %}
|
||||
|
||||
{% block body_content %}
|
||||
<div class="temp_layer">
|
||||
<!-- <div class="exp_overlay_btn exp_help_btn">
|
||||
<span class="span_solo">?</span>
|
||||
</div> -->
|
||||
{% include "hippie/partials/nav-page-meta.njk" %}
|
||||
</div>
|
||||
<div id="begin" class="">
|
||||
<section class="sec_main_center">
|
||||
<header class="header_txt">
|
||||
<h1>Sammlung formatierter Elemente</h1>
|
||||
<p>Die Elemente werden fortlaufend komplexer</p>
|
||||
</header>
|
||||
<article>
|
||||
<h2><h3></h2>
|
||||
<h4>Beispiele</h4>
|
||||
<pre class="pre_code"><code>h3.txt_color_dark+p</code></pre>
|
||||
<h3 class="txt_color_dark">Dunkle Überschrift</h3>
|
||||
<p>Mit normalem Textabsatz</p>
|
||||
<h2><h4></h2>
|
||||
<h4>Beispiele</h4>
|
||||
<pre class="pre_code"><code>a>h4</code></pre>
|
||||
<a href=""><h4>Überschrift als Block-Verweis</h4></a>
|
||||
<h2><section></h2>
|
||||
<pre class="pre_code"><code>section>div.float_space_left>img^p+p</code></pre>
|
||||
<section class="overflow">
|
||||
<div class="float_space_left demo__avatar"><img src="./art/bullet.gif" width="256" height="256" alt="Avatar"></div>
|
||||
<p>Vorname Name<br>Straße 1, 01234 Stadt</p><p>+49 (0)123 1337 0000<br><a class="lineLink" href="mailto:name@domain.tld">name@domain.tld</a></p>
|
||||
</section>
|
||||
<pre class="pre_code"><code>div.space_left_fourth</code></pre>
|
||||
<div class="space_left_fourth">
|
||||
<hr/>
|
||||
<p>Eingerückter Inhalt</p>
|
||||
<hr/>
|
||||
</div>
|
||||
<pre class="pre_code"><code>nav>ul>(li>a.a_button{Punkt $})*4nav>ul>(li>a.a_button_border{Stufe $})*4</code></pre>
|
||||
<div class="overflow">
|
||||
<nav class="float_space_left">
|
||||
<ul>
|
||||
<li><a href="" class="a_button" data-hippie-button-value="1">Erster Punkt</a></li>
|
||||
<li><a href="" class="a_button" data-hippie-button-value="2">Zweiter Punkt</a></li>
|
||||
<li><a href="" class="a_button" data-hippie-button-value="3">Dritter Punkt</a></li>
|
||||
<li><a href="" class="a_button" data-hippie-button-value="4">Vierter Punkt</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="" class="a_button_border">Stufe 1</a></li>
|
||||
<li><a href="" class="a_button_border">Stufe 2</a></li>
|
||||
<li><a href="" class="a_button_border">Stufe 3</a></li>
|
||||
<li><a href="" class="a_button_border">Stufe 4</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<pre class="pre_code"><code>nav.nav_horizontal>ul>(li>a.a_button{Abschnitt $})*4nav.nav_center_old>ul>(li>a.a_button{Typ $})*4</code></pre>
|
||||
<nav class="nav_horizontal">
|
||||
<ul>
|
||||
<li><a href="" class="a_button">Abschnitt 1</a></li>
|
||||
<li><a href="" class="a_button">Abschnitt 2</a></li>
|
||||
<li><a href="" class="a_button">Abschnitt 3</a></li>
|
||||
<li><a href="" class="a_button">Abschnitt 4</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="overflow">
|
||||
<nav class="nav_center_old">
|
||||
<ul>
|
||||
<li><a href="" class="a_button">Typ 1</a></li>
|
||||
<li><a href="" class="a_button">Typ 2</a></li>
|
||||
<li><a href="" class="a_button">Typ 3</a></li>
|
||||
<li><a href="" class="a_button">Typ 4</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<pre class="pre_code"><code>header.header_page>h1+p+nav.nav_separate_right>ul>(li>a.a_button{Nav $})*4^+nav.nav_right>ul>(li>a.a_button{Nav $})*4</code></pre>
|
||||
<header class="header_page demo__header header_fancy">
|
||||
<h1>Aufmacher</h1>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec consectetur diam. Sed nisl odio, volutpat nec nisi sit amet, commodo faucibus est. Donec lacinia vestibulum sapien. Morbi porttitor nibh quis imperdiet scelerisque. Praesent rutrum quam eu sodales luctus.</p>
|
||||
<nav class="nav_separate_right">
|
||||
<ul>
|
||||
<li><a href="" class="a_button">Mensch</a></li>
|
||||
<li><a href="" class="a_button">Pflanze</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<nav class="nav_right">
|
||||
<ul>
|
||||
<li><a href="" class="a_button">Blau</a></li>
|
||||
<li><a href="" class="a_button">Gelb</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<pre class="pre_code"><code>header.header_page>nav.nav_right>ul>(li>a.a_button{Nav $})*4</code></pre>
|
||||
<div class="box_space height_basic">
|
||||
<header id="js_demo_fix" class="header_page demo__header header_fix">
|
||||
<nav class="nav_right">
|
||||
<ul>
|
||||
<li><a href="" class="a_button">Eins</a></li>
|
||||
<li><a href="" class="a_button">Zwei</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<div class="pos_abs pin_bottom width_full">
|
||||
<pre class="pre_code"><code>footer.pos_abs.pin_bottom>nav.nav_column>ul>(li>a.a_button_text)*4</code></pre>
|
||||
<footer id="js_demo_stop" class="demo__footer">
|
||||
<nav class="nav_column nav_separate">
|
||||
<ul>
|
||||
<li><a href="" class="a_button_text">Alpha</a></li>
|
||||
<li><a href="" class="a_button_text">Bravo</a></li>
|
||||
<li><a href="" class="a_button_text">Charlie</a></li>
|
||||
<li><a href="" class="a_button_text">Delta</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<p class="txt_center demo__credits"><i class="i_bright">👨💻</i> mit <i class="i_bright">❤</i> von <a href="https://interaktionsweise.de">Interaktionsweise</a></p>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="flex_child"></div>
|
||||
<div class="flex_child"></div>
|
||||
<div class="flex_child"></div>
|
||||
<div class="flex_child"></div>
|
||||
<div class="flex_child"></div>
|
||||
</div>
|
||||
<div class="flex_column_wrap">
|
||||
<div class="flex_column"><input value="Undefiniert"/></div>
|
||||
<div class="flex_column"><input type="text" size="8" value="Text"/></div>
|
||||
<div class="flex_column"><input type="text" size="8" value="Deaktiviert" disabled/></div>
|
||||
<div class="flex_column"><input type="button" value="Auswählen"></div>
|
||||
<div class="flex_column"><input type="submit" value="Senden" disabled/></div>
|
||||
</div>
|
||||
<form action="" method="get">
|
||||
<p class="label">
|
||||
Show me a <select name="F">
|
||||
<option value="0"> Plain list</option>
|
||||
<option value="1" selected="selected"> Fancy list</option>
|
||||
<option value="2"> Table list</option>
|
||||
</select>
|
||||
Sorted by <select name="C">
|
||||
<option value="N" selected="selected"> Name</option>
|
||||
<option value="M"> Date Modified</option>
|
||||
<option value="S"> Size</option>
|
||||
<option value="D"> Description</option>
|
||||
</select>
|
||||
<select name="O">
|
||||
<option value="A" selected="selected"> Ascending</option>
|
||||
<option value="D"> Descending</option>
|
||||
</select>
|
||||
<select name="V">
|
||||
<option value="0" selected="selected"> in Normal order</option>
|
||||
<option value="1"> in Version order</option>
|
||||
</select>
|
||||
Matching <input type="text" name="P" value="*" />
|
||||
<input type="submit" name="X" value="Go" />
|
||||
</p>
|
||||
</form>
|
||||
|
||||
<h2>Gruppierung</h2>
|
||||
<pre class="pre_code"><code>ul.list_link>(li>a>img)*2+li>a</code></pre>
|
||||
<ul class="list_link">
|
||||
<li><a href=""><img src="./art/letter.gif" alt="">name@domain.tld</a></li>
|
||||
<li><a href=""><img src="./art/bullet.gif" alt="">Work</a></li>
|
||||
<li><a href="">Projects</a></li>
|
||||
</ul>
|
||||
|
||||
<h2>Tabellen</h2>
|
||||
<pre class="pre_code"><code>table.table_link>thead>tr>th{&nbsp;}+th{Ab / Zy}+th{Neu / Alt}^^(tbody>tr>td.cell_icon[rowspan="2"]>img[width=16 height=16]^+td.cell_link>a[target=_blank]{Name}+a[target=_blank]{URL}^+td.cell_date[rowspan="2"]{YYY-MM-DD}^tr>td.cell_text>div.shorten{Beschreibung})*2</code></pre>
|
||||
<table class="table_link js_pop">
|
||||
<thead>
|
||||
<tr>
|
||||
<th> </th>
|
||||
<th>Ab / Zy</th>
|
||||
<th>Neu / Alt</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="cell_icon" rowspan="2"><img src="" alt="" width="16" height="16"></td>
|
||||
<td class="cell_link"><a href="" target="_blank">Name</a><a href="" target="_blank">URL</a></td>
|
||||
<td class="cell_date" rowspan="2">YYYY-MM-DD</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cell_text">
|
||||
<div class="shorten">Beschreibung</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="cell_icon" rowspan="2"><img src="" alt="" width="16" height="16"></td>
|
||||
<td class="cell_link"><a href="" target="_blank">Name</a><a href="" target="_blank">URL</a></td>
|
||||
<td class="cell_date" rowspan="2">YYYY-MM-DD</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cell_text">
|
||||
<div class="shorten">Beschreibung</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h2>Eingebettet</h2>
|
||||
<div class="demo__flag">
|
||||
<svg version="1.1" id="vector" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 1920 1200" preserveAspectRatio="xMinYMax slice" alt="Background flag">
|
||||
<rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"></rect>
|
||||
<polygon id="triangle-6" fill="#8E1F68" points="0,1200 1920,458.25 1920,1200 "></polygon>
|
||||
<polygon id="triangle-7" fill="#D30A51" points="0,1200 1920,522.75 1920,1200 "></polygon>
|
||||
<polygon id="triangle-8" fill="#F2AF13" points="0,1200 1920,741.75 1920,1200 "></polygon>
|
||||
<polygon id="triangle-9" fill="#FAD803" points="0,1200 1920,787.5 1920,1200 "></polygon>
|
||||
<polygon id="triangle-4" fill="#3C579A" points="0,1200 0,0 733.5,0 "></polygon>
|
||||
<polygon id="triangle-3" fill="#B7E0F0" points="0,1200 0,0 688.5,0 "></polygon>
|
||||
<polygon id="triangle-2" fill="#6BC7D9" points="0,1200 0,0 453,0 "></polygon>
|
||||
<polygon id="triangle-1" fill="#52BED1" points="0,1200 0,0 370.5,0 "></polygon>
|
||||
</svg>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<header class="sec_main_center header_txt">
|
||||
<h1>Autarke Seiten</h1>
|
||||
<p>Diese Elemente repräsentieren jeweils eine eigene Seite.</p>
|
||||
</header>
|
||||
<article>
|
||||
<section class="sec_main_status demo__status">
|
||||
<div class="wrap_center">
|
||||
<h1>404</h1>
|
||||
<p>Hier ist nichts.</p>
|
||||
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
|
||||
<p>Die angeforderte Ressource wurde nicht gefunden. Dieser Statuscode kann ebenfalls verwendet werden, um eine Anfrage ohne näheren Grund abzuweisen. Links, welche auf solche Fehlerseiten verweisen, werden auch als Tote Links bezeichnet.</p>
|
||||
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p>
|
||||
</blockquote>
|
||||
</div>
|
||||
{% include "hippie/partials/footer-status.njk" %}
|
||||
</section>
|
||||
<section class="sec_main_status demo__status">
|
||||
<div class="wrap_center">
|
||||
<h1>403</h1>
|
||||
<p>Nicht erlaubt! <dfn>Forbidden</dfn></p>
|
||||
<blockquote>
|
||||
<p>Die Anfrage wurde mangels Berechtigung des Clients nicht durchgeführt, bspw. weil der authentifizierte Benutzer nicht berechtigt ist, oder eine als HTTPS konfigurierte URL nur mit HTTP aufgerufen wurde.</p>
|
||||
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p>
|
||||
</blockquote>
|
||||
</div>
|
||||
{% include "hippie/partials/footer-status.njk" %}
|
||||
</section>
|
||||
<section class="sec_main_status demo__status">
|
||||
<div class="wrap_center">
|
||||
<h1>400</h1>
|
||||
<p>Fehlerhafte Anfrage! <dfn>Bad Request</dfn></p>
|
||||
<blockquote>
|
||||
<p>Die Anfrage-Nachricht war fehlerhaft aufgebaut.</p>
|
||||
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p>
|
||||
</blockquote>
|
||||
</div>
|
||||
{% include "hippie/partials/footer-status.njk" %}
|
||||
</section>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
|
||||
</div>
|
||||
{% include "hippie/partials/footer.njk" %}
|
||||
{% endblock %}
|
||||
|
||||
{% block script %}
|
||||
{{ super() }}
|
||||
<script src="../vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
|
||||
<script src="../js/all.min.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
// Page specific
|
||||
// ------------------------------------------------------------------------------
|
||||
$( document ).ready(function() {
|
||||
console.log('HIPPIE');
|
||||
|
||||
// jq-sticky-anything
|
||||
$('#js_demo_fix').stickThis({
|
||||
pushup: '#js_demo_stop'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
|
@ -70,8 +70,8 @@
|
|||
<hr class="hr_hidden js_pop"/><div class="exp_pop"><code class="code_solo">hr.hr_hidden</code></div>
|
||||
<p>Die Linie darf auch gepunkted sein. Zudem sind verschiedene Längen möglich. Diese sind immer ein Prozentwert der verfügbaren Breite. Hier in gleicher Reihenfolge 100%, 50% und 25%:</p>
|
||||
<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>
|
||||
<hr class="space_even_half js_pop"/><div class="exp_pop"><code class="code_solo">hr.space_even_half</code></div>
|
||||
<hr class="hr_dotted space_even_fourth js_pop"/><div class="exp_pop"><code class="code_solo">hr.hr_dotted.space_even_fourth</code></div>
|
||||
<p class="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.column_2</code></div>
|
||||
<p class="column_3 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.column_3.column_line</code></div>
|
||||
<p class="column_3 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>
|
||||
|
|
@ -120,15 +120,18 @@
|
|||
<div class="exp_pop"><code class="code_solo">figure>figcaption+{element}</code></div>
|
||||
<p>Eine sehr klar definierte Gruppierung stellt das Element <code><main></code> dar. Es umschließt den hauptsächlichen Inhalt des Dokumentes.</p>
|
||||
<p>Eine von sich aus undefinierte Möglichkeit zur Gruppierung von Text besteht durch <code><div></code>. Dieses Element hat, ohne weitere Klassifizierung keine Auswirkungen auf die Erscheinung oder die inhaltliche Aussage. Daher der allgemeine Einsatz.</p>
|
||||
<div class="box_info"><p>Es wird allerdings häufig eingesetzt und bekommt vielfältige Funktionen zugeordnet wie diese hervorgehobene Information zeigt.</p></div>
|
||||
<div class="div_info"><p>Es wird allerdings häufig eingesetzt und bekommt vielfältige Funktionen zugeordnet wie diese hervorgehobene Information zeigt.</p></div>
|
||||
</article>
|
||||
<article>
|
||||
<h1 id="textlevel">Textebene</h1>
|
||||
{# // a // em // strong // small // s // cite // q // dfn // abbr // ruby // rb // rt // rtc // rp // data // time // code // var // samp // kbd // sub // sup // i // b // u // mark // bdi // bdo // span // br // wbr // -- Edits -- // ins // del #}
|
||||
<h2>Verweise</h2>
|
||||
<p>Ein wesentlicher Bestandteil von Hypertext sind Verweise <code><a></code>. Sie dienen als Sprungmarken innerhalb des Netzwerks. Es kann grob zwischen internen und externen Verweisen unterschieden werden. <a class="a_line js_pop" href="#links">Interne Verweise</a><span class="exp_pop"><code class="code_solo">a.a_line</code></span> können Verknüpfungen innerhalb des aktuellen Dokumentes sein oder auch Funktionen aktivieren. <a class="a_line" href="http://de.wikipedia.org">Externe Verweise</a> verknüpfen Inhalte über das gesamte Netzwerk hinweg. Sie können auch auf E-Mail Adressen oder Dateien zeigen.</p>
|
||||
<p>Ein wesentlicher Bestandteil von Hypertext sind Verweise <code><a></code>. Sie dienen als Sprungmarken innerhalb des Netzwerks. Es kann grob zwischen internen und externen Verweisen unterschieden werden. <a class="a_line js_pop" href="#links">Interne Verweise</a><span class="exp_pop"><code class="code_solo">a.a_line</code></span> können Verknüpfungen innerhalb des aktuellen Dokumentes sein oder auch Funktionen aktivieren. <a class="a_line" href="http://de.wikipedia.org">Externe Verweise</a> verknüpfen Inhalte über das gesamte Netzwerk hinweg. Sie können zum Beispiel auch auf E-Mail Adressen oder Dateien zeigen. Theoretisch kann solch ein Verweis <b>Alles</b> auslösen. Anweisungen werden im <a href="https://tools.ietf.org/html/rfc1738">URL Standard</a> übergeben.</p>
|
||||
<p>Nicht nur Text kann als Verweis verwendet werden. Auch andere Elemente wie Bilder können verknüpft werden. Abhängig von ihrer Funktion und ihrem Zweck, werden Verweise unterschiedlich formatiert. <a href="#">Farbige</a> oder <a class="a_line" href="#">unterstrichene Varianten</a> sind möglich.</p>
|
||||
<p>Wird der Verweis innerhalb eines <code><nav></code> Elementes notiert, bekommt er die spezielle Bedeutung eines Navigationsverweises innerhalb des Dokumentes oder der Anwendung. Auf diese Verwendung wird im Folgenden genauer eingegangen <span class="wip_txt">...</span></p>
|
||||
<p>Wird der Verweis innerhalb eines <code><nav></code> Elementes notiert, bekommt er die spezielle Bedeutung eines Navigationsverweises innerhalb des Dokumentes oder der Anwendung. Verweise werden dann durchaus auch wie Schaltflächen dargestellt.</p>
|
||||
<nav>
|
||||
<p><a class="a_button_text" href="#textlevel">↥</a> (Zum Anfang des Abschnitts springen)<br><a class="a_button_text" href="#begin">⇫</a> (Zum Anfang der Seite springen)</p>
|
||||
</nav>
|
||||
<h2>Formatierungen</h2>
|
||||
<p>Texte, Wörter oder Zeichen können vielfältig formatiert werden.</p>
|
||||
<p>Sie können <b>fett</b> <code><b></code> oder <i>kursiv</i> <code><i></code> geschrieben sein. <b><i>Auch beides ist möglich!</i>?</b>! Sollen sie nicht nur anders <strong>aussehen</strong>, sondern auch <em>eine besondere inhaltliche Bedeutung</em> bekommen, werden sie mit <code><strong></code> und <code><em></code> ausgezeichnet.</p>
|
||||
|
|
|
|||
|
|
@ -2,5 +2,5 @@
|
|||
// All variables setup with !default in gloabl/_config.scss can be used
|
||||
// ------------------------------------------------------------------------------
|
||||
|
||||
// $basic_back_color: yellow;
|
||||
// $color_back_basic: yellow;
|
||||
// $basic_link_color: magenta;
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@
|
|||
|
||||
|
||||
// Paragraph
|
||||
// -----------------------------------------------------------------------------
|
||||
p {
|
||||
@extend %basic;
|
||||
margin-top: $basic_space;
|
||||
|
|
@ -30,7 +31,23 @@ p {
|
|||
}
|
||||
}
|
||||
|
||||
.column_line {
|
||||
column-rule: $basic_border;
|
||||
}
|
||||
.column_2, .column_3 {
|
||||
@extend p;
|
||||
}
|
||||
.column_2 {
|
||||
column-count: 2;
|
||||
column-gap: $space_small;
|
||||
}
|
||||
.column_3 {
|
||||
column-count: 3;
|
||||
column-gap: $space_medium;
|
||||
}
|
||||
|
||||
// Address
|
||||
// -----------------------------------------------------------------------------
|
||||
address {
|
||||
// @extend %basic;
|
||||
margin-top: $double_space;
|
||||
|
|
@ -38,6 +55,7 @@ address {
|
|||
}
|
||||
|
||||
// Line
|
||||
// -----------------------------------------------------------------------------
|
||||
hr {
|
||||
margin: $space_small auto;
|
||||
border-width: $basic_border_width 0 0;
|
||||
|
|
@ -56,24 +74,26 @@ hr {
|
|||
}
|
||||
|
||||
// Preformat
|
||||
// -----------------------------------------------------------------------------
|
||||
pre {
|
||||
@extend %basic_mono;
|
||||
}
|
||||
|
||||
.pre_code {
|
||||
overflow-x: auto;
|
||||
border-color: darken($basic_back_color, $tiny_color_diff);
|
||||
border-color: darken($color_back_basic, $tiny_color_diff);
|
||||
border-style: dotted;
|
||||
border-width: 0 0 0 $border_width_4;
|
||||
border-radius: $basic_corner;
|
||||
padding: $basic_space;
|
||||
background-color: lighten($basic_back_color, $tiny_color_diff);
|
||||
background-color: lighten($color_back_basic, $tiny_color_diff);
|
||||
code {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// Quote
|
||||
// -----------------------------------------------------------------------------
|
||||
blockquote {
|
||||
margin: $basic_space 0;
|
||||
padding-right: $basic_indent;
|
||||
|
|
@ -95,6 +115,7 @@ blockquote {
|
|||
}
|
||||
|
||||
// List
|
||||
// -----------------------------------------------------------------------------
|
||||
dl, ul, ol {
|
||||
margin: $double_space 0 $basic_space;
|
||||
}
|
||||
|
|
@ -121,29 +142,6 @@ ul {
|
|||
}
|
||||
}
|
||||
|
||||
// Embedded
|
||||
figure {
|
||||
margin: $double_space $basic_indent;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
@extend %basic;
|
||||
}
|
||||
|
||||
// Main content
|
||||
main {
|
||||
|
||||
}
|
||||
|
||||
// Div
|
||||
div {
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
// General Classes
|
||||
// ------------------------------------------------------------------------------
|
||||
.list_dash {
|
||||
li {
|
||||
list-style: none;
|
||||
|
|
@ -187,39 +185,34 @@ div {
|
|||
}
|
||||
}
|
||||
|
||||
.box_info {
|
||||
// Embedded
|
||||
// -----------------------------------------------------------------------------
|
||||
figure {
|
||||
margin: $double_space $basic_indent;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
@extend %basic;
|
||||
}
|
||||
|
||||
// Main content
|
||||
// -----------------------------------------------------------------------------
|
||||
main {
|
||||
|
||||
}
|
||||
|
||||
// Div
|
||||
// -----------------------------------------------------------------------------
|
||||
div {
|
||||
|
||||
}
|
||||
|
||||
.div_info {
|
||||
padding: $double_space $basic_indent;
|
||||
border-right: $basic_space solid rgba($echo_color, 0.6);
|
||||
background-color: rgba($echo_color, 0.1) !important;
|
||||
}
|
||||
|
||||
.box_main_indent {
|
||||
margin-left: 25%;
|
||||
}
|
||||
|
||||
.box_full_width {
|
||||
// position: relative;
|
||||
// overflow: hidden;
|
||||
// width: 100%;
|
||||
}
|
||||
|
||||
// Columns
|
||||
.column_line {
|
||||
column-rule: $basic_border;
|
||||
}
|
||||
.column_2, .column_3 {
|
||||
@extend p;
|
||||
}
|
||||
.column_2 {
|
||||
column-count: 2;
|
||||
column-gap: $space_small;
|
||||
}
|
||||
.column_3 {
|
||||
column-count: 3;
|
||||
column-gap: $space_medium;
|
||||
}
|
||||
|
||||
// Space and placeholders
|
||||
.box_space {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
|
@ -231,6 +224,7 @@ div {
|
|||
width: $space_medium;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
|
||||
span {
|
||||
display: table-cell;
|
||||
}
|
||||
|
|
@ -255,15 +249,41 @@ div {
|
|||
background-color: transparentize($basic_front_color, 0.1);
|
||||
}
|
||||
|
||||
// Data
|
||||
.box_file_tile {
|
||||
@extend .float_space_left;
|
||||
}
|
||||
|
||||
// Flex
|
||||
.flex_column_wrap {
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flex_wrap {
|
||||
@extend .flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.flex_row {
|
||||
@extend .flex;
|
||||
flex-direction: column;
|
||||
// align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.flex_child {
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
|
||||
.flex_child_one {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.flex_child_end {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.flex_column_wrap {
|
||||
@extend .flex_wrap;
|
||||
|
||||
.flex_column {
|
||||
@extend .flex_child;
|
||||
|
|
@ -271,6 +291,32 @@ div {
|
|||
}
|
||||
}
|
||||
|
||||
// Grid
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-gap: $basic_space;
|
||||
|
||||
& > input,
|
||||
& > select,
|
||||
& > textarea {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
& > label {
|
||||
margin: $basic_io_border_width;
|
||||
padding: $half_space;
|
||||
}
|
||||
}
|
||||
|
||||
.grid_column_2 {
|
||||
grid-template-columns: max-content max-content;
|
||||
|
||||
}
|
||||
|
||||
.grid_column_4 {
|
||||
grid-template-columns: max-content max-content max-content max-content;
|
||||
}
|
||||
|
||||
// Sprites
|
||||
.sprite_img {
|
||||
display: inline-block;
|
||||
|
|
|
|||
|
|
@ -17,10 +17,14 @@
|
|||
|
||||
|
||||
|
||||
// Form
|
||||
// -----------------------------------------------------------------------------
|
||||
form {
|
||||
|
||||
}
|
||||
|
||||
// Label
|
||||
// -----------------------------------------------------------------------------
|
||||
label {
|
||||
@extend %basic;
|
||||
|
||||
|
|
@ -29,6 +33,30 @@ label {
|
|||
}
|
||||
}
|
||||
|
||||
input + label {
|
||||
margin-left: $basic_space;
|
||||
}
|
||||
|
||||
.label {
|
||||
line-height: 2.5;
|
||||
}
|
||||
|
||||
.label > input,
|
||||
.label > textarea,
|
||||
.label > select {
|
||||
margin: 0 $basic_space;
|
||||
}
|
||||
|
||||
// Input
|
||||
// -----------------------------------------------------------------------------
|
||||
input {
|
||||
color: $basic_io_font_color;
|
||||
}
|
||||
|
||||
label + input {
|
||||
margin-left: $basic_space;
|
||||
}
|
||||
|
||||
input, button, textarea, select {
|
||||
margin: $io_margin;
|
||||
|
||||
|
|
@ -38,8 +66,11 @@ input, button, textarea, select {
|
|||
}
|
||||
}
|
||||
|
||||
input {
|
||||
color: $basic_io_font_color;
|
||||
td > input,
|
||||
td > button,
|
||||
td > select,
|
||||
td > textarea {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@each $input in $io_input_list, textarea, select {
|
||||
|
|
@ -97,17 +128,23 @@ input {
|
|||
}
|
||||
}
|
||||
|
||||
// Fieldset
|
||||
// -----------------------------------------------------------------------------
|
||||
fieldset {
|
||||
margin: $high_margin;
|
||||
padding: $basic_space;
|
||||
border: $basic_border;
|
||||
}
|
||||
|
||||
// Legend
|
||||
// -----------------------------------------------------------------------------
|
||||
legend {
|
||||
@extend %basic;
|
||||
padding: 0 $half_space;
|
||||
}
|
||||
|
||||
// Button
|
||||
// -----------------------------------------------------------------------------
|
||||
button {
|
||||
|
||||
}
|
||||
|
|
@ -137,14 +174,20 @@ button {
|
|||
}
|
||||
}
|
||||
|
||||
// Selection
|
||||
// -----------------------------------------------------------------------------
|
||||
select {
|
||||
border: none;
|
||||
}
|
||||
|
||||
// Datalist
|
||||
// -----------------------------------------------------------------------------
|
||||
datalist {
|
||||
|
||||
}
|
||||
|
||||
// Options
|
||||
// -----------------------------------------------------------------------------
|
||||
optgroup {
|
||||
|
||||
}
|
||||
|
|
@ -153,6 +196,8 @@ option {
|
|||
|
||||
}
|
||||
|
||||
// Textarea
|
||||
// -----------------------------------------------------------------------------
|
||||
textarea {
|
||||
}
|
||||
|
||||
|
|
@ -160,10 +205,14 @@ textarea {
|
|||
line-height: 1.2;
|
||||
}
|
||||
|
||||
// Output
|
||||
// -----------------------------------------------------------------------------
|
||||
output {
|
||||
|
||||
}
|
||||
|
||||
// Progress
|
||||
// -----------------------------------------------------------------------------
|
||||
progress {
|
||||
|
||||
}
|
||||
|
|
@ -208,68 +257,3 @@ dialog {
|
|||
canvas {
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
// General Classes
|
||||
// ------------------------------------------------------------------------------
|
||||
.label {
|
||||
line-height: 2.5;
|
||||
}
|
||||
|
||||
.label > input,
|
||||
.label > textarea,
|
||||
.label > select {
|
||||
margin: 0 $basic_space;
|
||||
}
|
||||
|
||||
.label_table {
|
||||
display: table;
|
||||
|
||||
input {
|
||||
display: table-cell;
|
||||
}
|
||||
}
|
||||
|
||||
label + input {
|
||||
margin-left: $basic_space;
|
||||
}
|
||||
|
||||
input + label {
|
||||
margin-left: $basic_space;
|
||||
}
|
||||
|
||||
td > input,
|
||||
td > button,
|
||||
td > select,
|
||||
td > textarea {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-gap: $basic_space;
|
||||
|
||||
& > input,
|
||||
& > select,
|
||||
& > textarea {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
& > label {
|
||||
display: inline-block;
|
||||
margin: $basic_io_border_width;
|
||||
padding: $half_space;
|
||||
}
|
||||
}
|
||||
|
||||
.grid_column_2 {
|
||||
grid-template-columns: max-content max-content;
|
||||
|
||||
}
|
||||
|
||||
.grid_column_4 {
|
||||
grid-template-columns: max-content max-content max-content max-content;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
// Root
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -21,6 +20,7 @@ html {
|
|||
|
||||
|
||||
// Body
|
||||
// -----------------------------------------------------------------------------
|
||||
body {
|
||||
position: relative;
|
||||
box-sizing: $box_sizing;
|
||||
|
|
@ -30,7 +30,7 @@ body {
|
|||
line-height: $basic_line;
|
||||
line-height: $text_line_basic;
|
||||
color: $basic_font_color;
|
||||
background-color: $basic_back_color;
|
||||
background-color: $color_back_basic;
|
||||
|
||||
*,
|
||||
::before,
|
||||
|
|
@ -48,11 +48,13 @@ body {
|
|||
}
|
||||
|
||||
// Article
|
||||
// -----------------------------------------------------------------------------
|
||||
article {
|
||||
|
||||
}
|
||||
|
||||
// Section
|
||||
// -----------------------------------------------------------------------------
|
||||
section {
|
||||
|
||||
}
|
||||
|
|
@ -81,11 +83,13 @@ section {
|
|||
}
|
||||
|
||||
// Navigation
|
||||
// -----------------------------------------------------------------------------
|
||||
nav {
|
||||
|
||||
}
|
||||
|
||||
// Aside element
|
||||
// -----------------------------------------------------------------------------
|
||||
aside {
|
||||
width: $basic_aside_width;
|
||||
|
||||
|
|
@ -97,20 +101,21 @@ aside {
|
|||
margin-left: calc(#{$basic_aside_width} + #{$basic_space});
|
||||
}
|
||||
|
||||
&.left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
&.right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
&.left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
*:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Headings
|
||||
// -----------------------------------------------------------------------------
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
@extend %head_all;
|
||||
}
|
||||
|
|
@ -159,6 +164,7 @@ h6 {
|
|||
}
|
||||
|
||||
// Header
|
||||
// -----------------------------------------------------------------------------
|
||||
header {
|
||||
|
||||
}
|
||||
|
|
@ -177,6 +183,7 @@ header {
|
|||
}
|
||||
|
||||
// Footer
|
||||
// -----------------------------------------------------------------------------
|
||||
footer {
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,75 +13,14 @@
|
|||
|
||||
|
||||
|
||||
// Table
|
||||
// -----------------------------------------------------------------------------
|
||||
table {
|
||||
margin: $high_margin;
|
||||
border: $basic_border;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
caption {
|
||||
@extend p;
|
||||
padding: $half_space 0;
|
||||
border: $dotted_border;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
colgroup {
|
||||
|
||||
}
|
||||
|
||||
col {
|
||||
|
||||
}
|
||||
|
||||
tbody {
|
||||
|
||||
}
|
||||
|
||||
thead {
|
||||
|
||||
}
|
||||
|
||||
tfoot {
|
||||
|
||||
tr:first-child td {
|
||||
border-top: $basic_border;
|
||||
}
|
||||
}
|
||||
|
||||
tr:last-child td {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
th, td {
|
||||
@extend %basic;
|
||||
padding: $half_space;
|
||||
}
|
||||
|
||||
th {
|
||||
border: $basic_border;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
td {
|
||||
border-right: $cell_border;
|
||||
border-bottom: $cell_border;
|
||||
}
|
||||
|
||||
td:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// General Classes
|
||||
// ------------------------------------------------------------------------------
|
||||
.cell_pre {
|
||||
// border-right-width: $border_width_4;
|
||||
// border-right-color: lighten($basic_back_color, $basic_color_diff);
|
||||
background-color: lighten($basic_back_color, $tiny_color_diff);
|
||||
}
|
||||
|
||||
.table_blank {
|
||||
border: $basic_border_width solid transparent;
|
||||
|
||||
|
|
@ -101,7 +40,7 @@ td:last-child {
|
|||
}
|
||||
|
||||
tr:nth-child(even) td {
|
||||
background-color: lighten($basic_back_color, $tiny_color_diff);
|
||||
background-color: lighten($color_back_basic, $tiny_color_diff);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -109,7 +48,83 @@ td:last-child {
|
|||
table-layout: fixed;
|
||||
}
|
||||
|
||||
// Data
|
||||
.table_file_simple {
|
||||
@extend .width_full;
|
||||
}
|
||||
|
||||
// Caption
|
||||
// -----------------------------------------------------------------------------
|
||||
caption {
|
||||
@extend p;
|
||||
padding: $half_space 0;
|
||||
border: $dotted_border;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// Columns
|
||||
// -----------------------------------------------------------------------------
|
||||
colgroup {
|
||||
|
||||
}
|
||||
|
||||
col {
|
||||
|
||||
}
|
||||
|
||||
// Table body
|
||||
// -----------------------------------------------------------------------------
|
||||
tbody {
|
||||
|
||||
}
|
||||
|
||||
// Table head
|
||||
// -----------------------------------------------------------------------------
|
||||
thead {
|
||||
|
||||
}
|
||||
|
||||
// Table foot
|
||||
// -----------------------------------------------------------------------------
|
||||
tfoot {
|
||||
|
||||
tr:first-child td {
|
||||
border-top: $basic_border;
|
||||
}
|
||||
}
|
||||
|
||||
// Row
|
||||
// -----------------------------------------------------------------------------
|
||||
tr {
|
||||
|
||||
}
|
||||
|
||||
// Cells
|
||||
// -----------------------------------------------------------------------------
|
||||
th, td {
|
||||
@extend %basic;
|
||||
padding: $half_space;
|
||||
}
|
||||
|
||||
th {
|
||||
border: $basic_border;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
td {
|
||||
border-right: $basic_border;
|
||||
border-bottom: $basic_border;
|
||||
}
|
||||
|
||||
td:last-child {
|
||||
border-right: 0;
|
||||
|
||||
td {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.cell_pre {
|
||||
// border-right-width: $border_width_4;
|
||||
// border-right-color: lighten($color_back_basic, $color_diff_basic);
|
||||
background-color: lighten($color_back_basic, $tiny_color_diff);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,15 +31,11 @@
|
|||
// span
|
||||
// br
|
||||
// wbr
|
||||
// -----------------------------------------------------------------------------
|
||||
// Edits
|
||||
// -----------------------------------------------------------------------------
|
||||
// ins
|
||||
// del
|
||||
|
||||
|
||||
|
||||
// Links
|
||||
// -----------------------------------------------------------------------------
|
||||
a {
|
||||
color: $basic_link_color;
|
||||
// color: lighten($basic_action_color, 20%);
|
||||
|
|
@ -81,11 +77,12 @@ a {
|
|||
|
||||
.a_button_border {
|
||||
@extend .a_button_text;
|
||||
border: $cell_border;
|
||||
border: $basic_border;
|
||||
}
|
||||
|
||||
|
||||
// Italic, Emphasis
|
||||
// -----------------------------------------------------------------------------
|
||||
i, em {
|
||||
font-style: italic;
|
||||
}
|
||||
|
|
@ -96,38 +93,49 @@ i, em {
|
|||
}
|
||||
|
||||
// Bold, Strong
|
||||
// -----------------------------------------------------------------------------
|
||||
b, strong {
|
||||
font-weight: 500; // TODO maybe bolder
|
||||
}
|
||||
|
||||
// Small
|
||||
// -----------------------------------------------------------------------------
|
||||
small {
|
||||
|
||||
}
|
||||
|
||||
// No longer accurate or no longer relevant
|
||||
// -----------------------------------------------------------------------------
|
||||
s {
|
||||
|
||||
}
|
||||
|
||||
// Citation
|
||||
// -----------------------------------------------------------------------------
|
||||
cite {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
// Phrasing content, quoted
|
||||
// -----------------------------------------------------------------------------
|
||||
q {
|
||||
|
||||
}
|
||||
|
||||
// Definition
|
||||
// -----------------------------------------------------------------------------
|
||||
dfn {
|
||||
|
||||
}
|
||||
|
||||
// Abbreviation
|
||||
// -----------------------------------------------------------------------------
|
||||
abbr {
|
||||
|
||||
}
|
||||
|
||||
// Ruby annotations
|
||||
// -----------------------------------------------------------------------------
|
||||
ruby {
|
||||
|
||||
}
|
||||
|
|
@ -148,34 +156,46 @@ rp {
|
|||
|
||||
}
|
||||
|
||||
// Machine readable data
|
||||
// -----------------------------------------------------------------------------
|
||||
data {
|
||||
|
||||
}
|
||||
|
||||
// Machine readable time
|
||||
// -----------------------------------------------------------------------------
|
||||
time {
|
||||
|
||||
}
|
||||
|
||||
// Code
|
||||
// -----------------------------------------------------------------------------
|
||||
code {
|
||||
@extend %basic_mono;
|
||||
color: lighten($basic_font_color, $basic_color_diff);
|
||||
background-color: lighten($basic_back_color, $tiny_color_diff);
|
||||
color: lighten($basic_font_color, $color_diff_basic);
|
||||
background-color: lighten($color_back_basic, $tiny_color_diff);
|
||||
}
|
||||
|
||||
.code_solo {
|
||||
@extend %basic_mono;
|
||||
padding: $tiny_space $half_space;
|
||||
color: $basic_font_color;
|
||||
}
|
||||
|
||||
// Variable
|
||||
// -----------------------------------------------------------------------------
|
||||
var {
|
||||
|
||||
}
|
||||
|
||||
// Sample
|
||||
// -----------------------------------------------------------------------------
|
||||
samp {
|
||||
|
||||
}
|
||||
|
||||
// Keyboard input
|
||||
// -----------------------------------------------------------------------------
|
||||
kbd {
|
||||
@extend %basic_mono;
|
||||
// font-size: .9em;
|
||||
|
|
@ -183,41 +203,62 @@ kbd {
|
|||
padding: 0 $half_space;
|
||||
border-width: $basic_border_width;
|
||||
border-style: solid;
|
||||
border-color: darken($basic_back_color, $basic_color_diff);
|
||||
border-color: darken($color_back_basic, $color_diff_basic);
|
||||
border-radius: $basic_corner;
|
||||
color: lighten($basic_font_color, $basic_color_diff);
|
||||
color: lighten($basic_font_color, $color_diff_basic);
|
||||
}
|
||||
|
||||
// Sub- and superscript
|
||||
// -----------------------------------------------------------------------------
|
||||
sub, sup {
|
||||
|
||||
}
|
||||
|
||||
// Unarticulated, non-textual annotation
|
||||
// -----------------------------------------------------------------------------
|
||||
u {
|
||||
|
||||
}
|
||||
|
||||
// Marks
|
||||
// -----------------------------------------------------------------------------
|
||||
mark {
|
||||
background-color: $alpha_color;
|
||||
}
|
||||
.mark_cursor, ::-moz-selection, ::selection {
|
||||
|
||||
.mark_cursor {
|
||||
color: invert($basic_font_color);
|
||||
background-color: $basic_font_color;
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
color: invert($basic_font_color);
|
||||
background-color: $basic_font_color;
|
||||
}
|
||||
|
||||
::selection {
|
||||
color: invert($basic_font_color);
|
||||
background-color: $basic_font_color;
|
||||
}
|
||||
|
||||
// Text direction
|
||||
// -----------------------------------------------------------------------------
|
||||
bdi, bdo {
|
||||
|
||||
}
|
||||
|
||||
// Span
|
||||
// -----------------------------------------------------------------------------
|
||||
span {
|
||||
|
||||
}
|
||||
|
||||
.span_solo {
|
||||
@extend %solo;
|
||||
}
|
||||
|
||||
// Linebreak
|
||||
// Linebreaks
|
||||
// -----------------------------------------------------------------------------
|
||||
br {
|
||||
|
||||
}
|
||||
|
|
@ -230,6 +271,10 @@ wbr {
|
|||
|
||||
// Edits
|
||||
// -----------------------------------------------------------------------------
|
||||
// ins
|
||||
// del
|
||||
|
||||
|
||||
|
||||
ins {
|
||||
|
||||
|
|
@ -238,60 +283,3 @@ ins {
|
|||
del {
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
// General Classes
|
||||
// ------------------------------------------------------------------------------
|
||||
.txt_tiny {
|
||||
font-size: .5em !important;
|
||||
}
|
||||
|
||||
.txt_smaller {
|
||||
font-size: .75em !important;
|
||||
}
|
||||
|
||||
.txt_larger {
|
||||
font-size: 1.2em !important;
|
||||
}
|
||||
|
||||
.txt_huge {
|
||||
font-size: 3em !important;
|
||||
}
|
||||
|
||||
.txt_hero {
|
||||
font-size: $hero_size_1;
|
||||
}
|
||||
|
||||
.txt_center {
|
||||
text-align: center !important;
|
||||
}
|
||||
.txt_right {
|
||||
text-align: right !important;
|
||||
}
|
||||
.txt_left {
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.txt_top {
|
||||
vertical-align: top !important;
|
||||
}
|
||||
|
||||
.txt_bottom {
|
||||
vertical-align: bottom !important;
|
||||
}
|
||||
|
||||
.txt_white {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.txt_black {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.txt_gradient {
|
||||
background: linear-gradient(165deg, $alpha_color 30%, $bravo_color 45%, $charlie_color 50%, $delta_color, $echo_color 80%, $foxtrot_color);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
// General layout attributes
|
||||
// ------------------------------------------------------------------------------
|
||||
// General classes
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
|
||||
|
||||
%size_content {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
|
@ -22,21 +25,29 @@
|
|||
@extend %hidden;
|
||||
}
|
||||
|
||||
.center_auto {
|
||||
.space_even_auto {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.center_50 {
|
||||
.space_even_half {
|
||||
margin-right: 25%;
|
||||
margin-left: 25%;
|
||||
}
|
||||
|
||||
.center_25 {
|
||||
.space_even_fourth {
|
||||
margin-right: 37.5%;
|
||||
margin-left: 37.5%;
|
||||
}
|
||||
|
||||
.space_right_small {
|
||||
margin-right: $space_small;
|
||||
}
|
||||
|
||||
.space_left_fourth {
|
||||
margin-left: 25%;
|
||||
}
|
||||
|
||||
.width_full {
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
|
|
@ -63,10 +74,6 @@
|
|||
height: 100vh;
|
||||
}
|
||||
|
||||
.space_right {
|
||||
margin-right: $space_small;
|
||||
}
|
||||
|
||||
.wrap_center {
|
||||
& > * {
|
||||
margin-right: (100% - $basic_width) / 2;
|
||||
|
|
@ -90,7 +97,7 @@
|
|||
|
||||
|
||||
// Clearing and floating
|
||||
// ------------------------------------------------------------------------------
|
||||
// -----------------------------------------------------------------------------
|
||||
.clear {
|
||||
clear: both;
|
||||
|
||||
|
|
@ -127,9 +134,9 @@
|
|||
}
|
||||
|
||||
|
||||
// Inlining
|
||||
// ------------------------------------------------------------------------------
|
||||
|
||||
// Inlining
|
||||
// -----------------------------------------------------------------------------
|
||||
.inline {
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
@ -137,7 +144,7 @@
|
|||
|
||||
|
||||
// Positioned elements
|
||||
// ------------------------------------------------------------------------------
|
||||
// -----------------------------------------------------------------------------
|
||||
%full_viewport {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
|
@ -195,11 +202,11 @@
|
|||
}
|
||||
|
||||
.hover_back_change {
|
||||
background-color: darken($basic_back_color, $basic_color_diff);
|
||||
background-color: darken($color_back_basic, $color_diff_basic);
|
||||
transition: background-color 0.2s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-color: $basic_back_color;
|
||||
background-color: $color_back_basic;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -211,45 +218,81 @@
|
|||
pointer-events: none;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flex_wrap {
|
||||
@extend .flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.flex_row {
|
||||
@extend .flex;
|
||||
flex-direction: column;
|
||||
// align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.flex_child {
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
|
||||
.flex_child_one {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.flex_child_end {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
|
||||
// Colors
|
||||
// ------------------------------------------------------------------------------
|
||||
.txt_light_color {
|
||||
color: darken($basic_back_color, $basic_color_diff);
|
||||
// -----------------------------------------------------------------------------
|
||||
.txt_color_light {
|
||||
color: $color_font_light;
|
||||
}
|
||||
|
||||
.txt_color_dark {
|
||||
color: $color_font_dark;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Text
|
||||
// -----------------------------------------------------------------------------
|
||||
.txt_tiny {
|
||||
font-size: .5em !important;
|
||||
}
|
||||
|
||||
.txt_smaller {
|
||||
font-size: .75em !important;
|
||||
}
|
||||
|
||||
.txt_larger {
|
||||
font-size: 1.2em !important;
|
||||
}
|
||||
|
||||
.txt_huge {
|
||||
font-size: 3em !important;
|
||||
}
|
||||
|
||||
.txt_hero {
|
||||
font-size: $hero_size_1;
|
||||
}
|
||||
|
||||
.txt_center {
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.txt_right {
|
||||
text-align: right !important;
|
||||
}
|
||||
|
||||
.txt_left {
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.txt_top {
|
||||
vertical-align: top !important;
|
||||
}
|
||||
|
||||
.txt_bottom {
|
||||
vertical-align: bottom !important;
|
||||
}
|
||||
|
||||
.txt_white {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.txt_black {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.txt_gradient {
|
||||
background: linear-gradient(165deg, $alpha_color 30%, $bravo_color 45%, $charlie_color 50%, $delta_color, $echo_color 80%, $foxtrot_color);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Input
|
||||
// ------------------------------------------------------------------------------
|
||||
// -----------------------------------------------------------------------------
|
||||
%default_button {
|
||||
display: inline-block;
|
||||
padding: $basic_padding;
|
||||
|
|
|
|||
|
|
@ -2,9 +2,9 @@
|
|||
// ------------------------------------------------------------------------------
|
||||
|
||||
|
||||
|
||||
// TEXT
|
||||
// ------------------------------------------------------------------------------
|
||||
|
||||
$basic_size: 17px !default;
|
||||
$basic_print_size: 10pt !default;
|
||||
|
||||
|
|
@ -69,12 +69,10 @@ $secondary_font_family: $primary_font_family !default;
|
|||
$third_font_family: $monospace_font_family !default;
|
||||
$fourth_font_family: $print_font_family !default;
|
||||
|
||||
$basic_indent: 2em !default;
|
||||
|
||||
|
||||
// COLORS
|
||||
// ------------------------------------------------------------------------------
|
||||
|
||||
$color_palette: (
|
||||
alpha: #fad803,
|
||||
bravo: #d30a51,
|
||||
|
|
@ -86,16 +84,16 @@ $color_palette: (
|
|||
|
||||
@include addDefaultColors;
|
||||
|
||||
$basic_color_diff: 12% !default;
|
||||
$color_diff_basic: 12% !default;
|
||||
$tiny_color_diff: 4% !default;
|
||||
$double_color_diff: $basic_color_diff * 2;
|
||||
$double_color_diff: $color_diff_basic * 2;
|
||||
|
||||
$darkest_color: black !default;
|
||||
$brightest_color: white !default;
|
||||
|
||||
$basic_font_color: black !default;
|
||||
$basic_back_color: #808080 !default;
|
||||
$basic_border_color: lighten($basic_font_color, $basic_color_diff) !default;
|
||||
$color_back_basic: #808080 !default;
|
||||
$basic_border_color: lighten($basic_font_color, $color_diff_basic) !default;
|
||||
$basic_front_color: white !default;
|
||||
|
||||
$medium_color: lighten($darkest_color, 50%);
|
||||
|
|
@ -107,6 +105,9 @@ $basic_link_color: $echo_color !default;
|
|||
$basic_highlight_color: $basic_front_color !default;
|
||||
$basic_action_color: $foxtrot_color !default;
|
||||
|
||||
$color_font_light: lighten($color_back_basic, $color_diff_basic);
|
||||
$color_font_dark: darken($color_back_basic, $color_diff_basic);
|
||||
|
||||
// default shadow colors
|
||||
// $shadow_color: fade-out($medium_color, 0.5);
|
||||
|
||||
|
|
@ -119,9 +120,9 @@ $basic_color_list: ();
|
|||
}
|
||||
|
||||
|
||||
|
||||
// LAYOUT
|
||||
// ------------------------------------------------------------------------------
|
||||
|
||||
$box_sizing: border-box !default;
|
||||
|
||||
$z_heaven: 100 !default;
|
||||
|
|
@ -149,6 +150,8 @@ $io_margin: 0 $space_small 0 0 !default;
|
|||
$basic_padding: calc(#{$basic_space} - 3px) $basic_space !default;
|
||||
$wide_padding: calc(#{$basic_space} - 1px) calc(#{$basic_space} * 2) !default;
|
||||
|
||||
$basic_indent: 2em !default;
|
||||
|
||||
$basic_corner: $tiny_space * 2;
|
||||
|
||||
// Borders
|
||||
|
|
@ -157,16 +160,15 @@ $border_width_4: $basic_border_width * 4;
|
|||
$border_width_8: $basic_border_width * 8;
|
||||
$basic_border: $tiny_space solid $basic_border_color;
|
||||
$dotted_border: $tiny_space dotted $basic_border_color;
|
||||
$cell_border: $tiny_space solid $darkest_color;
|
||||
|
||||
$basic_corner_radius: $tiny_space * 2;
|
||||
|
||||
$basic_aside_width: 20%;
|
||||
|
||||
|
||||
|
||||
// IO
|
||||
// ------------------------------------------------------------------------------
|
||||
|
||||
$io_input_list:
|
||||
'input[type="text"]',
|
||||
'input[type="number"]',
|
||||
|
|
@ -208,13 +210,13 @@ $io_focus_list:
|
|||
'textarea:not([disabled])',
|
||||
'*[tabindex]';
|
||||
|
||||
$basic_io_font_color: lighten($basic_font_color, $basic_color_diff);
|
||||
$basic_io_back_color: darken($basic_front_color, $basic_color_diff);
|
||||
$basic_io_font_color: lighten($basic_font_color, $color_diff_basic);
|
||||
$basic_io_back_color: darken($basic_front_color, $color_diff_basic);
|
||||
$basic_io_border_color: $basic_front_color;
|
||||
|
||||
$oi_font_color: $basic_font_color;
|
||||
$oi_back_color: darken($basic_back_color, $basic_color_diff);
|
||||
$oi_border_color: darken($oi_back_color, $basic_color_diff);
|
||||
$oi_back_color: darken($color_back_basic, $color_diff_basic);
|
||||
$oi_border_color: darken($oi_back_color, $color_diff_basic);
|
||||
|
||||
$basic_io_border_width: $tiny_space * 2 !default;
|
||||
$basic_io_border: $basic_io_border_width solid $basic_io_border_color;
|
||||
|
|
@ -224,18 +226,18 @@ $basic_shadow: inset 0 1px 3px rgba($darkest_color, 0.06);
|
|||
$basic_focus_shadow: $basic_shadow, 0 0 5px adjust-color($basic_action_color, $lightness: -5%, $alpha: -0.3);
|
||||
|
||||
|
||||
|
||||
// ANIMATIONS
|
||||
// ------------------------------------------------------------------------------
|
||||
|
||||
$basic_duration: 250ms;
|
||||
$double_duration: 500ms;
|
||||
$extended_duration: 2s;
|
||||
$basic_timing: ease-out;
|
||||
|
||||
|
||||
|
||||
// HARDWARE BREAKPOINTS
|
||||
// ------------------------------------------------------------------------------
|
||||
|
||||
$screen_tiny: 768px;
|
||||
$screen_small: 1024px;
|
||||
$screen_medium: 1280px;
|
||||
|
|
@ -244,9 +246,9 @@ $screen_huge: 1680px;
|
|||
$screen_gigantic: 1920px;
|
||||
|
||||
|
||||
|
||||
// VENDOR PREFIX
|
||||
// ------------------------------------------------------------------------------
|
||||
|
||||
$prefix_defaults: -moz- -webkit- -o- -ms- '';
|
||||
$webkit_support: -webkit- '';
|
||||
$moz_support: -moz- '';
|
||||
|
|
@ -256,9 +258,9 @@ $moz_ms_support: -moz- -ms- '';
|
|||
$webkit_ms_support: -webkit- -ms- '';
|
||||
|
||||
|
||||
|
||||
// SYMBOLS
|
||||
// ------------------------------------------------------------------------------
|
||||
|
||||
$icons: (
|
||||
glass: "\f000",
|
||||
music: "\f001",
|
||||
|
|
@ -273,189 +275,10 @@ $icons: (
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// USER AGENT
|
||||
// ------------------------------------------------------------------------------
|
||||
|
||||
$no_agent_focus: true;
|
||||
|
||||
@include overrideUserAgent;
|
||||
|
||||
|
||||
// The config file is intended to allow users to quickly redefine core elements of the design
|
||||
// that will cascade throughout the css to get your design up and running FAST!
|
||||
|
||||
// For instruction, please see https://github.com/Anotheruiguy/toadstool/blob/master/sass/doc-src/config.md
|
||||
|
||||
/////// Typography configuration///////
|
||||
// -----------------------------------------------------------------------------
|
||||
// $font_size: 12;
|
||||
//
|
||||
// $heading_1: 46;
|
||||
// $heading_2: 32;
|
||||
// $heading_3: 28;
|
||||
// $heading_4: 18;
|
||||
// $heading_5: 18;
|
||||
// $heading_6: 18;
|
||||
//
|
||||
// $line: $font_size * 1.5;
|
||||
//
|
||||
// $small_point_size: 10;
|
||||
// $large_point_size: 14;
|
||||
//
|
||||
// $primary_font_family: #{"Helvetica Neue", Arial, sans-serif};
|
||||
// $secondary_font_family: #{"Helvetica Neue", Arial, sans-serif};
|
||||
// $heading_font_family: #{"Helvetica Neue", Arial, sans-serif};
|
||||
|
||||
// $icon_font_alpha: #{'ico-fonts'};
|
||||
|
||||
/////// Default webfont directory///////
|
||||
// -----------------------------------------------------------------------------
|
||||
// $webfont_directory: "/fonts/";
|
||||
|
||||
/////// default image directory ///////
|
||||
// -----------------------------------------------------------------------------
|
||||
// In Sinatra, the images folder resides in the public directory. This directory is not made publically accessible,
|
||||
// so simply referencing the images directory will be fine.
|
||||
// $imgDir: "/images/";
|
||||
|
||||
/////// OOCSS generic base colors///////
|
||||
// -----------------------------------------------------------------------------
|
||||
// Red, green, yellow, blue, accent and black is not law, but a common theme in most designs.
|
||||
// Using Toadstool, all you need to do is edit these 6 hex values and everything else is created
|
||||
// by magic, unicorns and fairy dust!
|
||||
|
||||
// $alpha_primary: #5a2e2e; // red
|
||||
// $bravo_primary: #3e4147; // green
|
||||
// $charlie_primary: #fffedf; // yellow
|
||||
// $delta_primary: #2a2c31; // blue
|
||||
// $echo_primary: #dfba69; // accent
|
||||
|
||||
// $alpha_gray: #333; //black
|
||||
|
||||
/////// Toadstool color math ///////
|
||||
// -----------------------------------------------------------------------------
|
||||
// Local color functions to create default color palette
|
||||
//@import "color/color_math";
|
||||
//@import "color/grayscale_math";
|
||||
//@import "color/color_defaults";
|
||||
|
||||
/////// Grid configuration ///////
|
||||
// -----------------------------------------------------------------------------
|
||||
// setting default units of measurement for Toadstool grid solution
|
||||
// $grid_type: 12; // sets default column grid
|
||||
// $grid_uom: percent; // use either ``em`` or ``percent``
|
||||
// $grid_padding_l: 0; // sets default left/right padding inside grid block
|
||||
// $grid_padding_r: 0; // sets default left/right padding inside grid block
|
||||
// $grid_padding_tb: 0; // sets default top/bottom padding inside grid block
|
||||
// $grid_border: 0; // sets default border width on all grid blocks
|
||||
// $grid_child: none; // sets parent child relationship between grid blocks
|
||||
// $grid_align: default; // by default grids float left. Optional argument is ``center``
|
||||
// $col_base: 10; // equal to 10px in the standard 960.gs
|
||||
// $col_gutter: $col_base * 2; // sets default grid gutter width
|
||||
// $grid_960: 960 / 100%; // grid math for percentages
|
||||
|
||||
|
||||
|
||||
/////// HTML 5 feature colors ///////
|
||||
// -----------------------------------------------------------------------------
|
||||
// used with the `ins` tag
|
||||
// http://www.w3schools.com/tags/tag_ins.asp
|
||||
// $ins_color: $charlie_color;
|
||||
|
||||
// used with the `mark` tag
|
||||
// http://www.w3schools.com/html5/tag_mark.asp
|
||||
// $mark_color: $charlie_color;
|
||||
|
||||
// webkit tap highlight color
|
||||
// $webkit_tap_hightlight: $delta_color_bravo;
|
||||
|
||||
// overrides the default content selection color in the browser
|
||||
// $selection_color: $charlie_color;
|
||||
// $selection_text_color: $primary_text;
|
||||
|
||||
|
||||
|
||||
/////// Config defaults for forms ///////
|
||||
// -----------------------------------------------------------------------------
|
||||
// $alert_back_color: $alpha_color;
|
||||
|
||||
// $input_disabled: $bravo_gray;
|
||||
// $input_disabled_bkg: lighten($input_disabled, 75%);
|
||||
// $input_disabled_border: lighten($input_disabled, 50%);
|
||||
// $input_disabled_text: lighten($input_disabled, 50%);
|
||||
//
|
||||
// $form_field_back_color: $brightest_color;
|
||||
// $form_field_focus_color: $brightest_color;
|
||||
// $form_field_fail_bkg: $alpha_color_juliet;
|
||||
|
||||
// $form_field_border: $charlie_gray;
|
||||
// $form_field_border_fail: $alpha_color_echo;
|
||||
// $form_field_focus_border_color: $charlie_gray;
|
||||
|
||||
// $form_field_text_fail: $alpha_color_echo;
|
||||
// $form_label_color: $alpha_gray;
|
||||
// $optional_field_text_color: $delta_gray;
|
||||
// $instructional_text: $charlie_gray;
|
||||
// $placeholder_text: $hotel_gray;
|
||||
// $inline_alert_bkg_color: $alpha_color_delta;
|
||||
// $inline_alert_text_color: $brightest_color;
|
||||
|
||||
// Non-color defaults (currently not represented in the SG view)
|
||||
// ---------------------------------------------------------
|
||||
// $form_field_border_radius: $standard_round_corner;
|
||||
// $form_field_text: $primary_text;
|
||||
// $form_field_height: 35;
|
||||
// $form_field_padding: 6;
|
||||
// $form_label_weight: bold;
|
||||
// $form_label_lineheight: 20;
|
||||
// $inline_alert_lineheight: 30;
|
||||
// $inline_alert_left_padding: 12;
|
||||
// $inline_alert_weight: bold;
|
||||
// $inline_alert_top_margin: 12;
|
||||
// $inline_alert_border_width: 1;
|
||||
|
||||
|
||||
|
||||
/////// Config defaults for buttons ///////
|
||||
// -----------------------------------------------------------------------------
|
||||
// $button-color: $delta-color;
|
||||
// $button-text-color: $brightest_color;
|
||||
// $button-line-height: 32;
|
||||
// $button-border-radius: 3;
|
||||
// $button-padding: 20;
|
||||
// $button-font-size: 18;
|
||||
// $button-weight: bold;
|
||||
// $button-text-shadow: true;
|
||||
// $button-box-shadow: true;
|
||||
|
||||
/////// Config defaults for ``standard_rounded_border`` mixin ///////
|
||||
// -----------------------------------------------------------------------------
|
||||
// $standard_round_corner: 3; // sets default border radius
|
||||
// $standard_corner_width: 1px; // sets default border width
|
||||
// $standard_border_color: $border_color; // sets default border color
|
||||
|
||||
/////// Config defaults for ``standard_block_spacing`` mixin ///////
|
||||
// -----------------------------------------------------------------------------
|
||||
// $default_block_spacing: 20; // sets margin-bottom
|
||||
|
||||
/////// Config defaults for site border style ///////
|
||||
// -----------------------------------------------------------------------------
|
||||
// $standard_border_style: solid;
|
||||
|
||||
/////// Config defaults for ``standard_hr`` mixin ///////
|
||||
// -----------------------------------------------------------------------------
|
||||
// $standard_hr_spacing: 40; // sets padding and margin bottom
|
||||
// $standard_hr_color: $delta_gray;
|
||||
// $standard_hr_width: 1px;
|
||||
|
||||
/////// Config values for all default shadows ///////
|
||||
// -----------------------------------------------------------------------------
|
||||
// $h-shadow: 0; // horizontal shadow settings
|
||||
// $v-shadow: 2; // vertical shaddow settings
|
||||
// $blur: 3; // blur settings
|
||||
//
|
||||
// $inset_color: $shadow_color; // for use with ``dual_box_shadow`` mixin
|
||||
// $ih-shadow: 0; // inset horizontal shadow settings
|
||||
// $iv-shadow: 2; // inset vertical shaddow settings
|
||||
// $is-shadow: 2; // inset spread shaddow settings
|
||||
// $iblur: 3; // inset blur settings
|
||||
|
|
|
|||
|
|
@ -47,9 +47,9 @@
|
|||
top: $space_large;
|
||||
left: $space_large;
|
||||
padding: $half_space;
|
||||
border: 4px solid $basic_back_color;
|
||||
border: 4px solid $color_back_basic;
|
||||
border-radius: 4px;
|
||||
background-color: $basic_back_color;
|
||||
background-color: $color_back_basic;
|
||||
pointer-events: none;
|
||||
}
|
||||
.exp_marker_pop {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
table-layout: auto;
|
||||
|
||||
tbody {
|
||||
border-bottom: $cell_border;
|
||||
border-bottom: $basic_border;
|
||||
|
||||
&:hover {
|
||||
background-color: $bright_color;
|
||||
|
|
|
|||
|
|
@ -233,15 +233,17 @@
|
|||
// -----------------------------------------------------------------------------
|
||||
.wrap {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
// height: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.hello {
|
||||
flex: 0 1 auto;
|
||||
width: 80%;
|
||||
|
||||
ul {
|
||||
padding: 1em 5em;
|
||||
background-color: rgba(black, 0.25);
|
||||
background-color: darken($color_back_basic, $color_diff_basic);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
{% endblock %}
|
||||
</head>
|
||||
|
||||
<body id="{{ pageId }}" class="{{ pageClass }} body_demo">
|
||||
<body id="{{ pageId }}" class="{{ pageClass }}">
|
||||
{% include "hippie/partials/page-hover.njk" %}
|
||||
<div id="root">
|
||||
<header id="js_head" class="header_site">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue