From 185762b88cb4558348ec3b557655f7215a6bebc3 Mon Sep 17 00:00:00 2001 From: Jeppe Ernst Date: Fri, 26 Jan 2018 07:29:52 +0100 Subject: [PATCH 1/3] remove mobile safari styling on submit button --- _scss/module/_indexpage.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/_scss/module/_indexpage.scss b/_scss/module/_indexpage.scss index b80bfd9..14d565c 100644 --- a/_scss/module/_indexpage.scss +++ b/_scss/module/_indexpage.scss @@ -55,6 +55,9 @@ section { } input[type="submit"] { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; cursor: pointer; color: #FFF; background: darken($background-alternative, 20); From 59f4353706dc9ac3c64ff653b0dbce23f1f927cf Mon Sep 17 00:00:00 2001 From: Kasper Friis Christensen Date: Fri, 26 Jan 2018 15:52:13 +0100 Subject: [PATCH 2/3] Only prefix on compile --- _config.yml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/_config.yml b/_config.yml index 6c06d86..299dde5 100644 --- a/_config.yml +++ b/_config.yml @@ -43,3 +43,6 @@ sass: plugins: - jekyll-polyglot - jekyll-autoprefixer + +autoprefixer: + only_production: true From 8219074e6fb545af79d3ff16d9d88878800ff136 Mon Sep 17 00:00:00 2001 From: Kasper Friis Christensen Date: Fri, 26 Jan 2018 15:52:53 +0100 Subject: [PATCH 3/3] Responsive optimization --- _scss/base/_typography.scss | 37 +++++--- _scss/base/_variables.scss | 16 ++++ _scss/base/mixins/_breakpoints.scss | 125 ++++++++++++++++++++++++++++ _scss/module/_indexpage.scss | 61 +------------- _scss/module/_qa.scss | 68 ++++++++++----- _scss/module/_sections.scss | 71 ++++++++++++++++ assets/style/main.scss | 4 +- 7 files changed, 291 insertions(+), 91 deletions(-) create mode 100644 _scss/base/mixins/_breakpoints.scss create mode 100644 _scss/module/_sections.scss diff --git a/_scss/base/_typography.scss b/_scss/base/_typography.scss index e792f07..84359bb 100644 --- a/_scss/base/_typography.scss +++ b/_scss/base/_typography.scss @@ -11,27 +11,44 @@ h1, h2, h3 { } h1 { - font-size: 2.7rem; - line-height: 3.3rem; + font-size: 2.5rem; + line-height: 2.7rem; display: block; - @media screen and (max-width: $screen-phone) { - & { - font-size: 2.5rem; - } + margin-bottom: 2rem; + + @include media-breakpoint-up(sm) { + font-size: 2.7rem; + line-height: 3.3rem; + margin-bottom: 0; } } h3 { color: #ff5800; - font-size: 1.5rem; - line-height: 2rem; + font-size: 1.3rem; + line-height: 1.6rem; + + @include media-breakpoint-up(sm) { + font-size: 1.6rem; + line-height: 1.9rem; + } } p { - margin: 0 1rem 2rem; + margin: 0 0 2rem; font-size: 1rem; line-height: 1.5rem; - break-inside: avoid; + break-inside: avoid; + + @include media-breakpoint-up(sm) { + font-size: 1.2rem; + line-height: 1.6rem; + } + + @include media-breakpoint-up(xl) { + font-size: 1rem; + line-height: 1.4rem; + } } a { diff --git a/_scss/base/_variables.scss b/_scss/base/_variables.scss index 5927b67..b2c4a8b 100644 --- a/_scss/base/_variables.scss +++ b/_scss/base/_variables.scss @@ -13,3 +13,19 @@ $screen-xs: 600px !default; $screen-xs-min: $screen-xs !default; $screen-phone: $screen-xs-min !default; +$screen-sm: 960px !default; +$screen-sm-min: $screen-sm !default; +$screen-tablet: $screen-sm-min !default; + +$screen-md: 1280px !default; +$screen-md-min: $screen-md !default; +$screen-tablet: $screen-md-min !default; + +$grid-breakpoints: ( + xs: 0, + sm: 576px, + md: 768px, + lg: 992px, + xl: 1200px +) !default; + diff --git a/_scss/base/mixins/_breakpoints.scss b/_scss/base/mixins/_breakpoints.scss new file mode 100644 index 0000000..efa737f --- /dev/null +++ b/_scss/base/mixins/_breakpoints.scss @@ -0,0 +1,125 @@ +// https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints + +// 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 < 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) - .02px, null); +} + +// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront. +// 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/_scss/module/_indexpage.scss b/_scss/module/_indexpage.scss index b6576f0..b37f981 100644 --- a/_scss/module/_indexpage.scss +++ b/_scss/module/_indexpage.scss @@ -1,57 +1,3 @@ -section { - min-height: 100vh; - position: relative; - display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: center; - box-sizing: border-box; - padding: 4rem 0; - - background-color: $background-primary; - background-image: linear-gradient( - to left bottom, - $background-primary 49%, - $background-alternative 50% - ); - background-size: 100% 30px; - background-repeat: no-repeat; - background-position: bottom; - - &:nth-of-type(even) { - background-color: $background-alternative; - background-image: linear-gradient( - to left bottom, - $background-alternative 49%, - $background-primary 50% - ); - } - &:last-of-type { - background-image: none; - } - - .content { - display: flex; - align-items: flex-start; - } - - h1 { - width: 22rem; - word-break: break-word; - hyphens: auto; - text-align: right; - align-items: baseline; - flex-direction:column; - } - - .paragraphs { - padding-left: 3rem; - } - p { - max-width: 40rem; - } -} - .cta{display:none;} @media screen and (min-width: 1200px) and (orientation:landscape){ #intro{position:relative;} @@ -60,7 +6,6 @@ section { .ctaTxt{display:none;} } - .signup { input { display: block; @@ -72,9 +17,6 @@ section { height: 2rem; text-align: center; font-size: 1rem; - } - input[type="text"] { - } input[type="submit"] { cursor: pointer; @@ -85,10 +27,9 @@ section { } section { - &#intro { h1 { - margin: 8rem 0 3rem; + //margin: 8rem 0 3rem; } } } diff --git a/_scss/module/_qa.scss b/_scss/module/_qa.scss index db6ab7d..1b6db89 100644 --- a/_scss/module/_qa.scss +++ b/_scss/module/_qa.scss @@ -1,32 +1,60 @@ .qa { - display: flex; - align-items: flex-start; width: 100%; - justify-content: center; - padding: 2rem 0; - + padding: 2rem 1.5rem; + padding-left: 2rem; + padding-right: 2rem; + box-sizing: border-box; + &:first-of-type{ + padding-top: 0; + } + .qa--question, .qa--anwser { - flex-direction: column; box-sizing: border-box; } .qa--question { - max-width: 20rem; - width: 20rem; - background-image: url(/assets/img/question.svg); - background-position: bottom right; - background-repeat: no-repeat; - padding-bottom: 35px; - - h3 { - font-size: 1.3rem; - text-align: right; + padding-bottom: 1rem; + &:last-of-type { + padding-bottom: 0; } - - } - .qa--anwser { - padding-left: 25px; } + .qa--anwser { + p { + max-width: 100%; + &:last-of-type { + margin-bottom: 0; + } + } + } + + @include media-breakpoint-up(md) { + display: flex; + align-items: flex-start; + justify-content: center; + + .qa--question { + width: 22rem; + padding-bottom: 35px; + margin-right: 2rem; + background-image: url(/assets/img/question.svg); + background-position: bottom right; + background-repeat: no-repeat; + + h3 { + text-align: right; + } + } + + .qa--anwser { + max-width: 40rem; + p { + margin-bottom: 1em; + &:last-of-type { + margin-bottom: 0; + } + } + } + } } \ No newline at end of file diff --git a/_scss/module/_sections.scss b/_scss/module/_sections.scss new file mode 100644 index 0000000..e034bea --- /dev/null +++ b/_scss/module/_sections.scss @@ -0,0 +1,71 @@ +section { + position: relative; + padding-top: 3rem; + padding-bottom: 3rem; + box-sizing: border-box; + min-height: 100vh; + + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + + background-size: 100% 30px; + background-repeat: no-repeat; + background-position: bottom; + background-color: $background-primary; + background-image: linear-gradient( + to left bottom, + $background-primary 49%, + $background-alternative 50% + ); + &:nth-of-type(even) { + background-color: $background-alternative; + background-image: linear-gradient( + to left bottom, + $background-alternative 49%, + $background-primary 50% + ); + } + &:last-of-type { + background-image: none; + } + + .content { + box-sizing: border-box; + padding-left: 2rem; + padding-right: 2rem; + } + + h1 { + word-break: break-word; + hyphens: auto; + } + + p { + max-width: 40rem; + } + + @include media-breakpoint-up(sm) { + padding: 4rem 0; + + .content { + display: flex; + align-items: flex-start; + padding: 0 2rem; + } + + .paragraphs { + padding-left: 2rem; + } + + h1 { + width: 22rem; + text-align: right; + align-items: baseline; + flex-direction:column; + } + } +} + + diff --git a/assets/style/main.scss b/assets/style/main.scss index bdcf541..df9c420 100644 --- a/assets/style/main.scss +++ b/assets/style/main.scss @@ -3,6 +3,7 @@ // Import base styles @import "base/reset.scss"; @import "base/variables"; +@import "base/mixins/breakpoints"; @import "base/base.scss"; @import "base/typography.scss"; @@ -10,5 +11,6 @@ @import "module/fonts.scss"; @import "module/camera.scss"; @import "module/flags.scss"; +@import "module/qa.scss"; +@import "module/sections.scss"; @import "module/indexpage.scss"; -@import "module/qa.scss"; \ No newline at end of file