Skip to content

Commit 81dede2

Browse files
mityalebedevmityalebedev
committed
Add navigation and update general styles
1 parent acf230c commit 81dede2

11 files changed

Lines changed: 179 additions & 815 deletions

File tree

‎assets/css/screen.css‎

100644100755
Lines changed: 2 additions & 769 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/scss/screen.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
@import url(normalize.css);
21
@import "theme/colors";
32
@import "theme/icons";
43
@import "theme/general";
4+
@import "theme/site-nav";
55
@import "theme/utilites";
66
@import "theme/theme";
77
@import "theme/post";
88
@import "theme/third-party";
99
@import "theme/pagination";
1010
@import "theme/footer";
1111
@import "theme/media";
12+
@import "theme/koenig";

‎assets/scss/theme/footer.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
a {
1616
color: #BBC7CC;
1717
text-decoration: underline;
18-
&::hover {
18+
&:hover {
1919
color: #50585D;
2020
}
2121
}
@@ -100,4 +100,4 @@
100100
z-index: 220;
101101
width:0;
102102
}
103-
}
103+
}

‎assets/scss/theme/general.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ body {
2727
%heading {
2828
text-rendering: optimizeLegibility;
2929
line-height: 1;
30-
margin-top: 0;
30+
margin-top: 20px;
3131
letter-spacing: 2px;
3232
font-weight: normal;
3333
}
@@ -195,8 +195,8 @@ kbd {
195195
font-weight: bold;
196196
background: #f4f4f4;
197197
border-radius: 4px;
198-
box-shadow:
199-
0 1px 0 rgba(0, 0, 0, 0.2),
198+
box-shadow:
199+
0 1px 0 rgba(0, 0, 0, 0.2),
200200
0 1px 0 0 #fff inset;
201201
}
202202

@@ -252,4 +252,4 @@ button, input, select, textarea {
252252
color: $text;
253253
outline-color: $contessa
254254

255-
}
255+
}

‎assets/scss/theme/koenig.scss‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
/* 7.6. Koenig Styles
2+
/* ---------------------------------------------------------- */
3+
4+
.post-content {
5+
display: flex;
6+
flex-direction: column;
7+
align-items: center;
8+
max-width: 920px;
9+
}
10+
11+
.post-template .post-content > p:first-child {
12+
font-size: 1.25em;
13+
line-height: 1.5em;
14+
}
15+
16+
.post-full-content .kg-image {
17+
max-width: 100%;
18+
}
19+
20+
/* Preventing full-width image overlap with post image. */
21+
.post-full-image + .post-full-content .kg-content *:first-child .kg-image {
22+
width: 100%;
23+
}
24+
25+
.post-full-content .kg-width-wide .kg-image {
26+
max-width: 1040px;
27+
}
28+
29+
.post-full-content .kg-width-full .kg-image {
30+
max-width: 100vw;
31+
}
32+
33+
.post-full-content figure {
34+
margin: 1.5em 0 3em;
35+
}
36+
37+
.post-full-content figure img {
38+
margin: 0;
39+
}
40+
41+
.post-full-content figcaption {
42+
margin: 1.0em 0 0;
43+
font-size: 80%;
44+
line-height: 1.6em;
45+
text-align: center;
46+
}
47+
48+
.kg-width-full figcaption {
49+
padding: 0 1.5em;
50+
}
51+
52+
.kg-embed-card {
53+
display: flex;
54+
flex-direction: column;
55+
align-items: center;
56+
min-width: 100%;
57+
}
58+
59+
.kg-embed-card .fluid-width-video-wrapper {
60+
margin: 0;
61+
}
62+
63+
64+
@media (max-width: 1040px) {
65+
.post-full-content .kg-width-full .kg-image {
66+
width: 100vw;
67+
}
68+
}
69+
70+
.kg-gallery-container {
71+
display: flex;
72+
flex-direction: column;
73+
max-width: 1040px;
74+
width: 100vw;
75+
}
76+
77+
.kg-gallery-row {
78+
display: flex;
79+
flex-direction: row;
80+
justify-content: center;
81+
}
82+
83+
.kg-gallery-image img {
84+
display: block;
85+
margin: 0;
86+
width: 100%;
87+
height: 100%;
88+
}
89+
90+
.kg-gallery-row:not(:first-of-type) {
91+
margin: 0.75em 0 0 0;
92+
}
93+
94+
.kg-gallery-image:not(:first-of-type) {
95+
margin: 0 0 0 0.75em;
96+
}
97+
98+
.kg-gallery-card + .kg-image-card.kg-width-wide,
99+
.kg-gallery-card + .kg-gallery-card,
100+
.kg-image-card.kg-width-wide + .kg-gallery-card,
101+
.kg-image-card.kg-width-wide + .kg-image-card.kg-width-wide {
102+
margin: -2.25em 0 3em;
103+
}

‎assets/scss/theme/pagination.scss‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,10 @@
1414
text-align: center;
1515
a {
1616
color: #9EABB3;
17+
&:hover {
18+
color: lighten(#9EABB3, 5%);
19+
transition: all ease 800ms;
20+
}
1721
}
1822
}
1923

@@ -46,4 +50,4 @@
4650
.older-posts:hover,
4751
.newer-posts:hover {
4852
border-color: #9EABB3;
49-
}
53+
}

‎assets/scss/theme/site-nav.scss‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
.site-nav {
2+
ul {
3+
padding: 0;
4+
5+
li {
6+
display: inline-block;
7+
list-style: none;
8+
}
9+
}
10+
11+
.post-header & {
12+
text-align: center;
13+
}
14+
}

‎assets/scss/theme/theme.scss‎

Lines changed: 32 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -13,37 +13,35 @@
1313
background-size: cover;
1414
}
1515

16-
#blog {
16+
#blog {
1717
&-logo {
1818
width: 100px;
1919
border-radius: 50%;
2020
overflow: hidden;
2121
display: block;
2222
margin: 0 auto;
23-
border: 5px solid $contessa;
24-
&:before {
23+
&:before {
2524
width: 100px;
2625
height: 100px;
2726
border-radius: 50%;
2827
overflow: hidden;
2928
display: block;
3029
margin: 0 auto;
31-
content: "";
32-
display: block;
33-
position: absolute;
34-
top: 0;
35-
bottom: 0;
36-
left: 0;
37-
right: 0;
38-
background: none;
39-
-moz-transition: background .3s linear;
40-
-webkit-transition: background .3s linear;
41-
-o-transition: background .3s linear;
42-
transition: background .3s linear;
43-
border: 5px solid $contessa;
30+
content: "";
31+
display: block;
32+
position: absolute;
33+
top: 0;
34+
bottom: 0;
35+
left: 0;
36+
right: 0;
37+
background: none;
38+
-moz-transition: background .3s linear;
39+
-webkit-transition: background .3s linear;
40+
-o-transition: background .3s linear;
41+
transition: background .3s linear;
4442
}
4543
&:hover:before {
46-
background: rgba(204,31,39, 0.5);
44+
background: rgba(204,31,39, 0.5);
4745
}
4846
img {
4947
display: block;
@@ -89,10 +87,14 @@
8987
word-break: break-word;
9088
hyphens: auto;
9189
&-title {
92-
margin:0;
9390
color: $heading;
91+
margin:0;
9492
a {
93+
color: $heading !important;
9594
text-decoration: none;
95+
&:hover {
96+
color: lighten($heading, 20%) !important;
97+
}
9698
}
9799
}
98100
&-excerpt p {
@@ -111,6 +113,17 @@
111113
text-decoration: none;
112114
&:hover {
113115
text-decoration: underline;
116+
color: lighten(#846d8f, 10%);
117+
}
118+
}
119+
120+
&-header {
121+
a {
122+
color: $contessa;
123+
transition: color ease 0.3s;
124+
&:hover {
125+
color: $selection-background-and-link-hover;
126+
}
114127
}
115128
}
116129
}
@@ -156,4 +169,4 @@
156169
font-size: 1.4rem;
157170
line-height: 1.5em;
158171
}
159-
}
172+
}

‎index.hbs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
{{#if @blog.logo}}<a id="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="Blog Logo" /></a>{{/if}}
1212
<h1 class="blog-title">{{@blog.title}}</h1>
1313
<h2 class="blog-description">{{@blog.description}}</h2>
14+
{{> "site-nav"}}
1415
</div>
1516
</div>
1617
</header>

‎partials/site-nav.hbs‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<nav class="site-nav">
2+
<div class="site-nav-left">
3+
{{#if @blog.navigation}}
4+
{{navigation}}
5+
{{/if}}
6+
</div>
7+
</nav>

0 commit comments

Comments
 (0)