Skip to content

Instantly share code, notes, and snippets.

View elfacht's full-sized avatar
🥰
Love code, hate racism

Martin Szymanski elfacht

🥰
Love code, hate racism
View GitHub Profile
@elfacht
elfacht / random.php
Last active January 19, 2022 19:33
Generate random key in PHP
<?php
$activation_key = mt_rand() . mt_rand() . mt_rand() . mt_rand() . mt_rand();
?>
@elfacht
elfacht / find-overflow.js
Created January 19, 2022 08:24
Find horizontal body overflow
// @source http://css-tricks.com/findingfixing-unintended-body-overflow/
var docWidth = document.documentElement.offsetWidth;
[].forEach.call(
document.querySelectorAll('*'),
function(el) {
if (el.offsetWidth > docWidth) {
console.log(el);
}
@elfacht
elfacht / arrow-fn.twig
Last active January 5, 2022 11:26
Twig Helper #craftcms
{% set over21 = craft.entries.all()|filter(e => e.firstName && entry.age > 21) %}
{% set ages = over21|reduce((curr, prev) => prev|merge(curr.age), []) %}
Over 21: {{ over21|map(e => e.firstName)|join(',') }}
Youngest: {{ ages|min }}
@elfacht
elfacht / multiline-padded.scss
Created January 5, 2022 11:13
Multiline padded text
/* @source https://css-tricks.com/multi-line-padded-text/ */
.padded-multiline {
line-height: 2;
width: 300px;
margin: 20px auto;
span {
background-color: #c0c;
color: #fff;
@elfacht
elfacht / responsive-svg-mask.twig
Created January 5, 2022 11:10
Responsive SVG mask with Twig
{# 1 / viewbox axxis #}
{% set svgScaleX = 1/385.932 %}
{% set svgScaleY = 1/400 %}
<svg width="0" height="0" style="position: absolute" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 385.932 400">
<defs>
<clipPath id="svg_mask-author" clipPathUnits="objectBoundingBox">
<polygon transform="scale({{svgScaleX}} {{svgScaleY}})" points="115.34 395.26 150.56 400 181.75 398.05 156.4 397.1"/>
<polygon transform="scale({{svgScaleX}} {{svgScaleY}})" points="369.79 351.46 369.89 373.08 368.74 398.01 371.04 370.81 371.04 339.25 369.79 306.47"/>
<polygon transform="scale({{svgScaleX}} {{svgScaleY}})" points="373.19 290.36 373.29 311.98 373.19 326.02 374.44 309.71 374.44 278.15 374 266.46"/>
@elfacht
elfacht / format-list.css
Created January 5, 2022 11:09
Format list inline with more than X items
/* @source https://css-tricks.com/solved-with-css-logical-styling-based-on-the-number-of-given-elements/ */
/* 5 or more items display next to each other */
li:first-child:nth-last-child(n + 5),
li:first-child:nth-last-child(n + 5) ~ li {
display: inline;
}
/* Adds semicolon after each item except the last item */
li:first-child:nth-last-child(n + 5) ~ li::before {
@elfacht
elfacht / animated-underlines.css
Created January 5, 2022 11:07
Animated multiline link underlines with CSS
/* @source https://www.dannyguo.com/blog/animated-multiline-link-underlines-with-css/ */
a {
text-decoration: none;
background-image: linear-gradient(currentColor, currentColor);
background-position: 0% 100%;
background-repeat: no-repeat;
background-size: 0% 2px;
transition: background-size .3s;
}
@elfacht
elfacht / empty-input.css
Created January 5, 2022 11:06
Check empty inputs with CSS
input {
width: 100%;
font: inherit;
padding: 0.25em 0.5em;
border: 0.125em solid hsl(30, 76%, 10%);
outline: none;
}
/* Show red borders when filled, but invalid */
input:not(:placeholder-shown) {
@elfacht
elfacht / cut-out-text.css
Created January 5, 2022 11:05
Cut out text with CSS
.text-dark {
background-color: black;
color: white;
mix-blend-mode: multiply;
}
.text-light {
background-color: white;
color: black;
mix-blend-mode: screen;
@elfacht
elfacht / focus-visible.css
Created January 5, 2022 11:02
:focus-visible
/* @source https://css-tricks.com/the-focus-visible-trick/ */
/* Focusing the button with a keyboard will show a dashed black line. */
button:focus-visible {
outline: 4px dashed black;
}
/* Focusing the button with a mouse, touch, or stylus will show a subtle drop shadow. */
button:focus:not(:focus-visible) {
outline: none;