Merge branch 'master' into patch-3
This commit is contained in:
Angelos Chalaris
GitHub
@ -12,7 +12,7 @@ html {
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, Roboto, Segoe UI, 'Helvetica Neue', Helvetica,
|
||||
Arial, sans-serif;
|
||||
background: #f6f7fd;
|
||||
background: #f2f3f8;
|
||||
color: rgb(50, 75, 100);
|
||||
line-height: 1.5;
|
||||
}
|
||||
@ -62,6 +62,12 @@ ol {
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.content-wrapper {
|
||||
margin-left: 200px;
|
||||
margin-left: 20%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1400px) {
|
||||
.content-wrapper {
|
||||
margin-left: 275px;
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -1,5 +1,5 @@
|
||||
.sidebar {
|
||||
background: #202e4e;
|
||||
background: #273149;
|
||||
position: fixed;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
@ -23,7 +23,7 @@
|
||||
}
|
||||
|
||||
&__links {
|
||||
background: #202e4e;
|
||||
background: #273149;
|
||||
overflow-y: auto;
|
||||
transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||
transform-origin: 0% 0%;
|
||||
@ -47,10 +47,11 @@
|
||||
&__link {
|
||||
display: block;
|
||||
color: #e3f5ff;
|
||||
padding: 0.5rem 0.75rem;
|
||||
padding: 0.75rem;
|
||||
padding-right: 1.5rem;
|
||||
margin-right: -0.75rem;
|
||||
transition: all 0.1s ease-out;
|
||||
border-left: 2px solid #576a85;
|
||||
margin: 0.5rem;
|
||||
font-weight: 500;
|
||||
font-size: 0.95rem;
|
||||
|
||||
@ -70,6 +71,12 @@
|
||||
color: #e3f5ff;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
&__new {
|
||||
width: 1.25rem;
|
||||
vertical-align: middle;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
@ -77,26 +84,15 @@
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 15%;
|
||||
max-width: 250px;
|
||||
min-width: 200px;
|
||||
width: 20%;
|
||||
height: 100%;
|
||||
background: linear-gradient(-30deg, #2a3d67, #14264e);
|
||||
background: linear-gradient(-30deg, #273149, #1c273f);
|
||||
box-shadow: 0.4rem 0.4rem 0.8rem rgba(0, 32, 64, 0.1);
|
||||
overflow-y: auto;
|
||||
color: white;
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
background-color: #4b6191;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #4b6191;
|
||||
@media (min-width: 1400px) {
|
||||
width: 275px;
|
||||
}
|
||||
|
||||
&__links {
|
||||
@ -114,3 +110,20 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html:not(.macOS) {
|
||||
.sidebar {
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
background-color: #505b76;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #505b76;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -59,22 +59,23 @@
|
||||
border-bottom-color: darken(#c6d6ea, 5);
|
||||
background: white;
|
||||
box-shadow: 0 0.25rem 0.5rem -0.1rem rgba(0, 32, 64, 0.15);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
&[data-type='HTML'] {
|
||||
color: white;
|
||||
border: none;
|
||||
background: linear-gradient(135deg, #ff4c9f, #ff7b74);
|
||||
background-image: linear-gradient(135deg, #ff4c9f, #ff7b74);
|
||||
}
|
||||
&[data-type='CSS'] {
|
||||
color: white;
|
||||
border: none;
|
||||
background: linear-gradient(135deg, #7983ff, #5f9de9);
|
||||
background-image: linear-gradient(135deg, #7983ff, #5f9de9);
|
||||
}
|
||||
&[data-type='JavaScript'] {
|
||||
color: white;
|
||||
border: none;
|
||||
background: linear-gradient(135deg, #ffb000, #f58818);
|
||||
background-image: linear-gradient(135deg, #ffb000, #f58818);
|
||||
}
|
||||
}
|
||||
|
||||
@ -118,6 +119,14 @@
|
||||
|
||||
&__tag {
|
||||
}
|
||||
|
||||
&__new {
|
||||
position: absolute;
|
||||
top: -1rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.snippet-demo {
|
||||
|
||||
@ -5,6 +5,7 @@
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 1rem;
|
||||
padding: 0 1rem;
|
||||
|
||||
&__tag {
|
||||
display: inline-block;
|
||||
@ -20,7 +21,7 @@
|
||||
vertical-align: middle;
|
||||
line-height: 2;
|
||||
padding: 0 0.5rem;
|
||||
margin-right: 0.5rem;
|
||||
margin: 0 0.1rem;
|
||||
transition: all 0.1s ease-out;
|
||||
outline: 0;
|
||||
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
code[class*='language-'],
|
||||
pre[class*='language-'] {
|
||||
color: rgb(50, 75, 100);
|
||||
color: rgb(215, 236, 255);
|
||||
background: none;
|
||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
font-family: 'Operator Mono', 'Roboto Mono', Menlo, Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono',
|
||||
monospace;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
@ -59,7 +60,7 @@ pre.is-option {
|
||||
|
||||
:not(pre) > code[class*='language-'],
|
||||
pre[class*='language-'] {
|
||||
background: #f5f6f9;
|
||||
background: linear-gradient(-30deg, #273149, #1c273f);
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
@ -79,11 +80,11 @@ pre[class*='language-'] {
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name {
|
||||
color: #da7800;
|
||||
color: #c7f683;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #93a0c7;
|
||||
color: #5ac8e3;
|
||||
}
|
||||
|
||||
.namespace {
|
||||
@ -91,7 +92,7 @@ pre[class*='language-'] {
|
||||
}
|
||||
|
||||
.token.tag {
|
||||
color: #e22f70;
|
||||
color: #2cefd8;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
@ -100,7 +101,7 @@ pre[class*='language-'] {
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: #0087ca;
|
||||
color: #85b4ff;
|
||||
}
|
||||
|
||||
.token.string,
|
||||
@ -110,23 +111,23 @@ pre[class*='language-'] {
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: #008a7e;
|
||||
color: #ffd694;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.style .token.string {
|
||||
color: #f53737;
|
||||
color: #ff9bbe;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.atrule,
|
||||
.token.keyword {
|
||||
color: #7552ff;
|
||||
color: #b7adff;
|
||||
}
|
||||
|
||||
.token.function {
|
||||
color: #396dff;
|
||||
color: #25d0e5;
|
||||
}
|
||||
|
||||
.token.regex,
|
||||
|
||||
@ -1,12 +1,17 @@
|
||||
<header class="header">
|
||||
<div class="container">
|
||||
<img class="header__logo" draggable="false" src="./src/img/logo.png">
|
||||
<h1 class="header__heading">30 Seconds of <strong class="header__css">CSS</strong></h1>
|
||||
<p class="header__description">
|
||||
A curated collection of useful CSS snippets you can understand in 30 seconds or less.
|
||||
</p>
|
||||
<div class="header__github-button-wrapper">
|
||||
<a class="github-button header__github-button" href="https://github.com/atomiks/30-seconds-of-css" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star atomiks/30-seconds-of-css on GitHub">Star</a>
|
||||
<img class="header__leaves" draggable="false" id="header__leaves1" src="./src/img/leaves.svg" alt>
|
||||
<img class="header__leaves" draggable="false" id="header__leaves2" src="./src/img/leaves.svg" alt>
|
||||
<img id="header__blob" draggable="false" src="./src/img/blob.png" alt>
|
||||
<div class="header__content">
|
||||
<img class="header__logo" draggable="false" src="./src/img/logo.png">
|
||||
<h1 class="header__heading">30 Seconds of <strong class="header__css">CSS</strong></h1>
|
||||
<p class="header__description">
|
||||
A curated collection of useful CSS snippets you can understand in 30 seconds or less.
|
||||
</p>
|
||||
<div class="header__github-button-wrapper">
|
||||
<a class="github-button header__github-button" href="https://github.com/30-seconds/30-seconds-of-css" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star 30-seconds/30-seconds-of-css on GitHub">Star</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@ -1,11 +1,30 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<title>30 Seconds of CSS</title>
|
||||
<meta name="description" content="A curated collection of useful CSS snippets you can understand in 30 seconds or less. From foundational elements such as clearfix to gradient text color and gradient cursor tracking to CSS easing and far beyond.">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png" />
|
||||
<meta
|
||||
name="description"
|
||||
content="A curated collection of useful CSS snippets you can understand in 30 seconds or less. From foundational elements such as clearfix to gradient text color and gradient cursor tracking to CSS easing and far beyond."
|
||||
/>
|
||||
<meta property="twitter:card" content="summary_large_image" />
|
||||
<meta property="twitter:url" content="https://30-seconds.github.io/30-seconds-of-css/" />
|
||||
<meta property="twitter:title" content="30 Seconds of CSS - Useful CSS snippets" />
|
||||
<meta
|
||||
property="twitter:description"
|
||||
content="A curated collection of useful CSS snippets you can understand in 30 seconds or less. "
|
||||
/>
|
||||
<meta property="twitter:image" content="./src/img/opengraph.png" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://30-seconds.github.io/30-seconds-of-css/" />
|
||||
<meta property="og:title" content="30 Seconds of CSS - Useful CSS snippets" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="A curated collection of useful CSS snippets you can understand in 30 seconds or less."
|
||||
/>
|
||||
<meta property="og:image" content="./src/img/opengraph.png" />
|
||||
<script src="./src/js/index.js" defer=""></script>
|
||||
<script async="" defer="" src="https://buttons.github.io/buttons.js"></script>
|
||||
</head>
|
||||
|
||||
BIN
src/img/blob.png
Normal file
BIN
src/img/blob.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 255 KiB |
1
src/img/leaves.svg
Normal file
1
src/img/leaves.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 14 KiB |
1
src/img/new.svg
Normal file
1
src/img/new.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 9.3 KiB |
BIN
src/img/opengraph.png
Normal file
BIN
src/img/opengraph.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 400 KiB |
@ -1,4 +1,4 @@
|
||||
import jump from '../deps/jump'
|
||||
import jump from 'jump.js'
|
||||
import { select, scrollY, easeOutQuint } from '../deps/utils'
|
||||
|
||||
const backToTopButton = select('.back-to-top-button')
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import jump from '../deps/jump'
|
||||
import jump from 'jump.js'
|
||||
import { select, selectAll, easeOutQuint } from '../deps/utils'
|
||||
|
||||
const menu = select('.hamburger')
|
||||
|
||||
@ -1,196 +0,0 @@
|
||||
;(function(global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined'
|
||||
? (module.exports = factory())
|
||||
: typeof define === 'function' && define.amd ? define(factory) : (global.Jump = factory())
|
||||
})(this, function() {
|
||||
'use strict'
|
||||
|
||||
// Robert Penner's easeInOutQuad
|
||||
|
||||
// find the rest of his easing functions here: http://robertpenner.com/easing/
|
||||
// find them exported for ES6 consumption here: https://github.com/jaxgeller/ez.js
|
||||
|
||||
var easeInOutQuad = function easeInOutQuad(t, b, c, d) {
|
||||
t /= d / 2
|
||||
if (t < 1) return c / 2 * t * t + b
|
||||
t--
|
||||
return -c / 2 * (t * (t - 2) - 1) + b
|
||||
}
|
||||
|
||||
var _typeof =
|
||||
typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol'
|
||||
? function(obj) {
|
||||
return typeof obj
|
||||
}
|
||||
: function(obj) {
|
||||
return obj &&
|
||||
typeof Symbol === 'function' &&
|
||||
obj.constructor === Symbol &&
|
||||
obj !== Symbol.prototype
|
||||
? 'symbol'
|
||||
: typeof obj
|
||||
}
|
||||
|
||||
var jumper = function jumper() {
|
||||
// private variable cache
|
||||
// no variables are created during a jump, preventing memory leaks
|
||||
|
||||
var element = void 0 // element to scroll to (node)
|
||||
|
||||
var start = void 0 // where scroll starts (px)
|
||||
var stop = void 0 // where scroll stops (px)
|
||||
|
||||
var offset = void 0 // adjustment from the stop position (px)
|
||||
var easing = void 0 // easing function (function)
|
||||
var a11y = void 0 // accessibility support flag (boolean)
|
||||
|
||||
var distance = void 0 // distance of scroll (px)
|
||||
var duration = void 0 // scroll duration (ms)
|
||||
|
||||
var timeStart = void 0 // time scroll started (ms)
|
||||
var timeElapsed = void 0 // time spent scrolling thus far (ms)
|
||||
|
||||
var next = void 0 // next scroll position (px)
|
||||
|
||||
var callback = void 0 // to call when done scrolling (function)
|
||||
|
||||
// scroll position helper
|
||||
|
||||
function location() {
|
||||
return window.scrollY || window.pageYOffset
|
||||
}
|
||||
|
||||
// element offset helper
|
||||
|
||||
function top(element) {
|
||||
return element.getBoundingClientRect().top + start
|
||||
}
|
||||
|
||||
// rAF loop helper
|
||||
|
||||
function loop(timeCurrent) {
|
||||
// store time scroll started, if not started already
|
||||
if (!timeStart) {
|
||||
timeStart = timeCurrent
|
||||
}
|
||||
|
||||
// determine time spent scrolling so far
|
||||
timeElapsed = timeCurrent - timeStart
|
||||
|
||||
// calculate next scroll position
|
||||
next = easing(timeElapsed, start, distance, duration)
|
||||
|
||||
// scroll to it
|
||||
window.scrollTo(0, next)
|
||||
|
||||
// check progress
|
||||
timeElapsed < duration
|
||||
? window.requestAnimationFrame(loop) // continue scroll loop
|
||||
: done() // scrolling is done
|
||||
}
|
||||
|
||||
// scroll finished helper
|
||||
|
||||
function done() {
|
||||
// account for rAF time rounding inaccuracies
|
||||
window.scrollTo(0, start + distance)
|
||||
|
||||
// if scrolling to an element, and accessibility is enabled
|
||||
if (element && a11y) {
|
||||
// add tabindex indicating programmatic focus
|
||||
element.setAttribute('tabindex', '-1')
|
||||
|
||||
// focus the element
|
||||
element.focus()
|
||||
}
|
||||
|
||||
// if it exists, fire the callback
|
||||
if (typeof callback === 'function') {
|
||||
callback()
|
||||
}
|
||||
|
||||
// reset time for next jump
|
||||
timeStart = false
|
||||
}
|
||||
|
||||
// API
|
||||
|
||||
function jump(target) {
|
||||
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}
|
||||
|
||||
// resolve options, or use defaults
|
||||
duration = options.duration || 1000
|
||||
offset = options.offset || 0
|
||||
callback = options.callback // "undefined" is a suitable default, and won't be called
|
||||
easing = options.easing || easeInOutQuad
|
||||
a11y = options.a11y || false
|
||||
|
||||
// cache starting position
|
||||
start = location()
|
||||
|
||||
// resolve target
|
||||
switch (typeof target === 'undefined' ? 'undefined' : _typeof(target)) {
|
||||
// scroll from current position
|
||||
case 'number':
|
||||
element = undefined // no element to scroll to
|
||||
a11y = false // make sure accessibility is off
|
||||
stop = start + target
|
||||
break
|
||||
|
||||
// scroll to element (node)
|
||||
// bounding rect is relative to the viewport
|
||||
case 'object':
|
||||
element = target
|
||||
stop = top(element)
|
||||
break
|
||||
|
||||
// scroll to element (selector)
|
||||
// bounding rect is relative to the viewport
|
||||
case 'string':
|
||||
element = document.querySelector(target)
|
||||
stop = top(element)
|
||||
break
|
||||
}
|
||||
|
||||
// resolve scroll distance, accounting for offset
|
||||
distance = stop - start + offset
|
||||
|
||||
// resolve duration
|
||||
switch (_typeof(options.duration)) {
|
||||
// number in ms
|
||||
case 'number':
|
||||
duration = options.duration
|
||||
break
|
||||
|
||||
// function passed the distance of the scroll
|
||||
case 'function':
|
||||
duration = options.duration(distance)
|
||||
break
|
||||
}
|
||||
|
||||
// start the loop
|
||||
window.requestAnimationFrame(loop)
|
||||
}
|
||||
|
||||
// expose only the jump method
|
||||
return jump
|
||||
}
|
||||
|
||||
// export singleton
|
||||
|
||||
var singleton = jumper()
|
||||
|
||||
return (() => {
|
||||
let scrolling
|
||||
const end = () => (scrolling = false)
|
||||
return (to, options = {}) => {
|
||||
if (scrolling) return
|
||||
const scrollY = window.scrollY || window.pageYOffset
|
||||
if (to !== '.header') location.hash = to
|
||||
scroll(0, scrollY)
|
||||
scrolling = true
|
||||
setTimeout(end, options.duration || 0)
|
||||
return singleton(to, options)
|
||||
}
|
||||
})()
|
||||
})
|
||||
@ -30,18 +30,22 @@ export const createEventHub = () => ({
|
||||
window.EventHub = createEventHub()
|
||||
|
||||
/*
|
||||
* Make iOS behave normally.
|
||||
*/
|
||||
* Make iOS behave normally.
|
||||
*/
|
||||
if (/iPhone|iPad|iPod/.test(navigator.platform) && !window.MSStream) {
|
||||
document.body.style.cursor = 'pointer'
|
||||
}
|
||||
|
||||
if (/Mac/.test(navigator.platform)) {
|
||||
document.documentElement.classList.add('macOS')
|
||||
}
|
||||
|
||||
/*
|
||||
* A small utility to fix the letter kerning on macOS Chrome and Firefox when using the system font
|
||||
* (San Francisco). It is now fixed in the text rendering engine in FF 58 and Chrome 64.
|
||||
* UPDATE: It appears the applied fix doesn't work when the font is in italics. New fix has been added.
|
||||
* Must be applied to all browsers for now.
|
||||
*/
|
||||
* A small utility to fix the letter kerning on macOS Chrome and Firefox when using the system font
|
||||
* (San Francisco). It is now fixed in the text rendering engine in FF 58 and Chrome 64.
|
||||
* UPDATE: It appears the applied fix doesn't work when the font is in italics. New fix has been added.
|
||||
* Must be applied to all browsers for now.
|
||||
*/
|
||||
;(() => {
|
||||
const ua = navigator.userAgent
|
||||
|
||||
|
||||
Reference in New Issue
Block a user