diff --git a/.gitignore b/.gitignore index 6fdc0ab..fb3ee1e 100644 --- a/.gitignore +++ b/.gitignore @@ -188,4 +188,6 @@ typings/ ################### ################### build/ -art/ +**/art/* +**/art/sprites/ +!**/art/demo/ diff --git a/DEPRECATED.md b/DEPRECATED.md index 87dcd08..875a550 100644 --- a/DEPRECATED.md +++ b/DEPRECATED.md @@ -1,6 +1,8 @@ # Deprecated stuff -## Packages +## Gulp + +### Packages ``` "gulp-ruby-sass": "^2.1.1", @@ -11,6 +13,136 @@ "gulp-useref": "^3.1.5", ``` +### Code + +``` +// NOTE // to be deleted + +var oldsource = { + watch: ['source/style/hippie/**/*.scss', 'source/style/**/*.scss', 'source/templates/**/*.+(html|njk)', 'source/pages/**/*.+(html|njk)'], + styles: ['source/style/demo.scss', 'source/style/maintenance.scss'], + scripts: ['source/code/hippie/variables.js', 'source/code/hippie/functions.js', 'source/code/hippie/global.js', 'source/code/**/*.coffee', '!source/vendor/**/*', ], + images: 'source/art/**/*', + pages: 'source/pages/**/*.+(html|njk)', + vendor: 'vendor/**/*' +}; +var oldbuild = { + styles: 'build/css', + scripts: 'build/js', + images: 'build/art', + vendor: 'build/vendor', + root: 'build' +} + +// Task - Clean build directory +gulp.task('clean', function() { + return del([oldbuild.scripts, oldbuild.styles, oldbuild.images]); +}); + +// Task - Styles +gulp.task('styles', () => rubysass(oldsource.styles, {sourcemap: true}) +.on('error', rubysass.logError) +// .pipe(newer({dest: oldbuild.styles, ext: '.css'})) +.pipe(prefix('last 2 version')) +.pipe(gulp.dest(oldbuild.styles)) +.pipe(rename({suffix: '.min'})) +.pipe(cssnano()) +.pipe(sourcemap.write('.', { + includeContent: false, + sourceRoot: 'source' +})) +.pipe(gulp.dest(oldbuild.styles)) +.pipe(browsersync.stream({match: '**/*.css'})) +// .pipe(notify({message: 'Style task complete'})) +); + +// Task - Scripts +gulp.task('scripts', function(cb) { + pump([ + gulp.src(oldsource.scripts), + cache('scripts'), + jshint('.jshintrc'), + jshint.reporter('default'), + sourcemap.init(), + minify(), + remember('scripts'), + concat('all.min.js'), + sourcemap.write(), + gulp.dest(oldbuild.scripts), + browsersync.stream() + ], cb); +}); + +// Task - Images +gulp.task('images', function() { + return gulp.src(oldsource.images) + .pipe(changed(oldbuild.images)) + // .pipe(cache(imagemin({ + // optimizationLevel: 3, + // progressive: true, + // interlaced: true }))) + // ) + .pipe(gulp.dest(oldbuild.images)) + // .pipe(notify({ message: 'Images task complete' })) + ; + }); + + // Task - Vendor + gulp.task('oldvendor', function() { + return gulp.src(oldsource.vendor) + .pipe(plumbError()) + .pipe(gulp.dest(oldbuild.vendor)) + ; + }); + + //Task - Nunjucks + gulp.task('oldnunjucks', function() { + return gulp.src(oldsource.pages) + // .pipe(changed(oldbuild.root)) + .pipe(nunjucks({ + path: ['source/templates'], + envOptions: { + trimBlocks: true + } + })) + .pipe(gulp.dest(oldbuild.root)) + }); + + // a task that ensures the other task is complete before reloading browsers + gulp.task('prewatch', ['oldnunjucks', 'styles'], function(done) { + browsersync.reload(); + done(); + }); + + // Old watch for file changes + gulp.task('oldwatch', ['styles', 'scripts', 'oldnunjucks'], function() { + browsersync.init({ + open: false, + server: oldbuild.root, + // proxy: "http://verser.vrt/virtual/" + }); + + gulp.watch(oldsource.scripts, ['scripts']).on('change', function(event) { + if (event.type === 'deleted') { + delete cache.caches['scripts'][event.path]; + remember.forget('scripts', event.path); + } + }); + // gulp.watch(oldsource.watch, ['prewatch']); + gulp.watch(oldsource.watch, ['styles', 'oldnunjucks']).on('change', browsersync.reload); + // gulp.watch(oldsource.images, ['images']); + }); + + gulp.task('olddefault', ['clean', 'styles', 'scripts', 'images', 'nunjucks']); + + // function errorHandler(err) { + // // Logs out error in the command line + // console.log(err.toString()); + // // Ends the current pipe, so Gulp watch doesn't break + // this.emit('end'); + // } +``` + ## Style ``` diff --git a/gulpfile.js b/gulpfile.js index cea3fb6..54ce553 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -3,7 +3,7 @@ var source_folder = { watch: ['source/style/hippie/**/*.scss', 'source/style/**/*.scss', 'source/templates/**/*.+(html|njk)', 'source/pages/**/*.+(html|njk)'], styles: ['source/style/hippie/*.+(scss|sass)', 'source/style/**/*.+(scss|sass)'], scripts: ['source/code/hippie/variables.js', 'source/code/hippie/functions.js', 'source/code/hippie/global.js', 'source/code/**/*.coffee', '!source/vendor/**/*', ], - images: 'source/art/**/*', + images: 'source/art/images/**/*', pages: 'source/pages/**/*.+(html|njk)', vendor: 'vendor/**/*', root: 'source' @@ -11,7 +11,7 @@ var source_folder = { var build_folder = { styles: 'build/css', scripts: 'build/js', - images: 'build/art', + art: 'build/art', vendor: 'build/vendor', pages: 'build/**/*.html', root: 'build' @@ -135,10 +135,18 @@ gulp.task('sprites', function() { cssName: '_sprites.scss', imgName: 'sprites.png' })) - .pipe(gulpif('*.png', gulp.dest(build_folder.images))) + .pipe(gulpif('*.png', gulp.dest(build_folder.art))) .pipe(gulpif('*.scss', gulp.dest('source/style/hippie/modules/media'))); }); +// copy art files +gulp.task('art', function() { + return gulp.src(source_folder.images) + .pipe(plumbError()) + .pipe(gulp.dest(build_folder.art)) + ; +}); + // copy vendor files gulp.task('vendor', function() { return gulp.src(source_folder.vendor) @@ -194,6 +202,7 @@ gulp.task('overwatch', function() { gulp.watch([ 'source/templates/**/*', 'source/pages/**/*.+(html|njk)', + 'source/art/**/*', 'source/demo_data.json' ], ['nunjucks']); }); @@ -203,7 +212,7 @@ gulp.task('overwatch', function() { gulp.task('default', function(callback) { sequencer( 'clean:dev', - ['sprites', 'vendor', 'lint:js', 'lint:scss'], + ['sprites', 'art', 'vendor', 'lint:js', 'lint:scss'], ['sass', 'js', 'nunjucks'], ['syncreload', 'overwatch'], callback @@ -216,141 +225,7 @@ function plumbError(errTitle) { errorHandler: notify.onError({ // Customizing error title title: errTitle || "Error running Gulp", - message: "Error: <%= error.message %>", - sound: true + message: "<%= error.message %>" }) }); } - - - - - - - - -// NOTE // to be deleted - -var oldsource = { - watch: ['source/style/hippie/**/*.scss', 'source/style/**/*.scss', 'source/templates/**/*.+(html|njk)', 'source/pages/**/*.+(html|njk)'], - styles: ['source/style/demo.scss', 'source/style/maintenance.scss'], - scripts: ['source/code/hippie/variables.js', 'source/code/hippie/functions.js', 'source/code/hippie/global.js', 'source/code/**/*.coffee', '!source/vendor/**/*', ], - images: 'source/art/**/*', - pages: 'source/pages/**/*.+(html|njk)', - vendor: 'vendor/**/*' -}; -var oldbuild = { - styles: 'build/css', - scripts: 'build/js', - images: 'build/art', - vendor: 'build/vendor', - root: 'build' -} - -// Task - Clean build directory -gulp.task('clean', function() { - return del([oldbuild.scripts, oldbuild.styles, oldbuild.images]); -}); - -// Task - Styles -gulp.task('styles', () => rubysass(oldsource.styles, {sourcemap: true}) -.on('error', rubysass.logError) -// .pipe(newer({dest: oldbuild.styles, ext: '.css'})) -.pipe(prefix('last 2 version')) -.pipe(gulp.dest(oldbuild.styles)) -.pipe(rename({suffix: '.min'})) -.pipe(cssnano()) -.pipe(sourcemap.write('.', { - includeContent: false, - sourceRoot: 'source' -})) -.pipe(gulp.dest(oldbuild.styles)) -.pipe(browsersync.stream({match: '**/*.css'})) -// .pipe(notify({message: 'Style task complete'})) -); - -// Task - Scripts -gulp.task('scripts', function(cb) { - pump([ - gulp.src(oldsource.scripts), - cache('scripts'), - jshint('.jshintrc'), - jshint.reporter('default'), - sourcemap.init(), - minify(), - remember('scripts'), - concat('all.min.js'), - sourcemap.write(), - gulp.dest(oldbuild.scripts), - browsersync.stream() - ], cb); -}); - -// Task - Images -gulp.task('images', function() { - return gulp.src(oldsource.images) - .pipe(changed(oldbuild.images)) - // .pipe(cache(imagemin({ - // optimizationLevel: 3, - // progressive: true, - // interlaced: true }))) - // ) - .pipe(gulp.dest(oldbuild.images)) - // .pipe(notify({ message: 'Images task complete' })) - ; - }); - - // Task - Vendor - gulp.task('oldvendor', function() { - return gulp.src(oldsource.vendor) - .pipe(plumbError()) - .pipe(gulp.dest(oldbuild.vendor)) - ; - }); - - //Task - Nunjucks - gulp.task('oldnunjucks', function() { - return gulp.src(oldsource.pages) - // .pipe(changed(oldbuild.root)) - .pipe(nunjucks({ - path: ['source/templates'], - envOptions: { - trimBlocks: true - } - })) - .pipe(gulp.dest(oldbuild.root)) - }); - - // a task that ensures the other task is complete before reloading browsers - gulp.task('prewatch', ['oldnunjucks', 'styles'], function(done) { - browsersync.reload(); - done(); - }); - - // Old watch for file changes - gulp.task('oldwatch', ['styles', 'scripts', 'oldnunjucks'], function() { - browsersync.init({ - open: false, - server: oldbuild.root, - // proxy: "http://verser.vrt/virtual/" - }); - - gulp.watch(oldsource.scripts, ['scripts']).on('change', function(event) { - if (event.type === 'deleted') { - delete cache.caches['scripts'][event.path]; - remember.forget('scripts', event.path); - } - }); - // gulp.watch(oldsource.watch, ['prewatch']); - gulp.watch(oldsource.watch, ['styles', 'oldnunjucks']).on('change', browsersync.reload); - // gulp.watch(oldsource.images, ['images']); - }); - - gulp.task('olddefault', ['clean', 'styles', 'scripts', 'images', 'nunjucks']); - - // function errorHandler(err) { - // // Logs out error in the command line - // console.log(err.toString()); - // // Ends the current pipe, so Gulp watch doesn't break - // this.emit('end'); - // } diff --git a/source/pages/demo.njk b/source/pages/demo.njk index 90dfcdc..0dd36ca 100644 --- a/source/pages/demo.njk +++ b/source/pages/demo.njk @@ -2,9 +2,9 @@ {% set pageId = "index" %} {% set pageClass = "height_full" %} -{% extends "hippie/demo-default.njk" %} +{% extends "demo/default.njk" %} -{% block title %}index{% endblock %} +{% block title %}index - HIPPIE{% endblock %} {% block head %} {{ super() }} diff --git a/source/pages/demo/blank.njk b/source/pages/demo/blank.njk index 13070e9..a653c60 100644 --- a/source/pages/demo/blank.njk +++ b/source/pages/demo/blank.njk @@ -2,9 +2,9 @@ {% set pageId = "blank" %} {% set pageClass = "height_full" %} -{% extends "hippie/demo-default.njk" %} +{% extends "demo/default.njk" %} -{% block title %}blank{% endblock %} +{% block title %}blank - HIPPIE{% endblock %} {% block head %} {{ super() }} diff --git a/source/pages/demo/elements.njk b/source/pages/demo/elements.njk index 1da2ffd..c53df80 100644 --- a/source/pages/demo/elements.njk +++ b/source/pages/demo/elements.njk @@ -2,7 +2,7 @@ {% set pageId = "elements" %} {% set pageClass = "" %} -{% extends "hippie/demo-extended.njk" %} +{% extends "demo/extended.njk" %} {% block title %}Elements{% endblock %} {% block head %} diff --git a/source/pages/demo/error/404.njk b/source/pages/demo/error/404.njk index 5ed2efe..33c26d0 100644 --- a/source/pages/demo/error/404.njk +++ b/source/pages/demo/error/404.njk @@ -2,7 +2,7 @@ {% set pageId = "404" %} {% set pageClass = "body_status" %} -{% extends "hippie/demo-maintenance.njk" %} +{% extends "demo/maintenance.njk" %} {% block title %}404{% endblock %} {% block head %} @@ -21,5 +21,5 @@

Wikipedia

-{% include "hippie/partials/footer-status.njk" %} +{% include "demo/partials/footer-status.njk" %} {% endblock %} diff --git a/source/pages/demo/error/500.njk b/source/pages/demo/error/500.njk index dec9770..e74624a 100644 --- a/source/pages/demo/error/500.njk +++ b/source/pages/demo/error/500.njk @@ -2,7 +2,7 @@ {% set pageId = "500" %} {% set pageClass = "body_status" %} -{% extends "hippie/demo-maintenance.njk" %} +{% extends "demo/maintenance.njk" %} {% block title %}500{% endblock %} {% block head %} @@ -21,5 +21,5 @@

Wikipedia

-{% include "hippie/partials/footer-status.njk" %} +{% include "demo/partials/footer-status.njk" %} {% endblock %} diff --git a/source/pages/demo/examples.njk b/source/pages/demo/examples.njk index 5c6131b..fea23ee 100644 --- a/source/pages/demo/examples.njk +++ b/source/pages/demo/examples.njk @@ -2,7 +2,7 @@ {% set pageId = "examples" %} {% set pageClass = "" %} -{% extends "hippie/demo-extended.njk" %} +{% extends "demo/extended.njk" %} {% block title %}Examples{% endblock %} {% block head %} diff --git a/source/pages/demo/intro.njk b/source/pages/demo/intro.njk index 2724106..17eb303 100644 --- a/source/pages/demo/intro.njk +++ b/source/pages/demo/intro.njk @@ -2,7 +2,7 @@ {% set pageId = "intro" %} {% set pageClass = "" %} -{% extends "hippie/demo-extended.njk" %} +{% extends "demo/extended.njk" %} {% block title %}Intro{% endblock %} {% block head %} @@ -19,10 +19,10 @@
Dies ist einfach nur Text.
Weniger wäre Nichts, denn dieser Text ist nicht durch ein spezifisches Element umschlossen.
Dies ist normalerweise nicht vorgesehen und wird hier nur zur Einführung und Anschauung verwendet.

-

Es wirken nur die Eigenschaften des <body> Elements. Dieses Element umschließt den gesamten Inhalt des Dokumentes und kommt daher nur einmal vor. Inhalte sind normalerweise durch Elemente definiert. Grundlegende Elemente teilen das Dokument zunächst in Abschnitte.

-

Bereiche

- {# // body // article // section // nav // aside // h1-h6 // header // footer #}
+

Es wirken nur die Eigenschaften des <body> Elements. Dieses Element umschließt den gesamten Inhalt des Dokumentes und kommt daher nur einmal vor. Inhalte sind normalerweise durch Elemente definiert. Grundlegende Elemente teilen das Dokument zunächst in Abschnitte.

+

Bereiche

+ {# // body // article // section // nav // aside // h1-h6 // header // footer #}

Einen Abschnitt, welcher für sich alleine stehen kann, definiert sich durch <article>. Solch ein Element wird oft detailliert gestaltet, kommt aber auch ohne jegliche Gestaltung aus.

Noch allgemeiner ist das <section> Element. Es schafft Bereiche um Inhalte zu strukturieren.

@@ -59,7 +59,7 @@

Gruppierung

{# // p // address // hr // pre // blockquote // ol // ul // li // dl // dt // dd // figure // figcaption // main // div #}

Ein Absatz <p>. Zugegeben ein kurzer.

-

Aus mehreren Absätzen wird ein ganzer Text. Solche Texte haben gelegentlich großen informativen oder unterhaltsamen Charakter.
Einfache Zeilenumbrüche werden darin mit <br> erreicht.

+

Aus mehreren Absätzen wird ein ganzer Text. Solche Texte haben gelegentlich großen informativen oder unterhaltsamen Charakter.
Einfache Zeilenumbrüche werden darin mit <br> erreicht. Dies ist allerdings ein Element der Textebene und keine Gruppierung.

Die Unterteilung in Absätze ist eine von vielen Möglichkeiten Texte zu gruppieren und ihnen Struktur zu verleihen. In diesem Dokument flattert Text normalerweise von Links daher. Er ist schwarz und in einer serifenlosen Schrift gesetzt. Zu weiteren Formatierungen, die eher auf einer Ebene der Zeichen einzuordnen ist, wird im Verlauf näher eingegangen. Zunächst die Struktur:

Text sitzt gerne auch mal zentriert.

p.txt_center

Rechtsbündig ist schon eher eine Ausnahme bzw. Besonderheit.

p.txt_right
@@ -83,6 +83,13 @@

Wikipedia

blockquote>p+p.quote_source
+

Gerade bei wörtlichen Zitierungen kommt häufig das Anführungszeichen zum Einsatz. Es kann durch die Formatierung automatisch ergänzt werden.

+
+

Das kannst du schon so machen aber dann isses halt Kacke.

+

o. V.

+
+
blockquote.quote_mark>p+p.quote_source
+

Listen

Text bekommt durch Listen besondere optische wie auch inhaltliche Struktur. Es gibt ungeordnete <ul> und geordnete Listen <ol> sowie Beschreibungslisten <dl>. Die beiden ersten Varianten beinhalten das Listenelement <li>. Beschreibungslisten beinhalten jeweils das Paar von Ausdruck <dt> und Beschreibung <dd>. Im Folgenden eine Liste der Listen in ihrer Ausgangskonfiguration:

  • Ungeordnete
    • @@ -102,7 +109,7 @@
    Ausdruck
    Beschreibung
    -

    Auch Inhalte, die nicht in Textform sind, können durch einen Bezug integriert werden. Wie diese Fahne werden sie mit <figure> umschlossen und tragen eine Bezeichnung.

    +

    Auch Inhalte, die nicht in Textform sind, können durch einen Bezug integriert werden. Wie diese Fahne werden sie mit <figure> umschlossen und tragen eine Bezeichnung, welche mit <figcaption> ausgezeichnet wird.

    Fahne
    @@ -127,47 +134,112 @@ {# // 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 #}

    Verweise

    Ein wesentlicher Bestandteil von Hypertext sind Verweise <a>. Sie dienen als Sprungmarken innerhalb des Netzwerks. Es kann grob zwischen internen und externen Verweisen unterschieden werden. Interne Verweisea.a_line können Verknüpfungen innerhalb des aktuellen Dokumentes sein oder auch Funktionen aktivieren. Externe Verweise 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 Alles auslösen. Anweisungen werden im URL Standard übergeben.

    -

    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. Farbige oder unterstrichene Varianten sind möglich.

    +

    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. Farbige oder unterstrichene Varianten sind einfache Beispiele.

    Wird der Verweis innerhalb eines <nav> Elementes notiert, bekommt er die spezielle Bedeutung eines Navigationsverweises innerhalb des Dokumentes oder der Anwendung. Verweise werden dann durchaus auch wie Schaltflächen dargestellt.

    +

    Formatierungen

    Texte, Wörter oder Zeichen können vielfältig formatiert werden.

    Sie können fett <b> oder kursiv <i> geschrieben sein. Auch beides ist möglich!?! Sollen sie nicht nur anders aussehen, sondern auch eine besondere inhaltliche Bedeutung bekommen, werden sie mit <strong> und <em> ausgezeichnet.

    Das <u> Element stellt eine Spanne von Text mit einer unartikulierten, wenn auch explizit dargestellten, nicht-textuellen Anmerkung dar, wie z.B. die Beschriftung des Textes als Eigenname wie Interaktionsweise, oder die Beschriftung des Textes als falsch geschrieben.

    Ähnlich ist es mit dem Element <small>. Es steht für Randnotizen wird aber häufig auch kleiner dargestellt.

    -

    Gerade bei wörtlichen Zitierungen kommt häufig das Anführungszeichen zum Einsatz. Es kann durch die Formatierung automatisch ergänzt werden.

    -
    -

    Das kannst du schon so machen aber dann isses halt Kacke.

    -

    o. V.

    -
    -
    blockquote.quote_mark>p+p.quote_source
    -

    Ein besonderer inhaltlicher Bezug ist der Titel eines Werkes. Sowas kann mit <cite> ausgezeichnet werden. Pulp Fiction, super Film - zum Beispiel.

    -

    Auch die Auszeichnung <code> wurde bis hier hin schon verwendet. Sie markiert Maschinensprache.var code = "Das ist code";

    -

    In diesem Beispiel wird die Variable code definiert. Solch ein spezieller Text kann mit dem dafür vorgesehenen Element <var> ausgezeichnet werden.

    +

    Ist ein Text nicht mehr korrekt oder relevant kann er mit <s> markiert werden:
    Die Erde ist eine Scheibe.

    +

    Ein besonderer inhaltlicher Bezug ist der Titel eines Werkes. Sowas kann mit <cite> ausgezeichnet werden. Pulp Fiction, ist ein super Film - zum Beispiel.

    +

    Um ein Zitat direkt im Text zu verwenden benutzt man das <q> Element. Es platziert Anführungszeichen um die Aussage:

    +

    Sie sagte: Du wolltest staubsaugen!
    Er sagte: Mach' ich morgen.

    +

    Mit dem <dfn> Element werden Begriffe definiert. Es wird häufig mit dem Element für Abkürzungen <abbr> gemeinsam verwendet. Die eigentliche Definition kann dabei auch im Attribut title stehen.

    +

    Hippie is an recursive acronym for Hippie interweaves preeminent personal interface elements.

    +

    Die besondere Auszeichnungen <ruby> bezeichnet ein Anmerkungssystem, bei dem der Text zusammen mit seiner Anmerkung in einer Zeile erscheint. Das System verwendet die folgenden weiteren Elemente mit spezifischer Bedeutung:

    +
    + <rb> +
    Basis Textkomponente
    + <rt> +
    Annotation
    + <rtc> +
    Einzelne Komponente einer Annotation
    + <rp> +
    Alternative bei fehlender Unterstützung
    +
    +
    +
    + BasisAuszeichnung + 今日きょう + + ♥: Herz, Cœur. + ☘: Kleeblatt, Trèfle. + ✶: Stern, Étoile. + +
    +
    +

    Wikipedia erklärt dies ausführlicher unter Ruby Annotation.

    +

    Es gibt auch mehrere besondere Elemente um Maschinensprache oder Programmkode zu bezeichnen. Dabei wird unterschieden, ob der Inhalt nur für Menschen ausgezeichnet wird oder auch maschinen-lesbar sein soll. Die Elemente <data> und <time> enthalten eine maschinen-lesbare Repräsentation des Inhaltes:

    +
    +
    0 ≠ NULL
    +
    <data>0</data> ≠ <data>NULL</data>
    +
    Der Wert NULL mit Attribut
    +
    <data value="NULL">NULL</data>
    +
    +
    <time>2018-10-08</time>
    +
    Die Zeitangabe mit Attribut
    +
    <time datetime="2018-10-08">Gestern</time>
    +
    +

    Die Auszeichnung <code> wurde bis hier hin schon verwendet. Sie markiert ebenfalls Maschinensprache. Allerdings dient sie dazu von Menschen gelesen zu werden. In diesem Dokument werden alle Elemente, die erklärt werden wiederum mit diesem Element markiert.

    Für zusammenhängende Blöcke wird die Auszeichnung oft in Kombination mit dem Element <pre> verwendet:

    <html>
      <head>
        <title>Hyper Text Markup Language</title>
      </head>
      <body id="root">
        <!-- Content goes here -->
        <p class="example">Just like this.</p>
      </body>
    </html>

    Dabei bleiben vorhandene Textformatierungen wie Zeilenumbrüche und Einrückung erhalten.

    +

    var def = "Definition einer Variablen";

    +

    In diesem Beispiel wird die Variable def definiert. Solch ein spezieller Typ Programmkode kann mit dem dafür vorgesehenen Element <var> ausgezeichnet werden.

    Soll beispielhaft auf Ausgaben von Computern verwiesen werden, wird das <samp> Element verwendet. Der Computer hat gesagt: Ich kann das angegebene Objekt nicht finden.

    -

    Benutzereingaben haben ebenfalls ein eigenes Element <kbd>. Damit werden Eingaben durch den Nutzer, wie Drücken Sie gleichzeitig Strg und A, gekennzeichnet.

    +

    Benutzereingaben haben ebenfalls ein eigenes Element <kbd>. Damit werden Eingaben durch den Nutzer, wie zum Beispiel Drücken Sie gleichzeitig Strg und A, gekennzeichnet.

    +

    Hoch- und Tiefgestellte Zeichen werden durch die Elemente <sup> und <sub> repräsentiert. Sie dienen nicht dazu rein optische Auszeichnungen zu erreichen sondern werden für ihren jeweiligen Zweck eingesetzt. In der Mathematik oder Chemie sind sie üblich:

    +

    Beispielsweise die Formel E=mc2 oder das Element H2O

    Die Zeichen in Absätzen bis hin zu ganzen Texten können, mit einem geeigneten Eingabegerät, markiert werden. Dies stellt sich wie folgt dar:

    -

    Beispiel zum markieren ^^.

    +

    Beispiel zum markieren 😉.

    Eine Markierung kann, mittels <mark>, auch durch den Autor geschehen. Diese stellt sich ein wenig anders dar: Diese Worte sind markiert.

    -

    Um Text, dessen schreibweise nicht vorhersehbar ist, zu markieren wie z.B. Benutzernamen كائن بشري, die auch rechtsbündig geschrieben sein können, wird das <bdi> Element eingesetzt.
    Die Schreibweise kann auch auch vom Author vorgegeben und expliziert geändert werden. Dies wird dem <bdo> Element umgesetzt.

    +

    Um Text, dessen schreibweise nicht vorhersehbar ist, zu markieren wie z.B. Benutzernamen كائن بشري, die auch rechtsbündig geschrieben sein können, wird das <bdi> Element eingesetzt.
    Die Schreibweise kann auch auch vom Author vorgegeben und expliziert geändert werden. Dies wird dem <bdo> Element umgesetzt. Die Richtung wird dann mit dem Attribut dir angegeben.

    • كائن بشري
    • إنسان آلي
     -

    Neben den vielen speziellen Elmenten gibt es auch ein Element, das keine vordefinierte Bedeutung hat. Es ist das <span> Element.

    -

    ...

    +

    Neben den vielen speziellen Elmenten gibt es auch ein Element, das keine vordefinierte Bedeutung hat. Es ist das <span> Element.
    Es dient dazu ganz individuelle Auszeichnungen zu ermöglichen die eher optische Auswirkungen haben und eben keine inhaltlichen. Mit den Attributen id oder class werden dazu eigene Typen des Elements definiert. Diese Möglichkeit der Definition von individuellen Elementen ist ein Grundprinzip der Auszeichnungssprache HTML.

    +

    Mit der Einführung von Absätzen wurde auch schon das <br> Element erwähnt und seitdem häufig benutzt. Es erzeugt einen Zeilenumbruch. Es wird dadurch kein neuer Absatz erstellt. Es dient auch nicht dazu optischen Abstand zu erzeugen, sondern innerhalb eines Absatzes den Text umzubrechen.

    +

    Eine besondere Form des Zeilenumbruchs kann mit <wbr> eingesetzt werden. Es stellt die Möglichkeit für einen Zeilenumbruch dar. Da das Format eines HTML-Dokumentes häufig nicht vorhersehbar ist, kann solch ein Element einen Umbruch erzeugen falls ein Wort zu lang für eine Textzeile sein sollte.

    +

    Und der Löwe brüllte "RRRRrrrrooooooooaaaaAAAAAAAAHHHHhhhhrrrrrrrrr"!

    +

    Es kann auch innerhalb von vorformatierten Texten Zeilenumbrüche ermöglichen

    Änderungen

    +

    Werden Texte geändert, können solche Änderungen sichtbar gemacht werden. Somit können sie besser nachvollzogen werden.
    Zum Beispiel eine Ergänzung von Inhalt.

    + +

    Der Inhalt wird dann mit <ins> ausgezeichnet. Wird Text entfernt, kommt das <del> zum Einsatz.

    +
    Zu Tun
    +
      +
    • Fahrrad reparieren
      • +
    • Staubsaugen
      • +
    • Tisch bauen
      • +
-

Eingebundene Inhalte

- +

Eingebundene Inhalte

+ {# // picture // source // img // iframe // embed // object // param // video // audio // track // map // area #} + Fahne von Interaktionsweise +

Die ist ein Bild. Es wird mit dem Element <img> eingebunden. Solch ein Bild hat üblicherweise die Attribute width und height. Mit ihnen werden die Abmessungen (Breite und Höhe) festgelegt. Außerdem sollte immer das Attribut alt für eine alternative Beschreibung in Textform verwendet werden.

+

Das Bild selbst liegt normalerweise als Datei vor. Die Quelle wird mit dem Attribut src angegeben. Es können einige Alternativen zur Angabe einer konkreten Datei eingesetzt werden. Zum Beispiel können mehrere Dateien in Abhängigkeit zur Darstellung oder dem unterstützen Format angegeben werden. Dafür können dann die Elemente <source> und <picture> in Kombination verwendet werden.

+ + + +

Tabellen

@@ -351,7 +423,7 @@

Ein spezieller Typ des Eingabefeldes hat die Funktion einer Schaltfläche <input[type="button"]>. Es gibt allerdings auch ein eigenes Element <button> dafür.

-

Interaktive Elemente können durch das Attribut <readonly> nur lesbar gemacht werden oder mittels <disabled> gänzlich deaktiviert werden.

+

Interaktive Elemente können durch das Attribut readonly nur lesbar gemacht werden oder mittels disabled gänzlich deaktiviert werden.

Das Element <label> ergänzt interaktive Elemente um eine Beschriftung. Wichtig ist hier, dass die Beziehung beider Elemente zu einander deutlich ist.

diff --git a/source/pages/demo/maintenance.njk b/source/pages/demo/maintenance.njk index 0b3eaf6..fee0a93 100644 --- a/source/pages/demo/maintenance.njk +++ b/source/pages/demo/maintenance.njk @@ -2,7 +2,7 @@ {% set pageId = "blank" %} {% set pageClass = "height_full" %} -{% extends "hippie/demo-maintenance.njk" %} +{% extends "demo/maintenance.njk" %} {% block title %}Wartung{% endblock %} diff --git a/source/pages/demo/os.njk b/source/pages/demo/os.njk index 9df5bc6..c177b8d 100644 --- a/source/pages/demo/os.njk +++ b/source/pages/demo/os.njk @@ -2,7 +2,7 @@ {% set pageId = "os" %} {% set pageClass = "" %} -{% extends "hippie/demo-extended.njk" %} +{% extends "demo/extended.njk" %} {% block title %}demo{% endblock %} {% block head %} diff --git a/source/pages/demo/tests.njk b/source/pages/demo/tests.njk index 17debd1..202bd43 100644 --- a/source/pages/demo/tests.njk +++ b/source/pages/demo/tests.njk @@ -2,9 +2,9 @@ {% set pageId = "blank" %} {% set pageClass = "height_full" %} -{% extends "hippie/demo-default.njk" %} +{% extends "demo/default.njk" %} -{% block title %}blank{% endblock %} +{% block title %}tests - HIPPIE{% endblock %} {% block head %} {{ super() }} @@ -29,7 +29,7 @@ Caps Lock is ON. -{% import "hippie/macros/nav-macro.njk" as forms %} +{% import "demo/macros/nav-macro.njk" as forms %} {{ forms.active('zubereitung') }} {% endblock %} diff --git a/source/style/_demo_config.scss b/source/style/_demo_config.scss index 24e90b0..82d2f3c 100644 --- a/source/style/_demo_config.scss +++ b/source/style/_demo_config.scss @@ -1,6 +1,6 @@ // Override for configuration file -// All variables setup with !default in gloabl/_config.scss can be used +// All variables setup with !default in global/_config.scss can be used // ------------------------------------------------------------------------------ -// $color_back_basic: yellow; -// $basic_link_color: magenta; +// $color_back_basic: beige; +// $color_link_basic: crimson; diff --git a/source/style/_demo_new.scss b/source/style/_demo_new.scss deleted file mode 100644 index 3a6c03d..0000000 --- a/source/style/_demo_new.scss +++ /dev/null @@ -1,38 +0,0 @@ -.test { - li::after { - content: ""; - display: block; - height: 16px; - } -} - -.front_color_1 { color: $alpha_color; &::after { background-color: $alpha_color; } } -.front_color_2 { color: $bravo_color; &::after { background-color: $bravo_color; } } -.front_color_3 { color: $charlie_color; &::after { background-color: $charlie_color; } } -.front_color_4 { color: $delta_color; &::after { background-color: $delta_color; } } -.front_color_5 { color: $echo_color; &::after { background-color: $echo_color; } } - -.back_color_1 { background-color: $alpha_color;} -.back_color_2 { background-color: $bravo_color;} -.back_color_3 { background-color: $charlie_color;} -.back_color_4 { background-color: $delta_color;} -.back_color_5 { background-color: $echo_color;} - -%label { - padding: 0 $half_space; -} - -.label_1 { - @extend %label; - @extend .back_color_1; -} - -.label_2 { - @extend %label; - @extend .back_color_2; -} - -.label_3 { - @extend %label; - @extend .back_color_3; -} diff --git a/source/style/demo.scss b/source/style/demo.scss index fa1ab3c..b66461e 100644 --- a/source/style/demo.scss +++ b/source/style/demo.scss @@ -12,5 +12,3 @@ // ----------------------------------------------------------------------------- @import "modules/demo/demo_module"; // @import "modules/YOUR-MODULE/YOUR-FILES"; -// New -@import "demo_new"; diff --git a/source/style/demo_basic.scss b/source/style/demo_basic.scss index bc2e4b6..dfeec2e 100644 --- a/source/style/demo_basic.scss +++ b/source/style/demo_basic.scss @@ -12,5 +12,3 @@ // ----------------------------------------------------------------------------- @import "modules/demo/demo_module"; // @import "modules/YOUR-MODULE/YOUR-FILES"; -// New -@import "demo_new"; diff --git a/source/style/hippie/elements/_grouping.scss b/source/style/hippie/elements/_grouping.scss index b6dde56..a9a6850 100644 --- a/source/style/hippie/elements/_grouping.scss +++ b/source/style/hippie/elements/_grouping.scss @@ -22,17 +22,17 @@ // ----------------------------------------------------------------------------- p { @extend %basic; - margin-top: $basic_space; - margin-bottom: $basic_space; + margin-top: $space_basic; + margin-bottom: $space_basic; code { - padding: $tiny_space $half_space; + padding: $space_tiny $space_half; font-size: 1em; line-height: 1; } } .column_line { - column-rule: $basic_border; + column-rule: $border_basic; } .column_2, .column_3 { @extend p; @@ -50,17 +50,18 @@ p { // ----------------------------------------------------------------------------- address { // @extend %basic; - margin-top: $double_space; - margin-bottom: $double_space; + margin-top: $space_double; + margin-bottom: $space_double; } // Line // ----------------------------------------------------------------------------- hr { - margin: $space_small auto; - border-width: $basic_border_width 0 0; + margin-top: $space_small; + margin-bottom: $space_small; + border-width: $width_border_basic 0 0; border-style: solid; - border-color: $basic_border_color; + border-color: $color_border_basic; } .hr_hidden { @@ -81,12 +82,12 @@ pre { .pre_code { overflow-x: auto; - border-color: darken($color_back_basic, $tiny_color_diff); + border-color: darken($color_back_basic, $color_diff_tiny); border-style: dotted; - border-width: 0 0 0 $border_width_4; - border-radius: $basic_corner; - padding: $basic_space; - background-color: lighten($color_back_basic, $tiny_color_diff); + border-width: 0 0 0 $width_border_4; + border-radius: $radius_basic; + padding: $space_basic; + background-color: lighten($color_back_basic, $color_diff_tiny); code { background-color: transparent; } @@ -95,9 +96,9 @@ pre { // Quote // ----------------------------------------------------------------------------- blockquote { - margin: $basic_space 0; - padding-right: $basic_indent; - padding-left: $basic_indent; + margin: $space_basic 0; + padding-right: $indent_basic; + padding-left: $indent_basic; } .quote_mark { @@ -105,7 +106,7 @@ blockquote { content: "\201E \0020"; } p::after { - content: "\201C \0020"; + content: "\0020 \201C"; } .quote_source { &::before, &::after { @@ -117,11 +118,15 @@ blockquote { // List // ----------------------------------------------------------------------------- dl, ul, ol { - margin: $double_space 0 $basic_space; + margin: $space_double 0; } ul, ol { - padding-left: $basic_indent; + padding-left: $indent_basic; +} + +dl { + margin-left: $indent_basic; } li, dt, dd { @@ -129,11 +134,11 @@ li, dt, dd { } dd, .list_basic li { - margin-bottom: $basic_space; + margin-bottom: $space_basic; } dd { - margin-left: $basic_indent; + margin-left: $indent_basic; } ul { @@ -157,22 +162,22 @@ ul { .list_link { li { - margin-bottom: $tiny_space * 2; + margin-bottom: $space_tiny * 2; text-transform: uppercase; a { display: block; - padding: $basic_padding; - color: $basic_font_color; + padding: $padding_basic; + color: $color_text_basic; img { - margin-right: $basic_space; + margin-right: $space_basic; padding-bottom: 0.2em; vertical-align: text-bottom; } &:active, &:focus, &:hover { - background-color: $basic_action_color; - color: $basic_highlight_color; + background-color: $color_action_basic; + color: $color_highlight_basic; } } } @@ -188,11 +193,12 @@ ul { // Embedded // ----------------------------------------------------------------------------- figure { - margin: $double_space $basic_indent; + margin: $space_double $indent_basic; } figcaption { @extend %basic; + color: $color_darker; } // Main content @@ -208,8 +214,8 @@ div { } .div_info { - padding: $double_space $basic_indent; - border-right: $basic_space solid rgba($echo_color, 0.6); + padding: $space_double $indent_basic; + border-right: $space_basic solid rgba($echo_color, 0.6); background-color: rgba($echo_color, 0.1) !important; } @@ -233,20 +239,20 @@ div { .box_placeholder { width: 100%; height: $space_medium; - border: $border_width_4 solid transparentize($alpha_color, 0.1); - border-radius: $basic_corner; + border: $width_border_4 solid transparentize($alpha_color, 0.1); + border-radius: $radius_basic; background-color: transparentize($alpha_color, 0.2); } .box_placeholder_bkg { width: 100%; height: $space_medium * 2; - border: $border_width_4 solid transparentize($basic_front_color, 0.1); - border-radius: $basic_corner; - padding: $basic_space; + border: $width_border_4 solid transparentize($color_front_basic, 0.1); + border-radius: $radius_basic; + padding: $space_basic; /*data:[][;charset=][;base64],*/ background: url("data:image/svg+xml;utf8,") no-repeat; - background-color: transparentize($basic_front_color, 0.1); + background-color: transparentize($color_front_basic, 0.1); } .box_file_tile { @@ -294,7 +300,7 @@ div { // Grid .grid { display: grid; - grid-gap: $basic_space; + grid-gap: $space_basic; & > input, & > select, @@ -303,8 +309,8 @@ div { } & > label { - margin: $basic_io_border_width; - padding: $half_space; + margin: $width_border_io; + padding: $space_half; } } diff --git a/source/style/hippie/elements/_interactive.scss b/source/style/hippie/elements/_interactive.scss index 89c05c0..2739650 100644 --- a/source/style/hippie/elements/_interactive.scss +++ b/source/style/hippie/elements/_interactive.scss @@ -29,12 +29,12 @@ label { @extend %basic; input, button, textarea, select { - margin-left: $basic_space; + margin-left: $space_basic; } } input + label { - margin-left: $basic_space; + margin-left: $space_basic; } .label { @@ -44,21 +44,20 @@ input + label { .label > input, .label > textarea, .label > select { - margin: 0 $basic_space; + margin: 0 $space_basic; } // Input // ----------------------------------------------------------------------------- input { - color: $basic_io_font_color; } label + input { - margin-left: $basic_space; + margin-left: $space_basic; } input, button, textarea, select { - margin: $io_margin; + margin: $margin_io; &[disabled="disabled"], &[disabled] { @@ -81,22 +80,23 @@ td > textarea { } .io_input, .io_textarea, .io_select { - padding: $half_space; - background-color: $basic_io_back_color; + padding: $space_half; + color: $color_text_io; + background-color: $color_back_io; &:hover { - background-color: $basic_highlight_color; + background-color: $color_highlight_basic; } &[readonly="readonly"], &[readonly] { - background-color: darken($basic_io_back_color, 30%); + background-color: darken($color_back_io, $color_diff_double); } &[disabled="disabled"], &[disabled] { &:hover { - background-color: $basic_io_back_color; + background-color: $color_back_io; } } } @@ -110,16 +110,16 @@ td > textarea { @each $input in $io_input_list, textarea { #{$input} { - // border: $basic_io_border; + // border: $border_io; } } .io_input, .io_textarea { - border: $basic_io_border; + border: $border_io; &[readonly="readonly"], &[readonly] { - border-color: darken($basic_io_border_color, 30%); + border-color: darken($color_border_io, $color_diff_double); } &[disabled="disabled"], @@ -131,16 +131,16 @@ td > textarea { // Fieldset // ----------------------------------------------------------------------------- fieldset { - margin: $high_margin; - padding: $basic_space; - border: $basic_border; + margin: $margin_double; + padding: $space_basic; + border: $border_basic; } // Legend // ----------------------------------------------------------------------------- legend { @extend %basic; - padding: 0 $half_space; + padding: 0 $space_half; } // Button @@ -151,10 +151,10 @@ button { .io_button { @extend %basic_button; - border: $basic_io_border_width solid $oi_border_color; - padding: $basic_padding; - color: $oi_font_color; - background-color: $oi_back_color; + border: $width_border_io solid $color_border_button; + padding: $padding_basic; + color: $color_text_button; + background-color: $color_back_button; &:hover { // border-color: #0059F6; @@ -166,10 +166,10 @@ button { &[disabled="disabled"], &[disabled] { border-color: transparent; - color: $oi_border_color; + color: lighten($color_text_button, $color_diff_double); &:hover { - background-color: $oi_back_color; + background-color: $color_back_button; } } } diff --git a/source/style/hippie/elements/_sections.scss b/source/style/hippie/elements/_sections.scss index abc8859..6a4f709 100644 --- a/source/style/hippie/elements/_sections.scss +++ b/source/style/hippie/elements/_sections.scss @@ -25,11 +25,11 @@ body { position: relative; box-sizing: $box_sizing; margin: 0; - font-family: $primary_font_family; - font-size: $basic_size; - line-height: $basic_line; - line-height: $text_line_basic; - color: $basic_font_color; + font-family: $family_text_basic; + font-size: $size_text_basic; + line-height: $line_basic; + line-height: $line_text_basic; + color: $color_text_basic; background-color: $color_back_basic; *, @@ -42,7 +42,7 @@ body { .layer_hover { background-color: transparent !important; - transition: background-color $double_duration $basic_timing 0s !important; + transition: background-color $duration_double $timing_basic 0s !important; } } } @@ -60,7 +60,7 @@ section { } .sec_main_center { - width: $basic_width; + width: $width_basic; margin: 0 auto; padding-top: $space_small; @@ -76,9 +76,9 @@ section { } .sec_main_status { - border-top-width: $border_width_8; + border-top-width: $width_border_8; border-top-style: solid; - border-color: $basic_border_color; + border-color: $color_border_basic; padding-top: $space_small; } @@ -91,14 +91,14 @@ nav { // Aside element // ----------------------------------------------------------------------------- aside { - width: $basic_aside_width; + width: $width_aside_basic; &.right + .bside { - margin-right: calc(#{$basic_aside_width} + #{$basic_space}); + margin-right: calc(#{$width_aside_basic} + #{$space_basic}); } &.left + .bside { - margin-left: calc(#{$basic_aside_width} + #{$basic_space}); + margin-left: calc(#{$width_aside_basic} + #{$space_basic}); } &.right { @@ -140,25 +140,25 @@ h2 + h2 { h3 { @extend %head_3; - margin: $double_space 0; + margin: $space_double 0; text-transform: uppercase; } h4 { @extend %head_3; - margin: $double_space 0; + margin: $space_double 0; text-transform: none; } h5 { @extend %head_4; - margin: $double_space 0 $basic_space; + margin: $space_double 0 $space_basic; text-transform: none; } h6 { @extend %basic; - margin: $basic_space 0; + margin: $space_basic 0; text-transform: none; font-weight: bold; } @@ -175,10 +175,10 @@ header { .header_txt { margin-bottom: $space_small; - border-bottom: $dotted_border; + border-bottom: $border_dotted; h1 { - border-top: $basic_border; + border-top: $border_basic; } } diff --git a/source/style/hippie/elements/_tables.scss b/source/style/hippie/elements/_tables.scss index 2acc22d..da04d62 100644 --- a/source/style/hippie/elements/_tables.scss +++ b/source/style/hippie/elements/_tables.scss @@ -16,21 +16,21 @@ // Table // ----------------------------------------------------------------------------- table { - margin: $high_margin; - border: $basic_border; + margin: $margin_double; + border: $border_basic; border-collapse: collapse; } .table_blank { - border: $basic_border_width solid transparent; + border: $width_border_basic solid transparent; th, td { - border: $basic_border_width solid transparent; + border: $width_border_basic solid transparent; } } .table_free { - border: $basic_border_width solid transparent; + border: $width_border_basic solid transparent; } .table_stripe { @@ -40,7 +40,7 @@ table { } tr:nth-child(even) td { - background-color: lighten($color_back_basic, $tiny_color_diff); + background-color: lighten($color_back_basic, $color_diff_tiny); } } @@ -56,8 +56,8 @@ table { // ----------------------------------------------------------------------------- caption { @extend p; - padding: $half_space 0; - border: $dotted_border; + padding: $space_half 0; + border: $border_dotted; text-align: center; } @@ -88,7 +88,7 @@ thead { tfoot { tr:first-child td { - border-top: $basic_border; + border-top: $border_basic; } } @@ -102,17 +102,17 @@ tr { // ----------------------------------------------------------------------------- th, td { @extend %basic; - padding: $half_space; + padding: $space_half; } th { - border: $basic_border; + border: $border_basic; text-align: left; } td { - border-right: $basic_border; - border-bottom: $basic_border; + border-right: $border_basic; + border-bottom: $border_basic; } td:last-child { @@ -124,7 +124,7 @@ td:last-child { } .cell_pre { - // border-right-width: $border_width_4; + // border-right-width: $width_border_4; // border-right-color: lighten($color_back_basic, $color_diff_basic); - background-color: lighten($color_back_basic, $tiny_color_diff); + background-color: lighten($color_back_basic, $color_diff_tiny); } diff --git a/source/style/hippie/elements/_textlevel.scss b/source/style/hippie/elements/_textlevel.scss index 7ce3c00..067f284 100644 --- a/source/style/hippie/elements/_textlevel.scss +++ b/source/style/hippie/elements/_textlevel.scss @@ -37,47 +37,57 @@ // Links // ----------------------------------------------------------------------------- a { - color: $basic_link_color; - // color: lighten($basic_action_color, 20%); + color: $color_link_basic; + // color: lighten($color_action_basic, 20%); text-decoration: none; &:active, &:focus, &:hover { - color: $basic_highlight_color; + color: $color_highlight_basic; } } .a_line { - border-bottom-width: $tiny_space; + border-bottom-width: $space_tiny; border-bottom-style: dotted; - border-color: $basic_border_color; + border-color: $color_border_basic; + color: $color_text_basic; background-color: transparent; - color: $basic_font_color; - transition: color $basic_duration $basic_timing; + transition: color $duration_basic $timing_basic; &:active, &:focus, &:hover { - background-color: $basic_action_color; - color: $basic_highlight_color; + color: $color_highlight_basic; + background-color: $color_action_basic; } } .a_button { - @extend %default_button; + display: inline-block; + padding: $padding_basic; + border-radius: $radius_basic; + background-color: transparentize($color_link_basic, 0.8); + + &:active, + &:focus, + &:hover { + border-color: transparent; + background-color: transparentize($color_highlight_basic, 0.8); + } } .a_button_text { - @extend %default_button; - padding: $wide_padding; + @extend .a_button; + padding: $padding_link; + color: $color_text_basic; background-color: transparent; - color: $basic_font_color; } .a_button_border { @extend .a_button_text; - border: $basic_border; + border: $border_basic; } @@ -88,8 +98,8 @@ i, em { } .i_bright { + color: $color_highlight_basic; font-style: normal; - color: $basic_highlight_color; } // Bold, Strong @@ -172,14 +182,14 @@ time { // ----------------------------------------------------------------------------- code { @extend %basic_mono; - color: lighten($basic_font_color, $color_diff_basic); - background-color: lighten($color_back_basic, $tiny_color_diff); + color: lighten($color_text_basic, $color_diff_basic); + background-color: lighten($color_back_basic, $color_diff_tiny); } .code_solo { @extend %basic_mono; - padding: $tiny_space $half_space; - color: $basic_font_color; + padding: $space_tiny $space_half; + color: $color_text_basic; } // Variable @@ -191,7 +201,7 @@ var { // Sample // ----------------------------------------------------------------------------- samp { - + @extend %basic_mono; } // Keyboard input @@ -200,12 +210,12 @@ kbd { @extend %basic_mono; // font-size: .9em; // font-weight: bold; - padding: 0 $half_space; - border-width: $basic_border_width; + padding: 0 $space_half; + border-width: $width_border_basic; border-style: solid; - border-color: darken($color_back_basic, $color_diff_basic); - border-radius: $basic_corner; - color: lighten($basic_font_color, $color_diff_basic); + border-color: $color_darker; + border-radius: $radius_basic; + color: lighten($color_text_basic, $color_diff_basic); } // Sub- and superscript @@ -227,18 +237,18 @@ mark { } .mark_cursor { - color: invert($basic_font_color); - background-color: $basic_font_color; + color: invert($color_text_basic); + background-color: $color_text_basic; } ::-moz-selection { - color: invert($basic_font_color); - background-color: $basic_font_color; + color: invert($color_text_basic); + background-color: $color_text_basic; } ::selection { - color: invert($basic_font_color); - background-color: $basic_font_color; + color: invert($color_text_basic); + background-color: $color_text_basic; } // Text direction diff --git a/source/style/hippie/global/_common.scss b/source/style/hippie/global/_common.scss index 86fa378..d8c715d 100644 --- a/source/style/hippie/global/_common.scss +++ b/source/style/hippie/global/_common.scss @@ -40,8 +40,22 @@ margin-left: 37.5%; } -.space_right_small { - margin-right: $space_small; +@each $size, $variable in (basic, #{$space_basic}), + (small, #{$space_small}), + (medium, #{$space_medium}), + (large, #{$space_large}) { + .space_top_#{$size} { + margin-top: $variable; + } + .space_right_#{$size} { + margin-right: $variable; + } + .space_bottom_#{$size} { + margin-bottom: $variable; + } + .space_left_#{$size} { + margin-left: $variable; + } } .space_left_fourth { @@ -76,8 +90,8 @@ .wrap_center { & > * { - margin-right: (100% - $basic_width) / 2; - margin-left: (100% - $basic_width) / 2; + margin-right: (100% - $width_basic) / 2; + margin-left: (100% - $width_basic) / 2; @include forTabletPortraitUp { margin-right: (100% - $width_small) / 2; @@ -202,7 +216,7 @@ } .hover_back_change { - background-color: darken($color_back_basic, $color_diff_basic); + background-color: $color_darker; transition: background-color 0.2s ease-in-out; &:hover { @@ -213,8 +227,8 @@ .hover_full_view_change { @extend %full_viewport; z-index: $z_heaven; - background-color: transparentize($darkest_color, 0.5); - transition: background-color $extended_duration $basic_timing $extended_duration; + background-color: transparentize($color_darkest, 0.5); + transition: background-color $duration_long $timing_basic $duration_long; pointer-events: none; } @@ -223,11 +237,11 @@ // Colors // ----------------------------------------------------------------------------- .txt_color_light { - color: $color_font_light; + color: $color_brighter; } .txt_color_dark { - color: $color_font_dark; + color: $color_darker; } @@ -251,7 +265,7 @@ } .txt_hero { - font-size: $hero_size_1; + font-size: $size_hero; } .txt_center { @@ -288,22 +302,3 @@ -webkit-background-clip: text; -webkit-text-fill-color: transparent; } - - - -// Input -// ----------------------------------------------------------------------------- -%default_button { - display: inline-block; - padding: $basic_padding; - background-color: transparentize($basic_link_color, 0.8); - border-radius: $basic_corner; - - &:active, - &:focus, - &:hover { - background-color: rgba($basic_highlight_color, 0.1); - color: $basic_highlight_color; - border-color: transparent; - } -} diff --git a/source/style/hippie/global/_config.scss b/source/style/hippie/global/_config.scss index 2029a8e..dd6635f 100644 --- a/source/style/hippie/global/_config.scss +++ b/source/style/hippie/global/_config.scss @@ -5,12 +5,10 @@ // TEXT // ------------------------------------------------------------------------------ -$basic_size: 17px !default; -$basic_print_size: 10pt !default; +$size_text_basic: 17px !default; +$size_text_print: 10pt !default; -$size_1: $basic_size * 4; - -$basic_line: 1; +$line_basic: 1; // $i: 1; // @while $i < 7 { @@ -44,30 +42,24 @@ $basic_line: 1; // ), // ); -$head_size_1: 3.1em !default; -$head_size_2: 2.5em !default; -$head_size_3: 1.8em !default; -$head_size_4: 1.35em !default; +$size_head_1: 3.1em !default; +$size_head_2: 2.5em !default; +$size_head_3: 1.8em !default; +$size_head_4: 1.35em !default; -$text_size_1: 1em; -$text_size_2: 20; +$size_text_1: 1em; +$size_text_2: 20; -$hero_size_1: $head_size_1 * 3; +$size_hero: $size_head_1 * 3; -$text_line_basic: 1.28 !default; -$text_line_mono: 1.1 !default; -$head_line_basic: $text_line_basic !default; -$head_line_2: $head_line_basic; -$head_line_3: $head_line_basic; -$head_line_4: $head_line_basic; +$line_text_basic: 1.28 !default; +$line_text_mono: 1.1 !default; +$line_head_basic: $line_text_basic !default; -$print_font_family: #{'Times New Roman', times} !default; -$monospace_font_family: #{'Courier New', monospace} !default; - -$primary_font_family: #{'Roboto', 'Segoe UI', 'Liberation Sans', 'Source Sans', 'Trebuchet MS', Helvetica, Arial, sans-serif, sans} !default; -$secondary_font_family: $primary_font_family !default; -$third_font_family: $monospace_font_family !default; -$fourth_font_family: $print_font_family !default; +$family_text_basic: #{'Roboto', 'Segoe UI', 'Liberation Sans', 'Source Sans', 'Trebuchet MS', Helvetica, Arial, sans-serif, sans} !default; +$family_text_print: #{'Times New Roman', times} !default; +$family_text_mono: #{'Courier New', monospace} !default; +$family_head_basic: $family_text_basic !default; @@ -85,38 +77,38 @@ $color_palette: ( @include addDefaultColors; $color_diff_basic: 12% !default; -$tiny_color_diff: 4% !default; -$double_color_diff: $color_diff_basic * 2; +$color_diff_tiny: 4% !default; +$color_diff_double: $color_diff_basic * 2; -$darkest_color: black !default; -$brightest_color: white !default; +$color_darkest: black !default; +$color_brightest: white !default; -$basic_font_color: black !default; +$color_text_basic: black !default; $color_back_basic: #808080 !default; -$basic_border_color: lighten($basic_font_color, $color_diff_basic) !default; -$basic_front_color: white !default; +$color_border_basic: lighten($color_text_basic, $color_diff_basic) !default; +$color_front_basic: white !default; -$medium_color: lighten($darkest_color, 50%); -$dark_color: lighten($darkest_color, $double_color_diff); -$bright_color: darken($brightest_color, $double_color_diff); +$color_medium: lighten($color_darkest, 50%); +$color_dark: lighten($color_darkest, $color_diff_double); +$color_darker: darken($color_back_basic, $color_diff_basic); +$color_brighter: lighten($color_back_basic, $color_diff_basic); +$color_bright: darken($color_brightest, $color_diff_double); -$basic_head_color: $basic_font_color !default; -$basic_link_color: $echo_color !default; -$basic_highlight_color: $basic_front_color !default; -$basic_action_color: $foxtrot_color !default; +$color_head_basic: $color_text_basic !default; +$color_link_basic: $echo_color !default; +$color_highlight_basic: $color_front_basic !default; +$color_action_basic: $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); +// $shadow_color: fade-out($color_medium, 0.5); -$basic_color_list: (); +$color_list: (); @each $key, $value in $color_palette { $map: (); $map: map-merge($map, ($key: createColorMap($value, 15%, 0.5)) ); - $basic_color_list: map-merge($basic_color_list, $map); + $color_list: map-merge($color_list, $map); } @@ -130,40 +122,36 @@ $z_top: 10 !default; $z_basic: 1 !default; $z_earth: -100 !default; -$basic_width: 96% !default; +$width_basic: 96% !default; $width_small: 80% !default; $width_medium: 60% !default; $width_large: 48% !default; +$width_aside_basic: 20% !default; -$tiny_space: 1px !default; -$basic_space: $tiny_space * 8 !default; -$half_space: $basic_space / 2; -$double_space: $basic_space * 2; -$space_small: $basic_space * 4; -$space_medium: $basic_space * 8; -$space_large: $basic_space * 16; +$space_tiny: 1px !default; +$space_basic: $space_tiny * 8 !default; +$space_half: $space_basic / 2; +$space_double: $space_basic * 2; +$space_small: $space_basic * 4; +$space_medium: $space_basic * 8; +$space_large: $space_basic * 16; -$basic_margin: $basic_space 0 !default; -$high_margin: $double_space 0 !default; -$io_margin: 0 $space_small 0 0 !default; +$margin_basic: $space_basic 0 !default; +$margin_double: $space_double 0 !default; +$margin_io: 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; +$padding_basic: calc(#{$space_basic} - 3px) $space_basic !default; +$padding_link: calc(#{$space_basic} - 1px) calc(#{$space_basic} * 2) !default; -$basic_indent: 2em !default; +$indent_basic: 2em !default; -$basic_corner: $tiny_space * 2; +$border_basic: $space_tiny solid $color_border_basic; +$border_dotted: $space_tiny dotted $color_border_basic; +$width_border_basic: $space_tiny !default; +$width_border_4: $width_border_basic * 4; +$width_border_8: $width_border_basic * 8; -// Borders -$basic_border_width: $tiny_space !default; -$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; - -$basic_corner_radius: $tiny_space * 2; - -$basic_aside_width: 20%; +$radius_basic: $space_tiny * 2 !default; @@ -210,29 +198,28 @@ $io_focus_list: 'textarea:not([disabled])', '*[tabindex]'; -$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; +$color_text_io: lighten($color_text_basic, $color_diff_basic) !default; +$color_text_button: $color_text_basic !default; +$color_back_io: darken($color_front_basic, $color_diff_basic) !default; +$color_back_button: $color_darker !default; +$color_border_io: $color_front_basic !default; +$color_border_button: $color_dark !default; -$oi_font_color: $basic_font_color; -$oi_back_color: darken($color_back_basic, $color_diff_basic); -$oi_border_color: darken($oi_back_color, $color_diff_basic); +$width_border_io: $space_tiny * 2 !default; +$border_io: $width_border_io solid $color_border_io; +$border_io_dotted: $width_border_io dotted $color_border_io; -$basic_io_border_width: $tiny_space * 2 !default; -$basic_io_border: $basic_io_border_width solid $basic_io_border_color; -$dotted_io_border: $basic_io_border_width dotted $basic_io_border_color; - -$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); +$shadow_basic: inset 0 1px 3px rgba($color_darkest, 0.06); +$shadow_focus: $shadow_basic, 0 0 5px adjust-color($color_action_basic, $lightness: -5%, $alpha: -0.3); // ANIMATIONS // ------------------------------------------------------------------------------ -$basic_duration: 250ms; -$double_duration: 500ms; -$extended_duration: 2s; -$basic_timing: ease-out; +$duration_basic: 250ms !default; +$duration_double: $duration_basic * 2; +$duration_long: 2s !default; +$timing_basic: ease-out !default; diff --git a/source/style/hippie/global/_typography.scss b/source/style/hippie/global/_typography.scss index 03f3af5..3a35b6e 100644 --- a/source/style/hippie/global/_typography.scss +++ b/source/style/hippie/global/_typography.scss @@ -2,53 +2,47 @@ // ----------------------------------------------------------------------------- %basic { - font-family: $primary_font_family; - font-size: $text_size_1; - line-height: $text_line_basic; + font-family: $family_text_basic; + font-size: $size_text_1; + line-height: $line_text_basic; } %basic_mono { - font-family: $monospace_font_family; - font-size: $text_size_1; - line-height: $text_line_mono; + font-family: $family_text_mono; + font-size: $size_text_1; + line-height: $line_text_mono; } %basic_print { - font-family: $print_font_family; - font-size: $text_size_1; - line-height: $text_line_basic; + font-family: $family_text_print; + font-size: $size_text_1; + line-height: $line_text_basic; } %head_all { - color: $basic_head_color; + color: $color_head_basic; + font-family: $family_head_basic; + line-height: $line_head_basic; } %head_1 { - font-family: $secondary_font_family; - font-size: $head_size_1; + font-size: $size_head_1; font-weight: 300; - line-height: $head_line_basic; } %head_2 { - font-family: $secondary_font_family; - font-size: $head_size_2; + font-size: $size_head_2; font-weight: 300; - line-height: $head_line_2; } %head_3 { - font-family: $secondary_font_family; - font-size: $head_size_3; + font-size: $size_head_3; font-weight: 300; - line-height: $head_line_3; } %head_4 { - font-family: $secondary_font_family; - font-size: $head_size_4; + font-size: $size_head_4; font-weight: 300; - line-height: $head_line_4; } %basic_button { diff --git a/source/style/hippie/modules/editor/_editor_module.scss b/source/style/hippie/modules/editor/_editor_module.scss index 12fefc3..7aa9434 100644 --- a/source/style/hippie/modules/editor/_editor_module.scss +++ b/source/style/hippie/modules/editor/_editor_module.scss @@ -7,7 +7,7 @@ // ------------------------------------------------------------------------------ %wip { - border-right: $basic_space solid rgba(crimson, 0.8); + border-right: $space_basic solid rgba(crimson, 0.8); background-color: rgba(crimson, 0.1) !important; } .wip { diff --git a/source/style/hippie/modules/explanation/_explanation_module.scss b/source/style/hippie/modules/explanation/_explanation_module.scss index a806eee..5699bd1 100644 --- a/source/style/hippie/modules/explanation/_explanation_module.scss +++ b/source/style/hippie/modules/explanation/_explanation_module.scss @@ -46,7 +46,7 @@ z-index: 100; top: $space_large; left: $space_large; - padding: $half_space; + padding: $space_half; border: 4px solid $color_back_basic; border-radius: 4px; background-color: $color_back_basic; @@ -54,14 +54,14 @@ } .exp_marker_pop { position: absolute; - top: -$basic_size / 4 * 3; - right: -$basic_size / 2; - width: $basic_size; - height: $basic_size; - border: $tiny_space solid $basic_highlight_color; - border-radius: $basic_size; - color: $basic_highlight_color; - background-color: $darkest_color; + top: -$size_text_basic / 4 * 3; + right: -$size_text_basic / 2; + width: $size_text_basic; + height: $size_text_basic; + border: $space_tiny solid $color_highlight_basic; + border-radius: $size_text_basic; + color: $color_highlight_basic; + background-color: $color_darkest; } .exp_expose { @@ -78,24 +78,24 @@ position: fixed; width: 3em; height: 2em; - // padding: $basic_space $basic_space * 2; + // padding: $space_basic $space_basic * 2; cursor: pointer; } .exp_help_btn { display: table; - right: $double_space; - bottom: $double_space; - background-color: rgba($darkest_color, 0.4); + right: $space_double; + bottom: $space_double; + background-color: rgba($color_darkest, 0.4); &:hover { - background-color: $brightest_color; + background-color: $color_brightest; > .span_solo { - color: $darkest_color; + color: $color_darkest; } } .span_solo { display: table-cell; - color: rgba($brightest_color, 0.8); - font-family: $monospace_font_family; + color: rgba($color_brightest, 0.8); + font-family: $family_text_mono; font-size: 1.4em; text-align: center; vertical-align: middle; diff --git a/source/style/hippie/modules/navigation/_nav_module.scss b/source/style/hippie/modules/navigation/_nav_module.scss index cf972c2..608fd63 100644 --- a/source/style/hippie/modules/navigation/_nav_module.scss +++ b/source/style/hippie/modules/navigation/_nav_module.scss @@ -5,7 +5,7 @@ nav { } li { - margin-bottom: $basic_space; + margin-bottom: $space_basic; list-style: none; } } @@ -15,12 +15,12 @@ nav { @extend .overflow; ul { - margin: $basic_space 0; + margin: $space_basic 0; } li { @extend .float_space_left; - margin-right: $basic_space; + margin-right: $space_basic; margin-bottom: 0; &:last-child { @@ -32,28 +32,28 @@ nav { .nav_right { float: right; - margin-left: $basic_space; + margin-left: $space_basic; .align_parent { - margin-right: $basic_space * -1; + margin-right: $space_basic * -1; } } .nav_separate { li { position: relative; - padding-left: $tiny_space; + padding-left: $space_tiny; &:not(:first-child) { &::before { content: ""; position: absolute; - width: $tiny_space; + width: $space_tiny; height: 100%; left: 0; top: 0; - background-color: $basic_border_color; + background-color: $color_border_basic; } } } @@ -65,17 +65,17 @@ nav { position: relative; &:first-child { - padding-left: $basic_space * 2 + $tiny_space; + padding-left: $space_basic * 2 + $space_tiny; &::before { content: ""; position: absolute; - width: $tiny_space; + width: $space_tiny; height: 100%; left: 0; top: 0; - background-color: $basic_front_color; - margin: 0 $basic_space; + background-color: $color_front_basic; + margin: 0 $space_basic; } } } @@ -96,7 +96,7 @@ nav { .nav_column { position: relative; - margin: $basic_space 0; + margin: $space_basic 0; ul { @extend .flex; @@ -119,11 +119,11 @@ nav { position: fixed; // display: table; // width: 3em; - right: $half_space; - bottom: $double_space; + right: $space_half; + bottom: $space_double; ul { - margin: $basic_space 0; + margin: $space_basic 0; } li { @@ -145,7 +145,7 @@ nav { } &:hover { - background-color: $basic_action_color; + background-color: $color_action_basic; } } .sprite_img { @@ -163,8 +163,8 @@ nav { &:active, &:focus, &:hover { - background-color: rgba($basic_font_color, 0.2); - color: $basic_font_color; + background-color: rgba($color_text_basic, 0.2); + color: $color_text_basic; } } } diff --git a/source/style/hippie/modules/print/_print_module.scss b/source/style/hippie/modules/print/_print_module.scss index ef5322c..1e01a84 100644 --- a/source/style/hippie/modules/print/_print_module.scss +++ b/source/style/hippie/modules/print/_print_module.scss @@ -7,7 +7,7 @@ // ------------------------------------------------------------------------------ %paper { - background-color: $basic_front_color; + background-color: $color_front_basic; } $a4: ".dina4" 1.2cm 1.2cm 1.2cm 2.4cm; @@ -17,7 +17,7 @@ $a6: ".dina6" 0 0 0 1.2cm; $din: $a4, $a5, $a6; .print_body { - font-size: $basic_print_size; + font-size: $size_text_print; margin: 10vh 20vw; @page { diff --git a/source/style/hippie/modules/tables/_tables_module.scss b/source/style/hippie/modules/tables/_tables_module.scss index 6e6f3de..de2523e 100644 --- a/source/style/hippie/modules/tables/_tables_module.scss +++ b/source/style/hippie/modules/tables/_tables_module.scss @@ -1,68 +1,68 @@ -.table_link { - width: 100%; - border: 0; - table-layout: auto; - - tbody { - border-bottom: $basic_border; - - &:hover { - background-color: $bright_color; - } - } - - th, td { - border: 0; - } - - .cell_icon { - width: 48px; - text-align: center; - img { - vertical-align: text-top; - } - } - - .cell_link { - padding-right: $basic_space; - padding-left: $basic_space; - - &:hover { - background-color: $foxtrot_color; - a:first-child { - display: none; - } - a:last-child { - display: block; - color: $basic_highlight_color; - } - } - - a { - display: block; - } - - a:last-child { - display: none; - } - } - - th:last-child, .cell_date { - width: 16%; - text-align: center; - } - - .cell_text { - padding-right: $basic_space; - padding-left: $basic_space; - - div { - width: 100%; - } - - .shorten { - @extend %short; - max-height: 44px; - } - } -} +.table_link { + width: 100%; + border: 0; + table-layout: auto; + + tbody { + border-bottom: $border_basic; + + &:hover { + background-color: $color_bright; + } + } + + th, td { + border: 0; + } + + .cell_icon { + width: 48px; + text-align: center; + img { + vertical-align: text-top; + } + } + + .cell_link { + padding-right: $space_basic; + padding-left: $space_basic; + + &:hover { + background-color: $foxtrot_color; + a:first-child { + display: none; + } + a:last-child { + display: block; + color: $color_highlight_basic; + } + } + + a { + display: block; + } + + a:last-child { + display: none; + } + } + + th:last-child, .cell_date { + width: 16%; + text-align: center; + } + + .cell_text { + padding-right: $space_basic; + padding-left: $space_basic; + + div { + width: 100%; + } + + .shorten { + @extend %short; + max-height: 44px; + } + } +} diff --git a/source/style/modules/demo/_demo_module.scss b/source/style/modules/demo/_demo_module.scss index 36e2ef5..7ad0a85 100644 --- a/source/style/modules/demo/_demo_module.scss +++ b/source/style/modules/demo/_demo_module.scss @@ -22,7 +22,7 @@ } .demo__header { - padding: $double_space; + padding: $space_double; nav { @@ -44,8 +44,8 @@ &:active, &:focus, &:hover { - background-color: rgba($brightest_color, 0.2); - color: $brightest_color; + background-color: rgba($color_brightest, 0.2); + color: $color_brightest; } } } @@ -65,8 +65,8 @@ &:active, &:focus, &:hover { - background-color: rgba($brightest_color, 0.2); - color: $brightest_color; + background-color: rgba($color_brightest, 0.2); + color: $color_brightest; } } } @@ -75,14 +75,14 @@ .demo__footer { width: 100%; // height: 128px; - padding: $double_space 0; - background-color: $dark_color; - color: $bright_color; + padding: $space_double 0; + background-color: $color_dark; + color: $color_bright; nav { a { - color: $brightest_color; + color: $color_brightest; } } } @@ -126,7 +126,7 @@ } .demo__credits { - margin: $space_small 0 $basic_space 0; + margin: $space_small 0 $space_basic 0; } .demo__button_32 { @@ -137,43 +137,43 @@ .demo__queries > p { - padding: $basic_padding; + padding: $padding_basic; } .query_phoneUp { - @include forPhoneUp {background-color: rgba($basic_font_color, 0.2)}; + @include forPhoneUp {background-color: rgba($color_text_basic, 0.2)}; } .query_phoneOnly { - @include forPhoneOnly { background-color: rgba($basic_font_color, 0.2); } + @include forPhoneOnly { background-color: rgba($color_text_basic, 0.2); } } .query_tabletPortaitOnly { - @include forTabletPortraitOnly { background-color: rgba($basic_font_color, 0.2); } + @include forTabletPortraitOnly { background-color: rgba($color_text_basic, 0.2); } } .query_tabletPortraitUp { - @include forTabletPortraitUp { background-color: rgba($basic_font_color, 0.2); } + @include forTabletPortraitUp { background-color: rgba($color_text_basic, 0.2); } } .query_tabletLandscapeOnly { - @include forTabletLandscapeOnly { background-color: rgba($basic_font_color, 0.2); } + @include forTabletLandscapeOnly { background-color: rgba($color_text_basic, 0.2); } } .query_tabletLandscapeUp { - @include forTabletLandscapeUp { background-color: rgba($basic_font_color, 0.2); } + @include forTabletLandscapeUp { background-color: rgba($color_text_basic, 0.2); } } .query_desktopOnly { - @include forDesktopOnly { background-color: rgba($basic_font_color, 0.2); } + @include forDesktopOnly { background-color: rgba($color_text_basic, 0.2); } } .query_desktopUp { - @include forDesktopUp { background-color: rgba($basic_font_color, 0.2); } + @include forDesktopUp { background-color: rgba($color_text_basic, 0.2); } } .query_bigDesktopUp { - @include forBigDesktopUp { background-color: rgba($basic_font_color, 0.2); } + @include forBigDesktopUp { background-color: rgba($color_text_basic, 0.2); } } .demo__query_example { @@ -205,10 +205,10 @@ & { content: '1920px'; } } content: '< 768px'; - padding: $basic_padding; - border-radius: $basic_corner_radius; - color: $brightest_color; - background-color: rgba($basic_front_color, 0.2); + padding: $padding_basic; + border-radius: $radius_basic; + color: $color_brightest; + background-color: rgba($color_front_basic, 0.2); } } @@ -222,11 +222,11 @@ } .demo__td_pr { - padding-right: $double_space; + padding-right: $space_double; } .demo__td_pl { - padding-left: $double_space; + padding-left: $space_double; } // Index @@ -244,6 +244,6 @@ ul { padding: 1em 5em; - background-color: darken($color_back_basic, $color_diff_basic); + background-color: $color_darker; } } diff --git a/source/templates/hippie/demo-default.njk b/source/templates/demo/default.njk similarity index 81% rename from source/templates/hippie/demo-default.njk rename to source/templates/demo/default.njk index 8612521..b285196 100644 --- a/source/templates/hippie/demo-default.njk +++ b/source/templates/demo/default.njk @@ -1,13 +1,11 @@ - + {% block head %} - {% block title %}{% endblock %} - HIPPIE - - {% include "hippie/partials/head-meta.njk" %} + {% include "demo/partials/head-meta.njk" %} diff --git a/source/templates/hippie/demo-extended.njk b/source/templates/demo/extended.njk similarity index 91% rename from source/templates/hippie/demo-extended.njk rename to source/templates/demo/extended.njk index 71b7ac6..4b56136 100644 --- a/source/templates/hippie/demo-extended.njk +++ b/source/templates/demo/extended.njk @@ -1,11 +1,11 @@ - + {% block head %} - {% block title %}{% endblock %} - HIPPIE + {% include "demo/partials/head-meta.njk" %} - {% include "hippie/partials/head-meta.njk" %} - diff --git a/source/templates/hippie/macros/nav-macro.njk b/source/templates/demo/macros/nav-macro.njk similarity index 85% rename from source/templates/hippie/macros/nav-macro.njk rename to source/templates/demo/macros/nav-macro.njk index 62924cb..f1bb73b 100644 --- a/source/templates/hippie/macros/nav-macro.njk +++ b/source/templates/demo/macros/nav-macro.njk @@ -1,4 +1,4 @@ -{% set item = [['mateladen', 'shop'], ['zubereitung', 'preparation'], ['wissen', 'knowledge'], ['blog', 'blog'], ['kontakt', 'contact']] %} +{% set item = [['one', 'filename'], ['two', 'filename']] %} {% macro active(activePage='') %}