Skip to content

Commit 11eab17

Browse files
cattermocattermo
committed
More design
1 parent b7d7e0a commit 11eab17

10 files changed

+76
-298
lines changed

‎_layouts/default.html

+45-19
Original file line numberDiff line numberDiff line change
@@ -26,24 +26,48 @@
2626
</head>
2727

2828
<body>
29+
<!--
30+
<img class="fyr_snowflake" alt="" src="images/snowflakes4.svg" />
31+
<img class="fyr_snowflake" alt="" src="images/snowflakes4.svg" />
32+
<img class="fyr_snowflake" alt="" src="images/snowflakes4.svg" />
33+
<img class="fyr_snowflake" alt="" src="images/snowflakes4.svg" />
34+
<img class="fyr_snowflake" alt="" src="images/snowflakes4.svg" />
35+
<img class="fyr_snowflake" alt="" src="images/snowflakes4.svg" />
36+
<img class="fyr_snowflake" alt="" src="images/snowflakes4.svg" />
37+
<img class="fyr_snowflake" alt="" src="images/snowflakes4.svg" />
38+
<img class="fyr_snowflake" alt="" src="images/snowflakes4.svg" />
39+
<img class="fyr_snowflake" alt="" src="images/snowflakes4.svg" />
40+
<img class="fyr_snowflake" alt="" src="images/snowflakes4.svg" />
41+
<img class="fyr_snowflake" alt="" src="images/snowflakes4.svg" />
42+
<img class="fyr_snowflake" alt="" src="images/snowflakes4.svg" />
43+
<img class="fyr_snowflake" alt="" src="images/snowflakes4.svg" />
44+
<img class="fyr_snowflake" alt="" src="images/snowflakes4.svg" />
45+
<img class="fyr_snowflake" alt="" src="images/snowflakes4.svg" />
46+
<img class="fyr_snowflake" alt="" src="images/snowflakes4.svg" />
47+
<img class="fyr_snowflake" alt="" src="images/snowflakes4.svg" />
48+
<img class="fyr_snowflake" alt="" src="images/snowflakes4.svg" />
49+
<img class="fyr_snowflake" alt="" src="images/snowflakes4.svg" />
50+
<img class="fyr_snowflake" alt="" src="images/snowflakes4.svg" />
51+
<img class="fyr_snowflake" alt="" src="images/snowflakes4.svg" />
52+
<img class="fyr_snowflake" alt="" src="images/snowflakes4.svg" />
53+
<img class="fyr_snowflake" alt="" src="images/snowflakes4.svg" />
54+
<img class="fyr_snowflake" alt="" src="images/snowflakes4.svg" />
55+
<img class="fyr_snowflake" alt="" src="images/snowflakes4.svg" />
56+
<img class="fyr_snowflake" alt="" src="images/snowflakes4.svg" />
57+
<img class="fyr_snowflake" alt="" src="images/snowflakes4.svg" />
58+
<img class="fyr_snowflake" alt="" src="images/snowflakes4.svg" />
59+
<img class="fyr_snowflake" alt="" src="images/snowflakes4.svg" />
60+
<img class="fyr_snowflake" alt="" src="images/snowflakes4.svg" />
61+
<img class="fyr_snowflake" alt="" src="images/snowflakes4.svg" />
62+
<img class="fyr_snowflake" alt="" src="images/snowflakes4.svg" />
63+
-->
2964
<div class="fyr_main-container">
30-
<div class="fyr_sheet{% if page.url == '/index.html'%} fyr_sheet--animate{% endif %}">
31-
<span class="fyr_sheet__lines">
32-
<span class="fyr_sheet__notes-wrapper">
33-
<span class="fyr_sheet__note fyr_sheet__note--1"></span>
34-
<span class="fyr_sheet__note fyr_sheet__note--2"></span>
35-
<span class="fyr_sheet__note fyr_sheet__note--3"></span>
36-
<span class="fyr_sheet__note fyr_sheet__note--4"></span>
37-
<span class="fyr_sheet__note fyr_sheet__note--5"></span>
38-
<span class="fyr_sheet__note fyr_sheet__note--6"></span>
39-
<span class="fyr_sheet__note fyr_sheet__note--7"></span>
40-
<span class="fyr_sheet__note fyr_sheet__note--8"></span>
41-
<span class="fyr_sheet__note fyr_sheet__note--9"></span>
42-
<span class="fyr_sheet__note fyr_sheet__note--10"></span>
43-
<span class="fyr_sheet__note fyr_sheet__note--11"></span>
44-
<span class="fyr_sheet__note fyr_sheet__note--12"></span>
45-
</span>
46-
</span>
65+
<div class="fyr_keys{% if page.url == '/index.html'%} fyr_keys--animate{% endif %}">
66+
<span class="fyr_keys__key fyr_keys__key--1">
67+
</span><span class="fyr_keys__key fyr_keys__key--2">
68+
</span><span class="fyr_keys__key fyr_keys__key--3">
69+
</span><span class="fyr_keys__key fyr_keys__key--4">
70+
</span><span class="fyr_keys__key fyr_keys__key--5"></span>
4771
</div>
4872
<!-- <img class="fyr_masterhead__img" src="/images/anna.jpg" /> -->
4973

@@ -65,9 +89,11 @@ <h1 class="fyr_header__name"><a href="{{ site.baseurl }}/">Anna <br/>Cederberg-O
6589
</div>
6690
</div>
6791
<footer class="fyr_footer">
68-
<div class="fyr_sheet">
69-
<span class="fyr_sheet__lines"></span>
92+
<!--
93+
<div>
94+
Icons made by <a href="http://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> from <a href="http://www.flaticon.com" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0">CC BY 3.0</a>
7095
</div>
96+
-->
7197
</footer>
7298
<div class="fyr_cover"></div>
7399
{% include analytics.html %}

‎_scss/_all-styles.scss

+4-2
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,16 @@
22
@import "base/_i-variables";
33
@import "base/_i-breakpoints";
44
@import "helpers/_i-mediaqueries";
5+
@import "helpers/_i-feature-mixins";
6+
@import "base/_i-typography";
57
@import "base/_reset";
68
@import "base/_base";
7-
@import "base/_i-typography";
89
@import "features/_main-container";
910
@import "features/_container";
1011
@import "features/header";
1112
@import "features/profile-picture";
1213
@import "features/_menu";
1314
@import "features/_footer";
1415
@import "features/_cover";
15-
@import "features/_sheet";
16+
@import "features/_keys";
17+
@import "features/_snowflake";

‎_scss/base/_base.scss

+14-7
Original file line numberDiff line numberDiff line change
@@ -12,19 +12,25 @@ html, body {
1212
}
1313

1414
html {
15-
background-color: $fyr_color-lighter-blue;
15+
background-color: $fyr_color-darker-green;
1616

1717

1818
@include fyr_mq-gte-small {
19-
background-image: -webkit-linear-gradient(left, $fyr_color-lighter-blue 17em, $fyr_color-white 17em);
20-
}
19+
background-image: -webkit-linear-gradient(left, $fyr_color-darker-green $fyr_left-column-xsmall, $fyr_color-white $fyr_left-column-xsmall);
20+
background-image: -o-linear-gradient(left, $fyr_color-darker-green $fyr_left-column-xsmall, $fyr_color-white $fyr_left-column-xsmall);
21+
background-image: linear-gradient(to right, $fyr_color-darker-green $fyr_left-column-xsmall, $fyr_color-white $fyr_left-column-xsmall);
22+
}
2123

2224
@include fyr_mq-gte-medium {
23-
background-image: -webkit-linear-gradient(left, $fyr_color-lighter-blue 21em, $fyr_color-white 21em);
25+
background-image: -webkit-linear-gradient(left, $fyr_color-darker-green $fyr_left-column-small, $fyr_color-white $fyr_left-column-small);
26+
background-image: -o-linear-gradient(left, $fyr_color-darker-green $fyr_left-column-small, $fyr_color-white $fyr_left-column-small);
27+
background-image: linear-gradient(to right, $fyr_color-darker-green $fyr_left-column-small, $fyr_color-white $fyr_left-column-small);
2428
}
2529

2630
@include fyr_mq-gte-xlarge {
27-
background-image: -webkit-linear-gradient(left, $fyr_color-lighter-blue 23.5em, $fyr_color-white 23.5em);
31+
background-image: -webkit-linear-gradient(left, $fyr_color-darker-green $fyr_left-column-medium, $fyr_color-white $fyr_left-column-medium);
32+
background-image: -o-linear-gradient(left, $fyr_color-darker-green $fyr_left-column-medium, $fyr_color-white $fyr_left-column-medium);
33+
background-image: linear-gradient(to right, $fyr_color-darker-green $fyr_left-column-medium, $fyr_color-white $fyr_left-column-medium);
2834
}
2935

3036
//background-color: $fyr_color-light-brown;
@@ -33,13 +39,14 @@ html {
3339
}
3440

3541
body {
36-
@extend %fyr_text-body;
42+
@include fyr_text-body;
3743
//background: rgb(196, 219, 147);
3844
color: $fyr_color-text;
45+
overflow: hidden;
3946
}
4047

4148
h1 {
42-
@extend %fyr_text-h1;
49+
@include fyr_text-h1;
4350
a {
4451
color: inherit;
4552
}

‎_scss/base/_i-typography.scss

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1-
%fyr_text-body {
1+
@mixin fyr_text-body {
22
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
33
@include font-size(12);
44
line-height: 1.4;
55
}
66

7-
%fyr_text-h1 {
7+
@mixin fyr_text-h1 {
8+
font-family: "Optima", "Calibri","Candara", sans-serif;
89
@include font-size(17);
910
line-height: 1.2;
1011

@@ -13,7 +14,7 @@
1314
}
1415
}
1516

16-
%fyr_text-h2 {
17+
@mixin fyr_text-h2 {
1718
@include font-size(15);
1819
line-height: 1.2;
1920

‎_scss/base/_i-variables.scss

+7-2
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,23 @@
44
//
55
$fyr_font-base-size: 16 !default;
66
$fyr_footer-height: 150px;
7+
$fyr_left-column-xsmall: 270px;
8+
$fyr_left-column-small: 330px;
9+
$fyr_left-column-medium: 370px;
710

811
// Colors
912
$fyr_color-blue: #b3c5e8;
1013
$fyr_color-darker-blue: darken($fyr_color-blue, 20%);
1114
$fyr_color-lighter-blue: lighten($fyr_color-blue, 10%);
15+
$fyr_color-darker-green: rgba(196, 219, 147, 0.5);
16+
$fyr_color-green: #C4DB93;
17+
$fyr_color-sheet: #000000;
18+
$fyr_color-sheet-note: #000000;
1219
$fyr_color-text: #222222;
1320
$fyr_color-black: #000000;
1421
$fyr_color-white: #ffffff;
1522
$fyr_color-light-brown: #f5f2ec;
1623
$fyr_color-green: #C4DB93;
17-
$fyr_color-sheet: #000000;
18-
$fyr_color-sheet-note: $fyr_color-text;
1924

2025
// Grays
2126
$black: #000;

‎_scss/features/_container.scss

-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ $_left-column-width: 14em;
1313
$_left-column-width-medium: 17em;
1414

1515
.fyr_container__left {
16-
//background-color: rgba(196, 219, 147, 0.5);
1716
border-radius: 1em;
1817

1918
@include fyr_mq-gte-small {

‎_scss/features/_header.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
}
44

55
.fyr_header__name {
6-
@extend %fyr_text-h1;
6+
@include fyr_text-h1;
77
float: left;
88
width: 54%;
99

‎_scss/features/_menu.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.fyr_menu {
2-
@extend %fyr_text-body;
2+
@include fyr_text-body;
33
margin-top: 1em;
44
}
55

0 commit comments

Comments
 (0)