Skip to content

Instantly share code, notes, and snippets.

Avatar

Jens Grochtdreis jensgro

View GitHub Profile
@jensgro
jensgro / input.scss
Last active Sep 6, 2022
Generated by SassMeister.com.
View input.scss
$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
jensgro / input.scss
Created Sep 6, 2022
Generated by SassMeister.com.
View input.scss
$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
jensgro / input.scss
Created Sep 6, 2022
Generated by SassMeister.com.
View input.scss
$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
jensgro / ismobile.js
Created May 25, 2022
soll testen, ob es sich um ein mobiles Device handelt
View ismobile.js
var isMobile = function() {
return /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
}
@jensgro
jensgro / index.html
Created Aug 1, 2021
Zeilenboxen und display-Eigenschaft
View index.html
<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
View links-like-buttons.css
@jensgro
jensgro / geschwaetzig.html
Created Jul 4, 2021
Manchmal sind BEM-Klassen unnötig.
View geschwaetzig.html
<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
jensgro / praktisch.html
Created Jul 4, 2021
Unpraktische und praktische BEM-Benamung
View praktisch.html
<!-- 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>
@jensgro
jensgro / nav.html
Created Jul 4, 2021
zweistufige Navigation
View nav.html
<ul class="navigation">
<li class="navigation__first-level-item">
<a href="#" class="navigation__first-level-link">Link</a>
</li>
<li class="navigation__first-level-item">
<a href="#" class="navigation__first-level-link">Noch ein toller Link</a>
<ul class="navigation__second-level">
<li class="navigation__second-level-item">
<a href="#" class="navigation__second-level-link">Link im Submenü</a>