Skip to content

Instantly share code, notes, and snippets.

View jina's full-sized avatar
💭
I may be slow to respond.

Jina Anne jina

💭
I may be slow to respond.
901 followers · 5 following
View GitHub Profile
@mirisuzanne
mirisuzanne / cq.css
Last active October 6, 2021 10:41
Thoughts on Container Queries
/*
This is not meant to be a final CSSWG proposal,
but reflects my immediate thoughts after reading
[David Baron's](https://github.com/dbaron/container-queries-implementability) promising draft.
This gist was created to demonstrate my idea for removing selectors from his query syntax.
More of my thoughts & notes are online at css.oddbird.net/rwd/
*/
main,
@mxmason
mxmason / webflow-disable-scroll-prefers-reduced-motion.js
Last active June 2, 2023 10:49
These snippets completely disable the smooth-scroll animation that is present on all Webflow sites. Animated scrolling can disorient or surprise users, or even cause motion sickness!
// Disable smooth scrolling for users who have set `prefers-reduced-motion` in their operating system
// 1. Place this snippet before the end of the <body> tag;
// NOT in the <head> tag!
// 2.Make sure it's inside $(function() {})!
$(function() {
const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
if (mediaQuery.matches) $(document).off('click.wf-scroll');
})
@daneden
daneden / Readme.md
Last active April 12, 2016 04:09
Aspirational Dropbox SCSS Guidelines (Draft)
@maban
maban / Event Notes.md
Last active March 9, 2020 19:28
Event Notes

Event Notes

  • Event Name:
  • Location:
  • Date:
  • Conference format: (number of days, tracks, and speakers)

Talk

@pascalduez
pascalduez / SassDoc.md
Last active August 29, 2015 14:13
SassDoc

SassDoc allows to document Sass items: functions, mixins, variables, placeholders.
No CSS selectors.
It uses a similar system as JSDoc, based on comments and annotations.

You can choose between two types of comments.

Inline comments (3 slashes):

///
///
@Arcovion
Arcovion / config.rb
Created May 8, 2014 12:33
Middleman extension to manage multiple directories
class Middleman::Extensions::DirManager < Middleman::Extension
register :dir_manager
option :dirs, {source: 'pages', destination: '', add: [], remove: ['', 'pages']}
def manipulate_resource_list resources
[options.dirs].flatten.each do |opts|
# Remove pages if specified
opts[:remove].each do |dir|
resources.reject! do |page|
Dir.glob(normalise(dir) + '/*', File::FNM_DOTMATCH).include? page.source_file
@razwan
razwan / _baseline.scss
Created April 14, 2014 16:20
Aligning type to baseline the right way with SASS
$base-font-size: 16px;
$base-line-height: 1.5;
// this value may vary for each font
// unitless value relative to 1em
$cap-height: 0.68;
@mixin baseline($font-size, $scale: 2) {
@voxpelli
voxpelli / SASS_Color_Contrast.md
Last active August 21, 2022 11:49
Pure SASS script for calculating contrast ratios of colors. MOVED TO: https://github.com/voxpelli/sass-color-helpers

Pure SASS-adaption of Lea Verou's contrast-ratio javascript. Can be useful when eg. generating colored buttons from a single supplied color as you can then check which out of a couple of text colors would give the best contrast.

This script currently lacks the support for alpha-transparency that Lea supports in her script though.

In addition to the color-contrast adaption there's also some math methods that were needed to be able to calculate the exponent of a number and especially so when the exponent is a decimal number. A 2.4 exponent is used to calculate the luminance of a color and calculating such a thing is not something that SASS supports out of the box and not something I found a good pure-SASS script for calculating and I much prefer pure-SASS over ruby extensions. The math methods might perhaps be unecessary though if you're running Compass or similar as they may provide compatible math methods themselves.

Normal usage: `color: pick_best_color(#f00

@mirisuzanne
mirisuzanne / pop-stripe.md
Created July 19, 2012 05:42
Rainbow stripe mixin with SCSS + Compass

Rainbow stripe mixin with SCSS + Compass

I'm trying to make a horizontal rainbow stripe background gradient mixin, but I feel like this is way too verbose. How can it be better?

Goals:

  1. [check] Use variables for colors so they can be swapped out for different colors.
  2. [check] The widths are hard coded for 8 colors. Can it be done smarter where it adjusts to the number of colors you add? Or is that asking too much?
  3. [check] The colors are defined twice for the color starts and stops. Can this be done better?
  4. [see below] Right now I define the colors as variables at the top level, then pass them in the mixin. Should they instead be created inside the mixin and then colors are brought in as arguments? Or does that matter?
@kolber
kolber / pandoras_vox.mdown
Created March 20, 2012 05:23
pandora’s vox: on community in cyberspace

pandora’s vox: on community in cyberspace

by humdog (1994)

when i went into cyberspace i went into it thinking that it was a place like any other place and that it would be a human interaction like any other human interaction. i was wrong when i thought that. it was a terrible mistake.

the very first understanding that i had that it was not a place like any place and that the interaction would be different was when people began to talk to me as though i were a man. when they wrote about me in the third person, they would say “he.” it interested me to have people think i was “he” instead of “she” and so at first i did not say anything. i grinned and let them think i was “he.” this went on for a little while and it was fun but after a while i was uncomfortable. finally i said unto them that i, humdog, was a woman and not a man. this surprised them. at that moment i realized that the dissolution of gender-category was something that was happening everywhere, and perhaps it was only just very obvious on the ne