Replace jekyll with org-publish

This commit is contained in:
Sameer Rahmani 2021-02-09 22:07:27 +00:00
parent 9b582197ff
commit f72707fc4b
102 changed files with 2042 additions and 6846 deletions

2
.gitignore vendored
View File

@ -3,3 +3,5 @@ _site
.jekyll-metadata
_tmp/
*~
.cask/
*.elc

17
Cask Normal file
View File

@ -0,0 +1,17 @@
(source gnu)
(source melpa)
(package-file "build.el")
(development
(depends-on "f")
(depends-on "ecukes")
(depends-on "ert-runner")
(depends-on "el-mock"))
(depends-on "mustache")
(depends-on "ht")
(depends-on "org")
(depends-on "ox-publish")
(depends-on "htmlize")
(depends-on "dracula-theme")

30
Gemfile
View File

@ -1,30 +0,0 @@
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.5"
# 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.6"
end
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem "tzinfo-data", platforms: [:mingw, :mswin, :x64_mingw, :jruby]
# Performance-booster for watching directories on Windows
gem "wdm", "~> 0.1.0" if Gem.win_platform?
gem 'jekyll-seo-tag'
gem 'jekyll-sitemap'
gem 'sass'

View File

@ -1,74 +0,0 @@
GEM
remote: https://rubygems.org/
specs:
addressable (2.6.0)
public_suffix (>= 2.0.2, < 4.0)
colorator (1.1.0)
concurrent-ruby (1.1.4)
em-websocket (0.5.1)
eventmachine (>= 0.12.9)
http_parser.rb (~> 0.6.0)
eventmachine (1.2.7)
ffi (1.10.0)
forwardable-extended (2.6.0)
http_parser.rb (0.6.0)
i18n (0.9.5)
concurrent-ruby (~> 1.0)
jekyll (3.8.5)
addressable (~> 2.4)
colorator (~> 1.0)
em-websocket (~> 0.5)
i18n (~> 0.7)
jekyll-sass-converter (~> 1.0)
jekyll-watch (~> 2.0)
kramdown (~> 1.14)
liquid (~> 4.0)
mercenary (~> 0.3.3)
pathutil (~> 0.9)
rouge (>= 1.7, < 4)
safe_yaml (~> 1.0)
jekyll-feed (0.11.0)
jekyll (~> 3.3)
jekyll-sass-converter (1.5.2)
sass (~> 3.4)
jekyll-seo-tag (2.5.0)
jekyll (~> 3.3)
jekyll-sitemap (1.2.0)
jekyll (~> 3.3)
jekyll-watch (2.1.2)
listen (~> 3.0)
kramdown (1.17.0)
liquid (4.0.1)
listen (3.1.5)
rb-fsevent (~> 0.9, >= 0.9.4)
rb-inotify (~> 0.9, >= 0.9.7)
ruby_dep (~> 1.2)
mercenary (0.3.6)
pathutil (0.16.2)
forwardable-extended (~> 2.6)
public_suffix (3.0.3)
rb-fsevent (0.10.3)
rb-inotify (0.10.0)
ffi (~> 1.0)
rouge (3.3.0)
ruby_dep (1.5.0)
safe_yaml (1.0.5)
sass (3.7.3)
sass-listen (~> 4.0.0)
sass-listen (4.0.0)
rb-fsevent (~> 0.9, >= 0.9.4)
rb-inotify (~> 0.9, >= 0.9.7)
PLATFORMS
ruby
DEPENDENCIES
jekyll (~> 3.8.5)
jekyll-feed (~> 0.6)
jekyll-seo-tag
jekyll-sitemap
sass
tzinfo-data
BUNDLED WITH
2.0.1

13
Makefile Normal file
View File

@ -0,0 +1,13 @@
clean:
rm -rf build
rm -rf `find . -iname "*~"`
dev-build:
./build.el
build:
LXHOME_PROD=t ./build.el
serve: build
npx http-server -p 3003 ./build

View File

@ -1,2 +0,0 @@
# LxHome
My personal website and blog. Posts are licensed under CC and code is published under MIT license.

View File

@ -1,71 +0,0 @@
# Welcome to Jekyll!
#
# This config file is meant for settings that affect your whole blog, values
# which you are expected to set up once and rarely edit after that. If you find
# yourself editing this file very often, consider using Jekyll's data files
# feature for the data you need to update frequently.
#
# For technical reasons, this file is *NOT* reloaded automatically when you use
# 'bundle exec jekyll serve'. If you change this file, please restart the server process.
# Site settings
# These are used to personalize your new site. If you look in the HTML files,
# you will see them accessed via {{ site.title }}, {{ site.email }}, and so on.
# You can create any custom variable you would like, and they will be accessible
# in the templates via {{ site.myvariable }}.
title: lxsameer's nest
email: lxsameer@gnu.org
author: lxsameer
description: >- # this means to ignore newlines until "baseurl:"
lxsameer's view of the world
baseurl: "" # the subpath of your site, e.g. /blog
url: "https://lxsameer.com" # the base hostname & protocol for your site, e.g. http://example.com
twitter_username: lxsameer
github_username: lxsameer
twitter:
username: lxsameer
card: summary
social:
name: lxsameer
links:
- https://twitter.com/lxsameer
- https://www.linkedin.com/in/lxsameer
- https://github.com/lxsameer
permalink: /:categories/:title/
# Build settings
markdown: kramdown
plugins:
- jekyll-feed
- jekyll-sitemap
- jekyll-seo-tag
# Exclude from processing.
# The following items will not be processed, by default. Create a custom list
# to override the default setting.
# exclude:
# - Gemfile
# - Gemfile.lock
# - node_modules
# - vendor/bundle/
# - vendor/cache/
# - vendor/gems/
# - vendor/ruby/
sass:
sass_dir: _sass
collections:
category:
output: true
defaults:
-
scope:
path: ""
type: category
values:
layout: "category"

View File

@ -1,123 +0,0 @@
---
layout: post
title: "Multi-Version Concurrency Control"
date: 2019-04-28
categories: DB
tags: concurrency
theme: dark
---
Multi version concurrency control or **MVCC** for short is a famous and commonly used concurrency
control methods in [DBMS](https://en.wikipedia.org/wiki/Database#Database_management_system)s
and some programming languages (for [Transactional Memory](https://en.wikipedia.org/wiki/Transactional_memory)).
Like lots of other concepts and algorithms in computer science it is old (introduced in 70s).
Before we start I presume you are familiar with
[transaction processing](https://en.wikipedia.org/wiki/Transaction_processing). Also as an heads up, Since
MVCC is a huge topic and far beyond a blog post, I'll split this topic into several posts. In this post
we're going to have an overview of MVCC.
## What is Concurrency Control ?
Concurrency control is the procedure in data oriented systems such as a DBMS or a programming language for managing
simultaneous operations without conflicting with each another. Concurrent access is quite easy if all everyone
wants to just read data. In a read only environment there is no way that read operations can interfere with one
another. But the purpose of every system in this world is to process some data and make changes to the world. Write
operations are important part of each system and concurrency controll is all about handling simultaneous write
operations in a conflict free way.
**MVCC** is one of the most popular and widely used concurrency control methods. For more on concurrency control
checkout [this wikipedia page](https://en.wikipedia.org/wiki/Concurrency_control)
## MVCC
According to MVCC, the system (DBMS or a programming language) maintains multiple physical versions of a single
logical object (any thing under the control of the system, either a tuple in relational DBMSs or some data
in memory controlled by a programming language ) in the system:
* When a transaction writes to an object, the system creates a new version of that object.
* When a transaction reads an object, it reads the newest version that existed when the transaction started.
We'll see how MVCC works in a minute but let's discuss why to use MVCC ?
There are lots of benefits to using MVCC as the concurrency control method but some of the main benefits
are:
* Writes don't block readers:
With MVCC write operations can be done in a way which no reader would get blocked by the write operation
which is the case in [Two Phase Locking](https://en.wikipedia.org/wiki/Two-phase_locking)
* Lock free read operations via consistent snapshots:
Read only transactions don't have to acquire a lock anymore because they will provided by a snapshot
of the current state of the system to operate on.
* Time Traveling Operations:
With storing all the versions of an object in the system, we easily can operate on a specific version
of an object for a given time. For example in the case of DBMS, we can run a query against the state
of the database from 2 years ago.
MVCC useful not just for concurrency control. It can shine when it comes to multi version data control
as well.
## Snapshot Isolation (SI)
In order to understand how MVCC works, first we need to know about snapshot isolation (SI). MVCC and
SI have a two way relationship. By two way relationship I mean, In order to implement MVCC we need
to implement SI and if we want to have SI in our system we need to have MVCC as well (does it make sense?).
Basically when a transaction starts, the system provides the transaction with a consistent
snapshot of the current state of system. By current, I mean the exact state of the system just before
the transaction started and by consistent I mean, the snapshot would not contain any uncommited data
from a running transaction. So If in any given time transaction T1 is running and T2 is about to start,
the system would not include T1 changes in the snapshot which is going to be used for T2. Simple as that.
This way we would not end up with torn writes (for example when a writes operation which is supposed to
write two objects in the state, writes only the first one) from any running transaction.
Also the important rule here is that if two transactions want to update the same object the first one
will wins and the second one has to retry.
Snapshots might be physical or logical. Depends on the system. For example in a DBMS it does not make
sense to copy the database state to each transaction (physical snapshot) because obviously it would be
huge. Instead it use logical snapshots which using the same physical data. But in a programming language,
it might be much faster to just use a physical snapshot of some data in memory instead of handling the overhead
of the necessary book keeping for a logical snapshot.
It's important to bear in mind that SI is not serializable isolation by default. If you need to implement
serializable isolation for the snapshots in your system you have to take care of some extra stuff.
## Design of MVCC
In order to implement MVCC in a system we need to decide between different aspects of the system
which would be involved with MVCC. The most crucial aspects are:
* Book keeping of data we need to store
* Concurrency control protocol
* Index Management
* Garbage Collection
* Storage
### Data book keeping
Depends on the concurrency control protocol we want to use, we have to manage some extra data about
every object in our system. In general we need to keep track of the following information about each
object:
* Transaction ID (`TxID`)
* Life time of each object:
* When the transaction that operate on this object began: `BEGIN-TS`
* When the transaction that operate on this object ended: `END-TS`
* A link to the previous/next versions of the same object
And some other information depends on the protocol we use for concurrency control. It's crucial to
decide who to manage and store these data in your system and it's totally depends on the nature of
your system. Is it a disk oriented, single node databse management system ? is it a programming
language operating on a single threaded environment ? or maybe it's an in-memory, distributed
database management system ?
Whatever it is you have to keep in mind that computer science is about tradeoffs. There is no
ultimate answer. For example storing these kind of data along side with the object it self can
increase your storage usage but can save you lots of computation time. It can be wise to do it
in a DBMS but not in a programming language to implement STM.
### Concurrency control protocols for MVCC
* Mutli Version Timestamp Ordering (MTVO)
* The "Optimistic Concurrency Control" (MVOCC)
* Multi Version 2 Phase Locking (MV2PL)
* Serializable Snapshot Isolation (SSI)

View File

@ -1,80 +0,0 @@
<section class="section">
<div class="container">
<div class="level">
<a class="navlink" href="https://gitlab.com/lxsameer">
<div class="level-item">
</div>
</a>
<a class="navlink" href="/feed.xml">
<div class="level-item">
<span class="icon is-large">
<i class="fas fa-rss fa-lg"></i>
</span>
</div>
</a>
{% if page.url != "/" %}
<a class="level-item" href="/">
<div class="column">
<span class="icon is-large">
<i class="fas fa-home fa-lg"></i>
</span>
</div>
</a>
{% endif %}
<!-- {% if page.url != "/gpg.html" %}
<div class="column navlink">
<a class="" href="/gpg.html">
<span class="icon is-large">
<i class="fas fa-key fa-lg"></i>
</span>
</a>
</div>
{% endif %} -->
{% if page.url != "/blog/" %}
<a class="navlink" href="/blog/">
<div class="level-item">
<span class="icon is-large">
<i class="fas fa-blog fa-lg"></i>
</span>
</div>
</a>
{% endif %}
<a class="navlink" href="https://www.linkedin.com/in/lxsameer/">
<div class="level-item">
<span class="icon is-large">
<i class="fab fa-linkedin fa-lg"></i>
</span>
</div>
</a>
<a class="navlink" href="https://twitter.com/lxsameer">
<div class="level-item">
<span class="icon is-large">
<i class="fab fa-twitter fa-lg"></i>
</span>
</div>
</a>
</div>
</div>
</section>

View File

@ -1,25 +0,0 @@
---
layout: default
theme: dark
---
<div class="columns is-flex centered">
<div class="column is-half">
<h2>Posts on: {{ page.title }}</h2>
{% unless page.content == '' %}
<p>{{ page.content }}</p>
{% endunless %}
{% for post in site.categories[page.category] %}
<div class="post-preview">
<a href="{{ post.url | prepend: site.baseurl }}">
<h2 class="post-title is-size-2">
{{ post.title }}
</h2>
</a>
</div>
{% endfor %}
</div>
</div>

View File

@ -1,124 +0,0 @@
<!DOCTYPE html>
<html class="{% if page.theme %}{{page.theme }}{% else %}light{% endif %}">
<head>
<meta charset="UTF-8" />
<meta name="theme-color" content="#49438B" />
{% seo %}
<link href="/assets/styles/web.css?1" rel="stylesheet" />
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
crossorigin="anonymous"
/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body class="{% if page.theme %}{{page.theme }}{% else %}light{% endif %}">
<nav
class="navbar is-primary"
role="navigation"
aria-label="main navigation"
>
<div class="container">
<div class="navbar-brand">
<a
role="button"
class="navbar-burger burger"
aria-label="menu"
aria-expanded="false"
data-target="navcontainer"
>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navcontainer" class="navbar-menu">
<div class="navbar-start">
<a href="/" class="navbar-item {% if page.url == '/' %}is-active{% endif %}">
Home
</a>
<a href="/code-of-honor/" class="navbar-item {% if page.url == '/code-of-honor/' %}is-active{% endif %}">
Code of Honor
</a>
<a href="https://dl.lxsameer.com/lxsameer.pub.gpg" class="navbar-item">
GPG Key
</a>
<a href="/about/" class="navbar-item {% if page.url == '/about/' %}is-active{% endif %}">
About Me
</a>
</div>
<div class="navbar-end">
<a class="navbar-item" href="https://gitlab.com/lxsameer">
<span class="icon is-large is-hidden-mobile">
<i class="fab fa-gitlab fa-lg"></i>
</span>
<span class="is-large is-hidden-desktop">
<i class="pad fab fa-gitlab fa-lg"></i>
Gitlab
</span>
</a>
<a class="navbar-item" href="https://social.lxsameer.com/">
<span class="icon is-large is-hidden-mobile">
<i class="fab fa-mastodon fa-lg"></i>
</span>
<span class="is-large is-hidden-desktop">
<i class="pad fab fa-mastodon fa-lg"></i>
ActivityPub
</span>
</a>
<a class="navbar-item" href="https://www.linkedin.com/in/lxsameer/">
<span class="icon is-large is-hidden-mobile">
<i class="fab fa-linkedin fa-lg"></i>
</span>
<span class="is-large is-hidden-desktop">
<i class="pad fab fa-linkedin fa-lg"></i>
Linkedin
</span>
</a>
<a class="navbar-item" href="https://twitter.com/lxsameer">
<span class="icon is-large is-hidden-mobile">
<i class="fab fa-twitter fa-lg"></i>
</span>
<span class="is-large is-hidden-desktop">
<i class="pad fab fa-twitter fa-lg"></i>
Twitter
</span>
</a>
<a class="navbar-item" href="/feed.xml">
<span class="icon is-large is-hidden-mobile">
<i class="fas fa-rss fa-lg"></i>
</span>
<span class="is-large is-hidden-desktop">
<i class="pad fas fa-rss fa-lg"></i>
RSS Feed
</span>
</a>
</div>
</div>
</div>
</nav>
<div class="container">
{{ content }}
</div>
<footer class="footer">
<div class="content has-text-centered">
<p>© 2010-2020 Sameer Rahmani</p>
</div>
</footer>
<script src="/assets/js/main.js?1"></script>
</body>
</html>

View File

@ -1,50 +0,0 @@
---
layout: default
---
<div class="column is-half-desktop is-offset-one-quarter-desktop para">
<section class="section is-size-4-desktop is-size-5-mobile">
<p class="text-centered">
<img
class="avatar is-rounded"
alt="lxsameer"
src="/assets/images/avatar.jpg"
/>
</p>
<p class="info text-justified">
Hi! I'm <b>Sameer</b> and I usually write about
technology and software development (hmmm more like nagging instead of writing). Since
I'm lazy, my posts are short so I can write more often.
<!-- <p class="info text-justified"> -->
<!-- If you have any comment on the articles or anything in general either send me an -->
<!-- email for connect to me via my <a class="home" href="https://activitypub.rocks/">activity pub</a> -->
<!-- feed on <a class="home" href="https://social.lxsameer.com">lxsameer@social.lxsameer.com</a>. -->
</p>
</p>
</section>
</div>
<div class="column is-half-desktop is-offset-one-quarter-desktop">
<section class="section">
<h3 class="header is-size-4">
Blog Posts:
</h3>
{% for post in site.posts %}
<div class="columns">
<div class="column">
<h2 class="is-size-3-desktop is-size-4-mobile">
<a class="post-title-link" href="{{ post.url }}">
<i class="fas fa-link"></i> {{ post.title }}
</a>
</h2>
</div>
</div>
{% endfor %}
</section>
</div>

View File

@ -1,13 +0,0 @@
---
layout: default
theme: light
---
<div class="column is-half-desktop is-offset-one-quarter-desktop">
<h1 class="is-size-1">
{{page.title}}
</h1>
<content class="post">
{{ content }}
</content>
</div>

View File

@ -1,69 +0,0 @@
---
layout: default
theme: dark
---
<div class="column is-half-desktop is-offset-one-quarter-desktop">
<h1 class="is-size-2">
{{page.title}}
</h1>
<div class="columns">
<div class="column">
<ul class="details is-size-7">
<li>{{page.date | date_to_string }} |</li>
{% for tag in page.tags %}
<li class="">#{{ tag | capitalize }}</li>
{% endfor %}
{% for tag in page.categories %}
<li class="category">
#{{ tag | capitalize }}
</li>
{% endfor %}
</ul>
</div>
<div class="column">
</div>
</div>
<content class="post">
{{ content }}
</content>
<div class="share-page">
<div class="columns is-flex right-aligned">
<a href="https://twitter.com/intent/tweet?text={{ page.title }}&url={{ site.url }}{{ page.url }}&via={{ site.twitter_username }}&related={{ site.twitter_username }}" rel="nofollow" target="_blank" title="Share on Twitter">
<div class="column">
<span class="icon is-large">
<i class="fab fa-twitter fa-lg"></i>
</span>
</div>
</a>
<a href="http://www.linkedin.com/shareArticle?mini=true&url={{page.url}}&title={{page.title}}&summary={{page.description}}&source={{site.url}}" rel="nofollow" target="_blank" title="Share on LinkedIn">
<div class="column">
<span class="icon is-large">
<i class="fab fa-linkedin fa-lg"></i>
</span>
</div>
</a>
<a href="https://plus.google.com/share?url={{ site.url }}{{ page.url }}" rel="nofollow" target="_blank" title="Share on Google+">
<div class="column">
<span class="icon is-large">
<i class="fab fa-google fa-lg"></i>
</span>
</div>
</a>
</div>
</div>
</div>
<div class="columns is-flex centered">
<div class="column is-half-desktop has-text-centered">
</div>
</div>

View File

@ -1,11 +0,0 @@
---
layout: post
title: "I moved from Github to Gitlab"
date: 2018-11-02
categories: Announcements
tags: gitlab
theme: dark
---
As soon as I hear about Micro$oft acquiring Github I decided to migrate to Gitlab. My guts tells me to do not trust a corporation behind the [Halloween document](https://en.wikipedia.org/wiki/Halloween_documents). Micro$oft might be a different company these days but their history is enough to not to trust them. Even if they are different and have no bad intentions, but still acquiring company such as Github means that the very first thing they will do is to integrate Github with their own services and that is enough for me to move.
In the other hand Gitlab is a free software with tons of feature like built-in CI and docker registry and other cool stuff. I totally recommend Gitlab as a better alternative to Github.

View File

@ -1,118 +0,0 @@
---
layout: post
title: "Transaction Variants"
date: 2019-04-26
categories: DB
tags: transaction
theme: dark
---
In this post I want to talk about different variants of
[database transactions](https://en.wikipedia.org/wiki/Database_transaction), I assume you already
know about database transactions. So, let's cut to the chase.
## Flat Transaction
Flat transaction are those regular transactions we know about and are the most common transactions
in the [DBMS](https://en.wikipedia.org/wiki/Database#Database_management_system)s.
Flat transactions are simple but they can not address two problems:
* Multi stage transactions
For example, Let's say we want to book flight from City C1 to C2. Since there is no direct fly we
have to book 4 flights from, `C1 -> CA -> CB -> C2`. The process of booking each of these flights
is a transaction by itself and the whole process is a transaction too.
* Bulk updates
Let's say we want to update billion tuples. What if the very last tuple fails to update and cause
the transaction to abort. Then we need to revert the changes made by the transaction and revert
a billion tuples which obviously is a huge task.
## Transaction Savepoints
These transactions are similar to flat transaction with addition of one extra thing which is
save points. So any where in there transaction users case ask for a save point and again they can
rollback to a save point or rollback the entire transaction.
```sql
BEGIN
READ(A)
WRITE(A)
SAVEPOINT 1
WRITE(B)
SAVEPOINT 2
ROLLBACK TO 1
COMMIT
```
Note: **These transactions only solve the multi stage transaction problem.**
## Nested transactions
Nested transactions are similar to save points transactions, but instead save points these
transactions break down to smaller flat transactions. Each transaction commits separately from
other transactions. But result of the parent transaction rule them all, so if the parent
transaction fails all the nested transactions have to rollback.
```sql
BEGIN
BEGIN T1
...
COMMIT T1
BEGIN T2
...
COMMIT T2
COMMIT
```
Note: **These transactions only solve the multi stage transaction problem.**
## Chained transactions
In these kind of transactions, smaller flat transaction can be applied in a chain in the way that
the result of each of them is not visible to the outside world until the end of the chain.
In theory chained transactions should be applied in sequence but in practice in some cases we can
interleave their operations. Also Between T1 and T2 of a chained transaction, No other thread of
code shouldn't be able to make changes to those resources which T2 will operates on.
If any transaction in the chain fails, it has nothing to do with the previous transactions in the
chain. For example:
```
T1 -> T2 -> T3
S -> S -> F
```
In the chained transaction above only T3 failed and T1 and T2 are successfully committed to storage.
We don't have to roll them back.
While chained transactions can break big transactions into smaller pieces for better parallelism but
**they only solve the multi stage transaction problem** Not the bulk update problem.
## Compensating transactions
This type of transactions are special transactions which are designed to semantically reverse the
effect of another transaction which already committed.
One important thing to remember about compensating transactions is that they know how to revert
the *logical* effect of other transactions *NOT the physical* effect. For example, If a transaction
increase a counter by one. The physical revert would be to changes the binary data that inserted
for that counter to what it was before the transaction, but the logical revert would be to
decrease the counter by one when needed.
So basically these kind of transactions know about how to put the database in correct state before
the other transaction.
## Saga Transactions
A saga transaction is a sequence of chained transactions `T1 - Tn` and compensating transaction
`C1 - C(n-1)` where the following guaranteed:
* The transactions will commit in the order `T1...Tj`, `Cj...C1` (where `j < n`).
So basically this means that a saga transaction is a seq of chained transactions which applies the
smaller transactions in order with their corresponding compensating transactions.
In a chained transaction when ever transaction Tn aborts, the transactions before Tn stay committed,
but in saga transactions they will be rollback using compensating transactions that know how to
roll them back *logically*.
So Saga transactions can be fix both multi-staging and bulk update problems. But the issue here is
that the compensating transactions are something that requires application level understanding of
the use case so most of the time they are implemented in the application frameworks instead of DBMSs.

View File

@ -1,50 +0,0 @@
---
layout: post
title: "My new programming language"
date: 2019-11-25
categories: Programming
tags: Serene language
theme: dark
---
As a software engineer, one of my joys in life is to learn new things. I can't describe the
pleasure of learning a new technology or stepping forward in the world of science. If you experienced
such a delight, you would know that how addictive it is. I can't satisfy my hunger for knowledge and
it might sounds like a gloat but it's truly joyful (ok mate, you love to "read", get on with it).
Programming languages are the most common tool among programmers and software engineers (Duh!).
I believe that learning new programming languages helps us to widen our vision as engineers and
help us improve our mentality about software architecture and design. So clearly I never say "No"
to learning a new programming language and because of that I have lots of experience with different
languages. Each language taught me tons of new things and helped me enhance my skills. I've studied
many languages and have a long list of them as my "To Learn" list.
Approximately a year ago, I was frustrated with Python and nagging to my wife about it (She always listens to
my gibberish). All of a sudden she suggested to me that "Why don't you write your own programming language ?".
That got me thinking, "Is it a good idea to do so ????".
People have different routines for learning. I'm one of those people who likes to learn new
things by understanding how it works first. I'd like to start my learning process by understanding
the laws of the universe. In this case, "universe" is the implementation and theory behind
the thing I'm trying to learn. It might seem like crazy idea but that's how I learn better.
For instance, when I was a teenager and was learning about how to use Gnu/Linux, I was so
obsessed with internal of a Linux distribution to a degree that I decided to build my own
distribution. Of course as a teenager I was naive and dreamed about my distro ( Which I used
to call Liniera ) to become a well-known and popular distribution. Aside from my childhood dreams
I learned a lot by creating a distribution. Learned about Linux kernel, boot process, bootloaders
and tons of other complicated pieces that normally people don't get to know at first (I was using
LFS and Debian tools). So after that delightful but tough experience, I always try to build a minimal
prototype of whatever I'm trying to learn to comprehend the universe of that thing which
helped me a lot to this day.
Based on my history, routines and the question that my wife has planted in my mind and after about a year
researching and thinking about it, Finally I realized it can be a good idea to create a new
programming language. To be honest it is not a task to be taken lightly. Whenever I created something
that wasn't out of my needs, I just failed. But this time I think creating a programming language can
massively help me to gain a better grasp of "the universe". Trying to overcome this challenge will help
me to grow and be a better engineer despite the fact that this new language may not even make it to the
list of known programming languages. I'm fine with that as long as it pushes me a step forward in my way
of life and brings me joy of wondering around in the world of science and engineering.
I'm going to write more blog posts about my journey through this humongous task as a journal for myself and other
enthusiastic people. After all it will be a hobby of mine and not my day to day job. So I'll take my time and
move slowly but steady.

View File

@ -1,58 +0,0 @@
---
layout: post
title: "Step 1: Rational (take one) and a name"
date: 2019-12-01
categories: Programming
tags: Serene language
theme: dark
---
**This post is a draft and I'll finish it gradually**
As I mentioned in [My new programming language](/programming/my-new-programming-language/),
I'm creating a new programming language. I'll try to pick up good points
of different programming languages and avoid the cons of them. One of the
most important aspects of any project is to have a rational for it.
It's what I learned from [Clojure](http://clojure.org)'s culture. Rationals
are a big deal in any clojure developers world. As fan I'd like to start
my new programming language by writing down the rational of what I'm trying
to achieve.
### Rational(Take 1) and goals
So far, the main reason to create a new language for me is to **learn more and
educate myself**. But it doesn't mean that I'm aiming for a toy language. I want
to create a general purpose language that solves some problems. Here is a list of
reasons that made me consider the idea of creating a new language (in no specific order):
#### Lisp is superior
I think the world needs more and more dialects of Lisp. It's the second oldest
programming language in the world and as far as I know the oldest one that is
still active. **Lisp** is elegant and amazing, but unfortunately not so many
programmers know about it. Even most of the those people who heard the name
are distracted by the "parenthesis". But they're missing the fact that there
is a good reason for all those parenthesis. Lisp is the simplest language I
know, its programs are written in its own datatypes. How simple is that???
You might hear that
[God has created the universe in Lisp](https://twobithistory.org/2018/10/14/lisp.html).
Lisp is amazing and I consider a programmer who has understood **the Lisp way**, the
[luckiest](https://twitter.com/lxsameer/status/1172220581992980480).
I'd my new language to be Lisp, because just being a Lisp brings a huge deal to the
table.
#### Simplicity
#### FP is the future
#### Development process
#### Better core development
#### Built-in Concurrency and parallelism
### A Name
If you're a programmer, I'm pretty sure that you already experienced the terror
of trying to find a name for your project. Frankly, It's even hard to find a good
name for your variable.
After about 10 days of searching finally my wife came up with a good name. **Serene**.
Calm and peaceful. I like it. It's simple and beautiful with a great meaning.
I can't wait to start working on it. :P

View File

@ -1,186 +0,0 @@
---
layout: post
title: "Choosing the right platform"
date: 2019-12-07
categories: Programming
tags: Serene language
theme: dark
---
After wrapping my head around the [rational](/programming/rational-and-a-name/) of
[My new programming language](/programming/my-new-programming-language/), I have
a big decision to make. Choose a platform.
As programmers, we have a tough life when it comes to making a decision that
has direct impact on our product. I'm pretty sure you went through this process
at least once. From choosing a semantically great name for a variable to choosing
a right technology for your next billion dollar startup. It is always hard to
pick a tech stack for a new project. Especially when the new product happens to be
a new programming language. If I get my hands dirty with a wrong tech stack for
a simple web application, no big deal. I still can rewrite the whole thing and
pay a penalty. But in the case of programming languages that's not the case. Wrong
platform can easily destroy you. From the dawn of computers, many smart people
created tons of languages. But only few of them made it to the top. While there
are so many reasons for their success, going with the right platform is one
the most important ones.
The obvious question that comes to mind when we're talking about "The platform"
is, should we build a platform from scratch or should we piggyback on others?
Creating a programming language and a virtual machine from scratch is gigantic and
bone crushing task. It needs a crazy set of skills and knowledge. Even with such
wisdom and experience people who went through it has made many mistakes and had to
constantly iterate to come up with the right implementation. The evolution of
programming languages such as [Scheme](https://en.wikipedia.org/wiki/Scheme_%28programming_language%29)
is a good example of it (for more information take a look at [R6RS](http://www.r6rs.org/)).
Building a VM is hard and Building a fast VM is even harder. While I think creating
a programming language and a VM from scratch is really fun, but it can be really
frustrating as well. I don't want to get annoyed with myself during the process and
abandon my goal. I should ride on the shoulders of the giants to gain benefit from
their great work. I should choose a platform that helps me to move faster and iterate
through different ideas quicker.
From a technical perspective, Starting from scratch means that I have to write a
program that includes at least a parser and a compiler. Building a compiler
is no joke. Hypothetically let's say we have a working compiler and parser, What
about use libraries and ecosystem ?? It would be really hard to convince people
to use a programming language that does not have any useful library and they have
to build everything by themselves. It might have been the case 30 years ago but
it is not the case in the modern age of programming languages anymore.
So the idea of creating [Serene](https://serene-lang.org) from scratch is out of
the picture. We need to find a good platform for it. But what are the options ???
## Racket
> Racket is a general-purpose programming language as well as the worlds first ecosystem
> for language-oriented programming. Make your dream language, or use one of the dozens
> already available.
[Racket](http://racket-lang.org) is a dialect of Lisp which allows us to build our own
language by extending it. While Racket is really cool and have a long list of pros and
[many reasons why to use it](https://beautifulracket.com/appendix/why-racket-why-lisp.html)
(It's Lisp after all), it has the disadvantage that forced me to stop thinking about it
for **Serene**. As I mentioned in the [rational](/programming/rational-and-a-name/)
I'm not trying to build a toy language or a domain specific one and Racket's ecosystem
isn't as great as a battle tested and well-known ecosystem like Java or Python (or other
popular ecosystems).
## Javascript
We're living in the age of Web and one of the big players in this era is Javascript. The number
of the programming languages that compile to Javascript is increasing rapidly. Javascript
as a language [sucks](https://whydoesitsuck.com/why-does-javascript-suck/) but as platform
it is amazing. Lots of money and engineering effort has been spent on improving Javascript engines.
As a result Javascript is a crappy language with well engineered engines such as
[V8](https://v8.dev/).
Creating a language based on Javascript platform means that I have to be involved with the whole
transpiling scenario and deal with the fact that this new language can be used on different
browsers or on the backend. Or even on IE6 (Just kidding). I don't want to deal with all this.
I think Javascript platform can't be a good fit for what I need. So I won't go into details about
it
## Python
Python is another famous platform form creating programming languages. Many people have built
programming languages on top of Python (Checkout [Lispy](http://norvig.com/lispy.html) if you're
a Python fan). Python is super popular these days and you'll see it everywhere. Creating a language
on top of Python (just like Javascript) gives me access to a rich ecosystem with huge number of
libraries and a robust ecosystem.
But as I mentioned in the [rational](/programming/rational-and-a-name/) I want support for built-in
concurrency and parallelism. Python isn't even good when it comes to parallelism and concurrency.
I'm using python for more than 10 years now and I'm very familiar with it. I know about all the
effort to create useful concurrency and parallelism such as asyncIO. But the fact is Python
is not designed for this job. **GIL** is a huge problem in Python that literally prevents
us from Running two pieces of code in parallel in two kernel space thread. It is a problem
for me. If you can't do a decent concurrency and parallel execution you have no chance
against modern languages like Clojure, Go, Elixir and others. Python is fine now despite
of its problems because it is good at other stuff and people accepted it for what it is.
Python is out there for about 25 years now and it has established a big community. If
Guido van Rossum created Python a year ago, I'm pretty sure that it would've failed because
it can't compete with modern languages. Don't get me wrong, I'm not trying to trash Python.
It is great and it has many good qualities but a good Concurrency and parallel execution model
ain't one of them.
## BEAM
Erlang ecosystem is amazing, Robust and well tested. I have read a lot about it and when
ever I'm studying anything around computer science that can be related to Erlang, I ask
myself "How is Erlang doing it?". Erlang ecosystem truly had a huge impact on the world
today.
The problem with Erlang ecosystem for me is that I always read about it and my knowledge
around it is only theoretical. Building a language on top a platform needs a good level
of practical experience on the platform as well which I don't have that. So it's obvious
that I have to pass.
## The JVM
As much as I dislike Java (Mostly because of the syntax and the fact that it is an object
oriented language), I like JVM a lot. The JVM is battle tested, well design (Well, sort of.
But it's certainly evolving.) and fast VM. It should be the most popular VM in the world
(I'm just guessing). It is one of the world's most heavily-optimized pieces of software.
Plenty of researches have been made to make it better and better.
The JVM has a mature ecosystem and a massive community of developers that resulted in an
unbelievable number of libraries (not the largest though, NPM is the largest artifact
repository. But it has a huge amount of useless BS as well). By targeting the JVM,
users will have an easy time adopting the new languages because of the rich tools set
provided by the Java ecosystem and all the languages that targeted JVM as well. For example,
it will be possible to use libraries written in Scala or Clojure as well.
Long story short, I think the JVM is the right platform for me. The fact that many languages
have chosen it as their base platform shows how useful it can be. But there is a problem.
Targeting a higher level virtual machines like the JVM means that I'll have an easier job to
create a compiler. But I still have to write one. A compiler that takes the code and produces
JVM bytecode. As I mentioned earlier, writing a compiler is an enormous task and the chance
of doing it wrong with someone like me who has never built a compiler before is very high.
## One VM to rule them all
Luckily there is a solution. I can write an interpreter in a VM that is designed to optimize
my interpreter with all that wonderful JIT compilation magic. Oracle has released a new VM
that hopes to make writing language interpreters both easy and fast. It can also leverage
the huge ecosystem of the JVM. It is an enhanced JVM that contains a new JIT compiler which
can speed up interpreters to near Java speed. The new JIT compiler is called Graal. To use
the Graals JIT magic we can use the Truffle library to create the interpreter. We will
annotate the interpreter and give Graal some hints on invariants and type information.
According to Graal's documents, By doing this integration effort we get significant speedups
in out interpreter without having to resort to writing a bytecode compiler.
[GraalVM](https://www.graalvm.org/) is a Java VM and JDK based on HotSpot/OpenJDK,
implemented in Java. It supports different execution modes, like ahead-of-time compilation
of Java applications for fast startup and low memory footprint.
> GraalVM is a universal virtual machine for running applications written in JavaScript,
> Python, Ruby, R, JVM-based languages like Java, Scala, Groovy, Kotlin, Clojure, and
> LLVM-based languages such as C and C++.
>
> GraalVM removes the isolation between programming languages and enables
> interoperability in a shared runtime. It can run either standalone or in
> the context of OpenJDK, Node.js or Oracle Database.
I copied the above paragraph from GraalVM's official website. It is truly a VM to rule
them all.
[Truffle](https://github.com/oracle/graal/tree/master/truffle) library is one the key
players in GraalVM. The initial results of Truffle are super exciting. Implementations
of Ruby in Truffle has a performance on the same order of magnitude as the much bigger
projects of JRuby. Just checkout [Truffle Ruby](https://chrisseaton.com/truffleruby/)'s
website to get amazed by it.
There is a [Javascript implementation](https://github.com/graalvm/graaljs)
as well which showed great progress as well.
Lots of research has been dedicated to this topic and the result is mind blowing.
The interesting thing is that these Truffle implementations were done with fewer people
in a shorter period of time. This means you can create your own language on the JVM that
takes advantage of all its existing libraries, native threading, JIT compiler without
having to write your own compiler, and you get speeds that took other languages years
to achieve.
Using GraalVM as the platform for my new language will help me to be much faster because
All I need to do is to build an [AST](https://en.wikipedia.org/wiki/Abstract_syntax_tree)
interpreter and Graal will handle the rest. It means that I can start by building what is
important and use a very well engineered toolkit in my advantage to get to my goal quicker
and then later on replace any part that I like with my own implementation. How cool is that???
But as an engineer and a wannabe scientist I'd like to see the proof with my own eyes. Not
because I don't trust academic work, Just because it feels good to experience the proof.
So to begin with I'm going to create a dead simple Serene interpreter in Java and OpenJDK
and then build the same interpreter using Java on GraalVM using Truffle library and
compare the results and prove myself that choosing GraalVM is the right choice.

View File

@ -1,263 +0,0 @@
---
layout: post
title: "Step 2: Serene (Simple) version"
date: 2020-01-03
categories: Programming
tags: Serene language
theme: dark
---
As you might already know I'm working on [my own programming language ](/programming/my-new-programming-language/)
for a while now. I'm still on early stages and I'm working on
[choosing the right platform](/programming/choosing-the-target-platform/)
for [#Serene](https://social.lxsameer.com/tags/Serene) and trying
to spend time on doing enough research and make decision based
on facts, scientific papers and collected data from experiments
rather than rushing into things and end up with a mess.
I believe those languages that take their time and move slowly
but with great research, plan and design are more successful in
the long term (Thanks to **Pouya** for pointing it out). Take **Clojure**
as an example. They are taking their time, experimenting and validating
their hypothesis. As a result, Clojure is a well designed, stable
and highly backward compatible language with amazing and productive
pace. However, some other languages like Python are extremely
popular and consequently has more contributors. Dealing with all
those contributors caused Python to move faster than it should and
they ended up with some bad choices and horrible designs that
fixing them requires an humongous effort. Gradually, it becomes
harder and harder to fix those and move away from them. GIL is a good example,
instead of fixing the issue and removing the GIL, they are introducing
(at the of writing this article they added some basic support to latest
python release but far from what they want)
[something else](https://lwn.net/Articles/754162/) to fix the original
problem but it might become a pain point itself. In order to avoid these kind
of problem as much as possible I'm trying to take my time and do as
many as experiments as I need.
As I mentioned [earlier](/programming/choosing-the-target-platform/)
I think **GraalVM** and **Truffle** is the right answer for
Serene. But to verify my initial Idea I decided to run an experiment.
The experiment is all about implementing a Lisp in two environments.
A pure Java implementation vs a **Truffle** implementation.
I'll update the experiment files accordingly at the
[experiment reports](https://gitlab.com/serene-lang/experiment-reports/tree/master/001)
repository.
I spent several days and implementing the pure java version. The repository
of the simple version is available in the [gitlab repo](https://gitlab.com/serene-lang/simple-version).
This is a dummy version, but good enough lisp that I didn't paid too much attention
to the details and just created a very simple lisp with the following specification.
> Note: In this post whereever I use the name **Serene** for the implementation,
> I'm referring to the simple version.
## Data structures
Since I tried to avoid unnecessary work, I didn't do much and implemented
just one collection type which is the most important and essential data
structure in any Lisp, the mighty List. While my final goal is to have functional
data structures, this List is not a functional one and is a simple linked
list. You can find the implementation under `serene.simple.ListNode`.
For the number types I just added support for `Long` and `Double`
via `serene.simple.SNumber` class which acts as a dispatcher between two inner
classes.
For Strings, boolean types and `nil`, I just used the equivalent Java data
structures directly.
## Reader/Parser
Instead of using a parser generator or a sophisticated parser, I just created
a simple read ahead of position based parser that reads two chars and calls the
appropriate method to create the corresponding `Node`. the `serene.simple.Node`
is an abstract class that has just one important method, `eval`. The whole
purpose of the reader is to parse the code and create an AST like data structure
which each node extends the `Node` class (I should've create the interface for
it but too lazy to change it now). The `eval` method of `ListNode` is a bit
special. It calls the `eval` method on all the elements on the list
and then calls the first element as a function and pass the rest of the elements
as the arguments to that function. First rule of lisp :))
The `eval` method of `ListNode` contains lots more details regarding to java
interop as well which I leave it out of this blog post.
## Scope
Scopes are simply a mapping between symbol names and values. Serene consists of two
different scopes, both implemented in `serene.simple.IScope` and extend
`serene.simple.AScope` abstract class that contains the logic for symbol
lookup and insertion. These two classes are `serene.simple.Scope` which
is the general scope and it has a parent/child type of relationship with
other instances of the same class or `serene.simple.RootScope` that is
the top level scope. Beside that, `RootScope` is pre-populated with all
the built-in functions and types.
## Special forms
Serene's [special forms](https://courses.cs.northwestern.edu/325/readings/special-forms.php)
are pretty limited. All of them all classes which extend `serene.simple.SpecialForm`
abstract class and inherit from `Node` indirectly. The difference between
special form evaluation and function evaluation is that in case of special forms,
Serene does not evaluate the arguments and leaves the evaluation to the special form
itself. Here is the list of Serene's special forms:
`def`: Creates a binding between a symbol name and the given value:
```cl
(def name "serene")
```
`fn`: Creates an anonymous function:
```clojure
(def inc (fn (x) (+ 1 x)))
```
`quote`: Prevents the evaluation of the given argument and return it as it is:
```clojure
(quote (1 2 3 4)) ;; => (1 2 3 4)
```
`if`: Evaluates the body based on the return value of the given predicate.
```clojure
(if (= x 1)
(...) ;; if x is 1
(...)) ;; if x is not 1
```
`let`: Sets a local scope and runs its body using that scope.
```cl
(let ((x 1)
(y 2))
(println x y))
```
`do`: Simply groups several expressions together.
```clojure
(do
(println ...)
(if ....))
```
`cond`: Gets several predicates and only evaluates the body corresponding
to the first truthy predicate.
```cl
(cond
((= x 1) (body1...)
((= x 2) (body2...))
(true (else...))))
```
## Builtin Function
All the build in function are created by extending the `serene.simple.builtin.AFn`
abstract class and follow the same `Node` convention. Here is a list of the most
important built in functions:
`(println ....)`: Prints all the arguments on the stdout.
`(quit)`: Quits the program.
`(conj coll x...)`: Returns a new list by adding the given arguments.
`(count coll)`: Returns the number of elements in the given COLL.
`(reverse coll)`: Returns a new list which is the reverse of COLL.
`(list 1 2 3..)`: Creates a list from the given arguments.
`(first coll)`: Returns the first element of the given COLL.
`(rest coll)`: Returns all the elements beside the first element of the given COLL.
`(doc fn)`: Returns the documentation for the given symbol if any.
`(reduce f coll initial)`: Reduces the COLL by applying F to its elements with the
INITIAL as the default value. F takes two arguments 1) the accumulation 2) the element.
`(new Class arg1 arg2...)`: Create a new instance of the given CLASS by passing the given
arguments to its constructor.
### Example program
Here is an example program in Serene simple version (`benchmarks/fib.srns` in the repo):
```clojure
;; We have a reduce function but just in case...
(def reduce1
(fn (f xs initial-value)
(cond
((first xs) (reduce f (rest xs) (f initial-value (first xs))))
(true initial-value))))
;; A simple map function implementation in serene
(def map
(fn (f xs)
(reduce (fn (acc x) (cons acc (f x))) xs (list))))
(def range-list
(fn (x y init)
(if (< y x)
(do
(conj (range-list x (+ y 1) init) y))
init)))
(def range
(fn (x)
(range-list x 0 (list))))
(def fib
(fn (n)
(def fib-iter
(fn (x y z)
(if (= x 0)
z
(fib-iter (- x 1)
z
(+ y z)))))
(fib-iter n 0 1)))
(def benchmark-fn
(fn (x)
(let ((start (now)))
(println (fib x))
(- (now) start))))
(def run-benchmark
(fn (times)
(map (fn (x)
(println "Benchmark: " x)
(println "Took: " (benchmark-fn 500)))
(range times))))
(run-benchmark 20)
```
## What is missing ?
Since Serene (simple) is an experimental language and I'll abandon it eventually.
I didn't want to fall into the rabbit hole and just tried to get to the point as soon as possible.
So I sacrificed lots of details. Here is a list of the most important missing
details:
* A namespace functionality. Because creating and compiling dynamic classes
is a massive task and needs tons of work which doesn't make sense for a toy
project.
* Unified function interface.
* Requiring different namespaces.
* A sophisticated parser. My Reader implementation is really cheap that
suits a toy project. It might worth investigating on different solutions
including using a parser generator or ahead of time read implementation.
* Primitive functions in Serene. I used lots of primitive functions
from java rather than implementing them inSerene itself, mostly because
of two reasons. Lack of
macros and namespaces.
* Decent [functional] data structures. The only data structure I implemented
is list.
* Quality code. The general quality of this implementation is not great, I
sacrificed quality for time.
## Conclusion
I'm not going to improve the simple version anymore at this stage. I'm going to run
some benchmarks and measure different aspects of the current implementation and then
I'll move to the **Truffle** version and continue the
[experiment(001)](https://gitlab.com/serene-lang/experiment-reports/tree/master/001).
Please let me know if you have any comments or questions on this topic. As always
I'm available throw social media and email.

View File

@ -1,34 +0,0 @@
---
layout: post
title: "Sameer's Pyramid"
date: 2020-08-14
categories:
tags: technology rant
theme: dark
---
**TL,DR**: Don't follow trends in the world of technology because usually they are not based on scientific
reasons and only based on so many people who don't have enough insight talking about a subject.
During my day to day life I see many conversations on social media around trends in technology. People
try to settle many debates by resorting to trends. "Everyone is using it, so it has to be the best!",
"It's all over the web, so it has to be true" or "It's impossible for so many people to be wrong, so
it must be good" or tons of similar reasonings. I always wondered about the nature of trends and hypes
and how they navigate the world. This post is the summary of my thoughts on the topic that lead me to
a hypathesis on the behavior of trends and how to ride them.
By evolution, humans are social creatures. During the course of human history, we always tend to form
groups and communities, villages, cities and civilizations. We have found our comfort and safety living among others
and society. Trading with other, fighting along side others and exchange words and wisdom with other. Society gives us
confident and the sense of stability. Often, we seek validation in a group. Dealing we the unknown is out of our comfort
zone and plays with our minds and puts us in a doubtful state of mind. Humans by nature are againt change we don't want
to loose the sense of stability and safety by changes to our surroundings and being in doubt creates fear. In a situation
like this people tend to resort to a group of other people to validate their thoughts and get ride of the doubt that is
bugging them. Exchanging experience and thoughts helps us to think better and stay calm. Seeing people who
had the same experience gives us courage and helps us to push the fear away. Community validates our way of dealing with
the unknown in life. It gives us direction.
But in the history of mankind there were many people (but few in compare to total number of humans) who were adventurous
and overcame their fear of the unknown. //Instead of hiding within the worm and welcoming and few people who breaks it . superstitios
In many cases people try to follow the hurd and the collective wisdom.

8
_sass/bulma.sass vendored
View File

@ -1,8 +0,0 @@
@charset "utf-8"
/*! bulma.io v0.7.4 | MIT License | github.com/jgthms/bulma */
@import "bulma/utilities/_all"
@import "bulma/base/_all"
@import "bulma/elements/_all"
@import "bulma/components/_all"
@import "bulma/grid/_all"
@import "bulma/layout/_all"

BIN
_sass/bulma/.DS_Store vendored

Binary file not shown.

View File

@ -1,5 +0,0 @@
@charset "utf-8"
@import "minireset.sass"
@import "generic.sass"
@import "helpers.sass"

View File

@ -1,130 +0,0 @@
$body-background-color: $white !default
$body-size: 16px !default
$body-rendering: optimizeLegibility !default
$body-family: $family-primary !default
$body-color: $text !default
$body-weight: $weight-normal !default
$body-line-height: 1.5 !default
$code-family: $family-code !default
$code-padding: 0.25em 0.5em 0.25em !default
$code-weight: normal !default
$code-size: 0.875em !default
$hr-background-color: $background !default
$hr-height: 2px !default
$hr-margin: 1.5rem 0 !default
$strong-color: $text-strong !default
$strong-weight: $weight-bold !default
html
background-color: $body-background-color
font-size: $body-size
-moz-osx-font-smoothing: grayscale
-webkit-font-smoothing: antialiased
min-width: 300px
overflow-x: hidden
overflow-y: scroll
text-rendering: $body-rendering
text-size-adjust: 100%
article,
aside,
figure,
footer,
header,
hgroup,
section
display: block
body,
button,
input,
select,
textarea
font-family: $body-family
code,
pre
-moz-osx-font-smoothing: auto
-webkit-font-smoothing: auto
font-family: $code-family
body
color: $body-color
font-size: 1rem
font-weight: $body-weight
line-height: $body-line-height
// Inline
a
color: $link
cursor: pointer
text-decoration: none
strong
color: currentColor
&:hover
color: $link-hover
code
background-color: $code-background
color: $code
font-size: $code-size
font-weight: $code-weight
padding: $code-padding
hr
background-color: $hr-background-color
border: none
display: block
height: $hr-height
margin: $hr-margin
img
height: auto
max-width: 100%
input[type="checkbox"],
input[type="radio"]
vertical-align: baseline
small
font-size: 0.875em
span
font-style: inherit
font-weight: inherit
strong
color: $strong-color
font-weight: $strong-weight
// Block
fieldset
border: none
pre
+overflow-touch
background-color: $pre-background
color: $pre
font-size: 0.875em
overflow-x: auto
padding: 1.25rem 1.5rem
white-space: pre
word-wrap: normal
code
background-color: transparent
color: currentColor
font-size: 1em
padding: 0
table
td,
th
text-align: left
vertical-align: top
th
color: $text-strong

View File

@ -1,276 +0,0 @@
// Float
.is-clearfix
+clearfix
.is-pulled-left
float: left !important
.is-pulled-right
float: right !important
// Overflow
.is-clipped
overflow: hidden !important
// Overlay
.is-overlay
@extend %overlay
// Typography
=typography-size($target:'')
@each $size in $sizes
$i: index($sizes, $size)
.is-size-#{$i}#{if($target == '', '', '-' + $target)}
font-size: $size !important
+typography-size()
+mobile
+typography-size('mobile')
+tablet
+typography-size('tablet')
+touch
+typography-size('touch')
+desktop
+typography-size('desktop')
+widescreen
+typography-size('widescreen')
+fullhd
+typography-size('fullhd')
$alignments: ('centered': 'center', 'justified': 'justify', 'left': 'left', 'right': 'right')
@each $alignment, $text-align in $alignments
.has-text-#{$alignment}
text-align: #{$text-align} !important
@each $alignment, $text-align in $alignments
+mobile
.has-text-#{$alignment}-mobile
text-align: #{$text-align} !important
+tablet
.has-text-#{$alignment}-tablet
text-align: #{$text-align} !important
+tablet-only
.has-text-#{$alignment}-tablet-only
text-align: #{$text-align} !important
+touch
.has-text-#{$alignment}-touch
text-align: #{$text-align} !important
+desktop
.has-text-#{$alignment}-desktop
text-align: #{$text-align} !important
+desktop-only
.has-text-#{$alignment}-desktop-only
text-align: #{$text-align} !important
+widescreen
.has-text-#{$alignment}-widescreen
text-align: #{$text-align} !important
+widescreen-only
.has-text-#{$alignment}-widescreen-only
text-align: #{$text-align} !important
+fullhd
.has-text-#{$alignment}-fullhd
text-align: #{$text-align} !important
.is-capitalized
text-transform: capitalize !important
.is-lowercase
text-transform: lowercase !important
.is-uppercase
text-transform: uppercase !important
.is-italic
font-style: italic !important
@each $name, $pair in $colors
$color: nth($pair, 1)
.has-text-#{$name}
color: $color !important
a.has-text-#{$name}
&:hover,
&:focus
color: darken($color, 10%) !important
.has-background-#{$name}
background-color: $color !important
@each $name, $shade in $shades
.has-text-#{$name}
color: $shade !important
.has-background-#{$name}
background-color: $shade !important
.has-text-weight-light
font-weight: $weight-light !important
.has-text-weight-normal
font-weight: $weight-normal !important
.has-text-weight-semibold
font-weight: $weight-semibold !important
.has-text-weight-bold
font-weight: $weight-bold !important
.is-family-primary
font-family: $family-primary !important
.is-family-secondary
font-family: $family-secondary !important
.is-family-sans-serif
font-family: $family-sans-serif !important
.is-family-monospace
font-family: $family-monospace !important
.is-family-code
font-family: $family-code !important
// Visibility
$displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
@each $display in $displays
.is-#{$display}
display: #{$display} !important
+mobile
.is-#{$display}-mobile
display: #{$display} !important
+tablet
.is-#{$display}-tablet
display: #{$display} !important
+tablet-only
.is-#{$display}-tablet-only
display: #{$display} !important
+touch
.is-#{$display}-touch
display: #{$display} !important
+desktop
.is-#{$display}-desktop
display: #{$display} !important
+desktop-only
.is-#{$display}-desktop-only
display: #{$display} !important
+widescreen
.is-#{$display}-widescreen
display: #{$display} !important
+widescreen-only
.is-#{$display}-widescreen-only
display: #{$display} !important
+fullhd
.is-#{$display}-fullhd
display: #{$display} !important
.is-hidden
display: none !important
.is-sr-only
border: none !important
clip: rect(0, 0, 0, 0) !important
height: 0.01em !important
overflow: hidden !important
padding: 0 !important
position: absolute !important
white-space: nowrap !important
width: 0.01em !important
+mobile
.is-hidden-mobile
display: none !important
+tablet
.is-hidden-tablet
display: none !important
+tablet-only
.is-hidden-tablet-only
display: none !important
+touch
.is-hidden-touch
display: none !important
+desktop
.is-hidden-desktop
display: none !important
+desktop-only
.is-hidden-desktop-only
display: none !important
+widescreen
.is-hidden-widescreen
display: none !important
+widescreen-only
.is-hidden-widescreen-only
display: none !important
+fullhd
.is-hidden-fullhd
display: none !important
.is-invisible
visibility: hidden !important
+mobile
.is-invisible-mobile
visibility: hidden !important
+tablet
.is-invisible-tablet
visibility: hidden !important
+tablet-only
.is-invisible-tablet-only
visibility: hidden !important
+touch
.is-invisible-touch
visibility: hidden !important
+desktop
.is-invisible-desktop
visibility: hidden !important
+desktop-only
.is-invisible-desktop-only
visibility: hidden !important
+widescreen
.is-invisible-widescreen
visibility: hidden !important
+widescreen-only
.is-invisible-widescreen-only
visibility: hidden !important
+fullhd
.is-invisible-fullhd
visibility: hidden !important
// Other
.is-marginless
margin: 0 !important
.is-paddingless
padding: 0 !important
.is-radiusless
border-radius: 0 !important
.is-shadowless
box-shadow: none !important
.is-unselectable
@extend %unselectable

View File

@ -1,84 +0,0 @@
/*! minireset.css v0.0.4 | MIT License | github.com/jgthms/minireset.css */
// Blocks
html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6
margin: 0
padding: 0
// Headings
h1,
h2,
h3,
h4,
h5,
h6
font-size: 100%
font-weight: normal
// List
ul
list-style: none
// Form
button,
input,
select,
textarea
margin: 0
// Box sizing
html
box-sizing: border-box
*
&,
&::before,
&::after
box-sizing: inherit
// Media
img,
embed,
iframe,
object,
video
height: auto
max-width: 100%
audio
max-width: 100%
// Iframe
iframe
border: 0
// Table
table
border-collapse: collapse
border-spacing: 0
td,
th
padding: 0
text-align: left

View File

@ -1,15 +0,0 @@
@charset "utf-8"
@import "breadcrumb.sass"
@import "card.sass"
@import "dropdown.sass"
@import "level.sass"
@import "list.sass"
@import "media.sass"
@import "menu.sass"
@import "message.sass"
@import "modal.sass"
@import "navbar.sass"
@import "pagination.sass"
@import "panel.sass"
@import "tabs.sass"

View File

@ -1,75 +0,0 @@
$breadcrumb-item-color: $link !default
$breadcrumb-item-hover-color: $link-hover !default
$breadcrumb-item-active-color: $text-strong !default
$breadcrumb-item-padding-vertical: 0 !default
$breadcrumb-item-padding-horizontal: 0.75em !default
$breadcrumb-item-separator-color: $grey-light !default
.breadcrumb
@extend %block
@extend %unselectable
font-size: $size-normal
white-space: nowrap
a
align-items: center
color: $breadcrumb-item-color
display: flex
justify-content: center
padding: $breadcrumb-item-padding-vertical $breadcrumb-item-padding-horizontal
&:hover
color: $breadcrumb-item-hover-color
li
align-items: center
display: flex
&:first-child a
padding-left: 0
&.is-active
a
color: $breadcrumb-item-active-color
cursor: default
pointer-events: none
& + li::before
color: $breadcrumb-item-separator-color
content: "\0002f"
ul,
ol
align-items: flex-start
display: flex
flex-wrap: wrap
justify-content: flex-start
.icon
&:first-child
margin-right: 0.5em
&:last-child
margin-left: 0.5em
// Alignment
&.is-centered
ol,
ul
justify-content: center
&.is-right
ol,
ul
justify-content: flex-end
// Sizes
&.is-small
font-size: $size-small
&.is-medium
font-size: $size-medium
&.is-large
font-size: $size-large
// Styles
&.has-arrow-separator
li + li::before
content: "\02192"
&.has-bullet-separator
li + li::before
content: "\02022"
&.has-dot-separator
li + li::before
content: "\000b7"
&.has-succeeds-separator
li + li::before
content: "\0227B"

View File

@ -1,74 +0,0 @@
$card-color: $text !default
$card-background-color: $white !default
$card-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
$card-header-background-color: transparent !default
$card-header-color: $text-strong !default
$card-header-shadow: 0 1px 2px rgba($black, 0.1) !default
$card-header-weight: $weight-bold !default
$card-content-background-color: transparent !default
$card-footer-background-color: transparent !default
$card-footer-border-top: 1px solid $border !default
.card
background-color: $card-background-color
box-shadow: $card-shadow
color: $card-color
max-width: 100%
position: relative
.card-header
background-color: $card-header-background-color
align-items: stretch
box-shadow: $card-header-shadow
display: flex
.card-header-title
align-items: center
color: $card-header-color
display: flex
flex-grow: 1
font-weight: $card-header-weight
padding: 0.75rem
&.is-centered
justify-content: center
.card-header-icon
align-items: center
cursor: pointer
display: flex
justify-content: center
padding: 0.75rem
.card-image
display: block
position: relative
.card-content
background-color: $card-content-background-color
padding: 1.5rem
.card-footer
background-color: $card-footer-background-color
border-top: $card-footer-border-top
align-items: stretch
display: flex
.card-footer-item
align-items: center
display: flex
flex-basis: 0
flex-grow: 1
flex-shrink: 0
justify-content: center
padding: 0.75rem
&:not(:last-child)
border-right: $card-footer-border-top
// Combinations
.card
.media:not(:last-child)
margin-bottom: 0.75rem

View File

@ -1,77 +0,0 @@
$dropdown-content-background-color: $white !default
$dropdown-content-arrow: $link !default
$dropdown-content-offset: 4px !default
$dropdown-content-radius: $radius !default
$dropdown-content-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
$dropdown-content-z: 20 !default
$dropdown-item-color: $grey-dark !default
$dropdown-item-hover-color: $black !default
$dropdown-item-hover-background-color: $background !default
$dropdown-item-active-color: $link-invert !default
$dropdown-item-active-background-color: $link !default
$dropdown-divider-background-color: $border !default
.dropdown
display: inline-flex
position: relative
vertical-align: top
&.is-active,
&.is-hoverable:hover
.dropdown-menu
display: block
&.is-right
.dropdown-menu
left: auto
right: 0
&.is-up
.dropdown-menu
bottom: 100%
padding-bottom: $dropdown-content-offset
padding-top: initial
top: auto
.dropdown-menu
display: none
left: 0
min-width: 12rem
padding-top: $dropdown-content-offset
position: absolute
top: 100%
z-index: $dropdown-content-z
.dropdown-content
background-color: $dropdown-content-background-color
border-radius: $dropdown-content-radius
box-shadow: $dropdown-content-shadow
padding-bottom: 0.5rem
padding-top: 0.5rem
.dropdown-item
color: $dropdown-item-color
display: block
font-size: 0.875rem
line-height: 1.5
padding: 0.375rem 1rem
position: relative
a.dropdown-item,
button.dropdown-item
padding-right: 3rem
text-align: left
white-space: nowrap
width: 100%
&:hover
background-color: $dropdown-item-hover-background-color
color: $dropdown-item-hover-color
&.is-active
background-color: $dropdown-item-active-background-color
color: $dropdown-item-active-color
.dropdown-divider
background-color: $dropdown-divider-background-color
border: none
display: block
height: 1px
margin: 0.5rem 0

View File

@ -1,75 +0,0 @@
.level
@extend %block
align-items: center
justify-content: space-between
code
border-radius: $radius
img
display: inline-block
vertical-align: top
// Modifiers
&.is-mobile
display: flex
.level-left,
.level-right
display: flex
.level-left + .level-right
margin-top: 0
.level-item
&:not(:last-child)
margin-bottom: 0
margin-right: 0.75rem
&:not(.is-narrow)
flex-grow: 1
// Responsiveness
+tablet
display: flex
& > .level-item
&:not(.is-narrow)
flex-grow: 1
.level-item
align-items: center
display: flex
flex-basis: auto
flex-grow: 0
flex-shrink: 0
justify-content: center
.title,
.subtitle
margin-bottom: 0
// Responsiveness
+mobile
&:not(:last-child)
margin-bottom: 0.75rem
.level-left,
.level-right
flex-basis: auto
flex-grow: 0
flex-shrink: 0
.level-item
// Modifiers
&.is-flexible
flex-grow: 1
// Responsiveness
+tablet
&:not(:last-child)
margin-right: 0.75rem
.level-left
align-items: center
justify-content: flex-start
// Responsiveness
+mobile
& + .level-right
margin-top: 1.5rem
+tablet
display: flex
.level-right
align-items: center
justify-content: flex-end
// Responsiveness
+tablet
display: flex

View File

@ -1,39 +0,0 @@
$list-background-color: $white !default
$list-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
$list-radius: $radius !default
$list-item-border: 1px solid $border !default
$list-item-color: $text !default
$list-item-active-background-color: $link !default
$list-item-active-color: $link-invert !default
$list-item-hover-background-color: $background !default
.list
@extend %block
background-color: $list-background-color
border-radius: $list-radius
box-shadow: $list-shadow
// &.is-hoverable > .list-item:hover:not(.is-active)
// background-color: $list-item-hover-background-color
// cursor: pointer
.list-item
display: block
padding: 0.5em 1em
&:not(a)
color: $list-item-color
&:first-child
border-top-left-radius: $list-radius
border-top-right-radius: $list-radius
&:last-child
border-top-left-radius: $list-radius
border-top-right-radius: $list-radius
&:not(:last-child)
border-bottom: $list-item-border
&.is-active
background-color: $list-item-active-background-color
color: $list-item-active-color
a.list-item
background-color: $list-item-hover-background-color
cursor: pointer

View File

@ -1,48 +0,0 @@
.media
align-items: flex-start
display: flex
text-align: left
.content:not(:last-child)
margin-bottom: 0.75rem
.media
border-top: 1px solid rgba($border, 0.5)
display: flex
padding-top: 0.75rem
.content:not(:last-child),
.control:not(:last-child)
margin-bottom: 0.5rem
.media
padding-top: 0.5rem
& + .media
margin-top: 0.5rem
& + .media
border-top: 1px solid rgba($border, 0.5)
margin-top: 1rem
padding-top: 1rem
// Sizes
&.is-large
& + .media
margin-top: 1.5rem
padding-top: 1.5rem
.media-left,
.media-right
flex-basis: auto
flex-grow: 0
flex-shrink: 0
.media-left
margin-right: 1rem
.media-right
margin-left: 1rem
.media-content
flex-basis: auto
flex-grow: 1
flex-shrink: 1
text-align: left
+mobile
.media-content
overflow-x: auto

View File

@ -1,50 +0,0 @@
$menu-item-color: $text !default
$menu-item-radius: $radius-small !default
$menu-item-hover-color: $text-strong !default
$menu-item-hover-background-color: $background !default
$menu-item-active-color: $link-invert !default
$menu-item-active-background-color: $link !default
$menu-list-border-left: 1px solid $border !default
$menu-label-color: $text-light !default
.menu
font-size: $size-normal
// Sizes
&.is-small
font-size: $size-small
&.is-medium
font-size: $size-medium
&.is-large
font-size: $size-large
.menu-list
line-height: 1.25
a
border-radius: $menu-item-radius
color: $menu-item-color
display: block
padding: 0.5em 0.75em
&:hover
background-color: $menu-item-hover-background-color
color: $menu-item-hover-color
// Modifiers
&.is-active
background-color: $menu-item-active-background-color
color: $menu-item-active-color
li
ul
border-left: $menu-list-border-left
margin: 0.75em
padding-left: 0.75em
.menu-label
color: $menu-label-color
font-size: 0.75em
letter-spacing: 0.1em
text-transform: uppercase
&:not(:first-child)
margin-top: 1em
&:not(:last-child)
margin-bottom: 1em

View File

@ -1,86 +0,0 @@
$message-background-color: $background !default
$message-radius: $radius !default
$message-header-background-color: $text !default
$message-header-color: $text-invert !default
$message-header-weight: $weight-bold !default
$message-header-padding: 0.75em 1em !default
$message-header-radius: $radius !default
$message-body-border-color: $border !default
$message-body-border-width: 0 0 0 4px !default
$message-body-color: $text !default
$message-body-padding: 1.25em 1.5em !default
$message-body-radius: $radius !default
$message-body-pre-background-color: $white !default
$message-body-pre-code-background-color: transparent !default
$message-header-body-border-width: 0 !default
.message
@extend %block
background-color: $message-background-color
border-radius: $message-radius
font-size: $size-normal
strong
color: currentColor
a:not(.button):not(.tag):not(.dropdown-item)
color: currentColor
text-decoration: underline
// Sizes
&.is-small
font-size: $size-small
&.is-medium
font-size: $size-medium
&.is-large
font-size: $size-large
// Colors
@each $name, $pair in $colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
$color-lightning: max((100% - lightness($color)) - 2%, 0%)
$color-luminance: colorLuminance($color)
$darken-percentage: $color-luminance * 70%
$desaturate-percentage: $color-luminance * 30%
&.is-#{$name}
background-color: lighten($color, $color-lightning)
.message-header
background-color: $color
color: $color-invert
.message-body
border-color: $color
color: desaturate(darken($color, $darken-percentage), $desaturate-percentage)
.message-header
align-items: center
background-color: $message-header-background-color
border-radius: $message-header-radius $message-header-radius 0 0
color: $message-header-color
display: flex
font-weight: $message-header-weight
justify-content: space-between
line-height: 1.25
padding: $message-header-padding
position: relative
.delete
flex-grow: 0
flex-shrink: 0
margin-left: 0.75em
& + .message-body
border-width: $message-header-body-border-width
border-top-left-radius: 0
border-top-right-radius: 0
.message-body
border-color: $message-body-border-color
border-radius: $message-body-radius
border-style: solid
border-width: $message-body-border-width
color: $message-body-color
padding: $message-body-padding
code,
pre
background-color: $message-body-pre-background-color
pre code
background-color: $message-body-pre-code-background-color

View File

@ -1,113 +0,0 @@
$modal-z: 40 !default
$modal-background-background-color: rgba($black, 0.86) !default
$modal-content-width: 640px !default
$modal-content-margin-mobile: 20px !default
$modal-content-spacing-mobile: 160px !default
$modal-content-spacing-tablet: 40px !default
$modal-close-dimensions: 40px !default
$modal-close-right: 20px !default
$modal-close-top: 20px !default
$modal-card-spacing: 40px !default
$modal-card-head-background-color: $background !default
$modal-card-head-border-bottom: 1px solid $border !default
$modal-card-head-padding: 20px !default
$modal-card-head-radius: $radius-large !default
$modal-card-title-color: $text-strong !default
$modal-card-title-line-height: 1 !default
$modal-card-title-size: $size-4 !default
$modal-card-foot-radius: $radius-large !default
$modal-card-foot-border-top: 1px solid $border !default
$modal-card-body-background-color: $white !default
$modal-card-body-padding: 20px !default
.modal
@extend %overlay
align-items: center
display: none
flex-direction: column
justify-content: center
overflow: hidden
position: fixed
z-index: $modal-z
// Modifiers
&.is-active
display: flex
.modal-background
@extend %overlay
background-color: $modal-background-background-color
.modal-content,
.modal-card
margin: 0 $modal-content-margin-mobile
max-height: calc(100vh - #{$modal-content-spacing-mobile})
overflow: auto
position: relative
width: 100%
// Responsiveness
+tablet
margin: 0 auto
max-height: calc(100vh - #{$modal-content-spacing-tablet})
width: $modal-content-width
.modal-close
@extend %delete
background: none
height: $modal-close-dimensions
position: fixed
right: $modal-close-right
top: $modal-close-top
width: $modal-close-dimensions
.modal-card
display: flex
flex-direction: column
max-height: calc(100vh - #{$modal-card-spacing})
overflow: hidden
-ms-overflow-y: visible
.modal-card-head,
.modal-card-foot
align-items: center
background-color: $modal-card-head-background-color
display: flex
flex-shrink: 0
justify-content: flex-start
padding: $modal-card-head-padding
position: relative
.modal-card-head
border-bottom: $modal-card-head-border-bottom
border-top-left-radius: $modal-card-head-radius
border-top-right-radius: $modal-card-head-radius
.modal-card-title
color: $modal-card-title-color
flex-grow: 1
flex-shrink: 0
font-size: $modal-card-title-size
line-height: $modal-card-title-line-height
.modal-card-foot
border-bottom-left-radius: $modal-card-foot-radius
border-bottom-right-radius: $modal-card-foot-radius
border-top: $modal-card-foot-border-top
.button
&:not(:last-child)
margin-right: 10px
.modal-card-body
+overflow-touch
background-color: $modal-card-body-background-color
flex-grow: 1
flex-shrink: 1
overflow: auto
padding: $modal-card-body-padding

View File

@ -1,428 +0,0 @@
$navbar-background-color: $white !default
$navbar-box-shadow-size: 0 2px 0 0 !default
$navbar-box-shadow-color: $background !default
$navbar-height: 3.25rem !default
$navbar-padding-vertical: 1rem !default
$navbar-padding-horizontal: 2rem !default
$navbar-z: 30 !default
$navbar-fixed-z: 30 !default
$navbar-item-color: $grey-dark !default
$navbar-item-hover-color: $link !default
$navbar-item-hover-background-color: $white-bis !default
$navbar-item-active-color: $black !default
$navbar-item-active-background-color: transparent !default
$navbar-item-img-max-height: 1.75rem !default
$navbar-burger-color: $navbar-item-color !default
$navbar-tab-hover-background-color: transparent !default
$navbar-tab-hover-border-bottom-color: $link !default
$navbar-tab-active-color: $link !default
$navbar-tab-active-background-color: transparent !default
$navbar-tab-active-border-bottom-color: $link !default
$navbar-tab-active-border-bottom-style: solid !default
$navbar-tab-active-border-bottom-width: 3px !default
$navbar-dropdown-background-color: $white !default
$navbar-dropdown-border-top: 2px solid $border !default
$navbar-dropdown-offset: -4px !default
$navbar-dropdown-arrow: $link !default
$navbar-dropdown-radius: $radius-large !default
$navbar-dropdown-z: 20 !default
$navbar-dropdown-boxed-radius: $radius-large !default
$navbar-dropdown-boxed-shadow: 0 8px 8px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
$navbar-dropdown-item-hover-color: $black !default
$navbar-dropdown-item-hover-background-color: $background !default
$navbar-dropdown-item-active-color: $link !default
$navbar-dropdown-item-active-background-color: $background !default
$navbar-divider-background-color: $background !default
$navbar-divider-height: 2px !default
$navbar-bottom-box-shadow-size: 0 -2px 0 0 !default
$navbar-breakpoint: $desktop !default
=navbar-fixed
left: 0
position: fixed
right: 0
z-index: $navbar-fixed-z
.navbar
background-color: $navbar-background-color
min-height: $navbar-height
position: relative
z-index: $navbar-z
@each $name, $pair in $colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
&.is-#{$name}
background-color: $color
color: $color-invert
.navbar-brand
& > .navbar-item,
.navbar-link
color: $color-invert
& > a.navbar-item,
.navbar-link
&:hover,
&.is-active
background-color: darken($color, 5%)
color: $color-invert
.navbar-link
&::after
border-color: $color-invert
.navbar-burger
color: $color-invert
+from($navbar-breakpoint)
.navbar-start,
.navbar-end
& > .navbar-item,
.navbar-link
color: $color-invert
& > a.navbar-item,
.navbar-link
&:hover,
&.is-active
background-color: darken($color, 5%)
color: $color-invert
.navbar-link
&::after
border-color: $color-invert
.navbar-item.has-dropdown:hover .navbar-link,
.navbar-item.has-dropdown.is-active .navbar-link
background-color: darken($color, 5%)
color: $color-invert
.navbar-dropdown
a.navbar-item
&.is-active
background-color: $color
color: $color-invert
& > .container
align-items: stretch
display: flex
min-height: $navbar-height
width: 100%
&.has-shadow
box-shadow: $navbar-box-shadow-size $navbar-box-shadow-color
&.is-fixed-bottom,
&.is-fixed-top
+navbar-fixed
&.is-fixed-bottom
bottom: 0
&.has-shadow
box-shadow: $navbar-bottom-box-shadow-size $navbar-box-shadow-color
&.is-fixed-top
top: 0
html,
body
&.has-navbar-fixed-top
padding-top: $navbar-height
&.has-navbar-fixed-bottom
padding-bottom: $navbar-height
.navbar-brand,
.navbar-tabs
align-items: stretch
display: flex
flex-shrink: 0
min-height: $navbar-height
.navbar-brand
a.navbar-item
&:hover
background-color: transparent
.navbar-tabs
+overflow-touch
max-width: 100vw
overflow-x: auto
overflow-y: hidden
.navbar-burger
color: $navbar-burger-color
+hamburger($navbar-height)
margin-left: auto
.navbar-menu
display: none
.navbar-item,
.navbar-link
color: $navbar-item-color
display: block
line-height: 1.5
padding: 0.5rem 0.75rem
position: relative
.icon
&:only-child
margin-left: -0.25rem
margin-right: -0.25rem
a.navbar-item,
.navbar-link
cursor: pointer
&:hover,
&.is-active
background-color: $navbar-item-hover-background-color
color: $navbar-item-hover-color
.navbar-item
display: block
flex-grow: 0
flex-shrink: 0
img
max-height: $navbar-item-img-max-height
&.has-dropdown
padding: 0
&.is-expanded
flex-grow: 1
flex-shrink: 1
&.is-tab
border-bottom: 1px solid transparent
min-height: $navbar-height
padding-bottom: calc(0.5rem - 1px)
&:hover
background-color: $navbar-tab-hover-background-color
border-bottom-color: $navbar-tab-hover-border-bottom-color
&.is-active
background-color: $navbar-tab-active-background-color
border-bottom-color: $navbar-tab-active-border-bottom-color
border-bottom-style: $navbar-tab-active-border-bottom-style
border-bottom-width: $navbar-tab-active-border-bottom-width
color: $navbar-tab-active-color
padding-bottom: calc(0.5rem - #{$navbar-tab-active-border-bottom-width})
.navbar-content
flex-grow: 1
flex-shrink: 1
.navbar-link:not(.is-arrowless)
padding-right: 2.5em
&::after
@extend %arrow
border-color: $navbar-dropdown-arrow
margin-top: -0.375em
right: 1.125em
.navbar-dropdown
font-size: 0.875rem
padding-bottom: 0.5rem
padding-top: 0.5rem
.navbar-item
padding-left: 1.5rem
padding-right: 1.5rem
.navbar-divider
background-color: $navbar-divider-background-color
border: none
display: none
height: $navbar-divider-height
margin: 0.5rem 0
+until($navbar-breakpoint)
.navbar > .container
display: block
.navbar-brand,
.navbar-tabs
.navbar-item
align-items: center
display: flex
.navbar-link
&::after
display: none
.navbar-menu
background-color: $navbar-background-color
box-shadow: 0 8px 16px rgba($black, 0.1)
padding: 0.5rem 0
&.is-active
display: block
// Fixed navbar
.navbar
&.is-fixed-bottom-touch,
&.is-fixed-top-touch
+navbar-fixed
&.is-fixed-bottom-touch
bottom: 0
&.has-shadow
box-shadow: 0 -2px 3px rgba($black, 0.1)
&.is-fixed-top-touch
top: 0
&.is-fixed-top,
&.is-fixed-top-touch
.navbar-menu
+overflow-touch
max-height: calc(100vh - #{$navbar-height})
overflow: auto
html,
body
&.has-navbar-fixed-top-touch
padding-top: $navbar-height
&.has-navbar-fixed-bottom-touch
padding-bottom: $navbar-height
+from($navbar-breakpoint)
.navbar,
.navbar-menu,
.navbar-start,
.navbar-end
align-items: stretch
display: flex
.navbar
min-height: $navbar-height
&.is-spaced
padding: $navbar-padding-vertical $navbar-padding-horizontal
.navbar-start,
.navbar-end
align-items: center
a.navbar-item,
.navbar-link
border-radius: $radius
&.is-transparent
a.navbar-item,
.navbar-link
&:hover,
&.is-active
background-color: transparent !important
.navbar-item.has-dropdown
&.is-active,
&.is-hoverable:hover
.navbar-link
background-color: transparent !important
.navbar-dropdown
a.navbar-item
&:hover
background-color: $navbar-dropdown-item-hover-background-color
color: $navbar-dropdown-item-hover-color
&.is-active
background-color: $navbar-dropdown-item-active-background-color
color: $navbar-dropdown-item-active-color
.navbar-burger
display: none
.navbar-item,
.navbar-link
align-items: center
display: flex
.navbar-item
display: flex
&.has-dropdown
align-items: stretch
&.has-dropdown-up
.navbar-link::after
transform: rotate(135deg) translate(0.25em, -0.25em)
.navbar-dropdown
border-bottom: $navbar-dropdown-border-top
border-radius: $navbar-dropdown-radius $navbar-dropdown-radius 0 0
border-top: none
bottom: 100%
box-shadow: 0 -8px 8px rgba($black, 0.1)
top: auto
&.is-active,
&.is-hoverable:hover
.navbar-dropdown
display: block
.navbar.is-spaced &,
&.is-boxed
opacity: 1
pointer-events: auto
transform: translateY(0)
.navbar-menu
flex-grow: 1
flex-shrink: 0
.navbar-start
justify-content: flex-start
margin-right: auto
.navbar-end
justify-content: flex-end
margin-left: auto
.navbar-dropdown
background-color: $navbar-dropdown-background-color
border-bottom-left-radius: $navbar-dropdown-radius
border-bottom-right-radius: $navbar-dropdown-radius
border-top: $navbar-dropdown-border-top
box-shadow: 0 8px 8px rgba($black, 0.1)
display: none
font-size: 0.875rem
left: 0
min-width: 100%
position: absolute
top: 100%
z-index: $navbar-dropdown-z
.navbar-item
padding: 0.375rem 1rem
white-space: nowrap
a.navbar-item
padding-right: 3rem
&:hover
background-color: $navbar-dropdown-item-hover-background-color
color: $navbar-dropdown-item-hover-color
&.is-active
background-color: $navbar-dropdown-item-active-background-color
color: $navbar-dropdown-item-active-color
.navbar.is-spaced &,
&.is-boxed
border-radius: $navbar-dropdown-boxed-radius
border-top: none
box-shadow: $navbar-dropdown-boxed-shadow
display: block
opacity: 0
pointer-events: none
top: calc(100% + (#{$navbar-dropdown-offset}))
transform: translateY(-5px)
transition-duration: $speed
transition-property: opacity, transform
&.is-right
left: auto
right: 0
.navbar-divider
display: block
.navbar > .container,
.container > .navbar
.navbar-brand
margin-left: -.75rem
.navbar-menu
margin-right: -.75rem
// Fixed navbar
.navbar
&.is-fixed-bottom-desktop,
&.is-fixed-top-desktop
+navbar-fixed
&.is-fixed-bottom-desktop
bottom: 0
&.has-shadow
box-shadow: 0 -2px 3px rgba($black, 0.1)
&.is-fixed-top-desktop
top: 0
html,
body
&.has-navbar-fixed-top-desktop
padding-top: $navbar-height
&.has-navbar-fixed-bottom-desktop
padding-bottom: $navbar-height
&.has-spaced-navbar-fixed-top
padding-top: $navbar-height + ($navbar-padding-vertical * 2)
&.has-spaced-navbar-fixed-bottom
padding-bottom: $navbar-height + ($navbar-padding-vertical * 2)
// Hover/Active states
a.navbar-item,
.navbar-link
&.is-active
color: $navbar-item-active-color
&.is-active:not(:hover)
background-color: $navbar-item-active-background-color
.navbar-item.has-dropdown
&:hover,
&.is-active
.navbar-link
background-color: $navbar-item-hover-background-color
// Combination
.hero
&.is-fullheight-with-navbar
min-height: calc(100vh - #{$navbar-height})

View File

@ -1,144 +0,0 @@
$pagination-color: $grey-darker !default
$pagination-border-color: $grey-lighter !default
$pagination-margin: -0.25rem !default
$pagination-min-width: $control-height !default
$pagination-hover-color: $link-hover !default
$pagination-hover-border-color: $link-hover-border !default
$pagination-focus-color: $link-focus !default
$pagination-focus-border-color: $link-focus-border !default
$pagination-active-color: $link-active !default
$pagination-active-border-color: $link-active-border !default
$pagination-disabled-color: $grey !default
$pagination-disabled-background-color: $grey-lighter !default
$pagination-disabled-border-color: $grey-lighter !default
$pagination-current-color: $link-invert !default
$pagination-current-background-color: $link !default
$pagination-current-border-color: $link !default
$pagination-ellipsis-color: $grey-light !default
$pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
.pagination
font-size: $size-normal
margin: $pagination-margin
// Sizes
&.is-small
font-size: $size-small
&.is-medium
font-size: $size-medium
&.is-large
font-size: $size-large
&.is-rounded
.pagination-previous,
.pagination-next
padding-left: 1em
padding-right: 1em
border-radius: $radius-rounded
.pagination-link
border-radius: $radius-rounded
.pagination,
.pagination-list
align-items: center
display: flex
justify-content: center
text-align: center
.pagination-previous,
.pagination-next,
.pagination-link,
.pagination-ellipsis
@extend %control
@extend %unselectable
font-size: 1em
padding-left: 0.5em
padding-right: 0.5em
justify-content: center
margin: 0.25rem
text-align: center
.pagination-previous,
.pagination-next,
.pagination-link
border-color: $pagination-border-color
color: $pagination-color
min-width: $pagination-min-width
&:hover
border-color: $pagination-hover-border-color
color: $pagination-hover-color
&:focus
border-color: $pagination-focus-border-color
&:active
box-shadow: $pagination-shadow-inset
&[disabled]
background-color: $pagination-disabled-background-color
border-color: $pagination-disabled-border-color
box-shadow: none
color: $pagination-disabled-color
opacity: 0.5
.pagination-previous,
.pagination-next
padding-left: 0.75em
padding-right: 0.75em
white-space: nowrap
.pagination-link
&.is-current
background-color: $pagination-current-background-color
border-color: $pagination-current-border-color
color: $pagination-current-color
.pagination-ellipsis
color: $pagination-ellipsis-color
pointer-events: none
.pagination-list
flex-wrap: wrap
+mobile
.pagination
flex-wrap: wrap
.pagination-previous,
.pagination-next
flex-grow: 1
flex-shrink: 1
.pagination-list
li
flex-grow: 1
flex-shrink: 1
+tablet
.pagination-list
flex-grow: 1
flex-shrink: 1
justify-content: flex-start
order: 1
.pagination-previous
order: 2
.pagination-next
order: 3
.pagination
justify-content: space-between
&.is-centered
.pagination-previous
order: 1
.pagination-list
justify-content: center
order: 2
.pagination-next
order: 3
&.is-right
.pagination-previous
order: 1
.pagination-next
order: 2
.pagination-list
justify-content: flex-end
order: 3

View File

@ -1,101 +0,0 @@
$panel-item-border: 1px solid $border !default
$panel-heading-background-color: $background !default
$panel-heading-color: $text-strong !default
$panel-heading-line-height: 1.25 !default
$panel-heading-padding: 0.5em 0.75em !default
$panel-heading-radius: $radius !default
$panel-heading-size: 1.25em !default
$panel-heading-weight: $weight-light !default
$panel-tab-border-bottom: 1px solid $border !default
$panel-tab-active-border-bottom-color: $link-active-border !default
$panel-tab-active-color: $link-active !default
$panel-list-item-color: $text !default
$panel-list-item-hover-color: $link !default
$panel-block-color: $text-strong !default
$panel-block-hover-background-color: $background !default
$panel-block-active-border-left-color: $link !default
$panel-block-active-color: $link-active !default
$panel-block-active-icon-color: $link !default
$panel-icon-color: $text-light !default
.panel
font-size: $size-normal
&:not(:last-child)
margin-bottom: 1.5rem
.panel-heading,
.panel-tabs,
.panel-block
border-bottom: $panel-item-border
border-left: $panel-item-border
border-right: $panel-item-border
&:first-child
border-top: $panel-item-border
.panel-heading
background-color: $panel-heading-background-color
border-radius: $panel-heading-radius $panel-heading-radius 0 0
color: $panel-heading-color
font-size: $panel-heading-size
font-weight: $panel-heading-weight
line-height: $panel-heading-line-height
padding: $panel-heading-padding
.panel-tabs
align-items: flex-end
display: flex
font-size: 0.875em
justify-content: center
a
border-bottom: $panel-tab-border-bottom
margin-bottom: -1px
padding: 0.5em
// Modifiers
&.is-active
border-bottom-color: $panel-tab-active-border-bottom-color
color: $panel-tab-active-color
.panel-list
a
color: $panel-list-item-color
&:hover
color: $panel-list-item-hover-color
.panel-block
align-items: center
color: $panel-block-color
display: flex
justify-content: flex-start
padding: 0.5em 0.75em
input[type="checkbox"]
margin-right: 0.75em
& > .control
flex-grow: 1
flex-shrink: 1
width: 100%
&.is-wrapped
flex-wrap: wrap
&.is-active
border-left-color: $panel-block-active-border-left-color
color: $panel-block-active-color
.panel-icon
color: $panel-block-active-icon-color
a.panel-block,
label.panel-block
cursor: pointer
&:hover
background-color: $panel-block-hover-background-color
.panel-icon
+fa(14px, 1em)
color: $panel-icon-color
margin-right: 0.75em
.fa
font-size: inherit
line-height: inherit

View File

@ -1,151 +0,0 @@
$tabs-border-bottom-color: $border !default
$tabs-border-bottom-style: solid !default
$tabs-border-bottom-width: 1px !default
$tabs-link-color: $text !default
$tabs-link-hover-border-bottom-color: $text-strong !default
$tabs-link-hover-color: $text-strong !default
$tabs-link-active-border-bottom-color: $link !default
$tabs-link-active-color: $link !default
$tabs-link-padding: 0.5em 1em !default
$tabs-boxed-link-radius: $radius !default
$tabs-boxed-link-hover-background-color: $background !default
$tabs-boxed-link-hover-border-bottom-color: $border !default
$tabs-boxed-link-active-background-color: $white !default
$tabs-boxed-link-active-border-color: $border !default
$tabs-boxed-link-active-border-bottom-color: transparent !default
$tabs-toggle-link-border-color: $border !default
$tabs-toggle-link-border-style: solid !default
$tabs-toggle-link-border-width: 1px !default
$tabs-toggle-link-hover-background-color: $background !default
$tabs-toggle-link-hover-border-color: $border-hover !default
$tabs-toggle-link-radius: $radius !default
$tabs-toggle-link-active-background-color: $link !default
$tabs-toggle-link-active-border-color: $link !default
$tabs-toggle-link-active-color: $link-invert !default
.tabs
@extend %block
+overflow-touch
@extend %unselectable
align-items: stretch
display: flex
font-size: $size-normal
justify-content: space-between
overflow: hidden
overflow-x: auto
white-space: nowrap
a
align-items: center
border-bottom-color: $tabs-border-bottom-color
border-bottom-style: $tabs-border-bottom-style
border-bottom-width: $tabs-border-bottom-width
color: $tabs-link-color
display: flex
justify-content: center
margin-bottom: -#{$tabs-border-bottom-width}
padding: $tabs-link-padding
vertical-align: top
&:hover
border-bottom-color: $tabs-link-hover-border-bottom-color
color: $tabs-link-hover-color
li
display: block
&.is-active
a
border-bottom-color: $tabs-link-active-border-bottom-color
color: $tabs-link-active-color
ul
align-items: center
border-bottom-color: $tabs-border-bottom-color
border-bottom-style: $tabs-border-bottom-style
border-bottom-width: $tabs-border-bottom-width
display: flex
flex-grow: 1
flex-shrink: 0
justify-content: flex-start
&.is-left
padding-right: 0.75em
&.is-center
flex: none
justify-content: center
padding-left: 0.75em
padding-right: 0.75em
&.is-right
justify-content: flex-end
padding-left: 0.75em
.icon
&:first-child
margin-right: 0.5em
&:last-child
margin-left: 0.5em
// Alignment
&.is-centered
ul
justify-content: center
&.is-right
ul
justify-content: flex-end
// Styles
&.is-boxed
a
border: 1px solid transparent
border-radius: $tabs-boxed-link-radius $tabs-boxed-link-radius 0 0
&:hover
background-color: $tabs-boxed-link-hover-background-color
border-bottom-color: $tabs-boxed-link-hover-border-bottom-color
li
&.is-active
a
background-color: $tabs-boxed-link-active-background-color
border-color: $tabs-boxed-link-active-border-color
border-bottom-color: $tabs-boxed-link-active-border-bottom-color !important
&.is-fullwidth
li
flex-grow: 1
flex-shrink: 0
&.is-toggle
a
border-color: $tabs-toggle-link-border-color
border-style: $tabs-toggle-link-border-style
border-width: $tabs-toggle-link-border-width
margin-bottom: 0
position: relative
&:hover
background-color: $tabs-toggle-link-hover-background-color
border-color: $tabs-toggle-link-hover-border-color
z-index: 2
li
& + li
margin-left: -#{$tabs-toggle-link-border-width}
&:first-child a
border-radius: $tabs-toggle-link-radius 0 0 $tabs-toggle-link-radius
&:last-child a
border-radius: 0 $tabs-toggle-link-radius $tabs-toggle-link-radius 0
&.is-active
a
background-color: $tabs-toggle-link-active-background-color
border-color: $tabs-toggle-link-active-border-color
color: $tabs-toggle-link-active-color
z-index: 1
ul
border-bottom: none
&.is-toggle-rounded
li
&:first-child a
border-bottom-left-radius: $radius-rounded
border-top-left-radius: $radius-rounded
padding-left: 1.25em
&:last-child a
border-bottom-right-radius: $radius-rounded
border-top-right-radius: $radius-rounded
padding-right: 1.25em
// Sizes
&.is-small
font-size: $size-small
&.is-medium
font-size: $size-medium
&.is-large
font-size: $size-large

View File

@ -1,16 +0,0 @@
@charset "utf-8"
@import "box.sass"
@import "button.sass"
@import "container.sass"
@import "content.sass"
@import "form.sass"
@import "icon.sass"
@import "image.sass"
@import "notification.sass"
@import "progress.sass"
@import "table.sass"
@import "tag.sass"
@import "title.sass"
@import "other.sass"

View File

@ -1,24 +0,0 @@
$box-color: $text !default
$box-background-color: $white !default
$box-radius: $radius-large !default
$box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
$box-padding: 1.25rem !default
$box-link-hover-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $link !default
$box-link-active-shadow: inset 0 1px 2px rgba($black, 0.2), 0 0 0 1px $link !default
.box
@extend %block
background-color: $box-background-color
border-radius: $box-radius
box-shadow: $box-shadow
color: $box-color
display: block
padding: $box-padding
a.box
&:hover,
&:focus
box-shadow: $box-link-hover-shadow
&:active
box-shadow: $box-link-active-shadow

View File

@ -1,275 +0,0 @@
$button-color: $grey-darker !default
$button-background-color: $white !default
$button-border-color: $grey-lighter !default
$button-border-width: $control-border-width !default
$button-padding-vertical: calc(0.375em - #{$button-border-width}) !default
$button-padding-horizontal: 0.75em !default
$button-hover-color: $link-hover !default
$button-hover-border-color: $link-hover-border !default
$button-focus-color: $link-focus !default
$button-focus-border-color: $link-focus-border !default
$button-focus-box-shadow-size: 0 0 0 0.125em !default
$button-focus-box-shadow-color: rgba($link, 0.25) !default
$button-active-color: $link-active !default
$button-active-border-color: $link-active-border !default
$button-text-color: $text !default
$button-text-hover-background-color: $background !default
$button-text-hover-color: $text-strong !default
$button-disabled-background-color: $white !default
$button-disabled-border-color: $grey-lighter !default
$button-disabled-shadow: none !default
$button-disabled-opacity: 0.5 !default
$button-static-color: $grey !default
$button-static-background-color: $white-ter !default
$button-static-border-color: $grey-lighter !default
// The button sizes use mixins so they can be used at different breakpoints
=button-small
border-radius: $radius-small
font-size: $size-small
=button-normal
font-size: $size-normal
=button-medium
font-size: $size-medium
=button-large
font-size: $size-large
.button
@extend %control
@extend %unselectable
background-color: $button-background-color
border-color: $button-border-color
border-width: $button-border-width
color: $button-color
cursor: pointer
justify-content: center
padding-bottom: $button-padding-vertical
padding-left: $button-padding-horizontal
padding-right: $button-padding-horizontal
padding-top: $button-padding-vertical
text-align: center
white-space: nowrap
strong
color: inherit
.icon
&,
&.is-small,
&.is-medium,
&.is-large
height: 1.5em
width: 1.5em
&:first-child:not(:last-child)
margin-left: calc(-0.375em - #{$button-border-width})
margin-right: 0.1875em
&:last-child:not(:first-child)
margin-left: 0.1875em
margin-right: calc(-0.375em - #{$button-border-width})
&:first-child:last-child
margin-left: calc(-0.375em - #{$button-border-width})
margin-right: calc(-0.375em - #{$button-border-width})
// States
&:hover,
&.is-hovered
border-color: $button-hover-border-color
color: $button-hover-color
&:focus,
&.is-focused
border-color: $button-focus-border-color
color: $button-focus-color
&:not(:active)
box-shadow: $button-focus-box-shadow-size $button-focus-box-shadow-color
&:active,
&.is-active
border-color: $button-active-border-color
color: $button-active-color
// Colors
&.is-text
background-color: transparent
border-color: transparent
color: $button-text-color
text-decoration: underline
&:hover,
&.is-hovered,
&:focus,
&.is-focused
background-color: $button-text-hover-background-color
color: $button-text-hover-color
&:active,
&.is-active
background-color: darken($button-text-hover-background-color, 5%)
color: $button-text-hover-color
&[disabled],
fieldset[disabled] &
background-color: transparent
border-color: transparent
box-shadow: none
@each $name, $pair in $colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
&.is-#{$name}
background-color: $color
border-color: transparent
color: $color-invert
&:hover,
&.is-hovered
background-color: darken($color, 2.5%)
border-color: transparent
color: $color-invert
&:focus,
&.is-focused
border-color: transparent
color: $color-invert
&:not(:active)
box-shadow: $button-focus-box-shadow-size rgba($color, 0.25)
&:active,
&.is-active
background-color: darken($color, 5%)
border-color: transparent
color: $color-invert
&[disabled],
fieldset[disabled] &
background-color: $color
border-color: transparent
box-shadow: none
&.is-inverted
background-color: $color-invert
color: $color
&:hover
background-color: darken($color-invert, 5%)
&[disabled],
fieldset[disabled] &
background-color: $color-invert
border-color: transparent
box-shadow: none
color: $color
&.is-loading
&::after
border-color: transparent transparent $color-invert $color-invert !important
&.is-outlined
background-color: transparent
border-color: $color
color: $color
&:hover,
&:focus
background-color: $color
border-color: $color
color: $color-invert
&.is-loading
&::after
border-color: transparent transparent $color $color !important
&[disabled],
fieldset[disabled] &
background-color: transparent
border-color: $color
box-shadow: none
color: $color
&.is-inverted.is-outlined
background-color: transparent
border-color: $color-invert
color: $color-invert
&:hover,
&:focus
background-color: $color-invert
color: $color
&[disabled],
fieldset[disabled] &
background-color: transparent
border-color: $color-invert
box-shadow: none
color: $color-invert
// Sizes
&.is-small
+button-small
&.is-normal
+button-normal
&.is-medium
+button-medium
&.is-large
+button-large
// Modifiers
&[disabled],
fieldset[disabled] &
background-color: $button-disabled-background-color
border-color: $button-disabled-border-color
box-shadow: $button-disabled-shadow
opacity: $button-disabled-opacity
&.is-fullwidth
display: flex
width: 100%
&.is-loading
color: transparent !important
pointer-events: none
&::after
@extend %loader
+center(1em)
position: absolute !important
&.is-static
background-color: $button-static-background-color
border-color: $button-static-border-color
color: $button-static-color
box-shadow: none
pointer-events: none
&.is-rounded
border-radius: $radius-rounded
padding-left: 1em
padding-right: 1em
.buttons
align-items: center
display: flex
flex-wrap: wrap
justify-content: flex-start
.button
margin-bottom: 0.5rem
&:not(:last-child):not(.is-fullwidth)
margin-right: 0.5rem
&:last-child
margin-bottom: -0.5rem
&:not(:last-child)
margin-bottom: 1rem
// Sizes
&.are-small
.button:not(.is-normal):not(.is-medium):not(.is-large)
+button-small
&.are-medium
.button:not(.is-small):not(.is-normal):not(.is-large)
+button-medium
&.are-large
.button:not(.is-small):not(.is-normal):not(.is-medium)
+button-large
&.has-addons
.button
&:not(:first-child)
border-bottom-left-radius: 0
border-top-left-radius: 0
&:not(:last-child)
border-bottom-right-radius: 0
border-top-right-radius: 0
margin-right: -1px
&:last-child
margin-right: 0
&:hover,
&.is-hovered
z-index: 2
&:focus,
&.is-focused,
&:active,
&.is-active,
&.is-selected
z-index: 3
&:hover
z-index: 4
&.is-expanded
flex-grow: 1
&.is-centered
justify-content: center
&.is-right
justify-content: flex-end

View File

@ -1,25 +0,0 @@
.container
margin: 0 auto
position: relative
+desktop
max-width: $desktop - (2 * $gap)
width: $desktop - (2 * $gap)
&.is-fluid
margin-left: $gap
margin-right: $gap
max-width: none
width: auto
+until-widescreen
&.is-widescreen
max-width: $widescreen - (2 * $gap)
width: auto
+until-fullhd
&.is-fullhd
max-width: $fullhd - (2 * $gap)
width: auto
+widescreen
max-width: $widescreen - (2 * $gap)
width: $widescreen - (2 * $gap)
+fullhd
max-width: $fullhd - (2 * $gap)
width: $fullhd - (2 * $gap)

View File

@ -1,151 +0,0 @@
$content-heading-color: $text-strong !default
$content-heading-weight: $weight-semibold !default
$content-heading-line-height: 1.125 !default
$content-blockquote-background-color: $background !default
$content-blockquote-border-left: 5px solid $border !default
$content-blockquote-padding: 1.25em 1.5em !default
$content-pre-padding: 1.25em 1.5em !default
$content-table-cell-border: 1px solid $border !default
$content-table-cell-border-width: 0 0 1px !default
$content-table-cell-padding: 0.5em 0.75em !default
$content-table-cell-heading-color: $text-strong !default
$content-table-head-cell-border-width: 0 0 2px !default
$content-table-head-cell-color: $text-strong !default
$content-table-foot-cell-border-width: 2px 0 0 !default
$content-table-foot-cell-color: $text-strong !default
.content
@extend %block
// Inline
li + li
margin-top: 0.25em
// Block
p,
dl,
ol,
ul,
blockquote,
pre,
table
&:not(:last-child)
margin-bottom: 1em
h1,
h2,
h3,
h4,
h5,
h6
color: $content-heading-color
font-weight: $content-heading-weight
line-height: $content-heading-line-height
h1
font-size: 2em
margin-bottom: 0.5em
&:not(:first-child)
margin-top: 1em
h2
font-size: 1.75em
margin-bottom: 0.5714em
&:not(:first-child)
margin-top: 1.1428em
h3
font-size: 1.5em
margin-bottom: 0.6666em
&:not(:first-child)
margin-top: 1.3333em
h4
font-size: 1.25em
margin-bottom: 0.8em
h5
font-size: 1.125em
margin-bottom: 0.8888em
h6
font-size: 1em
margin-bottom: 1em
blockquote
background-color: $content-blockquote-background-color
border-left: $content-blockquote-border-left
padding: $content-blockquote-padding
ol
list-style-position: outside
margin-left: 2em
margin-top: 1em
&:not([type])
list-style-type: decimal
&.is-lower-alpha
list-style-type: lower-alpha
&.is-lower-roman
list-style-type: lower-roman
&.is-upper-alpha
list-style-type: upper-alpha
&.is-upper-roman
list-style-type: upper-roman
ul
list-style: disc outside
margin-left: 2em
margin-top: 1em
ul
list-style-type: circle
margin-top: 0.5em
ul
list-style-type: square
dd
margin-left: 2em
figure
margin-left: 2em
margin-right: 2em
text-align: center
&:not(:first-child)
margin-top: 2em
&:not(:last-child)
margin-bottom: 2em
img
display: inline-block
figcaption
font-style: italic
pre
+overflow-touch
overflow-x: auto
padding: $content-pre-padding
white-space: pre
word-wrap: normal
sup,
sub
font-size: 75%
table
width: 100%
td,
th
border: $content-table-cell-border
border-width: $content-table-cell-border-width
padding: $content-table-cell-padding
vertical-align: top
th
color: $content-table-cell-heading-color
text-align: left
thead
td,
th
border-width: $content-table-head-cell-border-width
color: $content-table-head-cell-color
tfoot
td,
th
border-width: $content-table-foot-cell-border-width
color: $content-table-foot-cell-color
tbody
tr
&:last-child
td,
th
border-bottom-width: 0
// Sizes
&.is-small
font-size: $size-small
&.is-medium
font-size: $size-medium
&.is-large
font-size: $size-large

View File

@ -1,602 +0,0 @@
$input-color: $grey-darker !default
$input-background-color: $white !default
$input-border-color: $grey-lighter !default
$input-height: $control-height !default
$input-shadow: inset 0 1px 2px rgba($black, 0.1) !default
$input-placeholder-color: rgba($input-color, 0.3) !default
$input-hover-color: $grey-darker !default
$input-hover-border-color: $grey-light !default
$input-focus-color: $grey-darker !default
$input-focus-border-color: $link !default
$input-focus-box-shadow-size: 0 0 0 0.125em !default
$input-focus-box-shadow-color: rgba($link, 0.25) !default
$input-disabled-color: $text-light !default
$input-disabled-background-color: $background !default
$input-disabled-border-color: $background !default
$input-disabled-placeholder-color: rgba($input-disabled-color, 0.3) !default
$input-arrow: $link !default
$input-icon-color: $grey-lighter !default
$input-icon-active-color: $grey !default
$input-radius: $radius !default
$file-border-color: $border !default
$file-radius: $radius !default
$file-cta-background-color: $white-ter !default
$file-cta-color: $grey-dark !default
$file-cta-hover-color: $grey-darker !default
$file-cta-active-color: $grey-darker !default
$file-name-border-color: $border !default
$file-name-border-style: solid !default
$file-name-border-width: 1px 1px 1px 0 !default
$file-name-max-width: 16em !default
$label-color: $grey-darker !default
$label-weight: $weight-bold !default
$help-size: $size-small !default
=input
@extend %control
background-color: $input-background-color
border-color: $input-border-color
color: $input-color
+placeholder
color: $input-placeholder-color
&:hover,
&.is-hovered
border-color: $input-hover-border-color
&:focus,
&.is-focused,
&:active,
&.is-active
border-color: $input-focus-border-color
box-shadow: $input-focus-box-shadow-size $input-focus-box-shadow-color
&[disabled],
fieldset[disabled] &
background-color: $input-disabled-background-color
border-color: $input-disabled-border-color
box-shadow: none
color: $input-disabled-color
+placeholder
color: $input-disabled-placeholder-color
.input,
.textarea
+input
box-shadow: $input-shadow
max-width: 100%
width: 100%
&[readonly]
box-shadow: none
// Colors
@each $name, $pair in $colors
$color: nth($pair, 1)
&.is-#{$name}
border-color: $color
&:focus,
&.is-focused,
&:active,
&.is-active
box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
// Sizes
&.is-small
+control-small
&.is-medium
+control-medium
&.is-large
+control-large
// Modifiers
&.is-fullwidth
display: block
width: 100%
&.is-inline
display: inline
width: auto
.input
&.is-rounded
border-radius: $radius-rounded
padding-left: 1em
padding-right: 1em
&.is-static
background-color: transparent
border-color: transparent
box-shadow: none
padding-left: 0
padding-right: 0
.textarea
display: block
max-width: 100%
min-width: 100%
padding: 0.625em
resize: vertical
&:not([rows])
max-height: 600px
min-height: 120px
&[rows]
height: initial
// Modifiers
&.has-fixed-size
resize: none
.checkbox,
.radio
cursor: pointer
display: inline-block
line-height: 1.25
position: relative
input
cursor: pointer
&:hover
color: $input-hover-color
&[disabled],
fieldset[disabled] &
color: $input-disabled-color
cursor: not-allowed
.radio
& + .radio
margin-left: 0.5em
.select
display: inline-block
max-width: 100%
position: relative
vertical-align: top
&:not(.is-multiple)
height: $input-height
&:not(.is-multiple):not(.is-loading)
&::after
@extend %arrow
border-color: $input-arrow
right: 1.125em
z-index: 4
&.is-rounded
select
border-radius: $radius-rounded
padding-left: 1em
select
+input
cursor: pointer
display: block
font-size: 1em
max-width: 100%
outline: none
&::-ms-expand
display: none
&[disabled]:hover,
fieldset[disabled] &:hover
border-color: $input-disabled-border-color
&:not([multiple])
padding-right: 2.5em
&[multiple]
height: auto
padding: 0
option
padding: 0.5em 1em
// States
&:not(.is-multiple):not(.is-loading):hover
&::after
border-color: $input-hover-color
// Colors
@each $name, $pair in $colors
$color: nth($pair, 1)
&.is-#{$name}
&:not(:hover)::after
border-color: $color
select
border-color: $color
&:hover,
&.is-hovered
border-color: darken($color, 5%)
&:focus,
&.is-focused,
&:active,
&.is-active
box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
// Sizes
&.is-small
+control-small
&.is-medium
+control-medium
&.is-large
+control-large
// Modifiers
&.is-disabled
&::after
border-color: $input-disabled-color
&.is-fullwidth
width: 100%
select
width: 100%
&.is-loading
&::after
@extend %loader
margin-top: 0
position: absolute
right: 0.625em
top: 0.625em
transform: none
&.is-small:after
font-size: $size-small
&.is-medium:after
font-size: $size-medium
&.is-large:after
font-size: $size-large
.file
@extend %unselectable
align-items: stretch
display: flex
justify-content: flex-start
position: relative
// Colors
@each $name, $pair in $colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
&.is-#{$name}
.file-cta
background-color: $color
border-color: transparent
color: $color-invert
&:hover,
&.is-hovered
.file-cta
background-color: darken($color, 2.5%)
border-color: transparent
color: $color-invert
&:focus,
&.is-focused
.file-cta
border-color: transparent
box-shadow: 0 0 0.5em rgba($color, 0.25)
color: $color-invert
&:active,
&.is-active
.file-cta
background-color: darken($color, 5%)
border-color: transparent
color: $color-invert
// Sizes
&.is-small
font-size: $size-small
&.is-medium
font-size: $size-medium
.file-icon
.fa
font-size: 21px
&.is-large
font-size: $size-large
.file-icon
.fa
font-size: 28px
// Modifiers
&.has-name
.file-cta
border-bottom-right-radius: 0
border-top-right-radius: 0
.file-name
border-bottom-left-radius: 0
border-top-left-radius: 0
&.is-empty
.file-cta
border-radius: $file-radius
.file-name
display: none
&.is-boxed
.file-label
flex-direction: column
.file-cta
flex-direction: column
height: auto
padding: 1em 3em
.file-name
border-width: 0 1px 1px
.file-icon
height: 1.5em
width: 1.5em
.fa
font-size: 21px
&.is-small
.file-icon .fa
font-size: 14px
&.is-medium
.file-icon .fa
font-size: 28px
&.is-large
.file-icon .fa
font-size: 35px
&.has-name
.file-cta
border-radius: $file-radius $file-radius 0 0
.file-name
border-radius: 0 0 $file-radius $file-radius
border-width: 0 1px 1px
&.is-centered
justify-content: center
&.is-fullwidth
.file-label
width: 100%
.file-name
flex-grow: 1
max-width: none
&.is-right
justify-content: flex-end
.file-cta
border-radius: 0 $file-radius $file-radius 0
.file-name
border-radius: $file-radius 0 0 $file-radius
border-width: 1px 0 1px 1px
order: -1
.file-label
align-items: stretch
display: flex
cursor: pointer
justify-content: flex-start
overflow: hidden
position: relative
&:hover
.file-cta
background-color: darken($file-cta-background-color, 2.5%)
color: $file-cta-hover-color
.file-name
border-color: darken($file-name-border-color, 2.5%)
&:active
.file-cta
background-color: darken($file-cta-background-color, 5%)
color: $file-cta-active-color
.file-name
border-color: darken($file-name-border-color, 5%)
.file-input
height: 100%
left: 0
opacity: 0
outline: none
position: absolute
top: 0
width: 100%
.file-cta,
.file-name
@extend %control
border-color: $file-border-color
border-radius: $file-radius
font-size: 1em
padding-left: 1em
padding-right: 1em
white-space: nowrap
.file-cta
background-color: $file-cta-background-color
color: $file-cta-color
.file-name
border-color: $file-name-border-color
border-style: $file-name-border-style
border-width: $file-name-border-width
display: block
max-width: $file-name-max-width
overflow: hidden
text-align: left
text-overflow: ellipsis
.file-icon
align-items: center
display: flex
height: 1em
justify-content: center
margin-right: 0.5em
width: 1em
.fa
font-size: 14px
.label
color: $label-color
display: block
font-size: $size-normal
font-weight: $label-weight
&:not(:last-child)
margin-bottom: 0.5em
// Sizes
&.is-small
font-size: $size-small
&.is-medium
font-size: $size-medium
&.is-large
font-size: $size-large
.help
display: block
font-size: $help-size
margin-top: 0.25rem
@each $name, $pair in $colors
$color: nth($pair, 1)
&.is-#{$name}
color: $color
// Containers
.field
&:not(:last-child)
margin-bottom: 0.75rem
// Modifiers
&.has-addons
display: flex
justify-content: flex-start
.control
&:not(:last-child)
margin-right: -1px
&:not(:first-child):not(:last-child)
.button,
.input,
.select select
border-radius: 0
&:first-child:not(:only-child)
.button,
.input,
.select select
border-bottom-right-radius: 0
border-top-right-radius: 0
&:last-child:not(:only-child)
.button,
.input,
.select select
border-bottom-left-radius: 0
border-top-left-radius: 0
.button,
.input,
.select select
&:not([disabled])
&:hover,
&.is-hovered
z-index: 2
&:focus,
&.is-focused,
&:active,
&.is-active
z-index: 3
&:hover
z-index: 4
&.is-expanded
flex-grow: 1
&.has-addons-centered
justify-content: center
&.has-addons-right
justify-content: flex-end
&.has-addons-fullwidth
.control
flex-grow: 1
flex-shrink: 0
&.is-grouped
display: flex
justify-content: flex-start
& > .control
flex-shrink: 0
&:not(:last-child)
margin-bottom: 0
margin-right: 0.75rem
&.is-expanded
flex-grow: 1
flex-shrink: 1
&.is-grouped-centered
justify-content: center
&.is-grouped-right
justify-content: flex-end
&.is-grouped-multiline
flex-wrap: wrap
& > .control
&:last-child,
&:not(:last-child)
margin-bottom: 0.75rem
&:last-child
margin-bottom: -0.75rem
&:not(:last-child)
margin-bottom: 0
&.is-horizontal
+tablet
display: flex
.field-label
.label
font-size: inherit
+mobile
margin-bottom: 0.5rem
+tablet
flex-basis: 0
flex-grow: 1
flex-shrink: 0
margin-right: 1.5rem
text-align: right
&.is-small
font-size: $size-small
padding-top: 0.375em
&.is-normal
padding-top: 0.375em
&.is-medium
font-size: $size-medium
padding-top: 0.375em
&.is-large
font-size: $size-large
padding-top: 0.375em
.field-body
.field .field
margin-bottom: 0
+tablet
display: flex
flex-basis: 0
flex-grow: 5
flex-shrink: 1
.field
margin-bottom: 0
& > .field
flex-shrink: 1
&:not(.is-narrow)
flex-grow: 1
&:not(:last-child)
margin-right: 0.75rem
.control
box-sizing: border-box
clear: both //fixes the icon floating out of the input when help text is floated right
font-size: $size-normal
position: relative
text-align: left
// Modifiers
&.has-icons-left,
&.has-icons-right
.input,
.select
&:focus
& ~ .icon
color: $input-icon-active-color
&.is-small ~ .icon
font-size: $size-small
&.is-medium ~ .icon
font-size: $size-medium
&.is-large ~ .icon
font-size: $size-large
.icon
color: $input-icon-color
height: $input-height
pointer-events: none
position: absolute
top: 0
width: $input-height
z-index: 4
&.has-icons-left
.input,
.select select
padding-left: $input-height
.icon.is-left
left: 0
&.has-icons-right
.input,
.select select
padding-right: $input-height
.icon.is-right
right: 0
&.is-loading
&::after
@extend %loader
position: absolute !important
right: 0.625em
top: 0.625em
z-index: 4
&.is-small:after
font-size: $size-small
&.is-medium:after
font-size: $size-medium
&.is-large:after
font-size: $size-large

View File

@ -1,21 +0,0 @@
$icon-dimensions: 1.5rem !default
$icon-dimensions-small: 1rem !default
$icon-dimensions-medium: 2rem !default
$icon-dimensions-large: 3rem !default
.icon
align-items: center
display: inline-flex
justify-content: center
height: $icon-dimensions
width: $icon-dimensions
// Sizes
&.is-small
height: $icon-dimensions-small
width: $icon-dimensions-small
&.is-medium
height: $icon-dimensions-medium
width: $icon-dimensions-medium
&.is-large
height: $icon-dimensions-large
width: $icon-dimensions-large

View File

@ -1,69 +0,0 @@
$dimensions: 16 24 32 48 64 96 128 !default
.image
display: block
position: relative
img
display: block
height: auto
width: 100%
&.is-rounded
border-radius: $radius-rounded
// Ratio
&.is-square,
&.is-1by1,
&.is-5by4,
&.is-4by3,
&.is-3by2,
&.is-5by3,
&.is-16by9,
&.is-2by1,
&.is-3by1,
&.is-4by5,
&.is-3by4,
&.is-2by3,
&.is-3by5,
&.is-9by16,
&.is-1by2,
&.is-1by3
img,
.has-ratio
@extend %overlay
height: 100%
width: 100%
&.is-square,
&.is-1by1
padding-top: 100%
&.is-5by4
padding-top: 80%
&.is-4by3
padding-top: 75%
&.is-3by2
padding-top: 66.6666%
&.is-5by3
padding-top: 60%
&.is-16by9
padding-top: 56.25%
&.is-2by1
padding-top: 50%
&.is-3by1
padding-top: 33.3333%
&.is-4by5
padding-top: 125%
&.is-3by4
padding-top: 133.3333%
&.is-2by3
padding-top: 150%
&.is-3by5
padding-top: 166.6666%
&.is-9by16
padding-top: 177.7777%
&.is-1by2
padding-top: 200%
&.is-1by3
padding-top: 300%
// Sizes
@each $dimension in $dimensions
&.is-#{$dimension}x#{$dimension}
height: $dimension * 1px
width: $dimension * 1px

View File

@ -1,35 +0,0 @@
$notification-background-color: $background !default
$notification-radius: $radius !default
$notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
.notification
@extend %block
background-color: $notification-background-color
border-radius: $notification-radius
padding: $notification-padding
position: relative
a:not(.button):not(.dropdown-item)
color: currentColor
text-decoration: underline
strong
color: currentColor
code,
pre
background: $white
pre code
background: transparent
& > .delete
position: absolute
right: 0.5rem
top: 0.5rem
.title,
.subtitle,
.content
color: currentColor
// Colors
@each $name, $pair in $colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
&.is-#{$name}
background-color: $color
color: $color-invert

View File

@ -1,39 +0,0 @@
.block
@extend %block
.delete
@extend %delete
.heading
display: block
font-size: 11px
letter-spacing: 1px
margin-bottom: 5px
text-transform: uppercase
.highlight
@extend %block
font-weight: $weight-normal
max-width: 100%
overflow: hidden
padding: 0
pre
overflow: auto
max-width: 100%
.loader
@extend %loader
.number
align-items: center
background-color: $background
border-radius: $radius-rounded
display: inline-flex
font-size: $size-medium
height: 2em
justify-content: center
margin-right: 1.5rem
min-width: 2.5em
padding: 0.25rem 0.5rem
text-align: center
vertical-align: top

View File

@ -1,65 +0,0 @@
$progress-bar-background-color: $border !default
$progress-value-background-color: $text !default
$progress-indeterminate-duration: 1.5s !default
.progress
@extend %block
-moz-appearance: none
-webkit-appearance: none
border: none
border-radius: $radius-rounded
display: block
height: $size-normal
overflow: hidden
padding: 0
width: 100%
&::-webkit-progress-bar
background-color: $progress-bar-background-color
&::-webkit-progress-value
background-color: $progress-value-background-color
&::-moz-progress-bar
background-color: $progress-value-background-color
&::-ms-fill
background-color: $progress-value-background-color
border: none
&:indeterminate
animation-duration: $progress-indeterminate-duration
animation-iteration-count: infinite
animation-name: moveIndeterminate
animation-timing-function: linear
background-color: $progress-bar-background-color
background-image: linear-gradient(to right, $text 30%, $progress-bar-background-color 30%)
background-position: top left
background-repeat: no-repeat
background-size: 150% 150%
&::-webkit-progress-bar
background-color: transparent
&::-moz-progress-bar
background-color: transparent
// Colors
@each $name, $pair in $colors
$color: nth($pair, 1)
&.is-#{$name}
&::-webkit-progress-value
background-color: $color
&::-moz-progress-bar
background-color: $color
&::-ms-fill
background-color: $color
&:indeterminate
background-image: linear-gradient(to right, $color 30%, $progress-bar-background-color 30%)
// Sizes
&.is-small
height: $size-small
&.is-medium
height: $size-medium
&.is-large
height: $size-large
@keyframes moveIndeterminate
from
background-position: 200% 0
to
background-position: -200% 0

View File

@ -1,126 +0,0 @@
$table-color: $grey-darker !default
$table-background-color: $white !default
$table-cell-border: 1px solid $grey-lighter !default
$table-cell-border-width: 0 0 1px !default
$table-cell-padding: 0.5em 0.75em !default
$table-cell-heading-color: $text-strong !default
$table-head-cell-border-width: 0 0 2px !default
$table-head-cell-color: $text-strong !default
$table-foot-cell-border-width: 2px 0 0 !default
$table-foot-cell-color: $text-strong !default
$table-head-background-color: transparent !default
$table-body-background-color: transparent !default
$table-foot-background-color: transparent !default
$table-row-hover-background-color: $white-bis !default
$table-row-active-background-color: $primary !default
$table-row-active-color: $primary-invert !default
$table-striped-row-even-background-color: $white-bis !default
$table-striped-row-even-hover-background-color: $white-ter !default
.table
@extend %block
background-color: $table-background-color
color: $table-color
td,
th
border: $table-cell-border
border-width: $table-cell-border-width
padding: $table-cell-padding
vertical-align: top
// Colors
@each $name, $pair in $colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
&.is-#{$name}
background-color: $color
border-color: $color
color: $color-invert
// Modifiers
&.is-narrow
white-space: nowrap
width: 1%
&.is-selected
background-color: $table-row-active-background-color
color: $table-row-active-color
a,
strong
color: currentColor
th
color: $table-cell-heading-color
text-align: left
tr
&.is-selected
background-color: $table-row-active-background-color
color: $table-row-active-color
a,
strong
color: currentColor
td,
th
border-color: $table-row-active-color
color: currentColor
thead
background-color: $table-head-background-color
td,
th
border-width: $table-head-cell-border-width
color: $table-head-cell-color
tfoot
background-color: $table-foot-background-color
td,
th
border-width: $table-foot-cell-border-width
color: $table-foot-cell-color
tbody
background-color: $table-body-background-color
tr
&:last-child
td,
th
border-bottom-width: 0
// Modifiers
&.is-bordered
td,
th
border-width: 1px
tr
&:last-child
td,
th
border-bottom-width: 1px
&.is-fullwidth
width: 100%
&.is-hoverable
tbody
tr:not(.is-selected)
&:hover
background-color: $table-row-hover-background-color
&.is-striped
tbody
tr:not(.is-selected)
&:hover
background-color: $table-row-hover-background-color
&:nth-child(even)
background-color: $table-striped-row-even-hover-background-color
&.is-narrow
td,
th
padding: 0.25em 0.5em
&.is-striped
tbody
tr:not(.is-selected)
&:nth-child(even)
background-color: $table-striped-row-even-background-color
.table-container
@extend %block
+overflow-touch
overflow: auto
overflow-y: hidden
max-width: 100%

View File

@ -1,130 +0,0 @@
$tag-background-color: $background !default
$tag-color: $text !default
$tag-radius: $radius !default
$tag-delete-margin: 1px !default
.tags
align-items: center
display: flex
flex-wrap: wrap
justify-content: flex-start
.tag
margin-bottom: 0.5rem
&:not(:last-child)
margin-right: 0.5rem
&:last-child
margin-bottom: -0.5rem
&:not(:last-child)
margin-bottom: 1rem
// Sizes
&.are-medium
.tag:not(.is-normal):not(.is-large)
font-size: $size-normal
&.are-large
.tag:not(.is-normal):not(.is-medium)
font-size: $size-medium
&.has-addons
.tag
margin-right: 0
&:not(:first-child)
border-bottom-left-radius: 0
border-top-left-radius: 0
&:not(:last-child)
border-bottom-right-radius: 0
border-top-right-radius: 0
&.is-centered
justify-content: center
.tag
margin-right: 0.25rem
margin-left: 0.25rem
&.is-right
justify-content: flex-end
.tag
&:not(:first-child)
margin-left: 0.5rem
&:not(:last-child)
margin-right: 0
&.has-addons
.tag
margin-right: 0
&:not(:first-child)
margin-left: 0
border-bottom-left-radius: 0
border-top-left-radius: 0
&:not(:last-child)
border-bottom-right-radius: 0
border-top-right-radius: 0
.tag:not(body)
align-items: center
background-color: $tag-background-color
border-radius: $tag-radius
color: $tag-color
display: inline-flex
font-size: $size-small
height: 2em
justify-content: center
line-height: 1.5
padding-left: 0.75em
padding-right: 0.75em
white-space: nowrap
.delete
margin-left: 0.25rem
margin-right: -0.375rem
// Colors
@each $name, $pair in $colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
&.is-#{$name}
background-color: $color
color: $color-invert
// Sizes
&.is-normal
font-size: $size-small
&.is-medium
font-size: $size-normal
&.is-large
font-size: $size-medium
.icon
&:first-child:not(:last-child)
margin-left: -0.375em
margin-right: 0.1875em
&:last-child:not(:first-child)
margin-left: 0.1875em
margin-right: -0.375em
&:first-child:last-child
margin-left: -0.375em
margin-right: -0.375em
// Modifiers
&.is-delete
margin-left: $tag-delete-margin
padding: 0
position: relative
width: 2em
&::before,
&::after
background-color: currentColor
content: ""
display: block
left: 50%
position: absolute
top: 50%
transform: translateX(-50%) translateY(-50%) rotate(45deg)
transform-origin: center center
&::before
height: 1px
width: 50%
&::after
height: 50%
width: 1px
&:hover,
&:focus
background-color: darken($tag-background-color, 5%)
&:active
background-color: darken($tag-background-color, 10%)
&.is-rounded
border-radius: $radius-rounded
a.tag
&:hover
text-decoration: underline

View File

@ -1,64 +0,0 @@
$title-color: $grey-darker !default
$title-size: $size-3 !default
$title-weight: $weight-semibold !default
$title-line-height: 1.125 !default
$title-strong-color: inherit !default
$title-strong-weight: inherit !default
$title-sub-size: 0.75em !default
$title-sup-size: 0.75em !default
$subtitle-color: $grey-dark !default
$subtitle-size: $size-5 !default
$subtitle-weight: $weight-normal !default
$subtitle-line-height: 1.25 !default
$subtitle-strong-color: $grey-darker !default
$subtitle-strong-weight: $weight-semibold !default
$subtitle-negative-margin: -1.25rem !default
.title,
.subtitle
@extend %block
word-break: break-word
em,
span
font-weight: inherit
sub
font-size: $title-sub-size
sup
font-size: $title-sup-size
.tag
vertical-align: middle
.title
color: $title-color
font-size: $title-size
font-weight: $title-weight
line-height: $title-line-height
strong
color: $title-strong-color
font-weight: $title-strong-weight
& + .highlight
margin-top: -0.75rem
&:not(.is-spaced) + .subtitle
margin-top: $subtitle-negative-margin
// Sizes
@each $size in $sizes
$i: index($sizes, $size)
&.is-#{$i}
font-size: $size
.subtitle
color: $subtitle-color
font-size: $subtitle-size
font-weight: $subtitle-weight
line-height: $subtitle-line-height
strong
color: $subtitle-strong-color
font-weight: $subtitle-strong-weight
&:not(.is-spaced) + .title
margin-top: $subtitle-negative-margin
// Sizes
@each $size in $sizes
$i: index($sizes, $size)
&.is-#{$i}
font-size: $size

View File

@ -1,4 +0,0 @@
@charset "utf-8"
@import "columns.sass"
@import "tiles.sass"

View File

@ -1,504 +0,0 @@
$column-gap: 0.75rem !default
.column
display: block
flex-basis: 0
flex-grow: 1
flex-shrink: 1
padding: $column-gap
.columns.is-mobile > &.is-narrow
flex: none
.columns.is-mobile > &.is-full
flex: none
width: 100%
.columns.is-mobile > &.is-three-quarters
flex: none
width: 75%
.columns.is-mobile > &.is-two-thirds
flex: none
width: 66.6666%
.columns.is-mobile > &.is-half
flex: none
width: 50%
.columns.is-mobile > &.is-one-third
flex: none
width: 33.3333%
.columns.is-mobile > &.is-one-quarter
flex: none
width: 25%
.columns.is-mobile > &.is-one-fifth
flex: none
width: 20%
.columns.is-mobile > &.is-two-fifths
flex: none
width: 40%
.columns.is-mobile > &.is-three-fifths
flex: none
width: 60%
.columns.is-mobile > &.is-four-fifths
flex: none
width: 80%
.columns.is-mobile > &.is-offset-three-quarters
margin-left: 75%
.columns.is-mobile > &.is-offset-two-thirds
margin-left: 66.6666%
.columns.is-mobile > &.is-offset-half
margin-left: 50%
.columns.is-mobile > &.is-offset-one-third
margin-left: 33.3333%
.columns.is-mobile > &.is-offset-one-quarter
margin-left: 25%
.columns.is-mobile > &.is-offset-one-fifth
margin-left: 20%
.columns.is-mobile > &.is-offset-two-fifths
margin-left: 40%
.columns.is-mobile > &.is-offset-three-fifths
margin-left: 60%
.columns.is-mobile > &.is-offset-four-fifths
margin-left: 80%
@for $i from 1 through 12
.columns.is-mobile > &.is-#{$i}
flex: none
width: percentage($i / 12)
.columns.is-mobile > &.is-offset-#{$i}
margin-left: percentage($i / 12)
+mobile
&.is-narrow-mobile
flex: none
&.is-full-mobile
flex: none
width: 100%
&.is-three-quarters-mobile
flex: none
width: 75%
&.is-two-thirds-mobile
flex: none
width: 66.6666%
&.is-half-mobile
flex: none
width: 50%
&.is-one-third-mobile
flex: none
width: 33.3333%
&.is-one-quarter-mobile
flex: none
width: 25%
&.is-one-fifth-mobile
flex: none
width: 20%
&.is-two-fifths-mobile
flex: none
width: 40%
&.is-three-fifths-mobile
flex: none
width: 60%
&.is-four-fifths-mobile
flex: none
width: 80%
&.is-offset-three-quarters-mobile
margin-left: 75%
&.is-offset-two-thirds-mobile
margin-left: 66.6666%
&.is-offset-half-mobile
margin-left: 50%
&.is-offset-one-third-mobile
margin-left: 33.3333%
&.is-offset-one-quarter-mobile
margin-left: 25%
&.is-offset-one-fifth-mobile
margin-left: 20%
&.is-offset-two-fifths-mobile
margin-left: 40%
&.is-offset-three-fifths-mobile
margin-left: 60%
&.is-offset-four-fifths-mobile
margin-left: 80%
@for $i from 1 through 12
&.is-#{$i}-mobile
flex: none
width: percentage($i / 12)
&.is-offset-#{$i}-mobile
margin-left: percentage($i / 12)
+tablet
&.is-narrow,
&.is-narrow-tablet
flex: none
&.is-full,
&.is-full-tablet
flex: none
width: 100%
&.is-three-quarters,
&.is-three-quarters-tablet
flex: none
width: 75%
&.is-two-thirds,
&.is-two-thirds-tablet
flex: none
width: 66.6666%
&.is-half,
&.is-half-tablet
flex: none
width: 50%
&.is-one-third,
&.is-one-third-tablet
flex: none
width: 33.3333%
&.is-one-quarter,
&.is-one-quarter-tablet
flex: none
width: 25%
&.is-one-fifth,
&.is-one-fifth-tablet
flex: none
width: 20%
&.is-two-fifths,
&.is-two-fifths-tablet
flex: none
width: 40%
&.is-three-fifths,
&.is-three-fifths-tablet
flex: none
width: 60%
&.is-four-fifths,
&.is-four-fifths-tablet
flex: none
width: 80%
&.is-offset-three-quarters,
&.is-offset-three-quarters-tablet
margin-left: 75%
&.is-offset-two-thirds,
&.is-offset-two-thirds-tablet
margin-left: 66.6666%
&.is-offset-half,
&.is-offset-half-tablet
margin-left: 50%
&.is-offset-one-third,
&.is-offset-one-third-tablet
margin-left: 33.3333%
&.is-offset-one-quarter,
&.is-offset-one-quarter-tablet
margin-left: 25%
&.is-offset-one-fifth,
&.is-offset-one-fifth-tablet
margin-left: 20%
&.is-offset-two-fifths,
&.is-offset-two-fifths-tablet
margin-left: 40%
&.is-offset-three-fifths,
&.is-offset-three-fifths-tablet
margin-left: 60%
&.is-offset-four-fifths,
&.is-offset-four-fifths-tablet
margin-left: 80%
@for $i from 1 through 12
&.is-#{$i},
&.is-#{$i}-tablet
flex: none
width: percentage($i / 12)
&.is-offset-#{$i},
&.is-offset-#{$i}-tablet
margin-left: percentage($i / 12)
+touch
&.is-narrow-touch
flex: none
&.is-full-touch
flex: none
width: 100%
&.is-three-quarters-touch
flex: none
width: 75%
&.is-two-thirds-touch
flex: none
width: 66.6666%
&.is-half-touch
flex: none
width: 50%
&.is-one-third-touch
flex: none
width: 33.3333%
&.is-one-quarter-touch
flex: none
width: 25%
&.is-one-fifth-touch
flex: none
width: 20%
&.is-two-fifths-touch
flex: none
width: 40%
&.is-three-fifths-touch
flex: none
width: 60%
&.is-four-fifths-touch
flex: none
width: 80%
&.is-offset-three-quarters-touch
margin-left: 75%
&.is-offset-two-thirds-touch
margin-left: 66.6666%
&.is-offset-half-touch
margin-left: 50%
&.is-offset-one-third-touch
margin-left: 33.3333%
&.is-offset-one-quarter-touch
margin-left: 25%
&.is-offset-one-fifth-touch
margin-left: 20%
&.is-offset-two-fifths-touch
margin-left: 40%
&.is-offset-three-fifths-touch
margin-left: 60%
&.is-offset-four-fifths-touch
margin-left: 80%
@for $i from 1 through 12
&.is-#{$i}-touch
flex: none
width: percentage($i / 12)
&.is-offset-#{$i}-touch
margin-left: percentage($i / 12)
+desktop
&.is-narrow-desktop
flex: none
&.is-full-desktop
flex: none
width: 100%
&.is-three-quarters-desktop
flex: none
width: 75%
&.is-two-thirds-desktop
flex: none
width: 66.6666%
&.is-half-desktop
flex: none
width: 50%
&.is-one-third-desktop
flex: none
width: 33.3333%
&.is-one-quarter-desktop
flex: none
width: 25%
&.is-one-fifth-desktop
flex: none
width: 20%
&.is-two-fifths-desktop
flex: none
width: 40%
&.is-three-fifths-desktop
flex: none
width: 60%
&.is-four-fifths-desktop
flex: none
width: 80%
&.is-offset-three-quarters-desktop
margin-left: 75%
&.is-offset-two-thirds-desktop
margin-left: 66.6666%
&.is-offset-half-desktop
margin-left: 50%
&.is-offset-one-third-desktop
margin-left: 33.3333%
&.is-offset-one-quarter-desktop
margin-left: 25%
&.is-offset-one-fifth-desktop
margin-left: 20%
&.is-offset-two-fifths-desktop
margin-left: 40%
&.is-offset-three-fifths-desktop
margin-left: 60%
&.is-offset-four-fifths-desktop
margin-left: 80%
@for $i from 1 through 12
&.is-#{$i}-desktop
flex: none
width: percentage($i / 12)
&.is-offset-#{$i}-desktop
margin-left: percentage($i / 12)
+widescreen
&.is-narrow-widescreen
flex: none
&.is-full-widescreen
flex: none
width: 100%
&.is-three-quarters-widescreen
flex: none
width: 75%
&.is-two-thirds-widescreen
flex: none
width: 66.6666%
&.is-half-widescreen
flex: none
width: 50%
&.is-one-third-widescreen
flex: none
width: 33.3333%
&.is-one-quarter-widescreen
flex: none
width: 25%
&.is-one-fifth-widescreen
flex: none
width: 20%
&.is-two-fifths-widescreen
flex: none
width: 40%
&.is-three-fifths-widescreen
flex: none
width: 60%
&.is-four-fifths-widescreen
flex: none
width: 80%
&.is-offset-three-quarters-widescreen
margin-left: 75%
&.is-offset-two-thirds-widescreen
margin-left: 66.6666%
&.is-offset-half-widescreen
margin-left: 50%
&.is-offset-one-third-widescreen
margin-left: 33.3333%
&.is-offset-one-quarter-widescreen
margin-left: 25%
&.is-offset-one-fifth-widescreen
margin-left: 20%
&.is-offset-two-fifths-widescreen
margin-left: 40%
&.is-offset-three-fifths-widescreen
margin-left: 60%
&.is-offset-four-fifths-widescreen
margin-left: 80%
@for $i from 1 through 12
&.is-#{$i}-widescreen
flex: none
width: percentage($i / 12)
&.is-offset-#{$i}-widescreen
margin-left: percentage($i / 12)
+fullhd
&.is-narrow-fullhd
flex: none
&.is-full-fullhd
flex: none
width: 100%
&.is-three-quarters-fullhd
flex: none
width: 75%
&.is-two-thirds-fullhd
flex: none
width: 66.6666%
&.is-half-fullhd
flex: none
width: 50%
&.is-one-third-fullhd
flex: none
width: 33.3333%
&.is-one-quarter-fullhd
flex: none
width: 25%
&.is-one-fifth-fullhd
flex: none
width: 20%
&.is-two-fifths-fullhd
flex: none
width: 40%
&.is-three-fifths-fullhd
flex: none
width: 60%
&.is-four-fifths-fullhd
flex: none
width: 80%
&.is-offset-three-quarters-fullhd
margin-left: 75%
&.is-offset-two-thirds-fullhd
margin-left: 66.6666%
&.is-offset-half-fullhd
margin-left: 50%
&.is-offset-one-third-fullhd
margin-left: 33.3333%
&.is-offset-one-quarter-fullhd
margin-left: 25%
&.is-offset-one-fifth-fullhd
margin-left: 20%
&.is-offset-two-fifths-fullhd
margin-left: 40%
&.is-offset-three-fifths-fullhd
margin-left: 60%
&.is-offset-four-fifths-fullhd
margin-left: 80%
@for $i from 1 through 12
&.is-#{$i}-fullhd
flex: none
width: percentage($i / 12)
&.is-offset-#{$i}-fullhd
margin-left: percentage($i / 12)
.columns
margin-left: (-$column-gap)
margin-right: (-$column-gap)
margin-top: (-$column-gap)
&:last-child
margin-bottom: (-$column-gap)
&:not(:last-child)
margin-bottom: calc(1.5rem - #{$column-gap})
// Modifiers
&.is-centered
justify-content: center
&.is-gapless
margin-left: 0
margin-right: 0
margin-top: 0
& > .column
margin: 0
padding: 0 !important
&:not(:last-child)
margin-bottom: 1.5rem
&:last-child
margin-bottom: 0
&.is-mobile
display: flex
&.is-multiline
flex-wrap: wrap
&.is-vcentered
align-items: center
// Responsiveness
+tablet
&:not(.is-desktop)
display: flex
+desktop
// Modifiers
&.is-desktop
display: flex
@if $variable-columns
.columns.is-variable
--columnGap: 0.75rem
margin-left: calc(-1 * var(--columnGap))
margin-right: calc(-1 * var(--columnGap))
.column
padding-left: var(--columnGap)
padding-right: var(--columnGap)
@for $i from 0 through 8
&.is-#{$i}
--columnGap: #{$i * 0.25rem}
+mobile
&.is-#{$i}-mobile
--columnGap: #{$i * 0.25rem}
+tablet
&.is-#{$i}-tablet
--columnGap: #{$i * 0.25rem}
+tablet-only
&.is-#{$i}-tablet-only
--columnGap: #{$i * 0.25rem}
+touch
&.is-#{$i}-touch
--columnGap: #{$i * 0.25rem}
+desktop
&.is-#{$i}-desktop
--columnGap: #{$i * 0.25rem}
+desktop-only
&.is-#{$i}-desktop-only
--columnGap: #{$i * 0.25rem}
+widescreen
&.is-#{$i}-widescreen
--columnGap: #{$i * 0.25rem}
+widescreen-only
&.is-#{$i}-widescreen-only
--columnGap: #{$i * 0.25rem}
+fullhd
&.is-#{$i}-fullhd
--columnGap: #{$i * 0.25rem}

View File

@ -1,32 +0,0 @@
.tile
align-items: stretch
display: block
flex-basis: 0
flex-grow: 1
flex-shrink: 1
min-height: min-content
// Modifiers
&.is-ancestor
margin-left: -0.75rem
margin-right: -0.75rem
margin-top: -0.75rem
&:last-child
margin-bottom: -0.75rem
&:not(:last-child)
margin-bottom: 0.75rem
&.is-child
margin: 0 !important
&.is-parent
padding: 0.75rem
&.is-vertical
flex-direction: column
& > .tile.is-child:not(:last-child)
margin-bottom: 1.5rem !important
// Responsiveness
+tablet
&:not(.is-child)
display: flex
@for $i from 1 through 12
&.is-#{$i}
flex: none
width: ($i / 12) * 100%

View File

@ -1,5 +0,0 @@
@charset "utf-8"
@import "hero.sass"
@import "section.sass"
@import "footer.sass"

View File

@ -1,6 +0,0 @@
$footer-background-color: $white-bis !default
$footer-padding: 3rem 1.5rem 6rem !default
.footer
background-color: $footer-background-color
padding: $footer-padding

View File

@ -1,156 +0,0 @@
// Main container
.hero
align-items: stretch
display: flex
flex-direction: column
justify-content: space-between
.navbar
background: none
.tabs
ul
border-bottom: none
// Colors
@each $name, $pair in $colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
&.is-#{$name}
background-color: $color
color: $color-invert
a:not(.button):not(.dropdown-item):not(.tag),
strong
color: inherit
.title
color: $color-invert
.subtitle
color: rgba($color-invert, 0.9)
a:not(.button),
strong
color: $color-invert
.navbar-menu
+touch
background-color: $color
.navbar-item,
.navbar-link
color: rgba($color-invert, 0.7)
a.navbar-item,
.navbar-link
&:hover,
&.is-active
background-color: darken($color, 5%)
color: $color-invert
.tabs
a
color: $color-invert
opacity: 0.9
&:hover
opacity: 1
li
&.is-active a
opacity: 1
&.is-boxed,
&.is-toggle
a
color: $color-invert
&:hover
background-color: rgba($black, 0.1)
li.is-active a
&,
&:hover
background-color: $color-invert
border-color: $color-invert
color: $color
// Modifiers
&.is-bold
$gradient-top-left: darken(saturate(adjust-hue($color, -10deg), 10%), 10%)
$gradient-bottom-right: lighten(saturate(adjust-hue($color, 10deg), 5%), 5%)
background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
+mobile
.navbar-menu
background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
// Responsiveness
// +mobile
// .nav-toggle
// span
// background-color: $color-invert
// &:hover
// background-color: rgba($black, 0.1)
// &.is-active
// span
// background-color: $color-invert
// .nav-menu
// .nav-item
// border-top-color: rgba($color-invert, 0.2)
// Sizes
&.is-small
.hero-body
padding-bottom: 1.5rem
padding-top: 1.5rem
&.is-medium
+tablet
.hero-body
padding-bottom: 9rem
padding-top: 9rem
&.is-large
+tablet
.hero-body
padding-bottom: 18rem
padding-top: 18rem
&.is-halfheight,
&.is-fullheight,
&.is-fullheight-with-navbar
.hero-body
align-items: center
display: flex
& > .container
flex-grow: 1
flex-shrink: 1
&.is-halfheight
min-height: 50vh
&.is-fullheight
min-height: 100vh
// Components
.hero-video
@extend %overlay
overflow: hidden
video
left: 50%
min-height: 100%
min-width: 100%
position: absolute
top: 50%
transform: translate3d(-50%, -50%, 0)
// Modifiers
&.is-transparent
opacity: 0.3
// Responsiveness
+mobile
display: none
.hero-buttons
margin-top: 1.5rem
// Responsiveness
+mobile
.button
display: flex
&:not(:last-child)
margin-bottom: 0.75rem
+tablet
display: flex
justify-content: center
.button:not(:last-child)
margin-right: 1.5rem
// Containers
.hero-head,
.hero-foot
flex-grow: 0
flex-shrink: 0
.hero-body
flex-grow: 1
flex-shrink: 0
padding: 3rem 1.5rem

View File

@ -1,13 +0,0 @@
$section-padding: 3rem 1.5rem !default
$section-padding-medium: 9rem 1.5rem !default
$section-padding-large: 18rem 1.5rem !default
.section
padding: $section-padding
// Responsiveness
+desktop
// Sizes
&.is-medium
padding: $section-padding-medium
&.is-large
padding: $section-padding-large

View File

@ -1,8 +0,0 @@
@charset "utf-8"
@import "initial-variables.sass"
@import "functions.sass"
@import "derived-variables.sass"
@import "animations.sass"
@import "mixins.sass"
@import "controls.sass"

View File

@ -1,5 +0,0 @@
@keyframes spinAround
from
transform: rotate(0deg)
to
transform: rotate(359deg)

View File

@ -1,50 +0,0 @@
$control-radius: $radius !default
$control-radius-small: $radius-small !default
$control-border-width: 1px !default
$control-height: 2.25em !default
$control-line-height: 1.5 !default
$control-padding-vertical: calc(0.375em - #{$control-border-width}) !default
$control-padding-horizontal: calc(0.625em - #{$control-border-width}) !default
=control
-moz-appearance: none
-webkit-appearance: none
align-items: center
border: $control-border-width solid transparent
border-radius: $control-radius
box-shadow: none
display: inline-flex
font-size: $size-normal
height: $control-height
justify-content: flex-start
line-height: $control-line-height
padding-bottom: $control-padding-vertical
padding-left: $control-padding-horizontal
padding-right: $control-padding-horizontal
padding-top: $control-padding-vertical
position: relative
vertical-align: top
// States
&:focus,
&.is-focused,
&:active,
&.is-active
outline: none
&[disabled],
fieldset[disabled] &
cursor: not-allowed
%control
+control
// The controls sizes use mixins so they can be used at different breakpoints
=control-small
border-radius: $control-radius-small
font-size: $size-small
=control-medium
font-size: $size-medium
=control-large
font-size: $size-large

View File

@ -1,85 +0,0 @@
$primary: $turquoise !default
$info: $cyan !default
$success: $green !default
$warning: $yellow !default
$danger: $red !default
$light: $white-ter !default
$dark: $grey-darker !default
// Invert colors
$orange-invert: findColorInvert($orange) !default
$yellow-invert: findColorInvert($yellow) !default
$green-invert: findColorInvert($green) !default
$turquoise-invert: findColorInvert($turquoise) !default
$cyan-invert: findColorInvert($cyan) !default
$blue-invert: findColorInvert($blue) !default
$purple-invert: findColorInvert($purple) !default
$red-invert: findColorInvert($red) !default
$primary-invert: $turquoise-invert !default
$info-invert: $cyan-invert !default
$success-invert: $green-invert !default
$warning-invert: $yellow-invert !default
$danger-invert: $red-invert !default
$light-invert: $dark !default
$dark-invert: $light !default
// General colors
$background: $white-ter !default
$border: $grey-lighter !default
$border-hover: $grey-light !default
// Text colors
$text: $grey-dark !default
$text-invert: findColorInvert($text) !default
$text-light: $grey !default
$text-strong: $grey-darker !default
// Code colors
$code: $red !default
$code-background: $background !default
$pre: $text !default
$pre-background: $background !default
// Link colors
$link: $blue !default
$link-invert: $blue-invert !default
$link-visited: $purple !default
$link-hover: $grey-darker !default
$link-hover-border: $grey-light !default
$link-focus: $grey-darker !default
$link-focus-border: $blue !default
$link-active: $grey-darker !default
$link-active-border: $grey-dark !default
// Typography
$family-primary: $family-sans-serif !default
$family-secondary: $family-sans-serif !default
$family-code: $family-monospace !default
$size-small: $size-7 !default
$size-normal: $size-6 !default
$size-medium: $size-5 !default
$size-large: $size-4 !default
// Lists and maps
$custom-colors: null !default
$custom-shades: null !default
$colors: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert), "link": ($link, $link-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert)), $custom-colors) !default
$shades: mergeColorMaps(("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis), $custom-shades) !default
$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default

View File

@ -1,62 +0,0 @@
@function mergeColorMaps($bulma-colors, $custom-colors)
// we return at least bulma hardcoded colors
$merged-colors: $bulma-colors
// we want a map as input
@if type-of($custom-colors) == 'map'
@each $name, $components in $custom-colors
// color name should be a string and colors pair a list with at least one element
@if type-of($name) == 'string' and (type-of($components) == 'list' or type-of($components) == 'color') and length($components) >= 1
$color-base: null
// the param can either be a single color
// or a list of 2 colors
@if type-of($components) == 'color'
$color-base: $components
@else if type-of($components) == 'list'
$color-base: nth($components, 1)
$color-invert: null
// is an inverted color provided in the list
@if length($components) > 1
$color-invert: nth($components, 2)
// we only want a color as base color
@if type-of($color-base) == 'color'
// if inverted color is not provided or is not a color we compute it
@if type-of($color-invert) != 'color'
$color-invert: findColorInvert($color-base)
// we merge this colors elements as map with bulma colors (we can override them this way, no multiple definition for the same name)
$merged-colors: map_merge($merged-colors, ($name: ($color-base, $color-invert)))
@return $merged-colors
@function powerNumber($number, $exp)
$value: 1
@if $exp > 0
@for $i from 1 through $exp
$value: $value * $number
@else if $exp < 0
@for $i from 1 through -$exp
$value: $value / $number
@return $value
@function colorLuminance($color)
$color-rgb: ('red': red($color),'green': green($color),'blue': blue($color))
@each $name, $value in $color-rgb
$adjusted: 0
$value: $value / 255
@if $value < 0.03928
$value: $value / 12.92
@else
$value: ($value + .055) / 1.055
$value: powerNumber($value, 2)
$color-rgb: map-merge($color-rgb, ($name: $value))
@return (map-get($color-rgb, 'red') * .2126) + (map-get($color-rgb, 'green') * .7152) + (map-get($color-rgb, 'blue') * .0722)
@function findColorInvert($color)
@if (colorLuminance($color) > 0.55)
@return rgba(#000, 0.7)
@else
@return #fff

View File

@ -1,72 +0,0 @@
// Colors
$black: hsl(0, 0%, 4%) !default
$black-bis: hsl(0, 0%, 7%) !default
$black-ter: hsl(0, 0%, 14%) !default
$grey-darker: hsl(0, 0%, 21%) !default
$grey-dark: hsl(0, 0%, 29%) !default
$grey: hsl(0, 0%, 48%) !default
$grey-light: hsl(0, 0%, 71%) !default
$grey-lighter: hsl(0, 0%, 86%) !default
$white-ter: hsl(0, 0%, 96%) !default
$white-bis: hsl(0, 0%, 98%) !default
$white: hsl(0, 0%, 100%) !default
$orange: hsl(14, 100%, 53%) !default
$yellow: hsl(48, 100%, 67%) !default
$green: hsl(141, 71%, 48%) !default
$turquoise: hsl(171, 100%, 41%) !default
$cyan: hsl(204, 86%, 53%) !default
$blue: hsl(217, 71%, 53%) !default
$purple: hsl(271, 100%, 71%) !default
$red: hsl(348, 100%, 61%) !default
// Typography
$family-sans-serif: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default
$family-monospace: monospace !default
$render-mode: optimizeLegibility !default
$size-1: 3rem !default
$size-2: 2.5rem !default
$size-3: 2rem !default
$size-4: 1.5rem !default
$size-5: 1.25rem !default
$size-6: 1rem !default
$size-7: 0.75rem !default
$weight-light: 300 !default
$weight-normal: 400 !default
$weight-medium: 500 !default
$weight-semibold: 600 !default
$weight-bold: 700 !default
// Responsiveness
// The container horizontal gap, which acts as the offset for breakpoints
$gap: 64px !default
// 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16
$tablet: 769px !default
// 960px container + 4rem
$desktop: 960px + (2 * $gap) !default
// 1152px container + 4rem
$widescreen: 1152px + (2 * $gap) !default
$widescreen-enabled: true !default
// 1344px container + 4rem
$fullhd: 1344px + (2 * $gap) !default
$fullhd-enabled: true !default
// Miscellaneous
$easing: ease-out !default
$radius-small: 2px !default
$radius: 4px !default
$radius-large: 6px !default
$radius-rounded: 290486px !default
$speed: 86ms !default
// Flags
$variable-columns: true !default

View File

@ -1,261 +0,0 @@
@import "initial-variables"
=clearfix
&::after
clear: both
content: " "
display: table
=center($width, $height: 0)
position: absolute
@if $height != 0
left: calc(50% - (#{$width} / 2))
top: calc(50% - (#{$height} / 2))
@else
left: calc(50% - (#{$width} / 2))
top: calc(50% - (#{$width} / 2))
=fa($size, $dimensions)
display: inline-block
font-size: $size
height: $dimensions
line-height: $dimensions
text-align: center
vertical-align: top
width: $dimensions
=hamburger($dimensions)
cursor: pointer
display: block
height: $dimensions
position: relative
width: $dimensions
span
background-color: currentColor
display: block
height: 1px
left: calc(50% - 8px)
position: absolute
transform-origin: center
transition-duration: $speed
transition-property: background-color, opacity, transform
transition-timing-function: $easing
width: 16px
&:nth-child(1)
top: calc(50% - 6px)
&:nth-child(2)
top: calc(50% - 1px)
&:nth-child(3)
top: calc(50% + 4px)
&:hover
background-color: rgba(black, 0.05)
// Modifers
&.is-active
span
&:nth-child(1)
transform: translateY(5px) rotate(45deg)
&:nth-child(2)
opacity: 0
&:nth-child(3)
transform: translateY(-5px) rotate(-45deg)
=overflow-touch
-webkit-overflow-scrolling: touch
=placeholder
$placeholders: ':-moz' ':-webkit-input' '-moz' '-ms-input'
@each $placeholder in $placeholders
&:#{$placeholder}-placeholder
@content
// Responsiveness
=from($device)
@media screen and (min-width: $device)
@content
=until($device)
@media screen and (max-width: $device - 1px)
@content
=mobile
@media screen and (max-width: $tablet - 1px)
@content
=tablet
@media screen and (min-width: $tablet), print
@content
=tablet-only
@media screen and (min-width: $tablet) and (max-width: $desktop - 1px)
@content
=touch
@media screen and (max-width: $desktop - 1px)
@content
=desktop
@media screen and (min-width: $desktop)
@content
=desktop-only
@if $widescreen-enabled
@media screen and (min-width: $desktop) and (max-width: $widescreen - 1px)
@content
=until-widescreen
@if $widescreen-enabled
@media screen and (max-width: $widescreen - 1px)
@content
=widescreen
@if $widescreen-enabled
@media screen and (min-width: $widescreen)
@content
=widescreen-only
@if $widescreen-enabled and $fullhd-enabled
@media screen and (min-width: $widescreen) and (max-width: $fullhd - 1px)
@content
=until-fullhd
@if $fullhd-enabled
@media screen and (max-width: $fullhd - 1px)
@content
=fullhd
@if $fullhd-enabled
@media screen and (min-width: $fullhd)
@content
// Placeholders
=unselectable
-webkit-touch-callout: none
-webkit-user-select: none
-moz-user-select: none
-ms-user-select: none
user-select: none
%unselectable
+unselectable
=arrow($color: transparent)
border: 3px solid $color
border-radius: 2px
border-right: 0
border-top: 0
content: " "
display: block
height: 0.625em
margin-top: -0.4375em
pointer-events: none
position: absolute
top: 50%
transform: rotate(-45deg)
transform-origin: center
width: 0.625em
%arrow
+arrow
=block
&:not(:last-child)
margin-bottom: 1.5rem
%block
+block
=delete
@extend %unselectable
-moz-appearance: none
-webkit-appearance: none
background-color: rgba($black, 0.2)
border: none
border-radius: $radius-rounded
cursor: pointer
pointer-events: auto
display: inline-block
flex-grow: 0
flex-shrink: 0
font-size: 0
height: 20px
max-height: 20px
max-width: 20px
min-height: 20px
min-width: 20px
outline: none
position: relative
vertical-align: top
width: 20px
&::before,
&::after
background-color: $white
content: ""
display: block
left: 50%
position: absolute
top: 50%
transform: translateX(-50%) translateY(-50%) rotate(45deg)
transform-origin: center center
&::before
height: 2px
width: 50%
&::after
height: 50%
width: 2px
&:hover,
&:focus
background-color: rgba($black, 0.3)
&:active
background-color: rgba($black, 0.4)
// Sizes
&.is-small
height: 16px
max-height: 16px
max-width: 16px
min-height: 16px
min-width: 16px
width: 16px
&.is-medium
height: 24px
max-height: 24px
max-width: 24px
min-height: 24px
min-width: 24px
width: 24px
&.is-large
height: 32px
max-height: 32px
max-width: 32px
min-height: 32px
min-width: 32px
width: 32px
%delete
+delete
=loader
animation: spinAround 500ms infinite linear
border: 2px solid $grey-lighter
border-radius: $radius-rounded
border-right-color: transparent
border-top-color: transparent
content: ""
display: block
height: 1em
position: relative
width: 1em
%loader
+loader
=overlay($offset: 0)
bottom: $offset
left: $offset
position: absolute
right: $offset
top: $offset
%overlay
+overlay

View File

@ -1,88 +0,0 @@
pre.highlight {
padding: 4px 8px;
}
/* Punctuation */
.highlight .cm {
color: #aaaaaa !important; }
/* Comment.Multiline */
.highlight .cp {
color: #aaaaaa !important; }
/* Comment.Preproc */
.highlight .c1 {
color: #aaaaaa !important; }
/* Comment.Single */
.highlight .cs {
color: #aaaaaa !important; }
//.highlight pre { background-color: #272822; }
.highlight pre { background-color: #373269; }
.highlight .hll { background-color: #272822; }
//.highlight .c { color: #75715e } /* Comment */
.highlight .c { color: #aaaaaa } /* Comment */
.highlight .cl { color: #aaaaaa } /* Comment */
.highlight .err { color: #960050; background-color: #1e0010 } /* Error */
.highlight .k { color: #66d9ef } /* Keyword */
.highlight .l { color: #ae81ff } /* Literal */
.highlight .n { color: #f8f8f2 } /* Name */
.highlight .o { color: #f92672 } /* Operator */
.highlight .p { color: #f8f8f2 } /* Punctuation */
.highlight .cm { color: #75715e } /* Comment.Multiline */
.highlight .cp { color: #75715e } /* Comment.Preproc */
.highlight .c1 { color: #75715e } /* Comment.Single */
.highlight .cs { color: #75715e } /* Comment.Special */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .kc { color: #66d9ef } /* Keyword.Constant */
.highlight .kd { color: #66d9ef } /* Keyword.Declaration */
.highlight .kn { color: #f92672 } /* Keyword.Namespace */
.highlight .kp { color: #66d9ef } /* Keyword.Pseudo */
.highlight .kr { color: #66d9ef } /* Keyword.Reserved */
.highlight .kt { color: #66d9ef } /* Keyword.Type */
.highlight .ld { color: #e6db74 } /* Literal.Date */
.highlight .m { color: #ae81ff } /* Literal.Number */
.highlight .s { color: #e6db74 } /* Literal.String */
.highlight .na { color: #a6e22e } /* Name.Attribute */
.highlight .nb { color: #f8f8f2 } /* Name.Builtin */
.highlight .nc { color: #a6e22e } /* Name.Class */
.highlight .no { color: #66d9ef } /* Name.Constant */
.highlight .nd { color: #a6e22e } /* Name.Decorator */
.highlight .ni { color: #f8f8f2 } /* Name.Entity */
.highlight .ne { color: #a6e22e } /* Name.Exception */
.highlight .nf { color: #a6e22e } /* Name.Function */
.highlight .nl { color: #f8f8f2 } /* Name.Label */
.highlight .nn { color: #f8f8f2 } /* Name.Namespace */
.highlight .nx { color: #a6e22e } /* Name.Other */
.highlight .py { color: #f8f8f2 } /* Name.Property */
.highlight .nt { color: #f92672 } /* Name.Tag */
.highlight .nv { color: #f8f8f2 } /* Name.Variable */
.highlight .ow { color: #f92672 } /* Operator.Word */
.highlight .w { color: #f8f8f2 } /* Text.Whitespace */
.highlight .mf { color: #ae81ff } /* Literal.Number.Float */
.highlight .mh { color: #ae81ff } /* Literal.Number.Hex */
.highlight .mi { color: #ae81ff } /* Literal.Number.Integer */
.highlight .mo { color: #ae81ff } /* Literal.Number.Oct */
.highlight .sb { color: #e6db74 } /* Literal.String.Backtick */
.highlight .sc { color: #e6db74 } /* Literal.String.Char */
.highlight .sd { color: #e6db74 } /* Literal.String.Doc */
.highlight .s2 { color: #e6db74 } /* Literal.String.Double */
.highlight .se { color: #ae81ff } /* Literal.String.Escape */
.highlight .sh { color: #e6db74 } /* Literal.String.Heredoc */
.highlight .si { color: #e6db74 } /* Literal.String.Interpol */
.highlight .sx { color: #e6db74 } /* Literal.String.Other */
.highlight .sr { color: #e6db74 } /* Literal.String.Regex */
.highlight .s1 { color: #e6db74 } /* Literal.String.Single */
.highlight .ss { color: #e6db74 } /* Literal.String.Symbol */
.highlight .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */
.highlight .vc { color: #f8f8f2 } /* Name.Variable.Class */
.highlight .vg { color: #f8f8f2 } /* Name.Variable.Global */
.highlight .vi { color: #f8f8f2 } /* Name.Variable.Instance */
.highlight .il { color: #ae81ff } /* Literal.Number.Integer.Long */
.highlight .gh { } /* Generic Heading & Diff Header */
.highlight .gu { color: #75715e; } /* Generic.Subheading & Diff Unified/Comment? */
.highlight .gd { color: #f92672; } /* Generic.Deleted & Diff Deleted */
.highlight .gi { color: #a6e22e; } /* Generic.Inserted & Diff Inserted */

View File

@ -1,11 +0,0 @@
---
layout: page
theme: dark
title: About Me
permalink: /about/
---
My name is Sameer aka lxsameer and I'm a software engineer and a proud member of [GNU project](https://gnu.org). As you may guessed by now
I'm a huge free software fan and really value freedome and privacy in the cyber world. If you're interested, we can exchange a word or two
via social networks (links on the header).

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@ -1,93 +0,0 @@
Copyright (c) 2010-2014 by tyPoland Lukasz Dziedzic (team@latofonts.com) with Reserved Font Name "Lato"
This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL
-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------
PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.
The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.
DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.
"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).
"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).
"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.
"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.
PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:
1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.
2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.
3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.
5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.
TERMINATION
This license becomes null and void if any of the above conditions are
not met.
DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 83 KiB

View File

@ -1,25 +0,0 @@
document.addEventListener('DOMContentLoaded', () => {
// Get all "navbar-burger" elements
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
// Check if there are any navbar burgers
if ($navbarBurgers.length > 0) {
// Add a click event on each of them
$navbarBurgers.forEach( el => {
el.addEventListener('click', () => {
// Get the target from the "data-target" attribute
const target = el.dataset.target;
const $target = document.getElementById(target);
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
}
});

800
assets/styles/dark.css Normal file
View File

@ -0,0 +1,800 @@
/**
* Forced dark theme version
*/
:root {
--background-body: #202b38;
--background: #161f27;
--background-alt: #1a242f;
--selection: #1c76c5;
--text-main: #dbdbdb;
--text-bright: #fff;
--text-muted: #a9b1ba;
--links: #41adff;
--focus: #0096bfab;
--border: #526980;
--code: #ffbe85;
--animation-duration: 0.1s;
--button-hover: #324759;
--scrollbar-thumb: var(--button-hover);
--scrollbar-thumb-hover: rgb(65, 92, 115);
--form-placeholder: #a9a9a9;
--form-text: #fff;
--variable: #d941e2;
--highlight: #efdb43;
--select-arrow: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='62.5' width='116.9' fill='%23efefef'%3E %3Cpath d='M115.3,1.6 C113.7,0 111.1,0 109.5,1.6 L58.5,52.7 L7.4,1.6 C5.8,0 3.2,0 1.6,1.6 C0,3.2 0,5.8 1.6,7.4 L55.5,61.3 C56.3,62.1 57.3,62.5 58.4,62.5 C59.4,62.5 60.5,62.1 61.3,61.3 L115.2,7.4 C116.9,5.8 116.9,3.2 115.3,1.6Z'/%3E %3C/svg%3E");
}
html {
scrollbar-color: #324759 #202b38;
scrollbar-color: var(--scrollbar-thumb) var(--background-body);
scrollbar-width: thin;
}
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
line-height: 1.4;
max-width: 800px;
margin: 20px auto;
padding: 0 10px;
word-wrap: break-word;
color: #dbdbdb;
color: var(--text-main);
background: #202b38;
background: var(--background-body);
text-rendering: optimizeLegibility;
}
button {
transition:
background-color 0.1s linear,
border-color 0.1s linear,
color 0.1s linear,
box-shadow 0.1s linear,
transform 0.1s ease;
transition:
background-color var(--animation-duration) linear,
border-color var(--animation-duration) linear,
color var(--animation-duration) linear,
box-shadow var(--animation-duration) linear,
transform var(--animation-duration) ease;
}
input {
transition:
background-color 0.1s linear,
border-color 0.1s linear,
color 0.1s linear,
box-shadow 0.1s linear,
transform 0.1s ease;
transition:
background-color var(--animation-duration) linear,
border-color var(--animation-duration) linear,
color var(--animation-duration) linear,
box-shadow var(--animation-duration) linear,
transform var(--animation-duration) ease;
}
textarea {
transition:
background-color 0.1s linear,
border-color 0.1s linear,
color 0.1s linear,
box-shadow 0.1s linear,
transform 0.1s ease;
transition:
background-color var(--animation-duration) linear,
border-color var(--animation-duration) linear,
color var(--animation-duration) linear,
box-shadow var(--animation-duration) linear,
transform var(--animation-duration) ease;
}
h1 {
font-size: 2.2em;
margin-top: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin-bottom: 12px;
margin-top: 24px;
}
h1 {
color: #fff;
color: var(--text-bright);
}
h2 {
color: #fff;
color: var(--text-bright);
}
h3 {
color: #fff;
color: var(--text-bright);
}
h4 {
color: #fff;
color: var(--text-bright);
}
h5 {
color: #fff;
color: var(--text-bright);
}
h6 {
color: #fff;
color: var(--text-bright);
}
strong {
color: #fff;
color: var(--text-bright);
}
h1,
h2,
h3,
h4,
h5,
h6,
b,
strong,
th {
font-weight: 600;
}
q::before {
content: none;
}
q::after {
content: none;
}
blockquote {
border-left: 4px solid #0096bfab;
border-left: 4px solid var(--focus);
margin: 1.5em 0;
padding: 0.5em 1em;
font-style: italic;
}
q {
border-left: 4px solid #0096bfab;
border-left: 4px solid var(--focus);
margin: 1.5em 0;
padding: 0.5em 1em;
font-style: italic;
}
blockquote > footer {
font-style: normal;
border: 0;
}
blockquote cite {
font-style: normal;
}
address {
font-style: normal;
}
a[href^='mailto\:']::before {
content: '📧 ';
}
a[href^='tel\:']::before {
content: '📞 ';
}
a[href^='sms\:']::before {
content: '💬 ';
}
mark {
background-color: #efdb43;
background-color: var(--highlight);
border-radius: 2px;
padding: 0 2px 0 2px;
color: #000;
}
button,
select,
input[type='submit'],
input[type='button'],
input[type='checkbox'],
input[type='range'],
input[type='radio'] {
cursor: pointer;
}
input:not([type='checkbox']):not([type='radio']),
select {
display: block;
}
input {
color: #fff;
color: var(--form-text);
background-color: #161f27;
background-color: var(--background);
font-family: inherit;
font-size: inherit;
margin-right: 6px;
margin-bottom: 6px;
padding: 10px;
border: none;
border-radius: 6px;
outline: none;
}
button {
color: #fff;
color: var(--form-text);
background-color: #161f27;
background-color: var(--background);
font-family: inherit;
font-size: inherit;
margin-right: 6px;
margin-bottom: 6px;
padding: 10px;
border: none;
border-radius: 6px;
outline: none;
}
textarea {
color: #fff;
color: var(--form-text);
background-color: #161f27;
background-color: var(--background);
font-family: inherit;
font-size: inherit;
margin-right: 6px;
margin-bottom: 6px;
padding: 10px;
border: none;
border-radius: 6px;
outline: none;
}
select {
color: #fff;
color: var(--form-text);
background-color: #161f27;
background-color: var(--background);
font-family: inherit;
font-size: inherit;
margin-right: 6px;
margin-bottom: 6px;
padding: 10px;
border: none;
border-radius: 6px;
outline: none;
}
input[type='checkbox'],
input[type='radio'] {
height: 1em;
width: 1em;
}
input[type='radio'] {
border-radius: 100%;
}
input {
vertical-align: top;
}
label {
vertical-align: middle;
margin-bottom: 4px;
display: inline-block;
}
input:not([type='checkbox']):not([type='radio']),
input[type='range'],
select,
button,
textarea {
-webkit-appearance: none;
}
textarea {
display: block;
margin-right: 0;
box-sizing: border-box;
resize: vertical;
}
textarea:not([cols]) {
width: 100%;
}
textarea:not([rows]) {
min-height: 40px;
height: 140px;
}
select {
background: #161f27 url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='62.5' width='116.9' fill='%23efefef'%3E %3Cpath d='M115.3,1.6 C113.7,0 111.1,0 109.5,1.6 L58.5,52.7 L7.4,1.6 C5.8,0 3.2,0 1.6,1.6 C0,3.2 0,5.8 1.6,7.4 L55.5,61.3 C56.3,62.1 57.3,62.5 58.4,62.5 C59.4,62.5 60.5,62.1 61.3,61.3 L115.2,7.4 C116.9,5.8 116.9,3.2 115.3,1.6Z'/%3E %3C/svg%3E") calc(100% - 12px) 50% / 12px no-repeat;
background: var(--background) var(--select-arrow) calc(100% - 12px) 50% / 12px no-repeat;
padding-right: 35px;
}
select::-ms-expand {
display: none;
}
select[multiple] {
padding-right: 10px;
background-image: none;
overflow-y: auto;
}
button,
input[type='submit'],
input[type='button'] {
padding-right: 30px;
padding-left: 30px;
}
button:hover {
background: #324759;
background: var(--button-hover);
}
input[type='submit']:hover {
background: #324759;
background: var(--button-hover);
}
input[type='button']:hover {
background: #324759;
background: var(--button-hover);
}
input:focus {
box-shadow: 0 0 0 2px #0096bfab;
box-shadow: 0 0 0 2px var(--focus);
}
select:focus {
box-shadow: 0 0 0 2px #0096bfab;
box-shadow: 0 0 0 2px var(--focus);
}
button:focus {
box-shadow: 0 0 0 2px #0096bfab;
box-shadow: 0 0 0 2px var(--focus);
}
textarea:focus {
box-shadow: 0 0 0 2px #0096bfab;
box-shadow: 0 0 0 2px var(--focus);
}
input[type='checkbox']:active,
input[type='radio']:active,
input[type='submit']:active,
input[type='button']:active,
input[type='range']:active,
button:active {
transform: translateY(2px);
}
input:disabled,
select:disabled,
button:disabled,
textarea:disabled {
cursor: not-allowed;
opacity: 0.5;
}
::-moz-placeholder {
color: #a9a9a9;
color: var(--form-placeholder);
}
:-ms-input-placeholder {
color: #a9a9a9;
color: var(--form-placeholder);
}
::-ms-input-placeholder {
color: #a9a9a9;
color: var(--form-placeholder);
}
::placeholder {
color: #a9a9a9;
color: var(--form-placeholder);
}
fieldset {
border: 1px #0096bfab solid;
border: 1px var(--focus) solid;
border-radius: 6px;
margin: 0;
margin-bottom: 12px;
padding: 10px;
}
legend {
font-size: 0.9em;
font-weight: 600;
}
input[type='range'] {
margin: 10px 0;
padding: 10px 0;
background: transparent;
}
input[type='range']:focus {
outline: none;
}
input[type='range']::-webkit-slider-runnable-track {
width: 100%;
height: 9.5px;
-webkit-transition: 0.2s;
transition: 0.2s;
background: #161f27;
background: var(--background);
border-radius: 3px;
}
input[type='range']::-webkit-slider-thumb {
box-shadow: 0 1px 1px #000, 0 0 1px #0d0d0d;
height: 20px;
width: 20px;
border-radius: 50%;
background: #526980;
background: var(--border);
-webkit-appearance: none;
margin-top: -7px;
}
input[type='range']:focus::-webkit-slider-runnable-track {
background: #161f27;
background: var(--background);
}
input[type='range']::-moz-range-track {
width: 100%;
height: 9.5px;
-moz-transition: 0.2s;
transition: 0.2s;
background: #161f27;
background: var(--background);
border-radius: 3px;
}
input[type='range']::-moz-range-thumb {
box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
height: 20px;
width: 20px;
border-radius: 50%;
background: #526980;
background: var(--border);
}
input[type='range']::-ms-track {
width: 100%;
height: 9.5px;
background: transparent;
border-color: transparent;
border-width: 16px 0;
color: transparent;
}
input[type='range']::-ms-fill-lower {
background: #161f27;
background: var(--background);
border: 0.2px solid #010101;
border-radius: 3px;
box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
}
input[type='range']::-ms-fill-upper {
background: #161f27;
background: var(--background);
border: 0.2px solid #010101;
border-radius: 3px;
box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
}
input[type='range']::-ms-thumb {
box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
border: 1px solid #000;
height: 20px;
width: 20px;
border-radius: 50%;
background: #526980;
background: var(--border);
}
input[type='range']:focus::-ms-fill-lower {
background: #161f27;
background: var(--background);
}
input[type='range']:focus::-ms-fill-upper {
background: #161f27;
background: var(--background);
}
a {
text-decoration: none;
color: #41adff;
color: var(--links);
}
a:hover {
text-decoration: underline;
}
code {
background: #161f27;
background: var(--background);
color: #ffbe85;
color: var(--code);
padding: 2.5px 5px;
border-radius: 6px;
font-size: 1em;
}
samp {
background: #161f27;
background: var(--background);
color: #ffbe85;
color: var(--code);
padding: 2.5px 5px;
border-radius: 6px;
font-size: 1em;
}
time {
background: #161f27;
background: var(--background);
color: #ffbe85;
color: var(--code);
padding: 2.5px 5px;
border-radius: 6px;
font-size: 1em;
}
pre > code {
padding: 10px;
display: block;
overflow-x: auto;
}
var {
color: #d941e2;
color: var(--variable);
font-style: normal;
font-family: monospace;
}
kbd {
background: #161f27;
background: var(--background);
border: 1px solid #526980;
border: 1px solid var(--border);
border-radius: 2px;
color: #dbdbdb;
color: var(--text-main);
padding: 2px 4px 2px 4px;
}
img,
video {
max-width: 100%;
height: auto;
}
hr {
border: none;
border-top: 1px solid #526980;
border-top: 1px solid var(--border);
}
table {
border-collapse: collapse;
margin-bottom: 10px;
width: 100%;
table-layout: fixed;
}
table caption {
text-align: left;
}
td,
th {
padding: 6px;
text-align: left;
vertical-align: top;
word-wrap: break-word;
}
thead {
border-bottom: 1px solid #526980;
border-bottom: 1px solid var(--border);
}
tfoot {
border-top: 1px solid #526980;
border-top: 1px solid var(--border);
}
tbody tr:nth-child(even) {
background-color: #1a242f;
background-color: var(--background-alt);
}
::-webkit-scrollbar {
height: 10px;
width: 10px;
}
::-webkit-scrollbar-track {
background: #161f27;
background: var(--background);
border-radius: 6px;
}
::-webkit-scrollbar-thumb {
background: #324759;
background: var(--scrollbar-thumb);
border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
background: rgb(65, 92, 115);
background: var(--scrollbar-thumb-hover);
}
::-moz-selection {
background-color: #1c76c5;
background-color: var(--selection);
color: #fff;
color: var(--text-bright);
}
::selection {
background-color: #1c76c5;
background-color: var(--selection);
color: #fff;
color: var(--text-bright);
}
details {
display: flex;
flex-direction: column;
align-items: flex-start;
background-color: #1a242f;
background-color: var(--background-alt);
padding: 10px 10px 0;
margin: 1em 0;
border-radius: 6px;
overflow: hidden;
}
details[open] {
padding: 10px;
}
details > :last-child {
margin-bottom: 0;
}
details[open] summary {
margin-bottom: 10px;
}
summary {
display: list-item;
background-color: #161f27;
background-color: var(--background);
padding: 10px;
margin: -10px -10px 0;
cursor: pointer;
outline: none;
}
summary:hover,
summary:focus {
text-decoration: underline;
}
details > :not(summary) {
margin-top: 0;
}
summary::-webkit-details-marker {
color: #dbdbdb;
color: var(--text-main);
}
footer {
border-top: 1px solid #526980;
border-top: 1px solid var(--border);
padding-top: 10px;
color: #a9b1ba;
color: var(--text-muted);
}
body > footer {
margin-top: 40px;
}
@media print {
body,
pre,
code,
summary,
details,
button,
input,
textarea {
background-color: #fff;
}
button,
input,
textarea {
border: 1px solid #000;
}
body,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
button,
input,
textarea,
footer,
summary,
strong {
color: #000;
}
summary::marker {
color: #000;
}
summary::-webkit-details-marker {
color: #000;
}
tbody tr:nth-child(even) {
background-color: #f2f2f2;
}
a {
color: #00f;
text-decoration: underline;
}
}
/*# sourceMappingURL=dark.css.map */

20
assets/styles/main.css Normal file
View File

@ -0,0 +1,20 @@
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
body {
margin: 20px auto;
max-width: 800px;
padding: 0 10px;
background: var(--background-body);
}
pre.src {
background: #1a242f;
padding: 10px 20px;
border-radius: 2px;
}

View File

@ -1,222 +0,0 @@
---
---
@font-face
font-family: 'Lato'
src: url('/assets/fonts/Lato-Regular.ttf') format('truetype')
@font-face
font-family: 'Lato Bold'
src: url('/assets/fonts/Lato-Bold.ttf') format('truetype')
$white-ter: #fafafa
$footer-background-color: $white-ter
$purple: #49438B //#4A448C //#433983
$blue: #82C2E5
$family-primary: 'Lato'
$family-secendary: 'Lato Bold'
$background: $white-ter
$primary: $purple
html, body
min-height: 100vh
height: auto
margin: 0
html.light
background: $background
$background: $white-ter
html.dark
background: $purple
$background: $purple
@charset "utf-8"
@import "./bulma.sass"
@import "./code.scss"
body.light
color: $grey-dark
background: $background
with: 100%
height: 100%
a
color: $primary
&:hover
color: lighten($primary, 30%)
a.navlink
border-radius: $radius
color: $grey-dark
&:hover
background: $purple
color: $light
a.home
color: $blue !important
&:hover
text-decoration: underline
body.dark
.para
p, h1, h2, h3, h4, h5, strong
padding-top: 1em
padding-bottom: 0.5em
line-height: 1.5
color: darken($white, 10%)
color: $light
background: $purple
footer.footer
background: $purple
with: 100%
height: 100%
a
color: $white
&:hover
color: darken($white, 30%)
content.post
text-align: justify
blockquote
font-style: italic
h1
@extend .is-size-2
h2
@extend .is-size-3
h3
@extend .is-size-4
h4
@extend .is-size-5
h5
@extend .is-size-6
p, h1, h2, h3, h4, h5, strong
padding-top: 1em
padding-bottom: 0.5em
line-height: 1.5
color: darken($white, 10%)
strong
color: white
p
text-align: justify
ul
list-style: circle
li
margin-left: 1em
a
color: $blue
&:hover
text-decoration: underline
font-size: 1.3rem
.highlight
line-height: 1 !important
pre
code
font-size: 0.8em
code.highlighter-rouge
background: darken($purple, 10%)
color: $light
border-radius: $radius
padding: 0.1em 0.2em
font-size: 0.8em
.highlight
margin-top: 1em
a.post-title-link
color: $light
&:hover
text-decoration: underline
a.navlink
border-radius: $radius
color: $light !important
&:hover
background: $light
color: $grey-dark !important
.share-page
margin-top: 2em
a
color: $light
border-radius: $radius
&:hover
background: $light
color: $grey-dark
.column.is-flex.centered
justify-content: center
.columns.is-flex.centered
justify-content: center
.text-centered
text-align: center
.text-justified
text-align: justify
.cv-button
margin-top: 3rem
.is-size-1
font-family: 'Lato Bold' !important
span.info
padding-right: 10px
ul.details
a
color: $light
border-radius: $radius
&:hover
background: $light
color: $grey-dark
list-decoration: none
li
display: inline
li.category
padding: 0.5em
.pad
padding-right: 5px
.navbar-menu
a.navbar-item
color: $purple
.is-rounded
border-radius: 50%
border: 3px solid darken($purple, 10%)
footer.footer
margin-top: 5em
.right-aligned
justify-content: end
h3.header
margin-bottom: 1em
.avatar
width: 150px
height: 150px

16
blog.md
View File

@ -1,16 +0,0 @@
---
layout: post
theme: dark
---
{% for post in site.posts %}
<div class="columns">
<div class="column">
<h2 class="is-size-3">
<a class="post-title-link" href="{{ post.url }}">
<i class="fas fa-link"></i> {{ post.title }}
</a>
</h2>
</div>
</div>
{% endfor %}

122
build.el Executable file
View File

@ -0,0 +1,122 @@
:;exec cask emacs --no-site-file --no-site-lisp --batch -L ./ -l "$0" -f main "$(cd "$(dirname "$0")/." >/dev/null 2>&1 ; pwd -P)" "$@"
;;; build.el --- The build script of my personal website
;;; Version: 0.1.0
;;; Package-Version 0.1.0
;;; Commentary:
;;; Code:
(require 'org)
(require 'ox-html)
(require 'ox-publish)
(require 'dracula-theme)
(require 'lisp/ox-template)
(setq debug-on-error t)
(defvar author-name "Sameer Rahmani"
"Set this variable to your fullname.")
(defvar author-email "lxsameer@gmail.com"
"Set this varibale to your email address.")
(defvar project-root nil
"Root directory of the website source code.")
(defun from-root (path)
"Return the full path of the given PATH in the project root."
(concat project-root path))
(defun prod-p ()
"Return non-nil if we're in development mode."
(when (getenv "LXHOME_PROD")
t))
(defun extra-headers ()
"Retun a list of extra header html tags."
(concat
"<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">"))
(defun main ()
"The entry point to the build script."
;; Setup the emacs theme so htmlize can actually setup
;; the code highlighter
(load-theme 'dracula t)
(enable-theme 'dracula)
(setq project-root (car command-line-args-left))
(setf user-full-name author-name)
(setf user-mail-address author-email)
;; Disable default header links (top, next)
(setf org-html-home/up-format "")
(setf org-html-link-up "")
(setf org-html-link-home "")
(setf org-html-scripts "")
(let ((html-build-dir (from-root "/build/html/")))
(setq org-publish-project-alist
`(("lxsameer.com"
:base-directory ,(from-root "/orgs")
:root-directory ,project-root
:recursive t
:base-extension "org"
:publishing-directory ,(from-root "/build/html")
;; Exclude the blog archive index autogenerated below
;; Note that the regexp is relative to :base-directory
;; :exclude "^index.org"
:section-numbers nil
:with-toc nil
:with-date nil
:base-url ,(if (prod-p) "https://lxsameer.com" "http://localhost:3003")
:html-head-extra ,(extra-headers)
:html-template ,(from-root "/templates/blog.html")
:html-headline-template ,(from-root "/templates/tags.html")
:publishing-function org-html-publish-to-templated-html
:auto-sitemap t
:htmlized-source t
:sitemap-folders ignore
:sitemap-style list
:sitemap-title "lxsameer's nest"
:sitemap-filename "sitemap.inc"
:sitemap-sort-files anti-chronologically)
("org->html"
:base-directory ,(from-root "/orgs")
:base-extension "org"
:publishing-directory ,html-build-dir
:recursive t
:publishing-function org-html-publish-to-html
:headline-levels 4
;; :html-preamble ,(use-html "templates/header.html")
;; :html-postamble ,(use-html "templates/footer.html")
:html-link-home "/"
:html-head-include-default-style nil
:html-head-include-scripts nil
:html-head-extra ,(extra-headers)
:makeindex nil)
("statics"
:base-directory ,project-root
:base-extension "css\\|js\\|png\\|jpg\\|gif\\|pdf\\|svg"
:publishing-directory ,html-build-dir
:recursive t
:publishing-function org-publish-attachment)
("build" :components ("lxsameer.com" "statics")))))
(org-publish-project "build" t nil)
(message "Build complete."))
(provide 'build)
;; Local Variables:
;; mode: emacs-lisp
;; End:
;;; build.el ends here

View File

@ -0,0 +1,800 @@
/**
* Forced dark theme version
*/
:root {
--background-body: #202b38;
--background: #161f27;
--background-alt: #1a242f;
--selection: #1c76c5;
--text-main: #dbdbdb;
--text-bright: #fff;
--text-muted: #a9b1ba;
--links: #41adff;
--focus: #0096bfab;
--border: #526980;
--code: #ffbe85;
--animation-duration: 0.1s;
--button-hover: #324759;
--scrollbar-thumb: var(--button-hover);
--scrollbar-thumb-hover: rgb(65, 92, 115);
--form-placeholder: #a9a9a9;
--form-text: #fff;
--variable: #d941e2;
--highlight: #efdb43;
--select-arrow: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='62.5' width='116.9' fill='%23efefef'%3E %3Cpath d='M115.3,1.6 C113.7,0 111.1,0 109.5,1.6 L58.5,52.7 L7.4,1.6 C5.8,0 3.2,0 1.6,1.6 C0,3.2 0,5.8 1.6,7.4 L55.5,61.3 C56.3,62.1 57.3,62.5 58.4,62.5 C59.4,62.5 60.5,62.1 61.3,61.3 L115.2,7.4 C116.9,5.8 116.9,3.2 115.3,1.6Z'/%3E %3C/svg%3E");
}
html {
scrollbar-color: #324759 #202b38;
scrollbar-color: var(--scrollbar-thumb) var(--background-body);
scrollbar-width: thin;
}
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
line-height: 1.4;
max-width: 800px;
margin: 20px auto;
padding: 0 10px;
word-wrap: break-word;
color: #dbdbdb;
color: var(--text-main);
background: #202b38;
background: var(--background-body);
text-rendering: optimizeLegibility;
}
button {
transition:
background-color 0.1s linear,
border-color 0.1s linear,
color 0.1s linear,
box-shadow 0.1s linear,
transform 0.1s ease;
transition:
background-color var(--animation-duration) linear,
border-color var(--animation-duration) linear,
color var(--animation-duration) linear,
box-shadow var(--animation-duration) linear,
transform var(--animation-duration) ease;
}
input {
transition:
background-color 0.1s linear,
border-color 0.1s linear,
color 0.1s linear,
box-shadow 0.1s linear,
transform 0.1s ease;
transition:
background-color var(--animation-duration) linear,
border-color var(--animation-duration) linear,
color var(--animation-duration) linear,
box-shadow var(--animation-duration) linear,
transform var(--animation-duration) ease;
}
textarea {
transition:
background-color 0.1s linear,
border-color 0.1s linear,
color 0.1s linear,
box-shadow 0.1s linear,
transform 0.1s ease;
transition:
background-color var(--animation-duration) linear,
border-color var(--animation-duration) linear,
color var(--animation-duration) linear,
box-shadow var(--animation-duration) linear,
transform var(--animation-duration) ease;
}
h1 {
font-size: 2.2em;
margin-top: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin-bottom: 12px;
margin-top: 24px;
}
h1 {
color: #fff;
color: var(--text-bright);
}
h2 {
color: #fff;
color: var(--text-bright);
}
h3 {
color: #fff;
color: var(--text-bright);
}
h4 {
color: #fff;
color: var(--text-bright);
}
h5 {
color: #fff;
color: var(--text-bright);
}
h6 {
color: #fff;
color: var(--text-bright);
}
strong {
color: #fff;
color: var(--text-bright);
}
h1,
h2,
h3,
h4,
h5,
h6,
b,
strong,
th {
font-weight: 600;
}
q::before {
content: none;
}
q::after {
content: none;
}
blockquote {
border-left: 4px solid #0096bfab;
border-left: 4px solid var(--focus);
margin: 1.5em 0;
padding: 0.5em 1em;
font-style: italic;
}
q {
border-left: 4px solid #0096bfab;
border-left: 4px solid var(--focus);
margin: 1.5em 0;
padding: 0.5em 1em;
font-style: italic;
}
blockquote > footer {
font-style: normal;
border: 0;
}
blockquote cite {
font-style: normal;
}
address {
font-style: normal;
}
a[href^='mailto\:']::before {
content: '📧 ';
}
a[href^='tel\:']::before {
content: '📞 ';
}
a[href^='sms\:']::before {
content: '💬 ';
}
mark {
background-color: #efdb43;
background-color: var(--highlight);
border-radius: 2px;
padding: 0 2px 0 2px;
color: #000;
}
button,
select,
input[type='submit'],
input[type='button'],
input[type='checkbox'],
input[type='range'],
input[type='radio'] {
cursor: pointer;
}
input:not([type='checkbox']):not([type='radio']),
select {
display: block;
}
input {
color: #fff;
color: var(--form-text);
background-color: #161f27;
background-color: var(--background);
font-family: inherit;
font-size: inherit;
margin-right: 6px;
margin-bottom: 6px;
padding: 10px;
border: none;
border-radius: 6px;
outline: none;
}
button {
color: #fff;
color: var(--form-text);
background-color: #161f27;
background-color: var(--background);
font-family: inherit;
font-size: inherit;
margin-right: 6px;
margin-bottom: 6px;
padding: 10px;
border: none;
border-radius: 6px;
outline: none;
}
textarea {
color: #fff;
color: var(--form-text);
background-color: #161f27;
background-color: var(--background);
font-family: inherit;
font-size: inherit;
margin-right: 6px;
margin-bottom: 6px;
padding: 10px;
border: none;
border-radius: 6px;
outline: none;
}
select {
color: #fff;
color: var(--form-text);
background-color: #161f27;
background-color: var(--background);
font-family: inherit;
font-size: inherit;
margin-right: 6px;
margin-bottom: 6px;
padding: 10px;
border: none;
border-radius: 6px;
outline: none;
}
input[type='checkbox'],
input[type='radio'] {
height: 1em;
width: 1em;
}
input[type='radio'] {
border-radius: 100%;
}
input {
vertical-align: top;
}
label {
vertical-align: middle;
margin-bottom: 4px;
display: inline-block;
}
input:not([type='checkbox']):not([type='radio']),
input[type='range'],
select,
button,
textarea {
-webkit-appearance: none;
}
textarea {
display: block;
margin-right: 0;
box-sizing: border-box;
resize: vertical;
}
textarea:not([cols]) {
width: 100%;
}
textarea:not([rows]) {
min-height: 40px;
height: 140px;
}
select {
background: #161f27 url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='62.5' width='116.9' fill='%23efefef'%3E %3Cpath d='M115.3,1.6 C113.7,0 111.1,0 109.5,1.6 L58.5,52.7 L7.4,1.6 C5.8,0 3.2,0 1.6,1.6 C0,3.2 0,5.8 1.6,7.4 L55.5,61.3 C56.3,62.1 57.3,62.5 58.4,62.5 C59.4,62.5 60.5,62.1 61.3,61.3 L115.2,7.4 C116.9,5.8 116.9,3.2 115.3,1.6Z'/%3E %3C/svg%3E") calc(100% - 12px) 50% / 12px no-repeat;
background: var(--background) var(--select-arrow) calc(100% - 12px) 50% / 12px no-repeat;
padding-right: 35px;
}
select::-ms-expand {
display: none;
}
select[multiple] {
padding-right: 10px;
background-image: none;
overflow-y: auto;
}
button,
input[type='submit'],
input[type='button'] {
padding-right: 30px;
padding-left: 30px;
}
button:hover {
background: #324759;
background: var(--button-hover);
}
input[type='submit']:hover {
background: #324759;
background: var(--button-hover);
}
input[type='button']:hover {
background: #324759;
background: var(--button-hover);
}
input:focus {
box-shadow: 0 0 0 2px #0096bfab;
box-shadow: 0 0 0 2px var(--focus);
}
select:focus {
box-shadow: 0 0 0 2px #0096bfab;
box-shadow: 0 0 0 2px var(--focus);
}
button:focus {
box-shadow: 0 0 0 2px #0096bfab;
box-shadow: 0 0 0 2px var(--focus);
}
textarea:focus {
box-shadow: 0 0 0 2px #0096bfab;
box-shadow: 0 0 0 2px var(--focus);
}
input[type='checkbox']:active,
input[type='radio']:active,
input[type='submit']:active,
input[type='button']:active,
input[type='range']:active,
button:active {
transform: translateY(2px);
}
input:disabled,
select:disabled,
button:disabled,
textarea:disabled {
cursor: not-allowed;
opacity: 0.5;
}
::-moz-placeholder {
color: #a9a9a9;
color: var(--form-placeholder);
}
:-ms-input-placeholder {
color: #a9a9a9;
color: var(--form-placeholder);
}
::-ms-input-placeholder {
color: #a9a9a9;
color: var(--form-placeholder);
}
::placeholder {
color: #a9a9a9;
color: var(--form-placeholder);
}
fieldset {
border: 1px #0096bfab solid;
border: 1px var(--focus) solid;
border-radius: 6px;
margin: 0;
margin-bottom: 12px;
padding: 10px;
}
legend {
font-size: 0.9em;
font-weight: 600;
}
input[type='range'] {
margin: 10px 0;
padding: 10px 0;
background: transparent;
}
input[type='range']:focus {
outline: none;
}
input[type='range']::-webkit-slider-runnable-track {
width: 100%;
height: 9.5px;
-webkit-transition: 0.2s;
transition: 0.2s;
background: #161f27;
background: var(--background);
border-radius: 3px;
}
input[type='range']::-webkit-slider-thumb {
box-shadow: 0 1px 1px #000, 0 0 1px #0d0d0d;
height: 20px;
width: 20px;
border-radius: 50%;
background: #526980;
background: var(--border);
-webkit-appearance: none;
margin-top: -7px;
}
input[type='range']:focus::-webkit-slider-runnable-track {
background: #161f27;
background: var(--background);
}
input[type='range']::-moz-range-track {
width: 100%;
height: 9.5px;
-moz-transition: 0.2s;
transition: 0.2s;
background: #161f27;
background: var(--background);
border-radius: 3px;
}
input[type='range']::-moz-range-thumb {
box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
height: 20px;
width: 20px;
border-radius: 50%;
background: #526980;
background: var(--border);
}
input[type='range']::-ms-track {
width: 100%;
height: 9.5px;
background: transparent;
border-color: transparent;
border-width: 16px 0;
color: transparent;
}
input[type='range']::-ms-fill-lower {
background: #161f27;
background: var(--background);
border: 0.2px solid #010101;
border-radius: 3px;
box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
}
input[type='range']::-ms-fill-upper {
background: #161f27;
background: var(--background);
border: 0.2px solid #010101;
border-radius: 3px;
box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
}
input[type='range']::-ms-thumb {
box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
border: 1px solid #000;
height: 20px;
width: 20px;
border-radius: 50%;
background: #526980;
background: var(--border);
}
input[type='range']:focus::-ms-fill-lower {
background: #161f27;
background: var(--background);
}
input[type='range']:focus::-ms-fill-upper {
background: #161f27;
background: var(--background);
}
a {
text-decoration: none;
color: #41adff;
color: var(--links);
}
a:hover {
text-decoration: underline;
}
code {
background: #161f27;
background: var(--background);
color: #ffbe85;
color: var(--code);
padding: 2.5px 5px;
border-radius: 6px;
font-size: 1em;
}
samp {
background: #161f27;
background: var(--background);
color: #ffbe85;
color: var(--code);
padding: 2.5px 5px;
border-radius: 6px;
font-size: 1em;
}
time {
background: #161f27;
background: var(--background);
color: #ffbe85;
color: var(--code);
padding: 2.5px 5px;
border-radius: 6px;
font-size: 1em;
}
pre > code {
padding: 10px;
display: block;
overflow-x: auto;
}
var {
color: #d941e2;
color: var(--variable);
font-style: normal;
font-family: monospace;
}
kbd {
background: #161f27;
background: var(--background);
border: 1px solid #526980;
border: 1px solid var(--border);
border-radius: 2px;
color: #dbdbdb;
color: var(--text-main);
padding: 2px 4px 2px 4px;
}
img,
video {
max-width: 100%;
height: auto;
}
hr {
border: none;
border-top: 1px solid #526980;
border-top: 1px solid var(--border);
}
table {
border-collapse: collapse;
margin-bottom: 10px;
width: 100%;
table-layout: fixed;
}
table caption {
text-align: left;
}
td,
th {
padding: 6px;
text-align: left;
vertical-align: top;
word-wrap: break-word;
}
thead {
border-bottom: 1px solid #526980;
border-bottom: 1px solid var(--border);
}
tfoot {
border-top: 1px solid #526980;
border-top: 1px solid var(--border);
}
tbody tr:nth-child(even) {
background-color: #1a242f;
background-color: var(--background-alt);
}
::-webkit-scrollbar {
height: 10px;
width: 10px;
}
::-webkit-scrollbar-track {
background: #161f27;
background: var(--background);
border-radius: 6px;
}
::-webkit-scrollbar-thumb {
background: #324759;
background: var(--scrollbar-thumb);
border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
background: rgb(65, 92, 115);
background: var(--scrollbar-thumb-hover);
}
::-moz-selection {
background-color: #1c76c5;
background-color: var(--selection);
color: #fff;
color: var(--text-bright);
}
::selection {
background-color: #1c76c5;
background-color: var(--selection);
color: #fff;
color: var(--text-bright);
}
details {
display: flex;
flex-direction: column;
align-items: flex-start;
background-color: #1a242f;
background-color: var(--background-alt);
padding: 10px 10px 0;
margin: 1em 0;
border-radius: 6px;
overflow: hidden;
}
details[open] {
padding: 10px;
}
details > :last-child {
margin-bottom: 0;
}
details[open] summary {
margin-bottom: 10px;
}
summary {
display: list-item;
background-color: #161f27;
background-color: var(--background);
padding: 10px;
margin: -10px -10px 0;
cursor: pointer;
outline: none;
}
summary:hover,
summary:focus {
text-decoration: underline;
}
details > :not(summary) {
margin-top: 0;
}
summary::-webkit-details-marker {
color: #dbdbdb;
color: var(--text-main);
}
footer {
border-top: 1px solid #526980;
border-top: 1px solid var(--border);
padding-top: 10px;
color: #a9b1ba;
color: var(--text-muted);
}
body > footer {
margin-top: 40px;
}
@media print {
body,
pre,
code,
summary,
details,
button,
input,
textarea {
background-color: #fff;
}
button,
input,
textarea {
border: 1px solid #000;
}
body,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
button,
input,
textarea,
footer,
summary,
strong {
color: #000;
}
summary::marker {
color: #000;
}
summary::-webkit-details-marker {
color: #000;
}
tbody tr:nth-child(even) {
background-color: #f2f2f2;
}
a {
color: #00f;
text-decoration: underline;
}
}
/*# sourceMappingURL=dark.css.map */

View File

@ -0,0 +1,20 @@
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
body {
margin: 20px auto;
max-width: 800px;
padding: 0 10px;
background: var(--background-body);
}
pre.src {
background: #1a242f;
padding: 10px 20px;
border-radius: 2px;
}

63
build/html/index.html Normal file
View File

@ -0,0 +1,63 @@
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://localhost:3003//html/assets/styles/dark.css?1">
<link rel="stylesheet" href="http://localhost:3003/html/assets/styles/main.css?1">
</head>
<body>
<header>
<h1>lxsameer's nest</h1>
<nav>
<a href="#">HOME</a> | <a href="#">GPG</a>
</nav>
</header>
<div id="content">
<div class="column" id="outline-container-org9b85153" class="outline-2">
<h2 id="org9b85153">Welcome&#xa0;&#xa0;&#xa0;<div class="tags">
<h5>(ABD BD)</h5>
</div>
</h2>
<div class="outline-text-2" id="text-org9b85153">
<p>
blha bbasd asds asd a asd <code>asdasd</code> somer `asdasd` sadasd <b>asdasD</b> asdasd <i>asdasd</i> asdasd.
ads ad asd asd as dasd asd
</p>
<ul class="org-ul">
<li>list a</li>
<li class="off"><code>[&#xa0;]</code> asdasdasd</li>
<li class="on"><code>[X]</code> asdasd</li>
</ul>
</div>
<div id="outline-container-orgc886b6f" class="outline-3">
<h3 id="orgc886b6f"><span class="todo TODO">TODO</span> asdasdasdsad&#xa0;&#xa0;&#xa0;<div class="tags">
<h5>(ABD)</h5>
</div>
</h3>
<div class="outline-text-3" id="text-orgc886b6f">
<div class="org-src-container">
<pre class="src src-java" id="orgb44f00d"><span style="color: #ff00ff; font-weight: bold;">class</span> <span style="color: brightmagenta;">Blah</span>() {
<span style="color: brightmagenta;">int</span> <span style="color: #00ff00; font-weight: bold;">main</span>() {
<span style="color: #ff00ff; font-weight: bold;">return</span> 0;
}
}
</pre>
</div>
</div>
</div>
</div class="column">
</div>
<footer>
<span>© 2010-2021 Sameer Rahmani</span><br/>
<span>Built with <a href="https://www.gnu.org/software/emacs/">Emacs Lisp</a> and <a href="https://orgmode.org/">org-mode</a>.</span><br/>
<span><a href="https://devheroes.codes/lxsameer/lxhome">https://devheroes.codes/lxsameer/lxhome</a></span>
</footer>
</div>
</body>
</html>

32
build/html/sitemap.html Normal file
View File

@ -0,0 +1,32 @@
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://localhost:3003//html/assets/styles/dark.css?1">
<link rel="stylesheet" href="http://localhost:3003/html/assets/styles/main.css?1">
</head>
<body>
<header>
<h1>lxsameer's nest</h1>
<nav>
<a href="#">HOME</a> | <a href="#">GPG</a>
</nav>
</header>
<div id="content">
<ul class="org-ul">
<li><a href="index.html">blah</a></li>
</ul>
</div>
<footer>
<span>© 2010-2021 Sameer Rahmani</span><br/>
<span>Built with <a href="https://www.gnu.org/software/emacs/">Emacs Lisp</a> and <a href="https://orgmode.org/">org-mode</a>.</span><br/>
<span><a href="https://devheroes.codes/lxsameer/lxhome">https://devheroes.codes/lxsameer/lxhome</a></span>
</footer>
</div>
</body>
</html>

View File

@ -1,19 +0,0 @@
---
layout: default
permalink: /categories/
title: Categories
theme: dark
---
<div class="columns centered is-flex">
<div class="column is-half">
{% for category in site.categories %}
<ul>
{% capture category_name %}{{ category | first }}{% endcapture %}
<li class="is-size-3">
<a href="/categories/{{category_name}}">{{ category_name | capitalize }}</a>
</li>
{% endfor %}
</ul>
</div>
</div>

View File

@ -1,6 +0,0 @@
---
layout: categories
title: Cooking
category: cooking
theme: dark
---

87
coh.md
View File

@ -1,87 +0,0 @@
---
layout: page
theme: dark
title: Code Of Honor
permalink: /code-of-honor/
---
I always try to live by my code of honor. A man is nothing without his honor. "A sin is to betray your beliefs".
## Honorable life
* Don't betray your code of honor.
* Defend your Bushido way.
* Live life as a Honorable Man.
* Don't lie.
* Honesty takes courage.
* Don't talk without a knowledge to support it.
* "Don't argue with the crazy guy".
* Always follow your sense of Justice
* Feel the pain of others.
* Always put your self in people's shoe before making any decision.
* A simple smile goes a long way.
* There's no honor in winning by cheating.
* "If you fall down 7 times make sure to get up 8 times."
* Protect your promises.
* "For a samurai everywhere is Japan."
* Holding back is disrespectful to your opponent.
* Live life in your way.
* "Respect is earned, not given", So earn it.
* "A man is much more than the job he holds and clothes he wears."
## Science
> Truth is sought for its own sake … Finding the truth is difficult, and the road to it is rough.
> For the truths are plunged in obscurity … God, however, has not preserved the scientist from error
> and has not safeguarded science from shortcomings and faults. If this had been the case, scientists
> would not have disagreed upon any point of science… Therefore, the seeker after the truth is not one
> who studies the writings of the ancients and, following his natural disposition, puts his trust in them,
> but rather the one who suspects his faith in them and questions what he gathers from them, the one who
> submits to argument and demonstration, and not to the sayings of a human being whose nature is fraught
> with all kinds of imperfection and deficiency. Thus the duty of the man who investigates the writings
> of scientists, if learning the truth is his goal, is to make himself an enemy of all that he reads,
> and, applying his mind to the core and margins of its content, attack it from every side. He should
> also suspect himself as he performs his critical examination of it, so that he may avoid falling
> into either prejudice or leniency.
-- Ibn al-Haytham
## Programming
* Simplicity over Complexity
* Simple first, then Easy
* Abstraction, Abstraction, Abstraction
* Put your conventions layer on top of a well written abstraction
* Always choose a name for your variables which implies the variable content or usage.
* Never ever use variable names such as x, a, b, etc.
* Bugs before new features
* Docs before new features
### Library design
* Major releases can contain backward incompatible changes.
* It's better to use a different code name instead of a major version number change
to indicate that there going to be backward incompatible changes.
* Minor releases shouldn't break the dependency versions. E.g: X(0.6.0) depends on Python(3.5.x),
X(0.7.0) should depends on the same version python
### New Feature Checklist
* Is it easy to extend the feature ?
* Is it scalable ?
* Is it easy to maintain ?
* Is it well documented ?
* Does it have the best possible performance ?
* What about tests ?
* Is it following the correct coding style ?
### Resiliency Checklist
* Things that might fail:
* Dependant systems
* Network
* External storage
* Database
* "The Cloud"
## Trading Checklist
* TBD
## Contribute to the Code Of Honor
If you found these codes useful and like to share your values with me, you're welcome to create a PR
on [the repository](https://gitlab.com/lxsameer/lxhome).

10
config.org Normal file
View File

@ -0,0 +1,10 @@
#+AUTHOR: Sameer Rahmani
#+EMAIL: lxsameer@gnu.org
#+LANGUAGE: en
#+OPTIONS: toc:2
#+options: html5-fancy:t tex:t
#+html_doctype: html5
#+HTML_CONTAINER: div class="column"
#+HTML_CONTENT_CLASS: row
#+creator: <a href="https://www.gnu.org/software/emacs/">Emacs</a> 27.1 (<a href="https://orgmode.org">Org</a> mode )
#+HTML_LINK_HOME: https://lxsameer.com/

6
gpg.md
View File

@ -1,6 +0,0 @@
---
layout: post
---
I care about privacy. Here is my [Official GPG Public Key](/gpg/public.pgp).

View File

@ -1,7 +0,0 @@
---
layout: home
theme: dark
home: true
---
I try to keep my posts short, so I can write more often.

81
lisp/ox-template.el Normal file
View File

@ -0,0 +1,81 @@
;;; ox-template.el --- A HTML exporter via templates for org-mode
;; Copyright (C) 2021 Sameer Rahmani
;; Author: Sameer Rahmani <lxsameer@gnu.org>
;; URL: https://devheroes.codes/lxsameer/lxhome
;;
;; This program is free software; you can redistribute it and/or modify
;; it under the terms of the GNU General Public License as published by
;; the Free Software Foundation, either version 3 of the License, or
;; (at your option) any later version.
;;
;; This program is distributed in the hope that it will be useful,
;; but WITHOUT ANY WARRANTY; without even the implied warranty of
;; MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
;; GNU General Public License for more details.
;;
;; You should have received a copy of the GNU General Public License
;; along with this program. If not, see <http://www.gnu.org/licenses/>.
;;; Commentary:
;; Inspired by Juan Jose Garcia Ripoll work.
;;; Code:
;; We ensure the org infrastructure
(require 'org)
(require 'ox-publish)
(require 'mustache)
(require 'htmlize)
(require 'ht)
(advice-add 'org-html--tags :override 'org-html-tag-template)
(defun org-html-tag-template (tags info)
(message "<<<<<<<<<<<< %s" tags)
(let ((template (plist-get info :html-headline-template))
(ctx (ht ("tags" (format "%s" tags))
("base-url" (plist-get info :base-url)))))
(mustache-render (use-html template) ctx)))
(defun use-html (path-to-template)
"Use the given template at PATH-TO-TEMPLATE as a template."
(with-temp-buffer
(insert-file-contents path-to-template)
(buffer-string)))
(org-export-define-derived-backend 'templated-html 'html
:translate-alist '(;;(headline . templated-html-headline-fn)
(template . templated-html-template-fn)))
(defun render-template (template-name contents info)
"Render the given template TEMPLATE-NAME using CONTENTS and INFO."
(let ((ctx (ht ("content" contents)
("head" (plist-get info :html-head-extra))
("base-url" (plist-get info :base-url)))))
(mustache-render (use-html template-name) ctx)))
(defun templated-html-template-fn (contents info)
"Return the finalized html CONTENTS using the INFO and templates."
(let ((template (plist-get info :html-template)))
(if template
(render-template template contents info)
(org-html-template contents info))))
(defun org-html-publish-to-templated-html (plist filename pub-dir)
"Publish an org file to HTML.
FILENAME is the filename of the Org file to be published. PLIST
is the property list for the given project. PUB-DIR is the
publishing directory.
Return output file name."
(org-publish-org-to 'templated-html filename
(concat "." (or (plist-get plist :html-extension)
org-html-extension
"html"))
plist pub-dir))
(provide 'lisp/ox-template)
;;; ox-template.el ends here

24
orgs/index.org Normal file
View File

@ -0,0 +1,24 @@
#+SETUPFILE: ../config.org
#+OPTIONS: toc:nil
#+EXPORT_FILE_NAME: index.html
#+TAGS: ABD(a) BD(c) ASDK(k)
#+TITLE: blah
* Welcome :ABD:BD:
#+CATEGORY: WELCO
blha bbasd asds asd a asd =asdasd= somer `asdasd` sadasd *asdasD* asdasd /asdasd/ asdasd.
ads ad asd asd as dasd asd
- list a
- [ ] asdasdasd
- [X] asdasd
** TODO asdasdasdsad :ABD:
SCHEDULED: <2021-02-08 Mon>
#+NAME: src1
#+BEGIN_SRC java
class Blah() {
int main() {
return 0;
}
}
#+END_SRC

3
orgs/sitemap.inc Normal file
View File

@ -0,0 +1,3 @@
#+TITLE: lxsameer's nest
- [[file:index.org][blah]]

29
templates/blog.html Normal file
View File

@ -0,0 +1,29 @@
<!doctype html>
<html lang="en">
<head>
{{{head}}}
<link rel="stylesheet" href="{{base-url}}//html/assets/styles/dark.css?1">
<link rel="stylesheet" href="{{base-url}}/html/assets/styles/main.css?1">
</head>
<body>
<header>
<h1>lxsameer's nest</h1>
<nav>
<a href="#">HOME</a> | <a href="#">GPG</a>
</nav>
</header>
<div id="content">
{{{content}}}
</div>
<footer>
<span>© 2010-2021 Sameer Rahmani</span><br/>
<span>Built with <a href="https://www.gnu.org/software/emacs/">Emacs Lisp</a> and <a href="https://orgmode.org/">org-mode</a>.</span><br/>
<span><a href="https://devheroes.codes/lxsameer/lxhome">https://devheroes.codes/lxsameer/lxhome</a></span>
</footer>
</div>
</body>
</html>

1
templates/footer.html Normal file
View File

@ -0,0 +1 @@

Some files were not shown because too many files have changed in this diff Show More