Skip to content

Instantly share code, notes, and snippets.

View fgeierst's full-sized avatar

Florian Geierstanger fgeierst

16 followers · 171 following
View GitHub Profile
@fgeierst
fgeierst / tasks.json
Created December 23, 2020 10:38
Run browsersync when VS Code is openend
/* put tasks.json in '__WORKINGDIRECTORY__/.vscode/' */
{
"version": "2.0.0",
"tasks": [
{
"type": "shell",
"label": "Run Browsersync",
"command": "browser-sync start --f \"*.*\" --proxy \"__URL__.local\"",
"problemMatcher": [],
@fgeierst
fgeierst / style.css
Created December 23, 2020 20:01
Fix block images aspect ratio bug (after Wordpress update 5.6)
/* fix block images aspect ratio bug */
.wp-block-image img, .wp-block-image svg {
max-width:100%;
height:auto;
}
@fgeierst
fgeierst / functions.php
Created December 26, 2020 19:22
Add SVG to allowed file uploads in Wordpress without plugin
/**
* add SVG to allowed file uploads
**/
function add_file_types_to_uploads($file_types){
$new_filetypes = array();
$new_filetypes['svg'] = 'image/svg+xml';
$file_types = array_merge($file_types, $new_filetypes );
return $file_types;
@fgeierst
fgeierst / functions.php
Last active December 27, 2020 14:19
<img> srcset sizes calculation in different wordpress themes
/* https://www.smashingmagazine.com/2015/12/responsive-images-in-wordpress-core/ */
function adjust_image_sizes_attr( $sizes, $size ) {
$sizes = '(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px';
return $sizes;
}
add_filter( 'wp_calculate_image_sizes', 'adjust_image_sizes_attr', 10 , 2 );
@fgeierst
fgeierst / index.html
Created March 15, 2021 07:55
HTML head meta tags, see https://twitter.com/leeerob/status/1353086757013745677
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
@fgeierst
fgeierst / glyphhanger.bat
Created March 15, 2021 10:55
Convert variable font TTF to woff2, subsetting to LATIN1
glyphhanger --subset=*.ttf --formats=woff2 --LATIN
@fgeierst
fgeierst / style.css
Last active June 18, 2021 16:46
CSS grid: responsive center container
.wrapper {
display: grid;
grid-template-columns: 1fr minmax(auto, 20em) 1fr;
}
.wrapper > * {
grid-column: 2 / -2;
}
@fgeierst
fgeierst / Main.js
Created July 26, 2022 12:06
Islands architecture with TYPO3+Rollup+Svelte
import Test from './Test.svelte';
// Mount Svelte component
const test = new Test({
target: document.querySelector('#test')
});
@fgeierst
fgeierst / visually-hidden.css
Created May 30, 2023 09:41
Short visually hidden utility
/* Visually hide an element while still making it accessible for screen readers. */
.visually-hidden {
position: absolute;
transform: scale(0);
}
/* https://www.scottohara.me/blog/2023/03/21/visually-hidden-hack.html
* https://codepen.io/scottohara/pen/QWVOqNY
*/
@fgeierst
fgeierst / text-decoration.css
Created July 30, 2023 11:51
a:not([class]) {
/* Relatively sized thickness and offset */
text-decoration-thickness: max(0.08em, 1px);
text-underline-offset: 0.15em;
}
/* https://moderncss.dev/modern-css-for-dynamic-component-based-architecture/ */