diff --git a/source/_posts/visualize-first-try.md b/source/_posts/visualize-first-try.md index 7597ce6..e8defc9 100644 --- a/source/_posts/visualize-first-try.md +++ b/source/_posts/visualize-first-try.md @@ -1,9 +1,48 @@ --- -title: 視覺化探險日記(1) - 以 Python-Doc-ZH-TW 為例 +title: 視覺化探險日記(1) - 以 python-docs-zh-tw 為例 date: 2023-09-11 22:35:00 tags: - dev - diary --- -{% asset_img pageviews_visitors.png [pageviews_visitors] %} \ No newline at end of file +自從加入了 [python-docs-zh-tw](https://github.com/python/python-docs-zh-tw) 翻譯計畫，好像越做越有心得(?) +畢竟以前沒有這種可以加入社群貢獻的機會，所以這次我沒有放掉這個機會了。 + +本次任務是因為取得了每個頁面的瀏覽次數等資料 [1] ， +我想配合上 Organizer 一直有在使用的 [potodo](https://pypi.org/project/potodo/) 工具去計算出每個 po 檔案的翻譯完成度為何 [2] ， +進行了本次的資料視覺化挑戰。 + +{% asset_img code_views.png [code_pageviews] %} +> [1] : [python-docs-zh-tw](https://github.com/python/python-docs-zh-tw) 個別頁面的瀏覽資料 + +{% asset_img code_potodo.png [code_potodo] %} +> [2] : [python-docs-zh-tw](https://github.com/python/python-docs-zh-tw) 各項檔案的翻譯完成度資料 + +本來想說都靠著前人有經驗產生過的資料，也來自己產生看看， +產生過程都沒問題，**這兩個檔案的正規化 (Normalized) 才是挑戰**。 + +這個機會又讓我跟 [Pandas.DataFrame](https://pandas.pydata.org/docs/reference/api/pandas.DataFrame.html) 再次熟悉了一下。 + +最後的結果如下： +1. 頁面瀏覽次數及訪客數的曲線圖 + + Color => Folder + + X-axis => Visitors + + Y-axis => Pageviews + + Filter : 500 < Pageviews < 2500 + + (500 以下過於密集、2500 以上只有Tutorial/index, Library/datetime ) +{% asset_img pageviews_visitors.png [pageviews_visitors] %} + +2. 頁面瀏覽次數及訪客數的曲線圖 + + Color => Filename + + X-axis => Pageviews + + Y-axis => Translated Percent + + Filter : 500 < Pageviews , Remove Tutorial, Installing + + Note : 移掉後面兩個是不知道為什麼跟 potodo 的資料對不上 + + Note : 圖片中 Translated Percent 為 0 的也是 potodo 無資料 +{% asset_img pageviews_translated.png [pageviews_translated] %} + +以前擅長的都是結合 GeoData 的地圖視覺化，這次挑戰純數字資料的視覺化是個挑戰啊。 + +P.S. 好的資料集真的很重要，向所有的 Data Scientist 看齊！ +P.P.S. 不小心喚起了記憶，大學時期分數最慘的科目就是*統計*。 \ No newline at end of file diff --git a/source/_posts/visualize-first-try/code_potodo.png b/source/_posts/visualize-first-try/code_potodo.png new file mode 100644 index 0000000..e00524c Binary files /dev/null and b/source/_posts/visualize-first-try/code_potodo.png differ diff --git a/source/_posts/visualize-first-try/code_views.png b/source/_posts/visualize-first-try/code_views.png new file mode 100644 index 0000000..72e89a9 Binary files /dev/null and b/source/_posts/visualize-first-try/code_views.png differ diff --git a/source/_posts/visualize-first-try/pageviews_translated.png b/source/_posts/visualize-first-try/pageviews_translated.png new file mode 100644 index 0000000..564c83d Binary files /dev/null and b/source/_posts/visualize-first-try/pageviews_translated.png differ diff --git a/themes/frame/_config.yml b/themes/frame/_config.yml new file mode 100644 index 0000000..7895cfe --- /dev/null +++ b/themes/frame/_config.yml @@ -0,0 +1,85 @@ + +# html lang +language: zh-tw + +# header +site_brand_name: RockLeon.DevBlog + +logo_image: + enable: false + image_path: /logo.png # path to your logo image + +menu: + Home: / + Posts: /archives/ + Profile: https://cv.rockleon.dev + LinkTree: https://cv.rockleon.dev/linktree + +# stylesheets loaded in the +stylesheets: +- /css/style.css + +# scripts loaded in the end of the body +scripts: +- /js/frame.js + +# favicon +favicon: /favicon.ico + +date_format: MMM D, YYYY + +# profile +profile: + title: 嗨，陌生人 + body: 這邊是我的開發小窩 + image: /profile_cover.jpg + + links: + Home: / + Posts: /archives/ + Profile: https://cv.rockleon.dev + LinkTree: https://cv.rockleon.dev/linktree + +# footer +footer: + copyright_info: + enable: false + author: + + powered_by: # Powered by Hexo & Frame + enable: true + + other_info: + enable: false + content: + +# color mode: default / classic / dark +color_mode: default + +# mathjax setting +# note: need to install the hexo plugin for math: https://github.com/hexojs/hexo-math +mathjax_enable: false + +# comments: support disqus and valine +valine: # valine setup guide: https://valine.js.org/quickstart.html + enable: false + appId: # Your valine app Id + appKey: # Your valine app Key + lang: 'en' + placeholder: 'Say something' + avatar: 'mp' + meta: ['nick', 'mail'] + +disqus: # disqus setup guide: https://help.disqus.com/en/articles/1717056-publisher-quick-start-guide + enable: false + disqus_url: # your diqsuq url or shortname + language: 'en' + +# local search +local_search: + enable: false + place_holder: Search Anything + trigger: auto # auto: trigger search whenever input changes + top_n_per_article: 1 # show top n results per article, show all results by setting to -1 + unescape: false # unescape html strings to the readable one + preload: false # reload the search data when the page loads, this will accelerate the search process diff --git a/themes/frame/layout/archive.ejs b/themes/frame/layout/archive.ejs new file mode 100644 index 0000000..426f6a8 --- /dev/null +++ b/themes/frame/layout/archive.ejs @@ -0,0 +1 @@ +<%- partial('partials/post_list') %> \ No newline at end of file diff --git a/themes/frame/layout/category.ejs b/themes/frame/layout/category.ejs new file mode 100644 index 0000000..aad151a --- /dev/null +++ b/themes/frame/layout/category.ejs @@ -0,0 +1,4 @@ +
+ <%- partial('partials/post_gallery') %> +
+ diff --git a/themes/frame/layout/index.ejs b/themes/frame/layout/index.ejs new file mode 100644 index 0000000..a8c4c3e --- /dev/null +++ b/themes/frame/layout/index.ejs @@ -0,0 +1 @@ +<%- partial('pages/profile') %> \ No newline at end of file diff --git a/themes/frame/layout/layout.ejs b/themes/frame/layout/layout.ejs new file mode 100644 index 0000000..5311bfe --- /dev/null +++ b/themes/frame/layout/layout.ejs @@ -0,0 +1,30 @@ + + + + <%- partial('partials/head') %> + + +
+
+ +
+ + <%- partial('partials/header') %> + +
+
+ <%- body %> +
+
+ + <%- partial('partials/footer') %> + +
+ + <% if (theme.local_search.enable) {%> + <%- partial('partials/search') %> + <% } %> + + + + diff --git a/themes/frame/layout/pages/page_head.ejs b/themes/frame/layout/pages/page_head.ejs new file mode 100644 index 0000000..709fd55 --- /dev/null +++ b/themes/frame/layout/pages/page_head.ejs @@ -0,0 +1,14 @@ +
+
+
+ + <% if (page.title) {%> + <%= page.title %> + <% } else {%> + *Untitled + <% } %> + +
+
+
+
\ No newline at end of file diff --git a/themes/frame/layout/pages/profile.ejs b/themes/frame/layout/pages/profile.ejs new file mode 100644 index 0000000..19f38a0 --- /dev/null +++ b/themes/frame/layout/pages/profile.ejs @@ -0,0 +1,21 @@ +
+
+ <% if (theme.profile.image) {%> + featured_image + <% } %> +
+
+
+ <%=theme.profile.title%> +
+
+ <%=theme.profile.body%> +
+ <% Object.keys(theme.profile.links).forEach(key => { %> +
+ <%=key%> +
+ <% }); %> +
+ +
\ No newline at end of file diff --git a/themes/frame/layout/partials/footer.ejs b/themes/frame/layout/partials/footer.ejs new file mode 100644 index 0000000..2548a1b --- /dev/null +++ b/themes/frame/layout/partials/footer.ejs @@ -0,0 +1,16 @@ +
+
+
+ <% if (theme.footer.other_info.enable) {%> + <%= theme.footer.other_info.content %> +
+ <% }%> + <% if (theme.footer.copyright_info.enable) {%> + <%= theme.footer.copyright_info.author %> | + <% }%> + <% if (theme.footer.powered_by.enable) {%> + Powered by Hexo & Frame + <% }%> +
+
+
\ No newline at end of file diff --git a/themes/frame/layout/partials/head.ejs b/themes/frame/layout/partials/head.ejs new file mode 100644 index 0000000..a20d8a3 --- /dev/null +++ b/themes/frame/layout/partials/head.ejs @@ -0,0 +1,75 @@ + + + +<% if(config.author){ %> + +<% } %> +<% if(config.subtitle){ %> + +<% } %> +<% if(config.description){ %> + +<% } %> +<% if(config.keywords){ %> + +<% } %> + +<% +var title = page.title; + +if (is_archive()){ + title = __('Archive'); + + if (is_month()){ + title += ': ' + page.year + '/' + page.month; + } else if (is_year()){ + title += ': ' + page.year; + } +} else if (is_category()){ + title = __('Category') + ': ' + page.category; +} else if (is_tag()){ + title = __('Tag') + ': ' + page.tag; +} +%> + +<% if (title){ %><%= title %> | <% } %><%= config.title %> + +<%# favicon %> +<% if (theme.favicon){ %> + +<% } %> + +<%# font %> + + +<%# css list %> +<% if (theme.stylesheets !== undefined && theme.stylesheets.length > 0) { %> + + <% theme.stylesheets.forEach(url => { %> + + <% }); %> +<% } %> + +<%# javascript list %> +<% if (theme.scripts !== undefined && theme.scripts.length > 0) { %> + + <% theme.scripts.forEach(url => { %> + + <% }); %> +<% } %> + +<%# mathjax support %> +<% if(theme.mathjax_enable){ %> + + +<% } %> + +<%# valine comment support %> +<% if(theme.valine.enable){ %> + +<% } %> + + diff --git a/themes/frame/layout/partials/header.ejs b/themes/frame/layout/partials/header.ejs new file mode 100644 index 0000000..903b7d2 --- /dev/null +++ b/themes/frame/layout/partials/header.ejs @@ -0,0 +1,38 @@ +
+
+
+
+ + <% if (theme.logo_image.enable) {%> + logo_image + <%} else {%> + <%= theme.site_brand_name %> + <% } %> + +
+ + +
+
+
diff --git a/themes/frame/layout/partials/paginator.ejs b/themes/frame/layout/partials/paginator.ejs new file mode 100644 index 0000000..41c2639 --- /dev/null +++ b/themes/frame/layout/partials/paginator.ejs @@ -0,0 +1,14 @@ +<% if (page.total > 1){ %> +
+
+ +
+<% } %> \ No newline at end of file diff --git a/themes/frame/layout/partials/post_gallery.ejs b/themes/frame/layout/partials/post_gallery.ejs new file mode 100644 index 0000000..488270d --- /dev/null +++ b/themes/frame/layout/partials/post_gallery.ejs @@ -0,0 +1,42 @@ +
+
+ <% page.posts.each(function (post) { %> +
+
+
+ <% if (post.tags && post.tags.data && post.tags.data.length > 0) {%> + <% post.tags.data.forEach(function(tag) { %> + + + <%=tag.name%> + + + <% }) %> + <% } %> +
+
+ + <% if (post.title) {%> + <%= post.title %> + <% } else {%> + *Untitled + <% } %> + +
+ + <%- date(post.date, theme.date_format) %> + +
+
+ <% if (post.featured_image) {%> + featured_image + <% } %> +
+
+
+ <% }) %> +
+
+ <%- partial('partials/paginator') %> +
+
diff --git a/themes/frame/layout/partials/post_list.ejs b/themes/frame/layout/partials/post_list.ejs new file mode 100644 index 0000000..df3e8f2 --- /dev/null +++ b/themes/frame/layout/partials/post_list.ejs @@ -0,0 +1,29 @@ +
+ <% var last_year = ''; %> + <% page.posts.each(function (post) { %> + + <% var cur_year = post.date.year(); %> + + <% if(last_year !== cur_year){ %> +
<%- cur_year %>
+ <% last_year = cur_year; } %> + +
+
+ + <% if (post.title) {%> + <%= post.title %> + <% } else {%> + *Untitled + <% } %> + +
+ + <%- date(post.date, theme.date_format) %> +
+ + <% }) %> +
+ <%- partial('partials/paginator') %> +
+
diff --git a/themes/frame/layout/partials/search.ejs b/themes/frame/layout/partials/search.ejs new file mode 100644 index 0000000..31a8fd5 --- /dev/null +++ b/themes/frame/layout/partials/search.ejs @@ -0,0 +1,30 @@ +
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/themes/frame/layout/partials/tag_cloud.ejs b/themes/frame/layout/partials/tag_cloud.ejs new file mode 100644 index 0000000..75d8eef --- /dev/null +++ b/themes/frame/layout/partials/tag_cloud.ejs @@ -0,0 +1,11 @@ +
+
+ <%site.tags.forEach(tag=>{%> + + + <%=tag.name%> + + + <%})%> +
+
\ No newline at end of file diff --git a/themes/frame/layout/post.ejs b/themes/frame/layout/post.ejs new file mode 100644 index 0000000..0047549 --- /dev/null +++ b/themes/frame/layout/post.ejs @@ -0,0 +1,14 @@ +
+ + <% if (is_post()) {%> + <%- partial('post/post_head') %> + <%- partial('post/post_content') %> + <%- partial('post/post_footer') %> + <% if (!page.hide_comment) {%> + <%- partial('post/post_comment') %> + <% } %> + <%} else {%> + <%- partial('pages/page_head') %> + <%- partial('post/post_content') %> + <%} %> +
\ No newline at end of file diff --git a/themes/frame/layout/post/post_comment.ejs b/themes/frame/layout/post/post_comment.ejs new file mode 100644 index 0000000..60a76fb --- /dev/null +++ b/themes/frame/layout/post/post_comment.ejs @@ -0,0 +1,48 @@ +
+ + <% if (theme.valine.enable) {%> +
+ + <% } %> + + <% if (theme.disqus.enable) {%> +
+ + + <% } %> + + + +
\ No newline at end of file diff --git a/themes/frame/layout/post/post_content.ejs b/themes/frame/layout/post/post_content.ejs new file mode 100644 index 0000000..e51bc05 --- /dev/null +++ b/themes/frame/layout/post/post_content.ejs @@ -0,0 +1,7 @@ +
+ <%-page.content%> +
+ + \ No newline at end of file diff --git a/themes/frame/layout/post/post_footer.ejs b/themes/frame/layout/post/post_footer.ejs new file mode 100644 index 0000000..c497889 --- /dev/null +++ b/themes/frame/layout/post/post_footer.ejs @@ -0,0 +1,21 @@ +
+
+ +
diff --git a/themes/frame/layout/post/post_head.ejs b/themes/frame/layout/post/post_head.ejs new file mode 100644 index 0000000..ad82140 --- /dev/null +++ b/themes/frame/layout/post/post_head.ejs @@ -0,0 +1,34 @@ +
+
+
+ <% if (page.tags && page.tags.data && page.tags.data.length > 0) {%> + <% page.tags.data.forEach(function(tag) { %> + + + <%=tag.name%> + + + <% }) %> + <% } %> +
+
+ + <% if (page.title) {%> + <%= page.title %> + <% } else {%> + *Untitled + <% } %> + +
+ + <%- date(page.date, theme.date_format) %> + +
+
+ <% if (page.featured_image) {%> + featured_image + <% } else { %> +
+ <% } %> +
+
\ No newline at end of file diff --git a/themes/frame/layout/tag.ejs b/themes/frame/layout/tag.ejs new file mode 100644 index 0000000..045cc16 --- /dev/null +++ b/themes/frame/layout/tag.ejs @@ -0,0 +1,17 @@ +
+ <% if(is_tag()){ %> + +

+ / tags + / <%=page.tag%> / +

+ <%- partial('partials/post_list') %> + + <% }else{ %> + +

/ tags /

+ <%- partial('partials/tag_cloud') %> + + <% } %> + +
\ No newline at end of file diff --git a/themes/frame/source/css/base.styl b/themes/frame/source/css/base.styl new file mode 100644 index 0000000..45b2219 --- /dev/null +++ b/themes/frame/source/css/base.styl @@ -0,0 +1,38 @@ +div + display block + padding 0 + margin 0 + +ul + list-style none + padding 0 + margin 0 + +*::before, *::after + box-sizing border-box + +a + text-decoration: none + color: $color-text-primary + +input + outline none + border none + +body + text-style(body-default) + background-color $color-background + +/* clears the 'X' from Internet Explorer */ +input[type=search]::-ms-clear + display none + width 0 + height 0 +input[type=search]::-ms-reveal + display none + width 0 + height 0 + +/* clears the 'X' from Chrome */ +input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration + display: none diff --git a/themes/frame/source/css/color.styl b/themes/frame/source/css/color.styl new file mode 100644 index 0000000..c7cf2c2 --- /dev/null +++ b/themes/frame/source/css/color.styl @@ -0,0 +1,10 @@ +$color_path = 'color_mode/default.styl' + +if hexo-config("color_mode") == 'default' + $color_path = 'color_mode/default.styl' +else if hexo-config("color_mode") == 'dark' + $color_path = 'color_mode/dark.styl' +else if hexo-config("color_mode") == 'classic' + $color_path = 'color_mode/classic.styl' + +@import $color_path diff --git a/themes/frame/source/css/color_mode/classic.styl b/themes/frame/source/css/color_mode/classic.styl new file mode 100644 index 0000000..c724248 --- /dev/null +++ b/themes/frame/source/css/color_mode/classic.styl @@ -0,0 +1,17 @@ +// COLOR +$color-text-primary = #002A56 +$color-text-secondary = #9FAAB5 +$color-text-third = #CED6DF +$color-text-fourth = #EDF0F3 +$color-background = #FFFCF2 + +$color-code-background = #F8F6F0 +$color-code-highlight = #0177AA +$color-code-default = #7e7e7e +$color-code-marker = #BABABA + +$color-search-marker = #FFF59B +$color-overlay = rgba(0, 0, 0, 0.2) + +// CODE HIGHLIGHT +@import "../highlight/solarized-light.styl" \ No newline at end of file diff --git a/themes/frame/source/css/color_mode/dark.styl b/themes/frame/source/css/color_mode/dark.styl new file mode 100644 index 0000000..694fc97 --- /dev/null +++ b/themes/frame/source/css/color_mode/dark.styl @@ -0,0 +1,17 @@ +// COLOR +$color-text-primary = #d5d5d5 +$color-text-secondary = #6C6C6C +$color-text-third = #838383 +$color-text-fourth = #414141 +$color-background = #202020 + +$color-code-background = #AFAFAF +$color-code-highlight = #60CFFF +$color-code-default = #d5d5d5 +$color-code-marker = #BDBDBD + +$color-search-marker = #756D29 +$color-overlay = rgba(0, 0, 0, 0.8) + +// CODE HIGHLIGHT +@import "../highlight/rainbow.styl" \ No newline at end of file diff --git a/themes/frame/source/css/color_mode/default.styl b/themes/frame/source/css/color_mode/default.styl new file mode 100644 index 0000000..0df4728 --- /dev/null +++ b/themes/frame/source/css/color_mode/default.styl @@ -0,0 +1,17 @@ +// COLOR +$color-text-primary = #373633 +$color-text-secondary = #AFAEA9 +$color-text-third = #E8E8E8 +$color-text-fourth = #EFEFEF +$color-background = #ffffff + +$color-code-background = #F4F4F4 +$color-code-highlight = #0177AA +$color-code-default = #7D7C78 +$color-code-marker = #BABABA + +$color-search-marker = #FFF59B +$color-overlay = rgba(0, 0, 0, 0.2) + +// CODE HIGHLIGHT +@import "../highlight/solarized-light.styl" \ No newline at end of file diff --git a/themes/frame/source/css/component/component.styl b/themes/frame/source/css/component/component.styl new file mode 100644 index 0000000..bbc9d6c --- /dev/null +++ b/themes/frame/source/css/component/component.styl @@ -0,0 +1,42 @@ +.h-line-primary + background-color $color-text-primary + height $line-third + +.h-line-secondary + background-color $color-text-secondary + height $line-third + +hr + background-color $color-text-third + height $line-third + border 0 + +.tag-list + display flex + flex-wrap wrap + margin-bottom $margin-m-0 + +.tag-title + margin $margin-m-1 0 + color $color-text-secondary + font-size $font-size-header + + a + color @color + +.post-tag + text-style(post-tag) + border $line-third solid $color-text-primary + margin-right $margin-s-2 + margin-bottom $margin-s-2 + padding $margin-s-2 $margin-m-0 $margin-s-2 $margin-m-0 + border-radius $margin-m-2 + + a + background-image none!important + + &:hover + background-color $color-text-primary + + a + color $color-background diff --git a/themes/frame/source/css/component/icon.styl b/themes/frame/source/css/component/icon.styl new file mode 100644 index 0000000..8a6c051 --- /dev/null +++ b/themes/frame/source/css/component/icon.styl @@ -0,0 +1,21 @@ +.icon + display block + background-color $color-text-primary + width $icon-size + height $icon-size + +.arrow-up + -webkit-mask-image url('../icon/arrow-up.svg') + mask-image url('../icon/arrow-up.svg') + +.arrow-left + -webkit-mask-image url('../icon/arrow-left.svg') + mask-image url('../icon/arrow-left.svg') + +.arrow-right + -webkit-mask-image url('../icon/arrow-right.svg') + mask-image url('../icon/arrow-right.svg') + +.close-btn + -webkit-mask-image url('../icon/close-btn.svg') + mask-image url('../icon/close-btn.svg') \ No newline at end of file diff --git a/themes/frame/source/css/font.styl b/themes/frame/source/css/font.styl new file mode 100644 index 0000000..046d2f0 --- /dev/null +++ b/themes/frame/source/css/font.styl @@ -0,0 +1,119 @@ +// Text Style +text-style(n) + if n == 'body-default' + font-family 'Inter', 'Noto Sans SC', helvetica, arial + font-size $font-size-body + font-weight $font-weight-regular + line-height $line-height-body + color $color-text-primary + + else if n == 'body-bold' + font-size $font-size-body + font-weight $font-weight-bold + line-height $line-height-body + color $color-text-primary + + else if n == 'body-italic' + font-size $font-size-body + font-weight $font-weight-regular + font-style italic + line-height $line-height-body + color $color-text-primary + + else if n == 'body-delete' + font-size $font-size-body + font-weight $font-weight-regular + line-height $line-height-body + text-decoration line-through + color $color-text-primary + + else if n == 'code-default' + font-family 'Roboto Mono', menlo, monospace; + font-size $font-size-code + line-height $line-height-code + color $color-code-default + + else if n == 'code-highlight' + font-family 'Roboto Mono', menlo, monospace; + font-size $font-size-code + line-height $line-height-code + color $color-code-highlight + + else if n == 'code-marker' + font-family 'Roboto Mono', menlo, monospace; + font-size $font-size-code + line-height $line-height-code + color $color-code-marker + + else if n == 'heading-h1' + font-size $font-size-heading-h1 + font-weight $font-weight-bold + line-height $line-height-heading-h1 + color $color-text-primary + + else if n == 'heading-h2' + font-size $font-size-heading-h2 + font-weight $font-weight-bold + line-height $line-height-heading-h2 + color $color-text-primary + + else if n == 'heading-h3' + font-size $font-size-heading-h3 + font-weight $font-weight-bold + line-height $line-height-heading-h3 + color $color-text-primary + + else if n == 'heading-h4' + font-size $font-size-heading-h4 + font-weight $font-weight-bold + line-height $line-height-heading-h4 + color $color-text-primary + + else if n == 'heading-h5' + font-size $font-size-heading-h5 + font-weight $font-weight-semibold + line-height $line-height-heading-h5 + color $color-text-primary + + else if n == 'heading-h6' + font-size $font-size-heading-h6 + font-weight $font-weight-medium + line-height $line-height-heading-h6 + color $color-text-primary + + else if n == 'footer' + font-size $font-size-footer + font-weight $font-weight-regular + line-height $line-height-footer + color $color-text-primary + + else if n == 'header' + font-size $font-size-header + font-weight $font-weight-medium + line-height $line-height-header + color $color-text-primary + + else if n == 'post-date' + font-size $font-size-post-date + font-weight $font-weight-regular + line-height $line-height-post-date + color $color-text-primary + + else if n == 'year-title' + font-size $font-size-year-title + font-weight $font-weight-bold + line-height $line-height-year-title + color $color-text-third + + else if n == 'post-tag' + font-size $font-size-post-tag + font-weight $font-weight-medium + line-height $line-height-post-tag + + else if n == 'search-result-message' + font-family 'Roboto Mono', menlo, monospace; + font-size $font-size-code + line-height $line-height-code + color $color-text-third + text-transform lowercase + diff --git a/themes/frame/source/css/highlight/ascetic.styl b/themes/frame/source/css/highlight/ascetic.styl new file mode 100644 index 0000000..be4c667 --- /dev/null +++ b/themes/frame/source/css/highlight/ascetic.styl @@ -0,0 +1,37 @@ +/* + +Original style from softwaremaniacs.org (c) Ivan Sagalaev + +*/ + +.highlight + color: black + background: white + .code + .string, + .variable, + .template-variable, + .symbol, + .bullet, + .section, + .addition, + .attribute, + .link + color: #888 + + .comment, + .quote, + .meta, + .deletion + color: #ccc + + .keyword, + .selector-tag, + .section, + .name, + .type, + .strong + font-weight: bold + + .emphasis + font-style: italic diff --git a/themes/frame/source/css/highlight/brown-paper.styl b/themes/frame/source/css/highlight/brown-paper.styl new file mode 100644 index 0000000..a963a1a --- /dev/null +++ b/themes/frame/source/css/highlight/brown-paper.styl @@ -0,0 +1,55 @@ +/* + +Brown Paper style from goldblog.com.ua (c) Zaripov Yura + +*/ + +.highlight + color: #363c69 + background:#b7a68e url(brown-papersq.png) + .code + .keyword, + .selector-tag, + .literal + color:#005599 + font-weight:bold + + .highlight, + .subst + color: #363c69 + + .string, + .title, + .section, + .type, + .attribute, + .symbol, + .bullet, + .built_in, + .addition, + .variable, + .template-tag, + .template-variable, + .link, + .name + color: #2c009f + + .comment, + .quote, + .meta, + .deletion + color: #802022 + + .keyword, + .selector-tag, + .literal, + .doctag, + .title, + .section, + .type, + .name, + .strong + font-weight: bold + + .emphasis + font-style: italic diff --git a/themes/frame/source/css/highlight/dark.styl b/themes/frame/source/css/highlight/dark.styl new file mode 100644 index 0000000..c50d54f --- /dev/null +++ b/themes/frame/source/css/highlight/dark.styl @@ -0,0 +1,27 @@ +/* + + Dark style from softwaremaniacs.org (c) Ivan Sagalaev + +*/ +.highlight + background: #444 + color: #ddd + + .code + .keyword, .selector-tag, .literal, .section, .link + color: white + + .subst + color: #ddd + + .string, .title, .name, .type, .attribute, .symbol, .bullet, .built_in, .addition, .variable, .template-tag, .template-variable + color: #d88 + + .comment, .quote, .deletion, .meta + color: #777 + + .keyword, .selector-tag, .literal, .title, .section, .doctag, .type, .name, .strong + font-weight: bold + + .emphasis + font-style: italic diff --git a/themes/frame/source/css/highlight/darkula.styl b/themes/frame/source/css/highlight/darkula.styl new file mode 100644 index 0000000..0295887 --- /dev/null +++ b/themes/frame/source/css/highlight/darkula.styl @@ -0,0 +1,33 @@ +/* + + Darkula color scheme from the JetBrains family of IDEs + +*/ +.highlight + background: #2b2b2b + color: #bababa + + .code + .strong, .emphasis + color: #a8a8a2 + + .bullet, .quote, .link, .number, .regexp, .literal + color: #6896ba + + .code, .selector-class + color: #a6e22e + + .emphasis + font-style: italic + + .keyword, .selector-tag, .section, .attribute, .name, .variable + color: #cb7832 + + .params + color: #b9b9b9 + + .string, .subst, .type, .built_in, .builtin-name, .symbol, .selector-id, .selector-attr, .selector-pseudo, .template-tag, .template-variable, .addition + color: #e0c46c + + .comment, .deletion, .meta + color: #7f7f7f diff --git a/themes/frame/source/css/highlight/foundation.styl b/themes/frame/source/css/highlight/foundation.styl new file mode 100644 index 0000000..ad4e4ea --- /dev/null +++ b/themes/frame/source/css/highlight/foundation.styl @@ -0,0 +1,71 @@ +/* +Description: Foundation 4 docs style for highlight.js +Author: Dan Allen +Website: http://foundation.zurb.com/docs/ +Version: 1.0 +Date: 2013-04-02 +*/ + +.highlight + color: black + background: #eee + .code + .link, + .emphasis, + .attribute, + .addition + color: #070 + + .emphasis + font-style: italic + + .strong, + .string, + .deletion + color: #d14 + + .strong + font-weight: bold + + .quote, + .comment + color: #998 + font-style: italic + + .section, + .title + color: #900 + + .class .title, + .type + color: #458 + + .variable, + .template-variable + color: #336699 + + .bullet + color: #997700 + + .meta + color: #3344bb + + .code, + .number, + .literal, + .keyword, + .selector-tag + color: #099 + + .regexp + background-color: #fff0ff + color: #880088 + + .symbol + color: #990073 + + .tag, + .name, + .selector-id, + .selector-class + color: #007700 diff --git a/themes/frame/source/css/highlight/github-gist.styl b/themes/frame/source/css/highlight/github-gist.styl new file mode 100644 index 0000000..e3a81ce --- /dev/null +++ b/themes/frame/source/css/highlight/github-gist.styl @@ -0,0 +1,57 @@ +/** + * GitHub Gist Theme + * Author : Louis Barranqueiro - https://github.com/LouisBarranqueiro + */ + +.highlight + padding: 0.5em + color: #333333 + .code + .comment, + .meta + color: #969896 + + .string, + .variable, + .template-variable, + .strong, + .emphasis, + .quote + color: #df5000 + + .keyword, + .selector-tag, + .type + color: #a71d5d + + .literal, + .symbol, + .bullet, + .attribute + color: #0086b3 + + .section, + .name + color: #63a35c + + .tag + color: #333333 + + .title, + .attr, + .selector-id, + .selector-class, + .selector-attr, + .selector-pseudo + color: #795da3 + + .addition + color: #55a532 + background-color: #eaffea + + .deletion + color: #bd2c00 + background-color: #ffecec + + .link + text-decoration: underline diff --git a/themes/frame/source/css/highlight/github.styl b/themes/frame/source/css/highlight/github.styl new file mode 100644 index 0000000..34ef869 --- /dev/null +++ b/themes/frame/source/css/highlight/github.styl @@ -0,0 +1,79 @@ +/* + +github.com style (c) Vasily Polovnyov + +*/ + +.highlight + color: #333 + background: #f8f8f8 + .code + .comment, + .quote + color: #998 + font-style: italic + + .keyword, + .selector-tag, + .subst + color: #333 + font-weight: bold + + .number, + .literal, + .variable, + .template-variable, + .tag .attr + color: #008080 + + .string, + .doctag + color: #d14 + + .title, + .section, + .selector-id + color: #900 + font-weight: bold + + .subst + font-weight: normal + + .type, + .class .title + color: #458 + font-weight: bold + + .tag, + .name, + .attribute + color: #000080 + font-weight: normal + + .regexp, + .link + color: #009926 + + .symbol, + .bullet + color: #990073 + + .built_in, + .builtin-name + color: #0086b3 + + .meta + color: #999 + font-weight: bold + + .deletion + background: #fdd + + .addition + background: #dfd + + .emphasis + font-style: italic + + .strong + font-weight: bold diff --git a/themes/frame/source/css/highlight/googlecode.styl b/themes/frame/source/css/highlight/googlecode.styl new file mode 100644 index 0000000..f2e38b8 --- /dev/null +++ b/themes/frame/source/css/highlight/googlecode.styl @@ -0,0 +1,72 @@ +/* + +Google Code style (c) Aahan Krish + +*/ + +.highlight + color: black + background: white + .code + .comment, + .quote + color: #800 + + .keyword, + .selector-tag, + .section, + .title, + .name + color: #008 + + .variable, + .template-variable + color: #660 + + .string, + .selector-attr, + .selector-pseudo, + .regexp + color: #080 + + .literal, + .symbol, + .bullet, + .meta, + .number, + .link + color: #066 + + .title, + .doctag, + .type, + .attr, + .built_in, + .builtin-name, + .params + color: #606 + + .attribute, + .subst + color: #000 + + .formula + background-color: #eee + font-style: italic + + .selector-id, + .selector-class + color: #9B703F + + .addition + background-color: #baeeba + + .deletion + background-color: #ffc8bd + + .doctag, + .strong + font-weight: bold + + .emphasis + font-style: italic diff --git a/themes/frame/source/css/highlight/idea.styl b/themes/frame/source/css/highlight/idea.styl new file mode 100644 index 0000000..8b46881 --- /dev/null +++ b/themes/frame/source/css/highlight/idea.styl @@ -0,0 +1,78 @@ +/* + +Intellij Idea-like styling (c) Vasily Polovnyov + +*/ + +.highlight + color: #000 + background: #fff + .code + .subst, + .title + font-weight: normal + color: #000 + + .comment, + .quote + color: #808080 + font-style: italic + + .meta + color: #808000 + + .tag + background: #efefef + + .section, + .name, + .literal, + .keyword, + .selector-tag, + .type, + .selector-id, + .selector-class + font-weight: bold + color: #000080 + + .attribute, + .number, + .regexp, + .link + font-weight: bold + color: #0000ff + + .number, + .regexp, + .link + font-weight: normal + + .string + color: #008000 + font-weight: bold + + .symbol, + .bullet, + .formula + color: #000 + background: #d0eded + font-style: italic + + .doctag + text-decoration: underline + + .variable, + .template-variable + color: #660e7a + + .addition + background: #baeeba + + .deletion + background: #ffc8bd + + .emphasis + font-style: italic + + .strong + font-weight: bold diff --git a/themes/frame/source/css/highlight/rainbow.styl b/themes/frame/source/css/highlight/rainbow.styl new file mode 100644 index 0000000..9517f79 --- /dev/null +++ b/themes/frame/source/css/highlight/rainbow.styl @@ -0,0 +1,46 @@ +/* + + Style with support for rainbow parens + +*/ +.highlight + background: #474949 + color: #d1d9e1 + + .code + .comment, .quote + color: #969896 + font-style: italic + + .keyword, .selector-tag, .literal, .type, .addition + color: #cc99cc + + .number, .selector-attr, .selector-pseudo + color: #f99157 + + .string, .doctag, .regexp + color: #8abeb7 + + .title, .name, .section, .built_in + color: #b5bd68 + + .variable, .template-variable, .selector-id, .class .title + color: #ffcc66 + + .section, .name, .strong + font-weight: bold + + .symbol, .bullet, .subst, .meta, .link + color: #f99157 + + .deletion + color: #dc322f + + .formula + background: #eee8d5 + + .attr, .attribute + color: #81a2be + + .emphasis + font-style: italic diff --git a/themes/frame/source/css/highlight/school-book.styl b/themes/frame/source/css/highlight/school-book.styl new file mode 100644 index 0000000..0114b9b --- /dev/null +++ b/themes/frame/source/css/highlight/school-book.styl @@ -0,0 +1,57 @@ +/* + +School Book style from goldblog.com.ua (c) Zaripov Yura + +*/ + +.highlight + background:#f6f6ae url(school-book.png) + border-top: solid 2px #d2e8b9 + border-bottom: solid 1px #d2e8b9 + .code + .keyword, + .selector-tag, + .literal + color:#005599 + font-weight:bold + + .highlight, + .subst + color: #3e5915 + + .string, + .title, + .section, + .type, + .symbol, + .bullet, + .attribute, + .built_in, + .builtin-name, + .addition, + .variable, + .template-tag, + .template-variable, + .link + color: #2c009f + + .comment, + .quote, + .deletion, + .meta + color: #e60415 + + .keyword, + .selector-tag, + .literal, + .doctag, + .title, + .section, + .type, + .name, + .selector-id, + .strong + font-weight: bold + + .emphasis + font-style: italic diff --git a/themes/frame/source/css/highlight/solarized-dark.styl b/themes/frame/source/css/highlight/solarized-dark.styl new file mode 100644 index 0000000..ad53b3f --- /dev/null +++ b/themes/frame/source/css/highlight/solarized-dark.styl @@ -0,0 +1,45 @@ +/* + + Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull + +*/ +.highlight + background: #002b36 + color: #839496 + + .code + .comment, .quote + color: #586e75 + + /* Solarized Green */ + .keyword, .selector-tag, .addition + color: #859900 + + /* Solarized Cyan */ + .number, .string, .meta .meta-string, .literal, .doctag, .regexp + color: #2aa198 + + /* Solarized Blue */ + .title, .section, .name, .selector-id, .selector-class + color: #268bd2 + + /* Solarized Yellow */ + .attribute, .attr, .variable, .template-variable, .class .title, .type + color: #b58900 + + /* Solarized Orange */ + .symbol, .bullet, .subst, .meta, .meta .keyword, .selector-attr, .selector-pseudo, .link + color: #cb4b16 + + /* Solarized Red */ + .built_in, .deletion + color: #dc322f + + .formula + background: #073642 + + .emphasis + font-style: italic + + .strong + font-weight: bold diff --git a/themes/frame/source/css/highlight/solarized-light.styl b/themes/frame/source/css/highlight/solarized-light.styl new file mode 100644 index 0000000..5bb74ce --- /dev/null +++ b/themes/frame/source/css/highlight/solarized-light.styl @@ -0,0 +1,71 @@ +/* + +Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull + +*/ + +.highlight + color: #657b83 + table + background: #fdf6e3 + .code + .comment, + .quote + color: #93a1a1 + + /* Solarized Green */ + .keyword, + .selector-tag, + .addition + color: #859900 + + /* Solarized Cyan */ + .number, + .string, + .meta .meta-string, + .literal, + .doctag, + .regexp + color: #2aa198 + + /* Solarized Blue */ + .title, + .section, + .name, + .selector-id, + .selector-class + color: #268bd2 + + /* Solarized Yellow */ + .attribute, + .attr, + .variable, + .template-variable, + .class .title, + .type + color: #b58900 + + /* Solarized Orange */ + .symbol, + .bullet, + .subst, + .meta, + .meta .keyword, + .selector-attr, + .selector-pseudo, + .link + color: #cb4b16 + + /* Solarized Red */ + .built_in, + .deletion + color: #dc322f + + .formula + background: #eee8d5 + + .emphasis + font-style: italic + + .strong + font-weight: bold diff --git a/themes/frame/source/css/highlight/tomorrow.styl b/themes/frame/source/css/highlight/tomorrow.styl new file mode 100644 index 0000000..7511d36 --- /dev/null +++ b/themes/frame/source/css/highlight/tomorrow.styl @@ -0,0 +1,56 @@ +.highlight + color: #4d4d4c + background: white + .code + /* Tomorrow Comment */ + .comment, + .quote + color: #8e908c + + /* Tomorrow Red */ + .variable, + .template-variable, + .tag, + .name, + .selector-id, + .selector-class, + .regexp, + .deletion + color: #c82829 + + /* Tomorrow Orange */ + .number, + .built_in, + .builtin-name, + .literal, + .type, + .params, + .meta, + .link + color: #f5871f + + /* Tomorrow Yellow */ + .attribute + color: #eab700 + + /* Tomorrow Green */ + .string, + .symbol, + .bullet, + .addition + color: #718c00 + + /* Tomorrow Blue */ + .title, + .section + color: #4271ae + + /* Tomorrow Purple */ + .keyword, + .selector-tag + color: #8959a8 + .emphasis + font-style: italic + + .strong + font-weight: bold \ No newline at end of file diff --git a/themes/frame/source/css/highlight/vs.styl b/themes/frame/source/css/highlight/vs.styl new file mode 100644 index 0000000..78f1ea6 --- /dev/null +++ b/themes/frame/source/css/highlight/vs.styl @@ -0,0 +1,58 @@ +/* + +Visual Studio-like style based on original C# coloring by Jason Diamond + +*/ +.highlight + display: block + overflow-x: auto + padding: 0.5em + background: white + color: black + .code + .comment, + .quote, + .variable + color: #008000 + + .keyword, + .selector-tag, + .built_in, + .name, + .tag + color: #00f + + .string, + .title, + .section, + .attribute, + .literal, + .template-tag, + .template-variable, + .type, + .addition + color: #a31515 + + .deletion, + .selector-attr, + .selector-pseudo, + .meta + color: #2b91af + + .doctag + color: #808080 + + .attr + color: #f00 + + .symbol, + .bullet, + .link + color: #00b0e8 + + + .emphasis + font-style: italic + + .strong + font-weight: bold diff --git a/themes/frame/source/css/highlight/xcode.styl b/themes/frame/source/css/highlight/xcode.styl new file mode 100644 index 0000000..c0cfaf4 --- /dev/null +++ b/themes/frame/source/css/highlight/xcode.styl @@ -0,0 +1,74 @@ +/* + +XCode style (c) Angel Garcia + +*/ + +.highlight + color: black + background: #fff + .code + .comment, + .quote + color: #006a00 + + .keyword, + .selector-tag, + .literal + color: #aa0d91 + + .name + color: #008 + + .variable, + .template-variable + color: #660 + + .string + color: #c41a16 + + .regexp, + .link + color: #080 + + .title, + .tag, + .symbol, + .bullet, + .number, + .meta + color: #1c00cf + + .section, + .class .title, + .type, + .attr, + .built_in, + .builtin-name, + .params + color: #5c2699 + + .attribute, + .subst + color: #000 + + .formula + background-color: #eee + font-style: italic + + .addition + background-color: #baeeba + + .deletion + background-color: #ffc8bd + + .selector-id, + .selector-class + color: #9b703f + + .doctag, + .strong + font-weight: bold + + .emphasis + font-style: italic diff --git a/themes/frame/source/css/highlight/zenburn.styl b/themes/frame/source/css/highlight/zenburn.styl new file mode 100644 index 0000000..e93a20a --- /dev/null +++ b/themes/frame/source/css/highlight/zenburn.styl @@ -0,0 +1,46 @@ +/* + + Zenburn style from voldmar.ru (c) Vladimir Epifanov + based on dark.css by Ivan Sagalaev + +*/ +.highlight + background: #3f3f3f + color: #dcdcdc + + .code + .keyword, .selector-tag, .tag + color: #e3ceab + + .template-tag + color: #dcdcdc + + .number + color: #8cd0d3 + + .variable, .template-variable, .attribute + color: #efdcbc + + .literal + color: #efefaf + + .subst + color: #8f8f8f + + .title, .name, .selector-id, .selector-class, .section, .type + color: #efef8f + + .symbol, .bullet, .link + color: #dca3a3 + + .deletion, .string, .built_in, .builtin-name + color: #cc9393 + + .addition, .comment, .quote, .meta + color: #7f9f7f + + .emphasis + font-style: italic + + .strong + font-weight: bold diff --git a/themes/frame/source/css/layout.styl b/themes/frame/source/css/layout.styl new file mode 100644 index 0000000..b5e3718 --- /dev/null +++ b/themes/frame/source/css/layout.styl @@ -0,0 +1,23 @@ +body + margin 0 + +.mask-border::before + content '' + width 100% + height 100vh + border $line-primary $color-text-primary solid + position fixed + top 0 + left 0 + pointer-events none + z-index 8 + +.wrapper + display flex + flex-direction column + min-height 100vh + +.main + flex-grow 1 + padding 0 + margin 0 \ No newline at end of file diff --git a/themes/frame/source/css/media.styl b/themes/frame/source/css/media.styl new file mode 100644 index 0000000..d768194 --- /dev/null +++ b/themes/frame/source/css/media.styl @@ -0,0 +1,25 @@ +.flex-container + width 720px + margin 0 auto + +html + font-size 18px + +@media (max-width: 1600px) + html + font-size 18px + .flex-container + width 720px + +@media (max-width: 1200px) + html + font-size 18px + .flex-container + width 640px + +@media (max-width: 688px) + .flex-container + display block + width calc(100% - 48px) + padding-left 24px + padding-right 24px diff --git a/themes/frame/source/css/motion.styl b/themes/frame/source/css/motion.styl new file mode 100644 index 0000000..cdca657 --- /dev/null +++ b/themes/frame/source/css/motion.styl @@ -0,0 +1,35 @@ +underline-motion(n) + if n == 'link' + background-image linear-gradient($color-background, $color-background), linear-gradient($color-text-primary, $color-text-primary) + background-size 100% $line-third, 0% $line-third + background-position 100% 100%, 0 100% + background-repeat no-repeat, no-repeat + transition background-size .6s linear + + &:hover + background-size 0 $line-third, 100% $line-third + + else if n == 'underline-link' + padding-bottom $line-secondary + background-image linear-gradient($color-text-primary, $color-text-primary), linear-gradient($color-text-primary, $color-text-primary) + background-size 100% $line-third, 0 $line-secondary + background-position 100% 100%, 0 100% + background-repeat no-repeat, no-repeat + transition background-size .6s linear + + &:hover + background-size 100% $line-third, 100% $line-secondary + + else if n == 'header' + &:after + content "" + -webkit-transition width .4s ease-in-out + transition width .4s ease-in-out + position absolute + left 0 + bottom 0 + width 0 + border-bottom solid $line-third $color-text-primary + + &:hover:after + width 100% diff --git a/themes/frame/source/css/normalize.styl b/themes/frame/source/css/normalize.styl new file mode 100644 index 0000000..97ecf71 --- /dev/null +++ b/themes/frame/source/css/normalize.styl @@ -0,0 +1,308 @@ +/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html + line-height 1.15 /* 1 */ + -webkit-text-size-adjust 100% /* 2 */ + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ + +body + margin 0 + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 + font-size 2em + margin 0.67em 0 + +/* Grouping content + ========================================================================== */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr + box-sizing content-box /* 1 */ + height 0 /* 1 */ + overflow visible /* 2 */ + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre + font-family monospace, monospace /* 1 */ + font-size 1em /* 2 */ + +/* Text-level semantics + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a + background-color transparent + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] + border-bottom none /* 1 */ + text-decoration underline /* 2 */ + text-decoration underline dotted /* 2 */ + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong + font-weight bolder + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp + font-family monospace, monospace /* 1 */ + font-size 1em /* 2 */ + +/** + * Add the correct font size in all browsers. + */ + +small + font-size 80% + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup + font-size 75% + line-height 0 + position relative + vertical-align baseline + +sub + bottom -0.25em + +sup + top -0.5em + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10. + */ + +img + border-style none + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea + font-family inherit /* 1 */ + font-size 100% /* 1 */ + line-height 1.15 /* 1 */ + margin 0 /* 2 */ + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input /* 1 */ + overflow visible + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select /* 1 */ + text-transform none + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ + +button, +[type="button"], +[type="reset"], +[type="submit"] + -webkit-appearance button + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner + border-style none + padding 0 + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]-moz-focusring, +[type="reset"]-moz-focusring, +[type="submit"]-moz-focusring + outline 1px dotted ButtonText + +/** + * Correct the padding in Firefox. + */ + +fieldset + padding 0.35em 0.75em 0.625em + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend + box-sizing border-box /* 1 */ + color inherit /* 2 */ + display table /* 1 */ + max-width 100% /* 1 */ + padding 0 /* 3 */ + white-space normal /* 1 */ + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress + vertical-align baseline + +/** + * Remove the default vertical scrollbar in IE 10+. + */ + +textarea + overflow auto + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + +[type="checkbox"], +[type="radio"] + box-sizing border-box /* 1 */ + padding 0 /* 2 */ + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button + height auto + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] + -webkit-appearance textfield /* 1 */ + outline-offset -2px /* 2 */ + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-decoration + -webkit-appearance none + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button + -webkit-appearance button /* 1 */ + font inherit /* 2 */ + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + +details + display block + +/* + * Add the correct display in all browsers. + */ + +summary + display list-item + +/* Misc + ========================================================================== */ + +/** + * Add the correct display in IE 10+. + */ + +template + display none + +/** + * Add the correct display in IE 10. + */ + +[hidden] + display none \ No newline at end of file diff --git a/themes/frame/source/css/partials/footer.styl b/themes/frame/source/css/partials/footer.styl new file mode 100644 index 0000000..3649e84 --- /dev/null +++ b/themes/frame/source/css/partials/footer.styl @@ -0,0 +1,11 @@ +.footer + margin-top $margin-primary + border $line-secondary $color-text-primary solid + text-style(footer) + + .footer-text + margin-top $margin-l-1 + margin-bottom $margin-primary + + + diff --git a/themes/frame/source/css/partials/header.styl b/themes/frame/source/css/partials/header.styl new file mode 100644 index 0000000..f7a1471 --- /dev/null +++ b/themes/frame/source/css/partials/header.styl @@ -0,0 +1,79 @@ +.header + border $line-secondary solid $color-text-primary + text-style(header) + + +.header-inner + display flex + flex-wrap nowrap + align-items center + margin-top $margin-l-0 + margin-bottom $margin-m-0 + + #menu-btn + display none + + .site-nav + flex-grow 1 + overflow-x auto + +.menu-list + text-align right + display flex + .menu-item + position relative + margin-left $margin-l-0 + + &:before + content "" + flex-grow 1 + +.menu-item + underline-motion(header) + +.menu-item-active:after + border-bottom solid $line-secondary + width 100% + +.logo-img + max-height $line-height-heading-h1 + width auto + max-width 100% + display flex + +@media (max-width: 688px) + .header-inner + flex-wrap wrap + #menu-btn + display block!important + text-align right + width 50% + + .icon + float right + + .site-brand-container + width 50% + + .site-nav + width 100% + .menu-list + height 0 + overflow hidden + .menu-item + margin-right 0 + margin-left auto + margin-top $margin-m-0 + + + .active + margin-top $margin-m-1 + height auto + flex-direction column + + + + + + + diff --git a/themes/frame/source/css/partials/paginator.styl b/themes/frame/source/css/partials/paginator.styl new file mode 100644 index 0000000..a9d8870 --- /dev/null +++ b/themes/frame/source/css/partials/paginator.styl @@ -0,0 +1,23 @@ +.paginator + margin-top $margin-primary + +.pagination + margin-top $margin-m-1 + text-style(header) + display flex + + &:before + content "" + flex-grow 1 + +.page-number + position relative + margin-left $margin-l-0 + underline-motion(header) + +.pagination .current:after + border-bottom solid $line-secondary + width 100% + +.pagination .space + margin-left $margin-l-0 \ No newline at end of file diff --git a/themes/frame/source/css/partials/post_gallery.styl b/themes/frame/source/css/partials/post_gallery.styl new file mode 100644 index 0000000..87ea76e --- /dev/null +++ b/themes/frame/source/css/partials/post_gallery.styl @@ -0,0 +1,39 @@ +.post-gallery-list + .h-line-secondary + margin-top $margin-m-1 + + .h-line-secondary:last-child + display none + +.post-gallery-item + display flex + margin-top $margin-primary + margin-bottom $margin-m-1 + .post-info + margin-right $margin-l-0 + width 50% + display flex + flex-direction column + + .post-title + margin-bottom $margin-m-1 + text-style(heading-h1) + + .post-date + text-style(post-date) + + .post-img + width 50% + + a + underline-motion(link) + +@media (max-width: 480px) + .post-gallery-item + flex-wrap wrap + .post-info + width 100% + .post-img + width 100% + margin-top $margin-m-1 + diff --git a/themes/frame/source/css/partials/post_list.styl b/themes/frame/source/css/partials/post_list.styl new file mode 100644 index 0000000..0647680 --- /dev/null +++ b/themes/frame/source/css/partials/post_list.styl @@ -0,0 +1,40 @@ +.post-list + + a + underline-motion(link) + +.year-title + margin-top $margin-primary + margin-bottom $margin-m-1 + text-style(year-title) + +.post-list-item + display flex + flex-wrap nowrap + margin-top $margin-m-1 + align-items top + + .post-title + flex-grow 1 + text-style(body-default) + font-variation-settings 'wght' $font-weight-medium + + .post-date + margin-left $margin-l-0 + min-width 8rem + text-align right + text-style(post-date) + line-height $line-height-body + color $color-text-secondary + +@media (max-width: 480px) + .post-list-item + flex-wrap wrap + .post-title + width 100% + + .post-date + margin-left 0 + width 100% + text-align left + diff --git a/themes/frame/source/css/partials/profile.styl b/themes/frame/source/css/partials/profile.styl new file mode 100644 index 0000000..62a944b --- /dev/null +++ b/themes/frame/source/css/partials/profile.styl @@ -0,0 +1,43 @@ +.profile + margin-top $margin-primary + display flex + flex-direction row-reverse + + .profile-content + width 50% + margin 0 $margin-l-0 0 0 + + .profile-title + margin-top 0 + margin-bottom $margin-m-0 + + .profile-body + margin-top 0 + margin-bottom $margin-l-1 + + .profile-title + text-style(heading-h1) + + .profile-body + text-style(body-default) + + .profile-link + margin-top 0 + margin-bottom $margin-m-1 + text-style(header) + + + .profile-image + width 50% + +@media (max-width: 480px) + .profile + flex-wrap wrap + + .profile-content + width 100% + margin-top $margin-m-1 + + .profile-image + width 100% + \ No newline at end of file diff --git a/themes/frame/source/css/partials/search.styl b/themes/frame/source/css/partials/search.styl new file mode 100644 index 0000000..185804d --- /dev/null +++ b/themes/frame/source/css/partials/search.styl @@ -0,0 +1,88 @@ +.search-popup + visibility hidden + +.search-activate + visibility visible + +.search-popup-overlay + position fixed + left 0 + top 0 + height 100% + width 100% + background $color-overlay + +.search-popup-window + position absolute + top 50% + left 50% + background $color-background + transform translate(-50%, -50%) + width 640px + height 60% + border $line-secondary solid $color-text-primary + overflow hidden + display flex + flex-direction column + +.search-result-container + flex-grow 1 + overflow: scroll + padding $margin-m-1 $margin-m-1 + + .search-result-message + text-style(search-result-message) + color $color-text-secondary + + .search-result-title + text-style(heading-h4) + color $color-text-primary + + a + underline-motion(link) + + li + padding-bottom $margin-m-1 + padding-top $margin-m-2 + + .search-result + text-style(body-default) + color $color-text-primary + margin-top $margin-m-0 + margin-bottom $margin-m-0 + + mark + color $color-text-primary + background-color $color-search-marker + +.search-header + display flex + flex-direction row + align-items center + padding $margin-m-1 $margin-m-1 + border-bottom $line-secondary solid $color-text-primary + + .search-input-container + flex-grow 1 + + .search-input + width 100% + text-style(heading-h6) + color $color-text-primary + background-color $color-background + + .search-input::placeholder + color $color-text-secondary + + + .search-close-btn + flex-grow 0 + margin-left $margin-m-1 + margin auto + cursor pointer + + +@media (max-width: 688px) + .search-popup-window + width 100% + height 100% \ No newline at end of file diff --git a/themes/frame/source/css/post/code.styl b/themes/frame/source/css/post/code.styl new file mode 100644 index 0000000..c371130 --- /dev/null +++ b/themes/frame/source/css/post/code.styl @@ -0,0 +1,33 @@ +code + text-style(code-highlight) + +.code + pre + span + text-style(code-default) + +.highlight + margin 0 0 $margin-m-2 0 + + .line + width $margin-l-2 + +td.gutter + width $margin-m-2 + position -webkit-sticky + position sticky + left 0 + span + text-style(code-marker) + + pre + overflow-x visible + +td + span + line-height $margin-s-2 + +pre + margin 0 + overflow-x auto + diff --git a/themes/frame/source/css/post/media.styl b/themes/frame/source/css/post/media.styl new file mode 100644 index 0000000..3d49010 --- /dev/null +++ b/themes/frame/source/css/post/media.styl @@ -0,0 +1,17 @@ +img + width 100% + height auto + +// fix 16:9 ratio +.video-container + width 100% + padding-top 56.25% + position relative + +.video-container>iframe + position absolute + top 0 + left 0 + width 100% + height 100% + diff --git a/themes/frame/source/css/post/post_comment.styl b/themes/frame/source/css/post/post_comment.styl new file mode 100644 index 0000000..449f861 --- /dev/null +++ b/themes/frame/source/css/post/post_comment.styl @@ -0,0 +1,12 @@ +.post-comment + margin-top $margin-primary + +.v[data-class="v"] .vsys + display none!important + +.vcontent + p + margin-top 0!important + font-size $font-size-comment!important + color $color-text-primary!important + diff --git a/themes/frame/source/css/post/post_content.styl b/themes/frame/source/css/post/post_content.styl new file mode 100644 index 0000000..701f19e --- /dev/null +++ b/themes/frame/source/css/post/post_content.styl @@ -0,0 +1,104 @@ +.post-content + margin-top $margin-l-1 + +h1, h2, h3, h4, h5, h6 + margin-top $margin-l-0 + margin-bottom $margin-m-1 + +h1 + text-style(heading-h1) + +h2 + text-style(heading-h2) + +h3 + text-style(heading-h3) + +h4 + text-style(heading-h4) + +h5 + text-style(heading-h5) + +h6 + text-style(heading-h6) + +p + text-style(body-default) + +strong + text-style(body-bold) + +em + text-style(body-italic) + +del + text-style(body-delete) + +.post-content + a + underline-motion(underline-link) + +blockquote + margin-left 0 + margin-right 0 + margin-top $margin-m-2 + border-left $margin-s-2 solid $color-text-secondary + + p + margin-left $margin-m-2 + margin-top 0 + margin-bottom 0 + margin-right $margin-m-2 + padding-top $margin-m-0 + padding-bottom $margin-m-0 + + blockquote + margin-left $margin-m-2 + margin-top 0 + margin-bottom 0 + +.post-content + li + text-style(body-default) + margin-top $margin-m-0 + + ol + padding-left $margin-l-0 + margin-left $margin-m-1 + margin-right $margin-m-1 + margin-top $margin-m-2 + + ol + margin-top $margin-m-0 + + ul + padding-left $margin-l-0 + margin-left $margin-m-1 + margin-right $margin-m-1 + margin-top $margin-m-2 + + ul + margin-top $margin-m-0 + + li + list-style-type disc + + + .task-list + padding-left 0 + .task-list-item + list-style none + +dl + dt + padding $margin-m-0 0 + text-style(body-bold) + + dt::after + content " :" + + dd + margin 0 + + diff --git a/themes/frame/source/css/post/post_footer.styl b/themes/frame/source/css/post/post_footer.styl new file mode 100644 index 0000000..16a955c --- /dev/null +++ b/themes/frame/source/css/post/post_footer.styl @@ -0,0 +1,29 @@ +.post-footer + margin-top $margin-primary + + a + underline-motion(link) + +.post-nav + margin-top $margin-m-1 + display flex + flex-wrap wrap + text-style(header) + + .prev-item + display flex + text-align left + min-width 50% + align-items center + .arrow-left + margin-right $margin-s-2 + + .next-item + display flex + flex-direction row-reverse + text-align right + min-width 50% + align-items center + .arrow-right + margin-left $margin-s-2 + \ No newline at end of file diff --git a/themes/frame/source/css/post/post_head.styl b/themes/frame/source/css/post/post_head.styl new file mode 100644 index 0000000..9aa2d20 --- /dev/null +++ b/themes/frame/source/css/post/post_head.styl @@ -0,0 +1,18 @@ +.post-head + margin-top $margin-primary + + .post-info + width 100% + display flex + flex-direction column + + .post-title + margin-bottom $margin-m-1 + text-style(heading-h1) + + .post-date + text-style(post-date) + + .post-img + margin-top $margin-l-1 + diff --git a/themes/frame/source/css/post/table.styl b/themes/frame/source/css/post/table.styl new file mode 100644 index 0000000..66287ac --- /dev/null +++ b/themes/frame/source/css/post/table.styl @@ -0,0 +1,31 @@ +table, td, th + border $color-text-primary solid $line-third + width 100% + text-align left + +table + border-collapse collapse + table-layout fixed + +td, th + padding $margin-m-1 + +th + font-variation-settings: 'wght' $font-weight-medium + +td + font-variation-settings: 'wght' $font-weight-light + +table, tboby, tr, td + background-color inherit + +.highlight>table + min-width fit-content + +@media (max-width: 480px) + .block-table + display block + overflow-x auto + + + \ No newline at end of file diff --git a/themes/frame/source/css/post/tag_plugin.styl b/themes/frame/source/css/post/tag_plugin.styl new file mode 100644 index 0000000..1c62594 --- /dev/null +++ b/themes/frame/source/css/post/tag_plugin.styl @@ -0,0 +1,48 @@ +.gist + td + border 0 + + a + color $color-text-secondary + background-image none!important + +blockquote>footer + margin 0 $margin-m-2 + padding $margin-m-0 0 + font-size $font-size-blockquote-footer + color $color-text-secondary + + cite + margin-left $margin-m-0 + + cite::before + content " — " + + strong + color $color-text-secondary + font-size $font-size-blockquote-footer + + a + color $color-text-secondary + background-image none!important + + +figcaption + font-family roboto-mono, menlo, monospace + font-size $font-size-blockquote-footer + padding $margin-m-0 0 + color $color-text-secondary + + span + padding-right $margin-m-0 + + a + color $color-text-secondary + background-image none!important + +blockquote.pullquote.left + float left + +blockquote.pullquote.right + float right + \ No newline at end of file diff --git a/themes/frame/source/css/post/task_list.styl b/themes/frame/source/css/post/task_list.styl new file mode 100644 index 0000000..ea5dabc --- /dev/null +++ b/themes/frame/source/css/post/task_list.styl @@ -0,0 +1,43 @@ +ul + li.task-list-item + position relative + + li.task-list-item>input[type=checkbox] + list-style none + background none + appearance none + -webkit-appearance none + -moz-appearance none; + width $margin-l-0 + display inline-block + border none + opacity 1 + + li.task-list-item>input[type=checkbox][checked]:before + background $color-text-primary + -webkit-mask-image url('../icon/checkbox-checked.svg') + -webkit-mask-position center center + mask-image url('../icon/checkbox-checked.svg') + -webkit-mask-repeat no-repeat + + li.task-list-item>input[type=checkbox]:before + background $color-text-primary + -webkit-mask-image url('../icon/checkbox-default.svg') + -webkit-mask-position center center + mask-image url('../icon/checkbox-default.svg') + -webkit-mask-repeat no-repeat + + li.task-list-item>input[type=checkbox]:after, li.task-list-item>input[type=checkbox]:before + display block + position absolute + content "X" + color transparent + left 0 + top 0 + width $icon-size + height $line-height-body + background-size contain + background-repeat no-repeat + background-position-x 0 + background-position-y center + --webkit-touch-callout none \ No newline at end of file diff --git a/themes/frame/source/css/style.styl b/themes/frame/source/css/style.styl new file mode 100644 index 0000000..482f9cc --- /dev/null +++ b/themes/frame/source/css/style.styl @@ -0,0 +1,43 @@ +// media +@import "media.styl" + +// variable & init +@import "variable.styl" +@import "normalize.styl" + +// color mode +@import "color.styl" + +// font +@import "font.styl" + +// structure style +@import "layout.styl" +@import "base.styl" + +// motion +@import "motion.styl" + +// partials +@import "partials/header.styl" +@import "partials/footer.styl" +@import "partials/post_list.styl" +@import "partials/post_gallery.styl" +@import "partials/paginator.styl" +@import "partials/profile.styl" +@import "partials/search.styl" + +// post +@import "post/post_content.styl" +@import "post/post_head.styl" +@import "post/post_footer.styl" +@import "post/post_comment.styl" +@import "post/code.styl" +@import "post/table.styl" +@import "post/media.styl" +@import "post/tag_plugin.styl" +@import "post/task_list.styl" + +// component +@import "component/icon.styl" +@import "component/component.styl" diff --git a/themes/frame/source/css/variable.styl b/themes/frame/source/css/variable.styl new file mode 100644 index 0000000..8671a02 --- /dev/null +++ b/themes/frame/source/css/variable.styl @@ -0,0 +1,74 @@ +// PIXEL +$px = 0.0625rem + +// LINE +$line-primary = 4px +$line-secondary = 2px +$line-third = 1px + +// ICON +$icon-size = 20*$px + +// MARGIN +$margin-primary = 56*$px +$margin-l-2 = 48*$px +$margin-l-1 = 32*$px +$margin-l-0 = 24*$px +$margin-m-2 = 16*$px +$margin-m-1 = 12*$px +$margin-m-0 = 8*$px +$margin-s-2 = 4*$px +$margin-s-1 = 2*$px +$margin-s-0 = 1*$px + + +// FONT WEIGHT +$font-weight-light = 300 +$font-weight-regular = 400 +$font-weight-medium = 500 +$font-weight-semibold = 600 +$font-weight-bold = 700 + +// FONT SIZE +$font-size-header = 14*$px +$font-size-footer = 12*$px + +$font-size-heading-h1 = 28*$px +$font-size-heading-h2 = 24*$px +$font-size-heading-h3 = 18*$px +$font-size-heading-h4 = 16*$px +$font-size-heading-h5 = 16*$px +$font-size-heading-h6 = 16*$px + +$font-size-body = 16*$px + +$font-size-code = 14*$px + +$font-size-comment = 14*$px + +$font-size-post-date = 14*$px +$font-size-year-title = 28*$px +$font-size-post-tag = 12*$px + +$font-size-blockquote-footer = 12*$px + +// LINE HEIGHT +$line-height-header = 20*$px +$line-height-footer = 20*$px + +$line-height-heading-h1 = 36*$px +$line-height-heading-h2 = 32*$px +$line-height-heading-h3 = 24*$px +$line-height-heading-h4 = 20*$px +$line-height-heading-h5 = 20*$px +$line-height-heading-h6 = 20*$px + +$line-height-body = 24*$px + +$line-height-code = 16*$px + +$line-height-post-date = 20*$px +$line-height-year-title = 36*$px +$line-height-post-tag = 16*$px + + diff --git a/themes/frame/source/favicon.ico b/themes/frame/source/favicon.ico new file mode 100644 index 0000000..a7a90aa Binary files /dev/null and b/themes/frame/source/favicon.ico differ diff --git a/themes/frame/source/fonts/inter/Inter.ttf b/themes/frame/source/fonts/inter/Inter.ttf new file mode 100644 index 0000000..32a7999 Binary files /dev/null and b/themes/frame/source/fonts/inter/Inter.ttf differ diff --git a/themes/frame/source/fonts/roboto_mono/RobotoMono-Regular.ttf b/themes/frame/source/fonts/roboto_mono/RobotoMono-Regular.ttf new file mode 100644 index 0000000..7c4ce36 Binary files /dev/null and b/themes/frame/source/fonts/roboto_mono/RobotoMono-Regular.ttf differ diff --git a/themes/frame/source/fonts/roboto_mono/RobotoMono-VariableFont_wght.ttf b/themes/frame/source/fonts/roboto_mono/RobotoMono-VariableFont_wght.ttf new file mode 100644 index 0000000..d2b4746 Binary files /dev/null and b/themes/frame/source/fonts/roboto_mono/RobotoMono-VariableFont_wght.ttf differ diff --git a/themes/frame/source/icon/arrow-left.svg b/themes/frame/source/icon/arrow-left.svg new file mode 100644 index 0000000..9c82859 --- /dev/null +++ b/themes/frame/source/icon/arrow-left.svg @@ -0,0 +1,7 @@ + + + icon/left-arrow + + + + \ No newline at end of file diff --git a/themes/frame/source/icon/arrow-right.svg b/themes/frame/source/icon/arrow-right.svg new file mode 100644 index 0000000..7850ca4 --- /dev/null +++ b/themes/frame/source/icon/arrow-right.svg @@ -0,0 +1,7 @@ + + + icon/right-arrow + + + + \ No newline at end of file diff --git a/themes/frame/source/icon/arrow-up.svg b/themes/frame/source/icon/arrow-up.svg new file mode 100644 index 0000000..ddeab3c --- /dev/null +++ b/themes/frame/source/icon/arrow-up.svg @@ -0,0 +1,7 @@ + + + icon/arrow-up + + + + \ No newline at end of file diff --git a/themes/frame/source/icon/checkbox-checked.svg b/themes/frame/source/icon/checkbox-checked.svg new file mode 100644 index 0000000..da15a09 --- /dev/null +++ b/themes/frame/source/icon/checkbox-checked.svg @@ -0,0 +1,13 @@ + + + icon/checkbox/checked + + + + + + + + + + \ No newline at end of file diff --git a/themes/frame/source/icon/checkbox-default.svg b/themes/frame/source/icon/checkbox-default.svg new file mode 100644 index 0000000..51ac63d --- /dev/null +++ b/themes/frame/source/icon/checkbox-default.svg @@ -0,0 +1,13 @@ + + + icon/checkbox/default + + + + + + + + + + \ No newline at end of file diff --git a/themes/frame/source/icon/close-btn.svg b/themes/frame/source/icon/close-btn.svg new file mode 100644 index 0000000..4d6e1bc --- /dev/null +++ b/themes/frame/source/icon/close-btn.svg @@ -0,0 +1,3 @@ + + + diff --git a/themes/frame/source/icon/marker.svg b/themes/frame/source/icon/marker.svg new file mode 100644 index 0000000..65ab4b2 --- /dev/null +++ b/themes/frame/source/icon/marker.svg @@ -0,0 +1,18 @@ + + + marker + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/themes/frame/source/js/format.js b/themes/frame/source/js/format.js new file mode 100644 index 0000000..9d79edc --- /dev/null +++ b/themes/frame/source/js/format.js @@ -0,0 +1,23 @@ +function detectTaskList() { + var taskListObjects = document.getElementsByTagName("input"); + for (var i = 0; i < taskListObjects.length; i++) { + var par = taskListObjects[i].parentNode; + par.classList.add("task-list-item"); + par.parentNode.classList.add("task-list"); + } +} + +function detectBlockTable() { + var tableListObjects = document.getElementsByTagName("thead"); + for (var i = 0; i < tableListObjects.length; i++) { + var par = tableListObjects[i].parentNode; + par.classList.add("block-table"); + } +} + +function detectors(){ + detectTaskList(); + detectBlockTable(); +} + + diff --git a/themes/frame/source/js/menu.js b/themes/frame/source/js/menu.js new file mode 100644 index 0000000..9e78fd0 --- /dev/null +++ b/themes/frame/source/js/menu.js @@ -0,0 +1,11 @@ +function toggleMenu() { + var menuList = document.getElementsByClassName("menu-list")[0]; + var menuButton = document.getElementById("menu-btn"); + if(menuList.classList.contains("active")){ + menuList.classList.remove("active"); + menuButton.innerHTML = "MENU"; + }else{ + menuList.classList.add("active"); + menuButton.innerHTML = "
"; + } +} \ No newline at end of file diff --git a/themes/frame/source/js/search.js b/themes/frame/source/js/search.js new file mode 100644 index 0000000..2c7188a --- /dev/null +++ b/themes/frame/source/js/search.js @@ -0,0 +1,78 @@ +// Global searchConfig + +document.addEventListener('DOMContentLoaded', () => { + + const input = document.querySelector('.search-input'); + const container = document.querySelector('.search-result-container'); + + const localSearch = new LocalSearch({ + path : searchConfig.path, + top_n_per_article: searchConfig.top_n_per_article, + unescape : searchConfig.unescape + }); + + if (searchConfig.preload) { + // preload the search data when the page loads + console.log("loading page"); + localSearch.fetchData(); + } + + function openSearchPopup() { + document.querySelector('.search-popup').classList.add('search-activate'); + if (!localSearch.isfetched) { + localSearch.fetchData(); + } + } + + function closeSearchPopup() { + document.querySelector('.search-popup').classList.remove('search-activate'); + // refresh search box + input.value = ''; + container.innerHTML = `
`; + } + + // open search box + document.querySelector('.search-btn').addEventListener('click', openSearchPopup); + + // close search box + document.querySelector('.search-popup-overlay').addEventListener('click', closeSearchPopup); + document.querySelector('.search-close-btn').addEventListener('click', closeSearchPopup); + + function displaySearchResult() { + if (!localSearch.isfetched) return; + const searchText = input.value.trim().toLowerCase(); + const keywords = searchText.split(/[-\s]+/); + if (searchText.length > 0) { + resultItems = localSearch.getResultItems(keywords); + } + + if (keywords.length === 1 && keywords[0] === '') { + // no input + container.innerHTML = `
` + } else if (resultItems.length === 0) { + // no result + container.innerHTML = `
No result found
`; + } else { + // display result(s) + container.innerHTML = ` +
${resultItems.length} result(s) found
+
    ${resultItems.map(result => result.item).join('
    ')} +
`; + } + + }; + + if (searchConfig.trigger == 'auto') { + // whenever there is input, update search result + input.addEventListener('input', displaySearchResult); + } else { + // update search result when press "enter" + input.addEventListener('keypress', event => { + if (event.key === 'Enter') { + displaySearchResult(); + } + }) + } + window.addEventListener('search:loaded', displaySearchResult); +}); + \ No newline at end of file diff --git a/themes/frame/source/logo.png b/themes/frame/source/logo.png new file mode 100644 index 0000000..e849962 Binary files /dev/null and b/themes/frame/source/logo.png differ diff --git a/themes/frame/source/profile_cover.jpg b/themes/frame/source/profile_cover.jpg new file mode 100644 index 0000000..fb47f8c Binary files /dev/null and b/themes/frame/source/profile_cover.jpg differ