Oleg Tishkin umkasanki
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
| .container { | |
| background-color: #c1c1c1; | |
| height: 500px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .btn { | |
| background-color: orange; |
umkasanki
/ better-font-smoothing.css
Created
February 5, 2019 06:31
— forked from hsleonis/better-font-smoothing.css
Better font smoothing in cross browser
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
| html { | |
| /* Adjust font size */ | |
| font-size: 100%; | |
| -webkit-text-size-adjust: 100%; | |
| /* Font varient */ | |
| font-variant-ligatures: none; | |
| -webkit-font-variant-ligatures: none; | |
| /* Smoothing */ | |
| text-rendering: optimizeLegibility; | |
| -moz-osx-font-smoothing: grayscale; |
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
| const sticky = function (panelsClass, elementsClass) { | |
| const panels = document.querySelectorAll('.' + panelsClass); | |
| const config = { | |
| rootMargin: '150px 20px 75px 30px', | |
| threshold: [0, 0.25, 0.75, 1] | |
| }; | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { |
umkasanki
/ gulpfile.js
Last active
February 5, 2019 15:58
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
| /* eslint-env node */ | |
| // package vars | |
| const pkg = require('./package.json'); | |
| const webpack = require('webpack-stream'); | |
| const gulp = require('gulp'); | |
| // load all plugins in "devDependencies" into the variable $ | |
| const $ = require('gulp-load-plugins')({ | |
| pattern: ['*'], | |
| scope: ['devDependencies'], |
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
| @mixin row($gap: $gap, $justify-content: flex-start, $align-items: flex-start, $wrap: wrap) { | |
| display: flex; | |
| width: auto; | |
| justify-content: $justify-content; | |
| align-items: $align-items; | |
| flex-wrap: $wrap; | |
| @if $gap != 0 { | |
| margin-left: $gap * -1; | |
| } |
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
| <section class="contact"> | |
| {% macro errorList(errors) %} | |
| {% if errors %} | |
| <ul class="errors"> | |
| {% for error in errors %} | |
| <li>{{ error }}</li> | |
| {% endfor %} | |
| </ul> | |
| {% endif %} | |
| {% endmacro %} |
umkasanki
/ form-submit.js
Created
March 22, 2019 07:50
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
| $('#js-contact-form').submit(function(ev) { | |
| // Prevent the form from actually submitting | |
| ev.preventDefault(); | |
| // Send it to the server | |
| $.post({ | |
| url: '/', | |
| dataType: 'json', | |
| data: $(this).serialize(), | |
| success: function(response) { |
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
| let resizeTimer = 0; | |
| $(window).on('resize', function() { | |
| clearTimeout(resizeTimer); | |
| resizeTimer = setTimeout(function() { | |
| console.log($(window).width()); | |
| // Run code here, resizing has "stopped" |
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
| {% import '_inc/macros.twig' as macro %} | |
| {% set imageQr = entry.image %} | |
| {% if imageQr|length %} | |
| {% set image = imageQr.one() %} | |
| <img class="lazy" | |
| sizes="(min-width: 62.5rem) 62.5rem, 100vw" | |
| data-src="{{ macro.crop(image, 10/4, 1000) }}" | |
| data-srcset="{{- |
umkasanki
/ picture.twig
Last active
April 13, 2019 10:02
lazy-loaded picture for craftcms templates
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
| {% import '_inc/macros.twig' as macro %} | |
| {% set imageQr = entry.image %} | |
| {% if imageQr|length %} | |
| {% set image = imageQr.one() %} | |
| <picture class="lazy hero__media" style="display: block; min-height: 1rem" data-iesrc="{{ macro.fit(image, 1200, 'auto', 90)|trim }}" data-alt="{{ image.title }}"> | |
| <source media="(min-width: 764px)" srcset="{{- | |
| macro.fit(image, 1000, 'auto', 100)|trim ~ ' 1000w, ' ~ | |
| macro.fit(image, 1600, 'auto', 100)|trim ~ ' 1600w, ' ~ | |
| macro.fit(image, 2400, 'auto', 100)|trim ~ ' 2400w' -}}" |