Skip to content

Instantly share code, notes, and snippets.

@Farmatique
Farmatique / gist:ff81187e05115214590dd8514bec2771
Last active August 1, 2017 11:04
UL List with two columns with circles css fix
ul {
list-style: outside disc;
}
ul li {
margin-left: 1em;
}
@Farmatique
Farmatique / gist:d513be9f3268c7e5de9a9cb192dca412
Last active April 12, 2017 18:23
Css padding hack for blocks with equal sizes
<div class="container">
<div class="container__wrapper">
<div class="container__content"></div>
</div>
</div>
.container {
width: 20%;
}
@Farmatique
Farmatique / gist:83d164762277f7dc8409fc110cea8eed
Created September 8, 2016 12:48
prevent goto link by clicking on <a>
jQuery('a').on('click', function(event){
event.preventDefault();
/* other stuff */
})
/* do not group these rules */
*::-webkit-input-placeholder {
color: red;
}
*:-moz-placeholder {
/* FF 4-18 */
color: red;
}
*::-moz-placeholder {
/* FF 19+ */
@Farmatique
Farmatique / gist:4c79d40b969ae773da096782e02d29fe
Created September 26, 2016 12:52
smooth scroll to section
jQuery(document).on('click', 'a[href*="#"]:not([href="#"])', function(e) {
if (location.pathname.replace(/^\//,'') === this.pathname.replace(/^\//,'') && location.hostname === this.hostname) {
var target = jQuery(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
if (navigator.userAgent.search("Safari") >= 0 && navigator.userAgent.search("Chrome") < 0)
{
alert("Browser is Safari");
}
@Farmatique
Farmatique / gist:4a0edf1ffef30082defca6403d317c9b
Last active May 22, 2020 09:54
Change look of arrow for SELECT
select:not([multiple]){
-webkit-appearance:none;
-moz-appearance:none;
background-position:right 50%;
background-repeat:no-repeat;
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOk
<div class="container">
<ul id="justified-menu">
<li class="inline-block">
<span>This old man</span>
</li>
<li class="inline-block">
<span>he played five</span>
</li>
<li class="inline-block">
@Farmatique
Farmatique / gist:9577367901facdb72bdad578b41112dd
Created October 4, 2016 10:35
Parallelogram-looking blocks
<ul class="skew">
<li><a href="#">Test</a>
</li>
<li><a href="#">Test 2</a>
</li>
</ul>
.skew {
overflow: hidden;
width: 100%;
display: flex;
align-items: center;
/* for Safari 8 */
display: -webkit-flex;
-webkit-align-items:center;