6 |
7 |
8 |
{{ page.title }}
9 |
10 |
11 |
12 | {% for category in page.category %}
13 |
{{ site.category | where: "category", category | map: "title"}}
14 | {% else %}
15 |
No category
16 | {% endfor %}
17 |
18 |
·
19 |
20 | {{ page.date | date: '%B %d, %Y' }}
21 |
22 | {% if page.author != nil %}
23 | {% assign author = site.authors | where: "nick", page.author | first %}
24 |
·
25 |
26 |
by
27 |
28 |
{{ author.full_name }}
29 |
30 | {% endif %}
31 |
58 | {{ content }}
59 |
60 |
61 |
--------------------------------------------------------------------------------
/assets/js/lity.min.css:
--------------------------------------------------------------------------------
1 | /*! Lity - v2.4.1 - 2020-04-26
2 | * http://sorgalla.com/lity/
3 | * Copyright (c) 2015-2020 Jan Sorgalla; Licensed MIT */.lity{z-index:9990;position:fixed;top:0;right:0;bottom:0;left:0;white-space:nowrap;background:#0b0b0b;background:rgba(0,0,0,0.9);outline:none !important;opacity:0;-webkit-transition:opacity .3s ease;-o-transition:opacity .3s ease;transition:opacity .3s ease}.lity.lity-opened{opacity:1}.lity.lity-closed{opacity:0}.lity *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.lity-wrap{z-index:9990;position:fixed;top:0;right:0;bottom:0;left:0;text-align:center;outline:none !important}.lity-wrap:before{content:'';display:inline-block;height:100%;vertical-align:middle;margin-right:-0.25em}.lity-loader{z-index:9991;color:#fff;position:absolute;top:50%;margin-top:-0.8em;width:100%;text-align:center;font-size:14px;font-family:Arial,Helvetica,sans-serif;opacity:0;-webkit-transition:opacity .3s ease;-o-transition:opacity .3s ease;transition:opacity .3s ease}.lity-loading .lity-loader{opacity:1}.lity-container{z-index:9992;position:relative;text-align:left;vertical-align:middle;display:inline-block;white-space:normal;max-width:100%;max-height:100%;outline:none !important}.lity-content{z-index:9993;width:100%;-webkit-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);-webkit-transition:-webkit-transform .3s ease;transition:-webkit-transform .3s ease;-o-transition:-o-transform .3s ease;transition:transform .3s ease;transition:transform .3s ease, -webkit-transform .3s ease, -o-transform .3s ease}.lity-loading .lity-content,.lity-closed .lity-content{-webkit-transform:scale(.8);-ms-transform:scale(.8);-o-transform:scale(.8);transform:scale(.8)}.lity-content:after{content:'';position:absolute;left:0;top:0;bottom:0;display:block;right:0;width:auto;height:auto;z-index:-1;-webkit-box-shadow:0 0 8px rgba(0,0,0,0.6);box-shadow:0 0 8px rgba(0,0,0,0.6)}.lity-close{z-index:9994;width:35px;height:35px;position:fixed;right:0;top:0;-webkit-appearance:none;cursor:pointer;text-decoration:none;text-align:center;padding:0;color:#fff;font-style:normal;font-size:35px;font-family:Arial,Baskerville,monospace;line-height:35px;text-shadow:0 1px 2px rgba(0,0,0,0.6);border:0;background:none;outline:none;-webkit-box-shadow:none;box-shadow:none}.lity-close::-moz-focus-inner{border:0;padding:0}.lity-close:hover,.lity-close:focus,.lity-close:active,.lity-close:visited{text-decoration:none;text-align:center;padding:0;color:#fff;font-style:normal;font-size:35px;font-family:Arial,Baskerville,monospace;line-height:35px;text-shadow:0 1px 2px rgba(0,0,0,0.6);border:0;background:none;outline:none;-webkit-box-shadow:none;box-shadow:none}.lity-close:active{top:1px}.lity-image img{max-width:100%;display:block;line-height:0;border:0}.lity-iframe .lity-container,.lity-youtube .lity-container,.lity-vimeo .lity-container,.lity-facebookvideo .lity-container,.lity-googlemaps .lity-container{width:100%;max-width:964px}.lity-iframe-container{width:100%;height:0;padding-top:56.25%;overflow:auto;pointer-events:auto;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-overflow-scrolling:touch}.lity-iframe-container iframe{position:absolute;display:block;top:0;left:0;width:100%;height:100%;-webkit-box-shadow:0 0 8px rgba(0,0,0,0.6);box-shadow:0 0 8px rgba(0,0,0,0.6);background:#000}.lity-hide{display:none}
--------------------------------------------------------------------------------
/_sass/_global.scss:
--------------------------------------------------------------------------------
1 | // =============================
2 | // global.scss
3 | // =============================
4 | // Used for global styles.
5 |
6 | *, *:before, *:after{
7 | box-sizing: border-box;
8 | }
9 |
10 | html{
11 |
12 | font-family: var(--f-text);
13 |
14 | // Root font size. Other sizes are derived from this accroding to variable values.
15 | font-size: 16px;
16 |
17 | @include for-size('tablet'){
18 | font-size: 18px;
19 | }
20 | }
21 |
22 | body{
23 | background: var(--c-pageBackground);
24 |
25 | margin: 0;
26 | min-height: 100vh;
27 |
28 | display: flex;
29 | flex-direction: column;
30 | align-items: center;
31 | justify-content: center;
32 | }
33 |
34 | h1,h2,h3,h4,h5,h5,h6{
35 |
36 | font-family: var(--f-header);
37 | }
38 |
39 | h1{
40 |
41 | font-size: 2rem;
42 | }
43 |
44 | p{
45 | font-size: var(--s-p);
46 | }
47 |
48 | a{
49 |
50 | &:link{
51 | color: var(--c-link);
52 | }
53 |
54 | &:visited{
55 | color: var(--c-linkVisited);
56 | }
57 |
58 | &:hover{
59 | color: var(--c-linkHover);
60 | }
61 |
62 | &:active{
63 | color: var(--c-linkActive);
64 | }
65 | }
66 |
67 | table:not([class]){
68 | border-collapse: collapse;
69 | border-spacing: 0;
70 | border: 1px solid var(--c-tableBorder);
71 |
72 | th,td{
73 | padding: .25rem;
74 | border: 1px solid var(--c-tableBorder);
75 | }
76 | }
77 |
78 | .highlight{
79 |
80 | margin: 2rem 0;
81 | transition: $t-smooth;
82 | box-shadow: inset 0px 0px 14px -4px var(--c-codeShadow);
83 |
84 | &:hover{
85 | box-shadow: inset 0px 0px 14px -4px var(--c-codeShadowHover);
86 | }
87 |
88 | max-width: calc(100vw - 2rem);
89 | overflow-x: auto;
90 |
91 | pre{
92 | margin: 0;
93 | padding: 1rem;
94 | }
95 | }
96 |
97 | .sx-center{
98 |
99 | display: flex;
100 | align-items: center;
101 | justify-content: center;
102 | }
103 |
104 | .sx-button{
105 |
106 | width: 100%;
107 | margin: 1rem 0;
108 | display: flex;
109 | align-items: center;
110 | justify-content: center;
111 |
112 | &__content{
113 |
114 | &:link, &:visited, &:hover, &:active{
115 | color: var(--c-themePrimaryLight);
116 | }
117 | text-decoration: none;
118 | width: fit-content;
119 | padding: .5rem 1rem;
120 | display: flex;
121 | align-items: center;
122 | justify-content: center;
123 | transition: $t-smooth;
124 |
125 | &.red{background-color: var(--c-themeHueRed);}
126 | &.orange{background-color: var(--c-themeHueOrange);}
127 | &.green{background-color: var(--c-themeHueGreen);}
128 | &.blue{background-color: var(--c-themeHueBlue);}
129 | &.purple{background-color: var(--c-themeHuePurple);}
130 | &.brown{background-color: var(--c-themeHueBrown);}
131 |
132 | img{
133 | margin-right: 1rem;
134 | height: 1rem;
135 | filter: brightness(0) invert(1);
136 | }
137 |
138 | &:hover{
139 | letter-spacing: .05rem;
140 | }
141 | }
142 | }
143 |
144 | .sx-subtitle{
145 | font-style: italic;
146 | color: var(--c-subtitle);
147 | }
148 |
149 | .sx-picture{
150 |
151 | display: flex;
152 | flex-direction: column;
153 | align-items: center;
154 | justify-content: center;
155 | width: fit-content;
156 | margin: 1.5rem 0;
157 | }
--------------------------------------------------------------------------------
/_sass/_post.scss:
--------------------------------------------------------------------------------
1 | // =============================
2 | // post.scss
3 | // =============================
4 | // Used for single post view.
5 |
6 | $postMaxWidth: 1000px;
7 |
8 | .post{
9 |
10 | justify-self: center;
11 | margin: 0 2rem;
12 | max-width: $postMaxWidth;
13 | @include flexbox{
14 | flex-direction: column;
15 | justify-content: flex-start;
16 | align-items: center;
17 | }
18 |
19 | &__title{
20 |
21 | &__text{
22 | text-align: center;
23 | color: var(--c-postTitle);
24 | margin-bottom: 0;
25 | }
26 | }
27 |
28 | &__meta{
29 |
30 | @include flexbox;
31 | width: 100%;
32 |
33 | &__divider{
34 | color: var(--c-postText);
35 | margin: 0 1rem;
36 |
37 | @include for-size('tablet'){
38 | display: none;
39 | }
40 | }
41 |
42 | &__category{
43 | text-transform: uppercase;
44 | margin: 0;
45 | @include flexbox;
46 |
47 | &__title{
48 | color: var(--c-noCategoryText);
49 | background: var(--c-noCategoryBackground);
50 | padding: .2rem .5rem;
51 | }
52 |
53 | @include for-size('tablet'){
54 |
55 | display: none;
56 | margin-top: 1rem;
57 | p{
58 | margin: 0;
59 | width: 100%;
60 | text-align: center;
61 | }
62 | flex-direction: column;
63 | }
64 | }
65 |
66 | &__date{
67 |
68 | color: var(--c-postText);
69 | @include for-size('tablet'){
70 | margin-top: .5rem;
71 | }
72 | }
73 |
74 | &__author{
75 |
76 | color: var(--c-postText);
77 | width: fit-content;
78 | @include flexbox;
79 |
80 | &__photo{
81 | margin: 0 1rem;
82 | width: 2rem;
83 | border-radius: 100%;
84 | }
85 | }
86 |
87 | @include for-size('tablet'){
88 | flex-direction: column;
89 | }
90 | }
91 |
92 | &__content{
93 |
94 | color: var(--c-postText);
95 | h1{
96 | font-size: 1.8rem;
97 | }
98 | img{
99 | max-width: 100%;
100 | }
101 | }
102 |
103 | &__navigator{
104 |
105 | margin-top: 1rem;
106 | width: 100%;
107 |
108 | &__buttons{
109 |
110 | @include flexbox{
111 | justify-content: space-between;
112 | };
113 |
114 | a{
115 | transition: $t-smooth;
116 | text-decoration: none;
117 | font-weight: bold;
118 | font-size: 1.25rem;
119 | color: var(--c-navigator);
120 | filter: var(--c-navigatorFilter);
121 |
122 | display: flex;
123 | align-items: center;
124 |
125 | &:hover{
126 | letter-spacing: .25rem;
127 | }
128 |
129 | .arrow-left{
130 | margin-right: .5rem;
131 | height: 1em;
132 | }
133 | .arrow-right{
134 | margin-left: .5rem;
135 | height: 1em;
136 | }
137 | }
138 | }
139 | }
140 | }
141 |
142 | // Enable text wrapping on mobile
143 | @media screen and (max-width: $postMaxWidth){
144 | .post{
145 | max-width: calc(100% - 2rem);
146 |
147 | &__content{
148 | max-width: 100%;
149 | }
150 |
151 | &__content p{
152 | overflow-wrap: break-word;
153 | }
154 | }
155 | }
156 |
--------------------------------------------------------------------------------
/_sass/_feed.scss:
--------------------------------------------------------------------------------
1 | // =============================
2 | // feed.scss
3 | // =============================
4 | // Used for page feed - used in index and categories.
5 |
6 | .feed{
7 |
8 | padding: 2rem;
9 | margin: 2rem;
10 | max-width: 1000px;
11 | width: 100%;
12 | justify-self: center;
13 |
14 | @include flexbox{
15 | flex-direction: column;
16 | };
17 |
18 | &__description{
19 | @include flexbox{
20 | flex-direction: column;
21 | };
22 |
23 | color: var(--c-feed-title);
24 |
25 | text-align: center;
26 | padding: 0 2rem;
27 | margin-bottom: 2rem;
28 | min-width: 80%;
29 |
30 | h1{
31 | margin: 1rem 0 0 0;
32 |
33 | @include for-size('tablet'){
34 | margin: 0;
35 | }
36 | }
37 | }
38 |
39 | .snippet{
40 |
41 | @include flexbox;
42 | position: relative;
43 | width: 100%;
44 |
45 | &__link{
46 | text-decoration: none;
47 | color: initial;
48 | width: 100%;
49 | height: 100%;
50 | margin: 1rem 0;
51 | padding: 1rem 2rem;
52 | box-shadow: inset 0px 0px 14px -4px var(--c-snippetShadow);
53 | transition: $t-smooth;
54 |
55 | &:hover{
56 | transform: scale(.99);
57 | box-shadow: inset 0px 0px 14px -4px var(--c-snippetShadowHover);
58 | }
59 | }
60 |
61 | @include for-size('tablet'){
62 | width: 100%;
63 | padding: 0;
64 | }
65 |
66 | &__data{
67 |
68 | @include flexbox{
69 | flex-direction: column;
70 | align-items: flex-start;
71 | };
72 |
73 | &__metadata{
74 | font-family: var(--f-header);
75 |
76 | @include flexbox;
77 |
78 | &__category{
79 | text-transform: uppercase;
80 | margin: 0;
81 | @include flexbox;
82 |
83 | &__title{
84 | color: var(--c-noCategoryText);
85 | background: var(--c-noCategoryBackground);
86 | padding: .2rem .5rem;
87 | }
88 |
89 |
90 | @include for-size('tablet'){
91 | flex-direction: column;
92 |
93 | p{
94 | text-align: center;
95 | width: 100%;
96 | margin: 0;
97 | }
98 | }
99 | }
100 |
101 | &__date{
102 | margin: 0 0 0 1rem;
103 | color: var(--c-snippetDate);
104 |
105 | @include for-size('tablet'){
106 | margin: 1rem 0 0 0;
107 | }
108 | }
109 |
110 | @include for-size('tablet'){
111 | flex-direction: column;
112 | }
113 | }
114 |
115 | &__header{
116 | margin: 1rem 0 0 0;
117 | color: var(--c-articleHeading);
118 |
119 | @include for-size('tablet'){
120 | margin: 1rem 0 0 0;
121 | text-align: center;
122 | }
123 | }
124 |
125 | &__text{
126 |
127 | color: var(--c-snippetHeading);
128 | margin: 1rem 0 0 0;
129 | }
130 |
131 | &__author{
132 |
133 | margin: 1.5rem 0 0 0;
134 | color: var(--c-snippetAuthor);
135 |
136 | @include flexbox{
137 | flex-direction: row;
138 | };
139 |
140 | img{
141 | height: 2rem;
142 | border-radius: 100%;
143 | }
144 |
145 | p{
146 | margin: 0 0 0 1rem;
147 | }
148 | }
149 |
150 | @include for-size('tablet'){
151 | align-items: center;
152 | }
153 | }
154 |
155 | &::after{
156 | content: "";
157 | position: absolute; top: 0; left: 0; width: 100%; height: 100%;
158 | z-index: -1;
159 | background-size: cover;
160 | background-repeat: no-repeat;
161 | background-position: center;
162 | opacity: .2;
163 |
164 | @include for-size('tablet'){
165 | opacity: .3;
166 | }
167 | }
168 | }
169 |
170 | @include for-size('tablet'){
171 | padding: 0;
172 | }
173 | }
--------------------------------------------------------------------------------
/assets/js/lity.min.js:
--------------------------------------------------------------------------------
1 | /*! Lity - v2.4.1 - 2020-04-26
2 | * http://sorgalla.com/lity/
3 | * Copyright (c) 2015-2020 Jan Sorgalla; Licensed MIT */
4 |
5 | !function(a,b){"function"==typeof define&&define.amd?define(["jquery"],function(c){return b(a,c)}):"object"==typeof module&&"object"==typeof module.exports?module.exports=b(a,require("jquery")):a.lity=b(a,a.jQuery||a.Zepto)}("undefined"!=typeof window?window:this,function(a,b){"use strict";function c(a){var b=B();return N&&a.length?(a.one(N,b.resolve),setTimeout(b.resolve,500)):b.resolve(),b.promise()}function d(a,c,d){if(1===arguments.length)return b.extend({},a);if("string"==typeof c){if(void 0===d)return void 0===a[c]?null:a[c];a[c]=d}else b.extend(a,c);return this}function e(a){for(var b,c=decodeURI(a.split("#")[0]).split("&"),d={},e=0,f=c.length;e
44 | Previous
45 |
46 | {% endif %}
47 | {% if page.nextPart != nil %}
48 |
49 | Next
50 | 
51 |
52 | {% endif %}
53 | 
7 |
8 | A *simple* yet neat blogging theme. Developed for the [golas blog](https://golas.blog/) project.
9 |
10 |
11 | ## 👓 Preview
12 | 
13 |
14 | ## 💎 Features
15 | ### Responsive
16 | 
17 |
18 | ### Dark mode
19 | 
20 |
21 | ### Buttons
22 | 
23 |
24 | ### Lity Lightbox
25 | Supports images, videos, iFrames and more. See below for syntax.
26 |
27 | ### Open Graph tags
28 |
29 | ## ℹ Installation
30 |
31 | Add this line to your Jekyll site's `Gemfile`:
32 |
33 | ```ruby
34 | gem "jekyll-theme-simplex"
35 | ```
36 |
37 | And add this line to your Jekyll site's `_config.yml`:
38 |
39 | ```yaml
40 | theme: jekyll-theme-simplex
41 | ```
42 |
43 | And then execute:
44 |
45 | $ bundle
46 |
47 | Or install it yourself as:
48 |
49 | $ gem install jekyll-theme-simplex
50 |
51 | ## ✔ Usage
52 |
53 | ### ⚙ Setting up the template
54 | Add following to the `_config.yml`:
55 | ```yaml
56 | logo_img: /assets/img/icons/golasblog_logo.svg #Absolute path to the logo. If not specified, the title will be displayed instead.
57 | copyright: © Golasowski 2020 #Your copyright.
58 |
59 | collections:
60 | category:
61 | output: true
62 | authors:
63 | output: false
64 |
65 | defaults:
66 | -
67 | scope:
68 | path: ""
69 | type: category
70 | values:
71 | layout: "category"
72 | ```
73 |
74 | ### ✨ Defining categories
75 | Create a `_category` folder in the root directory of the blog. Create a `.md` file for every category with the contents:
76 | ```
77 | ---
78 | category: [design] #Category ID.
79 | hue: var(--c-themeHueOrange) #Category hue. See note [1].
80 | title: Design #Category title.
81 | description: Lorem ipsum dolor sit amet.
82 | ---
83 | ```
84 |
85 | ### 🤵 Defining authors
86 | Create a `_authors` folder in the root directory. Create a `.md` file for every author with the contents:
87 | ```
88 | ---
89 | nick: golas #Author's nick.
90 | full_name: Andrew Golasowski #Author's full name.
91 | photo_dir: assets/img/authors/golas.png #Path to the author's pic.
92 | ---
93 | ```
94 |
95 | ### 📰 Defining the menu
96 | Create a `_data` folder in the root directory. In the folder, create a `nav.yaml` file. Here's an example:
97 | ```yaml
98 | - title: Programming #Menu item title.
99 | url: category/programming.html #Menu item url.
100 | icon: assets/img/icons/programming.svg #Menu item icon.
101 | hue: "var(--c-themeHueRed)" #Menu item hue - see note [1].
102 | subnav: #Subnav. See note [2].
103 | - title: C++ #Submenu item title.
104 | url: category/cpp.html #Submenu item url.
105 | hue: "var(--c-themeHueOrange)" #Submenu item hue.
106 | subnav: #Another subnav
107 | - title: Libraries
108 | url: libs.html
109 | hue: "var(--c-themeHueBlue)"
110 | - title: Design
111 | url: category/design.html
112 | icon: assets/img/icons/design.svg
113 | hue: "var(--c-themeHueRed)"
114 | ```
115 | #### Pro tip:
116 | Use color icons with the same hue as the menu items. Icons will be black and on hover the color will be shown.
117 |
118 | ### ✒ Creating posts
119 | Posts are created in the `_posts` directory. Following front matter attributes are supported:
120 | ```
121 | ---
122 | layout: post #Do not change.
123 | category: [programming, testing] #One, more categories or no at all.
124 | title: "Lorem ipsum" #Article title.
125 | author: andy #Author's nick.
126 | nextPart: _posts/2021-01-30-example.md #Next part.
127 | prevPart: _posts/2021-01-30-example.md #Previous part.
128 | og_image: assets/example.png #Open Graph preview image.
129 | og_description: "Example description." #Open Graph description.
130 | fb_app_id: example
131 | ---
132 | Your markdown content here.
133 | ```
134 |
135 | ### ⚡ Syntax highlighting
136 | The theme uses Pygments CSS created by [@richleland](https://github.com/richleland). If you want to modify the highlighting styles, just download different CSS or create your own - see [Jekyll docs](https://jekyllrb.com/docs/liquid/tags/#stylesheets-for-syntax-highlighting).
137 |
138 | Note - `@media` is used to manage different styles for light and dark web browser mode. See `_variables.scss` file for details.
139 |
140 | ### 📷 Inserting pictures
141 | Classic Markdown syntax is supported. However, to be able to use the lightbox feature, you have to use HTML syntax. Minimal example:
142 | ```html
143 | 
145 | 
#{text}
174 |