diff --git a/.gitignore b/.gitignore index 8d83faa..344390c 100644 --- a/.gitignore +++ b/.gitignore @@ -30,3 +30,15 @@ smex-items elpa/ bm-repository .fpkg-v3/ +website/__pycache__/ +website/*.pyc +website/.sass-cache/ +website/theme/static/css/bulma.css +website/output/ +website/public/ +website/*.old.jpg +website/pelican-plugins/ +website/.*.swp +website/*~ +#*# + diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml index 72bdc70..177c032 100644 --- a/.gitlab-ci.yml +++ b/.gitlab-ci.yml @@ -11,6 +11,7 @@ stages: script: - cd ~/.fg42/ && fg42 -nw --script build.el + .build-v3: image: debian:stable-slim stage: build @@ -24,8 +25,20 @@ build-branches-v3: extends: .build-v3 only: - branches - except: - - tags + +build-branches: + extends: .build + script: + - cd /root/.fg42/ && fg42 -nw --script build.el + - cd /root/ && tar zcf ~/fg42.$CI_COMMIT_REF_NAME.tar.gz .fg42/ + - mv ~/fg42.$CI_COMMIT_REF_NAME.tar.gz /builds/$CI_PROJECT_PATH/ + artifacts: + name: "fg42.$CI_COMMIT_REF_SLUG" + when: on_success + paths: + - fg42.$CI_COMMIT_REF_NAME.tar.gz + only: + - branches build-branches: extends: .build diff --git a/lib/extensions/development/init.el b/lib/extensions/development/init.el index f1dab33..d965da6 100644 --- a/lib/extensions/development/init.el +++ b/lib/extensions/development/init.el @@ -258,6 +258,7 @@ (ability yaml () "YAML editor." (require 'yaml-mode) + (add-hook 'yaml-mode-hook (lambda () (interactive) (whitespace-mode 1))) (add-to-list 'auto-mode-alist '("\\.yml\\'" . yaml-mode)) (add-to-list 'auto-mode-alist '("\\.sls\\'" . yaml-mode))) diff --git a/lib/extensions/editor/init.el b/lib/extensions/editor/init.el index 6f84e26..10d1294 100644 --- a/lib/extensions/editor/init.el +++ b/lib/extensions/editor/init.el @@ -290,8 +290,9 @@ (ido-mode t) - (smex-initialize) - (global-set-key (kbd "M-x") 'smex) + (ability smex () + (smex-initialize) + (global-set-key (kbd "M-x") 'smex)) (flx-ido-mode 1) (setq ido-use-faces nil) diff --git a/lib/extensions/go.el b/lib/extensions/go.el index 9f74808..0365bdc 100644 --- a/lib/extensions/go.el +++ b/lib/extensions/go.el @@ -10,7 +10,6 @@ (depends-on 'go-mode) (depends-on 'go-add-tags) (depends-on 'go-stacktracer) -(depends-on 'go-eldoc) (depends-on 'gotest) (depends-on 'exec-path-from-shell) diff --git a/lib/extensions/go/init.el b/lib/extensions/go/init.el index e1f6231..b8bfbf4 100644 --- a/lib/extensions/go/init.el +++ b/lib/extensions/go/init.el @@ -5,12 +5,15 @@ (defun fg42-go-hook () ;; move to action "Set's up emacs hooks and turn necessary modes on." + (lsp-register-custom-settings + '(("gopls.completeUnimported" t t) + ("gopls.staticcheck" t t))) (lsp) (with-ability yas - (yas-minor-mode-on)) + (yas-minor-mode-on)) + (setq-local company-backends '(company-capf company-dabbrev company-dabbrev-code)) (add-hook 'before-save-hook #'lsp-format-buffer t t) (add-hook 'before-save-hook #'lsp-organize-imports t t) - (add-hook 'go-mode-hook 'go-eldoc-setup) (local-set-key (kbd "M-.") #'godef-jump) (local-set-key (kbd "M-*") 'pop-tag-mark)) diff --git a/lib/fpkg.el b/lib/fpkg.el index 833adb2..eddd285 100644 --- a/lib/fpkg.el +++ b/lib/fpkg.el @@ -100,6 +100,7 @@ (fpkg-initialize))) + (defun official-extension-p (args) "Predicate to say if ARGS is an official FG42 extension." (member args fg42/extensions)) diff --git a/website/Makefile b/website/Makefile new file mode 100644 index 0000000..6fcf43f --- /dev/null +++ b/website/Makefile @@ -0,0 +1,75 @@ +PY?=python3 +PELICAN?=pelican +PELICANOPTS= + +BASEDIR=$(CURDIR) +INPUTDIR=$(BASEDIR)/content +OUTPUTDIR=$(BASEDIR)/public +CONFFILE=$(BASEDIR)/pelicanconf.py +PUBLISHCONF=$(BASEDIR)/publishconf.py + + +DEBUG ?= 0 +ifeq ($(DEBUG), 1) + PELICANOPTS += -D +endif + +RELATIVE ?= 0 +ifeq ($(RELATIVE), 1) + PELICANOPTS += --relative-urls +endif + +help: + @echo 'Makefile for a pelican Web site ' + @echo ' ' + @echo 'Usage: ' + @echo ' make html (re)generate the web site ' + @echo ' make clean remove the generated files ' + @echo ' make regenerate regenerate files upon modification ' + @echo ' make publish generate using production settings ' + @echo ' make serve [PORT=8000] serve site at http://localhost:8000' + @echo ' make serve-global [SERVER=0.0.0.0] serve (as root) to $(SERVER):80 ' + @echo ' make devserver [PORT=8000] serve and regenerate together ' + @echo ' make ssh_upload upload the web site via SSH ' + @echo ' make rsync_upload upload the web site via rsync+ssh ' + @echo ' ' + @echo 'Set the DEBUG variable to 1 to enable debugging, e.g. make DEBUG=1 html ' + @echo 'Set the RELATIVE variable to 1 to enable relative urls ' + @echo ' ' + +html: + $(PELICAN) $(INPUTDIR) -o $(OUTPUTDIR) -s $(CONFFILE) $(PELICANOPTS) + +clean: + [ ! -d $(OUTPUTDIR) ] || rm -rf $(OUTPUTDIR) + +regenerate: + $(PELICAN) -r $(INPUTDIR) -o $(OUTPUTDIR) -s $(CONFFILE) $(PELICANOPTS) + +serve: +ifdef PORT + $(PELICAN) -l $(INPUTDIR) -o $(OUTPUTDIR) -s $(CONFFILE) $(PELICANOPTS) -p $(PORT) +else + $(PELICAN) -l $(INPUTDIR) -o $(OUTPUTDIR) -s $(CONFFILE) $(PELICANOPTS) +endif + +serve-global: +ifdef SERVER + $(PELICAN) -l $(INPUTDIR) -o $(OUTPUTDIR) -s $(CONFFILE) $(PELICANOPTS) -p $(PORT) -b $(SERVER) +else + $(PELICAN) -l $(INPUTDIR) -o $(OUTPUTDIR) -s $(CONFFILE) $(PELICANOPTS) -p $(PORT) -b 0.0.0.0 +endif + + +devserver: +ifdef PORT + $(PELICAN) -lr $(INPUTDIR) -o $(OUTPUTDIR) -s $(CONFFILE) $(PELICANOPTS) -p $(PORT) +else + $(PELICAN) -lr $(INPUTDIR) -o $(OUTPUTDIR) -s $(CONFFILE) $(PELICANOPTS) +endif + +publish: + $(PELICAN) $(INPUTDIR) -o $(OUTPUTDIR) -s $(PUBLISHCONF) $(PELICANOPTS) + + +.PHONY: html help clean regenerate serve serve-global devserver publish diff --git a/website/README.md b/website/README.md new file mode 100644 index 0000000..c9653e0 --- /dev/null +++ b/website/README.md @@ -0,0 +1,43 @@ +![Build Status](https://gitlab.com/pouya-abbassi/pouyacode/badges/master/build.svg) + +--- + +[FG42](https://fg42.org) built using [Pelican](https://blog.getpelican.com) & [Bulma](https://bulma.io). + +## Build + +``` +pip install -r requirements.txt +git clone git@github.com:getpelican/pelican-plugins.git +make publish +``` + +This will create `public` directory contaning all static files. + +## Email Obfuscation +I use [ROT13](https://en.wikipedia.org/wiki/ROT13) to obfuscate email adresses. +So email adresses that would be visible to users should be generated using this command (or similar tools): + +``` +echo "pcode@protonmail.com" | tr 'A-Za-z' 'N-ZA-Mn-za-m' +#or +tr 'A-Za-z' 'N-ZA-Mn-za-m' <<< "pcode@protonmail.com" +``` + +They are then processed on user's browser using a simple js function. + +## Sample Pages +There is a sample page at `content/docs.md` that has a metadata `status: hidden`. +Remove this metadata to see it in the index page. This page is just for demo purpose. + +Also there are two pages inside `content/pages/` directory with metadata `error: true`. +This makes the background to stretch and fill the page. +The `content/pages/release-notes.md` is also just for demo purpose. + +## Images +Images for articles and pages should be stored at `theme/static/images/articles/` and `theme/static/images/pages/` directory. +These images should be named after their page title so it would be easier to manage. + +## Configs +Development config file is `pelicanconf.py` and the deployment config file is `publishconf.py`. +`SITEURL` and `PLUGINS` are two most important lines of those files. diff --git a/website/content/docs.md b/website/content/docs.md new file mode 100644 index 0000000..556a5f3 --- /dev/null +++ b/website/content/docs.md @@ -0,0 +1,21 @@ +Title: Docs +Description: of Future Gadget 42 +Date: 2020-05-28 05:57:59 +category: Docs +image: docs.png +icon: far fa-clipboard +status: hidden + + +## Title +Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + +| Syntax | Description | +| ----------- | ----------- | +| Header | Title | +| Paragraph | Text | + +Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + +--- +*Image was the preceding FG42 logo.* diff --git a/website/content/pages/.404.md.swp b/website/content/pages/.404.md.swp new file mode 100644 index 0000000..aebe8d1 Binary files /dev/null and b/website/content/pages/.404.md.swp differ diff --git a/website/content/pages/404.md b/website/content/pages/404.md new file mode 100644 index 0000000..0c6686f --- /dev/null +++ b/website/content/pages/404.md @@ -0,0 +1,23 @@ +Title: 404 +Description: You seem lost. +Modified: 2010-12-05 19:30 +image: 404.jpg +icon: far fa-frown +Status: hidden +error:true +Save_as: 404.html + + +> The universe has a beginning, but no end. — Infinity. + +> Stars, too, have their own beginnings, but their own power results in their destruction. — Finite. + +> It is those who possess wisdom who are the greatest fools. History has shown us this. + +> You could say that this is the final warning from God to those who resist. + +Okabe Rintarou — Steins;Gate + +--- +*The requested item could not be located. Perhaps you might want to check the [Archives](/archives.html)?* +*Image from [Freepik](https://www.freepik.com/free-vector/space-background-with-planets_1229807.htm).* diff --git a/website/content/pages/release-notes.md b/website/content/pages/release-notes.md new file mode 100644 index 0000000..ea2e071 --- /dev/null +++ b/website/content/pages/release-notes.md @@ -0,0 +1,20 @@ +Title: Release Notes +Description: of the Future Gadget 42 +Modified: 2010-12-05 19:30 +image: release-notes.png +icon: far fa-clipboard +Status: hidden +error:true +Save_as: release-notes.html + +Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + +| Syntax | Description | +| ----------- | ----------- | +| Header | Title | +| Paragraph | Text | + +Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + +--- +*Image was the preceding FG42 logo.* diff --git a/website/pelicanconf.py b/website/pelicanconf.py new file mode 100644 index 0000000..22dc601 --- /dev/null +++ b/website/pelicanconf.py @@ -0,0 +1,59 @@ +#!/usr/bin/env python +# -*- coding: utf-8 -*- # + +from __future__ import unicode_literals +from jsmin import jsmin +import sass, os + +AUTHOR = 'Sameer Rahmani' +SITENAME = 'Future Gadgets 42' +DESCRIPTION = 'Ultimate Emacs based IDE for true believers' +EMAIL_ROT13 = 'znvygb:ykfnzrre@tah.bet' # ROT13 +SITEURL = 'http://localhost:8000' + +PATH = 'content' + +TIMEZONE = 'Asia/Tehran' + +DEFAULT_LANG = 'en' + +PELICAN_VERSION = os.popen('pelican --version').readline().strip() + +# Feed generation is usually not desired when developing +FEED_ALL_ATOM = 'feeds/all.atom.xml' +CATEGORY_FEED_ATOM = 'feeds/{slug}.atom.xml' +TRANSLATION_FEED_ATOM = None +AUTHOR_FEED_ATOM = None +AUTHOR_FEED_RSS = None + +# Social widget +SOCIAL = ( + ('Email', EMAIL_ROT13, 'fas fa-at'), + ('Atom feed', FEED_ALL_ATOM, 'fas fa-rss'), + ) + +DEFAULT_PAGINATION = 10 + +# Uncomment following line if you want document-relative URLs when developing +RELATIVE_URLS = False + +# Theme +THEME = 'theme' + +PLUGIN_PATHS = ['pelican-plugins'] +PLUGINS = ['readtime', 'share_post', 'neighbors'] +SITEMAP = {'format': 'xml'} + +# Sass compile +with open(THEME + '/static/css/bulma.css', 'w') as css: + style = sass.compile(filename=('sass/bulma.sass'), output_style='compressed') + css.write(style) + css.close() + +# JS minifier +with open('theme/static/js/main.js') as js_file: + with open('theme/static/js/main.min.js','w') as min_file: + minified = jsmin(js_file.read()) + min_file.write(minified) + min_file.close() + diff --git a/website/publishconf.py b/website/publishconf.py new file mode 100644 index 0000000..e70dfe1 --- /dev/null +++ b/website/publishconf.py @@ -0,0 +1,27 @@ +#!/usr/bin/env python +# -*- coding: utf-8 -*- # +from __future__ import unicode_literals + +# This file is only used if you use `make publish` or +# explicitly specify it as your config file. + +import os +import sys +sys.path.append(os.curdir) +from pelicanconf import * + +# If your site is available via HTTPS, make sure SITEURL begins with https:// +SITEURL = 'https://fg42.org' +RELATIVE_URLS = False + +FEED_ALL_ATOM = 'feeds/all.atom.xml' +CATEGORY_FEED_ATOM = 'feeds/{slug}.atom.xml' + +DELETE_OUTPUT_DIRECTORY = True + +PLUGINS += ['sitemap', 'optimize_images'] + +# Following items are often useful when publishing + +#DISQUS_SITENAME = "" +#GOOGLE_ANALYTICS = "" diff --git a/website/requirements.txt b/website/requirements.txt new file mode 100644 index 0000000..c2302fe --- /dev/null +++ b/website/requirements.txt @@ -0,0 +1,17 @@ +beautifulsoup4==4.8.1 +blinker==1.4 +bs4==0.0.1 +docutils==0.15.2 +feedgenerator==1.9 +Jinja2==2.10.3 +jsmin==2.2.2 +libsass==0.19.4 +Markdown==3.1.1 +MarkupSafe==1.1.1 +pelican==4.2.0 +Pygments==2.5.2 +python-dateutil==2.8.1 +pytz==2019.3 +six==1.13.0 +soupsieve==1.9.5 +Unidecode==1.1.1 diff --git a/website/sass/bulma.sass b/website/sass/bulma.sass new file mode 100644 index 0000000..485e2dc --- /dev/null +++ b/website/sass/bulma.sass @@ -0,0 +1,312 @@ +@charset "utf-8" + +@font-face + font-family: 'Roboto' + font-style: normal + font-weight: 400 + src: local('Roboto') + src: local('Roboto-Regular') + src: url(/theme/fonts/Roboto/Roboto-Regular.woff2) format('woff2') + font-display: fallback + +@font-face + font-family: 'Roboto' + font-style: italic + font-weight: 400 + src: local('Roboto Italic') + src: local('Roboto-Italic') + src: url(/theme/fonts/Roboto/Roboto-Italic.woff2) format('woff2') + font-display: fallback + +@font-face + font-family: 'Roboto' + font-style: normal + font-weight: 700 + src: local('Roboto Bold') + src: local('Roboto-Bold') + src: url(/theme/fonts/Roboto/Roboto-Bold.woff2) format('woff2') + font-display: fallback + +@font-face + font-family: 'Quicksand' + font-style: normal + font-weight: 500 + src: local('Quicksand Medium') + src: local('Quicksand-Medium') + src: url(/theme/fonts/Quicksand/Quicksand-Medium.woff2) format('woff2') + font-display: fallback + +@font-face + font-family: 'Quicksand' + font-style: normal + font-weight: 300 + src: local('Quicksand Light') + src: local('Quicksand-Light') + src: url(/theme/fonts/Quicksand/Quicksand-Light.woff2) format('woff2') + font-display: fallback + +@font-face + font-family: 'Ubuntu Mono' + font-style: normal + font-weight: 400 + src: local('Ubuntu Mono') + src: local('UbuntuMono-Regular') + src: url(/theme/fonts/Ubuntu_Mono/UbuntuMono-Regular.woff2) format('woff2') + font-display: fallback + +@font-face + font-family: 'Ubuntu Mono' + font-style: normal + font-weight: 700 + src: local('Ubuntu Mono Bold') + src: local('UbuntuMono-Bold') + src: url(/theme/fonts/Ubuntu_Mono/UbuntuMono-Bold.woff2) format('woff2') + font-display: fallback + +$family-sans-serif: 'Roboto', Arial, Helvetica, sans-serif +$family-serif: 'Quicksand', Times, serif +$family-monospace: 'ubuntu mono', hack +$family-primary: $family-sans-serif +$family-secondary: $family-serif + +$primary-background: #222225 +$primary-color: #FFFFEE +$secondary-background: #333336 +$secondary-color: #FFFFEE +$primary: $primary-background +$primary-invert: $primary-color + +$nav-background: $secondary-background +$nav-primary: $secondary-color + +$navbar-dropdown-background-color: $nav-background +$navbar-dropdown-arrow: $nav-primary +$navbar-background-color: $nav-background +$navbar-item-color: $nav-primary +$navbar-item-hover-color: $primary-color +$navbar-item-hover-background-color: $primary-background +$navbar-dropdown-item-active-color: $primary-color +$navbar-dropdown-item-active-background-color: $primary-background +$navbar-dropdown-item-hover-color: $primary-color +$navbar-dropdown-item-hover-background-color: $primary-background + +$title-family: $family-serif +$subtitle-family: $family-serif + +$footer-background-color: $nav-background +$footer-color: $nav-primary + +$code: #AAEEAA +$code-background: #333333AA +$pre: #AAEEAA +$pre-background: #333333AA + +/*! bulma.io v0.7.5 | MIT License | github.com/jgthms/bulma */ +@import "sass/utilities/_all" +@import "sass/base/_all" +@import "sass/elements/_all" +@import "sass/form/_all" +@import "sass/components/_all" +@import "sass/grid/_all" +@import "sass/layout/_all" + + +html, body + scrollbar-width: thin + scrollbar-color: #000000 #222222 + background: $primary-background + color: $primary-color + +pre, .code + font-family: $family-monospace + +.avatar + margin: inherit + +.column.is-three-fifths + margin: auto + +a.article-title + color: $secondary-color + &:hover + color: $primary-color + text-decoration: underline + +article.content + padding: 1rem + border: 1px solid $primary-background + border-radius: 1rem + &:hover + border: 1px solid $secondary-background + background: $secondary-background + box-shadow: inset 0 0 3rem 2rem $primary-background + +.title, h1, h2, h1 a, h2 a + font-weight: 300 + +.title strong + font-weight: 500 + +.subtitle, h1 small, h2 small + color: $secondary-color + font-weight: 500 + +.tag:not(body).is-primary + border: 1px solid + background: transparent + +.tag:not(body) + color: $primary-background + background: $primary-color + +.tag:not(body).is-primary + color: $primary-color + border: 1px solid + background: transparent + +.input + color: $primary-color + border: 1px solid + background: transparent + &:hover + color: $primary-color + border: 1px solid + background: $secondary-background + &:focus + color: $primary-color + border: 1px solid + background: transparent + &:active + color: $primary-color + border: 1px solid + background: $secondary-background + @include placeholder + color: $primary-color + +.button.is-primary + color: $primary-color + border: 1px solid + background: transparent + &:hover + color: $primary-color + border: 1px solid + background: $secondary-background + &:focus + color: $primary-color + border: 1px solid + background: transparent + +#subscription + max-width: max-content + border: 2px solid + border-radius: 1rem + margin: 2rem auto 0px auto + padding: 1rem + +.button.article-image + float: right + +.blog-content + font-size: 1.2rem + p + img + width: 100% + +.navbar-item + img + max-height: 3rem + width: auto + +.bar-top + height: 2px + width: 100vw + background-image: linear-gradient(to right, #ed5017 , #f68f1d) + +.bar-bottom + height: 2px + width: 100vw + background-image: linear-gradient(to right, #18bfdc , #023d6b) + +.footer + padding-bottom: 3rem + +.table + background: transparent + +.table th + color: $primary-color + +.content table thead th + color: $primary-color + +strong + color: $primary-color + +a + color: $primary-color + &:hover + color: $primary-color + text-decoration: underline + +.content a, table a + text-decoration: underline dotted + &:hover + text-decoration: underline + +.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 + color: $primary-color + font-family: $title-family + +.content blockquote + border-left: 0.25rem wavy $primary-color + background: #2228 + background-opacity: 0.4 + padding: 1rem + +blockquote p + padding: 0 + +hr + background: $primary-color + +.pagination-previous, .pagination-next, .pagination-link + color: $primary-color + font-family: $title-family + border-color: $primary-color + &:hover + color: $primary-color + text-decoration: underline + &:focus + border-color: $primary-color + +p.readtime + opacity: 0.8 + font-family: $title-family + +.share + text-align: right + +#feedback + font-family: $title-family + a + text-decoration: underline dotted + &:hover + text-decoration: underline + span, i + display: none + +.button.is-text + color: $primary-color + +// Scrollbar Width +::-webkit-scrollbar + width: 6px + +// Scrollbar Track +::-webkit-scrollbar-track + background: #222 + +// Scrollbar Handle +::-webkit-scrollbar-thumb + background: #000 + diff --git a/website/sass/sass/.DS_Store b/website/sass/sass/.DS_Store new file mode 100644 index 0000000..3aa8e90 Binary files /dev/null and b/website/sass/sass/.DS_Store differ diff --git a/website/sass/sass/base/_all.sass b/website/sass/sass/base/_all.sass new file mode 100644 index 0000000..e913d6b --- /dev/null +++ b/website/sass/sass/base/_all.sass @@ -0,0 +1,5 @@ +@charset "utf-8" + +@import "minireset.sass" +@import "generic.sass" +@import "helpers.sass" diff --git a/website/sass/sass/base/generic.sass b/website/sass/sass/base/generic.sass new file mode 100644 index 0000000..376cd5e --- /dev/null +++ b/website/sass/sass/base/generic.sass @@ -0,0 +1,142 @@ +$body-background-color: $white !default +$body-size: 16px !default +$body-min-width: 300px !default +$body-rendering: optimizeLegibility !default +$body-family: $family-primary !default +$body-overflow-x: hidden !default +$body-overflow-y: scroll !default + +$body-color: $text !default +$body-font-size: 1em !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 + +$small-font-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 + +$pre-font-size: 0.875em !default +$pre-padding: 1.25rem 1.5rem !default +$pre-code-font-size: 1em !default + +html + background-color: $body-background-color + font-size: $body-size + -moz-osx-font-smoothing: grayscale + -webkit-font-smoothing: antialiased + min-width: $body-min-width + overflow-x: $body-overflow-x + overflow-y: $body-overflow-y + 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: $body-font-size + 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: $small-font-size + +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: $pre-font-size + overflow-x: auto + padding: $pre-padding + white-space: pre + word-wrap: normal + code + background-color: transparent + color: currentColor + font-size: $pre-code-font-size + padding: 0 + +table + td, + th + vertical-align: top + &:not([align]) + text-align: left + th + color: $text-strong diff --git a/website/sass/sass/base/helpers.sass b/website/sass/sass/base/helpers.sass new file mode 100644 index 0000000..bbb489d --- /dev/null +++ b/website/sass/sass/base/helpers.sass @@ -0,0 +1,281 @@ +// 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-medium + font-weight: $weight-medium !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 + +.is-relative + position: relative !important diff --git a/website/sass/sass/base/minireset.sass b/website/sass/sass/base/minireset.sass new file mode 100644 index 0000000..a488f12 --- /dev/null +++ b/website/sass/sass/base/minireset.sass @@ -0,0 +1,85 @@ +/*! 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 + &:not([align]) + text-align: left diff --git a/website/sass/sass/components/_all.sass b/website/sass/sass/components/_all.sass new file mode 100644 index 0000000..88fd45c --- /dev/null +++ b/website/sass/sass/components/_all.sass @@ -0,0 +1,15 @@ +@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" diff --git a/website/sass/sass/components/breadcrumb.sass b/website/sass/sass/components/breadcrumb.sass new file mode 100644 index 0000000..bcbd15b --- /dev/null +++ b/website/sass/sass/components/breadcrumb.sass @@ -0,0 +1,75 @@ +$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" diff --git a/website/sass/sass/components/card.sass b/website/sass/sass/components/card.sass new file mode 100644 index 0000000..ca231a5 --- /dev/null +++ b/website/sass/sass/components/card.sass @@ -0,0 +1,79 @@ +$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-padding: 0.75rem !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-content-padding: 1.5rem !default + +$card-footer-background-color: transparent !default +$card-footer-border-top: 1px solid $border !default +$card-footer-padding: 0.75rem !default + +$card-media-margin: $block-spacing !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: $card-header-padding + &.is-centered + justify-content: center + +.card-header-icon + align-items: center + cursor: pointer + display: flex + justify-content: center + padding: $card-header-padding + +.card-image + display: block + position: relative + +.card-content + background-color: $card-content-background-color + padding: $card-content-padding + +.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: $card-footer-padding + &:not(:last-child) + border-right: $card-footer-border-top + +// Combinations + +.card + .media:not(:last-child) + margin-bottom: $card-media-margin diff --git a/website/sass/sass/components/dropdown.sass b/website/sass/sass/components/dropdown.sass new file mode 100644 index 0000000..b6146b0 --- /dev/null +++ b/website/sass/sass/components/dropdown.sass @@ -0,0 +1,81 @@ +$dropdown-menu-min-width: 12rem !default + +$dropdown-content-background-color: $white !default +$dropdown-content-arrow: $link !default +$dropdown-content-offset: 4px !default +$dropdown-content-padding-bottom: 0.5rem !default +$dropdown-content-padding-top: 0.5rem !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: $dropdown-menu-min-width + 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: $dropdown-content-padding-bottom + padding-top: $dropdown-content-padding-top + +.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 diff --git a/website/sass/sass/components/level.sass b/website/sass/sass/components/level.sass new file mode 100644 index 0000000..608f291 --- /dev/null +++ b/website/sass/sass/components/level.sass @@ -0,0 +1,77 @@ +$level-item-spacing: ($block-spacing / 2) !default + +.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: $level-item-spacing + &: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: $level-item-spacing + +.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: $level-item-spacing + +.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 diff --git a/website/sass/sass/components/list.sass b/website/sass/sass/components/list.sass new file mode 100644 index 0000000..e09b551 --- /dev/null +++ b/website/sass/sass/components/list.sass @@ -0,0 +1,39 @@ +$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-bottom-left-radius: $list-radius + border-bottom-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 diff --git a/website/sass/sass/components/media.sass b/website/sass/sass/components/media.sass new file mode 100644 index 0000000..e8542d8 --- /dev/null +++ b/website/sass/sass/components/media.sass @@ -0,0 +1,48 @@ +.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 diff --git a/website/sass/sass/components/menu.sass b/website/sass/sass/components/menu.sass new file mode 100644 index 0000000..3de7e18 --- /dev/null +++ b/website/sass/sass/components/menu.sass @@ -0,0 +1,57 @@ +$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-list-line-height: 1.25 !default +$menu-list-link-padding: 0.5em 0.75em !default +$menu-nested-list-margin: 0.75em !default +$menu-nested-list-padding-left: 0.75em !default + +$menu-label-color: $text-light !default +$menu-label-font-size: 0.75em !default +$menu-label-letter-spacing: 0.1em !default +$menu-label-spacing: 1em !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: $menu-list-line-height + a + border-radius: $menu-item-radius + color: $menu-item-color + display: block + padding: $menu-list-link-padding + &: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: $menu-nested-list-margin + padding-left: $menu-nested-list-padding-left + +.menu-label + color: $menu-label-color + font-size: $menu-label-font-size + letter-spacing: $menu-label-letter-spacing + text-transform: uppercase + &:not(:first-child) + margin-top: $menu-label-spacing + &:not(:last-child) + margin-bottom: $menu-label-spacing diff --git a/website/sass/sass/components/message.sass b/website/sass/sass/components/message.sass new file mode 100644 index 0000000..2e626ad --- /dev/null +++ b/website/sass/sass/components/message.sass @@ -0,0 +1,87 @@ +$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-colors: $colors !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 $message-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 diff --git a/website/sass/sass/components/modal.sass b/website/sass/sass/components/modal.sass new file mode 100644 index 0000000..c9d1979 --- /dev/null +++ b/website/sass/sass/components/modal.sass @@ -0,0 +1,113 @@ +$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: 0.5em + +.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 diff --git a/website/sass/sass/components/navbar.sass b/website/sass/sass/components/navbar.sass new file mode 100644 index 0000000..7b97edb --- /dev/null +++ b/website/sass/sass/components/navbar.sass @@ -0,0 +1,443 @@ +$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 + &:focus, + &: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 + &:focus, + &:hover, + &.is-active + background-color: darken($color, 5%) + color: $color-invert + .navbar-link + &::after + border-color: $color-invert + .navbar-item.has-dropdown:focus .navbar-link, + .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 + &:focus, + &: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 + &:focus, + &:focus-within, + &: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) + &:focus, + &: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 + &:focus, + &:hover, + &.is-active + background-color: transparent !important + .navbar-item.has-dropdown + &.is-active, + &.is-hoverable:focus, + &.is-hoverable:focus-within, + &.is-hoverable:hover + .navbar-link + background-color: transparent !important + .navbar-dropdown + a.navbar-item + &:focus, + &: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:focus, + &.is-hoverable:focus-within, + &.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 + &:focus, + &: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(:focus):not(:hover) + background-color: $navbar-item-active-background-color + .navbar-item.has-dropdown + &:focus, + &:hover, + &.is-active + .navbar-link + background-color: $navbar-item-hover-background-color + +// Combination + +.hero + &.is-fullheight-with-navbar + min-height: calc(100vh - #{$navbar-height}) diff --git a/website/sass/sass/components/pagination.sass b/website/sass/sass/components/pagination.sass new file mode 100644 index 0000000..634db96 --- /dev/null +++ b/website/sass/sass/components/pagination.sass @@ -0,0 +1,149 @@ +$pagination-color: $grey-darker !default +$pagination-border-color: $grey-lighter !default +$pagination-margin: -0.25rem !default +$pagination-min-width: $control-height !default + +$pagination-item-font-size: 1em !default +$pagination-item-margin: 0.25rem !default +$pagination-item-padding-left: 0.5em !default +$pagination-item-padding-right: 0.5em !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: $pagination-item-font-size + justify-content: center + margin: $pagination-item-margin + padding-left: $pagination-item-padding-left + padding-right: $pagination-item-padding-right + 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 diff --git a/website/sass/sass/components/panel.sass b/website/sass/sass/components/panel.sass new file mode 100644 index 0000000..92d2ccc --- /dev/null +++ b/website/sass/sass/components/panel.sass @@ -0,0 +1,103 @@ +$panel-margin: $block-spacing !default +$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-tabs-font-size: 0.875em !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: $panel-margin + +.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: $panel-tabs-font-size + 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 diff --git a/website/sass/sass/components/tabs.sass b/website/sass/sass/components/tabs.sass new file mode 100644 index 0000000..21ed90a --- /dev/null +++ b/website/sass/sass/components/tabs.sass @@ -0,0 +1,151 @@ +$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 diff --git a/website/sass/sass/elements/_all.sass b/website/sass/sass/elements/_all.sass new file mode 100644 index 0000000..7490c00 --- /dev/null +++ b/website/sass/sass/elements/_all.sass @@ -0,0 +1,15 @@ +@charset "utf-8" + +@import "box.sass" +@import "button.sass" +@import "container.sass" +@import "content.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" diff --git a/website/sass/sass/elements/box.sass b/website/sass/sass/elements/box.sass new file mode 100644 index 0000000..d58f405 --- /dev/null +++ b/website/sass/sass/elements/box.sass @@ -0,0 +1,24 @@ +$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 diff --git a/website/sass/sass/elements/button.sass b/website/sass/sass/elements/button.sass new file mode 100644 index 0000000..5c5aca5 --- /dev/null +++ b/website/sass/sass/elements/button.sass @@ -0,0 +1,305 @@ +$button-color: $grey-darker !default +$button-background-color: $white !default +$button-family: false !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 + @if $button-family + font-family: $button-family + 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, + &.is-hovered + 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, + &.is-hovered, + &:focus, + &.is-focused + background-color: $color + border-color: $color + color: $color-invert + &.is-loading + &::after + border-color: transparent transparent $color $color !important + &:hover, + &.is-hovered, + &:focus, + &.is-focused + &::after + border-color: transparent transparent $color-invert $color-invert !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, + &.is-hovered, + &:focus, + &.is-focused + background-color: $color-invert + color: $color + &.is-loading + &:hover, + &.is-hovered, + &:focus, + &.is-focused + &::after + border-color: transparent transparent $color $color !important + &[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 + flex-shrink: 1 + &.is-centered + justify-content: center + &:not(.has-addons) + .button:not(.is-fullwidth) + margin-left: 0.25rem + margin-right: 0.25rem + &.is-right + justify-content: flex-end + &:not(.has-addons) + .button:not(.is-fullwidth) + margin-left: 0.25rem + margin-right: 0.25rem diff --git a/website/sass/sass/elements/container.sass b/website/sass/sass/elements/container.sass new file mode 100644 index 0000000..c69a993 --- /dev/null +++ b/website/sass/sass/elements/container.sass @@ -0,0 +1,23 @@ +$container-offset: (2 * $gap) !default + +.container + flex-grow: 1 + margin: 0 auto + position: relative + width: auto + +desktop + max-width: $desktop - $container-offset + &.is-fluid + margin-left: $gap + margin-right: $gap + max-width: none + +until-widescreen + &.is-widescreen + max-width: $widescreen - $container-offset + +until-fullhd + &.is-fullhd + max-width: $fullhd - $container-offset + +widescreen + max-width: $widescreen - $container-offset + +fullhd + max-width: $fullhd - $container-offset diff --git a/website/sass/sass/elements/content.sass b/website/sass/sass/elements/content.sass new file mode 100644 index 0000000..001419a --- /dev/null +++ b/website/sass/sass/elements/content.sass @@ -0,0 +1,155 @@ +$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 + &:not([align]) + 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 + .tabs + li + li + margin-top: 0 + // Sizes + &.is-small + font-size: $size-small + &.is-medium + font-size: $size-medium + &.is-large + font-size: $size-large diff --git a/website/sass/sass/elements/form.sass b/website/sass/sass/elements/form.sass new file mode 100644 index 0000000..3122dc4 --- /dev/null +++ b/website/sass/sass/elements/form.sass @@ -0,0 +1 @@ +@warn "The form.sass file is DEPRECATED. It has moved into its own /form folder. Please import sass/form/_all instead." diff --git a/website/sass/sass/elements/icon.sass b/website/sass/sass/elements/icon.sass new file mode 100644 index 0000000..988546c --- /dev/null +++ b/website/sass/sass/elements/icon.sass @@ -0,0 +1,21 @@ +$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 diff --git a/website/sass/sass/elements/image.sass b/website/sass/sass/elements/image.sass new file mode 100644 index 0000000..cfa64fe --- /dev/null +++ b/website/sass/sass/elements/image.sass @@ -0,0 +1,69 @@ +$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 diff --git a/website/sass/sass/elements/notification.sass b/website/sass/sass/elements/notification.sass new file mode 100644 index 0000000..2bda414 --- /dev/null +++ b/website/sass/sass/elements/notification.sass @@ -0,0 +1,35 @@ +$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 diff --git a/website/sass/sass/elements/other.sass b/website/sass/sass/elements/other.sass new file mode 100644 index 0000000..5725617 --- /dev/null +++ b/website/sass/sass/elements/other.sass @@ -0,0 +1,39 @@ +.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 diff --git a/website/sass/sass/elements/progress.sass b/website/sass/sass/elements/progress.sass new file mode 100644 index 0000000..08e2bcc --- /dev/null +++ b/website/sass/sass/elements/progress.sass @@ -0,0 +1,67 @@ +$progress-bar-background-color: $border !default +$progress-value-background-color: $text !default +$progress-border-radius: $radius-rounded !default + +$progress-indeterminate-duration: 1.5s !default + +.progress + @extend %block + -moz-appearance: none + -webkit-appearance: none + border: none + border-radius: $progress-border-radius + 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 + // 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%) + + &: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 + + // 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 diff --git a/website/sass/sass/elements/table.sass b/website/sass/sass/elements/table.sass new file mode 100644 index 0000000..d344a1f --- /dev/null +++ b/website/sass/sass/elements/table.sass @@ -0,0 +1,127 @@ +$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 + &:not([align]) + 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% diff --git a/website/sass/sass/elements/tag.sass b/website/sass/sass/elements/tag.sass new file mode 100644 index 0000000..7e7d077 --- /dev/null +++ b/website/sass/sass/elements/tag.sass @@ -0,0 +1,121 @@ +$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 + &.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 diff --git a/website/sass/sass/elements/title.sass b/website/sass/sass/elements/title.sass new file mode 100644 index 0000000..a3db142 --- /dev/null +++ b/website/sass/sass/elements/title.sass @@ -0,0 +1,70 @@ +$title-color: $grey-darker !default +$title-family: false !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-family: false !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 + @if $title-family + font-family: $title-family + 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 + @if $subtitle-family + font-family: $subtitle-family + 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 diff --git a/website/sass/sass/form/_all.sass b/website/sass/sass/form/_all.sass new file mode 100644 index 0000000..d9a2b95 --- /dev/null +++ b/website/sass/sass/form/_all.sass @@ -0,0 +1,8 @@ +@charset "utf-8" + +@import "shared.sass" +@import "input-textarea.sass" +@import "checkbox-radio.sass" +@import "select.sass" +@import "file.sass" +@import "tools.sass" diff --git a/website/sass/sass/form/checkbox-radio.sass b/website/sass/sass/form/checkbox-radio.sass new file mode 100644 index 0000000..d9f3ff0 --- /dev/null +++ b/website/sass/sass/form/checkbox-radio.sass @@ -0,0 +1,21 @@ +%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 + +.checkbox + @extend %checkbox-radio + +.radio + @extend %checkbox-radio + & + .radio + margin-left: 0.5em diff --git a/website/sass/sass/form/file.sass b/website/sass/sass/form/file.sass new file mode 100644 index 0000000..b50a42e --- /dev/null +++ b/website/sass/sass/form/file.sass @@ -0,0 +1,180 @@ +$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 + +.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 diff --git a/website/sass/sass/form/input-textarea.sass b/website/sass/sass/form/input-textarea.sass new file mode 100644 index 0000000..da4315c --- /dev/null +++ b/website/sass/sass/form/input-textarea.sass @@ -0,0 +1,60 @@ +%input-textarea + @extend %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 + @extend %input-textarea + &.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 + @extend %input-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 diff --git a/website/sass/sass/form/select.sass b/website/sass/sass/form/select.sass new file mode 100644 index 0000000..909b9d5 --- /dev/null +++ b/website/sass/sass/form/select.sass @@ -0,0 +1,85 @@ +.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 + @extend %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 diff --git a/website/sass/sass/form/shared.sass b/website/sass/sass/form/shared.sass new file mode 100644 index 0000000..d391955 --- /dev/null +++ b/website/sass/sass/form/shared.sass @@ -0,0 +1,55 @@ +$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 + +=input + @extend %control + background-color: $input-background-color + border-color: $input-border-color + border-radius: $input-radius + 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 + +input diff --git a/website/sass/sass/form/tools.sass b/website/sass/sass/form/tools.sass new file mode 100644 index 0000000..32ee141 --- /dev/null +++ b/website/sass/sass/form/tools.sass @@ -0,0 +1,205 @@ +$label-color: $grey-darker !default +$label-weight: $weight-bold !default + +$help-size: $size-small !default + +.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 + flex-shrink: 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 + 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 diff --git a/website/sass/sass/grid/_all.sass b/website/sass/sass/grid/_all.sass new file mode 100644 index 0000000..e53070f --- /dev/null +++ b/website/sass/sass/grid/_all.sass @@ -0,0 +1,4 @@ +@charset "utf-8" + +@import "columns.sass" +@import "tiles.sass" diff --git a/website/sass/sass/grid/columns.sass b/website/sass/sass/grid/columns.sass new file mode 100644 index 0000000..34a8353 --- /dev/null +++ b/website/sass/sass/grid/columns.sass @@ -0,0 +1,504 @@ +$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 0 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 0 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 0 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 0 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 0 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 0 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 0 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} diff --git a/website/sass/sass/grid/tiles.sass b/website/sass/sass/grid/tiles.sass new file mode 100644 index 0000000..15648c2 --- /dev/null +++ b/website/sass/sass/grid/tiles.sass @@ -0,0 +1,34 @@ +$tile-spacing: 0.75rem !default + +.tile + align-items: stretch + display: block + flex-basis: 0 + flex-grow: 1 + flex-shrink: 1 + min-height: min-content + // Modifiers + &.is-ancestor + margin-left: $tile-spacing * -1 + margin-right: $tile-spacing * -1 + margin-top: $tile-spacing * -1 + &:last-child + margin-bottom: $tile-spacing * -1 + &:not(:last-child) + margin-bottom: $tile-spacing + &.is-child + margin: 0 !important + &.is-parent + padding: $tile-spacing + &.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% diff --git a/website/sass/sass/layout/_all.sass b/website/sass/sass/layout/_all.sass new file mode 100644 index 0000000..143ada3 --- /dev/null +++ b/website/sass/sass/layout/_all.sass @@ -0,0 +1,5 @@ +@charset "utf-8" + +@import "hero.sass" +@import "section.sass" +@import "footer.sass" diff --git a/website/sass/sass/layout/footer.sass b/website/sass/sass/layout/footer.sass new file mode 100644 index 0000000..aba1eca --- /dev/null +++ b/website/sass/sass/layout/footer.sass @@ -0,0 +1,9 @@ +$footer-background-color: $white-bis !default +$footer-color: false !default +$footer-padding: 3rem 1.5rem 6rem !default + +.footer + background-color: $footer-background-color + padding: $footer-padding + @if $footer-color + color: $footer-color diff --git a/website/sass/sass/layout/hero.sass b/website/sass/sass/layout/hero.sass new file mode 100644 index 0000000..327d80f --- /dev/null +++ b/website/sass/sass/layout/hero.sass @@ -0,0 +1,143 @@ +// 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):not(.pagination-link.is-current), + 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%) + // 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 diff --git a/website/sass/sass/layout/section.sass b/website/sass/sass/layout/section.sass new file mode 100644 index 0000000..6f2d352 --- /dev/null +++ b/website/sass/sass/layout/section.sass @@ -0,0 +1,13 @@ +$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 diff --git a/website/sass/sass/utilities/_all.sass b/website/sass/sass/utilities/_all.sass new file mode 100644 index 0000000..bf4ecfe --- /dev/null +++ b/website/sass/sass/utilities/_all.sass @@ -0,0 +1,8 @@ +@charset "utf-8" + +@import "initial-variables.sass" +@import "functions.sass" +@import "derived-variables.sass" +@import "animations.sass" +@import "mixins.sass" +@import "controls.sass" diff --git a/website/sass/sass/utilities/animations.sass b/website/sass/sass/utilities/animations.sass new file mode 100644 index 0000000..a14525d --- /dev/null +++ b/website/sass/sass/utilities/animations.sass @@ -0,0 +1,5 @@ +@keyframes spinAround + from + transform: rotate(0deg) + to + transform: rotate(359deg) diff --git a/website/sass/sass/utilities/controls.sass b/website/sass/sass/utilities/controls.sass new file mode 100644 index 0000000..7ca0521 --- /dev/null +++ b/website/sass/sass/utilities/controls.sass @@ -0,0 +1,50 @@ +$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 diff --git a/website/sass/sass/utilities/derived-variables.sass b/website/sass/sass/utilities/derived-variables.sass new file mode 100644 index 0000000..c464814 --- /dev/null +++ b/website/sass/sass/utilities/derived-variables.sass @@ -0,0 +1,85 @@ +$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 diff --git a/website/sass/sass/utilities/functions.sass b/website/sass/sass/utilities/functions.sass new file mode 100644 index 0000000..acd3e83 --- /dev/null +++ b/website/sass/sass/utilities/functions.sass @@ -0,0 +1,62 @@ +@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 diff --git a/website/sass/sass/utilities/initial-variables.sass b/website/sass/sass/utilities/initial-variables.sass new file mode 100644 index 0000000..0650ce3 --- /dev/null +++ b/website/sass/sass/utilities/initial-variables.sass @@ -0,0 +1,76 @@ +// 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 + +// Spacing + +$block-spacing: 1.5rem !default + +// Responsiveness + +// The container horizontal gap, which acts as the offset for breakpoints +$gap: 32px !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 diff --git a/website/sass/sass/utilities/mixins.sass b/website/sass/sass/utilities/mixins.sass new file mode 100644 index 0000000..d995f6d --- /dev/null +++ b/website/sass/sass/utilities/mixins.sass @@ -0,0 +1,262 @@ +@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) + color: white + // 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($spacing: $block-spacing) + &:not(:last-child) + margin-bottom: $spacing + +%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 diff --git a/website/tasks.py b/website/tasks.py new file mode 100644 index 0000000..354b554 --- /dev/null +++ b/website/tasks.py @@ -0,0 +1,109 @@ +# -*- coding: utf-8 -*- + +import os +import shutil +import sys +import datetime + +from invoke import task +from invoke.util import cd +from pelican.server import ComplexHTTPRequestHandler, RootedHTTPServer +from pelican.settings import DEFAULT_CONFIG, get_settings_from_file + +SETTINGS_FILE_BASE = 'pelicanconf.py' +SETTINGS = {} +SETTINGS.update(DEFAULT_CONFIG) +LOCAL_SETTINGS = get_settings_from_file(SETTINGS_FILE_BASE) +SETTINGS.update(LOCAL_SETTINGS) + +CONFIG = { + 'settings_base': SETTINGS_FILE_BASE, + 'settings_publish': 'publishconf.py', + # Output path. Can be absolute or relative to tasks.py. Default: 'output' + 'deploy_path': SETTINGS['OUTPUT_PATH'], + # Port for `serve` + 'port': 8000, +} + +@task +def clean(c): + """Remove generated files""" + if os.path.isdir(CONFIG['deploy_path']): + shutil.rmtree(CONFIG['deploy_path']) + os.makedirs(CONFIG['deploy_path']) + +@task +def build(c): + """Build local version of site""" + c.run('pelican -s {settings_base}'.format(**CONFIG)) + +@task +def rebuild(c): + """`build` with the delete switch""" + c.run('pelican -d -s {settings_base}'.format(**CONFIG)) + +@task +def regenerate(c): + """Automatically regenerate site upon file modification""" + c.run('pelican -r -s {settings_base}'.format(**CONFIG)) + +@task +def serve(c): + """Serve site at http://localhost:$PORT/ (default port is 8000)""" + + class AddressReuseTCPServer(RootedHTTPServer): + allow_reuse_address = True + + server = AddressReuseTCPServer( + CONFIG['deploy_path'], + ('', CONFIG['port']), + ComplexHTTPRequestHandler) + + sys.stderr.write('Serving on port {port} ...\n'.format(**CONFIG)) + server.serve_forever() + +@task +def reserve(c): + """`build`, then `serve`""" + build(c) + serve(c) + +@task +def preview(c): + """Build production version of site""" + c.run('pelican -s {settings_publish}'.format(**CONFIG)) + +@task +def livereload(c): + """Automatically reload browser tab upon file modification.""" + from livereload import Server + build(c) + server = Server() + # Watch the base settings file + server.watch(CONFIG['settings_base'], lambda: build(c)) + # Watch content source files + content_file_extensions = ['.md', '.rst'] + for extension in content_file_extensions: + content_blob = '{0}/**/*{1}'.format(SETTINGS['PATH'], extension) + server.watch(content_blob, lambda: build(c)) + # Watch the theme's templates and static assets + theme_path = SETTINGS['THEME'] + server.watch('{}/templates/*.html'.format(theme_path), lambda: build(c)) + static_file_extensions = ['.css', '.js'] + for extension in static_file_extensions: + static_file = '{0}/static/**/*{1}'.format(theme_path, extension) + server.watch(static_file, lambda: build(c)) + # Serve output path on configured port + server.serve(port=CONFIG['port'], root=CONFIG['deploy_path']) + + +@task +def publish(c): + """Publish to production via rsync""" + c.run('pelican -s {settings_publish}'.format(**CONFIG)) + c.run( + 'rsync --delete --exclude ".DS_Store" -pthrvz -c ' + '{} {production}:{dest_path}'.format( + CONFIG['deploy_path'].rstrip('/') + '/', + **CONFIG)) + diff --git a/website/theme/static/css/init b/website/theme/static/css/init new file mode 100644 index 0000000..e69de29 diff --git a/website/theme/static/css/pygment.css b/website/theme/static/css/pygment.css new file mode 100644 index 0000000..5120c74 --- /dev/null +++ b/website/theme/static/css/pygment.css @@ -0,0 +1,72 @@ +.highlight .hll { background-color: #49483e } +.highlight { background: #272822; color: #f8f8f2 } +.highlight .c { color: #75715e } /* 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 .ch { color: #75715e } /* Comment.Hashbang */ +.highlight .cm { color: #75715e } /* Comment.Multiline */ +.highlight .cp { color: #75715e } /* Comment.Preproc */ +.highlight .cpf { color: #75715e } /* Comment.PreprocFile */ +.highlight .c1 { color: #75715e } /* Comment.Single */ +.highlight .cs { color: #75715e } /* Comment.Special */ +.highlight .gd { color: #f92672 } /* Generic.Deleted */ +.highlight .ge { font-style: italic } /* Generic.Emph */ +.highlight .gi { color: #a6e22e } /* Generic.Inserted */ +.highlight .go { color: #66d9ef } /* Generic.Output */ +.highlight .gp { color: #f92672; font-weight: bold } /* Generic.Prompt */ +.highlight .gs { font-weight: bold } /* Generic.Strong */ +.highlight .gu { color: #75715e } /* Generic.Subheading */ +.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 .mb { color: #ae81ff } /* Literal.Number.Bin */ +.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 .sa { color: #e6db74 } /* Literal.String.Affix */ +.highlight .sb { color: #e6db74 } /* Literal.String.Backtick */ +.highlight .sc { color: #e6db74 } /* Literal.String.Char */ +.highlight .dl { color: #e6db74 } /* Literal.String.Delimiter */ +.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 .fm { color: #a6e22e } /* Name.Function.Magic */ +.highlight .vc { color: #f8f8f2 } /* Name.Variable.Class */ +.highlight .vg { color: #f8f8f2 } /* Name.Variable.Global */ +.highlight .vi { color: #f8f8f2 } /* Name.Variable.Instance */ +.highlight .vm { color: #f8f8f2 } /* Name.Variable.Magic */ +.highlight .il { color: #ae81ff } /* Literal.Number.Integer.Long */ diff --git a/website/theme/static/css/pygment.min.css b/website/theme/static/css/pygment.min.css new file mode 100644 index 0000000..10c80db --- /dev/null +++ b/website/theme/static/css/pygment.min.css @@ -0,0 +1 @@ +.highlight .hll{background-color:#49483e}.highlight{background:#272822;color:#f8f8f2}.highlight .c{color:#75715e}.highlight .err{color:#960050;background-color:#1e0010}.highlight .k{color:#66d9ef}.highlight .l{color:#ae81ff}.highlight .n{color:#f8f8f2}.highlight .o{color:#f92672}.highlight .p{color:#f8f8f2}.highlight .ch{color:#75715e}.highlight .cm{color:#75715e}.highlight .cp{color:#75715e}.highlight .cpf{color:#75715e}.highlight .c1{color:#75715e}.highlight .cs{color:#75715e}.highlight .gd{color:#f92672}.highlight .ge{font-style:italic}.highlight .gi{color:#a6e22e}.highlight .go{color:#66d9ef}.highlight .gp{color:#f92672;font-weight:bold}.highlight .gs{font-weight:bold}.highlight .gu{color:#75715e}.highlight .kc{color:#66d9ef}.highlight .kd{color:#66d9ef}.highlight .kn{color:#f92672}.highlight .kp{color:#66d9ef}.highlight .kr{color:#66d9ef}.highlight .kt{color:#66d9ef}.highlight .ld{color:#e6db74}.highlight .m{color:#ae81ff}.highlight .s{color:#e6db74}.highlight .na{color:#a6e22e}.highlight .nb{color:#f8f8f2}.highlight .nc{color:#a6e22e}.highlight .no{color:#66d9ef}.highlight .nd{color:#a6e22e}.highlight .ni{color:#f8f8f2}.highlight .ne{color:#a6e22e}.highlight .nf{color:#a6e22e}.highlight .nl{color:#f8f8f2}.highlight .nn{color:#f8f8f2}.highlight .nx{color:#a6e22e}.highlight .py{color:#f8f8f2}.highlight .nt{color:#f92672}.highlight .nv{color:#f8f8f2}.highlight .ow{color:#f92672}.highlight .w{color:#f8f8f2}.highlight .mb{color:#ae81ff}.highlight .mf{color:#ae81ff}.highlight .mh{color:#ae81ff}.highlight .mi{color:#ae81ff}.highlight .mo{color:#ae81ff}.highlight .sa{color:#e6db74}.highlight .sb{color:#e6db74}.highlight .sc{color:#e6db74}.highlight .dl{color:#e6db74}.highlight .sd{color:#e6db74}.highlight .s2{color:#e6db74}.highlight .se{color:#ae81ff}.highlight .sh{color:#e6db74}.highlight .si{color:#e6db74}.highlight .sx{color:#e6db74}.highlight .sr{color:#e6db74}.highlight .s1{color:#e6db74}.highlight .ss{color:#e6db74}.highlight .bp{color:#f8f8f2}.highlight .fm{color:#a6e22e}.highlight .vc{color:#f8f8f2}.highlight .vg{color:#f8f8f2}.highlight .vi{color:#f8f8f2}.highlight .vm{color:#f8f8f2}.highlight .il{color:#ae81ff} diff --git a/website/theme/static/fonts/Quicksand/Quicksand-Light.woff2 b/website/theme/static/fonts/Quicksand/Quicksand-Light.woff2 new file mode 100644 index 0000000..06daa10 Binary files /dev/null and b/website/theme/static/fonts/Quicksand/Quicksand-Light.woff2 differ diff --git a/website/theme/static/fonts/Quicksand/Quicksand-Medium.woff2 b/website/theme/static/fonts/Quicksand/Quicksand-Medium.woff2 new file mode 100644 index 0000000..7bd5c64 Binary files /dev/null and b/website/theme/static/fonts/Quicksand/Quicksand-Medium.woff2 differ diff --git a/website/theme/static/fonts/Roboto/Roboto-Bold.woff2 b/website/theme/static/fonts/Roboto/Roboto-Bold.woff2 new file mode 100644 index 0000000..148ec61 Binary files /dev/null and b/website/theme/static/fonts/Roboto/Roboto-Bold.woff2 differ diff --git a/website/theme/static/fonts/Roboto/Roboto-Italic.woff2 b/website/theme/static/fonts/Roboto/Roboto-Italic.woff2 new file mode 100644 index 0000000..560df0c Binary files /dev/null and b/website/theme/static/fonts/Roboto/Roboto-Italic.woff2 differ diff --git a/website/theme/static/fonts/Roboto/Roboto-Regular.woff2 b/website/theme/static/fonts/Roboto/Roboto-Regular.woff2 new file mode 100644 index 0000000..b6b5537 Binary files /dev/null and b/website/theme/static/fonts/Roboto/Roboto-Regular.woff2 differ diff --git a/website/theme/static/fonts/Ubuntu_Mono/UbuntuMono-Bold.woff2 b/website/theme/static/fonts/Ubuntu_Mono/UbuntuMono-Bold.woff2 new file mode 100644 index 0000000..3f9b3a8 Binary files /dev/null and b/website/theme/static/fonts/Ubuntu_Mono/UbuntuMono-Bold.woff2 differ diff --git a/website/theme/static/fonts/Ubuntu_Mono/UbuntuMono-Regular.woff2 b/website/theme/static/fonts/Ubuntu_Mono/UbuntuMono-Regular.woff2 new file mode 100644 index 0000000..1c914ff Binary files /dev/null and b/website/theme/static/fonts/Ubuntu_Mono/UbuntuMono-Regular.woff2 differ diff --git a/website/theme/static/images/articles/.init b/website/theme/static/images/articles/.init new file mode 100644 index 0000000..e69de29 diff --git a/website/theme/static/images/articles/docs.png b/website/theme/static/images/articles/docs.png new file mode 100644 index 0000000..c592e1b Binary files /dev/null and b/website/theme/static/images/articles/docs.png differ diff --git a/website/theme/static/images/favicon/android-chrome-192x192.png b/website/theme/static/images/favicon/android-chrome-192x192.png new file mode 100644 index 0000000..966a4e0 Binary files /dev/null and b/website/theme/static/images/favicon/android-chrome-192x192.png differ diff --git a/website/theme/static/images/favicon/android-chrome-512x512.png b/website/theme/static/images/favicon/android-chrome-512x512.png new file mode 100644 index 0000000..69a2d8f Binary files /dev/null and b/website/theme/static/images/favicon/android-chrome-512x512.png differ diff --git a/website/theme/static/images/favicon/apple-touch-icon.png b/website/theme/static/images/favicon/apple-touch-icon.png new file mode 100644 index 0000000..9fac02a Binary files /dev/null and b/website/theme/static/images/favicon/apple-touch-icon.png differ diff --git a/website/theme/static/images/favicon/favicon-16x16.png b/website/theme/static/images/favicon/favicon-16x16.png new file mode 100644 index 0000000..a106250 Binary files /dev/null and b/website/theme/static/images/favicon/favicon-16x16.png differ diff --git a/website/theme/static/images/favicon/favicon-32x32.png b/website/theme/static/images/favicon/favicon-32x32.png new file mode 100644 index 0000000..abb6cbc Binary files /dev/null and b/website/theme/static/images/favicon/favicon-32x32.png differ diff --git a/website/theme/static/images/favicon/favicon.svg b/website/theme/static/images/favicon/favicon.svg new file mode 100644 index 0000000..d430a68 --- /dev/null +++ b/website/theme/static/images/favicon/favicon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/website/theme/static/images/favicon/site.webmanifest b/website/theme/static/images/favicon/site.webmanifest new file mode 100644 index 0000000..6440004 --- /dev/null +++ b/website/theme/static/images/favicon/site.webmanifest @@ -0,0 +1 @@ +{"name":"PouyaCode.net favicon","short_name":"PouyaCode","icons":[{"src":"/theme/images/favicon/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/theme/images/favicon/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#222222","display":"standalone"} diff --git a/website/theme/static/images/logo.png b/website/theme/static/images/logo.png new file mode 100644 index 0000000..2a7f7f2 Binary files /dev/null and b/website/theme/static/images/logo.png differ diff --git a/website/theme/static/images/pages/404.jpg b/website/theme/static/images/pages/404.jpg new file mode 100644 index 0000000..a806dc1 Binary files /dev/null and b/website/theme/static/images/pages/404.jpg differ diff --git a/website/theme/static/images/pages/pgp.jpg b/website/theme/static/images/pages/pgp.jpg new file mode 100644 index 0000000..43b7415 Binary files /dev/null and b/website/theme/static/images/pages/pgp.jpg differ diff --git a/website/theme/static/images/pages/release-notes.png b/website/theme/static/images/pages/release-notes.png new file mode 100644 index 0000000..c592e1b Binary files /dev/null and b/website/theme/static/images/pages/release-notes.png differ diff --git a/website/theme/static/js/fa.min.js b/website/theme/static/js/fa.min.js new file mode 100644 index 0000000..1433505 --- /dev/null +++ b/website/theme/static/js/fa.min.js @@ -0,0 +1 @@ +!function(){"use strict";var c={},l={};try{"undefined"!=typeof window&&(c=window),"undefined"!=typeof document&&(l=document)}catch(c){}var h=(c.navigator||{}).userAgent,z=void 0===h?"":h,v=c,a=l,m=(v.document,!!a.documentElement&&!!a.head&&"function"==typeof a.addEventListener&&a.createElement,~z.indexOf("MSIE")||z.indexOf("Trident/"),"___FONT_AWESOME___"),s=function(){try{return!0}catch(c){return!1}}();var e=v||{};e[m]||(e[m]={}),e[m].styles||(e[m].styles={}),e[m].hooks||(e[m].hooks={}),e[m].shims||(e[m].shims=[]);var t=e[m];function M(c,z){var l=(2>>0;h--;)l[h]=c[h];return l}function gc(c){return c.classList?bc(c.classList):(c.getAttribute("class")||"").split(" ").filter(function(c){return c})}function Sc(c,l){var h,z=l.split("-"),v=z[0],a=z.slice(1).join("-");return v!==c||""===a||(h=a,~R.indexOf(h))?null:a}function Ac(c){return"".concat(c).replace(/&/g,"&").replace(/"/g,""").replace(/'/g,"'").replace(//g,">")}function yc(h){return Object.keys(h||{}).reduce(function(c,l){return c+"".concat(l,": ").concat(h[l],";")},"")}function wc(c){return c.size!==Lc.size||c.x!==Lc.x||c.y!==Lc.y||c.rotate!==Lc.rotate||c.flipX||c.flipY}function kc(c){var l=c.transform,h=c.containerWidth,z=c.iconWidth,v={transform:"translate(".concat(h/2," 256)")},a="translate(".concat(32*l.x,", ").concat(32*l.y,") "),m="scale(".concat(l.size/16*(l.flipX?-1:1),", ").concat(l.size/16*(l.flipY?-1:1),") "),s="rotate(".concat(l.rotate," 0 0)");return{outer:v,inner:{transform:"".concat(a," ").concat(m," ").concat(s)},path:{transform:"translate(".concat(z/2*-1," -256)")}}}var xc={x:0,y:0,width:"100%",height:"100%"};function Zc(c){var l=!(1").concat(m.map(Jc).join(""),"")}var $c=function(){};function cl(c){return"string"==typeof(c.getAttribute?c.getAttribute(B):null)}var ll={replace:function(c){var l=c[0],h=c[1].map(function(c){return Jc(c)}).join("\n");if(l.parentNode&&l.outerHTML)l.outerHTML=h+(K.keepOriginalSource&&"svg"!==l.tagName.toLowerCase()?"\x3c!-- ".concat(l.outerHTML," --\x3e"):"");else if(l.parentNode){var z=document.createElement("span");l.parentNode.replaceChild(z,l),z.outerHTML=h}},nest:function(c){var l=c[0],h=c[1];if(~gc(l).indexOf(K.replacementClass))return ll.replace(c);var z=new RegExp("".concat(K.familyPrefix,"-.*"));delete h[0].attributes.style,delete h[0].attributes.id;var v=h[0].attributes.class.split(" ").reduce(function(c,l){return l===K.replacementClass||l.match(z)?c.toSvg.push(l):c.toNode.push(l),c},{toNode:[],toSvg:[]});h[0].attributes.class=v.toSvg.join(" ");var a=h.map(function(c){return Jc(c)}).join("\n");l.setAttribute("class",v.toNode.join(" ")),l.setAttribute(B,""),l.innerHTML=a}};function hl(c){c()}function zl(h,c){var z="function"==typeof c?c:$c;if(0===h.length)z();else{var l=hl;K.mutateApproach===y&&(l=o.requestAnimationFrame||hl),l(function(){var c=!0===K.autoReplaceSvg?ll.replace:ll[K.autoReplaceSvg]||ll.replace,l=_c.begin("mutate");h.map(c),l(),z()})}}var vl=!1;function al(){vl=!1}var ml=null;function sl(c){if(t&&K.observeMutations){var v=c.treeCallback,a=c.nodeCallback,m=c.pseudoElementsCallback,l=c.observeMutationsRoot,h=void 0===l?V:l;ml=new t(function(c){vl||bc(c).forEach(function(c){if("childList"===c.type&&0 { + + // 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'); + + }); + }); + } + +}); +function imageshow(){ + document.getElementById('imagemodal').style.display = 'flex'; +} +function imagehide(){ + document.getElementById('imagemodal').style.display = 'none'; +} + +document.onreadystatechange = function () { + if (document.readyState == "complete") { + var script = document.createElement('script'), + scripts = document.getElementsByTagName('script')[0]; + script.src = "https://pouyacode.net/theme/js/fa.min.js?v=5.12.0"; + scripts.parentNode.insertBefore(script, scripts); + + // Email obfuscation using ROT13 for navbar. + let rot13 = document.getElementById('email').href.replace(/[a-zA-Z]/g,function(c){return String.fromCharCode((c<="Z"?90:122)>=(c=c.charCodeAt(0)+13)?c:c-26);}); + document.getElementById('email').href = rot13; + + // Email obfuscation using ROT13 for articles. + let subject = document.getElementsByClassName('article-title')[0].innerHTML; + subject = subject.substr(subject.search(' ')+6); + rot13 += '?subject=' + subject; + document.getElementById('feedback').innerHTML = ' Send feedback'; + } +} diff --git a/website/theme/static/js/main.min.js b/website/theme/static/js/main.min.js new file mode 100644 index 0000000..942f63c --- /dev/null +++ b/website/theme/static/js/main.min.js @@ -0,0 +1,3 @@ +document.addEventListener('DOMContentLoaded',()=>{const $navbarBurgers=Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'),0);if($navbarBurgers.length>0){$navbarBurgers.forEach(el=>{el.addEventListener('click',()=>{const target=el.dataset.target;const $target=document.getElementById(target);el.classList.toggle('is-active');$target.classList.toggle('is-active');});});}});function imageshow(){document.getElementById('imagemodal').style.display='flex';} +function imagehide(){document.getElementById('imagemodal').style.display='none';} +document.onreadystatechange=function(){if(document.readyState=="complete"){var script=document.createElement('script'),scripts=document.getElementsByTagName('script')[0];script.src="https://pouyacode.net/theme/js/fa.min.js?v=5.12.0";scripts.parentNode.insertBefore(script,scripts);let rot13=document.getElementById('email').href.replace(/[a-zA-Z]/g,function(c){return String.fromCharCode((c<="Z"?90:122)>=(c=c.charCodeAt(0)+13)?c:c-26);});document.getElementById('email').href=rot13;let subject=document.getElementsByClassName('article-title')[0].innerHTML;subject=subject.substr(subject.search(' ')+6);rot13+='?subject='+subject;document.getElementById('feedback').innerHTML=' Send feedback';}} \ No newline at end of file diff --git a/website/theme/templates/archives.html b/website/theme/templates/archives.html new file mode 100644 index 0000000..537a7fc --- /dev/null +++ b/website/theme/templates/archives.html @@ -0,0 +1,22 @@ +{% extends "base.html" %} + +{% block title %}{{ SITENAME }} - Archives{% endblock %} + +{% block content %} +
+
+
+

Archives for {{ SITENAME }}:

+
+ + {% for article in dates %} + + + + {% endfor %} +
{{ article.locale_date }} {{ article.title }}, {{ article.description }}
+
+
+
+
+{% endblock %} diff --git a/website/theme/templates/article.html b/website/theme/templates/article.html new file mode 100644 index 0000000..d2989d2 --- /dev/null +++ b/website/theme/templates/article.html @@ -0,0 +1,120 @@ +{% extends "base.html" %} +{% block html_lang %}{{ article.lang }}{% endblock %} + +{% block head %} + {{ super() }} + + {% import 'translations.html' as translations with context %} + {% if translations.entry_hreflang(article) %} + {{ translations.entry_hreflang(article) }} + {% endif %} + + {% for tag in article.tags %} + + {% endfor %} + +{% endblock %} + +{% block content %} +{% if article.image is defined %} + +{% endif %} +
+
+
+ {% if article.image is defined %}{% endif %} +
+

 {{ article.title }}{% if article.description is defined %}
— {{ article.description }}{% endif %}

+ {% import 'translations.html' as translations with context %} + {{ translations.translations_for(article) }} +
+ + {% if article.readtime %} +

Estimated read time: {{article.readtime.minutes}} min.

+ {% endif %} +
+
+

Created:

+ {% if article.modified %} +

Modified:

+ {% endif %} + {% if article.authors %} +
+

By: {% for author in article.authors %} + {{ author }} + {% endfor %}

+
+ {% endif %} + {% if article.category %} +
+

Category: {{ article.category }}

+
+ {% endif %} + {% if article.tags %} +
+

Tags: + {% for tag in article.tags %} + {{ tag }} + {% endfor %} +

+
+ {% endif %} +
+
+
+
+
+ {{ article.content }} +
+ {% if article.share_post is defined and article.status != 'draft' %} +

+   {{ EMAIL }} +

+ + {% endif %} + {% if article.prev_article_in_category or article.next_article_in_category or article.prev_article or article.next_article %} + + {% endif %} +
+
+
+
+{% endblock %} diff --git a/website/theme/templates/author.html b/website/theme/templates/author.html new file mode 100644 index 0000000..011438e --- /dev/null +++ b/website/theme/templates/author.html @@ -0,0 +1,14 @@ +{% extends "index.html" %} + +{% block title %}{{ SITENAME }} - Articles by {{ author }}{% endblock %} + +{% block content_title %} +
+
+
+

Articles by {{ author }}:

+
+
+
+{% endblock %} + diff --git a/website/theme/templates/authors.html b/website/theme/templates/authors.html new file mode 100644 index 0000000..8f27eb0 --- /dev/null +++ b/website/theme/templates/authors.html @@ -0,0 +1,23 @@ +{% extends "base.html" %} + +{% block title %}{{ SITENAME }} - Authors{% endblock %} + +{% block content %} +
+
+
+

Authors on {{ SITENAME }}

+
+ {% for author, articles in authors|sort %} +
+
+ {{ author }} + ({{ articles|count }}) +
+
+ {% endfor %} +
+
+
+
+{% endblock %} diff --git a/website/theme/templates/base.html b/website/theme/templates/base.html new file mode 100644 index 0000000..f768f06 --- /dev/null +++ b/website/theme/templates/base.html @@ -0,0 +1,136 @@ + + + + {% block head %} + + {% if article is defined and article.title is defined %}{{ article.title|title }}{% if article.description is defined %}, {{ article.description }}{% endif %}{% elif page is defined and page.title is defined %}{{ page.title|title }}{% if page.description is defined %}, {{ page.description }}{% endif %}{% else %}{{ SITENAME }}{% endif %} + + + + + + + + + + + + + + + + + + + + + + + + + + {% if FEED_ALL_ATOM %} + + {% endif %} + {% if FEED_ALL_RSS %} + + {% endif %} + {% if FEED_ATOM %} + + {% endif %} + {% if FEED_RSS %} + + {% endif %} + {% if CATEGORY_FEED_ATOM and category %} + + {% endif %} + {% if CATEGORY_FEED_RSS and category %} + + {% endif %} + {% if TAG_FEED_ATOM and tag %} + + {% endif %} + {% if TAG_FEED_RSS and tag %} + + {% endif %} + {% endblock head %} + + + +
+ +
+
+ {% block content %} + {% endblock %} +
+
+
+
Copyright (C) 2010-2020 {{ AUTHOR }}
+
+
+ +{% include "gosquared.html" %} +{% include "google.html" %} + + diff --git a/website/theme/templates/categories.html b/website/theme/templates/categories.html new file mode 100644 index 0000000..9323e62 --- /dev/null +++ b/website/theme/templates/categories.html @@ -0,0 +1,23 @@ +{% extends "base.html" %} + +{% block title %}{{ SITENAME }} - Categories{% endblock %} + +{% block content %} +
+
+
+

Categories on {{ SITENAME }}:

+
+ {% for category, articles in categories|sort %} +
+
+ {{ category }} + ({{ articles|count }}) +
+
+ {% endfor %} +
+
+
+
+{% endblock %} diff --git a/website/theme/templates/category.html b/website/theme/templates/category.html new file mode 100644 index 0000000..d5a1af5 --- /dev/null +++ b/website/theme/templates/category.html @@ -0,0 +1,15 @@ +{% extends "index.html" %} + +{% block title %}{{ SITENAME }} - {{ category }} category{% endblock %} + +{% block content_title %} +
+
+
+

Articles in the {{ category }} category:

+  {{ category }}'s atom feed +
+
+
+{% endblock %} + diff --git a/website/theme/templates/google.html b/website/theme/templates/google.html new file mode 100644 index 0000000..072c5cf --- /dev/null +++ b/website/theme/templates/google.html @@ -0,0 +1,9 @@ +{% if GOOGLE_ANALYTICS %} + + +{% endif %} diff --git a/website/theme/templates/gosquared.html b/website/theme/templates/gosquared.html new file mode 100644 index 0000000..0dfcd08 --- /dev/null +++ b/website/theme/templates/gosquared.html @@ -0,0 +1,14 @@ +{% if GOSQUARED_SITENAME %} + +{% endif %} diff --git a/website/theme/templates/index.html b/website/theme/templates/index.html new file mode 100644 index 0000000..729ef46 --- /dev/null +++ b/website/theme/templates/index.html @@ -0,0 +1,44 @@ +{% extends "base.html" %} +{% block content %} +
+{% block content_title %} +
+
+
+
+ {{ AUTHOR }}'s avatar +
+

{{ SITENAME }}

+

{{ DESCRIPTION }}

+

If you love GNU/Emacs, If you love to program in an editor instead of big slow IDE but still enjoy to have a handy code editor then FG42 is the right choice for you. +
+If you need help, or even want to just say hello, try our IRC channel on freenode: #5hit. +

+
+
+ Download + Release Note +
+
+
+{% endblock %} + +
+{% for article in articles_page.object_list %} +
+
+
+
+

 {{ article.title }}{% if article.description is defined %}
— {{article.description}}{% endif %}

+
+
{{ article.summary }}
+
+
+
+{% endfor %} +
+{% if articles_page.has_other_pages() %} + {% include 'pagination.html' %} +{% endif %} +
+{% endblock content %} diff --git a/website/theme/templates/page.html b/website/theme/templates/page.html new file mode 100644 index 0000000..4a070e9 --- /dev/null +++ b/website/theme/templates/page.html @@ -0,0 +1,52 @@ +{% extends "base.html" %} +{% block html_lang %}{{ page.lang }}{% endblock %} + +{% block title %}{{ SITENAME }} - {{ page.title }}{%endblock%} + +{% block head %} + {{ super() }} + + {% import 'translations.html' as translations with context %} + {% if translations.entry_hreflang(page) %} + {{ translations.entry_hreflang(page) }} + {% endif %} +{% endblock %} + +{% block content %} +{% if page.image is defined %} + +{% endif %} +
+
+
+ {% if page.image is defined %}{% endif %} +
+

 {{ page.title }}
— {{ page.description }}

+ {% import 'translations.html' as translations with context %} + {{ translations.translations_for(page) }} +
+ {% if page.error is defined %} +
+
+ {{ page.content }} +
+ {% else %} +
+
+
+ {{ page.content }} +
+
+ {% endif %} +
+
+ +{% endblock %} diff --git a/website/theme/templates/pagination.html b/website/theme/templates/pagination.html new file mode 100644 index 0000000..1fc1f71 --- /dev/null +++ b/website/theme/templates/pagination.html @@ -0,0 +1,11 @@ +{% if DEFAULT_PAGINATION %} + +{% endif %} diff --git a/website/theme/templates/period_archives.html b/website/theme/templates/period_archives.html new file mode 100644 index 0000000..e1ddf62 --- /dev/null +++ b/website/theme/templates/period_archives.html @@ -0,0 +1,14 @@ +{% extends "base.html" %} + +{% block title %}{{ SITENAME }} - {{ period | reverse | join(' ') }} archives{% endblock %} + +{% block content %} +

Archives for {{ period | reverse | join(' ') }}

+ +
+{% for article in dates %} +
{{ article.locale_date }}
+
{{ article.title }}
+{% endfor %} +
+{% endblock %} diff --git a/website/theme/templates/tag.html b/website/theme/templates/tag.html new file mode 100644 index 0000000..c9e5609 --- /dev/null +++ b/website/theme/templates/tag.html @@ -0,0 +1,14 @@ +{% extends "index.html" %} + +{% block title %}{{ SITENAME }} - {{ tag }} tag{% endblock %} + +{% block content_title %} +
+
+
+

Articles tagged with {{ tag }}:

+
+
+
+

+{% endblock %} diff --git a/website/theme/templates/tags.html b/website/theme/templates/tags.html new file mode 100644 index 0000000..428c32c --- /dev/null +++ b/website/theme/templates/tags.html @@ -0,0 +1,23 @@ +{% extends "base.html" %} + +{% block title %}{{ SITENAME }} - Tags{% endblock %} + +{% block content %} +
+
+
+

Tags for {{ SITENAME }}:

+
+ {% for tag, articles in tags|sort %} +
+
+ {{ tag }} + ({{ articles|count }}) +
+
+ {% endfor %} +
+
+
+
+{% endblock %} diff --git a/website/theme/templates/translations.html b/website/theme/templates/translations.html new file mode 100644 index 0000000..f0e2478 --- /dev/null +++ b/website/theme/templates/translations.html @@ -0,0 +1,16 @@ +{% macro translations_for(article) %} +{% if article.translations %} +Translations: +{% for translation in article.translations %} +{{ translation.lang }} +{% endfor %} +{% endif %} +{% endmacro %} + +{% macro entry_hreflang(entry) %} +{% if entry.translations %} + {% for translation in entry.translations %} + + {% endfor %} +{% endif %} +{% endmacro %}