jensgro

/* ***********************************************
  Styles for Mastodon

  Adapted from different sources
  - https://write.as/panais/styles-pour-mastodon-avec-stylus
  - https://mastodon.social/@matuzo/109284559864791077
  - https://mastodon.social/@matuzo/109284628517006156
  - https://gist.github.com/justmarkup/e4f6d52bef604e170815aaf44f459fbc
*********************************************** */

jensgro

$swr-colors:(
    "swrglobal" : #0ca4d1, 
    "swr1" : #ffcc00,
    "swr2" : #000,
    "swrlesenswert" : #000,
    "dasding" : #000, //Gibt es zwar nicht als Rubrik, aber bei der Frequenzsuche
    "swr3" : #ff003c, //Gibt es zwar nicht als Rubrik, aber bei der Frequenzsuche
    "swr4" : #93c030,
    "swrclassic" : #0d0d0d

jensgro

$swr-colors:(
    "swrglobal" : #0ca4d1, 
    "swr1" : #ffcc00,
    "swr2" : #000,
    "swrlesenswert" : #000,
    "dasding" : #000, //Gibt es zwar nicht als Rubrik, aber bei der Frequenzsuche
    "swr3" : #ff003c, //Gibt es zwar nicht als Rubrik, aber bei der Frequenzsuche
    "swr4" : #93c030,
    "swrclassic" : #0d0d0d

jensgro

$swr-colors:(
    "swrglobal" : #0ca4d1, 
    "swr1" : #ffcc00,
    "swr2" : #000,
    "swrlesenswert" : #000,
    "dasding" : #000, //Gibt es zwar nicht als Rubrik, aber bei der Frequenzsuche
    "swr3" : #ff003c, //Gibt es zwar nicht als Rubrik, aber bei der Frequenzsuche
    "swr4" : #93c030,
    "swrclassic" : #0d0d0d

jensgro

var isMobile = function() {
  return /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
}

jensgro

dreispaltiges CSS-Grid-Layout

A Pen by Jens Grochtdreis on CodePen.

License.

jensgro

<h1>Zeilenboxen und display-Eigenschaft</h1>
<p>Jeder Text wird durch eine Zeilenbox repräsentiert. Manche Buchstaben haben Unterlängen und hängen darunter. Elemente, die innerhalb eines Absatzes auftauchen dürfen, sind sogenannte Inline-Elemente. Bei ihnen wirken die vertikalen <code>margins</code> und <code>paddings</code> nicht. Experimentieren Sie mit <code>display: inline-block</code> sowie <code>margin</code> und <code>padding</code>.</p>
<h2>Beispielabsatz mit Markierungen</h2>
<p>Bavaria ipsum dolor sit amet i moan scho <span>aa Trachtnhuat kloan Edlweiss</span> oamoi do griaß God beinand des is hoid aso und des muas ma hoid kenna. <mark>Abfieseln</mark> hoid Biakriagal Breihaus pfiad de. Diandldrahn heid is a geh auszutzeln. Auffi unbandig de Sonn Mamalad a geh ned woar pfiad de Engelgwand lem und lem lossn zwoa san. <strong>Trachtnhuat wolpern</strong> pfiad de kumm geh, hoam. Hoid Mamalad du dadst ma scho daugn Maderln imma obandeln sog i <em>Schuabladdla Schaung</em> kost nix wia da Buachbinda Wan

jensgro

/* http://codepen.io/team/css-tricks/pen/226a65c8f7d64615aabd45048d1d3b6d */

/* Block */
.btn { /*  Basic Styles */ }

/* Element */
.btn__price 	{ /*  Preis */ }
.btn__text 		{ /*  Text */ }

/* Modifier */

jensgro

<ul class="navigation">
  <li class="navigation__item">
    <a href="#" class="navigation__link">Link</a>
  </li>
  <li class="navigation__item">
    <a href="#" class="navigation__link">Noch ein toller Link</a>
  </li>
  <li class="navigation__item">
    <a href="#" class="navigation__link">Der ist noch besser!</a>
  </li>

jensgro

<!-- Jedes Element bezieht sich mit dem Namen NUR auf das Mosul und nicht auf eventuelle Elternelemente. -->
<div class="teaser">
  <header class="teaser__headercontainer">
    <h3 class="teaser__header">Überschrift</h3>
  </header>
  <div class="teaser__content">
    <p>Lorem Dingenskirchen und so weiter, ihr wisst schon ....</p>
  </div>
  <footer class="teaser__footer">
    <a href="linkziel.html" class="teaser__footerlink">weiterlesen ...</a>