10 |
29 |
30 | )
31 | }
32 |
33 | VariantSelector.propTypes = {
34 | onChange: PropTypes.func,
35 | option: PropTypes.shape({
36 | id: PropTypes.string,
37 | name: PropTypes.string,
38 | values: PropTypes.arrayOf(PropTypes.string),
39 | }),
40 | }
41 |
42 | export default VariantSelector
43 |
--------------------------------------------------------------------------------
/src/scss/fonts/flaticon/font/flaticon.css:
--------------------------------------------------------------------------------
1 | /*
2 | Flaticon icon font: Flaticon
3 | Creation date: 17/07/2019 12:38
4 | */
5 |
6 | @font-face {
7 | font-family: "Flaticon";
8 | src: url("./Flaticon.eot");
9 | src: url("./Flaticon.eot?#iefix") format("embedded-opentype"),
10 | url("./Flaticon.woff2") format("woff2"),
11 | url("./Flaticon.woff") format("woff"),
12 | url("./Flaticon.ttf") format("truetype"),
13 | url("./Flaticon.svg#Flaticon") format("svg");
14 | font-weight: normal;
15 | font-style: normal;
16 | }
17 |
18 | @media screen and (-webkit-min-device-pixel-ratio:0) {
19 | @font-face {
20 | font-family: "Flaticon";
21 | src: url("./Flaticon.svg#Flaticon") format("svg");
22 | }
23 | }
24 |
25 | [class^="flaticon-"]:before, [class*=" flaticon-"]:before,
26 | [class^="flaticon-"]:after, [class*=" flaticon-"]:after {
27 | font-family: Flaticon;
28 | font-size: 20px;
29 | font-style: normal;
30 | margin-left: 20px;
31 | }
32 |
33 | .flaticon-shipped:before { content: "\f100"; }
34 | .flaticon-box:before { content: "\f101"; }
35 | .flaticon-award:before { content: "\f102"; }
36 | .flaticon-customer-service:before { content: "\f103"; }
37 | .flaticon-salad:before { content: "\f104"; }
38 | .flaticon-diet:before { content: "\f105"; }
--------------------------------------------------------------------------------
/src/scss/bootstrap/_badge.scss:
--------------------------------------------------------------------------------
1 | // Base class
2 | //
3 | // Requires one of the contextual, color modifier classes for `color` and
4 | // `background-color`.
5 |
6 | .badge {
7 | display: inline-block;
8 | padding: $badge-padding-y $badge-padding-x;
9 | font-size: $badge-font-size;
10 | font-weight: $badge-font-weight;
11 | line-height: 1;
12 | text-align: center;
13 | white-space: nowrap;
14 | vertical-align: baseline;
15 | @include border-radius($badge-border-radius);
16 |
17 | @at-root a#{&} {
18 | @include hover-focus {
19 | text-decoration: none;
20 | }
21 | }
22 |
23 | // Empty badges collapse automatically
24 | &:empty {
25 | display: none;
26 | }
27 | }
28 |
29 | // Quick fix for badges in buttons
30 | .btn .badge {
31 | position: relative;
32 | top: -1px;
33 | }
34 |
35 | // Pill badges
36 | //
37 | // Make them extra rounded with a modifier to replace v3's badges.
38 |
39 | .badge-pill {
40 | padding-right: $badge-pill-padding-x;
41 | padding-left: $badge-pill-padding-x;
42 | @include border-radius($badge-pill-border-radius);
43 | }
44 |
45 | // Colors
46 | //
47 | // Contextual variations (linked badges get darker on :hover).
48 |
49 | @each $color, $value in $theme-colors {
50 | .badge-#{$color} {
51 | @include badge-variant($value);
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
/src/scss/bootstrap/_images.scss:
--------------------------------------------------------------------------------
1 | // Responsive images (ensure images don't scale beyond their parents)
2 | //
3 | // This is purposefully opt-in via an explicit class rather than being the default for all `
11 |
28 |
12 |
27 |
18 |
28 |
19 |
27 |
20 |
23 | Subcribe to our Newsletter
21 | Get e-mail updates about our latest shops and special offers 22 |
24 |
25 |
26 |
29 |
36 |
37 | )
38 | }}
39 | />
40 | )
41 | }
42 | }
43 |
44 | export default BlogCategories
--------------------------------------------------------------------------------
/src/components/common/blog/tagcloud.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import {Link, StaticQuery, graphql} from 'gatsby'
3 | //import Img from 'gatsby-image'
4 | const slugify = require('@sindresorhus/slugify')
5 |
6 | class TagCloud extends React.Component {
7 |
8 | render() {
9 |
10 |
11 | return (
12 | Categories
30 |-
31 | {categories.map((categ, idx) => {
32 | return (
- {categ.fieldValue} {`( ${categ.totalCount} )`} ) 33 | })} 34 |
30 |
37 |
38 | )
39 | }}
40 | />
41 | )
42 | }
43 | }
44 |
45 | export default TagCloud
--------------------------------------------------------------------------------
/src/scss/bootstrap/mixins/_caret.scss:
--------------------------------------------------------------------------------
1 | @mixin caret-down {
2 | border-top: $caret-width solid;
3 | border-right: $caret-width solid transparent;
4 | border-bottom: 0;
5 | border-left: $caret-width solid transparent;
6 | }
7 |
8 | @mixin caret-up {
9 | border-top: 0;
10 | border-right: $caret-width solid transparent;
11 | border-bottom: $caret-width solid;
12 | border-left: $caret-width solid transparent;
13 | }
14 |
15 | @mixin caret-right {
16 | border-top: $caret-width solid transparent;
17 | border-right: 0;
18 | border-bottom: $caret-width solid transparent;
19 | border-left: $caret-width solid;
20 | }
21 |
22 | @mixin caret-left {
23 | border-top: $caret-width solid transparent;
24 | border-right: $caret-width solid;
25 | border-bottom: $caret-width solid transparent;
26 | }
27 |
28 | @mixin caret($direction: down) {
29 | @if $enable-caret {
30 | &::after {
31 | display: inline-block;
32 | margin-left: $caret-width * .85;
33 | vertical-align: $caret-width * .85;
34 | content: "";
35 | @if $direction == down {
36 | @include caret-down;
37 | } @else if $direction == up {
38 | @include caret-up;
39 | } @else if $direction == right {
40 | @include caret-right;
41 | }
42 | }
43 |
44 | @if $direction == left {
45 | &::after {
46 | display: none;
47 | }
48 |
49 | &::before {
50 | display: inline-block;
51 | margin-right: $caret-width * .85;
52 | vertical-align: $caret-width * .85;
53 | content: "";
54 | @include caret-left;
55 | }
56 | }
57 |
58 | &:empty::after {
59 | margin-left: 0;
60 | }
61 | }
62 | }
63 |
--------------------------------------------------------------------------------
/src/components/topbar/index.js:
--------------------------------------------------------------------------------
1 | //import {Link} from 'gatsby'
2 | import React from 'react'
3 |
4 | const TopBar = () => (
5 | Tag Cloud
31 |
32 | {tagcloud.map((tag, idx) => {
33 | return ({tag.fieldValue})
34 | })}
35 |
36 |
6 |
32 | )
33 |
34 | export default TopBar
--------------------------------------------------------------------------------
/src/scss/fonts/flaticon/font/_flaticon.scss:
--------------------------------------------------------------------------------
1 | /*
2 | Flaticon icon font: Flaticon
3 | Creation date: 17/07/2019 12:38
4 | */
5 |
6 | @font-face {
7 | font-family: "Flaticon";
8 | src: url("./Flaticon.eot");
9 | src: url("./Flaticon.eot?#iefix") format("embedded-opentype"),
10 | url("./Flaticon.woff2") format("woff2"),
11 | url("./Flaticon.woff") format("woff"),
12 | url("./Flaticon.ttf") format("truetype"),
13 | url("./Flaticon.svg#Flaticon") format("svg");
14 | font-weight: normal;
15 | font-style: normal;
16 | }
17 |
18 | @media screen and (-webkit-min-device-pixel-ratio:0) {
19 | @font-face {
20 | font-family: "Flaticon";
21 | src: url("./Flaticon.svg#Flaticon") format("svg");
22 | }
23 | }
24 |
25 | .fi:before{
26 | display: inline-block;
27 | font-family: "Flaticon";
28 | font-style: normal;
29 | font-weight: normal;
30 | font-variant: normal;
31 | line-height: 1;
32 | text-decoration: inherit;
33 | text-rendering: optimizeLegibility;
34 | text-transform: none;
35 | -moz-osx-font-smoothing: grayscale;
36 | -webkit-font-smoothing: antialiased;
37 | font-smoothing: antialiased;
38 | }
39 |
40 | .flaticon-shipped:before { content: "\f100"; }
41 | .flaticon-box:before { content: "\f101"; }
42 | .flaticon-award:before { content: "\f102"; }
43 | .flaticon-customer-service:before { content: "\f103"; }
44 | .flaticon-salad:before { content: "\f104"; }
45 | .flaticon-diet:before { content: "\f105"; }
46 |
47 | $font-Flaticon-shipped: "\f100";
48 | $font-Flaticon-box: "\f101";
49 | $font-Flaticon-award: "\f102";
50 | $font-Flaticon-customer-service: "\f103";
51 | $font-Flaticon-salad: "\f104";
52 | $font-Flaticon-diet: "\f105";
--------------------------------------------------------------------------------
/src/scss/bootstrap/mixins/_grid.scss:
--------------------------------------------------------------------------------
1 | /// Grid system
2 | //
3 | // Generate semantic grid columns with these mixins.
4 |
5 | @mixin make-container($gutter: $grid-gutter-width) {
6 | width: 100%;
7 | padding-right: $gutter / 2;
8 | padding-left: $gutter / 2;
9 | margin-right: auto;
10 | margin-left: auto;
11 | }
12 |
13 |
14 | // For each breakpoint, define the maximum width of the container in a media query
15 | @mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
16 | @each $breakpoint, $container-max-width in $max-widths {
17 | @include media-breakpoint-up($breakpoint, $breakpoints) {
18 | max-width: $container-max-width;
19 | }
20 | }
21 | }
22 |
23 | @mixin make-row($gutter: $grid-gutter-width) {
24 | display: flex;
25 | flex-wrap: wrap;
26 | margin-right: -$gutter / 2;
27 | margin-left: -$gutter / 2;
28 | }
29 |
30 | @mixin make-col-ready($gutter: $grid-gutter-width) {
31 | position: relative;
32 | // Prevent columns from becoming too narrow when at smaller grid tiers by
33 | // always setting `width: 100%;`. This works because we use `flex` values
34 | // later on to override this initial width.
35 | width: 100%;
36 | padding-right: $gutter / 2;
37 | padding-left: $gutter / 2;
38 | }
39 |
40 | @mixin make-col($size, $columns: $grid-columns) {
41 | flex: 0 0 percentage($size / $columns);
42 | // Add a `max-width` to ensure content within each column does not blow out
43 | // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
44 | // do not appear to require this.
45 | max-width: percentage($size / $columns);
46 | }
47 |
48 | @mixin make-col-offset($size, $columns: $grid-columns) {
49 | $num: $size / $columns;
50 | margin-left: if($num == 0, 0, percentage($num));
51 | }
52 |
--------------------------------------------------------------------------------
/src/scss/bootstrap/utilities/_borders.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable declaration-no-important
2 |
3 | //
4 | // Border
5 | //
6 |
7 | .border { border: $border-width solid $border-color !important; }
8 | .border-top { border-top: $border-width solid $border-color !important; }
9 | .border-right { border-right: $border-width solid $border-color !important; }
10 | .border-bottom { border-bottom: $border-width solid $border-color !important; }
11 | .border-left { border-left: $border-width solid $border-color !important; }
12 |
13 | .border-0 { border: 0 !important; }
14 | .border-top-0 { border-top: 0 !important; }
15 | .border-right-0 { border-right: 0 !important; }
16 | .border-bottom-0 { border-bottom: 0 !important; }
17 | .border-left-0 { border-left: 0 !important; }
18 |
19 | @each $color, $value in $theme-colors {
20 | .border-#{$color} {
21 | border-color: $value !important;
22 | }
23 | }
24 |
25 | .border-white {
26 | border-color: $white !important;
27 | }
28 |
29 | //
30 | // Border-radius
31 | //
32 |
33 | .rounded {
34 | border-radius: $border-radius !important;
35 | }
36 | .rounded-top {
37 | border-top-left-radius: $border-radius !important;
38 | border-top-right-radius: $border-radius !important;
39 | }
40 | .rounded-right {
41 | border-top-right-radius: $border-radius !important;
42 | border-bottom-right-radius: $border-radius !important;
43 | }
44 | .rounded-bottom {
45 | border-bottom-right-radius: $border-radius !important;
46 | border-bottom-left-radius: $border-radius !important;
47 | }
48 | .rounded-left {
49 | border-top-left-radius: $border-radius !important;
50 | border-bottom-left-radius: $border-radius !important;
51 | }
52 |
53 | .rounded-circle {
54 | border-radius: 50% !important;
55 | }
56 |
57 | .rounded-pill {
58 | border-radius: $rounded-pill !important;
59 | }
60 |
61 | .rounded-0 {
62 | border-radius: 0 !important;
63 | }
64 |
--------------------------------------------------------------------------------
/src/scss/css/jquery.timepicker.css:
--------------------------------------------------------------------------------
1 | .ui-timepicker-wrapper {
2 | overflow-y: auto;
3 | max-height: 150px;
4 | width: 6.5em;
5 | background: #fff;
6 | border: 1px solid #ddd;
7 | -webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2);
8 | -moz-box-shadow:0 5px 10px rgba(0,0,0,0.2);
9 | box-shadow:0 5px 10px rgba(0,0,0,0.2);
10 | outline: none;
11 | z-index: 10001;
12 | margin: 0;
13 | }
14 |
15 | .ui-timepicker-wrapper.ui-timepicker-with-duration {
16 | width: 13em;
17 | }
18 |
19 | .ui-timepicker-wrapper.ui-timepicker-with-duration.ui-timepicker-step-30,
20 | .ui-timepicker-wrapper.ui-timepicker-with-duration.ui-timepicker-step-60 {
21 | width: 11em;
22 | }
23 |
24 | .ui-timepicker-list {
25 | margin: 0;
26 | padding: 0;
27 | list-style: none;
28 | }
29 |
30 | .ui-timepicker-duration {
31 | margin-left: 5px; color: #888;
32 | }
33 |
34 | .ui-timepicker-list:hover .ui-timepicker-duration {
35 | color: #888;
36 | }
37 |
38 | .ui-timepicker-list li {
39 | padding: 3px 0 3px 5px;
40 | cursor: pointer;
41 | white-space: nowrap;
42 | color: #000;
43 | list-style: none;
44 | margin: 0;
45 | }
46 |
47 | .ui-timepicker-list:hover .ui-timepicker-selected {
48 | background: #fff; color: #000;
49 | }
50 |
51 | li.ui-timepicker-selected,
52 | .ui-timepicker-list li:hover,
53 | .ui-timepicker-list .ui-timepicker-selected:hover {
54 | background: #1980EC; color: #fff;
55 | }
56 |
57 | li.ui-timepicker-selected .ui-timepicker-duration,
58 | .ui-timepicker-list li:hover .ui-timepicker-duration {
59 | color: #ccc;
60 | }
61 |
62 | .ui-timepicker-list li.ui-timepicker-disabled,
63 | .ui-timepicker-list li.ui-timepicker-disabled:hover,
64 | .ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
65 | color: #888;
66 | cursor: default;
67 | }
68 |
69 | .ui-timepicker-list li.ui-timepicker-disabled:hover,
70 | .ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
71 | background: #f2f2f2;
72 | }
73 |
--------------------------------------------------------------------------------
/src/scss/bootstrap/mixins/_grid-framework.scss:
--------------------------------------------------------------------------------
1 | // Framework grid generation
2 | //
3 | // Used only by Bootstrap to generate the correct number of grid classes given
4 | // any value of `$grid-columns`.
5 |
6 | @mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
7 | // Common properties for all breakpoints
8 | %grid-column {
9 | position: relative;
10 | width: 100%;
11 | padding-right: $gutter / 2;
12 | padding-left: $gutter / 2;
13 | }
14 |
15 | @each $breakpoint in map-keys($breakpoints) {
16 | $infix: breakpoint-infix($breakpoint, $breakpoints);
17 |
18 | // Allow columns to stretch full width below their breakpoints
19 | @for $i from 1 through $columns {
20 | .col#{$infix}-#{$i} {
21 | @extend %grid-column;
22 | }
23 | }
24 | .col#{$infix},
25 | .col#{$infix}-auto {
26 | @extend %grid-column;
27 | }
28 |
29 | @include media-breakpoint-up($breakpoint, $breakpoints) {
30 | // Provide basic `.col-{bp}` classes for equal-width flexbox columns
31 | .col#{$infix} {
32 | flex-basis: 0;
33 | flex-grow: 1;
34 | max-width: 100%;
35 | }
36 | .col#{$infix}-auto {
37 | flex: 0 0 auto;
38 | width: auto;
39 | max-width: 100%; // Reset earlier grid tiers
40 | }
41 |
42 | @for $i from 1 through $columns {
43 | .col#{$infix}-#{$i} {
44 | @include make-col($i, $columns);
45 | }
46 | }
47 |
48 | .order#{$infix}-first { order: -1; }
49 |
50 | .order#{$infix}-last { order: $columns + 1; }
51 |
52 | @for $i from 0 through $columns {
53 | .order#{$infix}-#{$i} { order: $i; }
54 | }
55 |
56 | // `$columns - 1` because offsetting by the width of an entire row isn't possible
57 | @for $i from 0 through ($columns - 1) {
58 | @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
59 | .offset#{$infix}-#{$i} {
60 | @include make-col-offset($i, $columns);
61 | }
62 | }
63 | }
64 | }
65 | }
66 | }
67 |
--------------------------------------------------------------------------------
/src/scss/bootstrap/utilities/_text.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable declaration-no-important
2 |
3 | //
4 | // Text
5 | //
6 |
7 | .text-monospace { font-family: $font-family-monospace; }
8 |
9 | // Alignment
10 |
11 | .text-justify { text-align: justify !important; }
12 | .text-wrap { white-space: normal !important; }
13 | .text-nowrap { white-space: nowrap !important; }
14 | .text-truncate { @include text-truncate; }
15 |
16 | // Responsive alignment
17 |
18 | @each $breakpoint in map-keys($grid-breakpoints) {
19 | @include media-breakpoint-up($breakpoint) {
20 | $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
21 |
22 | .text#{$infix}-left { text-align: left !important; }
23 | .text#{$infix}-right { text-align: right !important; }
24 | .text#{$infix}-center { text-align: center !important; }
25 | }
26 | }
27 |
28 | // Transformation
29 |
30 | .text-lowercase { text-transform: lowercase !important; }
31 | .text-uppercase { text-transform: uppercase !important; }
32 | .text-capitalize { text-transform: capitalize !important; }
33 |
34 | // Weight and italics
35 |
36 | .font-weight-light { font-weight: $font-weight-light !important; }
37 | .font-weight-lighter { font-weight: $font-weight-lighter !important; }
38 | .font-weight-normal { font-weight: $font-weight-normal !important; }
39 | .font-weight-bold { font-weight: $font-weight-bold !important; }
40 | .font-weight-bolder { font-weight: $font-weight-bolder !important; }
41 | .font-italic { font-style: italic !important; }
42 |
43 | // Contextual colors
44 |
45 | .text-white { color: $white !important; }
46 |
47 | @each $color, $value in $theme-colors {
48 | @include text-emphasis-variant(".text-#{$color}", $value);
49 | }
50 |
51 | .text-body { color: $body-color !important; }
52 | .text-muted { color: $text-muted !important; }
53 |
54 | .text-black-50 { color: rgba($black, .5) !important; }
55 | .text-white-50 { color: rgba($white, .5) !important; }
56 |
57 | // Misc
58 |
59 | .text-hide {
60 | @include text-hide($ignore-warning: true);
61 | }
62 |
63 | .text-decoration-none { text-decoration: none !important; }
64 |
65 | // Reset
66 |
67 | .text-reset { color: inherit !important; }
68 |
--------------------------------------------------------------------------------
/static/js/google-map.js:
--------------------------------------------------------------------------------
1 |
2 | var google;
3 |
4 | function init() {
5 | // Basic options for a simple Google Map
6 | // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
7 | // var myLatlng = new google.maps.LatLng(40.71751, -73.990922);
8 | var myLatlng = new google.maps.LatLng(40.69847032728747, -73.9514422416687);
9 | // 39.399872
10 | // -8.224454
11 |
12 | var mapOptions = {
13 | // How zoomed in you want the map to start at (always required)
14 | zoom: 7,
15 |
16 | // The latitude and longitude to center the map (always required)
17 | center: myLatlng,
18 |
19 | // How you would like to style the map.
20 | scrollwheel: false,
21 | styles: [
22 | {
23 | "featureType": "administrative.country",
24 | "elementType": "geometry",
25 | "stylers": [
26 | {
27 | "visibility": "simplified"
28 | },
29 | {
30 | "hue": "#ff0000"
31 | }
32 | ]
33 | }
34 | ]
35 | };
36 |
37 |
38 |
39 | // Get the HTML DOM element that will contain your map
40 | // We are using a div with id="map" seen below in the
41 | var mapElement = document.getElementById('map');
42 |
43 | // Create the Google Map using out element and options defined above
44 | var map = new google.maps.Map(mapElement, mapOptions);
45 |
46 | var addresses = ['New York'];
47 |
48 | for (var x = 0; x < addresses.length; x++) {
49 | $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addresses[x]+'&sensor=false', null, function (data) {
50 | var p = data.results[0].geometry.location
51 | var latlng = new google.maps.LatLng(p.lat, p.lng);
52 | new google.maps.Marker({
53 | position: latlng,
54 | map: map,
55 | icon: 'images/loc.png'
56 | });
57 |
58 | });
59 | }
60 |
61 | }
62 | google.maps.event.addDomListener(window, 'load', init);
--------------------------------------------------------------------------------
/src/components/common/legacy/google-map.js:
--------------------------------------------------------------------------------
1 |
2 | var google;
3 |
4 | function init() {
5 | // Basic options for a simple Google Map
6 | // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
7 | // var myLatlng = new google.maps.LatLng(40.71751, -73.990922);
8 | var myLatlng = new google.maps.LatLng(40.69847032728747, -73.9514422416687);
9 | // 39.399872
10 | // -8.224454
11 |
12 | var mapOptions = {
13 | // How zoomed in you want the map to start at (always required)
14 | zoom: 7,
15 |
16 | // The latitude and longitude to center the map (always required)
17 | center: myLatlng,
18 |
19 | // How you would like to style the map.
20 | scrollwheel: false,
21 | styles: [
22 | {
23 | "featureType": "administrative.country",
24 | "elementType": "geometry",
25 | "stylers": [
26 | {
27 | "visibility": "simplified"
28 | },
29 | {
30 | "hue": "#ff0000"
31 | }
32 | ]
33 | }
34 | ]
35 | };
36 |
37 |
38 |
39 | // Get the HTML DOM element that will contain your map
40 | // We are using a div with id="map" seen below in the
41 | var mapElement = document.getElementById('map');
42 |
43 | // Create the Google Map using out element and options defined above
44 | var map = new google.maps.Map(mapElement, mapOptions);
45 |
46 | var addresses = ['New York'];
47 |
48 | for (var x = 0; x < addresses.length; x++) {
49 | $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addresses[x]+'&sensor=false', null, function (data) {
50 | var p = data.results[0].geometry.location
51 | var latlng = new google.maps.LatLng(p.lat, p.lng);
52 | new google.maps.Marker({
53 | position: latlng,
54 | map: map,
55 | icon: 'images/loc.png'
56 | });
57 |
58 | });
59 | }
60 |
61 | }
62 | google.maps.event.addDomListener(window, 'load', init);
--------------------------------------------------------------------------------
/src/scss/bootstrap/_pagination.scss:
--------------------------------------------------------------------------------
1 | .pagination {
2 | display: flex;
3 | @include list-unstyled();
4 | @include border-radius();
5 | }
6 |
7 | .page-link {
8 | position: relative;
9 | display: block;
10 | padding: $pagination-padding-y $pagination-padding-x;
11 | margin-left: -$pagination-border-width;
12 | line-height: $pagination-line-height;
13 | color: $pagination-color;
14 | background-color: $pagination-bg;
15 | border: $pagination-border-width solid $pagination-border-color;
16 |
17 | &:hover {
18 | z-index: 2;
19 | color: $pagination-hover-color;
20 | text-decoration: none;
21 | background-color: $pagination-hover-bg;
22 | border-color: $pagination-hover-border-color;
23 | }
24 |
25 | &:focus {
26 | z-index: 2;
27 | outline: $pagination-focus-outline;
28 | box-shadow: $pagination-focus-box-shadow;
29 | }
30 |
31 | // Opinionated: add "hand" cursor to non-disabled .page-link elements
32 | &:not(:disabled):not(.disabled) {
33 | cursor: pointer;
34 | }
35 | }
36 |
37 | .page-item {
38 | &:first-child {
39 | .page-link {
40 | margin-left: 0;
41 | @include border-left-radius($border-radius);
42 | }
43 | }
44 | &:last-child {
45 | .page-link {
46 | @include border-right-radius($border-radius);
47 | }
48 | }
49 |
50 | &.active .page-link {
51 | z-index: 1;
52 | color: $pagination-active-color;
53 | background-color: $pagination-active-bg;
54 | border-color: $pagination-active-border-color;
55 | }
56 |
57 | &.disabled .page-link {
58 | color: $pagination-disabled-color;
59 | pointer-events: none;
60 | // Opinionated: remove the "hand" cursor set previously for .page-link
61 | cursor: auto;
62 | background-color: $pagination-disabled-bg;
63 | border-color: $pagination-disabled-border-color;
64 | }
65 | }
66 |
67 |
68 | //
69 | // Sizing
70 | //
71 |
72 | .pagination-lg {
73 | @include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $line-height-lg, $border-radius-lg);
74 | }
75 |
76 | .pagination-sm {
77 | @include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $line-height-sm, $border-radius-sm);
78 | }
79 |
--------------------------------------------------------------------------------
/src/scss/bootstrap/mixins/_gradients.scss:
--------------------------------------------------------------------------------
1 | // Gradients
2 |
3 | @mixin gradient-bg($color) {
4 | @if $enable-gradients {
5 | background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x;
6 | } @else {
7 | background-color: $color;
8 | }
9 | }
10 |
11 | // Horizontal gradient, from left to right
12 | //
13 | // Creates two color stops, start and end, by specifying a color and position for each color stop.
14 | @mixin gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {
15 | background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);
16 | background-repeat: repeat-x;
17 | }
18 |
19 | // Vertical gradient, from top to bottom
20 | //
21 | // Creates two color stops, start and end, by specifying a color and position for each color stop.
22 | @mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {
23 | background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
24 | background-repeat: repeat-x;
25 | }
26 |
27 | @mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) {
28 | background-image: linear-gradient($deg, $start-color, $end-color);
29 | background-repeat: repeat-x;
30 | }
31 | @mixin gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
32 | background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
33 | background-repeat: no-repeat;
34 | }
35 | @mixin gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
36 | background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
37 | background-repeat: no-repeat;
38 | }
39 | @mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) {
40 | background-image: radial-gradient(circle, $inner-color, $outer-color);
41 | background-repeat: no-repeat;
42 | }
43 | @mixin gradient-striped($color: rgba($white, .15), $angle: 45deg) {
44 | background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
45 | }
46 |
--------------------------------------------------------------------------------
/content/posts/2015-05-28-markdown.md:
--------------------------------------------------------------------------------
1 | ---
2 | templateKey: post
3 | title: Markdown 📝
4 | date: "2015-05-28T22:40:32.169Z"
5 | layout: post
6 | path: "/markdown/"
7 | category: Typography
8 | editorpick: yes
9 | description: "Markdown is a lightweight markup language that you can use to add formatting elements to plaintext text documents. Created by John Gruber in 2004, Markdown is now one of the world’s most popular markup languages."
10 | tags: ["Markdown", "Emoji"]
11 | tagline: ""
12 | seo:
13 | title: Ultra Markdown
14 | description: "Markdown is a lightweight markup language that you can use to add formatting elements to plaintext text documents. Created by John Gruber in 2004, Markdown is now one of the world’s most popular markup language."
15 | ---
16 |
17 | ## What’s Markdown?
18 | Markdown is a lightweight markup language that you can use to add formatting elements to plaintext text documents. Created by John Gruber in 2004, Markdown is now one of the world’s most popular markup languages.
19 |
20 | Using Markdown is different than using a WYSIWYG editor. In an application like Microsoft Word, you click buttons to format words and phrases, and the changes are visible immediately. Markdown isn’t like that. When you create a Markdown-formatted file, you add Markdown syntax to the text to indicate which words and phrases should look different.
21 |
22 | For instance, to denote a heading, you add a number sign before it (e.g., # Heading One). Or to make a phrase bold, you add two asterisks before and after it (e.g., **this text is bold**). It may take a while to get used to seeing Markdown syntax in your text, especially if you’re accustomed to WYSIWYG applications.
23 |
24 | Paragraphs are separated by a blank line.
25 |
26 | 2nd paragraph. _Italic_, **bold**, and `monospace`. Itemized lists
27 | look like:
28 |
29 | - this one
30 | - that one
31 | - the other one
32 |
33 | ## An h2 header
34 |
35 | content starts at 4-columns in.
36 |
37 | > Block quotes are
38 | > written like so.
39 | >
40 | > They can span multiple paragraphs,
41 | > if you like.
42 |
43 | Use 3 dashes for an em-dash. Use 2 dashes for ranges (ex., "it's all
44 | in chapters 12--14"). Three dots ... will be converted to an ellipsis.
45 | Unicode is supported 😄
46 |
47 | ```js
48 | // javascript
49 | console.log('Hello World!!')
50 | ```
51 |
--------------------------------------------------------------------------------
/src/scss/bootstrap/utilities/_spacing.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable declaration-no-important
2 |
3 | // Margin and Padding
4 |
5 | @each $breakpoint in map-keys($grid-breakpoints) {
6 | @include media-breakpoint-up($breakpoint) {
7 | $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
8 |
9 | @each $prop, $abbrev in (margin: m, padding: p) {
10 | @each $size, $length in $spacers {
11 | .#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; }
12 | .#{$abbrev}t#{$infix}-#{$size},
13 | .#{$abbrev}y#{$infix}-#{$size} {
14 | #{$prop}-top: $length !important;
15 | }
16 | .#{$abbrev}r#{$infix}-#{$size},
17 | .#{$abbrev}x#{$infix}-#{$size} {
18 | #{$prop}-right: $length !important;
19 | }
20 | .#{$abbrev}b#{$infix}-#{$size},
21 | .#{$abbrev}y#{$infix}-#{$size} {
22 | #{$prop}-bottom: $length !important;
23 | }
24 | .#{$abbrev}l#{$infix}-#{$size},
25 | .#{$abbrev}x#{$infix}-#{$size} {
26 | #{$prop}-left: $length !important;
27 | }
28 | }
29 | }
30 |
31 | // Negative margins (e.g., where `.mb-n1` is negative version of `.mb-1`)
32 | @each $size, $length in $spacers {
33 | @if $size != 0 {
34 | .m#{$infix}-n#{$size} { margin: -$length !important; }
35 | .mt#{$infix}-n#{$size},
36 | .my#{$infix}-n#{$size} {
37 | margin-top: -$length !important;
38 | }
39 | .mr#{$infix}-n#{$size},
40 | .mx#{$infix}-n#{$size} {
41 | margin-right: -$length !important;
42 | }
43 | .mb#{$infix}-n#{$size},
44 | .my#{$infix}-n#{$size} {
45 | margin-bottom: -$length !important;
46 | }
47 | .ml#{$infix}-n#{$size},
48 | .mx#{$infix}-n#{$size} {
49 | margin-left: -$length !important;
50 | }
51 | }
52 | }
53 |
54 | // Some special margin utils
55 | .m#{$infix}-auto { margin: auto !important; }
56 | .mt#{$infix}-auto,
57 | .my#{$infix}-auto {
58 | margin-top: auto !important;
59 | }
60 | .mr#{$infix}-auto,
61 | .mx#{$infix}-auto {
62 | margin-right: auto !important;
63 | }
64 | .mb#{$infix}-auto,
65 | .my#{$infix}-auto {
66 | margin-bottom: auto !important;
67 | }
68 | .ml#{$infix}-auto,
69 | .mx#{$infix}-auto {
70 | margin-left: auto !important;
71 | }
72 | }
73 | }
74 |
--------------------------------------------------------------------------------
/src/scss/bootstrap/_nav.scss:
--------------------------------------------------------------------------------
1 | // Base class
2 | //
3 | // Kickstart any navigation component with a set of style resets. Works with
4 | // `
7 |
31 |
9 |
30 |
10 |
29 |
11 |
28 |
12 |
17 |
14 |
15 | + 1235 2355 98
16 |
18 |
23 |
20 |
21 | youremail@email.com
22 |
25 | 3-5 Business days delivery & Free Returns
26 |
27 |