jekyll-theme-qufe 0.1.0 → 0.2.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 +4 -4
- data/README.md +61 -3
- data/_includes/head.html +7 -2
- data/assets/JS/main.js +26 -0
- data/assets/css/main.scss +106 -36
- data/assets/img/ss1.png +0 -0
- data/assets/img/ss2.png +0 -0
- data/assets/img/user1.png +0 -0
- metadata +7 -4
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: f8fed5b46cf6d5057662b6d4909c453c6ab2c974aed9ce3d6b11baec7b46bc36
|
|
4
|
+
data.tar.gz: d4fc8867f69df9f579f04ff87976b7edd6014764bd6953b69b04bcee87bc678d
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 0aea7b64d303498e1aef1156cd77571330647395c2496f2ff783dde9fab554c7bdedd78702e72226518bbf45d1a8f5d558286572d9e3eb488bc3bdfc65ebf6e3
|
|
7
|
+
data.tar.gz: 4f08f07dcefd8f4076d1d09de4a186d1645689336487e0893d70401d1a8c41e2ace523659ba5fe788fb0b1a01ec2a8e40b81d58be898db6c66f55ba9f2ed663e
|
data/README.md
CHANGED
|
@@ -2,18 +2,77 @@
|
|
|
2
2
|
|
|
3
3
|
A blog theme with a personalized feel.
|
|
4
4
|
|
|
5
|
-
|
|
6
|
+
|
|
7
|
+
|
|
6
8
|
|
|
7
9
|
## Installation
|
|
8
10
|
|
|
11
|
+
Download files:
|
|
12
|
+
|
|
13
|
+
git clone https://github.com/mtnzorlu/qufe.git
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
Go to directory with terminal command:
|
|
17
|
+
|
|
18
|
+
cd qufe
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
Build the Site:
|
|
22
|
+
|
|
23
|
+
jekyll build
|
|
24
|
+
|
|
25
|
+
Run:
|
|
26
|
+
|
|
27
|
+
bundle exec jekyll serve
|
|
28
|
+
|
|
29
|
+
And open:
|
|
30
|
+
|
|
31
|
+
http://127.0.0.1:4000/qufe/
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
## Gem Based
|
|
35
|
+
|
|
36
|
+
Change the index.markdown file to index.html. It includes:
|
|
37
|
+
|
|
38
|
+
---
|
|
39
|
+
layout: main
|
|
40
|
+
---
|
|
41
|
+
|
|
42
|
+
{{ content }}
|
|
43
|
+
|
|
9
44
|
Add your Jekyll site into gemfile:
|
|
45
|
+
|
|
46
|
+
gem 'webrick'
|
|
47
|
+
gem 'jekyll-theme-qufe', '~> 0.1.1'
|
|
48
|
+
|
|
49
|
+
And change:
|
|
50
|
+
|
|
51
|
+
group :jekyll_plugins do
|
|
52
|
+
gem "jekyll-feed", "~> 0.12"
|
|
53
|
+
gem "jekyll-paginate"
|
|
54
|
+
end
|
|
10
55
|
|
|
11
|
-
|
|
56
|
+
In the _config.yml file enter:
|
|
57
|
+
|
|
58
|
+
paginate: 5
|
|
59
|
+
theme: jekyll-theme-qufe
|
|
60
|
+
plugins:
|
|
61
|
+
- jekyll-feed
|
|
62
|
+
- jekyll-paginate
|
|
12
63
|
|
|
13
64
|
And execute:
|
|
14
65
|
|
|
15
66
|
bundle
|
|
16
67
|
|
|
68
|
+
Run:
|
|
69
|
+
|
|
70
|
+
bundle exec jekyll serve
|
|
71
|
+
|
|
72
|
+
And open:
|
|
73
|
+
|
|
74
|
+
http://127.0.0.1:4000
|
|
75
|
+
|
|
17
76
|
## Note:
|
|
18
77
|
|
|
19
78
|
If your site is in the root directory, the baseurl must be empty. Replace _config.yml:
|
|
@@ -23,7 +82,6 @@ If your site is in the root directory, the baseurl must be empty. Replace _confi
|
|
|
23
82
|
|
|
24
83
|
Edit or change some parts of the _config_yml file. For example, enter your own social media usernames in the relevant lines.
|
|
25
84
|
|
|
26
|
-
|
|
27
85
|
twitter_username: your_name
|
|
28
86
|
|
|
29
87
|
To set the cover photo, modify the head.html file:
|
data/_includes/head.html
CHANGED
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
7
7
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
8
8
|
<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/main.css">
|
|
9
|
+
<script src="{{ site.baseurl }}/assets/JS/main.js"></script>
|
|
9
10
|
<link rel="icon" type="image/png" href="{{ site.baseurl }}/assets/img/favicon.png">
|
|
10
11
|
<title>{% if page.title == null %}{{ site.title }}{% else %}{{ page.title }}{% endif %}</title>
|
|
11
12
|
</head>
|
|
@@ -15,8 +16,7 @@
|
|
|
15
16
|
<header>
|
|
16
17
|
|
|
17
18
|
<div class="cover">
|
|
18
|
-
|
|
19
|
-
<img src="{{ site.baseurl }}/{{ site.image.kapak-0 }}" alt="kapak">
|
|
19
|
+
<img src="{{ site.baseurl }}/{{ site.image.kapak-1 }}" alt="kapak">
|
|
20
20
|
</div>
|
|
21
21
|
|
|
22
22
|
|
|
@@ -28,6 +28,11 @@
|
|
|
28
28
|
<li><a href="{{ site.baseurl }}/links">Links</a></li>
|
|
29
29
|
</ul>
|
|
30
30
|
|
|
31
|
+
<label class="theme-toggle">
|
|
32
|
+
<input type="checkbox" id="theme-toggle" onclick='modeSwitcher()'>
|
|
33
|
+
<span class="dugme"></span>
|
|
34
|
+
</label>
|
|
35
|
+
|
|
31
36
|
</div>
|
|
32
37
|
|
|
33
38
|
</header>
|
data/assets/JS/main.js
ADDED
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
const theme = localStorage.getItem('theme');
|
|
2
|
+
|
|
3
|
+
const userPrefers = getComputedStyle(document.documentElement).getPropertyValue('content');
|
|
4
|
+
|
|
5
|
+
if (theme === "dark") {
|
|
6
|
+
document.documentElement.setAttribute('data-theme', 'dark');
|
|
7
|
+
} else if (theme === "light") {
|
|
8
|
+
document.documentElement.setAttribute('data-theme', 'light');
|
|
9
|
+
} else if (userPrefers === "dark") {
|
|
10
|
+
document.documentElement.setAttribute('data-theme', 'dark');
|
|
11
|
+
window.localStorage.setItem('theme', 'dark');
|
|
12
|
+
} else {
|
|
13
|
+
document.documentElement.setAttribute('data-theme', 'light');
|
|
14
|
+
window.localStorage.setItem('theme', 'light');
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
function modeSwitcher() {
|
|
18
|
+
const currentMode = document.documentElement.getAttribute('data-theme');
|
|
19
|
+
if (currentMode === "dark") {
|
|
20
|
+
document.documentElement.setAttribute('data-theme', 'light');
|
|
21
|
+
window.localStorage.setItem('theme', 'light');
|
|
22
|
+
} else {
|
|
23
|
+
document.documentElement.setAttribute('data-theme', 'dark');
|
|
24
|
+
window.localStorage.setItem('theme', 'dark');
|
|
25
|
+
}
|
|
26
|
+
}
|
data/assets/css/main.scss
CHANGED
|
@@ -1,94 +1,164 @@
|
|
|
1
1
|
---
|
|
2
|
-
---
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
---
|
|
3
|
+
html, html[data-theme="light"] {
|
|
4
|
+
--mainBg: #efefee; --secondBg: #fafafa; --preBg: #f7fcfc; --backBg: #b9bcc5; --proBg: #aeb0b8;
|
|
5
|
+
|
|
6
|
+
--mainFg: #545444; --secondFg: #353535; --preFg: #333333; --lihFg: #4444ff; --liFg: #3f5b8f; --liFg2: #7979ee; --limFg: #4e4a53;
|
|
7
|
+
--whbc: #ffffff; --bcwh: #000000; --br1: #dfdfe2; --br2: #aaaaaa; --br3: #cecece; --proFg: #b1b1b1; --proli: #3a4041; --proh: #206770;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
html[data-theme="dark"] {
|
|
11
|
+
--mainBg: #262626; --secondBg: #202020; --preBg: #222222; --backBg: #2b2e34; --proBg: #272729;
|
|
12
|
+
|
|
13
|
+
--mainFg: #b8b8b8; --secondFg: #c0c0c0; --preFg: #d6d6d6; --lihFg: #b7b7ff; --liFg: #6c98eb; --liFg2: #bfbff0; --limFg: #c3b9cf;
|
|
14
|
+
--whbc: #202020; --bcwh: #a7a7a7; --br1: #2b2b2b; --br2: #4e4e4e; --br3: #3b3b3b; --proFg: #6e6e6e; --proli: #b8c7ca; --proh: #2b8591;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
body {width: 1100px; margin: 0 auto; padding: 0; text-decoration: none;
|
|
18
|
+
box-sizing: border-box; background-color: var(--backBg); font-family: Roboto, serif; font-size: 14px;}
|
|
19
|
+
|
|
20
|
+
h1, h2, h3, h4, h5, h6{color: var(--mainFg);} a{text-decoration: none; color: var(--liFg); font-size: 16px;} a:hover{color: var(--bcwh);}
|
|
5
21
|
h2 {font-size: 1rem;}
|
|
6
|
-
h1{font-size: 17px; font-weight: 500;
|
|
22
|
+
h1{font-size: 17px; font-weight: 500;} h1 a{color: var(--limFg);} h1 a:hover{color: var(--lihFg);}
|
|
23
|
+
|
|
24
|
+
|
|
7
25
|
header{
|
|
8
26
|
|
|
9
27
|
.head{
|
|
10
28
|
|
|
11
|
-
width: 100%;
|
|
12
|
-
display: flex; justify-content: center;
|
|
29
|
+
width: 100%; border-radius: 8px 8px 0 0; border-top: 2px solid var(--whbc);
|
|
30
|
+
display: flex; justify-content: center; align-items: center; background-color: var(--mainBg);
|
|
31
|
+
|
|
32
|
+
// Açık Koyu
|
|
33
|
+
|
|
34
|
+
.theme-toggle {
|
|
35
|
+
position: relative;
|
|
36
|
+
display: inline-block;
|
|
37
|
+
margin-right: 20px;
|
|
38
|
+
width: 24px;
|
|
39
|
+
height: 16px;
|
|
40
|
+
background-color: var(--proli);
|
|
41
|
+
border-radius: 16px;
|
|
42
|
+
cursor: pointer;
|
|
43
|
+
|
|
44
|
+
input {
|
|
45
|
+
display: none;
|
|
46
|
+
opacity: 0;
|
|
47
|
+
width: 0;
|
|
48
|
+
height: 0;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
13
51
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
52
|
+
.dugme {
|
|
53
|
+
position: absolute;
|
|
54
|
+
cursor: pointer;
|
|
55
|
+
top: 2px;
|
|
56
|
+
left: 2px;
|
|
57
|
+
right: 0;
|
|
58
|
+
bottom: 0;
|
|
59
|
+
content: "";
|
|
60
|
+
width: 10px;
|
|
61
|
+
height: 12px;
|
|
62
|
+
border-radius: 14px 0 0 14px;
|
|
63
|
+
background-color: var(--backBg);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.dugme:active {
|
|
67
|
+
background-color: var(--liFg2);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
ul{padding: 0; margin: 10px 11px;}
|
|
71
|
+
ul li {margin: 0 4px; list-style: none; border: 1px solid var(--br1); padding: 5px 0;
|
|
72
|
+
display: inline-block; background-color: var(--secondBg); border-radius: 5px;}
|
|
73
|
+
|
|
74
|
+
ul li a {color: var(--limFg); font-size: 14px; padding: 7px 15px;} ul li a:hover{color: var(--lihFg);}
|
|
17
75
|
|
|
18
76
|
}
|
|
77
|
+
|
|
19
78
|
.cover{width: 100%; height: 216px;
|
|
20
79
|
margin: 11px 0; display: flex; justify-content: center; align-items: center;
|
|
21
|
-
img {border-radius: 8px; border: 2px solid
|
|
80
|
+
img {border-radius: 8px; border: 2px solid var(--whbc); width: 1100px; height: 216px; box-sizing: border-box;}
|
|
22
81
|
}
|
|
23
82
|
}
|
|
24
83
|
.container {
|
|
25
|
-
background-color:
|
|
26
|
-
border-top: 1px solid
|
|
27
|
-
|
|
84
|
+
background-color: var(--mainBg); display: grid; grid-template-columns: 20% 1fr;
|
|
85
|
+
border-top: 1px solid var(--br1);
|
|
28
86
|
|
|
29
87
|
#nav-menu {
|
|
30
88
|
padding: 15px 0; margin-left: 10px;
|
|
31
89
|
|
|
32
90
|
.profile {text-align: center;
|
|
33
91
|
|
|
34
|
-
span{font-size:
|
|
35
|
-
img{width: 145px; height: 145px; border-radius: 50%; border: 2px solid
|
|
36
|
-
a{color:
|
|
92
|
+
span{font-size: 12px; text-align: center; color: var(--proFg);} h2 {text-align: center; font-weight: normal;}
|
|
93
|
+
img{width: 145px; height: 145px; border-radius: 50%; border: 2px solid var(--whbc); box-shadow: 0 2px 5px var(--proBg);}
|
|
94
|
+
a{color: var(--proli);} a:hover{color: var(--proh);}
|
|
37
95
|
}
|
|
38
96
|
|
|
39
97
|
.social {display: grid; margin-top: 11px; grid-template-columns: auto;
|
|
40
98
|
|
|
41
|
-
> div {padding: 5px; margin: 2px; border: 1px solid
|
|
42
|
-
|
|
43
|
-
a {font-size: 12px; color: #333333; text-align: center;} a:hover {color: #000;}
|
|
99
|
+
> div {padding: 5px; margin: 2px; border: 1px solid var(--br1); background-color: var(--secondBg); text-align: center; border-radius: 16px;}
|
|
44
100
|
|
|
101
|
+
a {font-size: 12px; color: var(--preFg); text-align: center;} a:hover {color: var(--bcwh);}
|
|
45
102
|
|
|
46
103
|
}
|
|
104
|
+
|
|
47
105
|
}
|
|
48
106
|
|
|
49
107
|
.main-body {
|
|
50
108
|
|
|
51
109
|
.main{
|
|
52
110
|
|
|
53
|
-
padding: 14px; font-size: 16px; line-height: 22px; color:
|
|
111
|
+
padding: 14px; font-size: 16px; line-height: 22px; color: var(--mainFg);
|
|
54
112
|
|
|
55
|
-
.content{border: 1px solid
|
|
56
|
-
|
|
57
|
-
.card-action{padding: 12px 5px; border-top: 1px dotted #aaaaaa;}
|
|
113
|
+
.content{border: 1px solid var(--br1); padding: 14px 22px; border-radius: 8px; background-color: var(--secondBg);
|
|
58
114
|
|
|
59
115
|
img {max-width: 750px;}
|
|
60
116
|
|
|
61
|
-
|
|
62
|
-
.date{background-color: #f0ffff5b; padding: 5px; border-top: 1px solid #cecece; font-size: 11px; color: #a5a5a5;
|
|
117
|
+
.date{background-color: var(--preBg); padding: 5px; border-top: 1px solid var(--br3); font-size: 11px; color: var(--br2);
|
|
63
118
|
|
|
64
|
-
a{color
|
|
119
|
+
a{color: var(--limFg); font-size: 11px;} a:hover{color: var(--bcwh);}}
|
|
65
120
|
|
|
66
121
|
}
|
|
67
122
|
|
|
68
123
|
.pagination{padding: 3px;
|
|
69
124
|
|
|
70
|
-
a{color:
|
|
71
|
-
a:hover{color:
|
|
125
|
+
a{color: var(--secondFg); padding: 6px 10px; border-radius: 50%; border: 1px solid var(--br1); font-size: 12px;}
|
|
126
|
+
a:hover{color: var(--bcwh); border: 1px solid var(--br2);}
|
|
72
127
|
|
|
73
|
-
.act{border-radius: 50%; padding: 5px 10px; color:
|
|
128
|
+
.act{border-radius: 50%; padding: 5px 10px; color: var(--liFg2); border: 1px solid var(--liFg2); margin: 0 3px;}
|
|
74
129
|
|
|
75
130
|
|
|
76
|
-
.soluk{color:
|
|
131
|
+
.soluk{color: var(--br2); padding: 0 7px;}
|
|
77
132
|
}
|
|
78
133
|
}
|
|
79
134
|
}
|
|
135
|
+
|
|
80
136
|
}
|
|
81
137
|
@media screen and (max-device-width: 1100px) {
|
|
82
138
|
body{width: 100%;} .container{display: block; #nav-menu{display: none;}}
|
|
83
|
-
header .cover{margin: 2px 0; height: auto;
|
|
139
|
+
header .cover{margin: 2px 0; height: auto; img {width: 100%; height: auto;}} .content img {width: 100%;}
|
|
84
140
|
}
|
|
85
141
|
@media screen and (max-device-width: 390px) {
|
|
86
142
|
header .head ul li a {padding: 7px; font-size: 12px;} .container .main-body .main p{font-size: 14px;}
|
|
87
|
-
|
|
88
143
|
}
|
|
89
|
-
pre{background-color:
|
|
144
|
+
pre{background-color: var(--preBg); color: var(--preFg); border: 1px solid var(--br1); padding: 8px 10px; font-size: 13px;}
|
|
90
145
|
code{padding: 0 4px; font-size: 12px; white-space: pre-wrap;}
|
|
91
|
-
blockquote{padding: 0 10px; background-color:
|
|
92
|
-
footer{background-color:
|
|
93
|
-
|
|
146
|
+
blockquote{padding: 0 10px; background-color: var(--mainBg); border: 1px solid var(--br1); margin: 0;}
|
|
147
|
+
footer{background-color: var(--mainBg); text-align: center; padding: 8px; border-top: 1px solid var(--br1); border-bottom: 2px solid var(--proBg); color: var(--limFg);}
|
|
94
148
|
|
|
149
|
+
@media (prefers-color-scheme: dark) {
|
|
150
|
+
|
|
151
|
+
html, html[data-theme="light"] {
|
|
152
|
+
--mainBg: #efefee; --secondBg: #fafafa; --preBg: #f7fcfc; --backBg: #b9bcc5; --proBg: #aeb0b8;
|
|
153
|
+
|
|
154
|
+
--mainFg: #545444; --secondFg: #353535; --preFg: #333333; --lihFg: #4444ff; --liFg: #3f5b8f; --liFg2: #7979ee; --limFg: #4e4a53;
|
|
155
|
+
--whbc: #ffffff; --bcwh: #000000; --br1: #dfdfe2; --br2: #aaaaaa; --br3: #cecece; --proFg: #b1b1b1; --proli: #3a4041; --proh: #206770;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
html[data-theme="dark"] {
|
|
159
|
+
--mainBg: #262626; --secondBg: #202020; --preBg: #222222; --backBg: #2b2e34; --proBg: #272729;
|
|
160
|
+
|
|
161
|
+
--mainFg: #b8b8b8; --secondFg: #c0c0c0; --preFg: #d6d6d6; --lihFg: #b7b7ff; --liFg: #6c98eb; --liFg2: #bfbff0; --limFg: #c3b9cf;
|
|
162
|
+
--whbc: #202020; --bcwh: #a7a7a7; --br1: #2b2b2b; --br2: #4e4e4e; --br3: #3b3b3b; --proFg: #6e6e6e; --proli: #b8c7ca; --proh: #2b8591;
|
|
163
|
+
}
|
|
164
|
+
}
|
data/assets/img/ss1.png
ADDED
|
Binary file
|
data/assets/img/ss2.png
ADDED
|
Binary file
|
data/assets/img/user1.png
CHANGED
|
Binary file
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: jekyll-theme-qufe
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.
|
|
4
|
+
version: 0.2.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Metin Zorlu
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2023-
|
|
11
|
+
date: 2023-02-20 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: jekyll
|
|
@@ -41,6 +41,7 @@ files:
|
|
|
41
41
|
- _layouts/main.html
|
|
42
42
|
- _layouts/page.html
|
|
43
43
|
- _layouts/post.html
|
|
44
|
+
- assets/JS/main.js
|
|
44
45
|
- assets/css/main.scss
|
|
45
46
|
- assets/img/favicon.png
|
|
46
47
|
- assets/img/i-0.jpg
|
|
@@ -48,6 +49,8 @@ files:
|
|
|
48
49
|
- assets/img/i-2.jpg
|
|
49
50
|
- assets/img/i-3.jpg
|
|
50
51
|
- assets/img/screenshot.png
|
|
52
|
+
- assets/img/ss1.png
|
|
53
|
+
- assets/img/ss2.png
|
|
51
54
|
- assets/img/user1.png
|
|
52
55
|
homepage: https://github.com/mtnzorlu/qufe
|
|
53
56
|
licenses:
|
|
@@ -68,8 +71,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
|
68
71
|
- !ruby/object:Gem::Version
|
|
69
72
|
version: '0'
|
|
70
73
|
requirements: []
|
|
71
|
-
rubygems_version: 3.2.
|
|
74
|
+
rubygems_version: 3.2.5
|
|
72
75
|
signing_key:
|
|
73
76
|
specification_version: 4
|
|
74
|
-
summary: Personal oriented blog theme
|
|
77
|
+
summary: Personal oriented light or dark mode optional blog theme
|
|
75
78
|
test_files: []
|