This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// @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); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* @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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{# 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"/> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* @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 { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* @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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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) { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.text-dark { | |
background-color: black; | |
color: white; | |
mix-blend-mode: multiply; | |
} | |
.text-light { | |
background-color: white; | |
color: black; | |
mix-blend-mode: screen; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* @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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
xml.instruct! | |
xml.feed "xmlns" => "http://www.w3.org/2005/Atom" do | |
site_url = "http://blog.url.com/" | |
xml.title "Blog Name" | |
xml.subtitle "Blog subtitle" | |
xml.id URI.join(site_url, blog.options.prefix.to_s) | |
xml.link "href" => URI.join(site_url, blog.options.prefix.to_s) | |
xml.link "href" => URI.join(site_url, current_page.path), "rel" => "self" | |
xml.updated(blog.articles.first.date.to_time.iso8601) unless blog.articles.empty? | |
xml.author { xml.name "Blog Author" } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* @source https://css-tricks.com/memorize-scroll-position-across-page-loads/ */ | |
let sidebar = document.querySelector(".sidebar"); | |
let top = localStorage.getItem("sidebar-scroll"); | |
if (top !== null) { | |
sidebar.scrollTop = parseInt(top, 10); | |
} | |
window.addEventListener("beforeunload", () => { |
NewerOlder