krnr/ulovliglogning.dk
1
0
Fork 0
forked from ulovliglogning/ulovliglogning.dk
Code Issues 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;
$alternate-bg: #ff5800;
$color-mine-shaft: #2A2A2A;
$color-international-orange: #ff5800;
$background-primary: $color-mine-shaft;
$background-alternative: $color-international-orange;
/* Size */
$screen-xs: 600px !default;
$screen-xs-min: $screen-xs !default;

46
_scss/module/_indexpage.scss
View file

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