jekyll-oceanic 1.0.0
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/LICENSE +21 -0
- data/README.md +96 -0
- data/_config.yml +106 -0
- data/_includes/bloglist.html +68 -0
- data/_includes/footer.html +3 -0
- data/_includes/head.html +6 -0
- data/_includes/header.html +66 -0
- data/_includes/liquid/data +1 -0
- data/_layouts/archive.html +9 -0
- data/_layouts/autopage.html +10 -0
- data/_layouts/bloglist.html +17 -0
- data/_layouts/categories.html +35 -0
- data/_layouts/default.html +15 -0
- data/_layouts/home.html +31 -0
- data/_layouts/page.html +7 -0
- data/_layouts/post.html +11 -0
- data/_sass/code-skins/default.scss +73 -0
- data/_sass/skins/black.scss +38 -0
- data/_sass/skins/default.scss +132 -0
- data/_sass/theme.scss +474 -0
- data/assets/css/style.scss +38 -0
- data/assets/img/avatar.jpg +0 -0
- data/assets/img/favicon.png +0 -0
- data/assets/img/icons.svg +27 -0
- metadata +151 -0
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="{{ page.lang | default: site.lang | default: "en" }}">
|
|
3
|
+
{%- include head.html -%}
|
|
4
|
+
<body>
|
|
5
|
+
{%- include header.html -%}
|
|
6
|
+
<div class="content-area">
|
|
7
|
+
<main class="page-content" aria-label="Content" role="main">
|
|
8
|
+
{{ content }}
|
|
9
|
+
</main>
|
|
10
|
+
{%- include footer.html -%}
|
|
11
|
+
</div>
|
|
12
|
+
<div class="hires-padding"></div>
|
|
13
|
+
</body>
|
|
14
|
+
|
|
15
|
+
</html>
|
data/_layouts/home.html
ADDED
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
---
|
|
2
|
+
layout: default
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
<h1>{{page.title}}</h1>
|
|
6
|
+
|
|
7
|
+
{{ content }}
|
|
8
|
+
|
|
9
|
+
{%- if site.oceanic.homepage_blog_entries and site.oceanic.homepage_blog_entries > 0 -%}
|
|
10
|
+
<h2>Recent Blog Entries...</h2>
|
|
11
|
+
{%- if site.posts.size > 0 -%}
|
|
12
|
+
{%- assign date_format = site.date_format | default: "%b %-d, %Y" -%}
|
|
13
|
+
<ol class="blog-entries">
|
|
14
|
+
{%- assign i = 0 -%}
|
|
15
|
+
{%- for post in site.posts -%}
|
|
16
|
+
<li role="article">
|
|
17
|
+
<h3><a href="{{ post.url | relative_url }}">{{ post.title | escape }}</a></h3>
|
|
18
|
+
<aside>Published: {{ post.date | date: date_format }}</aside>
|
|
19
|
+
{{ post.excerpt }}
|
|
20
|
+
<a href="{{ post.url | relative_url }}">Continue reading...</a></h3>
|
|
21
|
+
</li>
|
|
22
|
+
{%- assign i = i | plus: 1 -%}
|
|
23
|
+
{%- if i >= site.oceanic.homepage_blog_entries -%}
|
|
24
|
+
{%- break -%}
|
|
25
|
+
{%- endif -%}
|
|
26
|
+
{%- endfor -%}
|
|
27
|
+
</ol>
|
|
28
|
+
{%- else -%}
|
|
29
|
+
<p>No entries... yet.</p>
|
|
30
|
+
{%- endif -%}
|
|
31
|
+
{%- endif -%}
|
data/_layouts/page.html
ADDED
data/_layouts/post.html
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
---
|
|
2
|
+
layout: default
|
|
3
|
+
navigation_enabled: false
|
|
4
|
+
pagegroup: __blog
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
<h1 class="post-title">{{page.title}}</h1>
|
|
8
|
+
{%- assign date_format = site.date_format | default: "%b %-d, %Y" -%}
|
|
9
|
+
<aside class="posted">Published {{ page.date | date: date_format }}</aside>
|
|
10
|
+
|
|
11
|
+
{{content}}
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* "Monokai" themed code snippet skin.
|
|
3
|
+
*
|
|
4
|
+
* Gratefully taken from Richard Leland
|
|
5
|
+
* (https://github.com/richleland/pygments-css).
|
|
6
|
+
*/
|
|
7
|
+
.highlight pre { color: #f8f8f2; background-color: #272822; }
|
|
8
|
+
.highlight .hll { background-color: #272822; }
|
|
9
|
+
.highlight .c { color: #75715e } /* Comment */
|
|
10
|
+
.highlight .err { color: #960050; background-color: #1e0010 } /* Error */
|
|
11
|
+
.highlight .k { color: #66d9ef } /* Keyword */
|
|
12
|
+
.highlight .l { color: #ae81ff } /* Literal */
|
|
13
|
+
.highlight .n { color: #f8f8f2 } /* Name */
|
|
14
|
+
.highlight .o { color: #f92672 } /* Operator */
|
|
15
|
+
.highlight .p { color: #f8f8f2 } /* Punctuation */
|
|
16
|
+
.highlight .cm { color: #75715e } /* Comment.Multiline */
|
|
17
|
+
.highlight .cp { color: #75715e } /* Comment.Preproc */
|
|
18
|
+
.highlight .c1 { color: #75715e } /* Comment.Single */
|
|
19
|
+
.highlight .cs { color: #75715e } /* Comment.Special */
|
|
20
|
+
.highlight .ge { font-style: italic } /* Generic.Emph */
|
|
21
|
+
.highlight .gs { font-weight: bold } /* Generic.Strong */
|
|
22
|
+
.highlight .kc { color: #66d9ef } /* Keyword.Constant */
|
|
23
|
+
.highlight .kd { color: #66d9ef } /* Keyword.Declaration */
|
|
24
|
+
.highlight .kn { color: #f92672 } /* Keyword.Namespace */
|
|
25
|
+
.highlight .kp { color: #66d9ef } /* Keyword.Pseudo */
|
|
26
|
+
.highlight .kr { color: #66d9ef } /* Keyword.Reserved */
|
|
27
|
+
.highlight .kt { color: #66d9ef } /* Keyword.Type */
|
|
28
|
+
.highlight .ld { color: #e6db74 } /* Literal.Date */
|
|
29
|
+
.highlight .m { color: #ae81ff } /* Literal.Number */
|
|
30
|
+
.highlight .s { color: #e6db74 } /* Literal.String */
|
|
31
|
+
.highlight .na { color: #a6e22e } /* Name.Attribute */
|
|
32
|
+
.highlight .nb { color: #f8f8f2 } /* Name.Builtin */
|
|
33
|
+
.highlight .nc { color: #a6e22e } /* Name.Class */
|
|
34
|
+
.highlight .no { color: #66d9ef } /* Name.Constant */
|
|
35
|
+
.highlight .nd { color: #a6e22e } /* Name.Decorator */
|
|
36
|
+
.highlight .ni { color: #f8f8f2 } /* Name.Entity */
|
|
37
|
+
.highlight .ne { color: #a6e22e } /* Name.Exception */
|
|
38
|
+
.highlight .nf { color: #a6e22e } /* Name.Function */
|
|
39
|
+
.highlight .nl { color: #f8f8f2 } /* Name.Label */
|
|
40
|
+
.highlight .nn { color: #f8f8f2 } /* Name.Namespace */
|
|
41
|
+
.highlight .nx { color: #a6e22e } /* Name.Other */
|
|
42
|
+
.highlight .py { color: #f8f8f2 } /* Name.Property */
|
|
43
|
+
.highlight .nt { color: #f92672 } /* Name.Tag */
|
|
44
|
+
.highlight .nv { color: #f8f8f2 } /* Name.Variable */
|
|
45
|
+
.highlight .ow { color: #f92672 } /* Operator.Word */
|
|
46
|
+
.highlight .w { color: #f8f8f2 } /* Text.Whitespace */
|
|
47
|
+
.highlight .mf { color: #ae81ff } /* Literal.Number.Float */
|
|
48
|
+
.highlight .mh { color: #ae81ff } /* Literal.Number.Hex */
|
|
49
|
+
.highlight .mi { color: #ae81ff } /* Literal.Number.Integer */
|
|
50
|
+
.highlight .mo { color: #ae81ff } /* Literal.Number.Oct */
|
|
51
|
+
.highlight .sb { color: #e6db74 } /* Literal.String.Backtick */
|
|
52
|
+
.highlight .sc { color: #e6db74 } /* Literal.String.Char */
|
|
53
|
+
.highlight .sd { color: #e6db74 } /* Literal.String.Doc */
|
|
54
|
+
.highlight .s2 { color: #e6db74 } /* Literal.String.Double */
|
|
55
|
+
.highlight .se { color: #ae81ff } /* Literal.String.Escape */
|
|
56
|
+
.highlight .sh { color: #e6db74 } /* Literal.String.Heredoc */
|
|
57
|
+
.highlight .si { color: #e6db74 } /* Literal.String.Interpol */
|
|
58
|
+
.highlight .sx { color: #e6db74 } /* Literal.String.Other */
|
|
59
|
+
.highlight .sr { color: #e6db74 } /* Literal.String.Regex */
|
|
60
|
+
.highlight .s1 { color: #e6db74 } /* Literal.String.Single */
|
|
61
|
+
.highlight .ss { color: #e6db74 } /* Literal.String.Symbol */
|
|
62
|
+
.highlight .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */
|
|
63
|
+
.highlight .vc { color: #f8f8f2 } /* Name.Variable.Class */
|
|
64
|
+
.highlight .vg { color: #f8f8f2 } /* Name.Variable.Global */
|
|
65
|
+
.highlight .vi { color: #f8f8f2 } /* Name.Variable.Instance */
|
|
66
|
+
.highlight .il { color: #ae81ff } /* Literal.Number.Integer.Long */
|
|
67
|
+
|
|
68
|
+
.highlight .gh { } /* Generic Heading & Diff Header */
|
|
69
|
+
.highlight .gu { color: #75715e; } /* Generic.Subheading & Diff Unified/Comment? */
|
|
70
|
+
.highlight .gd { color: #f92672; } /* Generic.Deleted & Diff Deleted */
|
|
71
|
+
.highlight .gi { color: #a6e22e; } /* Generic.Inserted & Diff Inserted */
|
|
72
|
+
.highlight .lineno { color: #888; } /* Gutter styling when line numbers enabled. */
|
|
73
|
+
.highlight .gutter { border-right: 1px solid #666; }
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
/**********************************************************************/
|
|
2
|
+
/* Fonts */
|
|
3
|
+
/**********************************************************************/
|
|
4
|
+
|
|
5
|
+
$default-font: serif;
|
|
6
|
+
$site-title-font: serif;
|
|
7
|
+
$header-font: sans-serif;
|
|
8
|
+
$aside-font: sans-serif;
|
|
9
|
+
$code-font: monospace;
|
|
10
|
+
$table-header-font: serif;
|
|
11
|
+
$table-cell-font: sans-serif;
|
|
12
|
+
|
|
13
|
+
/**********************************************************************/
|
|
14
|
+
/* Header */
|
|
15
|
+
/**********************************************************************/
|
|
16
|
+
|
|
17
|
+
$body-background: #000;
|
|
18
|
+
$header-seam: 5px solid #CC622B;
|
|
19
|
+
$avatar-aura-color: #FFA81C;
|
|
20
|
+
$header-text-color: #DDD;
|
|
21
|
+
$subtitle-font-weight: 300;
|
|
22
|
+
$selected-navigation-color: #FFA200;
|
|
23
|
+
$header-separator: 2px solid #DDD;
|
|
24
|
+
$social-media-icon-color: #AAA;
|
|
25
|
+
$hamburger-menu-color: #BBB;
|
|
26
|
+
|
|
27
|
+
/**********************************************************************/
|
|
28
|
+
/* Content Area */
|
|
29
|
+
/**********************************************************************/
|
|
30
|
+
|
|
31
|
+
$title-color: #E87C0C;
|
|
32
|
+
$title-underline-color: #01807B;
|
|
33
|
+
$text-color: #000;
|
|
34
|
+
$heading-color: #000;
|
|
35
|
+
$link-unvisited-color: #33F;
|
|
36
|
+
$link-visited-color: #66F;
|
|
37
|
+
$table-border-style: 3px solid #BBB;
|
|
38
|
+
$table-cell-border-style: 1px solid #BBB;
|
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Default skin for the site. Copy this file and edit the values to
|
|
3
|
+
* create your own skin.
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
/**********************************************************************/
|
|
7
|
+
/* Fonts */
|
|
8
|
+
/**********************************************************************/
|
|
9
|
+
|
|
10
|
+
@import url(
|
|
11
|
+
'https://fonts.googleapis.com/css2?family=Merriweather:wght@300;900&family=Lato:ital,wght@0,400;0,700;1,400&family=Noto+Sans+JP&family=Source+Code+Pro:ital,wght@0,400;0,700;1,400;1,700&display=swap'
|
|
12
|
+
);
|
|
13
|
+
|
|
14
|
+
/*
|
|
15
|
+
* Font used in most places.
|
|
16
|
+
*/
|
|
17
|
+
$default-font: 'Merriweather', serif;
|
|
18
|
+
|
|
19
|
+
/*
|
|
20
|
+
* Font used in the site title.
|
|
21
|
+
*/
|
|
22
|
+
$site-title-font: 'Merriweather', serif;
|
|
23
|
+
|
|
24
|
+
/*
|
|
25
|
+
* Font used in the header.
|
|
26
|
+
*/
|
|
27
|
+
$header-font: "Lato", sans-serif;
|
|
28
|
+
|
|
29
|
+
/*
|
|
30
|
+
* Font used in unimportant added information (such as the dates on
|
|
31
|
+
* blog posts, image captions, etc).
|
|
32
|
+
*/
|
|
33
|
+
$aside-font: "Lato", sans-serif;
|
|
34
|
+
|
|
35
|
+
/*
|
|
36
|
+
* Font used for code snippets.
|
|
37
|
+
*/
|
|
38
|
+
$code-font: "Source Code Pro", monospace;
|
|
39
|
+
|
|
40
|
+
/*
|
|
41
|
+
* Font used in table headings and cells.
|
|
42
|
+
*/
|
|
43
|
+
$table-header-font: 'Merriweather', serif;
|
|
44
|
+
$table-cell-font: "Lato", sans-serif;
|
|
45
|
+
|
|
46
|
+
/**********************************************************************/
|
|
47
|
+
/* Header */
|
|
48
|
+
/**********************************************************************/
|
|
49
|
+
|
|
50
|
+
/*
|
|
51
|
+
* Body background style. Can be configured as a gradient, or a single
|
|
52
|
+
* color.
|
|
53
|
+
*/
|
|
54
|
+
$body-background: linear-gradient(90deg, rgba(0,92,191,1) 0%, rgba(27,148,195,1) 86%);
|
|
55
|
+
|
|
56
|
+
/*
|
|
57
|
+
* Seam style. This is the separator line between the header and the
|
|
58
|
+
* content. Set $header-seam to "none".
|
|
59
|
+
*/
|
|
60
|
+
$header-seam: 2px dashed #FFF;
|
|
61
|
+
|
|
62
|
+
/*
|
|
63
|
+
* Avatar aura color. The ring of colour around the avatar photo if
|
|
64
|
+
* you have specified an Avatar.
|
|
65
|
+
*/
|
|
66
|
+
$avatar-aura-color: #FFF;
|
|
67
|
+
|
|
68
|
+
/*
|
|
69
|
+
* Color of the text in the header content.
|
|
70
|
+
*/
|
|
71
|
+
$header-text-color: #FFF;
|
|
72
|
+
|
|
73
|
+
/*
|
|
74
|
+
* Boldness of the sub-title font. This is the section where your
|
|
75
|
+
* site description sits.
|
|
76
|
+
*/
|
|
77
|
+
$subtitle-font-weight: 400;
|
|
78
|
+
|
|
79
|
+
/*
|
|
80
|
+
* Color of the active link in the navigation menu.
|
|
81
|
+
* Set to the same as $header-text-color
|
|
82
|
+
*/
|
|
83
|
+
$selected-navigation-color: #FFD70D;
|
|
84
|
+
|
|
85
|
+
/*
|
|
86
|
+
* Style of the horizontal lines that separate header navigation links.
|
|
87
|
+
* Change the style here, or disable entirely with "none".
|
|
88
|
+
*/
|
|
89
|
+
$header-separator: 2px solid #E0FFFC;
|
|
90
|
+
|
|
91
|
+
/*
|
|
92
|
+
* Color of the social media icons present in the header.
|
|
93
|
+
*/
|
|
94
|
+
$social-media-icon-color: #EEE;
|
|
95
|
+
|
|
96
|
+
/*
|
|
97
|
+
* Color of the "Hamburger Menu" when viewing the page on a mobile
|
|
98
|
+
* device.
|
|
99
|
+
*/
|
|
100
|
+
$hamburger-menu-color: #FFF;
|
|
101
|
+
|
|
102
|
+
/**********************************************************************/
|
|
103
|
+
/* Content Area */
|
|
104
|
+
/**********************************************************************/
|
|
105
|
+
|
|
106
|
+
/*
|
|
107
|
+
* Color of the page title (the <h1></h1> tag at the top of each page.
|
|
108
|
+
*/
|
|
109
|
+
$title-color: #FFA200;
|
|
110
|
+
$title-underline-color: #01807B;
|
|
111
|
+
|
|
112
|
+
/*
|
|
113
|
+
* The color of the regular text in the page.
|
|
114
|
+
*/
|
|
115
|
+
$text-color: #333;
|
|
116
|
+
|
|
117
|
+
/*
|
|
118
|
+
* The color of headings in the page.
|
|
119
|
+
*/
|
|
120
|
+
$heading-color: #0050A6;
|
|
121
|
+
|
|
122
|
+
/*
|
|
123
|
+
* Color for visited/unvisited hyperlinks in the page content.
|
|
124
|
+
*/
|
|
125
|
+
$link-unvisited-color: #0CB0E8;
|
|
126
|
+
$link-visited-color: #0CB0E8;
|
|
127
|
+
|
|
128
|
+
/*
|
|
129
|
+
* Table styling.
|
|
130
|
+
*/
|
|
131
|
+
$table-border-style: 3px solid #BBB;
|
|
132
|
+
$table-cell-border-style: 1px solid #BBB;
|
data/_sass/theme.scss
ADDED
|
@@ -0,0 +1,474 @@
|
|
|
1
|
+
/** Oceanic Theme **/
|
|
2
|
+
|
|
3
|
+
$avatar-border-width: $avatar-width + 16px;
|
|
4
|
+
$avatar-border-height: $avatar-height + 16px;
|
|
5
|
+
$max-content-width: 1024px;
|
|
6
|
+
$max-sidebar-width: 360px;
|
|
7
|
+
$max-sidebar-element-width: 205px;
|
|
8
|
+
|
|
9
|
+
/**********************************************************************/
|
|
10
|
+
/** Core Styles **/
|
|
11
|
+
/**********************************************************************/
|
|
12
|
+
body {
|
|
13
|
+
align-items: stretch;
|
|
14
|
+
color: $text-color;
|
|
15
|
+
display: flex;
|
|
16
|
+
font-family: $default-font;
|
|
17
|
+
font-size: 14pt;
|
|
18
|
+
margin: 0;
|
|
19
|
+
min-height: 100vh;
|
|
20
|
+
background: $body-background;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
/* Headers */
|
|
24
|
+
h1, h2, h3, h4, h5, h6 {
|
|
25
|
+
color: $heading-color;
|
|
26
|
+
font-family: $default-font;
|
|
27
|
+
}
|
|
28
|
+
h1 {
|
|
29
|
+
border-bottom: 1px solid $title-underline-color;
|
|
30
|
+
color: $title-color;
|
|
31
|
+
font-size: 36pt;
|
|
32
|
+
font-weight: 100;
|
|
33
|
+
text-align: center;
|
|
34
|
+
}
|
|
35
|
+
h2 {
|
|
36
|
+
margin-top:1.5em;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
/* Hyperlinks */
|
|
40
|
+
a {
|
|
41
|
+
color: $link-unvisited-color;
|
|
42
|
+
}
|
|
43
|
+
a:visited {
|
|
44
|
+
color: $link-visited-color;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
/**********************************************************************/
|
|
48
|
+
/** Page Left/Right Side **/
|
|
49
|
+
/**********************************************************************/
|
|
50
|
+
|
|
51
|
+
body > header,
|
|
52
|
+
body >.hires-padding {
|
|
53
|
+
border-right: $header-seam;
|
|
54
|
+
padding: 50px 20px;
|
|
55
|
+
width: 25%;
|
|
56
|
+
min-width: $max-sidebar-element-width;
|
|
57
|
+
max-width: $max-sidebar-width;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
body > .hires-padding {
|
|
61
|
+
border-left: $header-seam;
|
|
62
|
+
display: none;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
/**********************************************************************/
|
|
66
|
+
/** Page Header **/
|
|
67
|
+
/**********************************************************************/
|
|
68
|
+
|
|
69
|
+
/* Force all header text to the same color. */
|
|
70
|
+
body > header,
|
|
71
|
+
body > header a,
|
|
72
|
+
body > header a:visited,
|
|
73
|
+
body > header h1,
|
|
74
|
+
body > header h2 {
|
|
75
|
+
font-family: $header-font;
|
|
76
|
+
color: $header-text-color;
|
|
77
|
+
text-decoration: none;
|
|
78
|
+
}
|
|
79
|
+
body > header h1,
|
|
80
|
+
body > header h2 {
|
|
81
|
+
border: 0;
|
|
82
|
+
display: block;
|
|
83
|
+
margin: 0.5em auto auto auto;
|
|
84
|
+
max-width: $max-sidebar-element-width;
|
|
85
|
+
text-align: center;
|
|
86
|
+
}
|
|
87
|
+
body > header h1 {
|
|
88
|
+
font-family:$site-title-font;
|
|
89
|
+
font-size:120%;
|
|
90
|
+
font-weight: 900;
|
|
91
|
+
}
|
|
92
|
+
body > header h2 {
|
|
93
|
+
font-family: $header-font;
|
|
94
|
+
font-size:100%;
|
|
95
|
+
font-weight:$subtitle-font-weight;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
/* Avatar Image */
|
|
99
|
+
body > header .avatar-wrap {
|
|
100
|
+
margin: 0 auto;
|
|
101
|
+
width: $avatar-border-width;
|
|
102
|
+
height: $avatar-border-height;
|
|
103
|
+
overflow: visible;
|
|
104
|
+
background: radial-gradient(circle, $avatar-aura-color 62%, #0000 65%);
|
|
105
|
+
}
|
|
106
|
+
body > header .avatar-wrap > .avatar {
|
|
107
|
+
position: relative;
|
|
108
|
+
top: 8px;
|
|
109
|
+
left: 8px;
|
|
110
|
+
width: $avatar-width;
|
|
111
|
+
height: $avatar-height;
|
|
112
|
+
background-image: $avatar-img;
|
|
113
|
+
border-radius:50%;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
body > header input,
|
|
117
|
+
body > header label {
|
|
118
|
+
display: none;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
/* Navigation */
|
|
122
|
+
body > header nav ul {
|
|
123
|
+
letter-spacing: 2px;
|
|
124
|
+
list-style: none;
|
|
125
|
+
margin-top:40px;
|
|
126
|
+
padding: 0;
|
|
127
|
+
}
|
|
128
|
+
body > header nav li {
|
|
129
|
+
border-bottom: $header-separator;
|
|
130
|
+
display: block;
|
|
131
|
+
margin: 0 auto;
|
|
132
|
+
padding: 0.5em 0;
|
|
133
|
+
text-align: center;
|
|
134
|
+
width: $max-sidebar-element-width;
|
|
135
|
+
}
|
|
136
|
+
body > header label svg {
|
|
137
|
+
stroke: $hamburger-menu-color;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
body > header nav .current a {
|
|
141
|
+
color: $selected-navigation-color;
|
|
142
|
+
}
|
|
143
|
+
body > header nav li:first-child {
|
|
144
|
+
border-top: $header-separator;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
/* Social Media Links */
|
|
148
|
+
body > header .social-icons {
|
|
149
|
+
margin: 40px auto 0 auto;
|
|
150
|
+
text-align: center;
|
|
151
|
+
width: $max-sidebar-element-width;
|
|
152
|
+
}
|
|
153
|
+
body > header .social-icons ul {
|
|
154
|
+
list-style: none;
|
|
155
|
+
padding: 0;
|
|
156
|
+
}
|
|
157
|
+
body > header .social-icons li {
|
|
158
|
+
display: inline;
|
|
159
|
+
padding: 5px;
|
|
160
|
+
}
|
|
161
|
+
body > header .social-icons svg {
|
|
162
|
+
height: 24px;
|
|
163
|
+
width: 24px;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
body > header .social-icons svg {
|
|
167
|
+
fill: $social-media-icon-color;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
/**********************************************************************/
|
|
171
|
+
/** Content Area **/
|
|
172
|
+
/**********************************************************************/
|
|
173
|
+
|
|
174
|
+
body > .content-area {
|
|
175
|
+
vertical-align:top;
|
|
176
|
+
flex: 1 1;
|
|
177
|
+
margin: 0 0 0 0;
|
|
178
|
+
background: #FFF;
|
|
179
|
+
padding: 20px;
|
|
180
|
+
}
|
|
181
|
+
main {
|
|
182
|
+
max-width:1024px;
|
|
183
|
+
margin: 0 auto;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
body > .content-area > footer {
|
|
187
|
+
color: #BBB;
|
|
188
|
+
font-family: $aside-font;
|
|
189
|
+
font-size: 0.7em;
|
|
190
|
+
text-align: center;
|
|
191
|
+
margin-top: 2em;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
|
|
195
|
+
/**********************************************************************/
|
|
196
|
+
/** Multi-Column List **/
|
|
197
|
+
/**********************************************************************/
|
|
198
|
+
|
|
199
|
+
.multi-column-list {
|
|
200
|
+
display: flex;
|
|
201
|
+
flex-wrap: wrap;
|
|
202
|
+
}
|
|
203
|
+
.multi-column-list article {
|
|
204
|
+
border: 1px solid #CCC;
|
|
205
|
+
display: block;
|
|
206
|
+
padding: 0 2% 10px 2%;
|
|
207
|
+
width: 45%;
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
/**********************************************************************/
|
|
211
|
+
/** Blog Posts **/
|
|
212
|
+
/**********************************************************************/
|
|
213
|
+
|
|
214
|
+
ol.blog-entries {
|
|
215
|
+
list-style: none;
|
|
216
|
+
padding: 0;
|
|
217
|
+
margin: 0;
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
ol.blog-entries li {
|
|
221
|
+
padding: 0;
|
|
222
|
+
margin: 1em 0 0 0;
|
|
223
|
+
border-top:2px solid #999;
|
|
224
|
+
}
|
|
225
|
+
ol.blog-entries > li:first-child {
|
|
226
|
+
border-top: none;
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
ol.blog-entries h3 {
|
|
230
|
+
margin-bottom: 0.4em;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
ol.blog-entries h3 a {
|
|
234
|
+
color: $heading-color;
|
|
235
|
+
text-decoration: none;
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
ol.blog-entries aside,
|
|
239
|
+
aside.posted {
|
|
240
|
+
color: #666;
|
|
241
|
+
font-family: $aside-font;
|
|
242
|
+
font-size: 0.7em;
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
ul.pages {
|
|
246
|
+
display: block;
|
|
247
|
+
list-style: none;
|
|
248
|
+
text-align: center;
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
ul.pages li {
|
|
252
|
+
/*
|
|
253
|
+
* Falling back to Noto Sans JP font here since it supports the
|
|
254
|
+
* unicode characters we need for navigation.
|
|
255
|
+
*/
|
|
256
|
+
font-family: "Noto Sans JP", Helvetica, sans-serif;
|
|
257
|
+
color: #AAA;
|
|
258
|
+
display: inline-block;
|
|
259
|
+
font-size: 1em;
|
|
260
|
+
vertical-align: middle;
|
|
261
|
+
margin: 0 10px;
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
ul.pages li a {
|
|
265
|
+
color: $text-color;
|
|
266
|
+
text-decoration: none;
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
h1.post-title {
|
|
270
|
+
margin-bottom:0.25em;
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
aside.posted {
|
|
274
|
+
text-align: center;
|
|
275
|
+
margin-bottom:1em;
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
/**********************************************************************/
|
|
279
|
+
/** Text Formatting **/
|
|
280
|
+
/**********************************************************************/
|
|
281
|
+
|
|
282
|
+
/* Code Snippets */
|
|
283
|
+
code {
|
|
284
|
+
font-family: $code-font;
|
|
285
|
+
}
|
|
286
|
+
.highlight > pre {
|
|
287
|
+
margin: 1.5em 50px;
|
|
288
|
+
padding: 4px 8px;
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
/* Styles for Rouge-generated table when line numbers are enabled. */
|
|
292
|
+
.rouge-table {
|
|
293
|
+
border: 0;
|
|
294
|
+
margin: 0;
|
|
295
|
+
}
|
|
296
|
+
.rouge-table pre {
|
|
297
|
+
font-size: 0.8em;
|
|
298
|
+
padding: 0 8px;
|
|
299
|
+
}
|
|
300
|
+
.rouge-table td {
|
|
301
|
+
border: 0;
|
|
302
|
+
padding: 0;
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
blockquote {
|
|
306
|
+
border: 2px solid #AAA;
|
|
307
|
+
border-top: none;
|
|
308
|
+
border-bottom: none;
|
|
309
|
+
border-radius: 10px;
|
|
310
|
+
padding: 10px 15px;
|
|
311
|
+
font-style: italic;
|
|
312
|
+
font-size: 0.9em;
|
|
313
|
+
}
|
|
314
|
+
|
|
315
|
+
/**********************************************************************/
|
|
316
|
+
/** Tables **/
|
|
317
|
+
/**********************************************************************/
|
|
318
|
+
|
|
319
|
+
table {
|
|
320
|
+
margin: 1.5em 0 0 0;
|
|
321
|
+
border-spacing: 0;
|
|
322
|
+
border-collapse: collapse;
|
|
323
|
+
border: $table-border-style;
|
|
324
|
+
|
|
325
|
+
}
|
|
326
|
+
table td,
|
|
327
|
+
table th {
|
|
328
|
+
border: $table-cell-border-style;
|
|
329
|
+
padding:4px 8px;
|
|
330
|
+
text-align: left;
|
|
331
|
+
}
|
|
332
|
+
table th {
|
|
333
|
+
font-family: $table-header-font;
|
|
334
|
+
font-size: 0.9em;
|
|
335
|
+
}
|
|
336
|
+
table td {
|
|
337
|
+
font-family: $table-cell-font;
|
|
338
|
+
font-size: 0.9em;
|
|
339
|
+
}
|
|
340
|
+
|
|
341
|
+
/**********************************************************************/
|
|
342
|
+
/** Figures **/
|
|
343
|
+
/**********************************************************************/
|
|
344
|
+
|
|
345
|
+
figure {
|
|
346
|
+
margin:1.5em auto;
|
|
347
|
+
display: block;
|
|
348
|
+
text-align:center;
|
|
349
|
+
}
|
|
350
|
+
|
|
351
|
+
figure figcaption {
|
|
352
|
+
margin-top:0.5em;
|
|
353
|
+
color: #666;
|
|
354
|
+
font-family: $aside-font;
|
|
355
|
+
font-size:0.8em;
|
|
356
|
+
}
|
|
357
|
+
|
|
358
|
+
/**********************************************************************/
|
|
359
|
+
/** Small Screen Optimization **/
|
|
360
|
+
/**********************************************************************/
|
|
361
|
+
|
|
362
|
+
@media screen and (max-width: 768px) {
|
|
363
|
+
|
|
364
|
+
/******************************************************************/
|
|
365
|
+
/** Orientation **/
|
|
366
|
+
/******************************************************************/
|
|
367
|
+
body {
|
|
368
|
+
flex-direction: column;
|
|
369
|
+
}
|
|
370
|
+
|
|
371
|
+
body > header,
|
|
372
|
+
main {
|
|
373
|
+
width: unset;
|
|
374
|
+
max-width:unset;
|
|
375
|
+
}
|
|
376
|
+
|
|
377
|
+
/******************************************************************/
|
|
378
|
+
/** Page Header **/
|
|
379
|
+
/******************************************************************/
|
|
380
|
+
|
|
381
|
+
body > header {
|
|
382
|
+
padding: 20px 0 0 0;
|
|
383
|
+
border-right: none;
|
|
384
|
+
}
|
|
385
|
+
body > header > .profile-area {
|
|
386
|
+
display: flex;
|
|
387
|
+
}
|
|
388
|
+
body > header .avatar-wrap {
|
|
389
|
+
margin: 0 0 20px 20px;
|
|
390
|
+
flex: 0 0 $avatar-border-width;
|
|
391
|
+
}
|
|
392
|
+
body > header .header-text-wrap {
|
|
393
|
+
margin: 0 0 0 20px;
|
|
394
|
+
vertical-align: middle;
|
|
395
|
+
flex: 1 1;
|
|
396
|
+
}
|
|
397
|
+
body > header .header-text {
|
|
398
|
+
display: block;
|
|
399
|
+
padding: 20px;
|
|
400
|
+
}
|
|
401
|
+
|
|
402
|
+
body > header h1 {
|
|
403
|
+
margin: 0;
|
|
404
|
+
}
|
|
405
|
+
body > header h1,
|
|
406
|
+
body > header h2 {
|
|
407
|
+
max-width: initial;
|
|
408
|
+
}
|
|
409
|
+
|
|
410
|
+
body > header > label {
|
|
411
|
+
display: block;
|
|
412
|
+
padding: 10px 0;
|
|
413
|
+
text-align: center;
|
|
414
|
+
border-top: $header-seam;
|
|
415
|
+
height: 26px;
|
|
416
|
+
}
|
|
417
|
+
body > header > label > svg {
|
|
418
|
+
display: block;
|
|
419
|
+
margin: auto;
|
|
420
|
+
height: 26px;
|
|
421
|
+
width: 75px;
|
|
422
|
+
}
|
|
423
|
+
|
|
424
|
+
body > header nav ul {
|
|
425
|
+
margin-top: 1em;
|
|
426
|
+
}
|
|
427
|
+
|
|
428
|
+
body > header input ~ .social-icons,
|
|
429
|
+
body > header input ~ nav {
|
|
430
|
+
display: none;
|
|
431
|
+
}
|
|
432
|
+
body > header input:checked ~ .social-icons,
|
|
433
|
+
body > header input:checked ~ nav {
|
|
434
|
+
display: block;
|
|
435
|
+
}
|
|
436
|
+
|
|
437
|
+
body > .content-area {
|
|
438
|
+
margin: 0;
|
|
439
|
+
padding-top: 0;
|
|
440
|
+
}
|
|
441
|
+
main {
|
|
442
|
+
border-radius:10px;
|
|
443
|
+
}
|
|
444
|
+
|
|
445
|
+
.project-list {
|
|
446
|
+
display: block;
|
|
447
|
+
}
|
|
448
|
+
.project-list article {
|
|
449
|
+
display: block;
|
|
450
|
+
padding: initial;
|
|
451
|
+
width: initial;
|
|
452
|
+
}
|
|
453
|
+
|
|
454
|
+
/******************************************************************/
|
|
455
|
+
/** Other **/
|
|
456
|
+
/******************************************************************/
|
|
457
|
+
|
|
458
|
+
h1 {
|
|
459
|
+
font-size: 30px;
|
|
460
|
+
border-bottom: none;
|
|
461
|
+
}
|
|
462
|
+
}
|
|
463
|
+
|
|
464
|
+
@media screen and (min-width: 1921px) {
|
|
465
|
+
body > .hires-padding {
|
|
466
|
+
display: block;
|
|
467
|
+
flex: 1 1 $max-sidebar-width;
|
|
468
|
+
max-width:$max-sidebar-width;
|
|
469
|
+
}
|
|
470
|
+
|
|
471
|
+
body > header {
|
|
472
|
+
width: 25%;
|
|
473
|
+
}
|
|
474
|
+
}
|