jekyll-theme-simple-blog 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +7 -0
- data/404.md +12 -0
- data/LICENSE +116 -0
- data/README.md +203 -0
- data/_includes/site-header.html +38 -0
- data/_includes/social-metatags.html +130 -0
- data/_layouts/default.html +136 -0
- data/_layouts/home.html +30 -0
- data/_layouts/page.html +10 -0
- data/_layouts/post.html +25 -0
- data/_sass/blog.scss +48 -0
- data/_sass/blog/_base.scss +30 -0
- data/_sass/blog/_layout.scss +142 -0
- data/_sass/jekyll-theme-simple-blog.scss +435 -0
- data/_sass/normalize.scss +424 -0
- data/_sass/rouge-github.scss +209 -0
- data/_sass/variables.scss +23 -0
- data/about.md +15 -0
- data/assets/css/style.scss +4 -0
- data/assets/patterns/asanoha-400px.png +0 -0
- data/assets/patterns/contemporary_china.png +0 -0
- data/assets/patterns/contemporary_china_2.png +0 -0
- data/assets/patterns/new_year_background.png +0 -0
- data/assets/patterns/paisley.png +0 -0
- data/assets/patterns/readme.txt +8 -0
- data/assets/patterns/sayagata-400px.png +0 -0
- data/assets/patterns/seigaiha.png +0 -0
- data/assets/patterns/swirl_pattern.png +0 -0
- data/assets/patterns/symphony.png +0 -0
- data/assets/patterns/upfeathers.png +0 -0
- data/assets/patterns/wov.png +0 -0
- data/contact.md +16 -0
- data/index.md +19 -0
- metadata +91 -0
@@ -0,0 +1,136 @@
|
|
1
|
+
<!DOCTYPE html>
|
2
|
+
<html lang="{{ page.lang | default: site.lang | default: "en" }}">
|
3
|
+
|
4
|
+
<head>
|
5
|
+
|
6
|
+
<!-- Non social metatags -->
|
7
|
+
<meta charset="utf-8">
|
8
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
9
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
10
|
+
<meta name="theme-color" content="#157878">
|
11
|
+
|
12
|
+
{% if page.title %}
|
13
|
+
{% assign page-title = page.title | escape %}
|
14
|
+
{% else %}
|
15
|
+
{% assign page-title = site.title | escape %}
|
16
|
+
{% endif %}
|
17
|
+
|
18
|
+
<title>{{ page-title }}</title>
|
19
|
+
|
20
|
+
{% if site.gems contains "jekyll-seo-tag" %}
|
21
|
+
<!-- jekyll-seo-tag -->
|
22
|
+
{% else %}
|
23
|
+
{% include social-metatags.html %}
|
24
|
+
{% endif %}
|
25
|
+
|
26
|
+
<link rel="canonical" href="{{ page.url | replace:'index.html','' | absolute_url }}">
|
27
|
+
|
28
|
+
{% if site.gems contains "jekyll-feed" %}
|
29
|
+
<link rel="alternate" type="application/rss+xml" title="{{ site.title | escape }}" href="{{ "/feed.xml" | relative_url }}">
|
30
|
+
{% endif %}
|
31
|
+
|
32
|
+
<link rel="shortcut icon" href="{{ site.url }}/favicon.ico">
|
33
|
+
<meta name="robots" content="noarchive">
|
34
|
+
|
35
|
+
<!-- <link rel="alternate" media="only screen and (max-width: 640px)" href="">
|
36
|
+
<link rel="alternate" media="handheld" href=""> -->
|
37
|
+
|
38
|
+
|
39
|
+
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
|
40
|
+
<link rel="stylesheet" href="{{ '/assets/css/style.css?v=' | append: site.github.build_revision | relative_url }}">
|
41
|
+
</head>
|
42
|
+
<body>
|
43
|
+
|
44
|
+
{% include site-header.html %}
|
45
|
+
|
46
|
+
{% if page.layout == 'home' %}
|
47
|
+
{% assign page-tagline = site.description | default: site.github.project_tagline | escape %}
|
48
|
+
{% endif %}
|
49
|
+
{% if page.layout == 'page' %}
|
50
|
+
{% assign page-tagline = page.tagline | escape %}
|
51
|
+
{% endif %}
|
52
|
+
{% if page.layout == 'post' %}
|
53
|
+
{% assign page-tagline = page.tagline | escape %}
|
54
|
+
{% endif %}
|
55
|
+
|
56
|
+
<section class="page-header" style="background: linear-gradient(0deg,rgba(0,0,0,0.5),rgba(0,0,0,0.1)), url('{{ site.baseurl }}{{ page.header.image | default: site.header.image }}') center center repeat;">
|
57
|
+
<h1 class="project-name">{{ page-title }}</h1>
|
58
|
+
<h2 class="project-tagline">{{ page-tagline }}</h2>
|
59
|
+
{% if page.layout == 'home' and site.github.is_project_page %}
|
60
|
+
<a href="{{ site.github.repository_url }}" class="btn">View on GitHub</a>
|
61
|
+
{% if site.show_downloads %}
|
62
|
+
<a href="{{ site.github.zip_url }}" class="btn">Download .zip</a>
|
63
|
+
<a href="{{ site.github.tar_url }}" class="btn">Download .tar.gz</a>
|
64
|
+
{% endif %}
|
65
|
+
{% endif %}
|
66
|
+
<!-- Post tagline -->
|
67
|
+
{% if page.layout == 'post' %}
|
68
|
+
<h2 class="project-date">
|
69
|
+
<time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
|
70
|
+
{% assign date_format = site.jekyll-theme-simple-blog.date_format | default: "%b %-d, %Y" %}
|
71
|
+
{{ page.date | date: date_format }}
|
72
|
+
</time>
|
73
|
+
{% assign page_author = page.author | default: site.author | default: nil | escape %}
|
74
|
+
{% if page_author %}
|
75
|
+
• <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">{{ page_author }}</span></span>
|
76
|
+
{% endif %}
|
77
|
+
</h2>
|
78
|
+
{% endif %}
|
79
|
+
<!-- End: Post tagline -->
|
80
|
+
</section>
|
81
|
+
|
82
|
+
<section class="main-content">
|
83
|
+
|
84
|
+
{{ content }}
|
85
|
+
|
86
|
+
<footer class="site-footer">
|
87
|
+
<!-- SVG icons from https://iconmonstr.com -->
|
88
|
+
|
89
|
+
<!-- Github icon -->
|
90
|
+
<span class="my-span-icon">
|
91
|
+
<a href="{{ site.github.owner_url }}" aria-label="{{ site.github.owner_name }}'s GitHub" title="{{ site.github.owner_name }}'s GitHub">
|
92
|
+
<svg class="my-svg-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
|
93
|
+
</a>
|
94
|
+
</span>
|
95
|
+
|
96
|
+
<!-- Twitter icon -->
|
97
|
+
<span class="my-span-icon">
|
98
|
+
<a href="https://twitter.com/{{ site.twitter.username }}" aria-label="{{ site.github.owner_name }}'s Twitter" title="{{ site.github.owner_name }}'s Twitter">
|
99
|
+
<svg class="my-svg-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.066 9.645c.183 4.04-2.83 8.544-8.164 8.544-1.622 0-3.131-.476-4.402-1.291 1.524.18 3.045-.244 4.252-1.189-1.256-.023-2.317-.854-2.684-1.995.451.086.895.061 1.298-.049-1.381-.278-2.335-1.522-2.304-2.853.388.215.83.344 1.301.359-1.279-.855-1.641-2.544-.889-3.835 1.416 1.738 3.533 2.881 5.92 3.001-.419-1.796.944-3.527 2.799-3.527.825 0 1.572.349 2.096.907.654-.128 1.27-.368 1.824-.697-.215.671-.67 1.233-1.263 1.589.581-.07 1.135-.224 1.649-.453-.384.578-.87 1.084-1.433 1.489z"/></svg>
|
100
|
+
</a>
|
101
|
+
</span>
|
102
|
+
|
103
|
+
<!-- RSS icon -->
|
104
|
+
{% if site.gems contains "jekyll-feed" %}
|
105
|
+
<span class="my-span-icon">
|
106
|
+
<a href="{{ "/feed.xml" | relative_url }}" aria-label="RSS feed" title="{{ site.github.owner_name }}'s RSS feed">
|
107
|
+
<svg class="my-svg-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-3.374 17c-.897 0-1.626-.727-1.626-1.624s.729-1.624 1.626-1.624 1.626.727 1.626 1.624-.729 1.624-1.626 1.624zm3.885 0c-.03-3.022-2.485-5.474-5.511-5.504v-2.406c4.361.03 7.889 3.555 7.92 7.91h-2.409zm4.081 0c-.016-5.297-4.303-9.571-9.592-9.594v-2.406c6.623.023 11.985 5.384 12 12h-2.408z"/></svg>
|
108
|
+
</a>
|
109
|
+
</span>
|
110
|
+
{% endif %}
|
111
|
+
<!-- Contact icon -->
|
112
|
+
{% assign about_page = site.pages | where: "path", "about.md" | first %}
|
113
|
+
{% if about_page.title %}
|
114
|
+
<span class="my-span-icon">
|
115
|
+
<a href="{{ about_page.url | relative_url }}" aria-label="Contact" title="Contact {{ site.github.owner_name }}">
|
116
|
+
<svg class="my-svg-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 .02c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.99 6.98l-6.99 5.666-6.991-5.666h13.981zm.01 10h-14v-8.505l7 5.673 7-5.672v8.504z"/></svg>
|
117
|
+
</a>
|
118
|
+
</span>
|
119
|
+
{% endif %}
|
120
|
+
|
121
|
+
</footer>
|
122
|
+
</section>
|
123
|
+
|
124
|
+
{% if site.google_analytics %}
|
125
|
+
<script type="text/javascript">
|
126
|
+
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
127
|
+
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
128
|
+
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
129
|
+
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
130
|
+
|
131
|
+
ga('create', '{{ site.google_analytics }}', 'auto');
|
132
|
+
ga('send', 'pageview');
|
133
|
+
</script>
|
134
|
+
{% endif %}
|
135
|
+
</body>
|
136
|
+
</html>
|
data/_layouts/home.html
ADDED
@@ -0,0 +1,30 @@
|
|
1
|
+
---
|
2
|
+
layout: default
|
3
|
+
---
|
4
|
+
|
5
|
+
<div>
|
6
|
+
|
7
|
+
{{ content }}
|
8
|
+
|
9
|
+
<h2>Latest Posts</h2>
|
10
|
+
|
11
|
+
<div> </div>
|
12
|
+
|
13
|
+
<ul class="post-list">
|
14
|
+
{% for post in site.posts %}
|
15
|
+
<li>
|
16
|
+
|
17
|
+
{% assign date_format = site.jekyll-theme-simple-blog.date_format | default: "%b %-d, %Y" %}
|
18
|
+
<span class="post-meta">{{ post.date | date: date_format }}</span>
|
19
|
+
|
20
|
+
<h2>
|
21
|
+
<a class="post-link" href="{{ post.url | relative_url }}" title="{{ post.title }}">{{ post.title | escape }}</a>
|
22
|
+
</h2>
|
23
|
+
|
24
|
+
<span>{{ post.excerpt | markdownify | truncatewords: 30 }}</span>
|
25
|
+
|
26
|
+
</li>
|
27
|
+
{% endfor %}
|
28
|
+
</ul>
|
29
|
+
|
30
|
+
</div>
|
data/_layouts/page.html
ADDED
data/_layouts/post.html
ADDED
@@ -0,0 +1,25 @@
|
|
1
|
+
---
|
2
|
+
layout: default
|
3
|
+
---
|
4
|
+
<article itemscope itemtype="http://schema.org/BlogPosting">
|
5
|
+
|
6
|
+
<!-- <header class="post-header">
|
7
|
+
<h1 class="post-title" itemprop="name headline">{{ page.title | escape }}</h1>
|
8
|
+
<p class="post-meta">
|
9
|
+
<time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
|
10
|
+
{% assign date_format = site.jekyll-theme-simple-blog.date_format | default: "%b %-d, %Y" %}
|
11
|
+
{{ page.date | date: date_format }}
|
12
|
+
</time>
|
13
|
+
{% if page.author %}
|
14
|
+
• <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">{{ page.author }}</span></span>
|
15
|
+
{% endif %}</p>
|
16
|
+
</header> -->
|
17
|
+
|
18
|
+
<div itemprop="articleBody">
|
19
|
+
{{ content }}
|
20
|
+
</div>
|
21
|
+
|
22
|
+
{% if site.disqus.shortname %}
|
23
|
+
{% include disqus_comments.html %}
|
24
|
+
{% endif %}
|
25
|
+
</article>
|
data/_sass/blog.scss
ADDED
@@ -0,0 +1,48 @@
|
|
1
|
+
@charset "utf-8";
|
2
|
+
|
3
|
+
// Define defaults for each variable.
|
4
|
+
|
5
|
+
$base-font-size: 16px !default;
|
6
|
+
$base-font-weight: 400 !default;
|
7
|
+
$small-font-size: $base-font-size * 0.875 !default;
|
8
|
+
$base-line-height: 1.5 !default;
|
9
|
+
|
10
|
+
$spacing-unit: 30px !default;
|
11
|
+
|
12
|
+
$text-color: $section-headings-color !default;
|
13
|
+
$background-color: #fdfdfd !default;
|
14
|
+
$brand-color: #2a7ae2 !default;
|
15
|
+
|
16
|
+
$grey-color: #828282 !default;
|
17
|
+
$grey-color-light: lighten($grey-color, 40%) !default;
|
18
|
+
$grey-color-dark: darken($grey-color, 25%) !default;
|
19
|
+
|
20
|
+
// Width of the content area
|
21
|
+
//$content-width: 800px !default;
|
22
|
+
$navbar-width: 54em !default;
|
23
|
+
|
24
|
+
$on-palm: 38em !default;
|
25
|
+
$on-laptop: 54em !default;
|
26
|
+
|
27
|
+
// Use media queries like this:
|
28
|
+
// @include media-query($on-palm) {
|
29
|
+
// .wrapper {
|
30
|
+
// padding-right: $spacing-unit / 2;
|
31
|
+
// padding-left: $spacing-unit / 2;
|
32
|
+
// }
|
33
|
+
// }
|
34
|
+
@mixin media-query($device) {
|
35
|
+
@media screen and (max-width: $device) {
|
36
|
+
@content;
|
37
|
+
}
|
38
|
+
}
|
39
|
+
|
40
|
+
@mixin relative-font-size($ratio) {
|
41
|
+
font-size: $base-font-size * $ratio;
|
42
|
+
}
|
43
|
+
|
44
|
+
// Import partials.
|
45
|
+
@import
|
46
|
+
"blog/base",
|
47
|
+
"blog/layout"
|
48
|
+
;
|
@@ -0,0 +1,30 @@
|
|
1
|
+
/**
|
2
|
+
* Wrapper
|
3
|
+
*/
|
4
|
+
.wrapper {
|
5
|
+
max-width: -webkit-calc(#{$navbar-width} - (#{$spacing-unit} * 2));
|
6
|
+
max-width: calc(#{$navbar-width} - (#{$spacing-unit} * 2));
|
7
|
+
margin-right: auto;
|
8
|
+
margin-left: auto;
|
9
|
+
padding-right: $spacing-unit;
|
10
|
+
padding-left: $spacing-unit;
|
11
|
+
@extend %clearfix;
|
12
|
+
|
13
|
+
@include media-query($on-laptop) {
|
14
|
+
max-width: -webkit-calc(#{$navbar-width} - (#{$spacing-unit}));
|
15
|
+
max-width: calc(#{$navbar-width} - (#{$spacing-unit}));
|
16
|
+
padding-right: $spacing-unit / 2;
|
17
|
+
padding-left: $spacing-unit / 2;
|
18
|
+
}
|
19
|
+
}
|
20
|
+
|
21
|
+
|
22
|
+
|
23
|
+
/**
|
24
|
+
* Clearfix
|
25
|
+
*/
|
26
|
+
%clearfix:after {
|
27
|
+
content: "";
|
28
|
+
display: table;
|
29
|
+
clear: both;
|
30
|
+
}
|
@@ -0,0 +1,142 @@
|
|
1
|
+
/**
|
2
|
+
* Site header
|
3
|
+
*/
|
4
|
+
.site-header {
|
5
|
+
border-bottom: 1px solid $grey-color-light;
|
6
|
+
min-height: $spacing-unit * 1.865;
|
7
|
+
|
8
|
+
// Positioning context for the mobile navigation icon
|
9
|
+
position: relative;
|
10
|
+
}
|
11
|
+
|
12
|
+
.site-title {
|
13
|
+
@include relative-font-size(1.4);
|
14
|
+
font-weight: 300;
|
15
|
+
line-height: $base-line-height * $base-font-size * 2.25;
|
16
|
+
letter-spacing: -1px;
|
17
|
+
margin-bottom: 0;
|
18
|
+
float: left;
|
19
|
+
text-decoration: none;
|
20
|
+
|
21
|
+
&,
|
22
|
+
&:visited,
|
23
|
+
&:hover {
|
24
|
+
color: $text-color;
|
25
|
+
text-decoration: none;
|
26
|
+
}
|
27
|
+
}
|
28
|
+
|
29
|
+
.site-nav {
|
30
|
+
float: right;
|
31
|
+
line-height: $base-line-height * $base-font-size * 2.25;
|
32
|
+
|
33
|
+
.nav-trigger {
|
34
|
+
display: none;
|
35
|
+
}
|
36
|
+
|
37
|
+
.menu-icon {
|
38
|
+
display: none;
|
39
|
+
}
|
40
|
+
|
41
|
+
.page-link {
|
42
|
+
color: $text-color;
|
43
|
+
line-height: $base-line-height;
|
44
|
+
|
45
|
+
// Gaps between nav items, but not on the last one
|
46
|
+
&:not(:last-child) {
|
47
|
+
margin-right: 20px;
|
48
|
+
}
|
49
|
+
}
|
50
|
+
|
51
|
+
@include media-query($on-palm) {
|
52
|
+
position: absolute;
|
53
|
+
top: 9px;
|
54
|
+
right: $spacing-unit / 2;
|
55
|
+
background-color: $background-color;
|
56
|
+
border: 1px solid $grey-color-light;
|
57
|
+
border-radius: 5px;
|
58
|
+
text-align: right;
|
59
|
+
|
60
|
+
label[for="nav-trigger"] {
|
61
|
+
display: block;
|
62
|
+
float: right;
|
63
|
+
width: 36px;
|
64
|
+
height: 36px;
|
65
|
+
z-index: 2;
|
66
|
+
cursor: pointer;
|
67
|
+
}
|
68
|
+
|
69
|
+
.menu-icon {
|
70
|
+
display: block;
|
71
|
+
float: right;
|
72
|
+
width: 36px;
|
73
|
+
height: 26px;
|
74
|
+
line-height: 0;
|
75
|
+
padding-top: 10px;
|
76
|
+
text-align: center;
|
77
|
+
|
78
|
+
> svg path {
|
79
|
+
fill: $grey-color-dark;
|
80
|
+
}
|
81
|
+
}
|
82
|
+
|
83
|
+
input ~ .trigger {
|
84
|
+
clear: both;
|
85
|
+
display: none;
|
86
|
+
}
|
87
|
+
|
88
|
+
input:checked ~ .trigger {
|
89
|
+
display: block;
|
90
|
+
padding-bottom: 5px;
|
91
|
+
}
|
92
|
+
|
93
|
+
.trigger {
|
94
|
+
padding-top: 20px;
|
95
|
+
}
|
96
|
+
.page-link {
|
97
|
+
display: block;
|
98
|
+
padding: 10px 10px;
|
99
|
+
|
100
|
+
&:last-child {
|
101
|
+
margin-bottom: 10px;
|
102
|
+
}
|
103
|
+
margin-right: 10px;
|
104
|
+
margin-left: 10px;
|
105
|
+
}
|
106
|
+
|
107
|
+
}
|
108
|
+
}
|
109
|
+
|
110
|
+
/**
|
111
|
+
* Post list
|
112
|
+
*/
|
113
|
+
.post-list {
|
114
|
+
margin-left: 0;
|
115
|
+
list-style: none;
|
116
|
+
|
117
|
+
> li {
|
118
|
+
margin-bottom: $spacing-unit * 1.5;
|
119
|
+
}
|
120
|
+
|
121
|
+
> li > h2 {
|
122
|
+
margin-top: 0rem;
|
123
|
+
margin-bottom: 0.4rem;
|
124
|
+
}
|
125
|
+
}
|
126
|
+
|
127
|
+
@include media-query($on-palm) {
|
128
|
+
.post-list {
|
129
|
+
-webkit-margin-end: 10px;
|
130
|
+
-webkit-padding-start: 10px;
|
131
|
+
}
|
132
|
+
}
|
133
|
+
|
134
|
+
.post-meta {
|
135
|
+
font-size: $small-font-size;
|
136
|
+
color: $grey-color;
|
137
|
+
}
|
138
|
+
|
139
|
+
.post-link {
|
140
|
+
display: block;
|
141
|
+
@include relative-font-size(1.5);
|
142
|
+
}
|
@@ -0,0 +1,435 @@
|
|
1
|
+
|
2
|
+
@import "normalize";
|
3
|
+
@import "rouge-github";
|
4
|
+
@import "variables";
|
5
|
+
@import "blog";
|
6
|
+
|
7
|
+
@mixin large {
|
8
|
+
@media screen and (min-width: #{$large-breakpoint}) {
|
9
|
+
@content;
|
10
|
+
}
|
11
|
+
}
|
12
|
+
|
13
|
+
@mixin medium {
|
14
|
+
@media screen and (min-width: #{$medium-breakpoint}) and (max-width: #{$large-breakpoint}) {
|
15
|
+
@content;
|
16
|
+
}
|
17
|
+
}
|
18
|
+
|
19
|
+
@mixin small {
|
20
|
+
@media screen and (max-width: #{$medium-breakpoint}) {
|
21
|
+
@content;
|
22
|
+
}
|
23
|
+
}
|
24
|
+
|
25
|
+
* {
|
26
|
+
box-sizing: border-box;
|
27
|
+
}
|
28
|
+
|
29
|
+
body {
|
30
|
+
padding: 0;
|
31
|
+
margin: 0;
|
32
|
+
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
33
|
+
font-size: 16px;
|
34
|
+
line-height: 1.5;
|
35
|
+
color: $body-text-color;
|
36
|
+
}
|
37
|
+
|
38
|
+
a {
|
39
|
+
color: $body-link-color;
|
40
|
+
text-decoration: none;
|
41
|
+
|
42
|
+
&:hover {
|
43
|
+
text-decoration: underline;
|
44
|
+
}
|
45
|
+
}
|
46
|
+
|
47
|
+
.btn {
|
48
|
+
display: inline-block;
|
49
|
+
margin-bottom: 1rem;
|
50
|
+
color: rgba(255, 255, 255, 0.7);
|
51
|
+
background-color: rgba(255, 255, 255, 0.08);
|
52
|
+
border-color: rgba(255, 255, 255, 0.2);
|
53
|
+
border-style: solid;
|
54
|
+
border-width: 1px;
|
55
|
+
border-radius: 0.3rem;
|
56
|
+
transition: color 0.2s, background-color 0.2s, border-color 0.2s;
|
57
|
+
|
58
|
+
&:hover {
|
59
|
+
color: rgba(255, 255, 255, 0.8);
|
60
|
+
text-decoration: none;
|
61
|
+
background-color: rgba(255, 255, 255, 0.2);
|
62
|
+
border-color: rgba(255, 255, 255, 0.3);
|
63
|
+
}
|
64
|
+
|
65
|
+
+ .btn {
|
66
|
+
margin-left: 1rem;
|
67
|
+
}
|
68
|
+
|
69
|
+
@include large {
|
70
|
+
padding: 0.75rem 1rem;
|
71
|
+
}
|
72
|
+
|
73
|
+
@include medium {
|
74
|
+
padding: 0.6rem 0.9rem;
|
75
|
+
font-size: 0.9rem;
|
76
|
+
}
|
77
|
+
|
78
|
+
@include small {
|
79
|
+
display: block;
|
80
|
+
width: 100%;
|
81
|
+
padding: 0.75rem;
|
82
|
+
font-size: 0.9rem;
|
83
|
+
|
84
|
+
+ .btn {
|
85
|
+
margin-top: 1rem;
|
86
|
+
margin-left: 0;
|
87
|
+
}
|
88
|
+
}
|
89
|
+
}
|
90
|
+
|
91
|
+
.page-header {
|
92
|
+
color: $header-heading-color;
|
93
|
+
text-align: center;
|
94
|
+
background-color: $header-bg-color;
|
95
|
+
background-size: inherit;
|
96
|
+
|
97
|
+
@include large {
|
98
|
+
padding: 5rem 6rem;
|
99
|
+
}
|
100
|
+
|
101
|
+
@include medium {
|
102
|
+
padding: 3rem 4rem;
|
103
|
+
}
|
104
|
+
|
105
|
+
@include small {
|
106
|
+
padding: 2rem 1rem;
|
107
|
+
}
|
108
|
+
}
|
109
|
+
|
110
|
+
.project-name {
|
111
|
+
margin-top: 0;
|
112
|
+
margin-bottom: 0.1rem;
|
113
|
+
|
114
|
+
@include large {
|
115
|
+
font-size: 3.25rem;
|
116
|
+
}
|
117
|
+
|
118
|
+
@include medium {
|
119
|
+
font-size: 2.25rem;
|
120
|
+
}
|
121
|
+
|
122
|
+
@include small {
|
123
|
+
font-size: 1.75rem;
|
124
|
+
}
|
125
|
+
}
|
126
|
+
|
127
|
+
.project-tagline {
|
128
|
+
margin-bottom: 2rem;
|
129
|
+
font-weight: normal;
|
130
|
+
opacity: 0.7;
|
131
|
+
|
132
|
+
@include large {
|
133
|
+
font-size: 1.25rem;
|
134
|
+
}
|
135
|
+
|
136
|
+
@include medium {
|
137
|
+
font-size: 1.15rem;
|
138
|
+
}
|
139
|
+
|
140
|
+
@include small {
|
141
|
+
font-size: 1rem;
|
142
|
+
}
|
143
|
+
}
|
144
|
+
|
145
|
+
.project-date {
|
146
|
+
margin-bottom: 0rem;
|
147
|
+
font-weight: normal;
|
148
|
+
opacity: 0.7;
|
149
|
+
font-style: italic;
|
150
|
+
|
151
|
+
@include large {
|
152
|
+
font-size: 1.0rem;
|
153
|
+
}
|
154
|
+
|
155
|
+
@include medium {
|
156
|
+
font-size: 0.95rem;
|
157
|
+
}
|
158
|
+
|
159
|
+
@include small {
|
160
|
+
font-size: 0.75rem;
|
161
|
+
}
|
162
|
+
}
|
163
|
+
|
164
|
+
.main-content {
|
165
|
+
word-wrap: break-word;
|
166
|
+
|
167
|
+
:first-child {
|
168
|
+
margin-top: 0;
|
169
|
+
}
|
170
|
+
|
171
|
+
@include large {
|
172
|
+
max-width: 64rem;
|
173
|
+
padding: 3rem 6rem;
|
174
|
+
margin: 0 auto;
|
175
|
+
font-size: 1.1rem;
|
176
|
+
}
|
177
|
+
|
178
|
+
@include medium {
|
179
|
+
padding: 3rem 4rem;
|
180
|
+
font-size: 1.1rem;
|
181
|
+
}
|
182
|
+
|
183
|
+
@include small {
|
184
|
+
padding: 2rem 1rem;
|
185
|
+
font-size: 1rem;
|
186
|
+
}
|
187
|
+
|
188
|
+
img {
|
189
|
+
max-width: 100%;
|
190
|
+
}
|
191
|
+
|
192
|
+
h1,
|
193
|
+
h2,
|
194
|
+
h3,
|
195
|
+
h4,
|
196
|
+
h5,
|
197
|
+
h6 {
|
198
|
+
margin-top: 2rem;
|
199
|
+
margin-bottom: 1rem;
|
200
|
+
font-weight: normal;
|
201
|
+
color: $section-headings-color;
|
202
|
+
}
|
203
|
+
|
204
|
+
p {
|
205
|
+
margin-bottom: 1em;
|
206
|
+
}
|
207
|
+
|
208
|
+
code {
|
209
|
+
padding: 2px 4px;
|
210
|
+
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
|
211
|
+
font-size: 0.9rem;
|
212
|
+
color: $code-text-color;
|
213
|
+
background-color: $code-bg-color;
|
214
|
+
border-radius: 0.3rem;
|
215
|
+
}
|
216
|
+
|
217
|
+
pre {
|
218
|
+
padding: 0.8rem;
|
219
|
+
margin-top: 0;
|
220
|
+
margin-bottom: 1rem;
|
221
|
+
font: 1rem Consolas, "Liberation Mono", Menlo, Courier, monospace;
|
222
|
+
color: $code-text-color;
|
223
|
+
word-wrap: normal;
|
224
|
+
background-color: $code-bg-color;
|
225
|
+
border: solid 1px $border-color;
|
226
|
+
border-radius: 0.3rem;
|
227
|
+
|
228
|
+
> code {
|
229
|
+
padding: 0;
|
230
|
+
margin: 0;
|
231
|
+
font-size: 0.9rem;
|
232
|
+
color: $code-text-color;
|
233
|
+
word-break: normal;
|
234
|
+
white-space: pre;
|
235
|
+
background: transparent;
|
236
|
+
border: 0;
|
237
|
+
}
|
238
|
+
}
|
239
|
+
|
240
|
+
.highlight {
|
241
|
+
margin-bottom: 1rem;
|
242
|
+
|
243
|
+
pre {
|
244
|
+
margin-bottom: 0;
|
245
|
+
word-break: normal;
|
246
|
+
}
|
247
|
+
}
|
248
|
+
|
249
|
+
.highlight pre,
|
250
|
+
pre {
|
251
|
+
padding: 0.8rem;
|
252
|
+
overflow: auto;
|
253
|
+
font-size: 0.9rem;
|
254
|
+
line-height: 1.45;
|
255
|
+
border-radius: 0.3rem;
|
256
|
+
-webkit-overflow-scrolling: touch;
|
257
|
+
}
|
258
|
+
|
259
|
+
pre code,
|
260
|
+
pre tt {
|
261
|
+
display: inline;
|
262
|
+
max-width: initial;
|
263
|
+
padding: 0;
|
264
|
+
margin: 0;
|
265
|
+
overflow: initial;
|
266
|
+
line-height: inherit;
|
267
|
+
word-wrap: normal;
|
268
|
+
background-color: transparent;
|
269
|
+
border: 0;
|
270
|
+
|
271
|
+
&:before,
|
272
|
+
&:after {
|
273
|
+
content: normal;
|
274
|
+
}
|
275
|
+
}
|
276
|
+
|
277
|
+
ul,
|
278
|
+
ol {
|
279
|
+
margin-top: 0;
|
280
|
+
}
|
281
|
+
|
282
|
+
blockquote {
|
283
|
+
padding: 0 1rem;
|
284
|
+
margin-left: 0;
|
285
|
+
color: $blockquote-text-color;
|
286
|
+
border-left: 0.3rem solid $border-color;
|
287
|
+
|
288
|
+
> :first-child {
|
289
|
+
margin-top: 0;
|
290
|
+
}
|
291
|
+
|
292
|
+
> :last-child {
|
293
|
+
margin-bottom: 0;
|
294
|
+
}
|
295
|
+
}
|
296
|
+
|
297
|
+
table {
|
298
|
+
display: block;
|
299
|
+
width: 100%;
|
300
|
+
overflow: auto;
|
301
|
+
word-break: normal;
|
302
|
+
word-break: keep-all; // For Firefox to horizontally scroll wider tables.
|
303
|
+
-webkit-overflow-scrolling: touch;
|
304
|
+
|
305
|
+
th {
|
306
|
+
font-weight: bold;
|
307
|
+
}
|
308
|
+
|
309
|
+
th,
|
310
|
+
td {
|
311
|
+
padding: 0.5rem 1rem;
|
312
|
+
border: 1px solid $table-border-color;
|
313
|
+
}
|
314
|
+
}
|
315
|
+
|
316
|
+
dl {
|
317
|
+
padding: 0;
|
318
|
+
|
319
|
+
dt {
|
320
|
+
padding: 0;
|
321
|
+
margin-top: 1rem;
|
322
|
+
font-size: 1rem;
|
323
|
+
font-weight: bold;
|
324
|
+
}
|
325
|
+
|
326
|
+
dd {
|
327
|
+
padding: 0;
|
328
|
+
margin-bottom: 1rem;
|
329
|
+
}
|
330
|
+
}
|
331
|
+
|
332
|
+
hr {
|
333
|
+
height: 2px;
|
334
|
+
padding: 0;
|
335
|
+
margin: 1rem 0;
|
336
|
+
background-color: $hr-border-color;
|
337
|
+
border: 0;
|
338
|
+
}
|
339
|
+
}
|
340
|
+
|
341
|
+
.site-footer {
|
342
|
+
padding-top: 2rem;
|
343
|
+
margin-top: 2rem;
|
344
|
+
border-top: solid 1px $hr-border-color;
|
345
|
+
|
346
|
+
@include large {
|
347
|
+
font-size: 1rem;
|
348
|
+
}
|
349
|
+
|
350
|
+
@include medium {
|
351
|
+
font-size: 1rem;
|
352
|
+
}
|
353
|
+
|
354
|
+
@include small {
|
355
|
+
font-size: 0.9rem;
|
356
|
+
margin-bottom: 0.5rem;
|
357
|
+
}
|
358
|
+
}
|
359
|
+
|
360
|
+
.site-footer-owner {
|
361
|
+
display: block;
|
362
|
+
font-weight: bold;
|
363
|
+
}
|
364
|
+
|
365
|
+
.site-footer-credits {
|
366
|
+
color: $blockquote-text-color;
|
367
|
+
}
|
368
|
+
|
369
|
+
.site-footer {
|
370
|
+
|
371
|
+
@include large {
|
372
|
+
}
|
373
|
+
|
374
|
+
@include medium {
|
375
|
+
}
|
376
|
+
|
377
|
+
@include small {
|
378
|
+
}
|
379
|
+
|
380
|
+
.my-span-icon {
|
381
|
+
|
382
|
+
a {
|
383
|
+
text-decoration: none;
|
384
|
+
}
|
385
|
+
a:hover {
|
386
|
+
text-decoration: none;
|
387
|
+
}
|
388
|
+
|
389
|
+
@include large {
|
390
|
+
padding: 0px 5px 0px 5px;
|
391
|
+
}
|
392
|
+
|
393
|
+
@include medium {
|
394
|
+
//font-size: 1rem;
|
395
|
+
padding: 0px 10px 10px 10px;
|
396
|
+
}
|
397
|
+
|
398
|
+
@include small {
|
399
|
+
padding: 0px 10px 10px 10px;
|
400
|
+
}
|
401
|
+
}
|
402
|
+
|
403
|
+
.my-svg-icon {
|
404
|
+
|
405
|
+
color: $section-headings-color; // IE8
|
406
|
+
fill: $section-headings-color; // IE8
|
407
|
+
width: 24px;
|
408
|
+
height: 24px;
|
409
|
+
|
410
|
+
&:hover {
|
411
|
+
text-decoration: none;
|
412
|
+
color: $body-text-color; // IE8
|
413
|
+
fill: $body-text-color;
|
414
|
+
transform: scale(1.25);
|
415
|
+
transition: color .5s, transform .2s ease-out
|
416
|
+
}
|
417
|
+
|
418
|
+
@include large {
|
419
|
+
width: 28px;
|
420
|
+
height: 28px;
|
421
|
+
}
|
422
|
+
|
423
|
+
@include medium {
|
424
|
+
width: 32px;
|
425
|
+
height: 32px;
|
426
|
+
}
|
427
|
+
|
428
|
+
@include small {
|
429
|
+
width: 36px;
|
430
|
+
height: 36px;
|
431
|
+
}
|
432
|
+
|
433
|
+
} // social-icons
|
434
|
+
|
435
|
+
}
|