graffen/ulovliglogning.dk
1
0
Fork 0
forked from ulovliglogning/ulovliglogning.dk
Code Issues Pull requests Releases Wiki Activity

Updated style, no mobile and faq style

Browse source
This commit is contained in:
Kasper Friis Christensen 2018-01-24 23:24:26 +01:00
parent 57b669c73d
commit f167346d63
3 changed files with 44 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
_layouts/indexpage.html
View file

@ -3,9 +3,11 @@ layout: default
---
{% for section in page.sections %}
<section id="{{ section.id }}" class="{% cycle 'odd', 'even' %}">
<h1>{{ section.heading }}</h1>
<div class="paragraphs">
{{ section.content | markdownify }}
<div class="content">
<h1>{{ section.heading }}</h1>
<div class="paragraphs">
{{ section.content | markdownify }}
</div>
</div>
</section>
{% endfor %}

17
_scss/base/_typography.scss
View file

@ -16,20 +16,20 @@ h3, h4, h5, h6 {
h1 {
font-size: 3rem;
text-shadow: 4px 3px 0px rgb(90, 85, 81);
margin: 0 0 3rem;
//text-shadow: 4px 3px 0px rgb(90, 85, 81);
//margin: 0 0 3rem;
display: block;
//width: 90vw;
.even & {
text-shadow: 4px 3px 0px rgba(0,0,0,0.15);
//text-shadow: 4px 3px 0px rgba(0,0,0,0.15);
}
@media screen and (max-width: $screen-phone) {
& {
font-size: 2.5rem;
text-shadow: 3px 2px 0px rgb(90, 85, 81);
//text-shadow: 3px 2px 0px rgb(90, 85, 81);
}
.even & {
text-shadow: 3px 2px 0px rgba(0,0,0,0.15);
//text-shadow: 3px 2px 0px rgba(0,0,0,0.15);
}
}
}
@ -51,9 +51,10 @@ p {
a {
color: #FFF;
text-decoration: none;
box-shadow: 0 2px 0 #ff5800;
text-decoration: underline;
font-weight: bold;
//box-shadow: 0 2px 0 #ff5800;
.even & {
box-shadow: 0 2px 0 #FFF;
//box-shadow: 0 2px 0 #FFF;
}
}

53
_scss/module/_indexpage.scss
View file

@ -2,9 +2,10 @@ section {
min-height: 100vh;
position: relative;
display: flex;
flex-direction: column;
//flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
background-color: $background-primary;
background-image: linear-gradient(
@ -28,33 +29,39 @@ section {
background-image: none;
}
.content {
display: flex;
align-items: flex-start;
}
h1 {
width: 22rem;
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
text-align: right;
align-items: baseline;
flex-direction:column;
.even & {
color: $color-international-orange;
}
}
.paragraphs {
column-count: 2;
column-gap: 2rem;
//text-justify: none;
word-break: break-word;
padding-left: 3rem;
}
p {
max-width: 40rem;
}
}
section {
.paragraphs {
margin-bottom: 3rem;
h3, p {
max-width: 300px;
}
p + h3 {
margin-top: 50px;
}
@media screen and (max-width: $screen-phone) {
& {
column-count: unset;
}
}
}
/*section {
&#faq {
.paragraphs {
column-count: unset;
//column-count: unset;
}
ul {
list-style-type: none;
@ -72,4 +79,4 @@ section {
}
}
}
}
}*/