ulovliglogning/ulovliglogning.dk
5
1
Fork 3
Code Issues 9 Pull requests Releases Wiki Activity

Responsive optimization

Browse source
This commit is contained in:
Kasper Friis Christensen 2018-01-26 15:52:53 +01:00
parent 59f4353706
commit 8219074e6f
7 changed files with 291 additions and 91 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
_scss/base/_typography.scss
View file

@ -11,27 +11,44 @@ h1, h2, h3 {
}
h1 {
font-size: 2.5rem;
line-height: 2.7rem;
display: block;
margin-bottom: 2rem;
@include media-breakpoint-up(sm) {
font-size: 2.7rem;
line-height: 3.3rem;
display: block;
@media screen and (max-width: $screen-phone) {
& {
font-size: 2.5rem;
}
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;
@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 {

16
_scss/base/_variables.scss
View file

@ -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
View 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;
}
}
}

61
_scss/module/_indexpage.scss
View file

@ -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;
}
}
}

52
_scss/module/_qa.scss
View file

@ -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;
padding-bottom: 1rem;
&:last-of-type {
padding-bottom: 0;
}
}
.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;
padding-bottom: 35px;
h3 {
font-size: 1.3rem;
text-align: right;
}
}
.qa--anwser {
padding-left: 25px;
max-width: 40rem;
p {
margin-bottom: 1em;
&:last-of-type {
margin-bottom: 0;
}
}
}
}
}

71
_scss/module/_sections.scss Normal file
View 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;
}
}
}

4
assets/style/main.scss
View file

@ -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/indexpage.scss";
@import "module/qa.scss";
@import "module/sections.scss";
@import "module/indexpage.scss";