From 11a73ab996205a870c01e75c9120cb2019e7b06c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wojciech=20Bo=C5=BCek?= Date: Sat, 1 Aug 2020 14:22:33 +0200 Subject: [PATCH] with --- src/assets/stylesheets/application.sass | 25 ++ src/assets/stylesheets/base/_breakpoints.scss | 123 ++++++ src/assets/stylesheets/base/_grid.sass | 122 ++++++ src/assets/stylesheets/base/_mixins.sass | 49 +++ src/assets/stylesheets/base/_variables.sass | 84 ++++ .../stylesheets/components/blogpost.sass | 120 +++++ .../stylesheets/components/filters.sass | 29 ++ src/assets/stylesheets/components/footer.sass | 57 +++ .../stylesheets/components/gallery.sass | 8 + .../stylesheets/components/hero-image.sass | 63 +++ src/assets/stylesheets/components/post.sass | 117 +++++ .../stylesheets/components/simple-nav.sass | 48 ++ src/assets/stylesheets/components/subnav.sass | 46 ++ src/assets/stylesheets/shared/base.sass | 78 ++++ src/assets/stylesheets/shared/buttons.sass | 63 +++ src/assets/stylesheets/shared/fonts.sass | 19 + src/assets/stylesheets/shared/forms.sass | 135 ++++++ src/assets/stylesheets/shared/hacks.sass | 19 + src/assets/stylesheets/shared/utilities.sass | 16 + src/templates/blog-post.js | 412 ++++++++++++++++++ 20 files changed, 1633 insertions(+) diff --git a/src/assets/stylesheets/application.sass b/src/assets/stylesheets/application.sass index e69de29..626d6b0 100644 --- a/src/assets/stylesheets/application.sass +++ b/src/assets/stylesheets/application.sass @@ -0,0 +1,25 @@ +@import 'vendor/normalize' + +@import 'base/variables' +@import 'base/breakpoints' +@import 'base/mixins' +@import 'base/grid' + +//When working on a Rails project you can use wildcard for importing. JS requires explicit paths. +//@import 'shared/*' +@import 'shared/base' +@import 'shared/buttons' +@import 'shared/fonts' +@import 'shared/forms' +@import 'shared/hacks' +@import 'shared/utilities' + +//@import 'components/*' +@import 'components/hero-image' +@import 'components/simple-nav' +@import 'components/post' +@import 'components/footer' +@import 'components/subnav' +@import 'components/blogpost' +@import 'components/gallery' +@import 'components/filters' diff --git a/src/assets/stylesheets/base/_breakpoints.scss b/src/assets/stylesheets/base/_breakpoints.scss index e69de29..23a5de9 100755 --- a/src/assets/stylesheets/base/_breakpoints.scss +++ b/src/assets/stylesheets/base/_breakpoints.scss @@ -0,0 +1,123 @@ +// Breakpoint viewport sizes and media queries. +// +// Breakpoints are defined as a map of (name: minimum width), order from small to large: +// +// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px) +// +// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default. + +// Name of the next breakpoint, or null for the last breakpoint. +// +// >> breakpoint-next(sm) +// md +// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) +// md +// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl)) +// md +@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) { + $n: index($breakpoint-names, $name); + @return if($n != null and $n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null); +} + +// Minimum breakpoint width. Null for the smallest (first) breakpoint. +// +// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) +// 576px +@function breakpoint-min($name, $breakpoints: $grid-breakpoints) { + $min: map-get($breakpoints, $name); + @return if($min != 0, $min, null); +} + +// Maximum breakpoint width. Null for the largest (last) breakpoint. +// The maximum value is calculated as the minimum of the next one less 0.02px +// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths. +// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max +// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari. +// See https://bugs.webkit.org/show_bug.cgi?id=178261 +// +// >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) +// 767.98px +@function breakpoint-max($name, $breakpoints: $grid-breakpoints) { + $next: breakpoint-next($name, $breakpoints); + @return if($next, breakpoint-min($next, $breakpoints) - .02, null); +} + +// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front. +// Useful for making responsive utilities. +// +// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) +// "" (Returns a blank string) +// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) +// "-sm" +@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) { + @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}"); +} + +// Media of at least the minimum breakpoint width. No query for the smallest breakpoint. +// Makes the @content apply to the given breakpoint and wider. +@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) { + $min: breakpoint-min($name, $breakpoints); + @if $min { + @media (min-width: $min) { + @content; + } + } @else { + @content; + } +} + +// Media of at most the maximum breakpoint width. No query for the largest breakpoint. +// Makes the @content apply to the given breakpoint and narrower. +@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) { + $max: breakpoint-max($name, $breakpoints); + @if $max { + @media (max-width: $max) { + @content; + } + } @else { + @content; + } +} + +// Media that spans multiple breakpoint widths. +// Makes the @content apply between the min and max breakpoints +@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) { + $min: breakpoint-min($lower, $breakpoints); + $max: breakpoint-max($upper, $breakpoints); + + @if $min != null and $max != null { + @media (min-width: $min) and (max-width: $max) { + @content; + } + } @else if $max == null { + @include media-breakpoint-up($lower, $breakpoints) { + @content; + } + } @else if $min == null { + @include media-breakpoint-down($upper, $breakpoints) { + @content; + } + } +} + +// Media between the breakpoint's minimum and maximum widths. +// No minimum for the smallest breakpoint, and no maximum for the largest one. +// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower. +@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) { + $min: breakpoint-min($name, $breakpoints); + $max: breakpoint-max($name, $breakpoints); + + @if $min != null and $max != null { + @media (min-width: $min) and (max-width: $max) { + @content; + } + } @else if $max == null { + @include media-breakpoint-up($name, $breakpoints) { + @content; + } + } @else if $min == null { + @include media-breakpoint-down($name, $breakpoints) { + @content; + } + } +} diff --git a/src/assets/stylesheets/base/_grid.sass b/src/assets/stylesheets/base/_grid.sass index e69de29..e381681 100644 --- a/src/assets/stylesheets/base/_grid.sass +++ b/src/assets/stylesheets/base/_grid.sass @@ -0,0 +1,122 @@ +%column + min-height: 1px + padding: + left: ($grid-gutter-width / 2) + right: ($grid-gutter-width / 2) + position: relative + width: 100% + +=container + margin: + left: auto + right: auto + max-width: $container + padding: + left: $grid-gutter-width + right: $grid-gutter-width + width: 100% + +=container-fluid($gutter: $grid-gutter-width) + margin: + left: auto + right: auto + padding: + left: $grid-gutter-width + right: $grid-gutter-width + width: 100% + +=row($gutter: $grid-gutter-width) + display: flex + flex-wrap: wrap + + @if $gutter != 0 + margin: + left: ceil(-$gutter / 2) + right: floor(-$gutter / 2) + @else + > * + padding: + left: 0 + right: 0 + +//----- columns -------------------------------------------------------------------------------------------------------- +=col + flex-basis: 0 + flex-grow: 1 + max-width: 100% + +=col-auto + flex: 0 0 auto + max-width: none + width: auto + +//----- extra small columns -------------------------------------------------------------------------------------------- +=column($columns, $gutter: $grid-gutter-width) + @extend %column + flex: 0 0 percentage($columns / $grid-columns) + max-width: percentage($columns / $grid-columns) + +=offset($columns) + margin-left: percentage($columns / $grid-columns) + +=order($columns) + order: $columns + +//----- small columns -------------------------------------------------------------------------------------------------- +=column-sm($columns, $gutter: $grid-gutter-width) + @extend %column + +media-breakpoint-up(sm) + width: percentage($columns / $grid-columns) + +=offset-sm($columns) + +media-breakpoint-up(sm) + margin-left: percentage($columns / $grid-columns) + +=order-sm($columns) + +media-breakpoint-up(sm) + order: $columns + +//----- medium columns ------------------------------------------------------------------------------------------------- +=column-md($columns, $gutter: $grid-gutter-width) + @extend %column + +media-breakpoint-up(md) + flex: 0 0 percentage($columns / $grid-columns) + max-width: percentage($columns / $grid-columns) + +=offset-md($columns) + +media-breakpoint-up(md) + margin-left: percentage($columns / $grid-columns) + +=order-md($columns) + +media-breakpoint-up(md) + order: $columns + +//----- large columns -------------------------------------------------------------------------------------------------- +=column-lg($columns, $gutter: $grid-gutter-width) + @extend %column + +media-breakpoint-up(lg) + flex: 0 0 percentage($columns / $grid-columns) + max-width: percentage($columns / $grid-columns) + +=offset-lg($columns) + +media-breakpoint-up(lg) + margin-left: percentage($columns / $grid-columns) + +=order-lg($columns) + +media-breakpoint-up(lg) + order: $columns + +//----- extra large columns -------------------------------------------------------------------------------------------- +=column-xl($columns, $gutter: $grid-gutter-width) + @extend %column + +media-breakpoint-up(xl) + flex: 0 0 percentage($columns / $grid-columns) + max-width: percentage($columns / $grid-columns) + +=offset-xl($columns) + +media-breakpoint-up(xl) + margin-left: percentage($columns / $grid-columns) + +=order-xl($columns) + +media-breakpoint-up(xl) + order: $columns diff --git a/src/assets/stylesheets/base/_mixins.sass b/src/assets/stylesheets/base/_mixins.sass index e69de29..6ffcf44 100644 --- a/src/assets/stylesheets/base/_mixins.sass +++ b/src/assets/stylesheets/base/_mixins.sass @@ -0,0 +1,49 @@ +=box-shadow($color) + box-shadow: 0 5px 15px rgba($color, .2) + +// DEPRECATED - you should not use floats for columns anymore +=clearfix + &:after + clear: both + content: '' + display: table + +=ellipsis + overflow: hidden + text-overflow: ellipsis + white-space: nowrap + +// UNOFF - watch the browser support for this one here https://caniuse.com/#search=line-clamp +=ellipsis-multiline($lines: 3) + /* autoprefixer: ignore next */ + -webkit-box-orient: vertical + -webkit-line-clamp: $lines + display: -webkit-box + overflow: hidden + +// experimental hover device detection, if you use this IE will not get any hovers +=hover + @media (hover: hover) and (pointer: fine) + &:hover + @content + +=list-unstyled + list-style: none + padding-left: 0 + +=pseudoelement + bottom: 0 + content: '' + left: 0 + position: absolute + right: 0 + top: 0 + +=transition($property...) + transition-property: $property + transition-duration: $transition-duration + transition-timing-function: $transition-function + +=media-touch-devices + @media (any-pointer: coarse) + @content diff --git a/src/assets/stylesheets/base/_variables.sass b/src/assets/stylesheets/base/_variables.sass index e69de29..4dc8afa 100644 --- a/src/assets/stylesheets/base/_variables.sass +++ b/src/assets/stylesheets/base/_variables.sass @@ -0,0 +1,84 @@ +//----- fonts sizes and line-heights ----------------------------------------------------------------------------------- +$font-size-xs: 12px +$font-size-sm: 14px +$font-size-base: 18px +$font-size-lg: 22px +$font-size-xl: 28px +$font-size-2xl: 48px +$font-size-3xl: 72px + +//----- spacings (margins/paddings) ------------------------------------------------------------------------------------ +$m-xs: 8px +$m-sm: $m-xs * 2 +$m-base: $m-xs * 3 +$m-lg: $m-base * 2 +$m-xl: $m-base * 3 +$m-2xl: $m-base * 4 + +//----- line heights --------------------------------------------------------------------------------------------------- +$line-height-sm: $m-sm +$line-height-base: $m-base +$line-height-lg: $m-lg + +//----- border radiuses ------------------------------------------------------------------------------------------------ +$border-radius-base: $m-base +$border-radius-sm: $m-xs +$border-radius-lg: $m-lg + +//----- breakpoints ---------------------------------------------------------------------------------------------------- +$grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px) + +$grid-columns: 12 +$grid-gutter-width: $m-base + +$container: map-get($grid-breakpoints, xl) + +//----- colors --------------------------------------------------------------------------------------------------------- + + +//---main palete ---------------------- +$color-pale-green: #98fb98 +$color-jet: #363537 +$color-smoky-black: #0A0908 +$color-gunmetal: #22333B +$color-avocado: #447604 + + +$color-primary: $color-pale-green +$color-success: $color-gunmetal +$color-warning: #ffd200 +$color-danger: #e62a2a +$color-info: #5bc0de +$color-secondary: $color-avocado + +$color-white: #ffffff +$color-gray-300: hsl(36, 5%, 85%) +$color-gray-400: hsl(36, 5%, 75%) +$color-gray-500: hsl(36, 5%, 62%) +$color-gray-600: hsl(36, 5%, 38%) +$color-gray-700: hsl(36, 5%, 28%) +$color-black: #04080c + +//----- fonts ---------------------------------------------------------------------------------------------------------- +$font-family-header: 'Rubik' +$font-family-body: 'Nunito Sans' +$font-stack-header: $font-family-header, sans-serif +$font-stack-body: $font-family-body, serif + +$font-weight-light: 300 +$font-weight-regular: 400 +$font-weight-bold: 700 + +$icon-size: $m-base + +//----- transitions ---------------------------------------------------------------------------------------------------- +$transition-duration: .3s +$transition-function: ease-in-out + +//----- z-indexes ------------------------------------------------------------------------------------------------------ +$z-negative: -1 +$z-lower: 30 +$z-low: 40 +$z-base: 50 +$z-high: 60 +$z-higher: 70 diff --git a/src/assets/stylesheets/components/blogpost.sass b/src/assets/stylesheets/components/blogpost.sass index e69de29..123c9aa 100644 --- a/src/assets/stylesheets/components/blogpost.sass +++ b/src/assets/stylesheets/components/blogpost.sass @@ -0,0 +1,120 @@ +.blogpost-page + flex-direction: row + display: flex + padding: 20px + + +media-breakpoint-down(md) + flex-direction: column + +.simple-blogpost + display: flex + padding: 20px + flexDirection: row + + +media-breakpoint-down(md) + flex-direction: column + + .blogpost-hero + width: 100vw + object-fit: cover + +.blogpost + flex: 3 + padding-left: 26px + padding-right: 20px + color: rgba(white, 0.7) + + ul, ol + margin-left: 1rem + + +media-breakpoint-down(md) + font-size: 80% + padding-left: 0px + padding-right: 0px + + &-hero + height: 100vh + width: 50vw + object-fit: cover + + .blogpost-content + padding: 20px + + +media-breakpoint-down(md) + padding: 10px 0 + + header + margin-left: 20px + color: white + + +media-breakpoint-down(md) + margin-left: 0 + + h1 + margin-bottom: 0 + margin-top: 1rem + + +media-breakpoint-down(md) + h1 + margin-top: 0 + + .informations + border-bottom: 1px rgba($color-pale-green, 1) solid + background: linear-gradient(45deg, rgba($color-gunmetal, 0.2) 20%, rgba($color-pale-green, 0.1) 75%); + width: 100% + padding: 10px + margin-bottom: 10px + + section + margin-bottom: 12px + margin-left: 10px + display: flex + flex-direction: row + position: relative + + +media-breakpoint-down(md) + margin-left: 0 + + summary + color: $color-pale-green + opacity: 0.8 + flex: 1 + + .asphalt + margin-right: 4px + margin-bottom: -3px + + span, a + flex: 2 + padding-left: 10px + a + box-shadow: none + text-decoration: none + color: white + white-space: nowrap + overflow: hidden + text-overflow: ellipsis + + + .separator + width: calc(100% + 10px) + height: 2px + position: absolute + bottom: -9px + right: -10px + background: linear-gradient(45deg, rgba($color-jet, 1) 20%, rgba($color-gunmetal, 0.3) 75%); + +footer.date-footer + margin-bottom: 30px + display: flex; + flex-direction: column + hr + border-top: 1px solid $color-jet + margin-bottom: 0 + + span + font-size: 10px + font-weight: 500 + color: $color-pale-green + text-align: center + align-self: flex-end diff --git a/src/assets/stylesheets/components/filters.sass b/src/assets/stylesheets/components/filters.sass index e69de29..1ec0f60 100644 --- a/src/assets/stylesheets/components/filters.sass +++ b/src/assets/stylesheets/components/filters.sass @@ -0,0 +1,29 @@ +.filters + margin-left: 20px + margin-right: 20px + margin-top: 20px + display: flex + + +media-breakpoint-down(md) + justify-content: center + + .filter + background-color: $color-jet + color: white + padding: 2px .7rem + font-family: $font-family-body + font-size: 14px + font-weight: 600 + border-radius: 20px + margin-right: 10px + cursor: pointer + text-shadow: 0px 0px 6px rgba($color-smoky-black,0.94) + text-align: center + + +media-breakpoint-down(md) + font-size: 10px + font-weight: 600 + padding: 0px .8rem + + &.-active + background-color: rgba($color-pale-green, 0.8) diff --git a/src/assets/stylesheets/components/footer.sass b/src/assets/stylesheets/components/footer.sass index e69de29..8a3e32b 100644 --- a/src/assets/stylesheets/components/footer.sass +++ b/src/assets/stylesheets/components/footer.sass @@ -0,0 +1,57 @@ +.footer + font-size: 80% + display: flex + width: 100% + padding: 10px 20px + position: relative + flex-direction: row + justify-content: flex-end + background-color: $color-smoky-black + + &-first-bg + position: absolute + left: 0 + top: 0 + width: 100% + height: 100% + z-index: 15 + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3600' height='100'%3E%3Cdefs%3E%3ClinearGradient id='mountainGradient' x1='0%40' y1='-40%40' x2='0%40' y2='100%40'%3E%3Cstop offset='0%25' stop-color='%2398FB9860'%3E%3C/stop%3E%3Cstop offset='100%25' stop-color='%230A090860'%3E%3C/stop%3E%3C/linearGradient%3E%3ClinearGradient id='shadowGradient' x1='100%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='transparent'%3E%3C/stop%3E%3Cstop offset='80%25' stop-color='transparent'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='0,30 30,24 60,9 90,5 120,17 150,54 180,38 210,44 240,30 270,39 300,16 330,9 360,5 390,15 420,19 450,2 480,30 510,21 540,21 570,17 600,8 630,13 660,32 690,28 720,30 750,6 780,31 810,43 840,14 870,32 900,22 930,33 960,30 990,11 1020,22 1050,10 1080,10 1110,0 1140,12 1170,24 1200,30 1230,24 1260,29 1290,2 1320,12 1350,29 1380,20 1410,37 1440,30 1470,17 1500,44 1530,1 1560,14 1590,51 1620,40 1650,57 1680,30 1710,56 1740,37 1770,3 1800,28 1830,27 1860,47 1890,61 1920,30 1950,36 1980,26 2010,15 2040,24 2070,49 2100,50 2130,16 2160,30 2190,52 2220,41 2250,65 2280,29 2310,67 2340,55 2370,61 2400,30 2430,40 2460,38 2490,25 2520,29 2550,16 2580,50 2610,18 2640,30 2670,11 2700,20 2730,37 2760,17 2790,14 2820,18 2850,18 2880,30 2910,26 2940,12 2970,11 3000,10 3030,0 3060,11 3090,21 3120,30 3150,56 3180,55 3210,15 3240,29 3270,10 3300,3 3330,22 3360,30 3390,22 3420,11 3450,15 3480,7 3510,25 3540,19 3570,12 3600,30 3600,100 0,100' fill='url(%23mountainGradient)'%3E%3C/polygon%3E%3Cpath fill='url(%23shadowGradient)' d='M 90 5 120 17 120 17 150 54 110 105 ZM 180 38 210 44 210 44 200 100 ZM 240 30 270 39 270 39 260 92 ZM 360 5 390 15 390 15 420 19 380 80 ZM 450 2 480 30 480 30 470 93 ZM 600 8 630 13 630 13 660 32 620 99 ZM 690 28 720 30 720 30 710 83 ZM 750 6 780 31 780 31 810 43 770 99 ZM 840 14 870 32 870 32 860 96 ZM 900 22 930 33 930 33 920 100 ZM 990 11 1020 22 1020 22 1010 99 ZM 1110 0 1140 12 1140 12 1170 24 1200 30 1130 97 ZM 1230 24 1260 29 1260 29 1250 85 ZM 1290 2 1320 12 1320 12 1350 29 1310 96 ZM 1380 20 1410 37 1410 37 1400 100 ZM 1470 17 1500 44 1500 44 1490 72 ZM 1530 1 1560 14 1560 14 1590 51 1550 107 ZM 1620 40 1650 57 1650 57 1640 100 ZM 1680 30 1710 56 1710 56 1700 103 ZM 1770 3 1800 28 1800 28 1790 100 ZM 1830 27 1860 47 1860 47 1890 61 1850 100 ZM 1920 30 1950 36 1950 36 1940 98 ZM 2010 15 2040 24 2040 24 2070 49 2100 50 2030 87 ZM 2130 16 2160 30 2160 30 2190 52 2150 104 ZM 2220 41 2250 65 2250 65 2240 100 ZM 2280 29 2310 67 2310 67 2300 101 ZM 2340 55 2370 61 2370 61 2360 100 ZM 2400 30 2430 40 2430 40 2420 108 ZM 2490 25 2520 29 2520 29 2510 100 ZM 2550 16 2580 50 2580 50 2570 98 ZM 2610 18 2640 30 2640 30 2630 83 ZM 2670 11 2700 20 2700 20 2730 37 2690 97 ZM 2790 14 2820 18 2820 18 2810 99 ZM 2850 18 2880 30 2880 30 2870 97 ZM 3030 0 3060 11 3060 11 3090 21 3120 30 3150 56 3050 107 ZM 3210 15 3240 29 3240 29 3230 95 ZM 3300 3 3330 22 3330 22 3360 30 3320 100 ZM 3420 11 3450 15 3450 15 3440 90 ZM 3480 7 3510 25 3510 25 3500 97 ZM 3570 12 3600 30 3600 30 3590 100 Z'%3E%3C/path%3E%3C/svg%3E") + + &-third-bg + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3600' height='170'%3E%3Cdefs%3E%3ClinearGradient id='mountainGradient' x1='0%25' y1='-40%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%2398FB9860'%3E%3C/stop%3E%3Cstop offset='100%25' stop-color='%230A090860'%3E%3C/stop%3E%3C/linearGradient%3E%3ClinearGradient id='shadowGradient' x1='100%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='transparent'%3E%3C/stop%3E%3Cstop offset='80%25' stop-color='transparent'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='0,40 30,19 60,17 90,6 120,11 150,17 180,19 210,17 240,40 270,34 300,1 330,24 360,40 390,22 420,40 450,40 480,40 510,37 540,45 570,29 600,23 630,71 660,59 690,32 720,40 750,6 780,24 810,9 840,10 870,7 900,6 930,9 960,40 990,2 1020,41 1050,5 1080,8 1110,5 1140,5 1170,0 1200,40 1230,22 1260,28 1290,44 1320,38 1350,25 1380,51 1410,29 1440,40 1470,21 1500,1 1530,6 1560,9 1590,15 1620,17 1650,53 1680,40 1710,12 1740,54 1770,76 1800,23 1830,15 1860,8 1890,4 1920,40 1950,30 1980,1 2010,0 2040,30 2070,85 2100,60 2130,22 2160,40 2190,40 2220,54 2250,57 2280,31 2310,71 2340,63 2370,78 2400,40 2430,61 2460,21 2490,27 2520,8 2550,6 2580,24 2610,18 2640,40 2670,66 2700,31 2730,23 2760,12 2790,20 2820,13 2850,17 2880,40 2910,33 2940,4 2970,9 3000,38 3030,33 3060,40 3090,52 3120,40 3150,10 3180,53 3210,50 3240,14 3270,5 3300,47 3330,1 3360,40 3390,59 3420,44 3450,43 3480,10 3510,3 3540,6 3570,6 3600,40 3600,170 0,170' fill='url(%23mountainGradient)'%3E%3C/polygon%3E%3Cpath fill='url(%23shadowGradient)' d='M 90 6 120 11 120 11 150 17 180 19 110 155 ZM 210 17 240 40 240 40 230 167 ZM 300 1 330 24 330 24 360 40 320 156 ZM 390 22 420 40 420 40 410 170 ZM 510 37 540 45 540 45 530 166 ZM 600 23 630 71 630 71 620 176 ZM 690 32 720 40 720 40 710 164 ZM 750 6 780 24 780 24 770 142 ZM 810 9 840 10 840 10 830 150 ZM 900 6 930 9 930 9 960 40 920 146 ZM 990 2 1020 41 1020 41 1010 152 ZM 1050 5 1080 8 1080 8 1070 155 ZM 1170 0 1200 40 1200 40 1190 166 ZM 1230 22 1260 28 1260 28 1290 44 1250 169 ZM 1350 25 1380 51 1380 51 1370 164 ZM 1410 29 1440 40 1440 40 1430 164 ZM 1500 1 1530 6 1530 6 1560 9 1590 15 1620 17 1650 53 1520 170 ZM 1710 12 1740 54 1740 54 1770 76 1730 159 ZM 1890 4 1920 40 1920 40 1910 169 ZM 2010 0 2040 30 2040 30 2070 85 2030 176 ZM 2130 22 2160 40 2160 40 2150 170 ZM 2190 40 2220 54 2220 54 2250 57 2210 170 ZM 2280 31 2310 71 2310 71 2300 192 ZM 2340 63 2370 78 2370 78 2360 170 ZM 2400 40 2430 61 2430 61 2420 159 ZM 2460 21 2490 27 2490 27 2480 155 ZM 2550 6 2580 24 2580 24 2570 157 ZM 2610 18 2640 40 2640 40 2670 66 2630 163 ZM 2760 12 2790 20 2790 20 2780 165 ZM 2820 13 2850 17 2850 17 2880 40 2840 164 ZM 2940 4 2970 9 2970 9 3000 38 2960 167 ZM 3030 33 3060 40 3060 40 3090 52 3050 170 ZM 3150 10 3180 53 3180 53 3170 171 ZM 3270 5 3300 47 3300 47 3290 156 ZM 3330 1 3360 40 3360 40 3390 59 3350 172 ZM 3510 3 3540 6 3540 6 3530 155 ZM 3570 6 3600 40 3600 40 3590 170 Z'%3E%3C/path%3E%3C/svg%3E") + position: absolute + left: 0 + top: -40px + width: 100% + height: calc(100% + 40px) + z-index: 11 + + &-right + z-index: 20 + display: flex + flex-direction: row + + &__text + color: white + padding: 0 10px + display: flex + flex-direction: column + justify-content: center + + .instagram-icon + background: $color-jet + border-radius: 25px + height: 50px + width: 50px + box-shadow: none + display: flex + justify-content: center + align-items: center + margin-right: 10px + + a.email-link + color: white + box-shadow: none + + a.g-link + box-shadow: none diff --git a/src/assets/stylesheets/components/gallery.sass b/src/assets/stylesheets/components/gallery.sass index e69de29..d261aa4 100644 --- a/src/assets/stylesheets/components/gallery.sass +++ b/src/assets/stylesheets/components/gallery.sass @@ -0,0 +1,8 @@ +.gallery + flex: 2 + padding-left: 10px + border-left: 1px rgba($color-avocado, 0.1) solid + + +media-breakpoint-down(md) + border-left-width: 0 + padding-left: 0 diff --git a/src/assets/stylesheets/components/hero-image.sass b/src/assets/stylesheets/components/hero-image.sass index e69de29..0f6f50f 100644 --- a/src/assets/stylesheets/components/hero-image.sass +++ b/src/assets/stylesheets/components/hero-image.sass @@ -0,0 +1,63 @@ +.hero-image + height: 100vh + position: relative + background-size: cover + overflow: hidden + background-position: center + background-repeat: no-repeat + background: white + + &-background + width: 100% + height: 100vh + position: absolute + left: 0 + background-size: cover + top: 0 + background-position: center + background-repeat: no-repeat + z-index: 9 + transform: translateZ(0px) scale(1) + + +media-breakpoint-down(md) + height: 50vh + + &-first + width: 100% + height: 100vh + position: absolute + background-size: cover + left: 0 + top: 0 + background-position: center + background-repeat: no-repeat + opacity: 1 + z-index: 10 + + +media-breakpoint-down(md) + height: 50vh + + + +media-breakpoint-down(md) + height: 50vh + + .container + position: absolute + bottom: 40px + right: 60px + z-index: 11 + + h1 + color: white + font-size: 350% + text-shadow: 0px 0px 6px rgba($color-smoky-black,0.74) + + +media-breakpoint-down(md) + font-size: 200% + + +media-breakpoint-down(xs) + font-size: 130% + + span.me + color: $color-pale-green + text-shadow: 0px 0px 6px rgba($color-smoky-black,0.74) diff --git a/src/assets/stylesheets/components/post.sass b/src/assets/stylesheets/components/post.sass index e69de29..0d3fe11 100644 --- a/src/assets/stylesheets/components/post.sass +++ b/src/assets/stylesheets/components/post.sass @@ -0,0 +1,117 @@ +.posts + display: flex; + flex-direction: row + margin: 0 auto + display: flex + flex-direction: row + flex-wrap: wrap + justify-content: space-around + background-color: $color-smoky-black + + &-wrapper + margin-left: 20px + margin-right: 20px + margin-top: 20px + margin-bottom: 80px + + +media-breakpoint-down(sm) + margin-left: 0 + margin-right: 0 + margin-bottom: 40px + +.post + margin-top: 10px + margin-bottom: 10px + z-index: 3 + margin-right: 10px + margin-left: 10px + height: 300px + width: 270px + position: relative + transition: all .2s ease-in-out + border-radius: 10px + overflow: hidden + box-shadow: 0px 0px 10px 1px rgba($color-jet, 1) + + +media-breakpoint-down(sm) + height: 150px + flex: 1 + margin-top: 10px + margin-right: 0 + margin-left: 0 + + &:hover + +media-breakpoint-up(sm) + transform: scale(1.02) + + .post__overlay + opacity: 0 + + .post__title + height: 100px + .post__title-main + font-size: 30px + + img + z-index: 0 + height: 300px + width: 270px + position: absolute + top: 0 + border-radius: 10px + + +media-breakpoint-down(sm) + height: 150px + object-fit: cover + + &__header + z-index: 2 + position: absolute + top: 3px + right: 0 + left: 0 + text-align: center + + small + color: white + text-shadow: 0px 0px 6px rgba($color-smoky-black,0.74) + font-size: 11px + font-weight: 600 + text-align: center + + &__title + transition: all .5s ease-in-out + text-align: center + z-index: 2 + position: absolute + bottom: 0 + width: 100% + height: 70px + display: flex + flex-direction: column + justify-content: center + align-items: center + + &-main + transition: all .5s ease-in-out + flex: 1 + font-size: 24px + font-weight: 600 + color: white + text-shadow: 0px 0px 6px rgba($color-smoky-black,0.74) + + &-mnpm + flex: 1 + font-size: 12px + font-weight: 500 + color: white + text-shadow: 0px 0px 6px rgba($color-smoky-black,0.74) + + &-gallery + &__image + cursor: pointer + background: $color-gunmetal + + &-wrapper + margin: 10px + vertical-align: middle diff --git a/src/assets/stylesheets/components/simple-nav.sass b/src/assets/stylesheets/components/simple-nav.sass index e69de29..f3eb599 100644 --- a/src/assets/stylesheets/components/simple-nav.sass +++ b/src/assets/stylesheets/components/simple-nav.sass @@ -0,0 +1,48 @@ +.simple-nav + height: 70px + width: 100% + background: $color-gunmetal + background: linear-gradient(36deg, $color-gunmetal 0%, $color-smoky-black 50%, $color-jet 100%); + display: flex + flex-direction: row + + .container + flex: 1 + display: flex + align-items: center + + a + text-decoration: none; + box-shadow: none + + h1, h4 + margin-bottom: 0 + color: white + + span.me + color: $color-pale-green + + +media-breakpoint-down(md) + h1 + font-size: 95% + + +media-breakpoint-down(sm) + h1 + font-size: 90% + + &-right + justify-content: flex-end + margin-right: 23px + + &-left + justify-content: flex-start + margin-left: 23px + + .go-back + display: flex + flex-direction: row + cursor: pointer + + h4 + margin-top: 5px + margin-left: 4px diff --git a/src/assets/stylesheets/components/subnav.sass b/src/assets/stylesheets/components/subnav.sass index e69de29..566f60e 100644 --- a/src/assets/stylesheets/components/subnav.sass +++ b/src/assets/stylesheets/components/subnav.sass @@ -0,0 +1,46 @@ +nav.subnav + height: 70px + padding-left: 20px + padding-right: 20px + border-top: 1px solid $color-jet + border-bottom: 1px solid rgba($color-avocado, 0.1) + + ul + height: 100% + display: flex + flexWrap: wrap + justify-content: space-between + list-style: none + padding: 0 + margin-left: 0 + + li + align-items: center + justify-content: center + display: flex + + height: 100% + + &:first-of-type + margin-right: 10px + + &:last-of-type + margin-left: 10px + + a + font-family: 'Rubik' + line-height: 21px + text-decoration: none + box-shadow: none + color: $color-avocado + align-items: center + align-content: center + display: flex + + +media-breakpoint-down(sm) + font-size: 80% + line-height: 80% + + + &:hover + color: $color-pale-green diff --git a/src/assets/stylesheets/shared/base.sass b/src/assets/stylesheets/shared/base.sass index e69de29..10a150f 100644 --- a/src/assets/stylesheets/shared/base.sass +++ b/src/assets/stylesheets/shared/base.sass @@ -0,0 +1,78 @@ +* + box-sizing: border-box + +body + background-color: $color-smoky-black + color: $color-gray-600 + font: + family: $font-stack-body + size: $font-size-base + line-height: $line-height-base + +.parallax__stage + height: 100vh + left: 0 + overflow: auto + position: absolute + top: 0 + width: 100% + perspective: 0px + + main + min-height: 100vh; // to make up for the lack of content + position: relative; + width: 100%; + +b, +strong + font-weight: $font-weight-bold + +a, +button, +input[type='button'], +input[type='submit'] + cursor: pointer + + &:focus + box-shadow: 0 0 $m-xs $color-primary + outline: none + +a + color: $color-primary + + +hover + color: $color-secondary + +img + display: block + max-width: 100% + +h1, +h2, +h3, +h4, +h5, +h6 + font-family: $font-stack-header + margin: + bottom: $m-base + top: 0 + +p + margin: + bottom: $m-sm + top: 0 + +button + appearance: none + background-color: transparent + border: none + outline: none + padding: 0 + +textarea + resize: vertical + +.separator-40 + height: 40px + width: 100% diff --git a/src/assets/stylesheets/shared/buttons.sass b/src/assets/stylesheets/shared/buttons.sass index e69de29..3a4da96 100644 --- a/src/assets/stylesheets/shared/buttons.sass +++ b/src/assets/stylesheets/shared/buttons.sass @@ -0,0 +1,63 @@ +.btn + +transition(background-color, color) + border: none + radius: $border-radius-sm + cursor: pointer + display: inline-block + font: + family: $font-stack-body + size: $font-size-base + weight: $font-weight-regular + line-height: $line-height-base + padding: $m-xs $m-base + text-decoration: none + + &:hover + +media-touch-devices + background-color: inherit !important + color: inherit !important + + //----- color versions ----------------------------------------------------------------------------------------------- + &.-primary + background-color: $color-primary + color: $color-white + + &.-success + background-color: $color-success + color: $color-white + + &.-link + color: $color-primary + + &:hover + background-color: $color-gray-400 + + &.-outline + background-color: transparent + box-shadow: inset 0 0 0 1px $color-gray-500 + color: $color-gray-600 + + &:hover + background-color: $color-gray-400 + + &.-outline-primary + background-color: transparent + box-shadow: inset 0 0 0 1px $color-primary + color: $color-gray-600 + + &:hover + background-color: $color-gray-400 + + //----- sizes -------------------------------------------------------------------------------------------------------- + &.-lg + font: + size: $font-size-base + weight: $font-weight-bold + letter-spacing: 1.5px + padding: $m-base + width: 100% + + &.-sm + font-size: $font-size-xs + line-height: $m-base + padding: $m-xs $m-sm diff --git a/src/assets/stylesheets/shared/fonts.sass b/src/assets/stylesheets/shared/fonts.sass index e69de29..885fb12 100644 --- a/src/assets/stylesheets/shared/fonts.sass +++ b/src/assets/stylesheets/shared/fonts.sass @@ -0,0 +1,19 @@ +// for use with Rails, replace url with font-url + +@font-face + font-family: $font-family-header + font-style: normal + font-weight: $font-weight-bold + src: url('../fonts/Rubik-Bold.ttf') format('truetype') + +@font-face + font-family: $font-family-body + font-style: normal + font-weight: $font-weight-regular + src: url('../fonts/NunitoSans-Light.ttf') format('truetype') + +@font-face + font-family: $font-family-body + font-style: normal + font-weight: $font-weight-bold + src: url('../fonts/NunitoSans-Bold.ttf') format('truetype') diff --git a/src/assets/stylesheets/shared/forms.sass b/src/assets/stylesheets/shared/forms.sass index e69de29..6e92213 100644 --- a/src/assets/stylesheets/shared/forms.sass +++ b/src/assets/stylesheets/shared/forms.sass @@ -0,0 +1,135 @@ +=choice-base + color: $color-gray-600 + display: flex + font-size: $font-size-sm + margin-bottom: $m-sm + +=choice-input + opacity: 0 + position: absolute + z-index: $z-negative + +=choice-label + align-items: center + cursor: pointer + display: flex + width: 100% + +=choice-mark + content: '' + cursor: pointer + flex: 0 0 $m-base + height: $m-base + margin-right: $m-sm + width: $m-base + +.form + background-color: $color-white + margin: + left: auto + right: auto + max-width: 360px + overflow: auto + padding: + bottom: $m-xl + left: $m-base + right: $m-base + top: $m-sm + width: 100% + + &__header + color: $color-gray-600 + font: + size: $font-size-lg + weight: $font-weight-bold + margin: + bottom: $m-base + top: $m-xl + + &__submit + margin-top: $m-xl + + &__field + margin-bottom: $m-base + + &__input + +transition(border-bottom-color) + border: none + bottom: 2px solid $color-gray-400 + radius: 0 + color: $color-gray-600 + font: + family: $font-stack-body + size: $font-size-base + weight: $font-weight-regular + line-height: $m-lg + margin-bottom: $m-xs + padding-top: $m-sm + width: 100% + + &::placeholder + color: $color-gray-500 + opacity: 1 + + &:focus + border-bottom-color: $color-primary + outline: none + + &__error + color: $color-danger + font-size: $font-size-sm + +.radio + $this: & + +choice-base + + &__input + +choice-input + + &:checked + #{$this}__label:before + box-shadow: inset 0 0 0 7px $color-primary + + &__label + +choice-label + + &:before + +transition(box-shadow) + +choice-mark + border-radius: $border-radius-lg + box-shadow: inset 0 0 0 1px $color-gray-600 + + &:hover:before + box-shadow: inset 0 0 0 2px $color-primary + +.checkbox + $this: & + +choice-base + + &__input + +choice-input + + &:checked + #{$this}__label:before + box-shadow: inset 0 0 0 $m-sm $color-primary + + &__label + +choice-label + position: relative + + &:before + +transition(box-shadow) + +choice-mark + border-radius: $border-radius-sm + box-shadow: inset 0 0 0 1px $color-gray-600 + + &:hover:before + box-shadow: inset 0 0 0 2px $color-primary + + &:after + +choice-mark + background: + image: url('../images/icon-checkmark.svg') + position: center + size: $icon-size $icon-size + left: 0 + position: absolute + top: 0 diff --git a/src/assets/stylesheets/shared/hacks.sass b/src/assets/stylesheets/shared/hacks.sass index e69de29..23d1835 100644 --- a/src/assets/stylesheets/shared/hacks.sass +++ b/src/assets/stylesheets/shared/hacks.sass @@ -0,0 +1,19 @@ +//----- Edge * --------------------------------------------------------------------------------------------------------- +@supports (-ms-ime-align: auto) + .example + display: block + +//----- Internet Explorer ≥ 10 ----------------------------------------------------------------------------------------- +@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) + .example + display: block + +//----- Safari >= 9 ---------------------------------------------------------------------------------------------------- +@supports (-webkit-flow-into: break) + .example + display: block + +//----- Safari Mobile -------------------------------------------------------------------------------------------------- +@supports (-webkit-overflow-scrolling: touch) + .example + display: block diff --git a/src/assets/stylesheets/shared/utilities.sass b/src/assets/stylesheets/shared/utilities.sass index e69de29..ec97f53 100644 --- a/src/assets/stylesheets/shared/utilities.sass +++ b/src/assets/stylesheets/shared/utilities.sass @@ -0,0 +1,16 @@ +// this works only on development, thanks to the .gr__localhost class added by React +// if you're not using React, add a .development or .gr__localhost class to body on dev to enable the debugger + +@keyframes bugfinder + 0%, + 100% + transform: scale(1) + 50% + transform: scale(2) + +.gr__localhost + .false, + .undefined, + .className, + .null + animation: bugfinder infinite 1s !important diff --git a/src/templates/blog-post.js b/src/templates/blog-post.js index e69de29..37d07a4 100644 --- a/src/templates/blog-post.js +++ b/src/templates/blog-post.js @@ -0,0 +1,412 @@ +import React, { useState, useMemo } from "react" +import { Link, graphql, navigate } from "gatsby" +import Layout from "../components/layout" +import SEO from "../components/seo" +import { rhythm, scale } from "../utils/typography" +import Gallery from "react-grid-gallery" +import cloudinary from "cloudinary-core" +import { LazyLoadImage } from "react-lazy-load-image-component" +import Carousel, { Modal, ModalGateway } from "react-images" +import ChevronLeft from "../assets/svg/ChevronLeft" +import ChevronRight from "../assets/svg/ChevronRight" +import ExternalLink from "../assets/svg/ExternalLink" +import MapPin from "../assets/svg/MapPin" +import Map from "../assets/svg/Map" +import Meh from "../assets/svg/Meh" +import Award from "../assets/svg/Avard" +import { times } from "lodash" + +const cl = cloudinary.Cloudinary.new() +cl.config("cloud_name", "just-walking-me") + +const BlogPostTemplate = ({ data, pageContext, location }) => { + const [selectedImage, setSelectedImage] = useState(null) + const [modal, setModal] = useState(false) + const post = data.markdownRemark + const { + asphalt, // + country, // + difficulty, + distance, // + endTime, // + highestMountain, // + ferns, + finishPoint, // + map, + mapaTurystyczna, + creationDate, // + mnpm, // + mountainRange, // + mountains, // + parkingCords, // + startTime, // + startingPoint, // + type, // + wiki, // + } = post.frontmatter + const siteTitle = data.site.siteMetadata.title + const { previous, next } = pageContext + + const images = data.allCloudinaryMedia + const mappedImages = images.edges.map(({ node }) => { + const src = cl.url(node.public_id, { + secure: true, + effect: "saturation:50", + quality: "auto:good", + angle: "exif", + crop: "limit", + height: 1280, + }) + const thumbnail = cl.url(node.public_id, { + secure: true, + crop: "thumb", + effect: "saturation:50", + quality: "auto:eco", + width: 150, + }) + + const { width, height } = node + const prop = height / width + const thumbHeight = prop > 1 ? 150 : 150 * prop + const thumbWidth = prop > 1 ? 150 / prop : 150 + + return { + src, + thumbnail, + caption: node.public_id, + alt: node.id, + height, + width, + thumbHeight, + thumbWidth, + } + }) + + const imagesList = mappedImages.map(image => ({ src: image.src })) + + const mappedImagesAsComponents = mappedImages.map((image, index) => ( + { + setSelectedImage(index) + setModal(true) + }} + alt={image.alt} + height={image.thumbHeight} + effect="blur" + className="post-gallery__image" + wrapperClassName="post-gallery__image-wrapper" + src={image.thumbnail} + width={image.thumbWidth} + /> + )) + + const navigateToImage = event => { + window.open(`/photography/${event.currentTarget.alt}`, "_blank") + window.focus() + } + + const blogContent = () => { + const imageScr = mappedImages[0].src + + return ( +
+
+
+

{post.frontmatter.title}

+

+ {post.frontmatter.date} +

+
+
+
+ +
+ ) + } + + const tourContent = () => ( + <> +
+
+
+

{post.frontmatter.title}

+

+ {post.frontmatter.date} +

+
+
+ {country && ( +
+ country + {country.join(", ")} +
+
+ )} + {mountainRange && ( +
+ mountainRange + {mountainRange.join(", ")} +
+
+ )} + {highestMountain && ( +
+ highestMountain + + {highestMountain} + {wiki && ( + + + + )} + +
+
+ )} + {mnpm && ( +
+ highestPoint + {mnpm} mnpm +
+
+ )} + {mountains && ( +
+ visitedAlso + {mountains.join(", ")} +
+
+ )} +
+ + route + + + {mapaTurystyczna || map} + {` `} + +
+
+ {startingPoint && ( +
+ startingPoint - finishPoint + + {startingPoint} - {finishPoint ? finishPoint : startingPoint} + +
+
+ )} + {parkingCords && ( +
+ + parkingCoords{" "} + + + + {parkingCords} + {` `} + +
+
+ )} + {distance && ( +
+ distance + {distance} km +
+
+ )} + {startTime && endTime && ( +
+ startTime - endTime + + {startTime} - {endTime} + +
+
+ )} + {(asphalt || asphalt === 0) && ( +
+ howMuchAsphalt + + {times(asphalt, () => ( + + ))} + {times(5 - asphalt, () => ( + + ))} + +
+
+ )} +
+ difficulty + + {times(difficulty, () => ( + + ))} + {times(5 - difficulty, () => ( + + ))} + +
+
+
+ +
+
+
+ created at {creationDate} +
+
+
+ {mappedImagesAsComponents} +
+
+
+ + {modal ? ( + setModal(false)}> + ({ + ...base, + + "& > img": { + display: "inline-block", + marginBottom: "20px", + marginTop: "20px", + }, + }), + }} + /> + + ) : null} + + + ) + + return ( + + + + {type === "tour" ? tourContent() : blogContent()} + + ) +} + +export default BlogPostTemplate + +export const pageQuery = graphql` + query BlogPostBySlug($slug: String!) { + site { + siteMetadata { + title + } + } + markdownRemark(fields: { slug: { eq: $slug } }) { + id + excerpt(pruneLength: 160) + html + frontmatter { + title + date(formatString: "MMMM DD, YYYY") + type + asphalt + country + difficulty + distance + highestMountain + endTime + ferns + finishPoint + map + mapaTurystyczna + mnpm + mountainRange + mountains + parkingCords + startTime + startingPoint + type + wiki + creationDate(formatString: "MMMM DD, YYYY") + } + } + allCloudinaryMedia( + filter: { public_id: { regex: $slug } } + sort: { fields: created_at } + ) { + edges { + node { + public_id + height + width + id + } + } + } + } +`