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

First spring clean, use nth for odd even and removed before

Browse source
This commit is contained in:
Kasper Friis Christensen 2018-01-22 15:26:31 +01:00
parent 17315befd8
commit 38e1fc2ddd
2 changed files with 34 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
_scss/base/_variables.scss
View file

@ -2,6 +2,12 @@
$body-bg: #2A2A2A; $body-bg: #2A2A2A;
$alternate-bg: #ff5800; $alternate-bg: #ff5800;
$color-mine-shaft: #2A2A2A;
$color-international-orange: #ff5800;
$background-primary: $color-mine-shaft;
$background-alternative: $color-international-orange;
/* Size */ /* Size */
$screen-xs: 600px !default; $screen-xs: 600px !default;
$screen-xs-min: $screen-xs !default; $screen-xs-min: $screen-xs !default;

40
_scss/module/_indexpage.scss
View file

@ -1,33 +1,37 @@
section { section {
min-height: 100vh; min-height: 100vh;
width: 100%; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
position: relative;
background: $body-bg; background-color: $background-primary;
/*&:not(:first-child):before*/ &:before { background-image: linear-gradient(
content: ""; to left bottom,
width: 100%; $background-primary 50%,
height: 30px; $background-alternative 50%
position: absolute; );
top: -30px; background-size: 100% 60px;
right: 0; background-repeat: no-repeat;
background: linear-gradient(to left bottom, $alternate-bg 0%,$alternate-bg 49%,$body-bg 50%,$body-bg 100%); background-position: bottom;
background: linear-gradient(to left bottom, transparent 0%,transparent 49%,$body-bg 50%,$body-bg 100%);
&:nth-of-type(even) {
background-color: $background-alternative;
background-image: linear-gradient(
to left bottom,
$background-alternative 50%,
$background-primary 50%
);
} }
&.even { &:last-of-type {
background: $alternate-bg; background-image: none;
&:before {
background: linear-gradient(to left bottom, $body-bg 0%,$body-bg 49%,$alternate-bg 50%,$alternate-bg 100%);
background: linear-gradient(to left bottom, transparent 0%,transparent 49%,$alternate-bg 50%,$alternate-bg 100%);
} }
} }
section {
.paragraphs { .paragraphs {
column-count: 2; column-count: 2;
margin: 1rem 1rem 200px;
h3, p { h3, p {
max-width: 300px; max-width: 300px;
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;