i0Ek3 3 months ago
parent
commit
cb22e212c0
5 changed files with 117 additions and 96 deletions
  1. 5
    0
      _data/notes.yml
  2. 16
    4
      _layouts/default.html
  3. 71
    51
      assets/new.scss
  4. 9
    2
      assets/stuff.js
  5. 16
    39
      index.html

+ 5
- 0
_data/notes.yml View File

@@ -1,4 +1,9 @@
1 1
 
2
+- date: 2019/07/05 21:37 
3
+  slug: -ugh
4
+  content: |
5
+    I'm so happy to see uncle Liang, and we talk more about his story more than 30 minutes, that's really cool and I like it. Also he give me some advices for my career and what should I do next. Yeah, like uncle Wang, my life teacher. Best wishes for them and hope them healthy and happiness. Maybe this is karma, with uncles. Gracias~
6
+
2 7
 - date: 2019/06/29 16:48
3 8
   slug: -ugh
4 9
   content: |

+ 16
- 4
_layouts/default.html View File

@@ -37,7 +37,7 @@
37 37
     <div class="theme">
38 38
       <header class="header">
39 39
         <h1 class="h1">
40
-          <a href="/" class="no-underline"><span class="js-random-emoji">💻</span> i-0-E-k-3 </a>
40
+          <a href="/" class="no-underline"><span class="js-random-emoji">💻</span> i0Ek3's homepage. </a>
41 41
         </h1>
42 42
       </header>
43 43
       <main class="wrapper">
@@ -87,11 +87,23 @@
87 87
         HI! HI! HI! Unknown visitor with JavaScript disabled! Nice to meet you!
88 88
       </noscript>
89 89
     </main>
90
-    <footer class="footer">
91
-      That's all.
92
-    </footer>
93 90
     <script src="/assets/stuff.js" type="text/javascript"></script>
94 91
     <link href="/assets/new.css" rel="stylesheet" type="text/css">
95 92
     <link href="https://fonts.googleapis.com/css?family=Cousine:400,700" rel="stylesheet" type="text/css">
93
+    <script type="text/javascript">
94
+      function track() {
95
+        ;(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
96
+        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
97
+        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
98
+        })(window,document,'script','https://www.google-analytics.com/analytics.js','ga')
99
+
100
+        ga('create', 'UA-21332781-7', 'auto')
101
+        ga('send', 'pageview')
102
+      }
103
+      if (navigator['doNotTrack'] !== '1') { track() }
104
+    </script>
105
+    <footer class="footer">
106
+      That's all.
107
+    </footer>
96 108
   </body>
97 109
 </html>

+ 71
- 51
assets/new.scss View File

@@ -1,17 +1,16 @@
1 1
 ---
2 2
 modes:
3 3
   light:
4
-    foreground: "#353735"
5
-    background: "#fdfdfd"
6
-    link_foreground: "#070c10"
7
-    mark_background: "#efefef"
4
+    foreground: "#2a312f"
5
+    background: "#d5dcd6"
6
+    link_foreground: "#131b13"
7
+    mark_background: "#bccabc"
8 8
   dark:
9
-    foreground: "#fdfdfd"
10
-    background: "#1b1b1b"
11
-    link_foreground: "#fafff7"
12
-    mark_background: "#303030"
9
+    foreground: "#d7e4d2"
10
+    background: "#152c23"
11
+    link_foreground: "#e9efe6"
12
+    mark_background: "#43564e"
13 13
 ---
14
-
15 14
 #dark-mode:checked {
16 15
   & ~ .theme {
17 16
     color: {{ page.modes.dark.foreground }};
@@ -22,13 +21,9 @@ modes:
22 21
       background: {{ page.modes.dark.mark_background }};
23 22
     }
24 23
 
25
-    a {
24
+    a,
25
+    details[open] > summary {
26 26
       color: {{ page.modes.dark.link_foreground }};
27
-
28
-      &:hover {
29
-        background: {{ page.modes.dark.foreground }};
30
-        color: {{ page.modes.dark.background }};
31
-      }
32 27
     }
33 28
 
34 29
 
@@ -40,15 +35,19 @@ modes:
40 35
       color: {{ page.modes.dark.foreground }}
41 36
     }
42 37
 
43
-    .note:not(:last-child) {
44
-      border-bottom: 1px solid {{ page.modes.dark.mark_background }};
38
+    .note:not(:first-child) {
39
+      border-top-color: {{ page.modes.dark.foreground }};
40
+    }
41
+
42
+    .heading {
43
+      background: {{ page.modes.dark.foreground }};
44
+      color: {{ page.modes.dark.background }};
45 45
     }
46 46
   }
47 47
 
48 48
   ~ .dark-mode-label {
49 49
     .dark-mode-inner-content::before {content: '☑'}
50 50
     color: {{ page.modes.dark.foreground }};
51
-    // background-color: {{ page.modes.dark.mark_background }};
52 51
   }
53 52
 }
54 53
 
@@ -92,6 +91,7 @@ body {
92 91
   font-size: 14px;
93 92
   -webkit-font-smoothing: antialiased;
94 93
   word-wrap: break-word;
94
+  min-height: 100vh;
95 95
 }
96 96
 
97 97
 body.has-js *:focus {
@@ -99,12 +99,13 @@ body.has-js *:focus {
99 99
 }
100 100
 
101 101
 ::selection {
102
-  background-color: #79d688;
102
+  background-color: #43564e;
103
+  color: #ffffff;
103 104
 }
104 105
 
105 106
 body.keydown *:focus,
106 107
 body:not(.has-js) *:focus {
107
-  outline: 1px solid #79d688;
108
+  outline: 1px solid #5d8e64;
108 109
   outline-offset: 4px;
109 110
 }
110 111
 
@@ -112,20 +113,27 @@ details {
112 113
   margin: 1em 0;
113 114
 }
114 115
 
115
-summary::-webkit-details-marker {
116
-  font-size: 0.8em;
117
-  margin-right: 0.8em;
118
-}
119
-
116
+// Remove marker added by the display: list-item browser default
120 117
 summary {
121
-  cursor: pointer;
118
+  list-style: none;
119
+  transition: color 0.2s;
122 120
 }
121
+// Remove marker added by Chrome
122
+summary::-webkit-details-marker { display: none; }
123
+details > summary::before { content: "\\ "; }
124
+details[open] > summary::before { content: "/ "; }
125
+summary { cursor: pointer; }
123 126
 
124 127
 code,
125 128
 button {
126 129
   font-family: Cousine, monospace;
127 130
 }
128 131
 
132
+h1,
133
+h2 {
134
+  font-weight: 400;
135
+}
136
+
129 137
 h2 {
130 138
   font-size: 1.2em;
131 139
   margin-top: 50px;
@@ -144,32 +152,40 @@ p {
144 152
   margin: 100px 0 40px;
145 153
 }
146 154
 
147
-a {
155
+a,
156
+details[open] > summary {
148 157
   color: {{ page.modes.light.link_foreground }};
158
+}
149 159
 
150
-  &:hover {
151
-    text-decoration: none;
152
-    background: {{ page.modes.light.foreground }};
153
-    color: {{ page.modes.light.background }};
154
-  }
160
+a:hover,
161
+a:focus {
162
+  text-decoration: none;
155 163
 }
156 164
 
157 165
 mark {
158 166
   color: {{ page.modes.light.foreground }};
159 167
   background-color: {{ page.modes.light.mark_background }};
168
+  transition: transform 0.2s;
169
+  display: inline-block;
170
+  line-height: initial;
171
+
172
+  &:hover {
173
+    transform: scale(1.05, 1.05)
174
+  }
160 175
 
161 176
   a { text-decoration: none; padding: 0 0.3em; }
162 177
 }
163 178
 
164
-div, a, img, header, footer, main {
179
+div, a, img, header, footer, main, label {
165 180
   box-sizing: border-box;
166 181
 }
167 182
 
168 183
 .dark-mode-inner-content,
184
+.dark-mode-label,
169 185
 .header,
170 186
 .footer,
171 187
 .wrapper {
172
-  margin: 0 0 30px;
188
+  margin: 0 auto 30px;
173 189
   max-width: 100%;
174 190
   width: 46em;
175 191
 }
@@ -204,11 +220,7 @@ article img:not(.emoji) {
204 220
 }
205 221
 
206 222
 .list-notes {
207
-  opacity: 0.85;
208
-  margin-left: 1em;
209 223
   margin-top: 0;
210
-  padding-left: 0;
211
-  list-style: none;
212 224
 }
213 225
 
214 226
 .list {
@@ -244,7 +256,7 @@ hr {
244 256
 blockquote {
245 257
   margin: 40px 0px;
246 258
   padding: 0 1em;
247
-  border-left: 4px double;
259
+  border-left: 1px solid #43564e47;
248 260
 
249 261
   p:first-child { margin-top: 0; }
250 262
   p:last-child { margin-bottom: 0; }
@@ -271,37 +283,45 @@ button {
271 283
 
272 284
 .h1 {
273 285
   margin: 0;
274
-  font-size: 1.5em;
286
+  font-size: 1em;
275 287
 }
276 288
 
277 289
 .note {
278
-  &:not(:last-child) {
279
-    border-bottom: 1px solid {{ page.modes.light.mark_background }};
280
-  }
281
-
282 290
   &:target, &.target {
283
-    margin: 0 -0.8em 0 -1.6em;
284
-    padding-left: 0.8em;
285
-    padding-right: 0.8em;
286
-    outline: 1px solid #d0c548;
287
-    border-bottom: 0;
291
+    list-style: none;
292
+    margin: 0 0 0.8em -2.4em;
293
+    padding: 1.6em;
294
+    outline: 1px solid #43564e47;
295
+    border-top: 0;
296
+
297
+    + * {
298
+      border-top: 0;
299
+    }
288 300
   }
289 301
 
290 302
   p:first-child { margin-top: 0; }
291 303
   p:last-child { margin-bottom: 0; }
304
+  blockquote { margin: 0.8em 0; }
292 305
 
293 306
   padding: 0.8em 0.8em 0.8em 0;
294 307
   box-sizing: border-box;
295
-  margin: 0 -0.8em;
308
+  margin: 0 -0.8em 0.8em;
296 309
   scroll-margin: 2em;
297 310
 }
298 311
 
312
+.heading {
313
+  line-height: 1.3em;
314
+  display: inline-block;
315
+  padding: 0 0.2em;
316
+  background: {{ page.modes.light.foreground }};
317
+  color: {{ page.modes.light.background }};
318
+}
319
+
299 320
 .small {
300 321
   font-size: 0.85em;
301 322
 }
302 323
 
303 324
 blink {
304
-  // color: blue;
305 325
   animation: 1s linear infinite condemned_blink_effect;
306 326
 }
307 327
 @keyframes condemned_blink_effect {

+ 9
- 2
assets/stuff.js View File

@@ -1,4 +1,4 @@
1
-const emoji = ['🌚', '🌵', '🦔', '🤷🏻', '🆗', '👩🏻‍💻', '🎮']
1
+const emoji = ['☁️', '🆗', '👩🏻‍💻', '🎮', '🌵', '🌿', '📬']
2 2
 const randomEmoji = document.querySelector('.js-random-emoji')
3 3
 
4 4
 if (randomEmoji) {
@@ -11,7 +11,14 @@ const darkModeCheckbox = document.querySelector('#dark-mode')
11 11
 if (supportsLocalStorage) {
12 12
   darkModeCheckbox.addEventListener('change', rememberMode)
13 13
   const darkMode = localStorage.getItem('darkMode')
14
-  if (darkMode === '1' || (osDarkMode && darkMode === null)) darkModeCheckbox.checked = true
14
+  if (darkMode !== null) {
15
+    // Has set preference
16
+    darkModeCheckbox.checked = darkMode === '1'
17
+  } else if (osDarkMode && darkMode === null) {
18
+    // OS default dark mode
19
+    // This doesn't matter now I want to default dark mode
20
+    darkModeCheckbox.checked = true
21
+  }
15 22
 
16 23
   function rememberMode () {
17 24
     darkModeCheckbox.checked ? localStorage.setItem('darkMode', '1') : localStorage.setItem('darkMode', '0')

+ 16
- 39
index.html View File

@@ -2,37 +2,28 @@
2 2
 layout: default
3 3
 ---
4 4
 
5
-<details>
6
-  <summary><h2 class="as-text">Study</h2></summary>
5
+  <h2 class="as-text">Study</h2>
7 6
   <ul class="list list-items">
8 7
     <li>
9 8
       2012 - 2015, LNPU, Security Technology Management.
10
-      <div class="small">
11
-        Just junior college.
12
-      </div>
9
+      <div class="small">Just junior college.</div>
13 10
     </li>
14 11
     <li>
15 12
       2017 - Now, LNU, Computer Application Technology.</li>
16
-      <div class="small">
17
-        Research in blockchain consensus algorithm.
18
-      </div>
13
+      <div class="small">Research in blockchain consensus algorithm.</div>
19 14
     </li>
20 15
   </ul>
21
-</details>
22
-<details>
23
-  <summary><h2 class="as-text">Work</h2></summary>
16
+
17
+  <h2 class="as-text">Work</h2>
24 18
   <ul class="list list-items">
25 19
     <li>
26 20
       2015 - 2016, HSE at PJOE
27
-      <div class="small">
28
-        Totally, that's my first job, but I don't like it at all, so I am quit! 
29
-      </div>
21
+      <div class="small">Totally, that's my first job, but I don't like it at all, so I am quit! </div>
30 22
     </li>
31 23
     <li>2016 - Now, No work yet.</li>
32 24
   </ul>
33
-</details>
34
-<details>
35
-  <summary><h2 class="as-text">About me</h2></summary>
25
+  
26
+  <h2 class="as-text">About me</h2>
36 27
   <ul class="list list-items">
37 28
     <li>Based in Shenyang, China since 2017.</li>
38 29
     <li>Work in C/C++/Go/Shell, a Vimer.</li>
@@ -44,9 +35,8 @@ layout: default
44 35
     <li>French, Russia, Esperanto, Spanish, Mongolian learning...</li>
45 36
     <li>Oh, I am a fat man.</li>
46 37
   </ul>
47
-</details>
48
-<details>
49
-  <summary><h2 class="as-text">Hyperlinks &amp; contact</h2></summary>
38
+  
39
+  <h2 class="as-text">Hyperlinks &amp; contact</h2>
50 40
   <ul class="list list-items">
51 41
     <li>
52 42
       <mark><a href="https://github.com/i0Ek3" rel="me">GitHub</a></mark>,
@@ -60,10 +50,8 @@ layout: default
60 50
         This is Google Voice number, don't worry about that.
61 51
     </div>
62 52
   </ul>
63
-</details>
64
-<details>
65
-  <summary><h2 class="as-text">Posts</h2><a class="small" href="/notes.xml">[feed]</a></summary>
66
-
53
+  
54
+  <h2 class="as-text">Posts</h2><a class="small" href="/notes.xml">[feed]</a>
67 55
   <ul class="list-notes">
68 56
     {% for note in site.data.notes limit: 5 %}
69 57
       <li class="note">
@@ -71,20 +59,9 @@ layout: default
71 59
         <div>{{ note.content | markdownify }}</div>
72 60
       </li>
73 61
     {% endfor %}
74
-    {% if site.data.notes.size > 5 %}
75
-      <li class="note"><a class="small" href="/notes">More.</a></li>
76
-    {% endif %}
77 62
   </ul>
78
-</details>
79
-<details hidden>
80
-  <summary><h2 class="as-text">Posts</h2> <a class="small" href="/feed.xml">[feed]</a></summary>
81 63
 
82
-  <ul class="list list-items">
83
-    {% for post in site.posts %}
84
-      <li>
85
-        <a href="{{ post.url }}">{{ post.title }}</a>
86
-        <time>{{ post.date | date: "%b %d, %Y" }}</time>
87
-      </li>
88
-    {% endfor %}
89
-  </ul>
90
-</details>
64
+{% if site.data.notes.size > 5 %}
65
+  <li class="note"><a class="small" href="/notes">More...</a></li>
66
+{% endif %}
67
+

Loading…
Cancel
Save