Skip to content

Instantly share code, notes, and snippets.

Avatar

Jens Grochtdreis jensgro

View GitHub Profile
@jensgro
jensgro / input.scss
Created Sep 22, 2020
Generated by SassMeister.com.
View input.scss
// 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 Apr 3, 2020
I want to put parts of some Markdown files into a special area
View eleventy-markdown.md
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 Mar 17, 2020
Three possible ways to write classes for a navigation with BEM. There may be more.
View navigation.html
<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 Jan 22, 2020
table-folder in fractal
View table.config.yaml
---
status: "wip"
handle: "table"
context:
tablehead:
- item: "AutorIn"
- item: "Titel"
- item: "Verlag"
rows:
@jensgro
jensgro / sr-only.css
Last active Dec 2, 2020
Content is only accessible for screenreaders. The white-space-line is important!
View sr-only.css
/* 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 Oct 8, 2019
Vue.JS AJAX Autocomplete
View index.html
<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 Oct 8, 2019
Vue-Test - Dingsdays
View index.html
<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>
@jensgro
jensgro / SassMeister-input.scss
Created Sep 26, 2019
Generated by SassMeister.com.
View SassMeister-input.scss
// ----
// Sass (vundefined)
// Compass (vundefined)
// dart-sass (v1.18.0)
// ----
// $bp-min: 300px;
//
// .test {
// color: red;
@jensgro
jensgro / SassMeister-input.scss
Created Sep 26, 2019
Generated by SassMeister.com.
View SassMeister-input.scss
// ----
// Sass (vundefined)
// Compass (vundefined)
// dart-sass (v1.18.0)
// ----
$tokens: (
size-scale: (
300: 0.8rem,
500: 1.25rem,