danilov-blog 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 ADDED
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA256:
3
+ metadata.gz: ad0c3c2ba25e1502b5a1edf22c27fd52fe911c817b8257379ea4dd6832137af8
4
+ data.tar.gz: 39d3a0f2f16658ea6121086a718341df255bab111535ed7aae162684cea6bdd8
5
+ SHA512:
6
+ metadata.gz: 39c09cdd9da837c7d1d9b9a3992bb56ff1787f871494f2cc8b5ad425d1f3358df0d9142c6e709db7b9792882ea566fdbcce4f4beb29fffe34b4bd41589bba5f2
7
+ data.tar.gz: bfb04cbfecef00de4b4e5893338c66a7f5feef027b2212bd11d36bbe85b9ffa4e197284e4ee235f12130a45e78160f50ab954bbf4193610b1c399424dd0e220c
data/README.md ADDED
@@ -0,0 +1,42 @@
1
+ # danilov-blog
2
+
3
+ Personal jekyll theme for [danilov.pw](https://danilov.pw)
4
+
5
+ ## Installation
6
+
7
+ Add this line to your Jekyll site's `Gemfile`:
8
+
9
+ ```ruby
10
+ gem "danilov-blog"
11
+ ```
12
+
13
+ And add this line to your Jekyll site's `_config.yml`:
14
+
15
+ ```yaml
16
+ theme: danilov-blog
17
+ ```
18
+
19
+ And then execute:
20
+
21
+ $ bundle
22
+
23
+ Or install it yourself as:
24
+
25
+ $ gem install danilov-blog
26
+
27
+ ## Usage
28
+
29
+ Markdown file has special variables:
30
+
31
+ 1. title - title for tab in browser
32
+ 2. header_title - title for site header buttons
33
+
34
+ To install pages in the header use `header_pages` var in `_config.yml`
35
+
36
+ ## Contributing
37
+
38
+ Bug reports and pull requests are welcome on GitHub at [jekyll-theme-danilov-blog](https://github.com/dan1lov/jekyll-theme-danilov-blog). This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](https://www.contributor-covenant.org/) code of conduct.
39
+
40
+ ## License
41
+
42
+ The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
@@ -0,0 +1,9 @@
1
+ <head>
2
+ <meta name="viewport" content="width=device-width,initial-scale=1">
3
+
4
+ <meta charset="utf-8">
5
+ <title>{{ page.title }}</title>
6
+
7
+ <link rel="stylesheet" href="/assets/css/style.css">
8
+ <script type="text/javascript" src="/assets/js/theme-index.js"></script>
9
+ </head>
@@ -0,0 +1,24 @@
1
+ {%- assign page_paths = site.header_pages | default: default_paths -%}
2
+
3
+ <header class="header">
4
+ {%- for path in page_paths -%}
5
+ {%- assign my_page = site.pages | where: 'path', path | first -%}
6
+ {% assign current_page = page.url | downcase | split: '/' %}
7
+ {% assign parent_page = my_page.url | downcase | split: '/' %}
8
+ {%- if my_page.header_title -%}
9
+ <div class="header__item">
10
+ <a
11
+ href="{{ my_page.url | relative_url }}"
12
+ class="header__link{% if current_page[1] == parent_page[1] %} header__link_active{% endif %}"
13
+ >
14
+ {{ my_page.header_title | escape }}
15
+ </a>
16
+ </div>
17
+ {%- endif -%}
18
+ {%- endfor -%}
19
+
20
+ <div id="theme-switcher" class="header__item theme-switcher">
21
+ <img alt="" src="/assets/icons/sun.svg" class="theme-switcher__light">
22
+ <img alt="" src="/assets/icons/moon.svg" class="theme-switcher__dark">
23
+ </div>
24
+ </header>
@@ -0,0 +1,19 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ {%- include head.html -%}
4
+
5
+ <body>
6
+ <div class="wrapper">
7
+ {%- include header.html -%}
8
+
9
+ <section class="container container_{{page.layout}}">
10
+ {{ content }}
11
+ </section>
12
+ </div>
13
+
14
+ <script
15
+ type="text/javascript"
16
+ src="/assets/js/theme-listener.js"
17
+ ></script>
18
+ </body>
19
+ </html>
@@ -0,0 +1,4 @@
1
+ ---
2
+ layout: default
3
+ ---
4
+ {{ content }}
@@ -0,0 +1,4 @@
1
+ ---
2
+ layout: default
3
+ ---
4
+ {{ content }}
@@ -0,0 +1,95 @@
1
+ .header {
2
+ align-items: center;
3
+ display: flex;
4
+ margin: 0 0 10px;
5
+ }
6
+
7
+ .header__item:first-child {
8
+ margin-left: 0;
9
+ }
10
+
11
+ .header__item {
12
+ display: inline-block;
13
+ margin: 10px;
14
+ }
15
+
16
+ .header__link {
17
+ color: var(--color-primary-hex);
18
+ font-size: 16px;
19
+ font-weight: 500;
20
+ line-height: 20px;
21
+ text-decoration: none;
22
+ transition: $transitionOptions;
23
+ }
24
+
25
+ .header__link:hover,
26
+ .header__link_active {
27
+ color: var(--color-accent-hex);
28
+ }
29
+
30
+ // theme-switcher
31
+ .theme-switcher {
32
+ cursor: pointer;
33
+ display: flex;
34
+ height: 24px;
35
+ justify-content: center;
36
+ margin-left: auto;
37
+ position: relative;
38
+ }
39
+
40
+ .theme-switcher__light,
41
+ .theme-switcher__dark {
42
+ position: absolute;
43
+
44
+ animation-duration: 0.3s;
45
+ animation-iteration-count: var(--theme-switcher-iterations);
46
+ }
47
+
48
+ :root[data-theme="light"] {
49
+ .theme-switcher__light {
50
+ opacity: 0;
51
+ animation-name: themeSwitcher-Exit;
52
+ }
53
+
54
+ .theme-switcher__dark {
55
+ opacity: 1;
56
+ animation-name: themeSwitcher-Enter;
57
+ }
58
+ }
59
+
60
+ :root[data-theme="dark"] {
61
+ .theme-switcher__light {
62
+ opacity: 1;
63
+ animation-name: themeSwitcher-Enter;
64
+ }
65
+
66
+ .theme-switcher__dark {
67
+ opacity: 0;
68
+ animation-name: themeSwitcher-Exit;
69
+ }
70
+ }
71
+
72
+ // keyframes
73
+ @keyframes themeSwitcher-Enter {
74
+ 0% {
75
+ opacity: 0;
76
+ transform: scale(0.8) rotate(60deg);
77
+ }
78
+
79
+ 100% {
80
+ opacity: 1;
81
+ transform: scale(1) rotate(0);
82
+ }
83
+ }
84
+
85
+ @keyframes themeSwitcher-Exit {
86
+ 0% {
87
+ opacity: 1;
88
+ transform: scale(1) rotate(0);
89
+ }
90
+
91
+ 100% {
92
+ opacity: 0;
93
+ transform: scale(0.8) rotate(-45deg);
94
+ }
95
+ }
@@ -0,0 +1,59 @@
1
+ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600&display=swap&family=Roboto+Mono:wght@300;400;500;600&display=swap");
2
+
3
+ // variables
4
+ $light__color-background: #f7f7ff;
5
+ $light__color-primary-hex: #141414;
6
+ $light__color-primary-rgb: 20, 20, 20;
7
+ $light__color-accent-hex: #007fff;
8
+ $light__color-accent-rgb: 0, 127, 255;
9
+
10
+ $dark__color-background: #141414;
11
+ $dark__color-primary-hex: #e6e6e6;
12
+ $dark__color-primary-rgb: 230, 230, 230;
13
+ $dark__color-accent-hex: #cc5a33;
14
+ $dark__color-accent-rgb: 204, 90, 51;
15
+
16
+ $fontFamilyMain: "Roboto Mono", sans-serif;
17
+ $fontFamilyPost: "Open Sans", $fontFamilyMain;
18
+ $transitionOptions: all 0.3s ease-out;
19
+
20
+ :root[data-theme="light"] {
21
+ --color-accent-hex: #{$light__color-accent-hex};
22
+ --color-accent-rgb: #{$light__color-accent-rgb};
23
+ --color-background: #{$light__color-background};
24
+ --color-primary-hex: #{$light__color-primary-hex};
25
+ --color-primary-rgb: #{$light__color-primary-rgb};
26
+ --theme-switcher-iterations: 0;
27
+ }
28
+
29
+ :root[data-theme="dark"] {
30
+ --color-accent-hex: #{$dark__color-accent-hex};
31
+ --color-accent-rgb: #{$dark__color-accent-rgb};
32
+ --color-background: #{$dark__color-background};
33
+ --color-primary-hex: #{$dark__color-primary-hex};
34
+ --color-primary-rgb: #{$dark__color-primary-rgb};
35
+ --theme-switcher-iterations: 0;
36
+ }
37
+
38
+ // default
39
+ body {
40
+ background: var(--color-background);
41
+ color: var(--color-primary-hex);
42
+ font-family: $fontFamilyMain;
43
+ transition: $transitionOptions;
44
+ }
45
+
46
+ :root[data-theme="dark"] img[src*=".svg"] {
47
+ filter: invert(100%) sepia(0%) saturate(5880%) hue-rotate(297deg)
48
+ brightness(119%) contrast(80%);
49
+ }
50
+
51
+ // classes
52
+ .wrapper {
53
+ display: flex;
54
+ flex-direction: column;
55
+ margin: 10vh auto;
56
+ max-width: 80vw;
57
+ position: relative;
58
+ width: 620px;
59
+ }
@@ -0,0 +1,162 @@
1
+ // typography
2
+ h1 {
3
+ font-size: 16px;
4
+ transition: $transitionOptions;
5
+ }
6
+
7
+ h2,
8
+ h3,
9
+ h4,
10
+ h5,
11
+ h6 {
12
+ font-size: 15px;
13
+ margin: 30px 0 16px 0;
14
+ transition: 200ms all ease-out;
15
+ }
16
+
17
+ .container_post p {
18
+ font-family: $fontFamilyPost;
19
+ font-size: 14px;
20
+ font-weight: 400;
21
+ line-height: 150%;
22
+ text-align: justify;
23
+ transition: $transitionOptions;
24
+ }
25
+
26
+ .container_page p {
27
+ font-size: 14px;
28
+ font-weight: 500;
29
+ line-height: 16px;
30
+ text-align: justify;
31
+ transition: $transitionOptions;
32
+ }
33
+
34
+ hr {
35
+ background: rgba(var(--color-primary-rgb), 0.1);
36
+ border: none;
37
+ height: 1px;
38
+ width: 100%;
39
+ }
40
+
41
+ a {
42
+ color: var(--color-accent-hex);
43
+ text-decoration: none;
44
+ transition: $transitionOptions;
45
+ }
46
+
47
+ a:hover {
48
+ color: var(--color-primary-hex);
49
+ }
50
+
51
+ dl {
52
+ font-family: $fontFamilyPost;
53
+ font-weight: 400;
54
+ }
55
+
56
+ // blockquote
57
+ blockquote {
58
+ background: rgba(var(--color-accent-rgb), 0.05);
59
+ border-radius: 4px 8px 8px 4px;
60
+ box-sizing: border-box;
61
+ margin: 0;
62
+ overflow: hidden;
63
+ padding: 16px 16px 16px 24px;
64
+ position: relative;
65
+ }
66
+
67
+ blockquote::before {
68
+ background: rgba(var(--color-accent-rgb), 0.4);
69
+ content: "";
70
+ display: block;
71
+ height: 100%;
72
+ left: 0;
73
+ position: absolute;
74
+ top: 0;
75
+ width: 2px;
76
+ }
77
+
78
+ blockquote > p {
79
+ margin: 0;
80
+ }
81
+
82
+ // images
83
+ img {
84
+ border-radius: 8px;
85
+ box-shadow: 0 4px 40px 0 rgba(var(--color-primary-rgb), 0.1);
86
+ }
87
+
88
+ img + em {
89
+ color: rgba(var(--color-primary-rgb), 0.5);
90
+ display: block;
91
+ font-size: 13px;
92
+ font-style: normal;
93
+ font-weight: 500;
94
+ text-align: center;
95
+ width: 100%;
96
+ }
97
+
98
+ // table
99
+ table {
100
+ width: 100%;
101
+ }
102
+
103
+ thead {
104
+ background: rgba(var(--color-primary-rgb), 0.1);
105
+ }
106
+
107
+ tr {
108
+ text-align: center;
109
+ }
110
+
111
+ tr:hover {
112
+ background: rgba(var(--color-primary-rgb), 0.05);
113
+ }
114
+
115
+ // raw code
116
+ code {
117
+ background: rgba(var(--color-primary-rgb), 0.05);
118
+ font-family: $fontFamilyMain;
119
+ }
120
+
121
+ pre {
122
+ background: rgba(var(--color-primary-rgb), 0.05);
123
+ border-radius: 8px;
124
+ padding: 8px;
125
+ }
126
+
127
+ pre > code {
128
+ background: none;
129
+ }
130
+
131
+ // lists
132
+ ol,
133
+ ul {
134
+ font-family: $fontFamilyPost;
135
+ font-size: 14px;
136
+ font-weight: 400;
137
+ }
138
+
139
+ ul {
140
+ list-style: none;
141
+ padding-inline-start: 28px;
142
+ }
143
+
144
+ ol li::marker {
145
+ font-size: 13px;
146
+ }
147
+
148
+ ul li:not(.task-list-item)::before {
149
+ content: "-";
150
+ padding-right: 6px;
151
+ }
152
+
153
+ p + ol,
154
+ p + ul {
155
+ margin-top: -8px;
156
+ }
157
+
158
+ li.task-list-item input[type="checkbox"] {
159
+ margin-left: -4px;
160
+ margin-right: 6px;
161
+ transform: translateY(1px);
162
+ }
@@ -0,0 +1,4 @@
1
+ @import "danilov-blog/main";
2
+
3
+ @import "danilov-blog/header";
4
+ @import "danilov-blog/markdown";
@@ -0,0 +1,4 @@
1
+ ---
2
+ ---
3
+
4
+ @import "danilov-blog";
@@ -0,0 +1,3 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M12.9094 23.4703C6.58125 23.4703 1.43906 18.3234 1.43906 12C1.43906 5.67656 6.58594 0.529686 12.9094 0.529686C13.2937 0.529686 13.6781 0.548436 14.0625 0.585936C14.4 0.618748 14.6953 0.829686 14.8359 1.13437C14.9766 1.43906 14.9484 1.8 14.7609 2.08125C13.6828 3.66562 13.1109 5.51719 13.1109 7.43437C13.1109 12.3562 16.8 16.4437 21.6984 16.9312C22.0359 16.9641 22.3312 17.175 22.4719 17.4797C22.6172 17.7844 22.5844 18.1453 22.3969 18.4266C20.25 21.5859 16.7062 23.4703 12.9094 23.4703V23.4703ZM12.3234 2.47031C7.33125 2.775 3.36094 6.93281 3.36094 12C3.36094 17.2641 7.64531 21.5484 12.9094 21.5484C15.5531 21.5484 18.0469 20.4516 19.8375 18.5625C17.6719 18.0141 15.7078 16.8375 14.175 15.1594C12.2484 13.0406 11.1844 10.3031 11.1844 7.44375C11.1891 5.70469 11.5781 4.0125 12.3234 2.47031Z" fill="black"/>
3
+ </svg>
@@ -0,0 +1,11 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M12 20.2641C11.4703 20.2641 11.0438 20.6906 11.0438 21.2203V22.5281C11.0438 23.0578 11.4703 23.4844 12 23.4844C12.5297 23.4844 12.9563 23.0578 12.9563 22.5281V21.2203C12.9563 20.6906 12.5297 20.2641 12 20.2641V20.2641Z" fill="black"/>
3
+ <path d="M12 4.80469C8.03438 4.80469 4.80469 8.02969 4.80469 12C4.80469 15.9656 8.02969 19.1953 12 19.1953C15.9656 19.1953 19.1953 15.9703 19.1953 12C19.1953 8.03438 15.9656 4.80469 12 4.80469ZM12 17.2781C9.08906 17.2781 6.72187 14.9109 6.72187 12C6.72187 9.08906 9.08906 6.72187 12 6.72187C14.9109 6.72187 17.2781 9.08906 17.2781 12C17.2781 14.9109 14.9109 17.2781 12 17.2781Z" fill="black"/>
4
+ <path d="M12 3.73594C12.5297 3.73594 12.9563 3.30937 12.9563 2.77969V1.47187C12.9563 0.942187 12.5297 0.515625 12 0.515625C11.4703 0.515625 11.0438 0.942187 11.0438 1.47187V2.77969C11.0438 3.30937 11.4703 3.73594 12 3.73594Z" fill="black"/>
5
+ <path d="M22.5281 11.0437H21.2203C20.6906 11.0437 20.2641 11.4703 20.2641 12C20.2641 12.5297 20.6906 12.9562 21.2203 12.9562H22.5281C23.0578 12.9562 23.4844 12.5297 23.4844 12C23.4844 11.4703 23.0578 11.0437 22.5281 11.0437V11.0437Z" fill="black"/>
6
+ <path d="M2.77969 11.0437H1.47187C0.942187 11.0437 0.515625 11.4703 0.515625 12C0.515625 12.5297 0.942187 12.9562 1.47187 12.9562H2.77969C3.30937 12.9562 3.73594 12.5297 3.73594 12C3.73594 11.4703 3.30937 11.0437 2.77969 11.0437V11.0437Z" fill="black"/>
7
+ <path d="M19.1953 6.15937L20.1188 5.23594C20.4938 4.86094 20.4938 4.25625 20.1188 3.88125C19.7438 3.50625 19.1391 3.50625 18.7641 3.88125L17.8406 4.80469C17.4656 5.17969 17.4656 5.78437 17.8406 6.15937C18.2156 6.53437 18.8203 6.52969 19.1953 6.15937Z" fill="black"/>
8
+ <path d="M4.80469 17.8406L3.88125 18.7641C3.50625 19.1391 3.50625 19.7437 3.88125 20.1187C4.25625 20.4937 4.86094 20.4937 5.23594 20.1187L6.15937 19.1953C6.53437 18.8203 6.53437 18.2156 6.15937 17.8406C5.78437 17.4656 5.17969 17.4703 4.80469 17.8406V17.8406Z" fill="black"/>
9
+ <path d="M19.1953 17.8406C18.8203 17.4656 18.2156 17.4656 17.8406 17.8406C17.4656 18.2156 17.4656 18.8203 17.8406 19.1953L18.7641 20.1187C19.1391 20.4937 19.7438 20.4937 20.1188 20.1187C20.4938 19.7437 20.4938 19.1391 20.1188 18.7641L19.1953 17.8406Z" fill="black"/>
10
+ <path d="M4.80469 6.15937C5.17969 6.53437 5.78437 6.53437 6.15937 6.15937C6.53437 5.78437 6.53437 5.17969 6.15937 4.80469L5.23594 3.88125C4.86094 3.50625 4.25625 3.50625 3.88125 3.88125C3.50625 4.25625 3.50625 4.86094 3.88125 5.23594L4.80469 6.15937V6.15937Z" fill="black"/>
11
+ </svg>
@@ -0,0 +1,14 @@
1
+ setCurrentTheme();
2
+
3
+ function setCurrentTheme() {
4
+ let storageTheme = window.localStorage.getItem("theme");
5
+ if (storageTheme === null) {
6
+ storageTheme = "light";
7
+ window.localStorage.setItem("theme", storageTheme);
8
+ }
9
+
10
+ document.documentElement.setAttribute(
11
+ "data-theme",
12
+ storageTheme === "light" ? "light" : "dark"
13
+ );
14
+ }
@@ -0,0 +1,14 @@
1
+ const themeSwitcher = document.getElementById("theme-switcher");
2
+ themeSwitcher.addEventListener("click", switchTheme);
3
+
4
+ function switchTheme() {
5
+ let cookieTheme = window.localStorage.getItem("theme");
6
+ let newTheme = cookieTheme === "light" ? "dark" : "light";
7
+
8
+ document
9
+ .querySelector(":root")
10
+ .style.setProperty("--theme-switcher-iterations", "1");
11
+
12
+ window.localStorage.setItem("theme", newTheme);
13
+ document.documentElement.setAttribute("data-theme", newTheme);
14
+ }
metadata ADDED
@@ -0,0 +1,72 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: danilov-blog
3
+ version: !ruby/object:Gem::Version
4
+ version: 1.0.0
5
+ platform: ruby
6
+ authors:
7
+ - Vladimir Danilov
8
+ autorequire:
9
+ bindir: bin
10
+ cert_chain: []
11
+ date: 2023-11-09 00:00:00.000000000 Z
12
+ dependencies:
13
+ - !ruby/object:Gem::Dependency
14
+ name: jekyll
15
+ requirement: !ruby/object:Gem::Requirement
16
+ requirements:
17
+ - - "~>"
18
+ - !ruby/object:Gem::Version
19
+ version: '4.3'
20
+ type: :runtime
21
+ prerelease: false
22
+ version_requirements: !ruby/object:Gem::Requirement
23
+ requirements:
24
+ - - "~>"
25
+ - !ruby/object:Gem::Version
26
+ version: '4.3'
27
+ description:
28
+ email:
29
+ - danilov@vlinc.ru
30
+ executables: []
31
+ extensions: []
32
+ extra_rdoc_files: []
33
+ files:
34
+ - README.md
35
+ - _includes/head.html
36
+ - _includes/header.html
37
+ - _layouts/default.html
38
+ - _layouts/page.html
39
+ - _layouts/post.html
40
+ - _sass/danilov-blog.scss
41
+ - _sass/danilov-blog/header.scss
42
+ - _sass/danilov-blog/main.scss
43
+ - _sass/danilov-blog/markdown.scss
44
+ - assets/css/style.scss
45
+ - assets/icons/moon.svg
46
+ - assets/icons/sun.svg
47
+ - assets/js/theme-index.js
48
+ - assets/js/theme-listener.js
49
+ homepage: https://gihub.com/dan1lov/jekyll-danilov-blog
50
+ licenses:
51
+ - MIT
52
+ metadata: {}
53
+ post_install_message:
54
+ rdoc_options: []
55
+ require_paths:
56
+ - lib
57
+ required_ruby_version: !ruby/object:Gem::Requirement
58
+ requirements:
59
+ - - ">="
60
+ - !ruby/object:Gem::Version
61
+ version: '0'
62
+ required_rubygems_version: !ruby/object:Gem::Requirement
63
+ requirements:
64
+ - - ">="
65
+ - !ruby/object:Gem::Version
66
+ version: '0'
67
+ requirements: []
68
+ rubygems_version: 3.4.10
69
+ signing_key:
70
+ specification_version: 4
71
+ summary: Personal jekyll-theme for my website
72
+ test_files: []