diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..3ec0ebf --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +.idea/ +.jekyll-cache/ +_site/ \ No newline at end of file diff --git a/404.md b/404.md new file mode 100644 index 0000000..a50ef20 --- /dev/null +++ b/404.md @@ -0,0 +1,5 @@ +--- +title: Lost from journey +layout: 404 +permalink: "/404.html" +--- diff --git a/Gemfile b/Gemfile new file mode 100644 index 0000000..551b095 --- /dev/null +++ b/Gemfile @@ -0,0 +1,35 @@ +source "https://rubygems.org" + +# Hello! This is where you manage which Jekyll version is used to run. +# When you want to use a different version, change it below, save the +# file and run `bundle install`. Run Jekyll with `bundle exec`, like so: +# +# bundle exec jekyll serve +# +# This will help ensure the proper Jekyll version is running. +# Happy Jekylling! +gem "jekyll", "~> 4.1.0" + +# This is the default theme for new Jekyll sites. You may change this to anything you like. + +# If you want to use GitHub Pages, remove the "gem "jekyll"" above and +# uncomment the line below. To upgrade, run `bundle update github-pages`. +# gem "github-pages", group: :jekyll_plugins + +# If you have any plugins, put them here! +group :jekyll_plugins do + gem 'jekyll-feed', '~> 0.13' + gem 'jekyll-sitemap', '~> 1.4' + gem 'jekyll-compose', '~> 0.12.0' + gem 'jekyll-postfiles', '~> 3.1' +end + +# Windows does not include zoneinfo files, so bundle the tzinfo-data gem +gem "tzinfo-data", platforms: [:mingw, :mswin, :x64_mingw, :jruby] + +# Performance-booster for watching directories on Windows +gem "wdm", "~> 0.1.0" if Gem.win_platform? + +gem "webrick", "~> 1.7" + +gem "logger" \ No newline at end of file diff --git a/Gemfile.lock b/Gemfile.lock new file mode 100644 index 0000000..dd00879 --- /dev/null +++ b/Gemfile.lock @@ -0,0 +1,104 @@ +GEM + remote: https://rubygems.org/ + specs: + addressable (2.8.7) + public_suffix (>= 2.0.2, < 7.0) + colorator (1.1.0) + concurrent-ruby (1.3.4) + em-websocket (0.5.3) + eventmachine (>= 0.12.9) + http_parser.rb (~> 0) + eventmachine (1.2.7) + ffi (1.17.0) + ffi (1.17.0-aarch64-linux-gnu) + ffi (1.17.0-aarch64-linux-musl) + ffi (1.17.0-arm-linux-gnu) + ffi (1.17.0-arm-linux-musl) + ffi (1.17.0-arm64-darwin) + ffi (1.17.0-x86-linux-gnu) + ffi (1.17.0-x86-linux-musl) + ffi (1.17.0-x86_64-darwin) + ffi (1.17.0-x86_64-linux-gnu) + ffi (1.17.0-x86_64-linux-musl) + forwardable-extended (2.6.0) + http_parser.rb (0.8.0) + i18n (1.14.6) + concurrent-ruby (~> 1.0) + jekyll (4.1.1) + addressable (~> 2.4) + colorator (~> 1.0) + em-websocket (~> 0.5) + i18n (~> 1.0) + jekyll-sass-converter (~> 2.0) + jekyll-watch (~> 2.0) + kramdown (~> 2.1) + kramdown-parser-gfm (~> 1.0) + liquid (~> 4.0) + mercenary (~> 0.4.0) + pathutil (~> 0.9) + rouge (~> 3.0) + safe_yaml (~> 1.0) + terminal-table (~> 1.8) + jekyll-compose (0.12.0) + jekyll (>= 3.7, < 5.0) + jekyll-feed (0.17.0) + jekyll (>= 3.7, < 5.0) + jekyll-postfiles (3.1.0) + jekyll (>= 3.8.6, < 5) + jekyll-sass-converter (2.2.0) + sassc (> 2.0.1, < 3.0) + jekyll-sitemap (1.4.0) + jekyll (>= 3.7, < 5.0) + jekyll-watch (2.2.1) + listen (~> 3.0) + kramdown (2.5.1) + rexml (>= 3.3.9) + kramdown-parser-gfm (1.1.0) + kramdown (~> 2.0) + liquid (4.0.4) + listen (3.9.0) + rb-fsevent (~> 0.10, >= 0.10.3) + rb-inotify (~> 0.9, >= 0.9.10) + logger (1.6.4) + mercenary (0.4.0) + pathutil (0.16.2) + forwardable-extended (~> 2.6) + public_suffix (6.0.1) + rb-fsevent (0.11.2) + rb-inotify (0.11.1) + ffi (~> 1.0) + rexml (3.4.0) + rouge (3.30.0) + safe_yaml (1.0.5) + sassc (2.4.0) + ffi (~> 1.9) + terminal-table (1.8.0) + unicode-display_width (~> 1.1, >= 1.1.1) + unicode-display_width (1.8.0) + webrick (1.9.1) + +PLATFORMS + aarch64-linux-gnu + aarch64-linux-musl + arm-linux-gnu + arm-linux-musl + arm64-darwin + ruby + x86-linux-gnu + x86-linux-musl + x86_64-darwin + x86_64-linux-gnu + x86_64-linux-musl + +DEPENDENCIES + jekyll (~> 4.1.0) + jekyll-compose (~> 0.12.0) + jekyll-feed (~> 0.13) + jekyll-postfiles (~> 3.1) + jekyll-sitemap (~> 1.4) + logger + tzinfo-data + webrick (~> 1.7) + +BUNDLED WITH + 2.6.1 diff --git a/README.md b/README.md index e69de29..b439f0c 100644 --- a/README.md +++ b/README.md @@ -0,0 +1 @@ +# elyday.dev \ No newline at end of file diff --git a/_config.yml b/_config.yml new file mode 100644 index 0000000..b73f43c --- /dev/null +++ b/_config.yml @@ -0,0 +1,79 @@ +title: elyday.dev +description: >- + Some dude in the internet. +lang: en-US +timezone: Europe/Berlin +image: assets/img/ogp.png +mode: dark # default theme "dark" | "light" + +# Profile settings +author: + name: elyday + bio: >- + Some dude in the internet. Interested in gaming and software backend engineering (mainly using php as programming language). + username: elyday + github: elyday + email: contact@elyday.dev + avatar: /assets/img/avatar.jpg + +# URL settings +url: "https://klise.now.sh" # +baseurl: +permalink: /:title/ +google_analytics: # leave it blank if not wish +fb_appid: + +# Collection setting +collections: + posts: + output: true + +# Markdown settings +markdown: kramdown +highlighter: rouge +kramdown: + syntax_highlighter: rouge + +# Default front matter +defaults: + - scope: + path: "" + values: + layout: post + comments: false + +# Jekyll Compose default front matter +jekyll_compose: + post_default_front_matter: + modified: + tags: [ ] + description: + draft_default_front_matter: + modified: + tags: [ ] + description: + +# Homepage limit posts +number_of_posts: 5 + +# Build settings +# theme: klise +sass: + style: compressed + +include: + - _redirects + - .htaccess + +exclude: + - Gemfile + - Gemfile.lock + - README.md + - node_modules + - lighthouse.png + +# Plugins +plugins: + - jekyll-feed + - jekyll-sitemap + - jekyll-postfiles diff --git a/_data/menus.yml b/_data/menus.yml new file mode 100644 index 0000000..4d36721 --- /dev/null +++ b/_data/menus.yml @@ -0,0 +1,19 @@ +- title: home + url: / + external: false + +- title: archive + url: /archive/ + external: false + +- title: about + url: /about/ + external: false + +- title: github + url: https://github.com/elyday + external: true + +- title: git + url: https://git.techturtle.de/elyday + external: true \ No newline at end of file diff --git a/_includes/anchor_headings.html b/_includes/anchor_headings.html new file mode 100644 index 0000000..7a56b16 --- /dev/null +++ b/_includes/anchor_headings.html @@ -0,0 +1,105 @@ +{% capture headingsWorkspace %} + {% comment %} + Version 1.0.4 + https://github.com/allejo/jekyll-anchor-headings + + "Be the pull request you wish to see in the world." ~Ben Balter + + Usage: + {% include anchor_headings.html html=content %} + + Parameters: + * html (string) - the HTML of compiled markdown generated by kramdown in Jekyll + + Optional Parameters: + * beforeHeading (bool) : false - Set to true if the anchor should be placed _before_ the heading's content + * anchorAttrs (string) : '' - Any custom HTML attributes that will be added to the `` tag; you may NOT use `href`, `class` or `title` + * anchorBody (string) : '' - The content that will be placed inside the anchor; the `%heading%` placeholder is available + * anchorClass (string) : '' - The class(es) that will be used for each anchor. Separate multiple classes with a space + * anchorTitle (string) : '' - The `title` attribute that will be used for anchors + * h_min (int) : 1 - The minimum header level to build an anchor for; any header lower than this value will be ignored + * h_max (int) : 6 - The maximum header level to build an anchor for; any header greater than this value will be ignored + * bodyPrefix (string) : '' - Anything that should be inserted inside of the heading tag _before_ its anchor and content + * bodySuffix (string) : '' - Anything that should be inserted inside of the heading tag _after_ its anchor and content + + Output: + The original HTML with the addition of anchors inside of all of the h1-h6 headings. + {% endcomment %} + + {% assign minHeader = include.h_min | default: 1 %} + {% assign maxHeader = include.h_max | default: 6 %} + {% assign beforeHeading = include.beforeHeading %} + {% assign nodes = include.html | split: ' + {% if headerLevel == 0 %} + {% if nextChar != '<' and nextChar != '' %} + {% capture node %}' | first }}>{% endcapture %} + {% assign header = _workspace[0] | replace: _hAttrToStrip, '' %} + + + {% capture anchor %}{% endcapture %} + + {% if html_id and headerLevel >= minHeader and headerLevel <= maxHeader %} + {% capture anchor %}href="#{{ html_id }}"{% endcapture %} + + {% if include.anchorClass %} + {% capture anchor %}{{ anchor }} class="{{ include.anchorClass }}"{% endcapture %} + {% endif %} + + {% if include.anchorTitle %} + {% capture anchor %}{{ anchor }} title="{{ include.anchorTitle | replace: '%heading%', header }}"{% endcapture %} + {% endif %} + + {% if include.anchorAttrs %} + {% capture anchor %}{{ anchor }} {{ include.anchorAttrs }}{% endcapture %} + {% endif %} + + {% capture anchor %}{{ include.anchorBody | replace: '%heading%', header | default: '' }}{% endcapture %} + + + {% if beforeHeading %} + {% capture anchor %}{{ anchor }} {% endcapture %} + {% else %} + {% capture anchor %} {{ anchor }}{% endcapture %} + {% endif %} + {% endif %} + + {% capture new_heading %} + + {{ site.author.username }} +

{{ site.author.name }}

+

{{ site.author.bio }}

+ diff --git a/_includes/comments.html b/_includes/comments.html new file mode 100644 index 0000000..347bc6f --- /dev/null +++ b/_includes/comments.html @@ -0,0 +1,10 @@ + + diff --git a/_includes/footer.html b/_includes/footer.html new file mode 100644 index 0000000..c3e27ab --- /dev/null +++ b/_includes/footer.html @@ -0,0 +1,46 @@ + + +{%- if site.google_analytics -%} + + + +{%- endif -%} +{%- if page.url == '/archive/' -%} + + +{%- endif -%} \ No newline at end of file diff --git a/_includes/header.html b/_includes/header.html new file mode 100644 index 0000000..294f1a6 --- /dev/null +++ b/_includes/header.html @@ -0,0 +1,175 @@ + + + + + + + + + + + {% if page.title %}{{ page.title | escape }} - {{ site.title }}{% else %}{{ + site.title | escape }}{% endif %} + + + + {% if paginator.previous_page %} + + {% endif %} {% if paginator.next_page %} + + {% endif %} + + + + + + {% if page.location %} + + + {% else %} + + {% endif %} + + + {% if page.image %} + + {% else %} + + {% endif %} + + + + + + + + + {% if page.image %} + + {% else %} + + {% endif %} {% feed_meta %} + + + + + + + + + + + + + + {% if page.usemathjax %} + + + {% endif %} + + diff --git a/_includes/navbar.html b/_includes/navbar.html new file mode 100644 index 0000000..018c5a0 --- /dev/null +++ b/_includes/navbar.html @@ -0,0 +1,211 @@ + diff --git a/_includes/navigation.html b/_includes/navigation.html new file mode 100644 index 0000000..83e3a61 --- /dev/null +++ b/_includes/navigation.html @@ -0,0 +1,16 @@ + diff --git a/_includes/pagination.html b/_includes/pagination.html new file mode 100644 index 0000000..71b28f9 --- /dev/null +++ b/_includes/pagination.html @@ -0,0 +1,21 @@ + + diff --git a/_layouts/404.html b/_layouts/404.html new file mode 100644 index 0000000..df88289 --- /dev/null +++ b/_layouts/404.html @@ -0,0 +1,46 @@ +--- +layout: compress +--- + + + + +{% include header.html %} + + + + + {% include navbar.html %} +
+
+
+
+
404
+

😕 Hmm... Seems you lost from my journey.

+ back home +
+
+
+ {% include footer.html %} +
+ + + + diff --git a/_layouts/compress.html b/_layouts/compress.html new file mode 100644 index 0000000..8b71fb8 --- /dev/null +++ b/_layouts/compress.html @@ -0,0 +1,4 @@ +--- +--- + +{% if site.compress_html.ignore.envs contains jekyll.environment %}{{ content }}{% else %}{% capture _content %}{{ content }}{% endcapture %}{% if site.compress_html.endings == "all" %}{% assign _endings = "html head body li dt dd p rt rp optgroup option colgroup caption thead tbody tfoot tr td th" | split: " " %}{% else %}{% assign _endings = site.compress_html.endings %}{% endif %}{% for _element in _endings %}{% capture _end %}{% endcapture %}{% assign _content = _content | remove: _end %}{% endfor %}{% if site.compress_html.comments.size == 2 %}{% assign _comment_befores = _content | split: site.compress_html.comments.first %}{% for _comment_before in _comment_befores %}{% assign _comment_content = _comment_before | split: site.compress_html.comments.last | first %}{% if _comment_content %}{% capture _comment %}{{ site.compress_html.comments.first }}{{ _comment_content }}{{ site.compress_html.comments.last }}{% endcapture %}{% assign _content = _content | remove: _comment %}{% endif %}{% endfor %}{% endif %}{% assign _pre_befores = _content | split: "" %}{% case _pres.size %}{% when 2 %}{% capture _content %}{{ _content }}{{ _pres.last | split: " " | join: " " }}{% endcapture %}{% when 1 %}{% capture _content %}{{ _content }}{{ _pres.last | split: " " | join: " " }}{% endcapture %}{% endcase %}{% endfor %}{% if site.compress_html.clippings == "all" %}{% assign _clippings = "html head title base link meta style body article section nav aside h1 h2 h3 h4 h5 h6 hgroup header footer address p hr blockquote ol ul li dl dt dd figure figcaption main div table caption colgroup col tbody thead tfoot tr td th" | split: " " %}{% else %}{% assign _clippings = site.compress_html.clippings %}{% endif %}{% for _element in _clippings %}{% assign _edges = " ;; ;" | replace: "e", _element | split: ";" %}{% assign _content = _content | replace: _edges[0], _edges[1] | replace: _edges[2], _edges[3] | replace: _edges[4], _edges[5] %}{% endfor %}{{ _content }}{% endif %} diff --git a/_layouts/default.html b/_layouts/default.html new file mode 100644 index 0000000..1500975 --- /dev/null +++ b/_layouts/default.html @@ -0,0 +1,38 @@ +--- +layout: compress +--- + + +{% include header.html %} + + + + + + {% include navbar.html %} +
+ {% include author.html %} +
+ {{ content }} +
+ {% include footer.html %} +
+ + diff --git a/_layouts/home.html b/_layouts/home.html new file mode 100644 index 0000000..d147051 --- /dev/null +++ b/_layouts/home.html @@ -0,0 +1,14 @@ +--- +layout: default +home: true +--- + +

Recent Posts

+{%- for post in site.posts limit: site.number_of_posts -%} + +{%- endfor -%} diff --git a/_layouts/page.html b/_layouts/page.html new file mode 100644 index 0000000..9aebe9f --- /dev/null +++ b/_layouts/page.html @@ -0,0 +1,43 @@ +--- +layout: compress +--- + + + + +{% include header.html %} + + + + + + {% include navbar.html %} +
+
+

{{ page.title | escape }}.

+
+
+ {% include anchor_headings.html html=content anchorClass="anchor-head" beforeHeading=true h_min=4 h_max=4 %} +
+ {% include footer.html %} +
+ + + diff --git a/_layouts/post.html b/_layouts/post.html new file mode 100644 index 0000000..c50e4a5 --- /dev/null +++ b/_layouts/post.html @@ -0,0 +1,95 @@ +--- +layout: compress +--- + + + + +{% include header.html %} + + + + + + {% include navbar.html %} +
+
+
+ +
+ {% if page.tags and page.tags != empty %} +
+ {% assign tags = page.tags %} + + {% for tag in tags %} + {{tag | upcase }}{% unless forloop.last %},{% endunless %} + {% endfor %} + +
+ {% endif %} +

{{ page.title | escape }}

+ {% if page.date %} +
+ + + + + + +
+ {% endif %} +
+ +
+ {% include anchor_headings.html html=content anchorClass="anchor-head" beforeHeading=true h_min=1 h_max=4 %} + {% if page.tweet %} +

Comments this article on + Twitter. +

+ {% endif %} +
+
+ + {% if page.comments %} + {% include comments.html %} + {% endif %} + +
+ + {% if page.modified %} + updated_at {{page.modified | date: "%d-%m-%Y"}} + {% endif %} + + {% if page.next or page.previous %} + {% include navigation.html %} + {% endif %} + + {% include footer.html %} +
+ + + diff --git a/_posts/some-new-site/2024-12-22-some-new-site.md b/_posts/some-new-site/2024-12-22-some-new-site.md new file mode 100644 index 0000000..267d822 --- /dev/null +++ b/_posts/some-new-site/2024-12-22-some-new-site.md @@ -0,0 +1,10 @@ +--- +layout: post +title: "Some new site!" +date: 2024-12-22 22:29:20 +0100 +tags: [ information ] +--- + +This is my new site which I will use to blog about several dev related topics. I am personally interested in gaming, +home networking stuff and software backend engineering (mainly with php as programming language). + diff --git a/_sass/klise/_base.scss b/_sass/klise/_base.scss new file mode 100644 index 0000000..4026aca --- /dev/null +++ b/_sass/klise/_base.scss @@ -0,0 +1,369 @@ +// Reset some basic elements +* { + -webkit-transition: background-color 75ms ease-in, border-color 75ms ease-in; + -moz-transition: background-color 75ms ease-in, border-color 75ms ease-in; + -ms-transition: background-color 75ms ease-in, border-color 75ms ease-in; + -o-transition: background-color 75ms ease-in, border-color 75ms ease-in; + transition: background-color 75ms ease-in, border-color 75ms ease-in; +} + +.notransition { + -webkit-transition: none; + -moz-transition: none; + -ms-transition: none; + -o-transition: none; + transition: none; +} + +html { + overflow-x: hidden; + overflow-y: scroll; + width: 100%; +} + +body, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +hr, +dl, +dd, +ol, +ul, +figure { + margin: 0; + padding: 0; +} + +// Basic styling +body { + min-height: 100vh; + overflow-x: hidden; + position: relative; + color: $text-base-color; + background-color: $white; + font: $normal-weight #{$base-font-size}/#{$base-line-height} $sans-family; + -webkit-text-size-adjust: 100%; + -webkit-font-smoothing: antialiased; + -webkit-font-feature-settings: "kern" 1; + -moz-font-feature-settings: "kern" 1; + -o-font-feature-settings: "kern" 1; + font-feature-settings: "kern" 1; + font-kerning: normal; + box-sizing: border-box; +} + +// Set `margin-bottom` to maintain vertical rhythm +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +ul, +ol, +dl, +figure, +%vertical-rhythm { + margin-top: $spacing-full - 20; + margin-bottom: $spacing-full - 20; +} + +// strong | bold +strong, +b { + font-weight: $bold-weight; + color: $black; +} + +// horizontal rule +hr { + border-bottom: 0; + border-style: solid; + border-color: $light; +} + +// kbd tag +kbd { + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border: 1px solid $light; + border-radius: 2px; + color: $black; + display: inline-block; + font-size: $small-font-size; + line-height: 1.4; + font-family: $mono-family; + margin: 0 0.1em; + font-weight: $bold-weight; + padding: 0.01em 0.4em; + text-shadow: 0 1px 0 $white; +} + +// Image +img { + max-width: 100%; + vertical-align: middle; + -webkit-user-drag: none; + margin: 0 auto; + text-align: center; +} + +// Figure +figure { + position: relative; +} + +// Image inside Figure tag +figure > img { + display: block; + position: relative; +} + +// Image caption +figcaption { + font-size: 13px; + text-align: center; +} + +// List +ul { + list-style: none; + li { + display: list-item; + text-align: -webkit-match-parent; + } + li::before { + content: "\FE63"; + display: inline-block; + top: -1px; + width: 1.2em; + position: relative; + margin-left: -1.3em; + font-weight: 700; + } +} + +ol { + list-style: none; + counter-reset: li; + li { + position: relative; + counter-increment: li; + &::before { + content: counter(li); + display: inline-block; + width: 1em; + margin-right: 0.5em; + margin-left: -1.6em; + text-align: right; + direction: rtl; + font-weight: $bold-weight; + font-size: $small-font-size; + } + } +} + +ul, +ol { + margin-top: 0; + margin-left: $spacing-full; +} + +li { + padding-bottom: 1px; + padding-top: 1px; + + &:before { + color: $black; + } + + > ul, + > ol { + margin-bottom: 2px; + margin-top: 0; + } +} + +// Headings +h1, +h2, +h3, +h4, +h5, +h6 { + color: $black; + font-weight: $bold-weight; + & + ul, + & + ol { + margin-top: 10px; + } + + @include media-query($on-mobile) { + scroll-margin-top: 65px; + } +} + +// Headings with link +h1 > a, +h2 > a, +h3 > a, +h4 > a, +h5 > a, +h6 > a { + text-decoration: none; + border: none; + + &:hover { + text-decoration: none; + border: none; + } +} + +// Link +a { + color: inherit; + text-decoration-color: $smoke; + + &:hover { + color: $text-link-blue; + } + + &:focus { + outline: 3px solid rgba(0, 54, 199, 0.6); + outline-offset: 2px; + } +} + +// Del +del { + color: inherit; +} + +// Em +em { + color: inherit; +} + +// Blockquotes +blockquote { + color: $gray; + font-style: italic; + text-align: center; + opacity: 0.9; + border-top: 1px solid $light; + border-bottom: 1px solid $light; + padding: 10px; + margin-left: 10px; + margin-right: 10px; + font-size: 1em; + + > :last-child { + margin-bottom: 0; + margin-top: 0; + } +} + +// Wrapper +.wrapper { + max-width: -webkit-calc(#{$narrow-size} - (#{$spacing-full} * 2)); + max-width: calc(#{$narrow-size} - (#{$spacing-full} * 2)); + position: relative; + margin-right: auto; + margin-left: auto; + padding-right: $spacing-full; + padding-left: $spacing-full; + @extend %clearfix; + + @include media-query($on-mobile) { + max-width: -webkit-calc(#{$narrow-size} - (#{$spacing-full})); + max-width: calc(#{$narrow-size} - (#{$spacing-full})); + padding-right: $spacing-full - 10; + padding-left: $spacing-full - 10; + + &.blurry { + animation: 0.2s ease-in forwards blur; + -webkit-animation: 0.2s ease-in forwards blur; + } + } +} + +// Underline +u { + text-decoration-color: #d2c7c7; +} + +// Small +small { + font-size: $small-font-size; +} + +// Superscript +sup { + border-radius: 10%; + top: -3px; + left: 2px; + font-size: small; + position: relative; + margin-right: 2px; +} + +// Table +.overflow-table { + overflow-x: auto; +} + +table { + width: 100%; + margin-top: $spacing-half; + border-collapse: collapse; + font-size: $small-font-size; + + thead { + font-weight: $bold-weight; + color: $black; + border-bottom: 1px solid $light; + } + + th, + td, + tr { + border: 1px solid $light; + padding: 2px 7px; + } +} + +// Clearfix +%clearfix:after { + content: ""; + display: table; + clear: both; +} + +// When mouse block a text set this color +mark, +::selection { + background: #fffba0; + color: $black; +} + +// Github Gist clear border +.gist { + table { + border: 0; + + tr, + td { + border: 0; + } + } +} diff --git a/_sass/klise/_dark.scss b/_sass/klise/_dark.scss new file mode 100644 index 0000000..84a7cb6 --- /dev/null +++ b/_sass/klise/_dark.scss @@ -0,0 +1,247 @@ +body[data-theme="dark"] { + color: $dark-text-base-color; + background-color: $dark-black; + + // Heading + h1, + h2, + h3, + h4, + h5, + h6 { + color: $dark-white; + } + + // Table + table { + thead { + color: $dark-white; + border-color: $dark-light; + } + + th, + td, + tr { + border-color: $dark-light; + } + } + + // Post + .page-content { + a { + color: $dark-text-link-blue; + + &:hover, + &:active, + &:focus { + color: $dark-text-link-blue-active; + } + } + + h3 { + border-color: $dark-light; + } + h1, + h2, + h3, + h4, + h5, + h6 { + .anchor-head { + color: $dark-text-link-blue; + } + } + } + + // Syntax + code { + &.highlighter-rouge { + background-color: $dark-light; + } + } + + // kbd tag + kbd { + border-color: $dark-light; + color: $dark-white; + text-shadow: 0 1px 0 $dark-black; + } + + // horizontal rule + hr { + border-color: $dark-light; + } + + // Post Meta + .post-meta { + color: $dark-gray; + + time { + &::after { + background-color: $dark-light; + } + } + + span[itemprop="author"] { + border-color: $dark-light; + } + } + + // Link + a { + color: inherit; + text-decoration-color: $dark-smoke; + + &:hover { + color: $dark-text-link-blue; + } + + &:focus { + outline-color: rgba(255, 82, 119, 0.6); + } + } + + // List + li { + &:before { + color: $dark-white; + } + } + + // Blockquote + blockquote { + color: $dark-gray; + border-color: $dark-light; + } + + // Strong, Bold + strong, + b { + color: $dark-white; + } + + // Navbar + .navbar { + border-color: $dark-light; + .menu { + a#mode { + .mode-sunny { + display: block; + } + .mode-moon { + display: none; + } + } + + .menu-link { + color: $dark-white; + } + @include media-query($on-mobile) { + background-color: $dark-black; + border-color: $dark-light; + + .menu-icon { + > svg { + fill: $dark-white; + } + } + + input[type="checkbox"]:checked ~ .trigger { + background: $dark-black; + } + } + } + } + + // Post Item + .post-item { + &:not(:first-child) { + border-color: $dark-light; + } + + .post-item-date { + color: $dark-white; + } + .post-item-title { + a { + color: $dark-text-base-color; + + &:hover, + &focus { + color: $dark-white; + } + } + } + } + + // Post Navigation + .post-nav { + border-color: $dark-light; + + .post-nav-item { + font-weight: $bold-weight; + + .post-title { + color: $dark-white; + opacity: 0.9; + } + + &:hover, + &:focus { + .post-title { + color: $dark-text-link-blue-active; + } + } + + .nav-arrow { + color: $dark-gray; + } + } + + @include media-query($on-mobile) { + .post-nav-item:nth-child(even) { + border-color: $dark-light; + } + } + } + + // Footer + .footer { + span.footer_item { + color: $dark-white; + } + a.footer_item:not(:last-child) { + color: $dark-white; + } + .footer_copyright { + color: $dark-gray; + opacity: 1; + } + } + + // 404 Page + .not-found { + .title { + color: $dark-white; + text-shadow: 1px 0px 0px $dark-text-link-blue; + } + .phrase { + color: $dark-text-base-color; + } + .solution { + color: $dark-text-link-blue; + } + .solution:hover { + color: $dark-text-link-blue-active; + } + } + + .search-article { + input[type="search"] { + color: $dark-text-base-color; + &::-webkit-input-placeholder { + color: rgba(128,128,128,0.8); + } + } + } +} diff --git a/_sass/klise/_fonts.scss b/_sass/klise/_fonts.scss new file mode 100644 index 0000000..f36c022 --- /dev/null +++ b/_sass/klise/_fonts.scss @@ -0,0 +1,712 @@ +@charset "utf-8"; + +@font-face { + font-family: "Roboto"; + font-style: normal; + font-weight: 400; + src: local("Roboto"), local("Roboto-Regular"), + url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu72xKOzY.woff2) + format("woff2"); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, + U+FE2E-FE2F; +} + +@font-face { + font-family: "Roboto"; + font-style: normal; + font-weight: 400; + src: local("Roboto"), local("Roboto-Regular"), + url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) + format("woff2"); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} + +@font-face { + font-family: "Roboto"; + font-style: normal; + font-weight: 400; + src: local("Roboto"), local("Roboto-Regular"), + url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7mxKOzY.woff2) + format("woff2"); + unicode-range: U+1F00-1FFF; +} + +@font-face { + font-family: "Roboto"; + font-style: normal; + font-weight: 400; + src: local("Roboto"), local("Roboto-Regular"), + url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4WxKOzY.woff2) + format("woff2"); + unicode-range: U+0370-03FF; +} + +@font-face { + font-family: "Roboto"; + font-style: normal; + font-weight: 400; + src: local("Roboto"), local("Roboto-Regular"), + url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7WxKOzY.woff2) + format("woff2"); + unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; +} + +@font-face { + font-family: "Roboto"; + font-style: normal; + font-weight: 400; + src: local("Roboto"), local("Roboto-Regular"), + url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) + format("woff2"); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} + +@font-face { + font-family: "Roboto"; + font-style: normal; + font-weight: 400; + src: local("Roboto"), local("Roboto-Regular"), + url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxK.woff2) + format("woff2"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, + U+FEFF, U+FFFD; +} + +@font-face { + font-family: "Roboto"; + font-style: normal; + font-weight: 700; + src: local("Roboto Bold"), local("Roboto-Bold"), + url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfCRc4EsA.woff2) + format("woff2"); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, + U+FE2E-FE2F; +} + +@font-face { + font-family: "Roboto"; + font-style: normal; + font-weight: 700; + src: local("Roboto Bold"), local("Roboto-Bold"), + url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfABc4EsA.woff2) + format("woff2"); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} + +@font-face { + font-family: "Roboto"; + font-style: normal; + font-weight: 700; + src: local("Roboto Bold"), local("Roboto-Bold"), + url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfCBc4EsA.woff2) + format("woff2"); + unicode-range: U+1F00-1FFF; +} + +@font-face { + font-family: "Roboto"; + font-style: normal; + font-weight: 700; + src: local("Roboto Bold"), local("Roboto-Bold"), + url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfBxc4EsA.woff2) + format("woff2"); + unicode-range: U+0370-03FF; +} + +@font-face { + font-family: "Roboto"; + font-style: normal; + font-weight: 700; + src: local("Roboto Bold"), local("Roboto-Bold"), + url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfCxc4EsA.woff2) + format("woff2"); + unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; +} + +@font-face { + font-family: "Roboto"; + font-style: normal; + font-weight: 700; + src: local("Roboto Bold"), local("Roboto-Bold"), + url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfChc4EsA.woff2) + format("woff2"); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} + +@font-face { + font-family: "Roboto"; + font-style: normal; + font-weight: 700; + src: local("Roboto Bold"), local("Roboto-Bold"), + url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) + format("woff2"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, + U+FEFF, U+FFFD; +} + +/* cyrillic-ext */ +@font-face { + font-family: "Roboto"; + font-style: normal; + font-weight: 300; + src: local("Roboto Light"), local("Roboto-Light"), + url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fCRc4EsA.woff2) + format("woff2"); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, + U+FE2E-FE2F; +} + +/* cyrillic */ +@font-face { + font-family: "Roboto"; + font-style: normal; + font-weight: 300; + src: local("Roboto Light"), local("Roboto-Light"), + url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fABc4EsA.woff2) + format("woff2"); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} + +/* greek-ext */ +@font-face { + font-family: "Roboto"; + font-style: normal; + font-weight: 300; + src: local("Roboto Light"), local("Roboto-Light"), + url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fCBc4EsA.woff2) + format("woff2"); + unicode-range: U+1F00-1FFF; +} + +/* greek */ +@font-face { + font-family: "Roboto"; + font-style: normal; + font-weight: 300; + src: local("Roboto Light"), local("Roboto-Light"), + url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fBxc4EsA.woff2) + format("woff2"); + unicode-range: U+0370-03FF; +} + +/* vietnamese */ +@font-face { + font-family: "Roboto"; + font-style: normal; + font-weight: 300; + src: local("Roboto Light"), local("Roboto-Light"), + url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fCxc4EsA.woff2) + format("woff2"); + unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; +} + +/* latin-ext */ +@font-face { + font-family: "Roboto"; + font-style: normal; + font-weight: 300; + src: local("Roboto Light"), local("Roboto-Light"), + url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fChc4EsA.woff2) + format("woff2"); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} + +/* latin */ +@font-face { + font-family: "Roboto"; + font-style: normal; + font-weight: 300; + src: local("Roboto Light"), local("Roboto-Light"), + url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) + format("woff2"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, + U+FEFF, U+FFFD; +} + +/* cyrillic-ext */ +@font-face { + font-family: "Source Sans Pro"; + font-style: italic; + font-weight: 400; + font-display: swap; + src: local("Source Sans Pro Italic"), local("SourceSansPro-Italic"), + url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7qsDJT9g.woff2) + format("woff2"); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, + U+FE2E-FE2F; +} + +/* cyrillic */ +@font-face { + font-family: "Source Sans Pro"; + font-style: italic; + font-weight: 400; + font-display: swap; + src: local("Source Sans Pro Italic"), local("SourceSansPro-Italic"), + url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7jsDJT9g.woff2) + format("woff2"); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} + +/* greek-ext */ +@font-face { + font-family: "Source Sans Pro"; + font-style: italic; + font-weight: 400; + font-display: swap; + src: local("Source Sans Pro Italic"), local("SourceSansPro-Italic"), + url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7rsDJT9g.woff2) + format("woff2"); + unicode-range: U+1F00-1FFF; +} + +/* greek */ +@font-face { + font-family: "Source Sans Pro"; + font-style: italic; + font-weight: 400; + font-display: swap; + src: local("Source Sans Pro Italic"), local("SourceSansPro-Italic"), + url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7ksDJT9g.woff2) + format("woff2"); + unicode-range: U+0370-03FF; +} + +/* vietnamese */ +@font-face { + font-family: "Source Sans Pro"; + font-style: italic; + font-weight: 400; + font-display: swap; + src: local("Source Sans Pro Italic"), local("SourceSansPro-Italic"), + url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7osDJT9g.woff2) + format("woff2"); + unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; +} + +/* latin-ext */ +@font-face { + font-family: "Source Sans Pro"; + font-style: italic; + font-weight: 400; + font-display: swap; + src: local("Source Sans Pro Italic"), local("SourceSansPro-Italic"), + url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7psDJT9g.woff2) + format("woff2"); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} + +/* latin */ +@font-face { + font-family: "Source Sans Pro"; + font-style: italic; + font-weight: 400; + font-display: swap; + src: local("Source Sans Pro Italic"), local("SourceSansPro-Italic"), + url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7nsDI.woff2) + format("woff2"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, + U+FEFF, U+FFFD; +} + +/* cyrillic-ext */ +@font-face { + font-family: "Source Sans Pro"; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local("Source Sans Pro Regular"), local("SourceSansPro-Regular"), + url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNa7lqDY.woff2) + format("woff2"); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, + U+FE2E-FE2F; +} + +/* cyrillic */ +@font-face { + font-family: "Source Sans Pro"; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local("Source Sans Pro Regular"), local("SourceSansPro-Regular"), + url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qPK7lqDY.woff2) + format("woff2"); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} + +/* greek-ext */ +@font-face { + font-family: "Source Sans Pro"; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local("Source Sans Pro Regular"), local("SourceSansPro-Regular"), + url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNK7lqDY.woff2) + format("woff2"); + unicode-range: U+1F00-1FFF; +} + +/* greek */ +@font-face { + font-family: "Source Sans Pro"; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local("Source Sans Pro Regular"), local("SourceSansPro-Regular"), + url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qO67lqDY.woff2) + format("woff2"); + unicode-range: U+0370-03FF; +} + +/* vietnamese */ +@font-face { + font-family: "Source Sans Pro"; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local("Source Sans Pro Regular"), local("SourceSansPro-Regular"), + url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qN67lqDY.woff2) + format("woff2"); + unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; +} + +/* latin-ext */ +@font-face { + font-family: "Source Sans Pro"; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local("Source Sans Pro Regular"), local("SourceSansPro-Regular"), + url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNq7lqDY.woff2) + format("woff2"); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} + +/* latin */ +@font-face { + font-family: "Source Sans Pro"; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local("Source Sans Pro Regular"), local("SourceSansPro-Regular"), + url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2) + format("woff2"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, + U+FEFF, U+FFFD; +} + +// UBUNTU MONO + +/* cyrillic-ext */ +@font-face { + font-family: "Ubuntu Mono"; + font-style: italic; + font-weight: 400; + font-display: swap; + src: local("Ubuntu Mono Italic"), local("UbuntuMono-Italic"), + url(https://fonts.gstatic.com/s/ubuntumono/v9/KFOhCneDtsqEr0keqCMhbCc_OsvSkLBP.woff2) + format("woff2"); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, + U+FE2E-FE2F; +} + +/* cyrillic */ +@font-face { + font-family: "Ubuntu Mono"; + font-style: italic; + font-weight: 400; + font-display: swap; + src: local("Ubuntu Mono Italic"), local("UbuntuMono-Italic"), + url(https://fonts.gstatic.com/s/ubuntumono/v9/KFOhCneDtsqEr0keqCMhbCc_OsLSkLBP.woff2) + format("woff2"); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} + +/* greek-ext */ +@font-face { + font-family: "Ubuntu Mono"; + font-style: italic; + font-weight: 400; + font-display: swap; + src: local("Ubuntu Mono Italic"), local("UbuntuMono-Italic"), + url(https://fonts.gstatic.com/s/ubuntumono/v9/KFOhCneDtsqEr0keqCMhbCc_OsrSkLBP.woff2) + format("woff2"); + unicode-range: U+1F00-1FFF; +} + +/* greek */ +@font-face { + font-family: "Ubuntu Mono"; + font-style: italic; + font-weight: 400; + font-display: swap; + src: local("Ubuntu Mono Italic"), local("UbuntuMono-Italic"), + url(https://fonts.gstatic.com/s/ubuntumono/v9/KFOhCneDtsqEr0keqCMhbCc_OsXSkLBP.woff2) + format("woff2"); + unicode-range: U+0370-03FF; +} + +/* latin-ext */ +@font-face { + font-family: "Ubuntu Mono"; + font-style: italic; + font-weight: 400; + font-display: swap; + src: local("Ubuntu Mono Italic"), local("UbuntuMono-Italic"), + url(https://fonts.gstatic.com/s/ubuntumono/v9/KFOhCneDtsqEr0keqCMhbCc_OsjSkLBP.woff2) + format("woff2"); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} + +/* latin */ +@font-face { + font-family: "Ubuntu Mono"; + font-style: italic; + font-weight: 400; + font-display: swap; + src: local("Ubuntu Mono Italic"), local("UbuntuMono-Italic"), + url(https://fonts.gstatic.com/s/ubuntumono/v9/KFOhCneDtsqEr0keqCMhbCc_OsbSkA.woff2) + format("woff2"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, + U+FEFF, U+FFFD; +} + +/* cyrillic-ext */ +@font-face { + font-family: "Ubuntu Mono"; + font-style: italic; + font-weight: 700; + font-display: swap; + src: local("Ubuntu Mono Bold Italic"), local("UbuntuMono-BoldItalic"), + url(https://fonts.gstatic.com/s/ubuntumono/v9/KFO8CneDtsqEr0keqCMhbCc_Mn33hYJufkO1.woff2) + format("woff2"); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, + U+FE2E-FE2F; +} + +/* cyrillic */ +@font-face { + font-family: "Ubuntu Mono"; + font-style: italic; + font-weight: 700; + font-display: swap; + src: local("Ubuntu Mono Bold Italic"), local("UbuntuMono-BoldItalic"), + url(https://fonts.gstatic.com/s/ubuntumono/v9/KFO8CneDtsqEr0keqCMhbCc_Mn33hYtufkO1.woff2) + format("woff2"); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} + +/* greek-ext */ +@font-face { + font-family: "Ubuntu Mono"; + font-style: italic; + font-weight: 700; + font-display: swap; + src: local("Ubuntu Mono Bold Italic"), local("UbuntuMono-BoldItalic"), + url(https://fonts.gstatic.com/s/ubuntumono/v9/KFO8CneDtsqEr0keqCMhbCc_Mn33hYNufkO1.woff2) + format("woff2"); + unicode-range: U+1F00-1FFF; +} + +/* greek */ +@font-face { + font-family: "Ubuntu Mono"; + font-style: italic; + font-weight: 700; + font-display: swap; + src: local("Ubuntu Mono Bold Italic"), local("UbuntuMono-BoldItalic"), + url(https://fonts.gstatic.com/s/ubuntumono/v9/KFO8CneDtsqEr0keqCMhbCc_Mn33hYxufkO1.woff2) + format("woff2"); + unicode-range: U+0370-03FF; +} + +/* latin-ext */ +@font-face { + font-family: "Ubuntu Mono"; + font-style: italic; + font-weight: 700; + font-display: swap; + src: local("Ubuntu Mono Bold Italic"), local("UbuntuMono-BoldItalic"), + url(https://fonts.gstatic.com/s/ubuntumono/v9/KFO8CneDtsqEr0keqCMhbCc_Mn33hYFufkO1.woff2) + format("woff2"); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} + +/* latin */ +@font-face { + font-family: "Ubuntu Mono"; + font-style: italic; + font-weight: 700; + font-display: swap; + src: local("Ubuntu Mono Bold Italic"), local("UbuntuMono-BoldItalic"), + url(https://fonts.gstatic.com/s/ubuntumono/v9/KFO8CneDtsqEr0keqCMhbCc_Mn33hY9ufg.woff2) + format("woff2"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, + U+FEFF, U+FFFD; +} + +/* cyrillic-ext */ +@font-face { + font-family: "Ubuntu Mono"; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local("Ubuntu Mono"), local("UbuntuMono-Regular"), + url(https://fonts.gstatic.com/s/ubuntumono/v9/KFOjCneDtsqEr0keqCMhbCc3CsTKlA.woff2) + format("woff2"); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, + U+FE2E-FE2F; +} + +/* cyrillic */ +@font-face { + font-family: "Ubuntu Mono"; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local("Ubuntu Mono"), local("UbuntuMono-Regular"), + url(https://fonts.gstatic.com/s/ubuntumono/v9/KFOjCneDtsqEr0keqCMhbCc-CsTKlA.woff2) + format("woff2"); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} + +/* greek-ext */ +@font-face { + font-family: "Ubuntu Mono"; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local("Ubuntu Mono"), local("UbuntuMono-Regular"), + url(https://fonts.gstatic.com/s/ubuntumono/v9/KFOjCneDtsqEr0keqCMhbCc2CsTKlA.woff2) + format("woff2"); + unicode-range: U+1F00-1FFF; +} + +/* greek */ +@font-face { + font-family: "Ubuntu Mono"; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local("Ubuntu Mono"), local("UbuntuMono-Regular"), + url(https://fonts.gstatic.com/s/ubuntumono/v9/KFOjCneDtsqEr0keqCMhbCc5CsTKlA.woff2) + format("woff2"); + unicode-range: U+0370-03FF; +} + +/* latin-ext */ +@font-face { + font-family: "Ubuntu Mono"; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local("Ubuntu Mono"), local("UbuntuMono-Regular"), + url(https://fonts.gstatic.com/s/ubuntumono/v9/KFOjCneDtsqEr0keqCMhbCc0CsTKlA.woff2) + format("woff2"); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} + +/* latin */ +@font-face { + font-family: "Ubuntu Mono"; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local("Ubuntu Mono"), local("UbuntuMono-Regular"), + url(https://fonts.gstatic.com/s/ubuntumono/v9/KFOjCneDtsqEr0keqCMhbCc6CsQ.woff2) + format("woff2"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, + U+FEFF, U+FFFD; +} + +/* cyrillic-ext */ +@font-face { + font-family: "Ubuntu Mono"; + font-style: normal; + font-weight: 700; + font-display: swap; + src: local("Ubuntu Mono Bold"), local("UbuntuMono-Bold"), + url(https://fonts.gstatic.com/s/ubuntumono/v9/KFO-CneDtsqEr0keqCMhbC-BL9H4tY12eg.woff2) + format("woff2"); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, + U+FE2E-FE2F; +} + +/* cyrillic */ +@font-face { + font-family: "Ubuntu Mono"; + font-style: normal; + font-weight: 700; + font-display: swap; + src: local("Ubuntu Mono Bold"), local("UbuntuMono-Bold"), + url(https://fonts.gstatic.com/s/ubuntumono/v9/KFO-CneDtsqEr0keqCMhbC-BL9HxtY12eg.woff2) + format("woff2"); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} + +/* greek-ext */ +@font-face { + font-family: "Ubuntu Mono"; + font-style: normal; + font-weight: 700; + font-display: swap; + src: local("Ubuntu Mono Bold"), local("UbuntuMono-Bold"), + url(https://fonts.gstatic.com/s/ubuntumono/v9/KFO-CneDtsqEr0keqCMhbC-BL9H5tY12eg.woff2) + format("woff2"); + unicode-range: U+1F00-1FFF; +} + +/* greek */ +@font-face { + font-family: "Ubuntu Mono"; + font-style: normal; + font-weight: 700; + font-display: swap; + src: local("Ubuntu Mono Bold"), local("UbuntuMono-Bold"), + url(https://fonts.gstatic.com/s/ubuntumono/v9/KFO-CneDtsqEr0keqCMhbC-BL9H2tY12eg.woff2) + format("woff2"); + unicode-range: U+0370-03FF; +} + +/* latin-ext */ +@font-face { + font-family: "Ubuntu Mono"; + font-style: normal; + font-weight: 700; + font-display: swap; + src: local("Ubuntu Mono Bold"), local("UbuntuMono-Bold"), + url(https://fonts.gstatic.com/s/ubuntumono/v9/KFO-CneDtsqEr0keqCMhbC-BL9H7tY12eg.woff2) + format("woff2"); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} + +/* latin */ +@font-face { + font-family: "Ubuntu Mono"; + font-style: normal; + font-weight: 700; + font-display: swap; + src: local("Ubuntu Mono Bold"), local("UbuntuMono-Bold"), + url(https://fonts.gstatic.com/s/ubuntumono/v9/KFO-CneDtsqEr0keqCMhbC-BL9H1tY0.woff2) + format("woff2"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, + U+FEFF, U+FFFD; +} diff --git a/_sass/klise/_layout.scss b/_sass/klise/_layout.scss new file mode 100644 index 0000000..7d87780 --- /dev/null +++ b/_sass/klise/_layout.scss @@ -0,0 +1,380 @@ +// Navbar +.navbar { + height: auto; + max-width: calc(#{$wide-size} - (#{$spacing-full} * 2)); + max-width: -webkit-calc(#{$wide-size} - (#{$spacing-full} * 2)); + position: relative; + margin-right: auto; + margin-left: auto; + border-bottom: 1px solid $light; + padding: $spacing-full - 15px $spacing-full; + @extend %clearfix; +} + +// Navigation +.menu { + user-select: none; + -ms-user-select: none; + -webkit-user-select: none; + + a#mode { + float: left; + left: 8px; + top: 6px; + position: relative; + clear: both; + -webkit-transform: scale(1, 1); + transform: scale(1, 1); + opacity: 0.7; + z-index: 1; + &:hover { + cursor: pointer; + opacity: 1; + } + &:active { + -webkit-transform: scale(0.9, 0.9); + transform: scale(0.9, 0.9); + } + .mode-moon { + display: block; + line { + stroke: $black; + fill: none; + } + + circle { + fill: $black; + stroke: $black; + } + } + .mode-sunny { + display: none; + line { + stroke: $dark-white; + fill: none; + } + circle { + fill: none; + stroke: $dark-white; + } + } + } + + .trigger { + float: right; + } + + .menu-trigger { + display: none; + } + + .menu-icon { + display: none; + } + + .menu-link { + color: $black; + line-height: $base-line-height + 0.4; + text-decoration: none; + padding: 5px 8px; + opacity: 0.7; + letter-spacing: 0.3px; + + &:hover { + opacity: 1; + } + + &:not(:last-child) { + margin-right: 5px; + } + + &.rss { + position: relative; + bottom: -3px; + outline: none; + } + + @include media-query($on-mobile) { + opacity: 0.8; + } + } + + .menu-link.active { + opacity: 1; + font-weight: 600; + } + + @include media-query($on-mobile) { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 2; + text-align: center; + height: 50px; + background-color: $white; + border-bottom: 1px solid $light; + + a#mode { + left: 10px; + top: 12px; + } + + .menu-icon { + display: block; + position: absolute; + right: 0; + width: 50px; + height: 23px; + line-height: 0; + padding-top: 13px; + padding-bottom: 15px; + cursor: pointer; + text-align: center; + z-index: 1; + > svg { + fill: $black; + opacity: 0.7; + } + &:hover { + > svg { + opacity: 1; + } + } + &:active { + -webkit-transform: scale(0.9, 0.9); + transform: scale(0.9, 0.9); + } + } + + input[type="checkbox"]:not(:checked) ~ .trigger { + clear: both; + visibility: hidden; + } + + input[type="checkbox"]:checked ~ .trigger { + position: fixed; + animation: 0.2s ease-in forwards fadein; + -webkit-animation: 0.2s ease-in forwards fadein; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + background-color: $white; + height: 100vh; + width: 100%; + top: 0; + } + + .menu-link { + display: block; + box-sizing: border-box; + font-size: 1.1em; + + &:not(:last-child) { + margin: 0; + padding: 2px 0; + } + } + } +} + +// Author +.author { + margin-top: 6.3rem; + margin-bottom: 7.2rem; + text-align: center; + + @include media-query($on-mobile) { + margin-bottom: 3em; + } + + .author-avatar { + width: 70px; + height: 70px; + border-radius: 100%; + user-select: none; + background-color: $black; + -ms-user-select: none; + -webkit-user-select: none; + -webkit-animation: 0.5s ease-in forwards fadein; + animation: 0.5s ease-in forwards fadein; + opacity: 1; + } + + .author-name { + font-size: 1.7em; + margin-bottom: 2px; + } + + .author-bio { + margin: 0 auto; + opacity: 0.9; + max-width: 393px; + line-height: 1.688; + } +} + +// Content +.posts-item-note { + font-size: $base-font-size; + font-weight: 700; + margin-bottom: 5px; + color: $black; +} + +// List of posts +.post-item { + display: flex; + padding-top: 5px; + padding-bottom: 6px; + @extend %clearfix; + + &:not(:first-child) { + border-top: 1px solid $light; + } + + .post-item-date { + min-width: 96px; + color: $black; + font-weight: 700; + padding-right: 10px; + + @include media-query($on-mobile) { + font-size: 16px; + } + } + + .post-item-title { + margin: 0; + border: 0; + padding: 0; + font-size: $base-font-size; + font-weight: normal; + letter-spacing: 0.1px; + + a { + color: $text-base-color; + + &:hover, + &focus { + color: $black; + } + } + } +} + +// Footer +.footer { + margin-top: 8em; + margin-bottom: 2em; + text-align: center; + + @include media-query($on-mobile) { + margin-top: 3em; + } + span.footer_item { + color: $black; + opacity: 0.8; + font-weight: $bold-weight; + font-size: $small-font-size; + } + a.footer_item { + color: $black; + opacity: 0.8; + text-decoration: none; + + &:not(:last-child) { + margin-right: 10px; + &:hover { + opacity: 1; + } + } + } + + .footer_copyright { + font-size: $small-font-size - 1; + margin-top: 3px; + display: block; + color: $gray; + opacity: 0.8; + } +} + +.not-found { + text-align: center; + display: flex; + justify-content: center; + flex-direction: column; + height: 75vh; + .title { + font-size: 5em; + font-weight: $bold-weight; + line-height: 1.1; + color: $black; + text-shadow: 1px 0px 0px $text-link-blue; + } + .phrase { + color: $text-base-color; + } + .solution { + color: $text-link-blue; + letter-spacing: 0.5px; + } + .solution:hover { + color: $text-link-blue-active; + } +} + + +.search-article { + position: relative; + margin-bottom: 50px; + + label[for="search-input"] { + position: relative; + top: 10px; + left: 11px; + } + + input[type="search"] { + top: 0; + left: 0; + border: 0; + width: 100%; + height: 40px; + outline: none; + position: absolute; + border-radius: 5px; + padding: 10px 10px 10px 35px; + color: $text-base-color; + -webkit-appearance: none; + font-size: $base-font-size; + background-color: rgba(128, 128, 128, 0.1); + border: 1px solid rgba(128, 128, 128, 0.1); + &::-webkit-input-placeholder { + color: #808080; + } + &::-webkit-search-decoration, + &::-webkit-search-results-decoration { + display: none; + } + } +} + +#search-results { + text-align: center; + li { + text-align: left; + } +} + +.archive-tags { + height: auto; + .tag-item { + padding: 1px 3px; + border-radius: 2px; + border: 1px solid rgba(128, 128, 128, 0.1); + background-color: rgba(128, 128, 128, 0.1); + } +} \ No newline at end of file diff --git a/_sass/klise/_miscellaneous.scss b/_sass/klise/_miscellaneous.scss new file mode 100644 index 0000000..0c96da6 --- /dev/null +++ b/_sass/klise/_miscellaneous.scss @@ -0,0 +1,41 @@ +// Animation fade-in +@keyframes fadein { + 0% { + opacity: 0.2; + } + + 100% { + opacity: 0.8; + } +} + +// Animation blur +@keyframes blur { + 0% { + filter: blur(0px); + } + + 100% { + filter: blur(4px); + } +} + +// Responsive embed video +.embed-responsive { + height: 0; + max-width: 100%; + overflow: hidden; + position: relative; + padding-bottom: 56.25%; + margin-top: 20px; + + iframe, + object, + embed { + top: 0; + left: 0; + width: 100%; + height: 100%; + position: absolute; + } +} diff --git a/_sass/klise/_post.scss b/_sass/klise/_post.scss new file mode 100644 index 0000000..7465d46 --- /dev/null +++ b/_sass/klise/_post.scss @@ -0,0 +1,261 @@ +// Post wrapper +.wrapper.post { + @include media-query($on-mobile) { + padding-left: $spacing-half; + padding-right: $spacing-half; + } +} + +// Post title +.header { + margin-top: 7.8em; + margin-bottom: 3em; + + .tags { + margin-left: 3px; + letter-spacing: 0.5px; + + .tag { + font-weight: $bold-weight; + font-size: $small-font-size - 2; + + &:hover { + text-decoration: none; + } + } + } + + .header-title { + font-size: 2em; + line-height: 1.2; + margin-top: 10px; + margin-bottom: 20px; + + &.center { + text-align: center; + } + + @include media-query($on-mobile) { + font-size: 1.9em; + } + } +} + +// Post meta +.post-meta { + padding-top: 3px; + line-height: 1.3; + color: $gray; + + time { + position: relative; + margin-right: 1.5em; + + &::after { + background: $light; + bottom: 1px; + content: " "; + height: 2px; + position: absolute; + right: -20px; + width: 12px; + } + } + + span[itemprop="author"] { + border-bottom: 1px dotted $light; + } +} + +// Post content +.page-content { + padding-top: 8px; + + iframe { + text-align: center; + } + + figure { + img { + border-radius: 2px; + } + + figcaption { + margin-top: 5px; + font-style: italic; + font-size: $small-font-size; + } + } + + a { + color: $text-link-blue; + text-decoration: none; + &[target="_blank"]::after { + content: " \2197"; + font-size: $small-font-size; + line-height: 0; + position: relative; + bottom: 5px; + vertical-align: baseline; + } + + &:hover { + color: $text-link-blue-active; + } + + &:focus { + color: $text-link-blue; + } + } + + > p { + margin: 0; + padding-top: $spacing-full - 15; + padding-bottom: $spacing-full - 15; + } + + ul.task-list { + list-style: none; + margin: 0; + + li::before { + content: ""; + } + + li input[type="checkbox"] { + margin-right: 10px; + } + } + + dl dt { + font-weight: $bold-weight; + } + + h1, + h2, + h3, + h4, + h5, + h6 { + color: $black; + font-weight: $bold-weight; + margin-top: $spacing-full; + margin-bottom: 0; + + &:hover { + .anchor-head { + color: $text-link-blue; + opacity: 1; + } + } + + .anchor-head { + position: relative; + opacity: 0; + outline: none; + + &::before { + content: "#"; + position: absolute; + right: -3px; + width: 1em; + font-weight: $bold-weight; + } + } + } + + h1 { + @include relative-font-size(1.5); + } + + h2 { + @include relative-font-size(1.375); + } + + h3 { + @include relative-font-size(1.25); + border-bottom: 1px solid $light; + padding-bottom: 4px; + } + + h4 { + @include relative-font-size(1.25); + } + + h5 { + @include relative-font-size(1); + } + + h6 { + @include relative-font-size(0.875); + } +} + +.post-nav { + display: flex; + position: relative; + margin-top: 5em; + border-top: 1px solid $light; + line-height: 1.4; + + .post-nav-item { + border-bottom: 0; + font-weight: $bold-weight; + padding-bottom: 10px; + + .post-title { + color: $black; + } + + &:hover, + &:focus { + .post-title { + color: $text-link-blue-active; + opacity: 0.9; + } + } + + .nav-arrow { + font-weight: $normal-weight; + font-size: $small-font-size; + color: $gray; + margin-bottom: 3px; + } + + width: 50%; + padding-top: 10px; + text-decoration: none; + box-sizing: border-box; + + &:nth-child(odd) { + padding-left: 0; + padding-right: 20px; + } + + &:nth-child(even) { + text-align: right; + padding-right: 0; + padding-left: 20px; + } + } + + @include media-query($on-mobile) { + display: block; + font-size: $small-font-size; + + .post-nav-item { + display: block; + width: 100%; + } + + .post-nav-item:nth-child(even) { + border-left: 0; + padding-left: 0; + border-top: 1px solid $light; + } + } +} + +.post-updated-at { + font-family: "Ubuntu mono", "monospace"; +} diff --git a/_sass/klise/_syntax.scss b/_sass/klise/_syntax.scss new file mode 100644 index 0000000..ccad7af --- /dev/null +++ b/_sass/klise/_syntax.scss @@ -0,0 +1,185 @@ +// Code +code { + font-family: $mono-family; + text-rendering: optimizeLegibility; + font-feature-settings: "calt" 1; + font-variant-ligatures: normal; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + font-size: inherit; + + &.highlighter-rouge { + padding: 1px 3px; + position: relative; + top: -1px; + background-color: #f6f6f6; + border-radius: 2px; + border: 1px solid rgba(128,128,128,0.1); + } +} + +// Codeblock Theme +pre.highlight, pre { + margin: 0 -27px; + @include media-query($on-mobile) { + margin: 0 calc(51% - 51vw); + padding-left: 20px; + } + border: 1px solid rgba(128,128,128,0.1); + background-color: #1a1b21; + border-radius: 2px; + padding: 10px; + display: block; + overflow-x: auto; + + > code { + width: 100%; + max-width: 50rem; + margin-left: auto; + margin-right: auto; + line-height: 1.5; + display: block; + border: 0; + } +} + +.highlight table td { + padding: 5px; +} + +.highlight table pre { + margin: 0; +} + +.highlight, +.highlight .w { + color: #fbf1c7; + // background-color: #1a1b21; +} + +.highlight .err { + color: #fb4934; + // background-color: #1a1b21; + font-weight: bold; +} + +.highlight .c, +.highlight .cd, +.highlight .cm, +.highlight .c1, +.highlight .cs { + color: #928374; + font-style: italic; +} + +.highlight .cp { + color: #8ec07c; +} + +.highlight .nt { + color: #fb4934; +} + +.highlight .o, +.highlight .ow { + color: #fbf1c7; +} + +.highlight .p, +.highlight .pi { + color: #fbf1c7; +} + +.highlight .gi { + color: #b8bb26; + background-color: #282828; +} + +.highlight .gd { + color: #fb4934; + background-color: #282828; +} + +.highlight .gh { + color: #b8bb26; + font-weight: bold; +} + +.highlight .k, +.highlight .kn, +.highlight .kp, +.highlight .kr, +.highlight .kv { + color: #fb4934; +} + +.highlight .kc { + color: #d3869b; +} + +.highlight .kt { + color: #fabd2f; +} + +.highlight .kd { + color: #fe8019; +} + +.highlight .s, +.highlight .sb, +.highlight .sc, +.highlight .sd, +.highlight .s2, +.highlight .sh, +.highlight .sx, +.highlight .s1 { + color: #b8bb26; + font-style: italic; +} + +.highlight .si { + color: #b8bb26; + font-style: italic; +} + +.highlight .sr { + color: #b8bb26; + font-style: italic; +} + +.highlight .se { + color: #fe8019; +} + +.highlight .nn { + color: #8ec07c; +} + +.highlight .nc { + color: #8ec07c; +} + +.highlight .no { + color: #d3869b; +} + +.highlight .na { + color: #b8bb26; +} + +.highlight .m, +.highlight .mf, +.highlight .mh, +.highlight .mi, +.highlight .il, +.highlight .mo, +.highlight .mb, +.highlight .mx { + color: #d3869b; +} + +.highlight .ss { + color: #83a598; +} diff --git a/_sass/main.scss b/_sass/main.scss new file mode 100644 index 0000000..1a389a7 --- /dev/null +++ b/_sass/main.scss @@ -0,0 +1,63 @@ +// Fonts preferences +$sans-family: Roboto, sans-serif; +$mono-family: Consolas, monospace; +$base-font-size: 16px; +$medium-font-size: $base-font-size * 0.938; +$small-font-size: $base-font-size * 0.875; +$base-line-height: 1.85; + +// Font weight +// $light-weight: 300; // uncomment if necessary +$normal-weight: 400; +$bold-weight: 700; +// $black-weight: 900; // uncomment if necessary + +//Light Colors +$text-base-color: #434648; +$text-link-blue: #003fff; +$text-link-blue-active: #0036c7; + +$black: #0d122b; +$light: #ececec; +$smoke: #d2c7c7; +$gray: #6b7886; +$white: #fff; + +// Dark Colors +$dark-text-base-color: #c7bebe; +$dark-text-link-blue: #ff5277; +$dark-text-link-blue-active: #ff2957; + +$dark-black: #131418; +$dark-white: #eaeaea; +$dark-light: #1b1d25; +$dark-smoke: #4a4d56; +$dark-gray: #767f87; + +// Width of the content area +$wide-size: 890px; +$narrow-size: 720px; + +// Padding unit +$spacing-full: 30px; +$spacing-half: $spacing-full / 2; + +// State of devices +$on-mobile: 768px; +$on-tablet: 769px; +$on-desktop: 1024px; +$on-widescreen: 1152px; + +@mixin media-query($device) { + @media screen and (max-width: $device) { + @content; + } +} + +@mixin relative-font-size($ratio) { + font-size: $base-font-size * $ratio; +} + +// Import sass files +@import "klise/fonts", "klise/base", "klise/layout", "klise/post", + "klise/miscellaneous", "klise/syntax", "klise/dark"; diff --git a/about.md b/about.md new file mode 100644 index 0000000..e53c79a --- /dev/null +++ b/about.md @@ -0,0 +1,18 @@ +--- +title: Colophon +permalink: /about/ +layout: page +excerpt: Hello peeps, I'm student of computer science from Banyuwangi, living in Jogjakarta. This blog for documentation about my programming journey, running on jekyll, hosting on netlify and using my own simple theme. +comments: false +--- + +He's a student from Banyuwangi, living in Jogjakarta. the blog for documentation about his programming 🎒 journey, running on jekyll, hosting on [now.sh](http://now.sh) and using his own theme, he name it klisé, he also loves to learning web technology; but he often forgot, that a reason why him doing the writing. + +If you have a question about him or else, just send a letter to him. + +You can [report](http://github.com/piharpi/jekyll-klise/issues/new) if there is an broken link(s) or somethings else. + +**may u needs ✨** + +- {{ site.author.email }} +- github.com/{{ site.author.github }} diff --git a/archive.html b/archive.html new file mode 100644 index 0000000..397a6f2 --- /dev/null +++ b/archive.html @@ -0,0 +1,29 @@ +--- +title: Archive +permalink: /archive/ +layout: page +excerpt: All post. +comments: false +--- + +
+ + +
+ +
    + +{%- for post in site.posts -%} + {%- capture current_year -%}{{ post.date | date: "%Y" }}{%- endcapture -%} + {%- unless current_year == previous_year -%} +

    {{ current_year }}

    + {%- assign previous_year = current_year -%} + {%- endunless -%} + +{%- endfor -%} diff --git a/assets/css/style.scss b/assets/css/style.scss new file mode 100644 index 0000000..9f41894 --- /dev/null +++ b/assets/css/style.scss @@ -0,0 +1,4 @@ +--- +--- + +@import "main"; diff --git a/assets/favicons/android-chrome-192x192.png b/assets/favicons/android-chrome-192x192.png new file mode 100644 index 0000000..a2a5c3e Binary files /dev/null and b/assets/favicons/android-chrome-192x192.png differ diff --git a/assets/favicons/android-chrome-384x384.png b/assets/favicons/android-chrome-384x384.png new file mode 100644 index 0000000..babf68c Binary files /dev/null and b/assets/favicons/android-chrome-384x384.png differ diff --git a/assets/favicons/apple-touch-icon.png b/assets/favicons/apple-touch-icon.png new file mode 100644 index 0000000..16a2907 Binary files /dev/null and b/assets/favicons/apple-touch-icon.png differ diff --git a/assets/favicons/browserconfig.xml b/assets/favicons/browserconfig.xml new file mode 100644 index 0000000..5cd27e3 --- /dev/null +++ b/assets/favicons/browserconfig.xml @@ -0,0 +1,9 @@ + + + + + + #603cba + + + diff --git a/assets/favicons/favicon-16x16.png b/assets/favicons/favicon-16x16.png new file mode 100644 index 0000000..f7aabdc Binary files /dev/null and b/assets/favicons/favicon-16x16.png differ diff --git a/assets/favicons/favicon-32x32.png b/assets/favicons/favicon-32x32.png new file mode 100644 index 0000000..35cabb1 Binary files /dev/null and b/assets/favicons/favicon-32x32.png differ diff --git a/assets/favicons/favicon.ico b/assets/favicons/favicon.ico new file mode 100644 index 0000000..f7277f4 Binary files /dev/null and b/assets/favicons/favicon.ico differ diff --git a/assets/favicons/mstile-150x150.png b/assets/favicons/mstile-150x150.png new file mode 100644 index 0000000..455d5ed Binary files /dev/null and b/assets/favicons/mstile-150x150.png differ diff --git a/assets/favicons/safari-pinned-tab.svg b/assets/favicons/safari-pinned-tab.svg new file mode 100644 index 0000000..ec6019b --- /dev/null +++ b/assets/favicons/safari-pinned-tab.svg @@ -0,0 +1,25 @@ + + + + +Created by potrace 1.11, written by Peter Selinger 2001-2013 + + + + + diff --git a/assets/favicons/site.webmanifest b/assets/favicons/site.webmanifest new file mode 100644 index 0000000..a1553eb --- /dev/null +++ b/assets/favicons/site.webmanifest @@ -0,0 +1,19 @@ +{ + "name": "", + "short_name": "", + "icons": [ + { + "src": "/android-chrome-192x192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "/android-chrome-384x384.png", + "sizes": "384x384", + "type": "image/png" + } + ], + "theme_color": "#ffffff", + "background_color": "#ffffff", + "display": "standalone" +} diff --git a/assets/img/avatar.jpg b/assets/img/avatar.jpg new file mode 100644 index 0000000..0d8ffc4 Binary files /dev/null and b/assets/img/avatar.jpg differ diff --git a/assets/img/ogp.png b/assets/img/ogp.png new file mode 100644 index 0000000..a18683c Binary files /dev/null and b/assets/img/ogp.png differ diff --git a/assets/img/saweria-button.png b/assets/img/saweria-button.png new file mode 100644 index 0000000..cb3e7b1 Binary files /dev/null and b/assets/img/saweria-button.png differ diff --git a/assets/js/disqus.js b/assets/js/disqus.js new file mode 100644 index 0000000..f490611 --- /dev/null +++ b/assets/js/disqus.js @@ -0,0 +1 @@ +!function(t,e,n){"use strict";var o=function(t,e){var n,o;return function(){var i=this,r=arguments,d=+new Date;n&&dt.innerHeight*r||i-l-u.offsetHeight-t.innerHeight*r>0)return!0;var c,f,p,y=e.getElementById("disqus_thread");y&&y.removeAttribute("id"),u.setAttribute("id","disqus_thread"),u.disqusLoaderStatus="loaded","loaded"==a?DISQUS.reset({reload:!0,config:d}):(t.disqus_config=d,"unloaded"==a&&(a="loading",c=s,f=function(){a="loaded"},(p=e.createElement("script")).src=c,p.async=!0,p.setAttribute("data-timestamp",+new Date),p.addEventListener("load",function(){"function"==typeof f&&f()}),(e.head||e.body).appendChild(p)))};t.addEventListener("scroll",o(i,l)),t.addEventListener("resize",o(i,l)),t.disqusLoader=function(t,n){n=function(t,e){var n,o={};for(n in t)Object.prototype.hasOwnProperty.call(t,n)&&(o[n]=t[n]);for(n in e)Object.prototype.hasOwnProperty.call(e,n)&&(o[n]=e[n]);return o}({laziness:1,throttle:250,scriptUrl:!1,disqusConfig:!1},n),r=n.laziness+1,i=n.throttle,d=n.disqusConfig,s=!1===s?n.scriptUrl:s,(u="string"==typeof t?e.querySelector(t):"number"==typeof t.length?t[0]:t)&&(u.disqusLoaderStatus="unloaded"),l()}}(window,document); \ No newline at end of file diff --git a/assets/js/galite.js b/assets/js/galite.js new file mode 100644 index 0000000..810673f --- /dev/null +++ b/assets/js/galite.js @@ -0,0 +1 @@ +(function(b,l,e,g,h,f){1!==parseInt(e.msDoNotTrack||b.doNotTrack||e.doNotTrack,10)&&b.addEventListener("load",function(){var r=(new Date).getTime();b.galite=b.galite||{};var m=new XMLHttpRequest,n="https://www.google-analytics.com/collect?cid="+(l.uid=l.uid||Math.random()+"."+Math.random())+"&v=1&tid="+galite.UA+"&dl="+f(h.location.href)+"&ul=en-us&de=UTF-8",a=function(b){var d="",c;for(c in b){if(void 0===b[c])return!1;d+=f(b[c])}return d},p={dt:[h.title],sd:[g.colorDepth,"-bit"],sr:[g.availHeight,"x",g.availWidth],vp:[innerWidth,"x",innerHeight],dr:[h.referrer]},k;for(k in p){var q=k+"="+a(p[k]);q&&(n+="&"+q)}a=function(b,d){var c="",a;for(a in d)c+="&"+a+"="+f(d[a]);return function(){var a=n+c+(galite.anonymizeIp?"&aip=1":"")+"&t="+f(b)+"&z="+(new Date).getTime();if(e.sendBeacon)e.sendBeacon(a);else try{m.open("GET",a,!1),m.send()}catch(t){(new Image).src=a}}};setTimeout(a("pageview",null),100);b.addEventListener("unload",a("timing",{utc:"JS Dependencies",utv:"unload",utt:(new Date).getTime()-r}))})})(window,localStorage,navigator,screen,document,encodeURIComponent) \ No newline at end of file diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..b58aca9 --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,31 @@ +(() => { + // Theme switch + const body = document.body; + const lamp = document.getElementById("mode"); + + const toggleTheme = (state) => { + if (state === "dark") { + localStorage.setItem("theme", "light"); + body.removeAttribute("data-theme"); + } else if (state === "light") { + localStorage.setItem("theme", "dark"); + body.setAttribute("data-theme", "dark"); + } else { + initTheme(state); + } + }; + + lamp.addEventListener("click", () => + toggleTheme(localStorage.getItem("theme")) + ); + + // Blur the content when the menu is open + const cbox = document.getElementById("menu-trigger"); + + cbox.addEventListener("change", function () { + const area = document.querySelector(".wrapper"); + this.checked + ? area.classList.add("blurry") + : area.classList.remove("blurry"); + }); +})(); diff --git a/assets/js/search.min.js b/assets/js/search.min.js new file mode 100644 index 0000000..7b47ead --- /dev/null +++ b/assets/js/search.min.js @@ -0,0 +1,6 @@ +/*! + * Simple-Jekyll-Search + * Copyright 2015-2020, Christian Fei + * Licensed under the MIT License. + */ + !function(){"use strict";var i={compile:function(r){return o.template.replace(o.pattern,function(t,e){var n=o.middleware(e,r[e],o.template);return void 0!==n?n:r[e]||t})},setOptions:function(t){o.pattern=t.pattern||o.pattern,o.template=t.template||o.template,"function"==typeof t.middleware&&(o.middleware=t.middleware)}},o={};o.pattern=/\{(.*?)\}/g,o.template="",o.middleware=function(){};var n=function(t,e){var n=e.length,r=t.length;if(n{title}',templateMiddleware:Function.prototype,sortMiddleware:function(){return 0},noResultsText:"No results found",limit:10,fuzzy:!1,exclude:[]},w=function j(t){if(!((e=t)&&"undefined"!=typeof e.required&&e.required instanceof Array))throw new Error("-- OptionsValidator: required options missing");var e;if(!(this instanceof j))return new j(t);var r=t.required;this.getRequiredOptions=function(){return r},this.validate=function(e){var n=[];return r.forEach(function(t){"undefined"==typeof e[t]&&n.push(t)}),n}}({required:v=["searchInput","resultsContainer","json"]}),t.SimpleJekyllSearch=function(t){var n;0 + + + + + #2c2c2c + + + diff --git a/index.md b/index.md new file mode 100644 index 0000000..bf0c84b --- /dev/null +++ b/index.md @@ -0,0 +1,3 @@ +--- +layout: home +--- \ No newline at end of file diff --git a/lighthouse.png b/lighthouse.png new file mode 100644 index 0000000..673202d Binary files /dev/null and b/lighthouse.png differ diff --git a/now.json b/now.json new file mode 100644 index 0000000..b6dcfd5 --- /dev/null +++ b/now.json @@ -0,0 +1,7 @@ +{ + "version": 2, + "routes": [ + { "handle": "filesystem" }, + { "src": "/.*", "status": 404, "dest": "404.html" } + ] +} diff --git a/tags.html b/tags.html new file mode 100644 index 0000000..2140573 --- /dev/null +++ b/tags.html @@ -0,0 +1,27 @@ +--- +title: Tags +permalink: /tags/ +layout: page +excerpt: Sorted article by tags. +--- + +
    + all + {%- for tag in site.tags -%} + {% capture name %}{{ tag | first }}{% endcapture %} + {{ name }} + {%- endfor -%} +
    + +{%- for tag in site.tags -%} + {%- capture name -%}{{ tag | first }}{%- endcapture -%} +

    {{ name | upcase }}

    + {%- for post in site.tags[name] -%} + + {%- endfor -%} +{%- endfor -%} \ No newline at end of file diff --git a/thanks.md b/thanks.md new file mode 100644 index 0000000..2765c5e --- /dev/null +++ b/thanks.md @@ -0,0 +1,13 @@ +--- +title: Acknowledgment +permalink: /thanks/ +layout: page +excerpt: Thanks to amazing people that i met, who help me out from follishness, connecting me with another good person, giving some advice when i'm at a bad things, pulling me from ordinary to be great. +comments: false +--- + +Thanks to amazing people that i met, who help me out from follishness, connecting me with another good person, giving some advice when i'm at a bad things, pulling me from ordinary to be great. + +
    + +Hopefully the knowledge that I got from them can be useful, and become a charity for them, Aamiin.