forked from ulovliglogning/ulovliglogning.dk
Merge branch 'feature/design-update' of git.data.coop:ulovliglogning/ulovliglogning.dk into feature/design-update
This commit is contained in:
Jeppe Ernst
commit
41e60eaed7
|
|
@ -43,3 +43,6 @@ sass:
|
|||
plugins:
|
||||
- jekyll-polyglot
|
||||
- jekyll-autoprefixer
|
||||
|
||||
autoprefixer:
|
||||
only_production: true
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
125
_scss/base/mixins/_breakpoints.scss
Normal file
125
_scss/base/mixins/_breakpoints.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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,11 +17,11 @@ section {
|
|||
height: 2rem;
|
||||
text-align: center;
|
||||
font-size: 1rem;
|
||||
}
|
||||
input[type="text"] {
|
||||
|
||||
}
|
||||
input[type="submit"] {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
cursor: pointer;
|
||||
color: #FFF;
|
||||
background: darken($background-alternative, 20);
|
||||
|
|
@ -85,10 +30,9 @@ section {
|
|||
}
|
||||
|
||||
section {
|
||||
|
||||
&#intro {
|
||||
h1 {
|
||||
margin: 8rem 0 3rem;
|
||||
//margin: 8rem 0 3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
71
_scss/module/_sections.scss
Normal file
71
_scss/module/_sections.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -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";
|
||||
Loading…
Reference in a new issue