spemer
/ customize-scrollbar-min.css
Last active
January 5, 2018 17:16
This file contains hidden or 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
| body::-webkit-scrollbar {background-color:#fff;width:16px} | |
| body::-webkit-scrollbar-track {background-color:#fff} | |
| body::-webkit-scrollbar-thumb {background-color:#babac0;border-radius:16px;border:4px solid #fff} |
spemer
/ customize-scrollbar.css
Last active
January 8, 2025 04:26
✨ Customize website's scrollbar like Mac OS. Not supports in Firefox and IE.
This file contains hidden or 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
| /* Customize website's scrollbar like Mac OS | |
| Not supports in Firefox and IE */ | |
| /* total width */ | |
| body::-webkit-scrollbar { | |
| background-color: #fff; | |
| width: 16px; | |
| } | |
| /* background of the scrollbar except button or resizer */ |
spemer
/ css-custom-var-5.css
Last active
January 3, 2018 06:18
This file contains hidden or 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
| .header-text { | |
| margin-top: calc(var(--font-size)*16px); | |
| font-size: calc(var(--font-size)*3rem); | |
| line-height: calc(var(--font-size)*1.5em); | |
| } |
spemer
/ css-custom-var-4.css
Last active
January 3, 2018 06:19
This file contains hidden or 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
| :root { | |
| --font-size: 1; | |
| } |
spemer
/ css-custom-var-3.css
Created
January 2, 2018 19:44
This file contains hidden or 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
| p { | |
| font-color: var(--paragraph-color); | |
| font-size: var(--paragraph-font-size); | |
| } | |
| li .primary-nav { | |
| font-color: var(--paragraph-color); | |
| } | |
| p { | |
| font-color: var(--paragraph-color); | |
| font-size: var(--figcaption-font-size); |
spemer
/ css-custom-var-2.css
Created
January 2, 2018 19:43
This file contains hidden or 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
| p { | |
| font-color: var(--paragraph-color); | |
| } |
spemer
/ css-custom-var-1.css
Created
January 2, 2018 19:41
This file contains hidden or 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
| :root { | |
| --paragraph-color: #656c7a; | |
| --paragraph-font-size: 1rem; | |
| --figcaption-font-size: 12px; | |
| } |
spemer
/ favicon-in-html-2.html
Created
January 2, 2018 18:12
This file contains hidden or 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
| <link rel="icon" href="../favicon-16.png" sizes="16x16" type="../favicon-16.png" /> | |
| <link rel="icon" href="../favicon-32.png" sizes="32x32" type="../favicon-32.png" /> | |
| <link rel="icon" href="../favicon-48.png" sizes="48x48" type="../favicon-48.png" /> | |
| <link rel="icon" href="../favicon-62.png" sizes="62x62" type="../favicon-62.png" /> | |
| <link rel="icon" href="../favicon-192.png" sizes="192x192" type="../favicon-192.png" /> |
spemer
/ favicon-array-3.js
Last active
January 3, 2018 14:27
This file contains hidden or 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
| function setAppleFavicons(){ | |
| let headTitle = document.querySelector('head'); | |
| let appleFavIcons = [ | |
| { sizes:'152x152', href: '../touch-icon-ipad.png' }, | |
| { sizes:'180x180', href: '../touch-icon-iphone-retina.png' }, | |
| { sizes:'167x167', href: '../touch-icon-ipad-retina.png' } | |
| ] | |
| appleFavIcons.forEach(function(appleFavIcon){ |
spemer
/ favicon-array-2.js
Last active
January 3, 2018 14:26
This file contains hidden or 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
| function setFavicons(favImg){ | |
| let headTitle = document.querySelector('head'); | |
| let favIcons = [ | |
| { rel: 'apple-touch-icon' }, | |
| { rel: 'apple-touch-startup-image' }, | |
| { rel: 'shortcut icon' } | |
| ] | |
| favIcons.forEach(function(favIcon){ |