jlgrock-flexible-jekyll-theme 0.1.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.
@@ -0,0 +1,67 @@
1
+ .highlight {background-color: #faf9f9; border-radius: 3px; margin: 0;}
2
+ .highlighter-rouge {color: #ce887b; font-weight: 400; border: 1px solid #607D8B; border-radius: 3px; padding: 0.1rem 0.5rem;}
3
+ .highlight .hll { background-color: #ffc; }
4
+ .highlight .c { color: #999; } /* Comment */
5
+ .highlight .err { color: #a00; background-color: #faa; } /* Error */
6
+ .highlight .k { color: #069; } /* Keyword */
7
+ .highlight .o { color: #555; } /* Operator */
8
+ .highlight .cm { color: #09f; font-style: italic; } /* Comment.Multiline */
9
+ .highlight .cp { color: #099; } /* Comment.Preproc */
10
+ .highlight .c1 { color: #999; } /* Comment.Single */
11
+ .highlight .cs { color: #999; } /* Comment.Special */
12
+ .highlight .gd { background-color: #fcc; border: 1px solid #c00; } /* Generic.Deleted */
13
+ .highlight .ge { font-style: italic; } /* Generic.Emph */
14
+ .highlight .gr { color: #f00; } /* Generic.Error */
15
+ .highlight .gh { color: #030; } /* Generic.Heading */
16
+ .highlight .gi { background-color: #cfc; border: 1px solid #0c0; } /* Generic.Inserted */
17
+ .highlight .go { color: #aaa; } /* Generic.Output */
18
+ .highlight .gp { color: #009; } /* Generic.Prompt */
19
+ .highlight .gs { } /* Generic.Strong */
20
+ .highlight .gu { color: #030; } /* Generic.Subheading */
21
+ .highlight .gt { color: #9c6; } /* Generic.Traceback */
22
+ .highlight .kc { color: #069; } /* Keyword.Constant */
23
+ .highlight .kd { color: #069; } /* Keyword.Declaration */
24
+ .highlight .kn { color: #069; } /* Keyword.Namespace */
25
+ .highlight .kp { color: #069; } /* Keyword.Pseudo */
26
+ .highlight .kr { color: #069; } /* Keyword.Reserved */
27
+ .highlight .kt { color: #078; } /* Keyword.Type */
28
+ .highlight .m { color: #f60; } /* Literal.Number */
29
+ .highlight .s { color: #d44950; } /* Literal.String */
30
+ .highlight .na { color: #4f9fcf; } /* Name.Attribute */
31
+ .highlight .nb { color: #366; } /* Name.Builtin */
32
+ .highlight .nc { color: #0a8; } /* Name.Class */
33
+ .highlight .no { color: #360; } /* Name.Constant */
34
+ .highlight .nd { color: #99f; } /* Name.Decorator */
35
+ .highlight .ni { color: #999; } /* Name.Entity */
36
+ .highlight .ne { color: #c00; } /* Name.Exception */
37
+ .highlight .nf { color: #c0f; } /* Name.Function */
38
+ .highlight .nl { color: #99f; } /* Name.Label */
39
+ .highlight .nn { color: #0cf; } /* Name.Namespace */
40
+ .highlight .nt { color: #2f6f9f; } /* Name.Tag */
41
+ .highlight .nv { color: #033; } /* Name.Variable */
42
+ .highlight .ow { color: #000; } /* Operator.Word */
43
+ .highlight .w { color: #bbb; } /* Text.Whitespace */
44
+ .highlight .mf { color: #f60; } /* Literal.Number.Float */
45
+ .highlight .mh { color: #f60; } /* Literal.Number.Hex */
46
+ .highlight .mi { color: #f60; } /* Literal.Number.Integer */
47
+ .highlight .mo { color: #f60; } /* Literal.Number.Oct */
48
+ .highlight .sb { color: #c30; } /* Literal.String.Backtick */
49
+ .highlight .sc { color: #c30; } /* Literal.String.Char */
50
+ .highlight .sd { color: #c30; font-style: italic; } /* Literal.String.Doc */
51
+ .highlight .s2 { color: #c30; } /* Literal.String.Double */
52
+ .highlight .se { color: #c30; } /* Literal.String.Escape */
53
+ .highlight .sh { color: #c30; } /* Literal.String.Heredoc */
54
+ .highlight .si { color: #a00; } /* Literal.String.Interpol */
55
+ .highlight .sx { color: #c30; } /* Literal.String.Other */
56
+ .highlight .sr { color: #3aa; } /* Literal.String.Regex */
57
+ .highlight .s1 { color: #c30; } /* Literal.String.Single */
58
+ .highlight .ss { color: #fc3; } /* Literal.String.Symbol */
59
+ .highlight .bp { color: #366; } /* Name.Builtin.Pseudo */
60
+ .highlight .vc { color: #033; } /* Name.Variable.Class */
61
+ .highlight .vg { color: #033; } /* Name.Variable.Global */
62
+ .highlight .vi { color: #033; } /* Name.Variable.Instance */
63
+ .highlight .il { color: #f60; } /* Literal.Number.Integer.Long */
64
+
65
+ .css .o,
66
+ .css .o + .nt,
67
+ .css .nt + .nt { color: #999; }
@@ -0,0 +1,7 @@
1
+ $body-color: #515151;
2
+ $white: #ffffff;
3
+ $lightgray: #fafafa;
4
+ $gray: #ecf0f1;
5
+ $dark-gray: #a0a0a0;
6
+ $dark-blue: #263959;
7
+ $dark: #333030;
@@ -0,0 +1,149 @@
1
+ @import 'normalize';
2
+ @import 'syntax';
3
+ @import 'variables';
4
+
5
+ *, *::after, *::before {
6
+ box-sizing: border-box;
7
+ }
8
+
9
+ html {
10
+ line-height: 1.5;
11
+ }
12
+
13
+ body {
14
+ font-family: 'Lato', sans-serif;
15
+ color: $body-color;
16
+ background-color: #fbfbfb;
17
+ margin: 0;
18
+ -webkit-font-smoothing: antialiased;
19
+ -moz-osx-font-smoothing: grayscale;
20
+ }
21
+
22
+ h1 {
23
+ font-weight: 400;
24
+ }
25
+
26
+ img {
27
+ max-width: 100%;
28
+ vertical-align: middle;
29
+ display: inline-block;
30
+ }
31
+
32
+ img + em {
33
+ text-align: center;
34
+ display: block;
35
+ margin-top: 10px;
36
+ font-style: normal;
37
+ font-weight: bold;
38
+ font-size: 14px;
39
+ }
40
+
41
+ blockquote {
42
+ border-left: 5px solid #000;
43
+ padding-left: 1.1rem;
44
+ margin-left: 1rem;
45
+ font-style: italic;
46
+ color: #ada8a8;
47
+ }
48
+
49
+ pre {
50
+ padding: 1rem 2rem;
51
+ overflow: auto;
52
+ white-space: pre-wrap;
53
+ word-wrap: break-word;
54
+ word-break: break-all;
55
+
56
+ code {
57
+ border: 0;
58
+ padding-right: 0;
59
+ padding-left: 0;
60
+ overflow: auto;
61
+ white-space: pre-wrap;
62
+ word-wrap: break-word;
63
+ word-break: break-all;
64
+ }
65
+ }
66
+
67
+ table {
68
+ border: 1px solid #aaa;
69
+ background-color: #eee;
70
+ width: 100%;
71
+ text-align: left;
72
+ border-collapse: collapse;
73
+ }
74
+ table td, table.blueTable th {
75
+ border: 1px solid #aaa;
76
+ padding: 3px 2px;
77
+ }
78
+ table tbody td {
79
+ font-size: 13px;
80
+ }
81
+ table tr:nth-child(even) {
82
+ background: #adbecc;
83
+ }
84
+ table thead {
85
+ background: #a9c4d1;
86
+ background: linear-gradient(to bottom, #bed3dc 0%, #b1cad5 66%, #A9C4D1 100%);
87
+ border-bottom: 1px solid #8c8c8c;
88
+ }
89
+ table thead th {
90
+ font-size: 14px;
91
+ font-weight: bold;
92
+ color: #fff;
93
+ border-left: 1px solid #d0e4f5;
94
+ }
95
+ table thead th:first-child {
96
+ border-left: none;
97
+ }
98
+
99
+ table tfoot {
100
+ font-size: 14px;
101
+ font-weight: bold;
102
+ color: #fff;
103
+ background: #d0e4f5;
104
+ background: linear-gradient(to bottom, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
105
+ border-top: 2px solid #444;
106
+ }
107
+ table tfoot td {
108
+ font-size: 14px;
109
+ }
110
+
111
+ .wrapper {
112
+ max-width: 1250px;
113
+ position: relative;
114
+ }
115
+
116
+ .post, .article-page {
117
+ background-color: #fff;
118
+ }
119
+
120
+ ::-moz-selection {
121
+ background: rgba(38, 57, 89, 0.8);
122
+ color: $white;
123
+ }
124
+
125
+ ::selection {
126
+ background: rgba(38, 57, 89, 0.8);
127
+ color: $white;
128
+ }
129
+
130
+ .clearfix::before, .clearfix::after {
131
+ content: "";
132
+ display: table;
133
+ }
134
+
135
+ .clearfix::after {
136
+ clear: both;
137
+ }
138
+
139
+ /* - - - - - - - - - - Home Page Styles - - - - - - - - - - */
140
+ @import 'parts/home-page';
141
+
142
+ /* - - - - - - - - - - Post Page Styles - - - - - - - - - - */
143
+ @import 'parts/post-page';
144
+
145
+ /* - - - - - - - - - - Tag Styles - - - - - - - - - - */
146
+ @import 'parts/tag';
147
+
148
+ /* - - - - - - - - - - Media Styles - - - - - - - - - - */
149
+ @import 'media';
@@ -0,0 +1,198 @@
1
+ .sidebar {
2
+ display: flex;
3
+ flex-direction: column;
4
+ justify-content: space-between;
5
+ position: fixed;
6
+ top: 0;
7
+ left: 0;
8
+ bottom: 0;
9
+ width: 240px;
10
+ height: 100%;
11
+ padding: 20px 10px;
12
+ background-color: $white;
13
+ }
14
+ .about {
15
+ margin: 0 0 40px;
16
+ text-align: center;
17
+ .cover-author-image {
18
+ width: 100px;
19
+ height: 100px;
20
+ margin: 0 auto 10px;
21
+ border-radius: 100%;
22
+ overflow: hidden;
23
+ background-color: $dark;
24
+ }
25
+ img {
26
+ width: 100%;
27
+ height: 100%;
28
+ border-radius: 50%;
29
+ transition: transform 0.35s;
30
+ &:hover {
31
+ transform: scale3d(0.90,0.90,1);
32
+ }
33
+ }
34
+ .author-name {
35
+ font-family: 'PT Serif', serif;
36
+ margin: 0 0 10px;
37
+ position: relative;
38
+ padding-bottom: 15px;
39
+ font-size: 16px;
40
+ text-transform: uppercase;
41
+ color: $dark;
42
+ font-weight: 700;
43
+ &::after {
44
+ content: "";
45
+ position: absolute;
46
+ left: 50%;
47
+ transform: translateX(-50%);
48
+ bottom: 0;
49
+ display: block;
50
+ width: 7px;
51
+ height: 7px;
52
+ border-radius: 100%;
53
+ background-color: $body-color;
54
+ }
55
+ }
56
+ p {
57
+ font-size: 16px;
58
+ margin: 0 0 10px;
59
+ }
60
+ }
61
+ .content-box {
62
+ padding: 20px;
63
+ padding-left: 260px;
64
+
65
+ display: flex;
66
+ flex-direction: row;
67
+ flex-wrap: wrap;
68
+ align-items: stretch;
69
+ }
70
+
71
+ .contact {
72
+ .contact-title {
73
+ position: relative;
74
+ color: $dark;
75
+ font-weight: 400;
76
+ font-size: 12px;
77
+ margin: 0 0 5px;
78
+ text-transform: uppercase;
79
+ text-align: center;
80
+ &::before {
81
+ content: "";
82
+ display: block;
83
+ height: 2px;
84
+ width: calc(50% - 48px);
85
+ transform: translateY(-50%);
86
+ position: absolute;
87
+ top: 50%;
88
+ left: 0;
89
+ background-color: $body-color;
90
+ }
91
+ &::after {
92
+ content: "";
93
+ display: block;
94
+ height: 2px;
95
+ width: calc(50% - 48px);
96
+ transform: translateY(-50%);
97
+ position: absolute;
98
+ top: 50%;
99
+ right: 0;
100
+ background-color: $body-color;
101
+ }
102
+ }
103
+ ul {
104
+ margin: 0;
105
+ padding: 0;
106
+ list-style: none;
107
+ text-align: center;
108
+ li {
109
+ display: inline-block;
110
+ margin-left: 10px;
111
+ &:first-child {
112
+ margin-left: 0;
113
+ }
114
+ a {
115
+ color: $body-color;
116
+ display: block;
117
+ padding: 5px;
118
+ font-size: 18px;
119
+ transition: all 350ms cubic-bezier(0.13, 0.43, 0.54, 1.82);
120
+ &:hover {
121
+ color: $dark;
122
+ transform: scale(1.2);
123
+ }
124
+ }
125
+ }
126
+ }
127
+ }
128
+
129
+ footer {
130
+ .copyright {
131
+ font-size: 14px;
132
+ text-align: center;
133
+ margin: 0;
134
+ }
135
+ }
136
+
137
+ .post {
138
+ width: 100%;
139
+ max-width: 100%;
140
+ margin-bottom: 1.5rem;
141
+ display: flex;
142
+ flex-direction: row;
143
+ align-items: stretch;
144
+ min-height: 11rem;
145
+ border-radius: 10px;
146
+ overflow: hidden;
147
+ transition: all .3s ease;
148
+ box-shadow: 0 1px 1px 0 rgba(31, 35, 46, .15);
149
+ &:hover {
150
+ transform: translate(0px, -2px);
151
+ box-shadow: 0 15px 45px -10px rgba(10, 16, 34, .2);
152
+ }
153
+
154
+ .post-thumbnail {
155
+ width: 30%;
156
+ max-width: 100%;
157
+ min-height: 11rem;
158
+ background-size: cover;
159
+ background-position: 50% 50%;
160
+ }
161
+
162
+ .post-content {
163
+ padding: 1rem;
164
+ width: 70%;
165
+ .post-date,
166
+ .post-words {
167
+ font-size: 12px;
168
+ }
169
+ .post-title {
170
+ margin: 0 0 10px;
171
+ font-size: 30px;
172
+ font-weight: 400;
173
+ a {
174
+ font-family: 'PT Serif', serif;
175
+ text-decoration: none;
176
+ color: $dark-blue;
177
+ }
178
+ }
179
+ p {
180
+ margin-top: 0;
181
+ }
182
+ }
183
+ }
184
+
185
+ a.older-posts, a.newer-posts {
186
+ font-size: 18px;
187
+ display: inline-block;
188
+ color: $body-color;
189
+ transition: transform .2s;
190
+ }
191
+
192
+ a.older-posts:hover {
193
+ transform: translateX(5px);
194
+ }
195
+
196
+ a.newer-posts:hover {
197
+ transform: translateX(-5px);
198
+ }
@@ -0,0 +1,91 @@
1
+ .wrap-content {
2
+ padding: 20px;
3
+ }
4
+
5
+ .header-page {
6
+ text-align: center;
7
+ margin: 10px 0;
8
+ .page-title {
9
+ font-weight: 400;
10
+ margin: 0 0 10px;
11
+ line-height: 1.3;
12
+ }
13
+ .page-date {
14
+ color: $dark-gray;
15
+ font-weight: 300;
16
+ font-size: 12px;
17
+ text-transform: uppercase;
18
+ }
19
+ }
20
+
21
+ .page-cover-image {
22
+ position: relative;
23
+ padding: 0;
24
+ margin: 0;
25
+ max-height: 500px;
26
+ background-color: $lightgray;
27
+ overflow: hidden;
28
+ figure {
29
+ position: relative;
30
+ margin: 0;
31
+ }
32
+ figcaption {
33
+ position: absolute;
34
+ top: 20px;
35
+ right: 20px;
36
+ padding-left: 20px;
37
+ color: rgba(255, 255, 255, 0.7);
38
+ text-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
39
+ font-weight: 700;
40
+ text-transform: uppercase;
41
+ font-size: 10px;
42
+ }
43
+ .page-image {
44
+ width: 100%;
45
+ height: 100%;
46
+ }
47
+ }
48
+
49
+ .page-footer {
50
+ display: flex;
51
+ justify-content: space-between;
52
+ flex-wrap: wrap;
53
+ padding-bottom: 30px;
54
+ margin: 30px 0 ;
55
+ border-bottom: 1px solid $dark-gray;
56
+ .page-share {
57
+ margin-bottom: 10px;
58
+ text-align: left;
59
+ a {
60
+ display: inline-block;
61
+ text-decoration: none;
62
+ background-color: $lightgray;
63
+ border: 1px solid $gray;
64
+ padding: 5px 10px;
65
+ margin-left: 5px;
66
+ color: $dark-blue;
67
+ font-size: 12px;
68
+ transition: background-color .3s;
69
+ &:first-child {
70
+ margin-left: 0;
71
+ }
72
+ &:hover {
73
+ background-color: $gray;
74
+ }
75
+ }
76
+ }
77
+ .page-tag {
78
+ a {
79
+ text-decoration: none;
80
+ font-size: 10px;
81
+ padding: 5px 10px;
82
+ margin-left: 5px;
83
+ color: $dark-blue;
84
+ text-transform: uppercase;
85
+ border: 1px solid $dark-blue;
86
+ &:hover {
87
+ text-decoration: underline;
88
+ }
89
+ }
90
+ }
91
+ }