💄 Updating the UI and style files.
This commit is contained in:
piharpi
38
.github/ISSUE_TEMPLATE/bug_report.md
vendored
38
.github/ISSUE_TEMPLATE/bug_report.md
vendored
@@ -1,38 +0,0 @@
|
||||
---
|
||||
name: Bug report
|
||||
about: Create a report to help us improve
|
||||
title: ''
|
||||
labels: ''
|
||||
assignees: ''
|
||||
|
||||
---
|
||||
|
||||
**Describe the bug**
|
||||
A clear and concise description of what the bug is.
|
||||
|
||||
**To Reproduce**
|
||||
Steps to reproduce the behavior:
|
||||
1. Go to '...'
|
||||
2. Click on '....'
|
||||
3. Scroll down to '....'
|
||||
4. See error
|
||||
|
||||
**Expected behavior**
|
||||
A clear and concise description of what you expected to happen.
|
||||
|
||||
**Screenshots**
|
||||
If applicable, add screenshots to help explain your problem.
|
||||
|
||||
**Desktop (please complete the following information):**
|
||||
- OS: [e.g. iOS]
|
||||
- Browser [e.g. chrome, safari]
|
||||
- Version [e.g. 22]
|
||||
|
||||
**Smartphone (please complete the following information):**
|
||||
- Device: [e.g. iPhone6]
|
||||
- OS: [e.g. iOS8.1]
|
||||
- Browser [e.g. stock browser, safari]
|
||||
- Version [e.g. 22]
|
||||
|
||||
**Additional context**
|
||||
Add any other context about the problem here.
|
||||
20
.github/ISSUE_TEMPLATE/feature_request.md
vendored
20
.github/ISSUE_TEMPLATE/feature_request.md
vendored
@@ -1,20 +0,0 @@
|
||||
---
|
||||
name: Feature request
|
||||
about: Suggest an idea for this project
|
||||
title: ''
|
||||
labels: ''
|
||||
assignees: ''
|
||||
|
||||
---
|
||||
|
||||
**Is your feature request related to a problem? Please describe.**
|
||||
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
|
||||
|
||||
**Describe the solution you'd like**
|
||||
A clear and concise description of what you want to happen.
|
||||
|
||||
**Describe alternatives you've considered**
|
||||
A clear and concise description of any alternative solutions or features you've considered.
|
||||
|
||||
**Additional context**
|
||||
Add any other context or screenshots about the feature request here.
|
||||
9
.gitignore
vendored
9
.gitignore
vendored
@@ -1,8 +1,5 @@
|
||||
_site/
|
||||
.sass-cache/
|
||||
.jekyll-cache/
|
||||
.jekyll-metadata
|
||||
Gemfile.lock
|
||||
README.md
|
||||
*.gem
|
||||
.bundle
|
||||
.sass-cache
|
||||
_site
|
||||
Gemfile.lock
|
||||
|
||||
4
404.md
4
404.md
@@ -1,5 +1,5 @@
|
||||
---
|
||||
title: You lost from my journey
|
||||
permalink: "/404.html"
|
||||
title: Lost from journey
|
||||
layout: 404
|
||||
permalink: "/404.html"
|
||||
---
|
||||
@@ -1 +0,0 @@
|
||||
|
||||
@@ -1,76 +0,0 @@
|
||||
# Contributor Covenant Code of Conduct
|
||||
|
||||
## Our Pledge
|
||||
|
||||
In the interest of fostering an open and welcoming environment, we as
|
||||
contributors and maintainers pledge to making participation in our project and
|
||||
our community a harassment-free experience for everyone, regardless of age, body
|
||||
size, disability, ethnicity, sex characteristics, gender identity and expression,
|
||||
level of experience, education, socio-economic status, nationality, personal
|
||||
appearance, race, religion, or sexual identity and orientation.
|
||||
|
||||
## Our Standards
|
||||
|
||||
Examples of behavior that contributes to creating a positive environment
|
||||
include:
|
||||
|
||||
* Using welcoming and inclusive language
|
||||
* Being respectful of differing viewpoints and experiences
|
||||
* Gracefully accepting constructive criticism
|
||||
* Focusing on what is best for the community
|
||||
* Showing empathy towards other community members
|
||||
|
||||
Examples of unacceptable behavior by participants include:
|
||||
|
||||
* The use of sexualized language or imagery and unwelcome sexual attention or
|
||||
advances
|
||||
* Trolling, insulting/derogatory comments, and personal or political attacks
|
||||
* Public or private harassment
|
||||
* Publishing others' private information, such as a physical or electronic
|
||||
address, without explicit permission
|
||||
* Other conduct which could reasonably be considered inappropriate in a
|
||||
professional setting
|
||||
|
||||
## Our Responsibilities
|
||||
|
||||
Project maintainers are responsible for clarifying the standards of acceptable
|
||||
behavior and are expected to take appropriate and fair corrective action in
|
||||
response to any instances of unacceptable behavior.
|
||||
|
||||
Project maintainers have the right and responsibility to remove, edit, or
|
||||
reject comments, commits, code, wiki edits, issues, and other contributions
|
||||
that are not aligned to this Code of Conduct, or to ban temporarily or
|
||||
permanently any contributor for other behaviors that they deem inappropriate,
|
||||
threatening, offensive, or harmful.
|
||||
|
||||
## Scope
|
||||
|
||||
This Code of Conduct applies both within project spaces and in public spaces
|
||||
when an individual is representing the project or its community. Examples of
|
||||
representing a project or community include using an official project e-mail
|
||||
address, posting via an official social media account, or acting as an appointed
|
||||
representative at an online or offline event. Representation of a project may be
|
||||
further defined and clarified by project maintainers.
|
||||
|
||||
## Enforcement
|
||||
|
||||
Instances of abusive, harassing, or otherwise unacceptable behavior may be
|
||||
reported by contacting the project team at justharpi@gmail.com. All
|
||||
complaints will be reviewed and investigated and will result in a response that
|
||||
is deemed necessary and appropriate to the circumstances. The project team is
|
||||
obligated to maintain confidentiality with regard to the reporter of an incident.
|
||||
Further details of specific enforcement policies may be posted separately.
|
||||
|
||||
Project maintainers who do not follow or enforce the Code of Conduct in good
|
||||
faith may face temporary or permanent repercussions as determined by other
|
||||
members of the project's leadership.
|
||||
|
||||
## Attribution
|
||||
|
||||
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
|
||||
available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
|
||||
|
||||
[homepage]: https://www.contributor-covenant.org
|
||||
|
||||
For answers to common questions about this code of conduct, see
|
||||
https://www.contributor-covenant.org/faq
|
||||
35
Gemfile
35
Gemfile
@@ -1,33 +1,4 @@
|
||||
# frozen_string_literal: true
|
||||
|
||||
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", "~> 3.8.3"
|
||||
|
||||
# This is the default theme for new Jekyll sites. You may change this to anything you like.
|
||||
# gem "minima", "~> 2.0"
|
||||
|
||||
# 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.11.0'
|
||||
gem 'jekyll-sitemap'
|
||||
gem 'jekyll-sass-converter', '~> 1.5', '>= 1.5.2'
|
||||
gem 'rouge', '3.3.0'
|
||||
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?
|
||||
|
||||
gemspec
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
MIT License
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2019 Mahendrata Harpi
|
||||
Copyright (c) 2019 piharpi
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
@@ -9,13 +9,13 @@ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
||||
53
README.md
53
README.md
@@ -1,5 +1,52 @@
|
||||
# Bangsring Jekyll Theme
|
||||
Description is work in progress
|
||||
# bangsring
|
||||
|
||||
Welcome to your new Jekyll theme! In this directory, you'll find the files you need to be able to package up your theme into a gem. Put your layouts in `_layouts`, your includes in `_includes`, your sass files in `_sass` and any other assets in `assets`.
|
||||
|
||||
To experiment with this code, add some sample content and run `bundle exec jekyll serve` – this directory is setup just like a Jekyll site!
|
||||
|
||||
TODO: Delete this and the text above, and describe your gem
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
Add this line to your Jekyll site's `Gemfile`:
|
||||
|
||||
```ruby
|
||||
gem "bangsring"
|
||||
```
|
||||
|
||||
And add this line to your Jekyll site's `_config.yml`:
|
||||
|
||||
```yaml
|
||||
theme: bangsring
|
||||
```
|
||||
|
||||
And then execute:
|
||||
|
||||
$ bundle
|
||||
|
||||
Or install it yourself as:
|
||||
|
||||
$ gem install bangsring
|
||||
|
||||
## Usage
|
||||
|
||||
TODO: Write usage instructions here. Describe your available layouts, includes, sass and/or assets.
|
||||
|
||||
## Contributing
|
||||
|
||||
Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/hello. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
|
||||
|
||||
## Development
|
||||
|
||||
To set up your environment to develop this theme, run `bundle install`.
|
||||
|
||||
Your theme is setup just like a normal Jekyll site! To test your theme, run `bundle exec jekyll serve` and open your browser at `http://localhost:4000`. This starts a Jekyll server using your theme. Add pages, documents, data, etc. like normal to test your theme's contents. As you make modifications to your theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal.
|
||||
|
||||
When your theme is released, only the files in `_layouts`, `_includes`, `_sass` and `assets` tracked with Git will be bundled.
|
||||
To add a custom directory to your theme-gem, please edit the regexp in `bangsring.gemspec` accordingly.
|
||||
|
||||
## License
|
||||
MIT License
|
||||
|
||||
The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
|
||||
|
||||
|
||||
42
_config.yml
42
_config.yml
@@ -1,50 +1,64 @@
|
||||
# Site settings
|
||||
title: Leah Rutherford
|
||||
projects: true # false to hide my work
|
||||
title: Mahendrata Harpi 🇮🇩
|
||||
description: >-
|
||||
Turpis egestas integer eget aliquet nibh praesent tristique magna sit amet
|
||||
purus gravida quis blandit turpis cursus in hac habitasse platea <a href="#">dictumst</a> quisque sagittis.
|
||||
this blog is place where i'm writing about web technology
|
||||
what i like and as journal for documentation things what i learned, meet me <a href="https://github.com/piharpi" target="_blank">@github</a>.
|
||||
lang: en-US
|
||||
timezone: Asia/Jakarta
|
||||
icon: favicon.ico
|
||||
icon: "favicon.ico"
|
||||
|
||||
# User settings
|
||||
author:
|
||||
name: Leah Rutherford
|
||||
name: Mahendrata Harpi
|
||||
username: piharpi
|
||||
email: justharpi@gmail.com
|
||||
avatar: '/assets/img/avatar.png'
|
||||
avatar: "/assets/img/avatar.jpg"
|
||||
|
||||
# Url settings
|
||||
url: https://piharpi.github.io/bangsring
|
||||
url: https://piharpi.com
|
||||
baseurl: ""
|
||||
permalink: /:categories/:title
|
||||
google_analytics: UA-105586262-2
|
||||
fb_appid: 1806380839422028
|
||||
permalink: blog/:categories/:title/
|
||||
google_analytics: UA-105586262-1
|
||||
fb_appid: ""
|
||||
|
||||
# Collection setting
|
||||
collections:
|
||||
posts:
|
||||
output: true
|
||||
|
||||
# Markdown settings
|
||||
markdown: kramdown
|
||||
highlighter: rouge
|
||||
kramdown:
|
||||
syntax_highlighter: rouge
|
||||
|
||||
# Default front matter
|
||||
defaults:
|
||||
-
|
||||
scope:
|
||||
- scope:
|
||||
path: ""
|
||||
values:
|
||||
layout: post
|
||||
image: /assets/img/avatar.png
|
||||
comments: false
|
||||
|
||||
# Jekyll Compose default front matter
|
||||
jekyll_compose:
|
||||
post_default_front_matter:
|
||||
modified:
|
||||
tags: []
|
||||
description:
|
||||
draft_default_front_matter:
|
||||
modified:
|
||||
tags: []
|
||||
description:
|
||||
|
||||
# Build settings
|
||||
sass:
|
||||
style: compressed
|
||||
|
||||
include:
|
||||
- _redirects
|
||||
- .htaccess
|
||||
|
||||
exclude:
|
||||
- CNAME
|
||||
- Gemfile
|
||||
|
||||
@@ -1,14 +1,8 @@
|
||||
- title: Home
|
||||
url: /
|
||||
|
||||
- title : Blog
|
||||
url : /blog
|
||||
|
||||
- title : Tips
|
||||
url : /tips
|
||||
|
||||
- title: About
|
||||
url : /about
|
||||
url: /about/
|
||||
|
||||
- title: RSS
|
||||
url : /feed.xml
|
||||
url: /feed.xml/
|
||||
|
||||
@@ -1,22 +0,0 @@
|
||||
|
||||
|
||||
- title : bangsring
|
||||
url : https://github.com/piharpi/bangsring
|
||||
description : 🏖 Bangsring is minimalist Jekyll theme for running a personal site and blog.
|
||||
action : <a class="github-button" href="https://github.com/piharpi/bangsring" rel="noreferrer" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star piharpi/bangsring on GitHub">Star</a>
|
||||
|
||||
- title : ruby-book
|
||||
url : https://piharpi.gitbook.io/ruby-in-bahasa/
|
||||
description : Ruby ebook in bahasa indonesia, free and open source.
|
||||
action : <a class="github-button" href="https://github.com/piharpi/rubyinbahasa/issues" rel="noreferrer" data-icon="octicon-issue-opened" data-size="large" data-show-count="true" aria-label="Issue piharpi/rubyinbahasa on GitHub">Issue</a>
|
||||
|
||||
- title : osingdev.org
|
||||
url : https://github.com/osingdev
|
||||
description : A community of programmers @banyuwangi, to discuss and share knowledge.
|
||||
action : <a class="github-button" href="https://github.com/osingdev/osingdev.github.io/fork" rel="noreferrer" data-icon="octicon-repo-forked" data-size="large" data-show-count="true" aria-label="Fork osingdev/osingdev.github.io on GitHub">Fork</a>
|
||||
|
||||
|
||||
- title : piharpi.com
|
||||
url : https://piharpi.com/
|
||||
description : My personal site, this is what you are currently seeing, running on jekyll.
|
||||
action : <a class="github-button" href="https://github.com/piharpi/piharpi.com" data-icon="octicon-star" rel="noreferrer" data-size="large" data-show-count="true" aria-label="Star osingdev/piharpi.com on GitHub">Star</a>
|
||||
@@ -1,15 +0,0 @@
|
||||
<h4 class="home-title"><span role="img" aria-label="book">📘</span>blog posts</h4>
|
||||
<div class="content">
|
||||
{% for post in site.categories.blog %}
|
||||
<article class="list-post blog">
|
||||
<header class="list-post-header">
|
||||
<h2 class="list-post-title">
|
||||
<a href="{{ post.url | absolute_url }}">{{ post.title | escape }}</a>
|
||||
</h2>
|
||||
</header>
|
||||
<section class="list-post-excerpt">
|
||||
<p class="list-post-excerpt"> — {{ post.excerpt | strip_html | normalize_whitespace | truncatewords: 15, '...' }} </p>
|
||||
</section>
|
||||
</article>
|
||||
{% endfor %}
|
||||
</div>
|
||||
1
_includes/comments.html
Normal file
1
_includes/comments.html
Normal file
@@ -0,0 +1 @@
|
||||
<!-- paste here -->
|
||||
@@ -1,12 +0,0 @@
|
||||
<div class="site-intro">
|
||||
{% assign url = page.url %}
|
||||
{% if url == "/" %}
|
||||
<figure class="intro-image">
|
||||
<img src="{{ site.author.avatar | absolute_url }}" alt="{{ site.author.username }}">
|
||||
</figure>
|
||||
{%endif%}
|
||||
<div class="intro-name">{{ site.title }}</div>
|
||||
<p class="intro-description">{{ site.description }}</p>
|
||||
</div>
|
||||
|
||||
{% include header.html %}
|
||||
@@ -1,21 +0,0 @@
|
||||
<div class="disqus">
|
||||
<div id="disqus_thread"></div>
|
||||
</div>
|
||||
<script src="/assets/js/disqus.js"></script>
|
||||
<script>
|
||||
var options =
|
||||
{
|
||||
scriptUrl: '//domain.disqus.com/embed.js',
|
||||
laziness: 0.5,
|
||||
throttle: 250,
|
||||
disqusConfig: function () {
|
||||
this.page.title = '{{ page.title }}';
|
||||
this.page.url = 'https://yourweb.tld{{ page.url }}';
|
||||
this.page.identifier = '{{ page.id }}';
|
||||
}
|
||||
};
|
||||
|
||||
disqusLoader('.disqus', options);
|
||||
|
||||
</script>
|
||||
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
|
||||
@@ -1,5 +1,11 @@
|
||||
<footer class="site-footer">
|
||||
<p><span class="crafted">Crafted with 🍩 in Banyuwangi, <b>IDN</b>.</span></p>
|
||||
<footer class="footer">
|
||||
<div class="copyright">
|
||||
<a href="/thanks">ack.</a>
|
||||
<b>/</b>
|
||||
<a href="/feed.xml">rss</a>
|
||||
<b>/</b>
|
||||
<b>© {{ site.time | date: "%Y" }}</b>
|
||||
</div>
|
||||
</footer>
|
||||
<script src="/assets/js/galite.js"></script>
|
||||
<script>
|
||||
|
||||
@@ -1,58 +1,148 @@
|
||||
<head prefix="og:http://ogp.me/ns#">
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<meta name="theme-color" content="#24292e">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="application-name" content="{{ site.title }}">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="#fff">
|
||||
<meta name="apple-mobile-web-app-title" content="{{ site.title }}">
|
||||
<title>{% if page.title %}{{ page.title | escape }} | {{ site.title }}{% else %}{{ site.title | escape }}{% endif %}</title>
|
||||
<link rel="alternate" href="{{ page.url | absolute_url | remove: 'index.html' | remove: '.html' }}" hreflang="{{ site.lang }}">
|
||||
<link rel="canonical" href="{{ page.url | absolute_url | remove: 'index.html' | remove: '.html' }}">
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="mobile-web-app-capable" content="yes" />
|
||||
<meta name="theme-color" content="#24292e" />
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta name="application-name" content="{{ site.title }}" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="#fff" />
|
||||
<meta name="apple-mobile-web-app-title" content="{{ site.title }}" />
|
||||
<title>
|
||||
{% if page.title %}{{ page.title | escape }} - {{ site.title }}{% else %}{{
|
||||
site.title | escape
|
||||
}}{% endif %}
|
||||
</title>
|
||||
<link
|
||||
rel="alternate"
|
||||
href="{{
|
||||
page.url | absolute_url | remove: 'index.html' | remove: '.html'
|
||||
}}"
|
||||
hreflang="{{ site.lang }}"
|
||||
/>
|
||||
<link
|
||||
rel="canonical"
|
||||
href="{{
|
||||
page.url | absolute_url | remove: 'index.html' | remove: '.html'
|
||||
}}"
|
||||
/>
|
||||
{% if paginator.previous_page %}
|
||||
<link rel="prev" href="{{ paginator.previous_page_path | absolute_url | remove: 'index.html' | remove: '.html' }}">
|
||||
<link
|
||||
rel="prev"
|
||||
href="{{
|
||||
paginator.previous_page_path
|
||||
| absolute_url
|
||||
| remove: 'index.html'
|
||||
| remove: '.html'
|
||||
}}"
|
||||
/>
|
||||
{% endif %} {% if paginator.next_page %}
|
||||
<link
|
||||
rel="next"
|
||||
href="{{
|
||||
paginator.next_page_path
|
||||
| absolute_url
|
||||
| remove: 'index.html'
|
||||
| remove: '.html'
|
||||
}}"
|
||||
/>
|
||||
{% endif %}
|
||||
{% if paginator.next_page %}
|
||||
<link rel="next" href="{{ paginator.next_page_path | absolute_url | remove: 'index.html' | remove: '.html' }}">
|
||||
{% endif %}
|
||||
<meta name="description" content="{{ page.excerpt | default: site.description | strip_html | normalize_whitespace | truncate: 200 | escape }}">
|
||||
<meta name="referrer" content="no-referrer-when-downgrade">
|
||||
<meta property="fb:app_id" content="{{ site.fb_appid }}">
|
||||
<meta property="og:site_name" content="{% if page.title %}{{ page.title | escape }} | {{ site.author.username }}{% else %}{{ site.title | escape }}{% endif %}">
|
||||
<meta property="og:title" content="{% if page.title %}{{ page.title | escape }} | {{ site.author.username }}{% else %}{{ site.title | escape }}{% endif %}">
|
||||
<meta
|
||||
name="description"
|
||||
content="{{
|
||||
page.description
|
||||
| default: site.description
|
||||
| strip_html
|
||||
| normalize_whitespace
|
||||
| truncate: 200
|
||||
| escape
|
||||
}}"
|
||||
/>
|
||||
<meta name="referrer" content="no-referrer-when-downgrade" />
|
||||
<meta property="fb:app_id" content="{{ site.fb_appid }}" />
|
||||
<meta
|
||||
property="og:site_name"
|
||||
content="{% if page.title %}{{ page.title | escape }} | {{
|
||||
site.author.username
|
||||
}}{% else %}{{ site.title | escape }}{% endif %}"
|
||||
/>
|
||||
<meta
|
||||
property="og:title"
|
||||
content="{% if page.title %}{{ page.title | escape }} | {{
|
||||
site.author.username
|
||||
}}{% else %}{{ site.title | escape }}{% endif %}"
|
||||
/>
|
||||
{% if page.location %}
|
||||
<meta property="og:type" content="article">
|
||||
<meta property="article:publisher" content="https://web.facebook.com/{{site.author.username}}">
|
||||
<meta property="og:type" content="article" />
|
||||
<meta
|
||||
property="article:publisher"
|
||||
content="https://web.facebook.com/{{ site.author.username }}"
|
||||
/>
|
||||
{% else %}
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:type" content="website" />
|
||||
{% endif %}
|
||||
<meta property="og:url" content="{{ page.url | absolute_url | remove: 'index.html' | remove: '.html'}}">
|
||||
<meta property="og:description" content="{{ page.excerpt | default: site.description | strip_html | normalize_whitespace | truncate: 200 | escape }}">
|
||||
<meta
|
||||
property="og:url"
|
||||
content="{{
|
||||
page.url | absolute_url | remove: 'index.html' | remove: '.html'
|
||||
}}"
|
||||
/>
|
||||
<meta
|
||||
property="og:description"
|
||||
content="{{
|
||||
page.description
|
||||
| default: site.description
|
||||
| strip_html
|
||||
| normalize_whitespace
|
||||
| truncate: 200
|
||||
| escape
|
||||
}}"
|
||||
/>
|
||||
{% if page.image %}
|
||||
<meta property="og:image" content="{{ page.image | absolute_url }}">
|
||||
<meta property="og:image" content="{{ page.image | absolute_url }}" />
|
||||
{% else %}
|
||||
<meta property="og:image" content="{{ site.image | absolute_url }}">
|
||||
<meta property="og:image" content="{{ site.image | absolute_url }}" />
|
||||
{% endif %}
|
||||
<meta property="og:image:width" content="640" />
|
||||
<meta property="og:image:height" content="640" />
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:title" content="{% if page.title %}{{ page.title | escape }} | {{ site.author.username }}{% else %}{{ site.title | escape }}{% endif %}">
|
||||
<meta name="twitter:url" content="{{ page.url | absolute_url | remove: 'index.html' | remove: '.html'}}">
|
||||
<meta name="twitter:site" content="@{{site.author.username}}">
|
||||
<meta name="twitter:creator" content="@{{site.author.username}}">
|
||||
<meta name="twitter:description" content="{{ page.excerpt | default: site.description | strip_html | normalize_whitespace | truncate: 200 | escape }}"/>
|
||||
<meta name="twitter:card" content="summary" />
|
||||
<meta
|
||||
name="twitter:title"
|
||||
content="{% if page.title %}{{ page.title | escape }} | {{
|
||||
site.author.username
|
||||
}}{% else %}{{ site.title | escape }}{% endif %}"
|
||||
/>
|
||||
<meta
|
||||
name="twitter:url"
|
||||
content="{{
|
||||
page.url | absolute_url | remove: 'index.html' | remove: '.html'
|
||||
}}"
|
||||
/>
|
||||
<meta name="twitter:site" content="@{{ site.author.username }}" />
|
||||
<meta name="twitter:creator" content="@{{ site.author.username }}" />
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content="{{
|
||||
page.description
|
||||
| default: site.description
|
||||
| strip_html
|
||||
| normalize_whitespace
|
||||
| truncate: 200
|
||||
| escape
|
||||
}}"
|
||||
/>
|
||||
{% if page.image %}
|
||||
<meta name="twitter:image" content="{{ page.image | absolute_url }}">
|
||||
<meta name="twitter:image" content="{{ page.image | absolute_url }}" />
|
||||
{% else %}
|
||||
<meta name="twitter:image" content="{{ site.image | absolute_url }}">
|
||||
{% endif %}
|
||||
{% feed_meta %}
|
||||
<meta name="twitter:image" content="{{ site.image | absolute_url }}" />
|
||||
{% endif %} {% feed_meta %}
|
||||
<link rel="icon" href="{{ site.icon | absolute_url }}" type="image/x-icon" />
|
||||
<link rel="shortcut icon" href="{{ site.icon | absolute_url }}" type="image/x-icon"/>
|
||||
<link
|
||||
rel="shortcut icon"
|
||||
href="{{ site.icon | absolute_url }}"
|
||||
type="image/x-icon"
|
||||
/>
|
||||
|
||||
<link rel="apple-touch-icon" href="{{ site.icon }}">
|
||||
<link rel="stylesheet" href="{{ '/assets/css/style.css' | absolute_url }}">
|
||||
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
||||
<link rel="apple-touch-icon" href="{{ site.icon }}" />
|
||||
<link rel="stylesheet" href="{{ '/assets/css/style.css' | absolute_url }}" />
|
||||
</head>
|
||||
@@ -1,25 +0,0 @@
|
||||
<header class="site-header" role="navigation">
|
||||
<nav class="site-nav">
|
||||
<input type="checkbox" id="nav-trigger" class="nav-trigger"/>
|
||||
<label for="nav-trigger">
|
||||
<span class="menu-icon">
|
||||
<svg viewBox="0 0 18 15" width="18px" height="15px" style="background: white;">
|
||||
<path fill="#fff" d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.031C17.335,0,18,0.665,18,1.484L18,1.484z"/>
|
||||
<path fill="#fff" d="M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0c0-0.82,0.665-1.484,1.484-1.484 h15.031C17.335,6.031,18,6.696,18,7.516L18,7.516z"/>
|
||||
<path fill="#fff" d="M18,13.516C18,14.335,17.335,15,16.516,15H1.484C0.665,15,0,14.335,0,13.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.031C17.335,12.031,18,12.696,18,13.516L18,13.516z"/>
|
||||
</svg>
|
||||
</span>
|
||||
</label>
|
||||
<div class="trigger">
|
||||
<div class="trigger-container">
|
||||
{% assign url = page.url%}
|
||||
{% for menu in site.data.menus %}
|
||||
{% if url == menu.url %}
|
||||
<a class="page-link active" href="{{ menu.url | absolute_url }}">{{ menu.title }}</a>
|
||||
{% else %}
|
||||
<a class="page-link" href="{{ menu.url | absolute_url }}">{{ menu.title }}</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
9
_includes/jumbotron.html
Normal file
9
_includes/jumbotron.html
Normal file
@@ -0,0 +1,9 @@
|
||||
<div class="introduction">
|
||||
<img
|
||||
class="introduction-image"
|
||||
src="{{ site.author.avatar | absolute_url }}"
|
||||
alt="{{ site.author.username }}"
|
||||
/>
|
||||
<div class="introduction-name">{{ site.title }}</div>
|
||||
<p class="introduction-description">{{ site.description }}</p>
|
||||
</div>
|
||||
28
_includes/navbar.html
Normal file
28
_includes/navbar.html
Normal file
@@ -0,0 +1,28 @@
|
||||
<header class="navbar" role="navigation">
|
||||
<nav class="menu">
|
||||
<input type="checkbox" id="menu-trigger" class="menu-trigger" />
|
||||
<label for="menu-trigger">
|
||||
<span class="menu-icon">
|
||||
<svg viewBox="0 0 18 15" width="18px" height="15px" style="background: white;">
|
||||
<path fill="#fff"
|
||||
d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.031C17.335,0,18,0.665,18,1.484L18,1.484z" />
|
||||
<path fill="#fff"
|
||||
d="M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0c0-0.82,0.665-1.484,1.484-1.484 h15.031C17.335,6.031,18,6.696,18,7.516L18,7.516z" />
|
||||
<path fill="#fff"
|
||||
d="M18,13.516C18,14.335,17.335,15,16.516,15H1.484C0.665,15,0,14.335,0,13.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.031C17.335,12.031,18,12.696,18,13.516L18,13.516z" />
|
||||
</svg>
|
||||
</span>
|
||||
</label>
|
||||
<div class="trigger">
|
||||
<div class="trigger-container">
|
||||
{% assign url = page.url %}
|
||||
{% for menu in site.data.menus %}
|
||||
{% if url == menu.url %}
|
||||
<a class="menu-link active" href="{{ menu.url | absolute_url }}">{{ menu.title }}</a>
|
||||
{% else %}
|
||||
<a class="menu-link" href="{{ menu.url | absolute_url }}">{{ menu.title }}</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
@@ -1,14 +0,0 @@
|
||||
<div class="pagination">
|
||||
{% if paginator.previous_page %}
|
||||
<a class="page-previous" href="{{ paginator.previous_page_path }}" class="previous">
|
||||
<span aria-hidden="true">←</span>
|
||||
NEWER POSTS
|
||||
</a>
|
||||
{% endif %}
|
||||
<span class="page_number">PAGE {{ paginator.page }} OF {{ paginator.total_pages }}</span>
|
||||
{% if paginator.next_page %}
|
||||
<a class="page-next" href="{{ paginator.next_page_path }}" class="next">OLDER POSTS
|
||||
<span aria-hidden="true">→</span>
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
@@ -1,4 +1,4 @@
|
||||
<aside class="post-nav">
|
||||
<nav class="post-nav">
|
||||
{% if page.previous %}
|
||||
<a class="post-nav-item post-nav-prev" href="{{ page.previous | relative_url }}">
|
||||
<h4>Previous</h4>
|
||||
@@ -11,4 +11,4 @@
|
||||
<span>{{ page.next.title }}</span>
|
||||
</a>
|
||||
{% endif %}
|
||||
</aside>
|
||||
</nav>
|
||||
@@ -1,16 +0,0 @@
|
||||
{% for tag in site.tags %}
|
||||
{% capture tag_name %}{{ tag | first }}{% endcapture %}
|
||||
<h4 class="home-title" id="{{ tag_name | downcase | slugify }}" class="category-head">{{ tag_name }}</h4>
|
||||
<div class="content">
|
||||
{% for post in site.tags[tag_name] %}
|
||||
<article class="list-post tips">
|
||||
<header class="list-post-header tips">
|
||||
<h2 class="list-post-title"><a href="{{ post.url | absolute_url }}">{{ post.title }}</a></h2>
|
||||
</header>
|
||||
<small class="list-post-meta tips-time">
|
||||
<time datetime="{{ post.date | date_to_xmlschema }}">{{ post.categories | first | capitalize }}</time>
|
||||
</small>
|
||||
</article>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
@@ -1,20 +0,0 @@
|
||||
<h4 class="home-title"><span role="img" aria-label="coffee">☕️</span>programming tips</h4>
|
||||
<div class="content">
|
||||
{% for post in site.categories.tips reversed %}
|
||||
<article class="list-post tips">
|
||||
<header class="list-post-header tips">
|
||||
<h2 class="list-post-title">
|
||||
<a href="{{ post.url | absolute_url }}">{{ post.title | escape }}</a>
|
||||
</h2>
|
||||
</header>
|
||||
<small class="list-meta">
|
||||
{% if post.tags != empty %}
|
||||
{% assign tags = post.tags %}
|
||||
{% for tag in tags %}
|
||||
<a class="tag" href="{{site.url}}/tags/#{{tag | downcase | slugify}}">{{tag | downcase }}</a>{% unless forloop.last %},{% endunless %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</small>
|
||||
</article>
|
||||
{% endfor %}
|
||||
</div>
|
||||
@@ -4,18 +4,58 @@ layout: compress
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ page.lang | default: site.lang | default: " en " }}">
|
||||
|
||||
{% include head.html %}
|
||||
<style>
|
||||
body {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
height: 75vh;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 5em;
|
||||
font-weight: bold;
|
||||
font-family: 'Fira Code';
|
||||
line-height: 1.1;
|
||||
color: #ff5555;
|
||||
text-shadow: 1px 0px 0px#b45151;
|
||||
}
|
||||
|
||||
.phrase {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.solution {
|
||||
border-radius: 4em 1em 2em 1em / 1em 5em 1em 3em;
|
||||
color: #0036c7;
|
||||
background: #ebebeb;
|
||||
font-family: 'Roboto';
|
||||
line-height: 1.188;
|
||||
text-decoration: none;
|
||||
padding: 5px 8px;
|
||||
border: 0;
|
||||
font-size: 15.625px;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.solution:hover {
|
||||
border: 0;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<main aria-label="Content">
|
||||
{% include navbar.html %}
|
||||
<div class="wrapper">
|
||||
<div class="er-wrapper">
|
||||
<div class="er-container">
|
||||
<h1 class="er-header">404 — </h1>
|
||||
<p class="er-paragraph">Hmm... Seems like you lost from my journey 🎒 .</p>
|
||||
<p class="er-by">Don't worry you can back to trip <a href="{{ site.url }}">right now</a>.</p>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="title">404</div>
|
||||
<p class="phrase">Hmm... Seems you lost from my 🎒 journey.</p>
|
||||
<a class="solution" href="{{ site.url }}">home</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@@ -8,8 +8,9 @@ layout: compress
|
||||
{% include head.html %}
|
||||
|
||||
<body>
|
||||
{% include navbar.html %}
|
||||
<div class="wrapper">
|
||||
{% include cover.html %}
|
||||
{% include jumbotron.html %}
|
||||
<main aria-label="Content">
|
||||
{{ content }}
|
||||
</main>
|
||||
|
||||
@@ -2,72 +2,24 @@
|
||||
layout: default
|
||||
home: true
|
||||
---
|
||||
<div class="home">
|
||||
{% if site.projects %}
|
||||
<h4 class="home-title"><span role="img" aria-label="icon-rocket">🚀</span>my works <span class="project-nav"><button id="prevProject" aria-label="arrow left">⟵</button><button id="nextProject" aria-label="arrow right">⟶</button></span></h4>
|
||||
<div class="content">
|
||||
<div class="projects">
|
||||
<div class="projects-container" id="projectsContainer">
|
||||
{% for project in site.data.projects %}
|
||||
<div class="project-item">
|
||||
<h4 class="project-item-title"><a target="_blank" href="{{ project.url }}" rel="noreferrer">{{ project.title | downcase }}</a></h4>
|
||||
<p class="project-item-description">{{ project.description | downcase }}</p>
|
||||
<p class="project-action">{{ project.action }}</p>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% for post in site.posts %}
|
||||
{% capture current_year %}
|
||||
{{post.date | date: "%Y"}}
|
||||
{% endcapture %}
|
||||
{% if current_year != previous_year %}
|
||||
{% assign previous_year = current_year %}
|
||||
<h4 class="post-header">
|
||||
<span role="img" aria-label="icon-book" aria-hidden="true">🎉</span>
|
||||
{{ current_year }}
|
||||
</h4>
|
||||
{% endif %}
|
||||
<script>
|
||||
const projects = document.getElementById('projectsContainer'),
|
||||
prev = document.getElementById('prevProject'),
|
||||
next = document.getElementById('nextProject');
|
||||
|
||||
next.addEventListener('mousedown', () => projects.scrollLeft += 245);
|
||||
prev.addEventListener('mousedown', () => projects.scrollLeft -= 245);
|
||||
</script>
|
||||
|
||||
<h4 class="home-title"><span role="img" aria-label="icon-book">📘</span>blog posts</h4>
|
||||
<div class="content">
|
||||
{% for post in site.categories.blog limit:3 %}
|
||||
<article class="list-post blog">
|
||||
<header class="list-post-header">
|
||||
<h4 class="list-post-title">
|
||||
<a href="{{ post.url | absolute_url }}">{{ post.title | escape }}.</a>
|
||||
<article class="posts">
|
||||
<span class="posts-date">{{ post.date | date: "%b %d" }}</span>
|
||||
<header class="posts-header">
|
||||
<h4 class="posts-title">
|
||||
<a href="{{ post.url }}">{{ post.title | escape }}</a>
|
||||
</h4>
|
||||
</header>
|
||||
<section class="list-post-excerpt">
|
||||
<p class="list-post-excerpt"> — {{ post.excerpt | strip_html | downcase | normalize_whitespace | truncatewords: 15, '...' }} </p>
|
||||
</section>
|
||||
</article>
|
||||
{% endfor %}
|
||||
<nav class="see-all-container">
|
||||
<a class="button" href="{{ site.url | absolute_url }}/blog">See All</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<h4 class="home-title"><span role="img" aria-label="icon-coffee">☕️</span>programming tips</h4>
|
||||
<div class="content">
|
||||
{% for post in site.categories.tips reversed limit: 3 %}
|
||||
<article class="list-post tips">
|
||||
<header class="list-post-header tips">
|
||||
<h4 class="list-post-title">
|
||||
<a href="{{ post.url | absolute_url }}">{{ post.title | escape }}</a>
|
||||
</h4>
|
||||
</header>
|
||||
<small class="list-meta">
|
||||
{% if post.tags != empty %}
|
||||
{% assign tags = post.tags %}
|
||||
{% for tag in tags %}
|
||||
<a class="tag" href="{{site.url}}/tags/#{{tag | downcase | slugify}}">{{tag | downcase }}</a>{% unless forloop.last %},{% endunless %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</small>
|
||||
</article>
|
||||
{% endfor %}
|
||||
<nav class="see-all-container">
|
||||
<a class="button" href="{{ site.url | absolute_url }}/tips">See All</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,6 +1,5 @@
|
||||
---
|
||||
layout: compress
|
||||
file: page.url
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
@@ -9,20 +8,16 @@ file: page.url
|
||||
{% include head.html %}
|
||||
|
||||
<body>
|
||||
{% include navbar.html %}
|
||||
<div class="wrapper">
|
||||
|
||||
{% include cover.html %}
|
||||
|
||||
<main aria-label="Content">
|
||||
<div class="content">
|
||||
|
||||
{% include {{ page.url | remove: "/" }}.html %}
|
||||
|
||||
</div>
|
||||
<header class="header">
|
||||
<h1 class="header-title" itemprop="headline">{{ page.title | escape }}.</h1>
|
||||
</header>
|
||||
<main class="page-content" aria-label="Content">
|
||||
{{ content }}
|
||||
</main>
|
||||
|
||||
{% include footer.html %}
|
||||
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -8,57 +8,69 @@ layout: compress
|
||||
{% include head.html %}
|
||||
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
{% include navbar.html %}
|
||||
<div class="wrapper post">
|
||||
<main class="page-content" aria-label="Content">
|
||||
{% include cover.html %}
|
||||
<article class="post" itemscope itemtype="https://schema.org/BlogPosting">
|
||||
<header class="post-header">
|
||||
<h1 class="post-title" itemprop="headline">{{ page.title | escape }}</h1>
|
||||
</header>
|
||||
{% if page.date or page.tags %}
|
||||
<article itemscope itemtype="https://schema.org/BlogPosting">
|
||||
|
||||
<header class="header">
|
||||
<h1 class="header-title" itemprop="headline">{{ page.title | escape }}</h1>
|
||||
|
||||
{% if page.date %}
|
||||
<div class="post-meta">
|
||||
<span itemprop="author" itemscope itemtype="https://schema.org/Person">
|
||||
Posted by <span itemprop="name">{{ site.author.name }}</span> on
|
||||
</span>
|
||||
<time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
|
||||
{{ page.date | date: "%b %d, %Y" }}
|
||||
</time>
|
||||
<span itemprop="author" itemscope itemtype="https://schema.org/Person">
|
||||
<span itemprop="name">{{ site.author.name }}</span>
|
||||
</span>
|
||||
<time hidden datetime="{{ page.modified | date_to_xmlschema }}" itemprop="dateModified">
|
||||
{{ page.date | date: "%b %d, %Y" }}
|
||||
</time>
|
||||
<span hidden itemprop="publisher" itemtype="Person">{{ site.author.name }}</span>
|
||||
<span hidden itemprop="image">{{ page.image | absolute_url }}</span>
|
||||
<span hidden itemprop="image">{{ page.image }}</span>
|
||||
<span hidden itemprop="mainEntityOfPage">{{ page.excerpt }}</span>
|
||||
|
||||
{% if page.tags and page.tags != empty %}
|
||||
<div class="tags">
|
||||
{% assign tags = page.tags %}
|
||||
🔥
|
||||
<span itemprop="keywords">
|
||||
{% for tag in tags %}
|
||||
<a class="tag" href="{{site.url}}/tags/#{{tag | downcase | slugify}}">{{tag | downcase }}</a>{% unless forloop.last %},{% endunless %}
|
||||
<a class="tag"
|
||||
href="/tags/#{{tag | downcase | slugify}}">{{tag | upcase }}</a>{% unless forloop.last %},{% endunless %}
|
||||
{% endfor %}
|
||||
</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="post-content" itemprop="articleBody">
|
||||
{{ content }}
|
||||
</header>
|
||||
|
||||
<div class="page-content" itemprop="articleBody">
|
||||
{{ content }}
|
||||
{% if page.modified %}
|
||||
<small>Updated at <b>{{page.modified | date: "%d %B %Y"}}</b></small>
|
||||
{% endif %}
|
||||
{% if page.tweet %}
|
||||
<p>Comments this article on <a href="https://twitter.com/{{site.username}}/status/{{page.tweet}}">Twitter</a>.</p>
|
||||
<p>Comments this article on
|
||||
<a href="https://twitter.com/{{site.username}}/status/{{page.tweet}}">Twitter</a>.
|
||||
</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
</article>
|
||||
|
||||
{% if page.next or page.previous %}
|
||||
{% include post-nav.html %}
|
||||
{% if page.comments %}
|
||||
{% include comments.html%}
|
||||
{% endif %}
|
||||
|
||||
</main>
|
||||
{% include footer.html %}
|
||||
{% if page.next or page.previous %}
|
||||
{% include post-nav.html %}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% include footer.html %}
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,98 +0,0 @@
|
||||
---
|
||||
title: React Component with Dot Notation
|
||||
date: 2019-02-19 11:45:47 +07:00
|
||||
modified: 2019-02-20 11:45:47 +07:00
|
||||
categories: tips
|
||||
tags: [react, javascript, dot-notation]
|
||||
image:
|
||||
---
|
||||
|
||||
This is my answer to someone’s question on [StackOverflow](https://stackoverflow.com/questions/49256472/react-how-to-extend-a-component-that-has-child-components-and-keep-them/49258038#answer-49258038). How can we define a React component that is accessible through the dot notation?
|
||||
|
||||
Take a look at the following code. We have the ```Menu``` component and its three children ```Menu.Item:```
|
||||
|
||||
const App = () => (
|
||||
<Menu>
|
||||
<Menu.Item>Home</Menu.Item>
|
||||
<Menu.Item>Blog</Menu.Item>
|
||||
<Menu.Item>About</Menu.Item>
|
||||
</Menu>
|
||||
);
|
||||
|
||||
How can we define a component like ```Menu```? Where it has some kind of “sub-component” that is accessible through a dot notation.
|
||||
|
||||
Well, it’s actually a pretty common pattern. And it’s not really a sub-component, it’s just another component being attached to another one.
|
||||
|
||||
Let’s use the above ```Menu```component for example. We’ll put this component to its own dedicated file: ```menu.js```. First, let’s define these two components separately on this module file:
|
||||
|
||||
// menu.js
|
||||
import React from 'react';
|
||||
|
||||
export const MenuItem = ({ children }) => <li>{children}</li>;
|
||||
|
||||
export default const Menu = ({ children }) => <ul>{children}</ul>;
|
||||
|
||||
It’s just a simple functional component. The ```Menu``` is the parent with ```ul``` tag. And the ```MenuItem``` will act as its children. Now we can use these two components like so:
|
||||
|
||||
import React from 'react';
|
||||
import { render } from 'react-dom';
|
||||
import Menu, { MenuItem } from './menu';
|
||||
|
||||
const App = () => (
|
||||
<Menu>
|
||||
<MenuItem>Home</MenuItem>
|
||||
<MenuItem>Blog</MenuItem>
|
||||
<MenuItem>About</MenuItem>
|
||||
</Menu>
|
||||
);
|
||||
|
||||
render(<App />, document.getElementById('root'));
|
||||
|
||||
Where’s the dot notation? To make our MenuItem component accessible through the dot nation, we can simply attach it to the Menu component as a static property. To do so, we can no longer use the functional component for Menu and switch to the class component instead:
|
||||
|
||||
// menu.js
|
||||
import React, { Component } from 'react';
|
||||
|
||||
export default const MenuItem = ({ children }) => <li>{children}</li>;
|
||||
|
||||
export default class Menu extends Component {
|
||||
static Item = MenuItem;
|
||||
|
||||
render() {
|
||||
return (
|
||||
<ul>{this.props.children}</ul>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Now we can use the dot notation to declare the ```MenuItem``` component:
|
||||
|
||||
import React from 'react';
|
||||
import { render } from 'react-dom';
|
||||
import Menu from './menu';
|
||||
|
||||
const App = () => (
|
||||
<Menu>
|
||||
<Menu.Item>Home</Menu.Item>
|
||||
<Menu.Item>Blog</Menu.Item>
|
||||
<Menu.Item>About</Menu.Item>
|
||||
</Menu>
|
||||
);
|
||||
|
||||
render(<App />, document.getElementById('root'));
|
||||
|
||||
You can also put the ```MenuItem``` component definition directly within the ```Menu``` class. But this way you can no longer import ```MenuItem``` individually.
|
||||
|
||||
import React, { Component } from 'react';
|
||||
|
||||
export default class Menu extends Component {
|
||||
static Item = ({ children }) => <li>{children}</li>;
|
||||
|
||||
render() {
|
||||
return (
|
||||
<ul>{this.props.children}</ul>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
**For demo purpose**, Originally published at <https://bagja.net>.
|
||||
63
_posts/2018-09-28-hello-world-how-this-site-was-made.md
Normal file
63
_posts/2018-09-28-hello-world-how-this-site-was-made.md
Normal file
@@ -0,0 +1,63 @@
|
||||
---
|
||||
title: Hello World, how this site was made.
|
||||
date: 2018-09-28 09:45:47 +07:00
|
||||
modified: 2019-08-29 09:24:47 +07:00
|
||||
tags: [blog, netlify, jekyll, github]
|
||||
description: All the services are free, a source code this site placed on github repository and intergration with netlify service, another service that you can use is github page for hosting your own static site.
|
||||
# image: "/assets/img/posts/blog/frontslash.png"
|
||||
---
|
||||
|
||||
The website was made using Jekyll the one of open source static sites generator, and using my own simple theme, I called [bangsring](https://github.com/piharpi/bangsring).
|
||||
|
||||
<hr>
|
||||
|
||||
All the services are free, source code the site was placed on my [github](https://github.com/piharpi/piharpi.com) repository and intergration with [netlify](https://netlify.com) service, another service that you can use is [github page](https://pages.github.com/) for hosting your own static site.
|
||||
|
||||
<hr>
|
||||
|
||||
##### I'm not just tell my story, <br> but i will show you how to create your own site.
|
||||
|
||||
So, before we start create a site, you need some tools, you can self paced for how to installing each tools, on this guide i'm just want to show you how to install jekyll and deploying in netlify, but make sure you have each tools below.
|
||||
|
||||
#### Prerequisites
|
||||
|
||||
- [Ruby](https://www.ruby-lang.org/en/downloads/) programming language
|
||||
- [Git](https://git-scm.com) (version control)
|
||||
- [Netlify](https://netlify.com) and [Github](https://github.com) account
|
||||
- [Bundler](https://bundler.io)
|
||||
|
||||
#### Installation
|
||||
|
||||
First, you need some [SSG](https://www.staticgen.com/), there are many kind ssg, but in case i'm using Jekyll cause i'm already familiar with it, open your terminal and type command on below
|
||||
|
||||
```bash
|
||||
$ bundle install jekyll # installing jekyll in your machine
|
||||
$ jekyll new my-site && cd my-site # create new jekyll project
|
||||
$ jekyll s # run jekyll server
|
||||
```
|
||||
|
||||
Now, jekyll is running on your local machine, open your browser and go to `localhost:4000` is default address from jekyll, press <kbd>CTRL</kbd> + <kbd>C</kbd> to stop the jekyll server.
|
||||
|
||||
#### Adding remote repository
|
||||
|
||||
Before we adding remote repository, you must have [github](https://github.com/new) repository, if already have repository, just add github remote address to your local folder, with the following commands
|
||||
|
||||
```bash
|
||||
$ git init # initializing project folder
|
||||
$ git remote add origin https://github.com/YOUR-USERNAME/YOUR-REPO.git # change UPPERCASE with your own!
|
||||
$ git add -A && git commit -m "Initialize" && git push -u origin master # push code to github
|
||||
```
|
||||
|
||||
Now check your github repository, make sure the files is uploaded correctly.
|
||||
|
||||
#### Deploying to netlify
|
||||
|
||||
Go [netlify](https://netlify.com) dashboard, and following this step.
|
||||
|
||||
1. click **new site from git**, then choose **Github**.
|
||||
2. then choose your repository where is the jekyll sources uploaded.
|
||||
3. netlify smart enough to configuring, we just need to click **Deploy site** button.
|
||||
|
||||
Wait for moment, and voila..! your site's are hosting and using `.netlify.com` tld, if your website wants to look professional, just buy a domain from your favorite domain store. or if you the first time, I advice using namecheap.com*(isn't sponsor)* \*based on my experienced it provides good service and have various TLDs.
|
||||
|
||||
So, what you waiting for, just create your own website for free.
|
||||
@@ -1,39 +0,0 @@
|
||||
---
|
||||
title: Overhaul lanyard gun prow jack
|
||||
date: 2018-09-28 09:45:47 +07:00
|
||||
modified: 2019-02-20 11:45:47 +07:00
|
||||
categories: blog
|
||||
tags: [story, antagonist]
|
||||
image: "/assets/img/posts/devc-yogya-28-09-2018s.jpg"
|
||||
---
|
||||
|
||||
Once upon a time, there was a little boy whose name was Alex he oftern visited his aunt, and she always
|
||||
gave him something when he left her house. Somtimes she gave him something to eat. Sometimes she gave
|
||||
him to play with. The most important one she always gave something.
|
||||
|
||||
## The story of Alex
|
||||
One day alex went to visit his aunt. When he was leaving, she said to him, "Here is a little cake, Alex. Please take it to your mother. Carry it carefully and don't stop it".
|
||||
|
||||
"Thank you, Auntie," said a little boy, and he started home. He carried the cake carrefully int his hands. But he held it very tightly because he did not want to drop it. When he got home he said to his
|
||||
mother.
|
||||
|
||||
"Look at, Mother. Auntie sent you nice little cake"
|
||||
"Where is it?" his mother asked
|
||||
"Here ini my hands" He replied, and opened his hands to show her the cake.
|
||||
"Oh, Alex, you're foolish boy, "she cried
|
||||
"You've ruined it. You shouldn't carry a cake like that you
|
||||
should wrap it carefully in some leaves and carry it onyour head"
|
||||
"I'm sorry,Mother," said the little boy sadly."But I'll remember next time,"
|
||||
he promised.
|
||||
|
||||
The next week, he went to see his aunt again, When he was leaving, she said to him, "here is some butter,Alex. Please tke it to your mother. Carry it carefully and don't drop it."
|
||||
|
||||
"Thank you, Auntie, "said the litter boy and he started home. then he remember what his mother had said. He wrapperd the butter carefully in some leaves, and carried it son his head. On the way home,
|
||||
it was very hot, and Soon the butter began to melt down his face, down his shirt, down his shorts. When he got home he said to his mother.
|
||||
|
||||
"Look at, Mother, Auntie sent you some butter. I remembered what you said. I wrapped it carefully in some leaves and carried it on my head".
|
||||
|
||||
"Oh, Alex, You're stupid boy !", cried his mother. "You'veruined it. You shouldn't carry butter like that. You should wrap it in some leaves and put in the river to cool first, Then carry it carefully in your hand".
|
||||
|
||||
|
||||
Originally posted in <a href="#">blahblah.com</a>
|
||||
@@ -1,96 +0,0 @@
|
||||
---
|
||||
title: Think classic lorem ipsum is passé?
|
||||
date: 2018-11-18 11:38:47 +07:00
|
||||
modified: 2019-02-20 11:45:47 +07:00
|
||||
categories: blog
|
||||
tags: [demo, bangsring, jekyll, github-pages]
|
||||
image: https://source.unsplash.com/FWCUZqXCrUs/800x480 # for open graph image / seo image
|
||||
tweet: 1106842621706563584
|
||||
---
|
||||
Pommy ipsum manky odds and sods tallywhacker up North a bit miffed, her Majesty's pleasure had a barney with the inlaws blimey have a gander jammy git a cuppa fried toast, well chuffed duck nick flabbergasted easy peasy Dalek and. On the pull yorkshire mixture Sherlock pennyboy bloke.
|
||||
|
||||
> Distraction is the process of diverting the attention of an individual or group from a desired area of focus and thereby blocking or diminishing the reception of desired information.
|
||||
|
||||
Fusce ut placerat orci nulla. Nibh mauris cursus mattis molestie a iaculis. At tempor commodo ullamcorper a lacus vestibulum sed. <kbd>ctrl</kbd> + <kbd>space</kbd> Fames ac turpis egestas integer.
|
||||
|
||||
### Table of Contents
|
||||
1. [What is programming](#what-is-programming)
|
||||
- [How to become programmer](#how-to-become-programmer)
|
||||
- [Why programmer are single](#why-programmer-are-single)
|
||||
- [Coding is not fun!](#coding-is-not-fun)
|
||||
2. [Choose programming language](#choose-programming-language)
|
||||
3. [Don't hate your programs](#dont-hate-your-programs)
|
||||
4. [Learn how to learn](#learn-how-to-learn)
|
||||
5. [Conclusion](#conclusion)
|
||||
|
||||
Doubloon lookout six pounders loot shrouds mutiny run a shot across the bow sheet Admiral of the Black rigging. Ballast fire in the hole Arr bilge no prey, no pay matey loaded to the gunwalls rutters quarterdeck heave to. Nipper Arr sutler gaff smartly broadside topsail walk the plank warp case shot.
|
||||
|
||||
<figure>
|
||||
<img src="https://source.unsplash.com/xPD38QJWFYM/800x500" alt="Istanbul, Turkey">
|
||||
<figcaption>
|
||||
26 E Mallory Ave, Memphis, United States by <u>@kharaoke</u>.
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
Boom swab Shiver me timbers rutters yo-ho-ho pinnace lookout sutler bowsprit run a rig. Take a caulk quarter driver interloper main sheet belay run a shot across the bow bucko draught bring a spring upon her cable. Pieces of Eight come about cable league Gold Road aye Sea Legs flogging square-rigged bowsprit.
|
||||
|
||||
## What is programming
|
||||
Elit sed vulputate mi sit amet. Auctor urna nunc id cursus metus aliquam eleifend. Senectus et netus et malesuada fames. At risus viverra adipiscing at in tellus integer feugiat scelerisque. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor.
|
||||
|
||||
- #### How to become programmer
|
||||
Yawl pink shrouds tack overhaul scurvy. Ye lugger Chain Shot Blimey barkadeer heave down. Grog jib Gold Road jack Pirate Round jury mast. Jack Tar grog blossom sutler bilge water Sea Legs hearties. Sutler lugger gibbet chase guns keel bowsprit.
|
||||
|
||||
- #### Why programmer are single
|
||||
Programmers are used to imagining every possible scenario while coding, to reduce or eliminate bugs. Like "what happens if I don't initialize that now, will it be used in future?", etc.
|
||||
They also literally expect the "worst case" while developing algorithms, and use it to bound performance.
|
||||
|
||||
|
||||
- #### Coding is not fun!
|
||||
And what eventually happens is that these people will adapt this to real life. If you are going to propose to somebody and imagining all possible scenarios, and expecting the worst case, most probably either you will mess it up, or you will back off.
|
||||
|
||||
No prey, no pay hogshead lanyard me bilge doubloon. Careen Cat o'nine tails reef sails come about ballast pink. Transom poop deck barque belay Corsair rigging. Dead men tell no tales fathom port barque execution dock run a rig. Quarter dead men tell no tales swing the lead ahoy dance the hempen jig no prey, no pay.
|
||||
|
||||
## Choose programming language
|
||||
At risus viverra adipiscing at in tellus integer feugiat scelerisque. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor.
|
||||
|
||||
| Language | Framework | Initial years |
|
||||
|:-----------|:---------------|:-------------:|
|
||||
| Ruby | Ruby On Rails | 2004 |
|
||||
| Javascript | AngularJS | 2016 |
|
||||
| Elixir | Phoenix | 2014 |
|
||||
|
||||
## Don't hate your programs
|
||||
Pirate fire ship red ensign grapple bounty walk the plank list tender cackle fruit handsomely. Reef sails Sea Legs line chandler landlubber or just lubber Spanish Main Chain Shot six pounders weigh anchor holystone.
|
||||
|
||||
<blockquote class="twitter-tweet tw-align-center" data-lang="en"><p lang="in" dir="ltr">“Ada banyak manfaat saat mulai menulis dan membagikan ide yang kamu punya. Tapi untuk mulai menulis tanpa beban... menulislah untuk menulis”<a href="https://t.co/4gePn5NlyB">https://t.co/4gePn5NlyB</a></p>— Hilman Ramadhan ☕ (@hilmanspace) <a href="https://twitter.com/hilmanspace/status/1103158263288393728?ref_src=twsrc%5Etfw">March 6, 2019</a></blockquote>
|
||||
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
|
||||
|
||||
Sail ho Barbary Coast fire in the hole draught tackle hands long clothes piracy aye black jack. Coffer topgallant boom dance the hempen jig belay port Pirate Round gunwalls maroon grog blossom.
|
||||
|
||||
## Learn how to learn
|
||||
Chain Shot knave parrel dance the hempen jig gangplank swing the lead overhaul run a rig haul wind shrouds. List bilged on her anchor swab no prey, no pay crow's nest Gold Road take a caulk ho parley brigantine. Port lugsail fore run a shot across the bow Jolly Roger bucko wherry loaded to the gunwalls nipper reef.
|
||||
|
||||
|
||||
|
||||
```ruby
|
||||
class Person
|
||||
attr_writer :password
|
||||
attr_accessor :name, :username
|
||||
def initialize(name, username, password)
|
||||
@name = name
|
||||
@username = username
|
||||
@password = password
|
||||
@font_url = "https://fonts.googleapis.com/css"
|
||||
end
|
||||
end
|
||||
|
||||
student = Person.new("Harpi", "piharpi", "strongpassword")
|
||||
puts student.name
|
||||
```
|
||||
Oke, dari cara diatas mulai muncul masalah juga ketika ada kepentingan temen kita yang butuh banget enggak bisa jawab langsung karena kita gk tau ada pesan masuk apa enggak makanya saya gunakan suara notif yang beda beberapa teman aja, selain itu terlihat sombong karena tidak merespon pesan padahal kita online, yah sudah mengalami hal seperti ini sebelumnya hahahaha terserah tapi pikiran orang beda2 , yah saya jelasan kenapa gak segera dibalas.
|
||||
|
||||
|
||||
## Conclusion
|
||||
Measured fer yer chains hearties hulk cog weigh anchor chase bilge swab scurvy heave to. Landlubber or just lubber lanyard sloop code of conduct starboard black jack wench jib sutler booty. Belaying pin transom American Main draft fathom rope's end scallywag Jolly Roger black jack crimp, plank list tender cackle fruit handsomely.
|
||||
|
||||
Maecenas volutpat blandit aliquam etiam erat. Eget aliquet nibh _praesent tristique magna_ sit. Ullamcorper malesuada proin libero nunc consequat interdum varius.
|
||||
@@ -1,69 +0,0 @@
|
||||
---
|
||||
title: How to name Sass color variables
|
||||
date: 2018-11-18 11:45:47 +07:00
|
||||
modified: 2019-02-20 11:45:47 +07:00
|
||||
categories: tips
|
||||
tags: [css, sass, naming-variables]
|
||||
image: https://source.unsplash.com/FWCUZqXCrUs/800x480
|
||||
---
|
||||
|
||||
When it comes to naming Sass variables, I suck. I think I've found the perfect solution, get half way through a project, and realise what a terrible mistake I'd made.
|
||||
|
||||
Variables in any language are often overlooked. They're treated as these things that 'ultimately only developers will see, so who cares'. But having a proper naming convention can really help save time, keep your code DRY, and more importantly make your codebase easier to understand for other developers.
|
||||
|
||||
## The bad
|
||||
|
||||
So let's start with the bad. Going back a few months, this is pretty much what the variables file in all of my old projects looked like:
|
||||
|
||||
$red: #e03c31;
|
||||
$darker-red: #c1271d;
|
||||
$blue: #00f;
|
||||
$text-color: #1a1a1a;
|
||||
|
||||
What's the problem here?
|
||||
- The variable names provide no clues as to where they sit in the hierarchy, or their relationship with one another.
|
||||
- What's the primary color? Red? Blue?
|
||||
- What happens if our color scheme changes? We suddenly have to change every instance of ```$red```, with our new color. These defeats the point of having variables in the first place.
|
||||
- _'Darker Red'_ ? How much darker is darker?
|
||||
|
||||
|
||||
## Better
|
||||
|
||||
$primary-color: #e03c31;
|
||||
$secondary-color: #7fff00;
|
||||
$text-color: #1a1a1a;
|
||||
|
||||
Now we've provided some context, we can better see the relationship between our colors. We have a ```$primary-color``` and ```$secondary-color```, which would be our brand colors, and then provide some other utility variables such as ```$text-color```.
|
||||
|
||||
|
||||
## Even Better
|
||||
|
||||
// Internal variables
|
||||
$x-palette-red: #e03c31;
|
||||
$x-palette-green: #7fff00;
|
||||
|
||||
// Global variables
|
||||
$palette-primary: $x-color-red;
|
||||
$palette-secondary: $x-color-green;
|
||||
|
||||
$palette-paragraph: #1a1a1a;
|
||||
|
||||
This is a method that I've recently started using in all of my new projects.
|
||||
|
||||
First we define our colors at a very high level using internal variables. I like to prefix my internal variables with ```x```. Internal variables have one function, and that's to be assigned to other variables. This allows us to keep our global variables free of any bias, but also informs us and others working on the codebase what the actual palette color is. Because let's face it, hex codes are for machines.
|
||||
|
||||
We've also switched around the naming of the actual color variables, to follow a 'property -> level' convention. This is particulary useful when these are surrounded by other variables for typography, grids, etc., as we can instantly scan our variables file by property.
|
||||
|
||||
$palette-primary: $x-color-red;
|
||||
$palette-secondary: $x-color-blue;
|
||||
$palette-tertiary: $x-color-green;
|
||||
|
||||
$font-family-primary: 'Helvetica Neue', sans-serif;
|
||||
$font-family-secondary: 'Georgia', serif;
|
||||
|
||||
$line-height-base: 18px;
|
||||
$line-height-paragraph: 16px;
|
||||
|
||||
Likewise, we use the word 'palette' to distinguish our variables from the 'color' css property which is exclusively for text color.
|
||||
|
||||
**For demo purpose**, Originally published at <https://fahmiirsyd.com>.
|
||||
@@ -1,37 +0,0 @@
|
||||
---
|
||||
title: How to Clear Nunjucks Cache
|
||||
date: 2019-02-19 11:45:47 +07:00
|
||||
modified: 2019-02-20 11:45:47 +07:00
|
||||
category: tips
|
||||
tags: [nonjuck, cache, pug, flores, static-site]
|
||||
---
|
||||
I’m building a static site generator (again) named [Flores](). Initially, I use [Pug]() for the templating engine. But then I discovered [Nunjucks](). It has a lot more features and the syntax is quite similar to [Twig]() which I’m familiar with. I also did a quick test and the render time is quite similar when the cache option is activated.
|
||||
|
||||
However, I had an issue when Flores is on the “watch” mode (think of Webpack watch mode). When the user edits the template file, the changes won’t be reflected on the generated HTML files. This thing happened because of Nunjucks cached the compiled template. The thing is there’s no mention in Nunjucks documentation on how to manually clear the cache.
|
||||
|
||||
I dug into the [Nunjucks source code](https://github.com/mozilla/nunjucks) and found out that each Nunjucks loader (the object that responsible for loading the template) uses cache property to store the compiled template. You can check it on [```initCache```](https://github.com/mozilla/nunjucks/blob/v3.1.7/nunjucks/src/environment.js#L98-L108) method on ```Environment``` class.
|
||||
|
||||
// src/environment.js
|
||||
initCache() {
|
||||
// Caching and cache busting
|
||||
this.loaders.forEach((loader) => {
|
||||
loader.cache = {};
|
||||
if (typeof loader.on === 'function') {
|
||||
loader.on('update', (template) => {
|
||||
loader.cache[template] = null;
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
So in order to clear all the caches, all I have to do is simply set this ```cache``` property to an empty object again.
|
||||
|
||||
const nunjucks = require("nunjucks");
|
||||
|
||||
const env = nunjucks.configure("./path/to/templates");
|
||||
|
||||
for (let i = 0; i < env.loaders.length; i += 1) {
|
||||
env.loaders[i].cache = {};
|
||||
}
|
||||
|
||||
**For demo purpose**, Originally published at <https://bagja.net>.
|
||||
@@ -1,8 +0,0 @@
|
||||
---
|
||||
title: Step to installation bangsring jekyll theme
|
||||
date: 2019-3-6 8:28:47 +07:00
|
||||
modified: 2019-02-20 11:45:47 +07:00
|
||||
categories: blog
|
||||
tags: [installation, jekyll, bangsring-theme]
|
||||
tweet: 1106842621706563584
|
||||
---
|
||||
@@ -6,14 +6,25 @@ html {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body, h1, h2, h3, h4, h5, h6,
|
||||
p, blockquote, pre, hr,
|
||||
dl, dd, ol, ul, figure {
|
||||
letter-spacing: .1px;
|
||||
body,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p,
|
||||
blockquote,
|
||||
pre,
|
||||
hr,
|
||||
dl,
|
||||
dd,
|
||||
ol,
|
||||
ul,
|
||||
figure {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-family: $base-font-family;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -23,22 +34,39 @@ body {
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
position: relative;
|
||||
background: $neutral;
|
||||
font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family;
|
||||
background: $base;
|
||||
font: $base-font-weight #{$base-font-size}/#{$base-line-height} $second-font-family;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-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;
|
||||
border-top: 5px solid $black;
|
||||
box-sizing: border-box;
|
||||
|
||||
@include media-query($on-mobile) {
|
||||
$base-font-size: 18px;
|
||||
font: $base-font-weight #{$base-font-size}/#{$base-line-height} $second-font-family;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Set `margin-bottom` to maintain vertical rhythm
|
||||
*/
|
||||
h1, h2, h3, h4, h5, h6,
|
||||
p, blockquote, pre,
|
||||
ul, ol, dl, figure,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p,
|
||||
blockquote,
|
||||
pre,
|
||||
ul,
|
||||
ol,
|
||||
dl,
|
||||
figure,
|
||||
%vertical-rhythm {
|
||||
margin-top: $spacing-unit - 20;
|
||||
margin-bottom: $spacing-unit - 20;
|
||||
@@ -55,9 +83,9 @@ kbd {
|
||||
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px $white inset;
|
||||
color: #333;
|
||||
display: inline-block;
|
||||
font-family: Roboto;
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
font-family: $syntax-font-family;
|
||||
margin: 0 .1em;
|
||||
padding: .1em .6em;
|
||||
text-shadow: 0 1px 0 $white;
|
||||
@@ -70,6 +98,8 @@ img {
|
||||
max-width: 100%;
|
||||
vertical-align: middle;
|
||||
-webkit-user-drag: none;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -99,13 +129,15 @@ figcaption {
|
||||
/**
|
||||
* Lists
|
||||
*/
|
||||
ul, ol {
|
||||
margin-left: $spacing-unit;
|
||||
ul,
|
||||
ol {
|
||||
margin-left: $spacing-unit - 10;
|
||||
}
|
||||
|
||||
li {
|
||||
padding-bottom: 1px;
|
||||
padding-top: 1px;
|
||||
|
||||
>ul,
|
||||
>ol {
|
||||
margin-bottom: 2px;
|
||||
@@ -116,13 +148,24 @@ li {
|
||||
/**
|
||||
* Headings
|
||||
*/
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: $base-font-weight;
|
||||
}
|
||||
|
||||
h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a {
|
||||
h1>a,
|
||||
h2>a,
|
||||
h3>a,
|
||||
h4>a,
|
||||
h5>a,
|
||||
h6>a {
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
@@ -135,12 +178,12 @@ h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a {
|
||||
*/
|
||||
a {
|
||||
color: $black;
|
||||
border-bottom: 1px solid #1635de;
|
||||
border-bottom: 1px solid $smoke;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: $black;
|
||||
border-bottom: 2px solid #1635de;
|
||||
border-bottom: 2px solid $blue;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -162,11 +205,16 @@ em {
|
||||
* Blockquotes
|
||||
*/
|
||||
blockquote {
|
||||
color: $grey;
|
||||
border-left: 4px solid $black;
|
||||
padding: 5px 5px 5px 15px;
|
||||
border-radius: 2px;
|
||||
@include relative-font-size(1);
|
||||
color: $gray;
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
opacity: .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;
|
||||
@@ -187,14 +235,32 @@ blockquote {
|
||||
padding-left: $spacing-unit;
|
||||
@extend %clearfix;
|
||||
|
||||
@include media-query($on-laptop) {
|
||||
@include media-query($on-mobile) {
|
||||
max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit}));
|
||||
max-width: calc(#{$content-width} - (#{$spacing-unit}));
|
||||
padding-right: $spacing-unit / 2;
|
||||
padding-left: $spacing-unit / 2;
|
||||
padding-right: $spacing-unit - 10;
|
||||
padding-left: $spacing-unit - 10;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Small
|
||||
*/
|
||||
small {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Superscript
|
||||
*/
|
||||
sup {
|
||||
padding: 0px 4px;
|
||||
border-radius: 10%;
|
||||
top: -3px;
|
||||
left: 2px;
|
||||
font-size: small;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/**
|
||||
* Table
|
||||
@@ -203,13 +269,19 @@ table {
|
||||
margin: 0 auto;
|
||||
border-collapse: collapse;
|
||||
background: $white;
|
||||
font-family: 'Roboto Mono';
|
||||
font-family: $first-font-family;
|
||||
font-size: $small-font-size;
|
||||
|
||||
th {
|
||||
font-weight: 400;
|
||||
font-weight: 700;
|
||||
background: #f5f5f5;
|
||||
text-align: left;
|
||||
border-bottom: 2px solid #f5f5f5;
|
||||
}
|
||||
th, td, tr {
|
||||
|
||||
th,
|
||||
td,
|
||||
tr {
|
||||
border: 1px solid $light;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
@@ -228,7 +300,7 @@ table {
|
||||
* When mouse block a text set this color
|
||||
*/
|
||||
::selection {
|
||||
background: #D6EDFF;
|
||||
// background: transparent;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -237,7 +309,9 @@ table {
|
||||
.gist {
|
||||
table {
|
||||
border: 0;
|
||||
tr, td {
|
||||
|
||||
tr,
|
||||
td {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,19 +1,116 @@
|
||||
// Font family
|
||||
@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;}
|
||||
|
||||
@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 {
|
||||
@@ -80,57 +177,282 @@
|
||||
|
||||
/* cyrillic-ext */
|
||||
@font-face {
|
||||
font-family: 'Roboto Mono';
|
||||
font-style: normal;
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: local('Roboto Mono'), local('RobotoMono-Regular'), url(https://fonts.gstatic.com/s/robotomono/v6/L0x5DF4xlVMF-BfR8bXMIjhGq3-OXg.woff2) format('woff2');
|
||||
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: 'Roboto Mono';
|
||||
font-style: normal;
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: local('Roboto Mono'), local('RobotoMono-Regular'), url(https://fonts.gstatic.com/s/robotomono/v6/L0x5DF4xlVMF-BfR8bXMIjhPq3-OXg.woff2) format('woff2');
|
||||
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: 'Roboto Mono';
|
||||
font-style: normal;
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: local('Roboto Mono'), local('RobotoMono-Regular'), url(https://fonts.gstatic.com/s/robotomono/v6/L0x5DF4xlVMF-BfR8bXMIjhHq3-OXg.woff2) format('woff2');
|
||||
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: 'Roboto Mono';
|
||||
font-style: normal;
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: local('Roboto Mono'), local('RobotoMono-Regular'), url(https://fonts.gstatic.com/s/robotomono/v6/L0x5DF4xlVMF-BfR8bXMIjhIq3-OXg.woff2) format('woff2');
|
||||
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: 'Roboto Mono';
|
||||
font-style: normal;
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: local('Roboto Mono'), local('RobotoMono-Regular'), url(https://fonts.gstatic.com/s/robotomono/v6/L0x5DF4xlVMF-BfR8bXMIjhEq3-OXg.woff2) format('woff2');
|
||||
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: 'Roboto Mono';
|
||||
font-style: normal;
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: local('Roboto Mono'), local('RobotoMono-Regular'), url(https://fonts.gstatic.com/s/robotomono/v6/L0x5DF4xlVMF-BfR8bXMIjhFq3-OXg.woff2) format('woff2');
|
||||
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: 'Roboto Mono';
|
||||
font-style: normal;
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: local('Roboto Mono'), local('RobotoMono-Regular'), url(https://fonts.gstatic.com/s/robotomono/v6/L0x5DF4xlVMF-BfR8bXMIjhLq38.woff2) format('woff2');
|
||||
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: italic;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: local('Source Sans Pro Bold Italic'), local('SourceSansPro-BoldItalic'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKwdSBYKcSV-LCoeQqfX1RYOo3qPZZclSdh18Smxg.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: 700;
|
||||
font-display: swap;
|
||||
src: local('Source Sans Pro Bold Italic'), local('SourceSansPro-BoldItalic'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKwdSBYKcSV-LCoeQqfX1RYOo3qPZZclSdo18Smxg.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: 700;
|
||||
font-display: swap;
|
||||
src: local('Source Sans Pro Bold Italic'), local('SourceSansPro-BoldItalic'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKwdSBYKcSV-LCoeQqfX1RYOo3qPZZclSdg18Smxg.woff2) format('woff2');
|
||||
unicode-range: U+1F00-1FFF;
|
||||
}
|
||||
|
||||
/* greek */
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: local('Source Sans Pro Bold Italic'), local('SourceSansPro-BoldItalic'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKwdSBYKcSV-LCoeQqfX1RYOo3qPZZclSdv18Smxg.woff2) format('woff2');
|
||||
unicode-range: U+0370-03FF;
|
||||
}
|
||||
|
||||
/* vietnamese */
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: local('Source Sans Pro Bold Italic'), local('SourceSansPro-BoldItalic'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKwdSBYKcSV-LCoeQqfX1RYOo3qPZZclSdj18Smxg.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: 700;
|
||||
font-display: swap;
|
||||
src: local('Source Sans Pro Bold Italic'), local('SourceSansPro-BoldItalic'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKwdSBYKcSV-LCoeQqfX1RYOo3qPZZclSdi18Smxg.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: 700;
|
||||
font-display: swap;
|
||||
src: local('Source Sans Pro Bold Italic'), local('SourceSansPro-BoldItalic'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKwdSBYKcSV-LCoeQqfX1RYOo3qPZZclSds18Q.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;
|
||||
}
|
||||
|
||||
/* cyrillic-ext */
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmhduz8A.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: 700;
|
||||
font-display: swap;
|
||||
src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwkxduz8A.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: 700;
|
||||
font-display: swap;
|
||||
src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmxduz8A.woff2) format('woff2');
|
||||
unicode-range: U+1F00-1FFF;
|
||||
}
|
||||
|
||||
/* greek */
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlBduz8A.woff2) format('woff2');
|
||||
unicode-range: U+0370-03FF;
|
||||
}
|
||||
|
||||
/* vietnamese */
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmBduz8A.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: 700;
|
||||
font-display: swap;
|
||||
src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmRduz8A.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: 700;
|
||||
font-display: swap;
|
||||
src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdu.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;
|
||||
}
|
||||
|
||||
@import url(https://cdn.jsdelivr.net/gh/tonsky/FiraCode@1.207/distr/fira_code.css);
|
||||
@@ -2,64 +2,82 @@
|
||||
* Site intro
|
||||
*/
|
||||
|
||||
.site-intro {
|
||||
padding-top: 5em;
|
||||
.introduction {
|
||||
margin-top: 5em;
|
||||
margin-bottom: 4em;
|
||||
text-align: center;
|
||||
|
||||
.intro-image {
|
||||
overflow: hidden; // active for border-radius or photo inside the element
|
||||
background: $blue-light;
|
||||
border-radius: 100%;
|
||||
@include media-query($on-mobile) {
|
||||
margin-bottom: 3em;
|
||||
}
|
||||
|
||||
.introduction-image {
|
||||
width: 103px;
|
||||
height: 103px;
|
||||
animation: .5s ease-in forwards weeng;
|
||||
user-select: none;
|
||||
border-radius: 100%;
|
||||
-ms-user-select: none;
|
||||
background: #d8deff;
|
||||
-webkit-user-select: none;
|
||||
border: 6px solid #eef1ff;
|
||||
animation: 0.5s ease-in forwards weeng;
|
||||
box-shadow: 0px 0px 2px 9px #f6f6fa;
|
||||
|
||||
&::after {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
content: "";
|
||||
position: absolute;
|
||||
background: transparent;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.intro-name {
|
||||
.introduction-name {
|
||||
margin-top: 8px;
|
||||
font-size: 1.5em;
|
||||
font-weight: 600;
|
||||
margin-bottom: 5px;
|
||||
color: $black;
|
||||
font-family: $first-font-family;
|
||||
}
|
||||
|
||||
.intro-description {
|
||||
font-size: $base-font-size;
|
||||
color: $grey;
|
||||
margin: 0;
|
||||
.introduction-description {
|
||||
padding: 10px;
|
||||
margin: 0 auto;
|
||||
font-size: 16px;
|
||||
color: $gray;
|
||||
opacity: 0.9;
|
||||
max-width: 393px;
|
||||
font-family: $first-font-family;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Site header
|
||||
* Site navbar
|
||||
*/
|
||||
|
||||
.site-header {
|
||||
height: 25px;
|
||||
margin: 16px 0 5em 0;
|
||||
.navbar {
|
||||
height: auto;
|
||||
max-width: -webkit-calc(890px - (#{$spacing-unit} * 2));
|
||||
max-width: calc(890px - (#{$spacing-unit} * 2));
|
||||
position: relative;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
border-bottom: 1px solid $light;
|
||||
padding: $spacing-unit - 15px $spacing-unit;
|
||||
@extend %clearfix;
|
||||
}
|
||||
|
||||
/**
|
||||
* Site nav
|
||||
*/
|
||||
|
||||
.site-nav {
|
||||
|
||||
.menu {
|
||||
.trigger {
|
||||
float: left;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.nav-trigger {
|
||||
.menu-trigger {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -67,18 +85,16 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
.page-link {
|
||||
.menu-link {
|
||||
color: $black;
|
||||
box-shadow: 1px 1px 0px 0px #dddddd;
|
||||
font-family: $first-font-family;
|
||||
line-height: $base-line-height - 0.5;
|
||||
text-decoration: none;
|
||||
// text-transform: capitalize;
|
||||
background: #ebebeb;
|
||||
border-radius: 2px;
|
||||
border: 0;
|
||||
padding: 5px 8px;
|
||||
font-size: $small-font-size;
|
||||
opacity: .7;
|
||||
border: 0;
|
||||
font-size: $small-font-size - 1;
|
||||
opacity: 0.7;
|
||||
letter-spacing: 0.5px;
|
||||
|
||||
&:hover {
|
||||
@@ -88,21 +104,29 @@
|
||||
&:not(:last-child) {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
@include media-query($on-mobile) {
|
||||
opacity: .8;
|
||||
}
|
||||
}
|
||||
|
||||
.page-link.active {
|
||||
.menu-link.active {
|
||||
opacity: 1;
|
||||
border-radius: 4em 1em 2em 1em / 1em 5em 1em 3em;
|
||||
color: $blue;
|
||||
background-color: $light;
|
||||
}
|
||||
|
||||
@include media-query($on-palm) {
|
||||
@include media-query($on-mobile) {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
border-bottom: 2px solid #f5f5f5;
|
||||
height: 50px;
|
||||
background: $white;
|
||||
border-bottom: 1px solid $light;
|
||||
|
||||
label[for="nav-trigger"] {
|
||||
display: block;
|
||||
@@ -117,10 +141,10 @@
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 36px;
|
||||
height: 26px;
|
||||
width: 50px;
|
||||
height: 20px;
|
||||
line-height: 0;
|
||||
padding-top: 10px;
|
||||
padding-top: 15px;
|
||||
text-align: center;
|
||||
z-index: 10;
|
||||
|
||||
@@ -129,298 +153,99 @@
|
||||
}
|
||||
}
|
||||
|
||||
input ~ .trigger {
|
||||
input[type="checkbox"]:not(:checked)~.trigger {
|
||||
clear: both;
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
input:checked ~ .trigger {
|
||||
input[type="checkbox"]:checked~.trigger {
|
||||
position: fixed;
|
||||
animation: 0.2s ease-in forwards weeng;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: rgba(255, 255, 255, 0.94);
|
||||
background: rgba(255, 255, 255, 0.97);
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.page-link {
|
||||
.menu-link {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
background: none;
|
||||
font-size: $base-font-size;
|
||||
box-shadow: none;
|
||||
font-size: 1em;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 0;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-query($on-palm) {
|
||||
.site-nav .page-link.active, .site-nav .page-link { margin-bottom: 18px; padding: 0; border: 0; }
|
||||
.post-header {
|
||||
font-size: 1.2em;
|
||||
font-family: $first-font-family;
|
||||
text-transform: capitalize;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@include media-query($on-mobile) {
|
||||
|
||||
.site-header {
|
||||
height: 0;
|
||||
margin: 0 0 3em 0;
|
||||
}
|
||||
|
||||
main .content {
|
||||
margin-bottom: 3em;
|
||||
}
|
||||
|
||||
.content .see-all-container {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.page_number {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.post-next {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.post-nav {
|
||||
display: block;
|
||||
.post-nav-item {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.post-nav-item:nth-child(even) {
|
||||
border-left: 0;
|
||||
padding-left: 0;
|
||||
border-top: 1px solid $light;
|
||||
}
|
||||
}
|
||||
|
||||
footer.site-footer {
|
||||
margin-top: 3em;
|
||||
.crafted {
|
||||
text-align: center;
|
||||
float: none;
|
||||
}
|
||||
.copyright {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-heading {
|
||||
@include relative-font-size(1.25);
|
||||
}
|
||||
|
||||
.see-all-container {
|
||||
margin-top: 2em;
|
||||
.posts {
|
||||
padding-top: 5px;
|
||||
padding-bottom: 6px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.button {
|
||||
padding: 4px 10px;
|
||||
font-size: $small-font-size;
|
||||
text-decoration: none;
|
||||
border: 2px solid $blue;
|
||||
color: $blue;
|
||||
border-radius: 4px;
|
||||
// box-shadow: 1px 1px 0px 0px #dddddd;
|
||||
&:hover, &:focus {
|
||||
text-decoration: none;
|
||||
opacity: 1;
|
||||
color: $black;
|
||||
border: 2px solid $black;
|
||||
// box-shadow: 0px 0px 0px 0px #dddddd;
|
||||
}
|
||||
&:active {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.home-title {
|
||||
font-size: $small-font-size;
|
||||
letter-spacing: 2px;
|
||||
color: $black;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
span[role="img"]{
|
||||
font-weight: 700;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Site `t
|
||||
*/
|
||||
.project-nav {
|
||||
float: right;
|
||||
clear: both;
|
||||
button {
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
font-weight: 700;
|
||||
outline: none;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
user-select: none;
|
||||
-ms-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
&:active {
|
||||
background: #ebebeb;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-bottom: 5em;
|
||||
.projects{
|
||||
height: 151px;
|
||||
padding-top: 15px;
|
||||
overflow: hidden;
|
||||
|
||||
.projects-container {
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
padding-bottom: 15px;
|
||||
overflow-x: scroll;
|
||||
|
||||
:nth-child(even){
|
||||
margin: 0 15px;
|
||||
}
|
||||
:nth-last-child(1) {
|
||||
margin-right: 0;
|
||||
}
|
||||
.project-item {
|
||||
width: 200px;
|
||||
padding: 15px;
|
||||
border-radius: 4px;
|
||||
opacity: .8;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 1;
|
||||
white-space: normal;
|
||||
|
||||
.project-item-title {
|
||||
font-size: $small-font-size;
|
||||
font-weight: 700;
|
||||
background: transparent;
|
||||
margin: 0;
|
||||
letter-spacing: .1px;
|
||||
a {
|
||||
border-bottom: 2px solid $blue-light;
|
||||
}
|
||||
}
|
||||
|
||||
.project-item-description {
|
||||
font-size: $small-font-size;
|
||||
background: transparent;
|
||||
position: relative;
|
||||
margin:0;
|
||||
padding-top: 9px;
|
||||
color: $black;
|
||||
}
|
||||
&:hover, &:focus {
|
||||
opacity: 1;
|
||||
background: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Site blog
|
||||
*/
|
||||
|
||||
.list-post.blog {
|
||||
padding: 15px 15px 15px 0;
|
||||
&:not(:first-child) {
|
||||
border-top: 1px solid $light;
|
||||
}
|
||||
}
|
||||
@extend %clearfix;
|
||||
|
||||
.list-post.tips {
|
||||
padding: 12px 0 12px 0;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.list-post-title {
|
||||
background: none;
|
||||
}
|
||||
&:not(:first-child) {
|
||||
border-top: 1px solid $light;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.list-post-header {
|
||||
margin-bottom: $spacing-unit - 15;
|
||||
.posts-header {
|
||||
display: inline;
|
||||
line-height: 15px;
|
||||
}
|
||||
|
||||
.list-post-meta {
|
||||
font-size: $small-font-size;
|
||||
color: $black;
|
||||
opacity: .6;
|
||||
.posts-date {
|
||||
font-family: $first-font-family;
|
||||
font-size: 17px;
|
||||
min-width: 55px;
|
||||
color: $gray;
|
||||
padding-right: 10px;
|
||||
|
||||
@include media-query($on-mobile) {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Site tips
|
||||
*/
|
||||
|
||||
.list-post-header.tips {
|
||||
.list-post-title {
|
||||
margin: 0;
|
||||
.posts-title {
|
||||
margin-top: 2px;
|
||||
margin-bottom: 0;
|
||||
font-family: $second-font-family;
|
||||
font-weight: normal;
|
||||
}
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.list-post-title {
|
||||
// @include relative-font-size(2);
|
||||
font-weight: 600;
|
||||
font-size: $base-font-size;
|
||||
font-size: 1em;
|
||||
display: inherit;
|
||||
|
||||
a {
|
||||
color: $black;
|
||||
color: $blue;
|
||||
text-decoration: none;
|
||||
line-height: 22px;
|
||||
opacity: .8;
|
||||
|
||||
&:hover, &focus {
|
||||
opacity: 1;
|
||||
color: $blue;
|
||||
&:hover,
|
||||
&focus {
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-query($on-laptop) {
|
||||
// @include relative-font-size(2.25);
|
||||
}
|
||||
}
|
||||
|
||||
.list-post-excerpt {
|
||||
font-size: $base-font-size;
|
||||
display: inline;
|
||||
color: $grey;
|
||||
}
|
||||
|
||||
/**
|
||||
* Site image animation
|
||||
* Animation
|
||||
*/
|
||||
|
||||
@keyframes weeng {
|
||||
0% {
|
||||
opacity: .2;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
100% {
|
||||
@@ -439,7 +264,10 @@
|
||||
position: relative;
|
||||
padding-bottom: 56.25%;
|
||||
margin-top: 20px;
|
||||
iframe, object, embed {
|
||||
|
||||
iframe,
|
||||
object,
|
||||
embed {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
@@ -448,75 +276,32 @@
|
||||
}
|
||||
}
|
||||
|
||||
.tags { margin-top: 3px; }
|
||||
.tag {
|
||||
color: $grey;
|
||||
line-height: 1;
|
||||
font-weight: 800;
|
||||
display: inline-block;
|
||||
font-size: $small-font-size;
|
||||
border-bottom: 2px solid $blue-light;
|
||||
&:hover {
|
||||
color: $black;
|
||||
border-color: $blue-light;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 404 page
|
||||
*/
|
||||
|
||||
.er-wrapper {
|
||||
display: flex;
|
||||
max-width: 530px;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.er-container {
|
||||
top: -30px;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.er-header {
|
||||
font-size: 5em;
|
||||
font-weight: bold;
|
||||
color: $black;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.er-paragraph {
|
||||
font-size: 2.531em;
|
||||
color:#1635de;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.er-by {
|
||||
font-size: $base-font-size;
|
||||
color:$black;
|
||||
display: inline;
|
||||
a {
|
||||
border-bottom: 1px solid #1635de;
|
||||
&:hover, &:focus {
|
||||
border-bottom: 2px solid #1635de;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Site footer
|
||||
*/
|
||||
.site-footer {
|
||||
a {
|
||||
.footer {
|
||||
color: $gray;
|
||||
margin-top: 8em;
|
||||
margin-bottom: 2em;
|
||||
text-align: center;
|
||||
font-size: $small-font-size;
|
||||
font-family: $first-font-family;
|
||||
|
||||
@include media-query($on-mobile) {
|
||||
margin-top: 3em;
|
||||
}
|
||||
|
||||
b:not(:last-child) {
|
||||
color: $black;
|
||||
border-bottom: 1px solid $blue;
|
||||
&:hover, &:focus {
|
||||
}
|
||||
|
||||
a {
|
||||
border: 0;
|
||||
color: $gray;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-bottom: 2px solid $blue;
|
||||
}
|
||||
}
|
||||
text-align: center;
|
||||
margin: 7em 0 2em 0;
|
||||
font-size: $base-font-size;
|
||||
color: $grey;
|
||||
}
|
||||
235
_sass/bangsring/_page.scss
Normal file
235
_sass/bangsring/_page.scss
Normal file
@@ -0,0 +1,235 @@
|
||||
.wrapper.post {
|
||||
max-width: -webkit-calc(#{660px} - (#{$spacing-unit} * 2));
|
||||
max-width: calc(#{660px} - (#{$spacing-unit} * 2));
|
||||
|
||||
@include media-query($on-mobile) {
|
||||
padding-left: $spacing-unit - 10;
|
||||
padding-right: $spacing-unit - 10;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Post title
|
||||
*/
|
||||
.header {
|
||||
margin-top: 125px;
|
||||
|
||||
.header-title {
|
||||
text-align: center;
|
||||
font-size: 2em;
|
||||
font-family: $first-font-family;
|
||||
line-height: 1.2;
|
||||
font-weight: 700;
|
||||
color: $black;
|
||||
margin-bottom: 20px;
|
||||
|
||||
@include media-query($on-mobile) {
|
||||
font-size: 1.9em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Post meta
|
||||
*/
|
||||
.post-meta {
|
||||
font-family: $first-font-family;
|
||||
text-align: center;
|
||||
font-size: $small-font-size;
|
||||
margin-bottom: 5em;
|
||||
padding-top: 3px;
|
||||
line-height: 1.3;
|
||||
|
||||
time {
|
||||
color: $gray;
|
||||
position: relative;
|
||||
margin-right: 24px;
|
||||
|
||||
&::after {
|
||||
background: $light;
|
||||
bottom: 1px;
|
||||
content: " ";
|
||||
display: block;
|
||||
height: 2px;
|
||||
position: absolute;
|
||||
right: -20px;
|
||||
width: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
span[itemprop="author"] {
|
||||
color: $gray;
|
||||
border-bottom: 1px dotted $light;
|
||||
}
|
||||
|
||||
.tags {
|
||||
max-width: 200px;
|
||||
margin: 27px auto 0 auto;
|
||||
|
||||
.tag {
|
||||
color: $gray;
|
||||
line-height: 1;
|
||||
font-weight: 800;
|
||||
display: inline-block;
|
||||
font-size: $small-font-size - 4;
|
||||
border-bottom: 0;
|
||||
|
||||
&:hover {
|
||||
color: $black;
|
||||
border-color: $black;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Post content
|
||||
*/
|
||||
.page-content {
|
||||
font-size: 1em;
|
||||
color: $gray;
|
||||
padding-top: 8px;
|
||||
|
||||
iframe {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: auto -2em;
|
||||
|
||||
img {
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
margin-top: 5px;
|
||||
font-style: italic;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
>p {
|
||||
margin: 0;
|
||||
padding-top: $spacing-unit - 15;
|
||||
padding-bottom: $spacing-unit - 15;
|
||||
}
|
||||
|
||||
ul.task-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
|
||||
li input[type="checkbox"] {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
dl dt {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: $first-font-family;
|
||||
color: $black;
|
||||
font-weight: 700;
|
||||
margin-top: $spacing-unit;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@include relative-font-size(1.75);
|
||||
}
|
||||
|
||||
h2 {
|
||||
@include relative-font-size(1.563);
|
||||
}
|
||||
|
||||
h3 {
|
||||
@include relative-font-size(1.438);
|
||||
border-bottom: 1px solid $light;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
@include relative-font-size(1.188);
|
||||
}
|
||||
|
||||
h5 {
|
||||
@include relative-font-size(1);
|
||||
}
|
||||
|
||||
h6 {
|
||||
@include relative-font-size(0.875);
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
border-bottom: 0;
|
||||
border-style: solid;
|
||||
border-color: $light;
|
||||
}
|
||||
|
||||
.post-nav {
|
||||
font-family: $first-font-family;
|
||||
font-size: $small-font-size;
|
||||
display: flex;
|
||||
position: relative;
|
||||
margin-top: 5em;
|
||||
border-top: 1px solid $light;
|
||||
line-height: 1.4;
|
||||
|
||||
.post-nav-item {
|
||||
border-bottom: 0;
|
||||
font-weight: 800;
|
||||
padding-bottom: 10px;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
h4 {
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
color: $gray;
|
||||
font-size: $small-font-size;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,144 +0,0 @@
|
||||
/**
|
||||
* Post title
|
||||
*/
|
||||
.post-header {
|
||||
.post-title {
|
||||
font-size: $small-font-size;
|
||||
font-weight: 700;
|
||||
margin-bottom: 5px;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Post meta
|
||||
*/
|
||||
.post-meta {
|
||||
color: $grey;
|
||||
font-size: $small-font-size;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
/**
|
||||
* Post content
|
||||
*/
|
||||
.post-content {
|
||||
font-size: $base-font-size;
|
||||
color: $black;
|
||||
line-height: 27px;
|
||||
padding: 5px 0 0 0;
|
||||
|
||||
iframe {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
> p {
|
||||
margin: 0;
|
||||
padding-top: $spacing-unit - 20;
|
||||
padding-bottom: $spacing-unit - 20;
|
||||
}
|
||||
|
||||
ul.task-list {
|
||||
list-style: none;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
li input[type="checkbox"]{
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
dl dt {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: $black;
|
||||
font-weight: 700;
|
||||
margin-top: $spacing-unit;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@include relative-font-size(1.750);
|
||||
|
||||
// Use this media queries like this, if you want responsive font
|
||||
// @include media-query($on-laptop) {
|
||||
// @include relative-font-size(1.75);
|
||||
// }
|
||||
}
|
||||
|
||||
h2 {
|
||||
@include relative-font-size(1.563);
|
||||
}
|
||||
|
||||
h3 {
|
||||
@include relative-font-size(1.438);
|
||||
border-bottom: 1px solid $light;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
@include relative-font-size(1.188);
|
||||
}
|
||||
|
||||
h5 {
|
||||
@include relative-font-size(1);
|
||||
}
|
||||
|
||||
h6 {
|
||||
@include relative-font-size(.875);
|
||||
}
|
||||
|
||||
ul a, ol a
|
||||
{
|
||||
border-bottom: 1px dashed #d2c7c7;
|
||||
&:hover {
|
||||
border-bottom: 2px solid #1635de;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
hr {
|
||||
border-bottom:0;
|
||||
border-style: solid;
|
||||
border-color: $light;
|
||||
}
|
||||
|
||||
.post-nav {
|
||||
display: flex;
|
||||
position: relative;
|
||||
margin-top: 5em;
|
||||
border-top: 1px solid $light;
|
||||
|
||||
.post-nav-item {
|
||||
border-bottom: 0;
|
||||
font-weight: 800;
|
||||
padding-bottom: 10px;
|
||||
&:hover, &:focus {
|
||||
h4 {
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
h4 {
|
||||
color: $grey;
|
||||
font-size: $small-font-size;
|
||||
margin: 0;
|
||||
}
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,36 +1,182 @@
|
||||
/**
|
||||
* Code formatting
|
||||
*/
|
||||
|
||||
code {
|
||||
letter-spacing: .1px;
|
||||
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: $small-font-size;
|
||||
padding: 1px 3px;
|
||||
font-size: 15px;
|
||||
padding: 1px 4px;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
border: 1px solid #d8d8d8;
|
||||
background-color: #f5f5f5;
|
||||
color: #3B454E;
|
||||
background-color: #f6f6f6;
|
||||
border-radius: 2px;
|
||||
font-family: $base-syntax-font;
|
||||
font-family: $syntax-font-family;
|
||||
}
|
||||
|
||||
pre.highlight {
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 5px;
|
||||
padding: 15px;
|
||||
overflow: auto;
|
||||
line-height: 24px;
|
||||
color: #3B454E;
|
||||
font-family: $base-syntax-font;
|
||||
> code {
|
||||
font-size: $small-font-size;
|
||||
padding: 0;
|
||||
margin: 0 calc(51% - 50vw);
|
||||
padding: 25px;
|
||||
line-height: 1;
|
||||
font-family: $syntax-font-family;
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
line-height: 24px;
|
||||
|
||||
>code {
|
||||
width: 100%;
|
||||
max-width: 37rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
line-height: 1.5;
|
||||
display: block;
|
||||
border: 0;
|
||||
font-variant-ligatures: normal;
|
||||
background-color: transparent;
|
||||
font-feature-settings: "calt"1;
|
||||
letter-spacing: .1px;
|
||||
}
|
||||
}
|
||||
|
||||
.highlight table td {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.highlight table pre {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.highlight,
|
||||
.highlight .w {
|
||||
color: #fbf1c7;
|
||||
background-color: #282828;
|
||||
}
|
||||
|
||||
.highlight .err {
|
||||
color: #fb4934;
|
||||
background-color: #282828;
|
||||
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;
|
||||
}
|
||||
@@ -1,39 +1,34 @@
|
||||
// Define defaults for each variable.
|
||||
$base-font-family: "Roboto", sans-serif !default;
|
||||
$base-syntax-font: "Roboto Mono", Hack, monospace;
|
||||
$base-font-size: 16px !default;
|
||||
$first-font-family: "Roboto",
|
||||
sans-serif !default;
|
||||
$second-font-family: "Source Sans Pro",
|
||||
sans-serif !default;
|
||||
$syntax-font-family: "Fira Code",
|
||||
monospace !default;
|
||||
$base-font-size: 19px !default;
|
||||
$medium-font-size: $base-font-size * 0.938 !default;
|
||||
$small-font-size: $base-font-size * 0.875 !default;
|
||||
$base-font-weight: 400 !default;
|
||||
$base-line-height: 1.5 !default;
|
||||
$base-line-height: 1.688 !default;
|
||||
$spacing-unit: 30px !default;
|
||||
|
||||
// Element Color
|
||||
$light: #ececec !default;
|
||||
$grey: #3B454e !default;
|
||||
$neutral: #f9f9f9 !default;
|
||||
$black: #000 !default;
|
||||
// Light Element Color
|
||||
$black: #141414 !default;
|
||||
$white: #fff !default;
|
||||
$base: #f9f9f9 !default;
|
||||
$gray: #283c46 !default;
|
||||
$blue: #0036c7 !default;
|
||||
$blue-light: #d8deff !default;
|
||||
|
||||
$light: #ececec !default;
|
||||
$smoke: #d2c7c7 !default;
|
||||
|
||||
// Width of the content area
|
||||
$content-width: 800px !default;
|
||||
$content-width: 750px !default;
|
||||
|
||||
// State of device
|
||||
$on-palm: 600px !default;
|
||||
$on-mobile: 500px !default;
|
||||
$on-laptop: 780px !default;
|
||||
|
||||
// Use media queries like this:
|
||||
|
||||
// @include media-query($on-palm) {
|
||||
// .wrapper {
|
||||
// padding-right: $spacing-unit / 2;
|
||||
// padding-left: $spacing-unit / 2;
|
||||
// }
|
||||
// }
|
||||
$on-mobile: 768px;
|
||||
$on-tablet: 769px;
|
||||
$on-desktop: 1024px;
|
||||
$on-widescreen: 1152px;
|
||||
|
||||
@mixin media-query($device) {
|
||||
@media screen and (max-width: $device) {
|
||||
@@ -46,10 +41,8 @@ $on-laptop: 780px !default;
|
||||
}
|
||||
|
||||
// Import Sass partials
|
||||
@import
|
||||
"bangsring/fonts",
|
||||
@import "bangsring/fonts",
|
||||
"bangsring/base",
|
||||
"bangsring/post",
|
||||
"bangsring/layout",
|
||||
"bangsring/syntax"
|
||||
;
|
||||
"bangsring/page",
|
||||
"bangsring/syntax";
|
||||
32
about.md
32
about.md
@@ -1,25 +1,21 @@
|
||||
---
|
||||
title: About bangsring theme
|
||||
title: Colophon
|
||||
permalink: /about/
|
||||
excerpt: this is for page description
|
||||
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
|
||||
---
|
||||
Website ini untuk mendokumentasikan 🎒 petualangan saya didunia pemprograman, Blog ini berjalan menggunakan jekyllrb.com, yang dihosting melalui netlify.com dan menggunakan tema [Bangsring](http://github.com/piharpi/bangsring) terdapat beberapa progress untuk blog ini :
|
||||
|
||||
- [ ] Social link icon.
|
||||
- [ ] Night mode Theme.
|
||||
- [ ] Nambahin HTML microdata.
|
||||
- [ ] Rapihin file ``.scss``.
|
||||
- [ ] ``<h1>`` - ``<h6>`` anchor hover.
|
||||
- [ ] Tags.
|
||||
<!-- flexible image layouts = menyesuaikan tata letak gambar sendiri jika banyak gambar yang di upload -->
|
||||
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](http://github.com/piharpi/bangsring) simple theme.
|
||||
|
||||
Silahkan melapor jika terdapat kesalahan diblog ini melalui **[issue](https://github.com/piharpi/me/issues/new?template=bug_report.md)** github.
|
||||
Day to day use Ruby, Javascript and doing fun with HTML/CSS, Ruby on Rails is my fav framework right now, i also willingness to learn another web technology; but i often forgot 🌚. If you have a question about me or else, letter to me.
|
||||
|
||||
### 🎈 Find me
|
||||
- github.com/**piharpi**
|
||||
- telegram.com/**piharpi**
|
||||
- twitter.com/**piharpi**
|
||||
- , an image to avoid **spam!**
|
||||
You can **[report](https://github.com/piharpi/me/issues/new?template=bug_report.md)** if there is an broken link(s) or somethings else.
|
||||
|
||||
##### Credits:
|
||||
- Mountain Nature icon by [Pondok Multimedia](https://iconscout.com/icon/nature-153).
|
||||
_22 August 2019, Harpi_
|
||||
|
||||
### Further information
|
||||
|
||||
- [resume](<javascript::void(0)>) _(soon)_
|
||||
- justharpi[at]gmail[dot]com
|
||||
- github.com/piharpi
|
||||
|
||||
BIN
assets/img/avatar.jpg
Normal file
BIN
assets/img/avatar.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 102 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 244 KiB |
BIN
assets/img/posts/p1070511.jpg
Normal file
BIN
assets/img/posts/p1070511.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 261 KiB |
BIN
assets/img/posts/photo-1556075798-4825dfaaf498_ixlib=rb-1.2.jpg
Normal file
BIN
assets/img/posts/photo-1556075798-4825dfaaf498_ixlib=rb-1.2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 121 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 47 KiB |
@@ -14,6 +14,8 @@ Gem::Specification.new do |spec|
|
||||
|
||||
spec.add_runtime_dependency "jekyll", "~> 3.8"
|
||||
|
||||
spec.add_development_dependency "bundler", "~> 1.16"
|
||||
spec.add_development_dependency "rake", "~> 12.0"
|
||||
spec.add_development_dependency "jekyll-feed", "~> 0.11.0"
|
||||
spec.add_development_dependency "jekyll-sitemap"
|
||||
|
||||
spec.add_development_dependency "bundler"
|
||||
end
|
||||
|
||||
6
blog.md
6
blog.md
@@ -1,6 +0,0 @@
|
||||
---
|
||||
title: Blog posts
|
||||
permalink: /blog/
|
||||
layout: page
|
||||
excerpt: this is for page description
|
||||
---
|
||||
BIN
favicon.ico
BIN
favicon.ico
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
18
tags.md
18
tags.md
@@ -2,5 +2,21 @@
|
||||
title: Tags
|
||||
permalink: /tags/
|
||||
layout: page
|
||||
excerpt: this is for page description
|
||||
excerpt: Sorted article by tags.
|
||||
---
|
||||
|
||||
{% for tag in site.tags %} {% capture name %}{{ tag | first }}{% endcapture %}
|
||||
|
||||
<h4 class="post-header" id="{{ name | downcase | slugify }}">
|
||||
{{ name }}
|
||||
</h4>
|
||||
{% for post in site.tags[name] %}
|
||||
<article class="posts">
|
||||
<span class="posts-date">{{ post.date | date: "%b %d" }}</span>
|
||||
<header class="posts-header">
|
||||
<h4 class="posts-title">
|
||||
<a href="{{ post.url }}">{{ post.title | escape }}</a>
|
||||
</h4>
|
||||
</header>
|
||||
</article>
|
||||
{% endfor %} {% endfor %}
|
||||
|
||||
17
thanks.md
Normal file
17
thanks.md
Normal file
@@ -0,0 +1,17 @@
|
||||
---
|
||||
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
|
||||
---
|
||||
|
||||
Bismillahirrahmanirrahim, this page for 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.
|
||||
|
||||
<hr>
|
||||
Thanks to my parent, whole teacher, and friends who always supporting me, and special thanks to :
|
||||
|
||||
- Mrs. [Irez](<javacript:void(0);>) my teacher at vocational school who always suport me, have owe on she.
|
||||
- <a href="https://et.mk/me" target="_blank">Tama</a> a guy inspiring me to made english content on this site.
|
||||
|
||||
Hopefully the knowledge that I got from them can be useful, and become a charity for them, Aamiin.
|
||||
Reference in New Issue
Block a user