Updated style, no mobile and faq style

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

View file

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

View file

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

View file

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