Skip to content

Instantly share code, notes, and snippets.

View jensgro's full-sized avatar

Jens Grochtdreis jensgro

View GitHub Profile
@jensgro
jensgro / nav.html
Created July 4, 2021 13:35
zweistufige Navigation
<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>
@jensgro
jensgro / stylestats.txt
Created June 17, 2021 21:12
stylestats-test
# test
@jensgro
jensgro / flutter_setup.md
Created May 21, 2021 16:36 — forked from bradtraversy/flutter_setup.md
Flutter dev setup & notes
@jensgro
jensgro / input.scss
Created September 22, 2020 13:32
Generated by SassMeister.com.
// iFrame mit Aspect-Ratio
.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
padding-bottom: 56.25%;
.embed-responsive-item,
@jensgro
jensgro / eleventy-markdown.md
Last active April 3, 2020 20:22
I want to put parts of some Markdown files into a special area
title date permalink introText introImage tags
Eierlikör
2006-11-04
rezepte/eierlikoer.html
Einfach ein schönes Geschenk. Aber auch zum sleber trinken verdammt lecker.
eierlikoer
getraenk
@jensgro
jensgro / navigation.html
Created March 17, 2020 09:38
Three possible ways to write classes for a navigation with BEM. There may be more.
<nav class="main-nav">
<ul class="main-nav__list">
<li class="main-nav__item">
<a class="main-nav__link" href="#">Link 1</a>
</li>
<li class="main-nav__item">
<a class="main-nav__link" href="#">Link 2</a>
</li>
</ul>
@jensgro
jensgro / table.config.yaml
Created January 22, 2020 13:14
table-folder in fractal
---
status: "wip"
handle: "table"
context:
tablehead:
- item: "AutorIn"
- item: "Titel"
- item: "Verlag"
rows:
@jensgro
jensgro / sr-only.css
Last active December 2, 2020 15:29
Content is only accessible for screenreaders. The white-space-line is important!
/* hide only visually */
.sr-only:not(:focus):not(:active) {
width: 1px;
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
}
@jensgro
jensgro / index.html
Last active October 8, 2019 14:20
Vue.JS AJAX Autocomplete
<div id="app">
<form>
<div class="input-group">
<input type="text" class="form-control" placeholder="Buchtitel" aria-label="Buchtitel suchen" v-model="query" @keyup="search">
<div class="input-group-append"><button class="btn btn-outline-primary" id="button">Suchen</button></div>
</div>
<div class="p-5 d-flex justify-content-center" v-if="!docs.length && query.length"><div class="spinner-border" role="status"><span class="sr-only">Loading...</span></div></div>
<div class="list-group" v-if="docs.length">
<button v-for="doc in docs" type="button" class="list-group-item list-group-item-action">{{ doc.title }}</button>
</div>
@jensgro
jensgro / index.html
Last active October 8, 2019 13:43
Vue-Test - Dingsdays
<div id="app">
<form>
<label for="email">Email-Adresse</label>
<input type="email" required name="email" id="email" @keyup="validate" />
<button id="submit" :disabled="disabled">Abschicken!</button>
</form>
</div>