diff options
| author | Jan Raasch <jan@janraasch.com> | 2020-09-09 19:00:59 +0300 |
|---|---|---|
| committer | Jan Raasch <jan@janraasch.com> | 2020-09-09 19:00:59 +0300 |
| commit | 848f6129ec7dac005cbe7b7c2a7e1772e01cf042 (patch) | |
| tree | a4c6779bda7072fd4cb95a57afe0a2147d14e9be | |
| parent | 30fe331123762039f3209a76b24cfe37cbbe0833 (diff) | |
style: add & run prettier
| -rw-r--r-- | .github/FUNDING.yml | 4 | ||||
| -rw-r--r-- | .github/workflows/ci.yml | 32 | ||||
| -rw-r--r-- | .gitignore | 1 | ||||
| -rw-r--r-- | .prettierignore | 6 | ||||
| -rw-r--r-- | .prettierrc.json | 10 | ||||
| -rw-r--r-- | README.md | 11 | ||||
| -rw-r--r-- | archetypes/homepage.md | 1 | ||||
| -rw-r--r-- | exampleSite/content/homepage/about-me.md | 3 | ||||
| -rw-r--r-- | exampleSite/content/homepage/contact.md | 3 | ||||
| -rw-r--r-- | exampleSite/content/homepage/opener.md | 4 | ||||
| -rw-r--r-- | exampleSite/content/homepage/services.md | 3 | ||||
| -rw-r--r-- | exampleSite/content/services.md | 2 | ||||
| -rw-r--r-- | exampleSite/layouts/partials/custom_head.html | 20 | ||||
| -rw-r--r-- | layouts/404.html | 25 | ||||
| -rw-r--r-- | layouts/_default/baseof.html | 29 | ||||
| -rw-r--r-- | layouts/_default/single.html | 22 | ||||
| -rw-r--r-- | layouts/index.html | 1 | ||||
| -rw-r--r-- | layouts/partials/footer.html | 23 | ||||
| -rw-r--r-- | layouts/partials/head.html | 31 | ||||
| -rw-r--r-- | package-lock.json | 20 | ||||
| -rw-r--r-- | package.json | 29 | ||||
| -rw-r--r-- | static/css/screen.css | 2110 | ||||
| -rwxr-xr-x | static/js/icons.js | 507 | ||||
| -rw-r--r-- | static/js/index.js | 242 |
24 files changed, 1887 insertions, 1252 deletions
diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml index ba257d5..3d62184 100644 --- a/.github/FUNDING.yml +++ b/.github/FUNDING.yml @@ -1,2 +1,2 @@ -custom: ['https://www.paypal.me/janraasch/29,00'] -github: ['janraasch'] +custom: ["https://www.paypal.me/janraasch/29,00"] +github: ["janraasch"] diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 4e63ac2..54f0fe7 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -3,30 +3,30 @@ name: CI on: push: branches: - - master + - master pull_request: branches: - - master + - master jobs: build: runs-on: ubuntu-18.04 steps: - - name: Checkout - uses: actions/checkout@v2 + - name: Checkout + uses: actions/checkout@v2 - - name: Setup Hugo - uses: peaceiris/actions-hugo@v2 - with: - hugo-version: latest + - name: Setup Hugo + uses: peaceiris/actions-hugo@v2 + with: + hugo-version: latest - - name: Build local ./exampleSite - run: hugo --minify --gc --destination ../public --source ./exampleSite --themesDir ../.. --baseURL https://janraasch.github.io/hugo-scroll/ + - name: Build local ./exampleSite + run: hugo --minify --gc --destination ../public --source ./exampleSite --themesDir ../.. --baseURL https://janraasch.github.io/hugo-scroll/ - - name: Deploy to GitHub Pages - if: github.event_name == 'push' - uses: peaceiris/actions-gh-pages@v3 - with: - github_token: ${{ secrets.GITHUB_TOKEN }} - publish_dir: ./public + - name: Deploy to GitHub Pages + if: github.event_name == 'push' + uses: peaceiris/actions-gh-pages@v3 + with: + github_token: ${{ secrets.GITHUB_TOKEN }} + publish_dir: ./public @@ -1,2 +1,3 @@ public exampleSite/public +node_modules diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..9859f78 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,6 @@ +build +resources +public +static/font-awesome +static/css/normalize.css +layouts/index.html diff --git a/.prettierrc.json b/.prettierrc.json new file mode 100644 index 0000000..c99d7d5 --- /dev/null +++ b/.prettierrc.json @@ -0,0 +1,10 @@ +{ + "overrides": [ + { + "files": ["*.html"], + "options": { + "parser": "go-template" + } + } + ] +} @@ -54,29 +54,30 @@ hugo new my-new-page.md ### Adding your branding / colors / css -Add a `custom_head.html`-file to your `layouts/partials`-directory. In there you may add a `<style>`-tag *or* you may add a `<link>`-tag referencing your own `custom.css` (in case you prefer to have a separate `.css`-file). Checkout the [`custom_head.html`](https://github.com/janraasch/hugo-scroll/blob/master/exampleSite/layouts/partials/custom_head.html)-file from the `exampleSite`-directory to get started and to find more detailed instructions. +Add a `custom_head.html`-file to your `layouts/partials`-directory. In there you may add a `<style>`-tag _or_ you may add a `<link>`-tag referencing your own `custom.css` (in case you prefer to have a separate `.css`-file). Checkout the [`custom_head.html`](https://github.com/janraasch/hugo-scroll/blob/master/exampleSite/layouts/partials/custom_head.html)-file from the `exampleSite`-directory to get started and to find more detailed instructions. ## Issues / Feedback / Contributing + Please use [GitHub issues](https://github.com/janraasch/hugo-scroll/issues) and [Pull Requests](https://github.com/janraasch/hugo-scroll/pulls). If you do not have a GitHub-account, feel free to hit me up via e-mail (see [janraasch.com](https://www.janraasch.com)). - ## Sponsor [![Pay me][insert-coins-svg]][paypal-dot-me] + Please consider supporting my work on this theme via [GitHub Sponsors][github-sponsors] or [PayPal][paypal-dot-me]. [][github-sponsors] ## Special Thanks 🎁 -* Go to [Yonatan Wolowelsky](https://github.com/grmmph), for the great [GhostScroll](https://github.com/grmmph/GhostScroll)-theme which formed the basis of this [Hugo](https://gohugo.io/)-theme. -* Go to [Pexels](https://www.pexels.com), for supplying those wonderful *free* stock photos on the [exampleSite](https://github.com/janraasch/hugo-scroll/tree/master/exampleSite). +- Go to [Yonatan Wolowelsky](https://github.com/grmmph), for the great [GhostScroll](https://github.com/grmmph/GhostScroll)-theme which formed the basis of this [Hugo](https://gohugo.io/)-theme. +- Go to [Pexels](https://www.pexels.com), for supplying those wonderful _free_ stock photos on the [exampleSite](https://github.com/janraasch/hugo-scroll/tree/master/exampleSite). ## License + [MIT License](http://en.wikipedia.org/wiki/MIT_License) © [Jan Raasch](https://www.janraasch.com) [paypal-dot-me]: https://www.paypal.me/janraasch/29,00 [github-sponsors]: https://github.com/sponsors/janraasch [insert-coins-svg]: https://img.shields.io/badge/insert-coins-11dde2.svg - [hugo-setup-guide]: https://gohugo.io/getting-started/installing diff --git a/archetypes/homepage.md b/archetypes/homepage.md index b585bc0..9a01e46 100644 --- a/archetypes/homepage.md +++ b/archetypes/homepage.md @@ -8,4 +8,5 @@ weight: 5 # into the header menu at the top of the homepage. header_menu: true --- + This is just another section to appear on the homepage. diff --git a/exampleSite/content/homepage/about-me.md b/exampleSite/content/homepage/about-me.md index 7c245be..b80d068 100644 --- a/exampleSite/content/homepage/about-me.md +++ b/exampleSite/content/homepage/about-me.md @@ -1,8 +1,9 @@ --- -title: 'About Me' +title: "About Me" weight: 3 header_menu: true --- +  ##### Professionel Experience diff --git a/exampleSite/content/homepage/contact.md b/exampleSite/content/homepage/contact.md index 95a5f78..f28a3bb 100644 --- a/exampleSite/content/homepage/contact.md +++ b/exampleSite/content/homepage/contact.md @@ -1,8 +1,9 @@ --- -title: 'Contact' +title: "Contact" weight: 4 header_menu: true --- + E-Mail: [mail@janedoe.com](mailto:your-email@your-domain.com) Tel.: [+49 1111 555555](tel:+491111555555) diff --git a/exampleSite/content/homepage/opener.md b/exampleSite/content/homepage/opener.md index 75ac9b3..082c220 100644 --- a/exampleSite/content/homepage/opener.md +++ b/exampleSite/content/homepage/opener.md @@ -1,10 +1,10 @@ --- -title: 'Welcome' +title: "Welcome" weight: 1 --- Hi there. This section will not show up in the header menu above. Other than that, there's really not much to see here. I did however append some generated »Lorem ipsum«-paragraphs for you. Enjoy! -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula turpis nec arcu cursus, ac faucibus felis tempor. Donec molestie arcu eu pretium accumsan. Phasellus urna nisi, volutpat pharetra orci vel, feugiat sollicitudin diam. Phasellus dolor tortor, feugiat a ipsum id, gravida volutpat urna. Nam dictum nulla ac nisi aliquam ultricies. Nam tempus eget lorem vitae vulputate. +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula turpis nec arcu cursus, ac faucibus felis tempor. Donec molestie arcu eu pretium accumsan. Phasellus urna nisi, volutpat pharetra orci vel, feugiat sollicitudin diam. Phasellus dolor tortor, feugiat a ipsum id, gravida volutpat urna. Nam dictum nulla ac nisi aliquam ultricies. Nam tempus eget lorem vitae vulputate. Nulla aliquet, nisl pulvinar fermentum ultricies, turpis purus ultricies lorem, ut faucibus arcu nisl in tellus. Integer eu augue auctor, fringilla nunc ut, finibus eros. Curabitur est lectus, ultricies id blandit at, malesuada et ipsum. Suspendisse potenti. Quisque euismod sapien arcu, vel sollicitudin ipsum dignissim nec. diff --git a/exampleSite/content/homepage/services.md b/exampleSite/content/homepage/services.md index 14bfd22..fde7687 100644 --- a/exampleSite/content/homepage/services.md +++ b/exampleSite/content/homepage/services.md @@ -1,8 +1,9 @@ --- -title: 'Services' +title: "Services" weight: 2 header_menu: true --- + That is the important part, right? You want to know what I can do for you. This is why I put this right up there into the header menu of the website. --- diff --git a/exampleSite/content/services.md b/exampleSite/content/services.md index 85071cd..8b0f9c6 100644 --- a/exampleSite/content/services.md +++ b/exampleSite/content/services.md @@ -1,5 +1,5 @@ --- -title: 'Services' +title: "Services" --- This is a page about the services, which I offer. diff --git a/exampleSite/layouts/partials/custom_head.html b/exampleSite/layouts/partials/custom_head.html index 53db59d..1d654ff 100644 --- a/exampleSite/layouts/partials/custom_head.html +++ b/exampleSite/layouts/partials/custom_head.html @@ -61,6 +61,20 @@ <!-- Custom link-tags for different icons Generated via https://favicon.io/favicon-generator/ --> -<link rel="apple-touch-icon" sizes="180x180" href='{{ "images/apple-touch-icon.png" | absURL }}'> -<link rel="icon" type="image/png" sizes="32x32" href='{{ "images/favicon-32x32.png" | absURL }}'> -<link rel="icon" type="image/png" sizes="16x16" href='{{ "images/favicon-16x16.png" | absURL }}'> +<link + rel="apple-touch-icon" + sizes="180x180" + href="{{ "images/apple-touch-icon.png" | absURL }}" +/> +<link + rel="icon" + type="image/png" + sizes="32x32" + href="{{ "images/favicon-32x32.png" | absURL }}" +/> +<link + rel="icon" + type="image/png" + sizes="16x16" + href="{{ "images/favicon-16x16.png" | absURL }}" +/> diff --git a/layouts/404.html b/layouts/404.html index 50dbff2..174da67 100644 --- a/layouts/404.html +++ b/layouts/404.html @@ -1,15 +1,16 @@ {{ define "main" }} -<main class="content page-template 404" role="main"> + <main class="content page-template 404" role="main"> <article class="post page"> - <header class="post-header"> - <a id="blog-logo" href="{{ "/" | relURL }}"> - {{ .Site.Title }} - </a> - </header> - <h1 class="post-title">404 - Page Not Found</h1> - <section class="post-content"> - Give it another try: <a href="{{ "/" | relURL }}" alt="Homepage">Back to the homepage</a>. - </section> + <header class="post-header"> + <a id="blog-logo" href="{{ "/" | relURL }}"> + {{ .Site.Title }} + </a> + </header> + <h1 class="post-title">404 - Page Not Found</h1> + <section class="post-content"> + Give it another try: + <a href="{{ "/" | relURL }}" alt="Homepage">Back to the homepage</a>. + </section> </article> -</main> -{{ end }}
\ No newline at end of file + </main> +{{ end }} diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 9964d41..a3badee 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -1,20 +1,23 @@ <!DOCTYPE html> <html> - {{- partial "head.html" . -}} - <body> - {{- partial "header.html" . -}} - {{- block "main" . }}{{- end }} - {{- partial "footer.html" . -}} + {{- partial "head.html" . -}} + <body> + {{- partial "header.html" . -}} + {{- block "main" . }}{{- end }} + {{- partial "footer.html" . -}} - <!-- We do need jQuery to be loaded before HugoScroll script --> - <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script> + <!-- We do need jQuery to be loaded before HugoScroll script --> + <script + type="text/javascript" + src="https://code.jquery.com/jquery-1.11.3.min.js" + ></script> - <!-- The main JavaScript files for HugoScroll --> - <script type="text/javascript" src='{{ "js/icons.js" | absURL }}'></script> - <script type="text/javascript" src='{{ "js/index.js" |absURL }}'></script> - <!-- A partial to be overwritten by the user. + <!-- The main JavaScript files for HugoScroll --> + <script type="text/javascript" src='{{ "js/icons.js" | absURL }}'></script> + <script type="text/javascript" src='{{ "js/index.js" |absURL }}'></script> + <!-- A partial to be overwritten by the user. Simply place a custom_body.html into your local /layouts/partials-directory --> - {{- partial "custom_body.html" . -}} - </body> + {{- partial "custom_body.html" . -}} + </body> </html> diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 4909f18..cb3cb04 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -1,15 +1,15 @@ {{ define "main" }} -<main class="content page-template page-{{ .Slug }}" role="main"> + <main class="content page-template page-{{ .Slug }}" role="main"> <article class="post page"> - <header class="post-header"> - <a id="blog-logo" href="{{ "/" | relURL }}"> - {{ .Site.Title }} - </a> - </header> - <h1 class="post-title">{{ .Title }}</h1> - <section class="post-content"> - {{ .Content }} - </section> + <header class="post-header"> + <a id="blog-logo" href="{{ "/" | relURL }}"> + {{ .Site.Title }} + </a> + </header> + <h1 class="post-title">{{ .Title }}</h1> + <section class="post-content"> + {{ .Content }} + </section> </article> -</main> + </main> {{ end }} diff --git a/layouts/index.html b/layouts/index.html index 0202ae3..9f3daa3 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -14,7 +14,6 @@ <i id='header-arrow' class="fa fa-angle-down"></i> </div> </div> - </header> <main class="content" role="main"> diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 6417d6c..d557ac3 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,11 +1,18 @@ <footer class="site-footer"> - <div class="inner"> - {{ with .Site.Params.copyright }}<section class="copyright">{{ . | markdownify }}</section>{{ end }} - <section>{{ echoParam .Site.Params "hidebyline" }}</section> - {{ if ne .Site.Params.hidedesignbyline true }}<section> - <!-- TODO: Change link to https://themes.gohugo.io/hugo-scroll/ once + <div class="inner"> + {{ with .Site.Params.copyright }} + <section class="copyright">{{ . | markdownify }}</section>{{ end }} + + + <section>{{ echoParam .Site.Params "hidebyline" }}</section> + {{ if ne .Site.Params.hidedesignbyline true }} + <section> + <!-- TODO: Change link to https://themes.gohugo.io/hugo-scroll/ once https://github.com/gohugoio/hugoThemes/issues/881 is solved. --> - <a href="https://github.com/janraasch/hugo-scroll/">Design</a> template built with ♥️ by <a href="https://www.janraasch.com" title="Jan Raasch">Jan Raasch</a> - </section>{{ end }} - </div> + <a href="https://github.com/janraasch/hugo-scroll/">Design</a> template + built with ♥️ by + <a href="https://www.janraasch.com" title="Jan Raasch">Jan Raasch</a> + </section>{{ end }} + + </div> </footer> diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 7990f01..6a63cf6 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -3,20 +3,37 @@ <title>{{ with .Title }}{{ . }}{{ else }}{{ .Site.Title }}{{ end }}</title> -{{ with .Site.Params.favicon }}<link rel="shortcut icon" href="{{ . | absURL }}" type="image/png"/>{{ end }} +{{ with .Site.Params.favicon }} + <link rel="shortcut icon" href="{{ . | absURL }}" type="image/png" +/>{{ end }} -{{ with .Site.Params.description }}<meta name="description" content="{{ . }}" />{{ end }} -{{ with .Site.Params.meta.keywords }}<meta name="keywords" content="{{ . }}" />{{ end }} +{{ with .Site.Params.description }} + <meta name="description" content="{{ . }}" +/>{{ end }} +{{ with .Site.Params.meta.keywords }} + <meta name="keywords" content="{{ . }}" +/>{{ end }} <meta name="referrer" content="no-referrer-when-downgrade" /> <meta name="HandheldFriendly" content="True" /> <meta name="MobileOptimized" content="320" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> -<link rel="stylesheet" href='{{ "css/screen.css" | absURL }}'> -<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700' rel='stylesheet' type='text/css'> -<link href='https://fonts.googleapis.com/css?family=Oswald:400,300,700|Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800|Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'> -<link rel="stylesheet" href='{{ "font-awesome/css/font-awesome.min.css" | absURL }}'> +<link rel="stylesheet" href="{{ "css/screen.css" | absURL }}" /> +<link + href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700" + rel="stylesheet" + type="text/css" +/> +<link + href="https://fonts.googleapis.com/css?family=Oswald:400,300,700|Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800|Roboto+Slab:400,100,300,700" + rel="stylesheet" + type="text/css" +/> +<link + rel="stylesheet" + href="{{ "font-awesome/css/font-awesome.min.css" | absURL }}" +/> {{ template "_internal/opengraph.html" . }} {{ template "_internal/twitter_cards.html" . }} diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..9349620 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,20 @@ +{ + "name": "hugo-scroll", + "version": "1.0.0", + "lockfileVersion": 1, + "requires": true, + "dependencies": { + "prettier": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.1.1.tgz", + "integrity": "sha512-9bY+5ZWCfqj3ghYBLxApy2zf6m+NJo5GzmLTpr9FsApsfjriNnS2dahWReHMi7qNPhhHl9SYHJs2cHZLgexNIw==", + "dev": true + }, + "prettier-plugin-go-template": { + "version": "0.0.10", + "resolved": "https://registry.npmjs.org/prettier-plugin-go-template/-/prettier-plugin-go-template-0.0.10.tgz", + "integrity": "sha512-TaHPqiMK/zfk+YhvKRf/1WZDgQ6ffnlxJZX5rwphqfxBOVEezZQtYistTB348MKrKnnwKpyXZWpMRo0/KCVB+A==", + "dev": true + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..446ec96 --- /dev/null +++ b/package.json @@ -0,0 +1,29 @@ +{ + "private": true, + "name": "hugo-scroll", + "version": "1.0.0", + "description": "A Hugo theme for pretty, quick and simple single-page websites.", + "main": "index.js", + "scripts": { + "test": "prettier --check . ", + "format": "prettier --write . " + }, + "repository": { + "type": "git", + "url": "git+https://github.com/janraasch/hugo-scroll.git" + }, + "author": { + "name": "Jan Raasch", + "email": "jan@janraasch.com", + "url": "https://www.janraasch.com" + }, + "license": "MIT", + "bugs": { + "url": "https://github.com/janraasch/hugo-scroll/issues" + }, + "homepage": "https://github.com/janraasch/hugo-scroll#readme", + "devDependencies": { + "prettier": "^2.1.1", + "prettier-plugin-go-template": "0.0.10" + } +} diff --git a/static/css/screen.css b/static/css/screen.css index 472d06c..6e2a905 100644 --- a/static/css/screen.css +++ b/static/css/screen.css @@ -22,1084 +22,1090 @@ 0. Includes - Ground zero ========================================================================== */ - @import url(normalize.css); +@import url(normalize.css); - - /* ========================================================================== +/* ========================================================================== 1. Icons - Sets up the icon font and respective classes ========================================================================== */ - - /* Import the font file with the icons in it */ - @font-face { - font-family: 'icons'; - src:url('../fonts/icons.eot'); - src:url('../fonts/icons.eot?#iefix') format('embedded-opentype'), - url('../fonts/icons.woff') format('woff'), - url('../fonts/icons.ttf') format('truetype'), - url('../fonts/icons.svg#icons') format('svg'); - font-weight: normal; - font-style: normal; - } - - /* Apply these base styles to all icons */ - .i-ghost, .icon-feed, .icon-twitter, .icon-google-plus, .icon-facebook { - font-family: 'icons'; - speak: none; - font-style: normal; - font-weight: normal; - font-variant: normal; - text-transform: none; - line-height: 1; - -webkit-font-smoothing: antialiased; - text-decoration: none; - } - - /* Each icon is created by inserting the corret character into the + +/* Import the font file with the icons in it */ +@font-face { + font-family: "icons"; + src: url("../fonts/icons.eot"); + src: url("../fonts/icons.eot?#iefix") format("embedded-opentype"), + url("../fonts/icons.woff") format("woff"), + url("../fonts/icons.ttf") format("truetype"), + url("../fonts/icons.svg#icons") format("svg"); + font-weight: normal; + font-style: normal; +} + +/* Apply these base styles to all icons */ +.i-ghost, +.icon-feed, +.icon-twitter, +.icon-google-plus, +.icon-facebook { + font-family: "icons"; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + -webkit-font-smoothing: antialiased; + text-decoration: none; +} + +/* Each icon is created by inserting the corret character into the content of the :before pseudo element. Like a boss. */ - .i-ghost:before { - content: "\e000"; - } - .icon-feed:before { - content: "\e001"; - } - .icon-twitter:before { - content: "\e002"; - font-size: 1.1em; - } - .icon-google-plus:before { - content: "\e003"; - } - .icon-facebook:before { - content: "\e004"; - } - - - /* ========================================================================== +.i-ghost:before { + content: "\e000"; +} +.icon-feed:before { + content: "\e001"; +} +.icon-twitter:before { + content: "\e002"; + font-size: 1.1em; +} +.icon-google-plus:before { + content: "\e003"; +} +.icon-facebook:before { + content: "\e004"; +} + +/* ========================================================================== 2. General - Setting up some base styles ========================================================================== */ - - html { - height: 100%; - max-height: 100%; - font-size: 62.5%; - overflow-x: hidden; - } - - body { - height: 100%; - max-height: 100%; - /*font-family: 'Droid Serif', serif;*/ - font-family: 'Roboto Slab', serif; - font-size: 2.0rem; - line-height: 1.6em; - color: #3A4145; - } - a.fa { - text-decoration: none; - } - ::-moz-selection { - color: #222; - background: #D6EDFF; - text-shadow: none; - } - - ::selection { - color: #222; - background: #D6EDFF; - text-shadow: none; - } - .left { - float: left; - } - .right { - float: right; - } - .clear { - clear: both; - } - h1, h2, h3, - h4, h5, h6 { - text-rendering: optimizeLegibility; - line-height: 1; - margin-top: 0; - margin-bottom: 10px; - font-family: 'Open Sans', sans-serif; - } - h3, h4, h5, h6 { - text-rendering: optimizeLegibility; - line-height: 120%; - margin-top: 0; - font-family: 'Open Sans', sans-serif; - margin-bottom: 0%; - } - - h1 { - font-size: 5rem; - line-height: 1.2em; - letter-spacing: -2px; - text-indent: -3px; - } - - h2 { - font-size: 4rem; - line-height: 1.2em; - letter-spacing: -1px; - text-indent: -2px; - } - - h3 { - font-size: 3.5rem; - } - - h4 { - font-size: 3rem; - } - - h5 { - font-size: 2.5rem; - } - - h6 { - font-size: 2rem; - } - - a { - color: inherit; - transition: all ease 0.3s; - -webkit-transition: all ease 0.3s; - -moz-transition: all ease 0.3s; - } - - a:hover { - color: #86c440; - } - - a.btn { - - text-decoration: none; - background-color: #9fd067; - border-radius: 6px; - -webkit-border-radius: 6px; - color: white; - display: inline-block; - font-size: 16px; - letter-spacing: 1px; - margin: 0; - overflow: visible; - padding: 10px 20px 10px 20px; - position: relative; - margin-top: 2rem; - cursor: pointer; - font-family: 'Oswald', sans-serif; - text-transform: uppercase; - font-weight: lighter; - - } - - a.btn:hover { - background: #86c440; - } - - #header-arrow { - font-size: 140px; - margin: -10px auto; - text-align: center; - position: absolute; - width: 100%; - left: 0; - bottom: -120px; - cursor: pointer; - opacity: 0.6; - transition: all ease 0.3s; - -webkit-transition: all ease 0.3s; - -moz-transition: all ease 0.3s; - } - #header-arrow:hover { - opacity: 0.9; - } - - h1 a, h2 a, h3 a, - h4 a, h5 a, h6 a { - /*color: #50585D;*/ - } - - - p, ul, ol { - margin: 1em 0; - } - - ol ol, ul ul, - ul ol, ol ul { - margin: 0.4em 0; - } - - hr { - display: block; - height: 1px; - border: 0; - border-top: 1px solid #efefef; - margin: 3.2em 0; - padding: 0; - } - - blockquote { - -moz-box-sizing: border-box; - box-sizing: border-box; - margin: 1.0em 0 1.0em -2.2em; - padding: 0 0 0 1.0em; - /*border-left: #4a4a4a 0.4em solid;*/ - font-weight: lighter; - } - - blockquote p { - margin: 0.8em 0; - } - .quo { - /*float: left;*/ - margin-right: 10px; - margin-left: 10px; - font-size: 20px; - } - - blockquote small { - display: inline-block; - margin: 0.8em 0 0.8em 1.5em;; - font-size:0.9em; - color: #ccc; - } - - blockquote small:before { content: '\2014 \00A0'; } - - blockquote cite { - font-weight:bold; - } - - blockquote cite a { font-weight: normal; } - - - dl { - margin: 1.6em 0; - } - - dl dt { - float: left; - width: 180px; - overflow: hidden; - clear: left; - text-align: right; - text-overflow: ellipsis; - white-space: nowrap; - font-weight: bold; - margin-bottom: 1em - } - - dl dd { - margin-left: 200px; - margin-bottom: 1em - } - - mark { - background-color: #ffc336; - } - - code, tt { - padding: 3px 5px; - font-family: Inconsolata, monospace, sans-serif; - font-size: 0.75em; - /*white-space: pre;*/ - border: 1px solid #E3EDF3; - background: #F7FAFB; - border-radius: 2px; - color: #3A4145; - } - - pre { - -moz-box-sizing: border-box; - box-sizing: border-box; - margin: 1.6em 0; - border: 1px solid #E3EDF3; - width: 100%; - padding: 10px; - font-family: Inconsolata, monospace, sans-serif; - font-size: 0.9em; - white-space: pre; - overflow: auto; - background: #F7FAFB; - border-radius: 3px; - } - - pre code, tt { - font-size: inherit; - white-space: -moz-pre-wrap; - white-space: pre-wrap; - background: transparent; - border: none; - padding: 0; - } - - kbd { - display: inline-block; - margin-bottom: 0.4em; - padding: 1px 8px; - border: #ccc 1px solid; - color: #666; - text-shadow: #fff 0 1px 0; - font-size: 0.9em; - font-weight: bold; - background: #f4f4f4; - border-radius: 4px; - box-shadow: - 0 1px 0 rgba(0, 0, 0, 0.2), - 0 1px 0 0 #fff inset; - } - - table { - -moz-box-sizing: border-box; - box-sizing: border-box; - margin: 1.6em 0; - width:100%; - max-width: 100%; - background-color: transparent; - } - - table th, - table td { - padding: 8px; - line-height: 20px; - text-align: left; - vertical-align: top; - border-top: 1px solid #efefef; - } - - table th { color: #000; } - - table caption + thead tr:first-child th, - table caption + thead tr:first-child td, - table colgroup + thead tr:first-child th, - table colgroup + thead tr:first-child td, - table thead:first-child tr:first-child th, - table thead:first-child tr:first-child td { - border-top: 0; - } - - table tbody + tbody { border-top: 2px solid #efefef; } - - table table table { background-color: #fff; } - - table tbody > tr:nth-child(odd) > td, - table tbody > tr:nth-child(odd) > th { - background-color: #f6f6f6; - } - - table.plain { - tbody > tr:nth-child(odd) > td, - tbody > tr:nth-child(odd) > th { - background: transparent; - } - } - - li { - margin-left: 30px; - } - - ul li { - list-style-type: none; - } - - .bult { - display: inline; - float: left; - padding-top: 7px; - } - - - - /* ========================================================================== + +html { + height: 100%; + max-height: 100%; + font-size: 62.5%; + overflow-x: hidden; +} + +body { + height: 100%; + max-height: 100%; + /*font-family: 'Droid Serif', serif;*/ + font-family: "Roboto Slab", serif; + font-size: 2rem; + line-height: 1.6em; + color: #3a4145; +} +a.fa { + text-decoration: none; +} +::-moz-selection { + color: #222; + background: #d6edff; + text-shadow: none; +} + +::selection { + color: #222; + background: #d6edff; + text-shadow: none; +} +.left { + float: left; +} +.right { + float: right; +} +.clear { + clear: both; +} +h1, +h2, +h3, +h4, +h5, +h6 { + text-rendering: optimizeLegibility; + line-height: 1; + margin-top: 0; + margin-bottom: 10px; + font-family: "Open Sans", sans-serif; +} +h3, +h4, +h5, +h6 { + text-rendering: optimizeLegibility; + line-height: 120%; + margin-top: 0; + font-family: "Open Sans", sans-serif; + margin-bottom: 0%; +} + +h1 { + font-size: 5rem; + line-height: 1.2em; + letter-spacing: -2px; + text-indent: -3px; +} + +h2 { + font-size: 4rem; + line-height: 1.2em; + letter-spacing: -1px; + text-indent: -2px; +} + +h3 { + font-size: 3.5rem; +} + +h4 { + font-size: 3rem; +} + +h5 { + font-size: 2.5rem; +} + +h6 { + font-size: 2rem; +} + +a { + color: inherit; + transition: all ease 0.3s; + -webkit-transition: all ease 0.3s; + -moz-transition: all ease 0.3s; +} + +a:hover { + color: #86c440; +} + +a.btn { + text-decoration: none; + background-color: #9fd067; + border-radius: 6px; + -webkit-border-radius: 6px; + color: white; + display: inline-block; + font-size: 16px; + letter-spacing: 1px; + margin: 0; + overflow: visible; + padding: 10px 20px 10px 20px; + position: relative; + margin-top: 2rem; + cursor: pointer; + font-family: "Oswald", sans-serif; + text-transform: uppercase; + font-weight: lighter; +} + +a.btn:hover { + background: #86c440; +} + +#header-arrow { + font-size: 140px; + margin: -10px auto; + text-align: center; + position: absolute; + width: 100%; + left: 0; + bottom: -120px; + cursor: pointer; + opacity: 0.6; + transition: all ease 0.3s; + -webkit-transition: all ease 0.3s; + -moz-transition: all ease 0.3s; +} +#header-arrow:hover { + opacity: 0.9; +} + +h1 a, +h2 a, +h3 a, +h4 a, +h5 a, +h6 a { + /*color: #50585D;*/ +} + +p, +ul, +ol { + margin: 1em 0; +} + +ol ol, +ul ul, +ul ol, +ol ul { + margin: 0.4em 0; +} + +hr { + display: block; + height: 1px; + border: 0; + border-top: 1px solid #efefef; + margin: 3.2em 0; + padding: 0; +} + +blockquote { + -moz-box-sizing: border-box; + box-sizing: border-box; + margin: 1em 0 1em -2.2em; + padding: 0 0 0 1em; + /*border-left: #4a4a4a 0.4em solid;*/ + font-weight: lighter; +} + +blockquote p { + margin: 0.8em 0; +} +.quo { + /*float: left;*/ + margin-right: 10px; + margin-left: 10px; + font-size: 20px; +} + +blockquote small { + display: inline-block; + margin: 0.8em 0 0.8em 1.5em; + font-size: 0.9em; + color: #ccc; +} + +blockquote small:before { + content: "\2014 \00A0"; +} + +blockquote cite { + font-weight: bold; +} + +blockquote cite a { + font-weight: normal; +} + +dl { + margin: 1.6em 0; +} + +dl dt { + float: left; + width: 180px; + overflow: hidden; + clear: left; + text-align: right; + text-overflow: ellipsis; + white-space: nowrap; + font-weight: bold; + margin-bottom: 1em; +} + +dl dd { + margin-left: 200px; + margin-bottom: 1em; +} + +mark { + background-color: #ffc336; +} + +code, +tt { + padding: 3px 5px; + font-family: Inconsolata, monospace, sans-serif; + font-size: 0.75em; + /*white-space: pre;*/ + border: 1px solid #e3edf3; + background: #f7fafb; + border-radius: 2px; + color: #3a4145; +} + +pre { + -moz-box-sizing: border-box; + box-sizing: border-box; + margin: 1.6em 0; + border: 1px solid #e3edf3; + width: 100%; + padding: 10px; + font-family: Inconsolata, monospace, sans-serif; + font-size: 0.9em; + white-space: pre; + overflow: auto; + background: #f7fafb; + border-radius: 3px; +} + +pre code, +tt { + font-size: inherit; + white-space: -moz-pre-wrap; + white-space: pre-wrap; + background: transparent; + border: none; + padding: 0; +} + +kbd { + display: inline-block; + margin-bottom: 0.4em; + padding: 1px 8px; + border: #ccc 1px solid; + color: #666; + text-shadow: #fff 0 1px 0; + font-size: 0.9em; + font-weight: bold; + background: #f4f4f4; + border-radius: 4px; + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 1px 0 0 #fff inset; +} + +table { + -moz-box-sizing: border-box; + box-sizing: border-box; + margin: 1.6em 0; + width: 100%; + max-width: 100%; + background-color: transparent; +} + +table th, +table td { + padding: 8px; + line-height: 20px; + text-align: left; + vertical-align: top; + border-top: 1px solid #efefef; +} + +table th { + color: #000; +} + +table caption + thead tr:first-child th, +table caption + thead tr:first-child td, +table colgroup + thead tr:first-child th, +table colgroup + thead tr:first-child td, +table thead:first-child tr:first-child th, +table thead:first-child tr:first-child td { + border-top: 0; +} + +table tbody + tbody { + border-top: 2px solid #efefef; +} + +table table table { + background-color: #fff; +} + +table tbody > tr:nth-child(odd) > td, +table tbody > tr:nth-child(odd) > th { + background-color: #f6f6f6; +} + +table.plain { + tbody > tr:nth-child(odd) > td, + tbody > tr:nth-child(odd) > th { + background: transparent; + } +} + +li { + margin-left: 30px; +} + +ul li { + list-style-type: none; +} + +.bult { + display: inline; + float: left; + padding-top: 7px; +} + +/* ========================================================================== 3. Utilities - These things get used a lot ========================================================================== */ - - /* Hides shit */ - .hidden { - text-indent: -9999px; - visibility: hidden; - display: none; - } - - /* Creates a responsive wrapper that makes our content scale nicely */ - .inner { - position: relative; - width: 80%; - max-width: 700px; - margin: 0 auto; - } - - /* Centres vertically yo. (IE8+) */ - .vertical { - display: table-cell; - vertical-align: middle; - } - - - /* ========================================================================== + +/* Hides shit */ +.hidden { + text-indent: -9999px; + visibility: hidden; + display: none; +} + +/* Creates a responsive wrapper that makes our content scale nicely */ +.inner { + position: relative; + width: 80%; + max-width: 700px; + margin: 0 auto; +} + +/* Centres vertically yo. (IE8+) */ +.vertical { + display: table-cell; + vertical-align: middle; +} + +/* ========================================================================== 4. General - The main styles for the the theme ========================================================================== */ - - /* Big cover image on the home page */ - #site-head { - position: relative; - display: table; - width: 100%; - height: 100%; - margin-bottom: 0rem; - text-align: center; - color: #fff; - background: #B80135 no-repeat center center; - background-size: cover; - } - - #site-head:after { - - } - - - /* Yo-logo. Yolo-go. Upload one in ghost/settings/ */ - #blog-logo img { - display: block; - max-height: 100px; - width: auto; - margin: 0 auto; - line-height: 0; - } - - #back { - color: rgba(0,0,0,0.2); - position: fixed; - top: 8px; - left: 8px; - padding: 6px; - font-size: 16px; - } - - /* The details of your blog. Defined in ghost/settings/ */ - .blog-title { - margin: 10px 0 10px 0; - font-size: 5rem; - letter-spacing: -1px; - } - - .blog-description { - margin: 0; - font-size: 2.5rem; - line-height: 1.5em; - font-weight: 400; - font-family: 'Roboto Slab', serif; - letter-spacing: 0; - } - - .post-holder { - width:100%; - height: 100%; - background: #f2efe8; - position: relative; - } - .post-holder.odd { - background: #B80135; - color: white; - } - - /* Every post, on every page, gets this style on its <article> tag */ - .post { - position: relative; - width: 80%; - max-width: 700px; - margin: 0rem auto; - padding-bottom: 4rem; - padding-top: 4rem; - height: 70%; - word-break: break-word; - hyphens: auto; - - } - - /* Add a little circle in the middle of the border-bottom on our .post + +/* Big cover image on the home page */ +#site-head { + position: relative; + display: table; + width: 100%; + height: 100%; + margin-bottom: 0rem; + text-align: center; + color: #fff; + background: #b80135 no-repeat center center; + background-size: cover; +} + +#site-head:after { +} + +/* Yo-logo. Yolo-go. Upload one in ghost/settings/ */ +#blog-logo img { + display: block; + max-height: 100px; + width: auto; + margin: 0 auto; + line-height: 0; +} + +#back { + color: rgba(0, 0, 0, 0.2); + position: fixed; + top: 8px; + left: 8px; + padding: 6px; + font-size: 16px; +} + +/* The details of your blog. Defined in ghost/settings/ */ +.blog-title { + margin: 10px 0 10px 0; + font-size: 5rem; + letter-spacing: -1px; +} + +.blog-description { + margin: 0; + font-size: 2.5rem; + line-height: 1.5em; + font-weight: 400; + font-family: "Roboto Slab", serif; + letter-spacing: 0; +} + +.post-holder { + width: 100%; + height: 100%; + background: #f2efe8; + position: relative; +} +.post-holder.odd { + background: #b80135; + color: white; +} + +/* Every post, on every page, gets this style on its <article> tag */ +.post { + position: relative; + width: 80%; + max-width: 700px; + margin: 0rem auto; + padding-bottom: 4rem; + padding-top: 4rem; + height: 70%; + word-break: break-word; + hyphens: auto; +} + +/* Add a little circle in the middle of the border-bottom on our .post just for the lolz and stylepoints. */ - - .fixed-nav { - display: none; - opacity: 1; - position: fixed; - top: 40px; - left: 2%; - z-index: 99999; - font-family: 'Open Sans Condensed', sans-serif; - text-transform: uppercase; - font-size: 1.5rem; - line-height: 130%; - font-weight: bold; - } - a.fn-item { - display: block; - cursor: pointer; - opacity: 0.7; - } - .white { - color: white; - } - a.fn-item:hover { - color: #9fd067; - } - a.fn-item.active { - color: #86c440; - opacity: 1; - - } - - .post-after { - position: absolute; - bottom: -40px; - right: 6%; - z-index: 1; - width: 0; - height: 0; - border-left: 60px solid transparent; - border-right: 60px solid transparent; - border-top: 50px solid #f2efe8; - border-radius: 25px; - } - .post-after.even { - left: 6%; - } - - .post-title { - margin:0; - } - - .post-title a { - text-decoration: none; - } - - .post-excerpt p { - margin: 1.6rem 0 0 0; - font-size: 0.9em; - line-height: 1.6em; - } - - .post-meta { - display: inline-block; - margin: 0 0 5px 0; - font-family: 'Open Sans', sans-serif; - font-size: 1.5rem; - color: #9EABB3; - } - - .post-meta a { - color: #9EABB3; - text-decoration: none; - } - - .post-meta a:hover { - text-decoration: underline; - } - - .user-meta { - position: relative; - padding: 0.3rem 40px 0 100px; - min-height: 77px; - } - - .user-image { - position: absolute; - top: 0; - left: 0; - } - - .user-name { - display: block; - font-weight: bold; - } - - .user-bio { - display: block; - max-width: 440px; - font-size: 1.4rem; - line-height: 1.5em; - } - - .publish-meta { - position: absolute; - top: 0; - right: 0; - padding: 4.3rem 0 4rem 0; - text-align: right; - } - - .publish-heading { - display: block; - font-weight: bold; - } - - .publish-date { - display: block; - font-size: 1.4rem; - line-height: 1.5em; - } - - /* ========================================================================== + +.fixed-nav { + display: none; + opacity: 1; + position: fixed; + top: 40px; + left: 2%; + z-index: 99999; + font-family: "Open Sans Condensed", sans-serif; + text-transform: uppercase; + font-size: 1.5rem; + line-height: 130%; + font-weight: bold; +} +a.fn-item { + display: block; + cursor: pointer; + opacity: 0.7; +} +.white { + color: white; +} +a.fn-item:hover { + color: #9fd067; +} +a.fn-item.active { + color: #86c440; + opacity: 1; +} + +.post-after { + position: absolute; + bottom: -40px; + right: 6%; + z-index: 1; + width: 0; + height: 0; + border-left: 60px solid transparent; + border-right: 60px solid transparent; + border-top: 50px solid #f2efe8; + border-radius: 25px; +} +.post-after.even { + left: 6%; +} + +.post-title { + margin: 0; +} + +.post-title a { + text-decoration: none; +} + +.post-excerpt p { + margin: 1.6rem 0 0 0; + font-size: 0.9em; + line-height: 1.6em; +} + +.post-meta { + display: inline-block; + margin: 0 0 5px 0; + font-family: "Open Sans", sans-serif; + font-size: 1.5rem; + color: #9eabb3; +} + +.post-meta a { + color: #9eabb3; + text-decoration: none; +} + +.post-meta a:hover { + text-decoration: underline; +} + +.user-meta { + position: relative; + padding: 0.3rem 40px 0 100px; + min-height: 77px; +} + +.user-image { + position: absolute; + top: 0; + left: 0; +} + +.user-name { + display: block; + font-weight: bold; +} + +.user-bio { + display: block; + max-width: 440px; + font-size: 1.4rem; + line-height: 1.5em; +} + +.publish-meta { + position: absolute; + top: 0; + right: 0; + padding: 4.3rem 0 4rem 0; + text-align: right; +} + +.publish-heading { + display: block; + font-weight: bold; +} + +.publish-date { + display: block; + font-size: 1.4rem; + line-height: 1.5em; +} + +/* ========================================================================== 5. Single Post - When you click on an individual post ========================================================================== */ - - /* Tweak the .post wrapper style */ - .post-template .post { - margin-top: 0; - border-bottom: none; - padding-bottom: 0; - } - - /* Kill that stylish little circle that was on the border, too */ - .post-template .post:after { - display: none; - } - - /* Insert some mad padding up in the header for better spacing */ - .post-template .post-header { - padding: 60px 0; - } - - /* Keep large images within the bounds of the post-width */ - .post-content img { - display: block; - max-width: 100%; - margin: 0 auto; - } - - /* The author credit area after the post */ - .post-footer { - position: relative; - margin: 4rem 0 0 0; - padding: 4rem 0 0 0; - border-top: #EBF2F6 1px solid; - } - - .post-footer h4 { - font-size: 1.8rem; - margin: 0; - } - - .post-footer p { - margin: 1rem 0; - font-size: 1.4rem; - line-height: 1.6em; - } - - /* Create some space to the right for the share links */ - .post-footer .author { - margin-right: 180px; - } - - /* Drop the share links in the space to the right. + +/* Tweak the .post wrapper style */ +.post-template .post { + margin-top: 0; + border-bottom: none; + padding-bottom: 0; +} + +/* Kill that stylish little circle that was on the border, too */ +.post-template .post:after { + display: none; +} + +/* Insert some mad padding up in the header for better spacing */ +.post-template .post-header { + padding: 60px 0; +} + +/* Keep large images within the bounds of the post-width */ +.post-content img { + display: block; + max-width: 100%; + margin: 0 auto; +} + +/* The author credit area after the post */ +.post-footer { + position: relative; + margin: 4rem 0 0 0; + padding: 4rem 0 0 0; + border-top: #ebf2f6 1px solid; +} + +.post-footer h4 { + font-size: 1.8rem; + margin: 0; +} + +.post-footer p { + margin: 1rem 0; + font-size: 1.4rem; + line-height: 1.6em; +} + +/* Create some space to the right for the share links */ +.post-footer .author { + margin-right: 180px; +} + +/* Drop the share links in the space to the right. Doing it like this means it's easier for the author bio to be flexible at smaller screen sizes while the share links remain at a fixed width the whole time */ - .post-footer .share { - position: absolute; - top: 4rem; - right: 0; - width: 140px; - } - - .post-footer .share a { - font-size: 1.8rem; - display: inline-block; - margin: 1.4rem 1.6rem 1.6rem 0; - color: #BBC7CC; - } - - .post-footer .share a:hover { - color: #50585D; - } - - - /* ========================================================================== +.post-footer .share { + position: absolute; + top: 4rem; + right: 0; + width: 140px; +} + +.post-footer .share a { + font-size: 1.8rem; + display: inline-block; + margin: 1.4rem 1.6rem 1.6rem 0; + color: #bbc7cc; +} + +.post-footer .share a:hover { + color: #50585d; +} + +/* ========================================================================== 6. Third Party Elements - Embeds from other services ========================================================================== */ - - /* Github */ - - .gist table { - margin: 0; - font-size: 1.4rem; - } - - .gist .line-number { - min-width: 25px; - font-size: 1.1rem; - } - - - /* ========================================================================== + +/* Github */ + +.gist table { + margin: 0; + font-size: 1.4rem; +} + +.gist .line-number { + min-width: 25px; + font-size: 1.1rem; +} + +/* ========================================================================== 7. Pagination - Tools to let you flick between pages ========================================================================== */ - - /* The main wrapper for our pagination links */ - .pagination { - position: relative; - width: 80%; - max-width: 700px; - margin: 4rem auto; - font-family: 'Open Sans', sans-serif; - font-size: 1.3rem; - color: #9EABB3; - text-align: center; - } - - .pagination a { - color: #9EABB3; - } - - /* Push the previous/next links out to the left/right */ - .older-posts, - .newer-posts { - position: absolute; - display: inline-block; - padding: 0 15px; - border: #EBF2F6 2px solid; - text-decoration: none; - border-radius: 30px; - transition: border ease 0.3s; - } - - .older-posts { - right: 0; - } - - .page-number { - display: inline-block; - padding: 2px 0; - } - - .newer-posts { - left: 0; - } - - .older-posts:hover, - .newer-posts:hover { - border-color: #9EABB3; - } - - - /* ========================================================================== + +/* The main wrapper for our pagination links */ +.pagination { + position: relative; + width: 80%; + max-width: 700px; + margin: 4rem auto; + font-family: "Open Sans", sans-serif; + font-size: 1.3rem; + color: #9eabb3; + text-align: center; +} + +.pagination a { + color: #9eabb3; +} + +/* Push the previous/next links out to the left/right */ +.older-posts, +.newer-posts { + position: absolute; + display: inline-block; + padding: 0 15px; + border: #ebf2f6 2px solid; + text-decoration: none; + border-radius: 30px; + transition: border ease 0.3s; +} + +.older-posts { + right: 0; +} + +.page-number { + display: inline-block; + padding: 2px 0; +} + +.newer-posts { + left: 0; +} + +.older-posts:hover, +.newer-posts:hover { + border-color: #9eabb3; +} + +/* ========================================================================== 8. Footer - The bottom of every page ========================================================================== */ - - .site-footer { - position: relative; - margin: 0rem 0 0 0; - padding: 1rem 0; - font-family: 'Open Sans', sans-serif; - font-size: 1.3rem; - line-height: 1.5em; - color: #BBC7CC; - text-align: center; - background: #22343A; - } - - .site-footer a { - color: #BBC7CC; - text-decoration: underline; - } - - .site-footer a:hover { - color: #50585D; - } - - .poweredby .i-ghost { - font-weight: 700; - text-decoration: none; - } - - .poweredby .i-ghost:hover { - text-decoration: none; - } - - .poweredby .i-ghost:before { - font-size: 1rem; - margin-right: 0.2em; - } - - /* The subscribe icon on the footer */ - .subscribe { - width: 28px; - height: 28px; - position: absolute; - top: -14px; - left: 50%; - margin-left: -15px; - border: #EBF2F6 1px solid; - text-align: center; - line-height: 2.4rem; - border-radius: 50px; - background: #fff; - transition: box-shadow 0.5s; - } - - /* The RSS icon, inserted via icon font */ - .subscribe:before { - color: #D2DEE3; - font-size: 10px; - position: absolute; - top: 2px; - left: 9px; - font-weight: bold; - transition: color 0.5s ease; - } - - /* Add a box shadow to on hover */ - .subscribe:hover { - box-shadow: rgba(0,0,0,0.05) 0 0 0 3px; - transition: box-shadow 0.25s; - } - - .subscribe:hover:before { - color: #50585D; - } - - /* CSS tooltip saying "Subscribe!" - initially hidden */ - .tooltip { - opacity:0; - display: inline-block; - padding: 4px 8px 5px 8px; - position:absolute; - top: -23px; - left: -23px; - color: rgba(255,255,255,0.9); - font-size: 1.1rem; - font-weight: bold; - line-height: 1em; - text-align: center; - background: #50585D; - border-radius:20px; - box-shadow: 0 1px 4px rgba(0,0,0,0.1); - transition: opacity 0.3s ease, top 0.3s ease; - } - - /* The little chiclet arrow under the tooltip, pointing down */ - .tooltip:after { - content:""; - border-width:5px 5px 0 5px; - border-style:solid; - border-color: #50585D transparent; - display:block; - position:absolute; - bottom:-4px; - left:50%; - margin-left:-5px; - z-index: 220; - width:0; - } - - /* On hover, show the tooltip! */ - .subscribe:hover .tooltip { - opacity: 1; - top: -33px; - } - - - /* ========================================================================== + +.site-footer { + position: relative; + margin: 0rem 0 0 0; + padding: 1rem 0; + font-family: "Open Sans", sans-serif; + font-size: 1.3rem; + line-height: 1.5em; + color: #bbc7cc; + text-align: center; + background: #22343a; +} + +.site-footer a { + color: #bbc7cc; + text-decoration: underline; +} + +.site-footer a:hover { + color: #50585d; +} + +.poweredby .i-ghost { + font-weight: 700; + text-decoration: none; +} + +.poweredby .i-ghost:hover { + text-decoration: none; +} + +.poweredby .i-ghost:before { + font-size: 1rem; + margin-right: 0.2em; +} + +/* The subscribe icon on the footer */ +.subscribe { + width: 28px; + height: 28px; + position: absolute; + top: -14px; + left: 50%; + margin-left: -15px; + border: #ebf2f6 1px solid; + text-align: center; + line-height: 2.4rem; + border-radius: 50px; + background: #fff; + transition: box-shadow 0.5s; +} + +/* The RSS icon, inserted via icon font */ +.subscribe:before { + color: #d2dee3; + font-size: 10px; + position: absolute; + top: 2px; + left: 9px; + font-weight: bold; + transition: color 0.5s ease; +} + +/* Add a box shadow to on hover */ +.subscribe:hover { + box-shadow: rgba(0, 0, 0, 0.05) 0 0 0 3px; + transition: box-shadow 0.25s; +} + +.subscribe:hover:before { + color: #50585d; +} + +/* CSS tooltip saying "Subscribe!" - initially hidden */ +.tooltip { + opacity: 0; + display: inline-block; + padding: 4px 8px 5px 8px; + position: absolute; + top: -23px; + left: -23px; + color: rgba(255, 255, 255, 0.9); + font-size: 1.1rem; + font-weight: bold; + line-height: 1em; + text-align: center; + background: #50585d; + border-radius: 20px; + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); + transition: opacity 0.3s ease, top 0.3s ease; +} + +/* The little chiclet arrow under the tooltip, pointing down */ +.tooltip:after { + content: ""; + border-width: 5px 5px 0 5px; + border-style: solid; + border-color: #50585d transparent; + display: block; + position: absolute; + bottom: -4px; + left: 50%; + margin-left: -5px; + z-index: 220; + width: 0; +} + +/* On hover, show the tooltip! */ +.subscribe:hover .tooltip { + opacity: 1; + top: -33px; +} + +/* ========================================================================== 9. Media Queries - Smaller than 1130px ========================================================================== */ - - @media only screen and (max-width: 1130px) { - .fixed-nav { - opacity: 1; - position: fixed; - top: 0px; - left: 0px; - z-index: 99999; - background: #f2efe8; - width: 100%; - text-align: center; - padding: 4px; - } - a.fn-item { - display: inline; - margin-left: 10px; - } - blockquote { - margin-left: 0; - } - .post-holder { - padding-top: 20px; - } - #site-head { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - min-height: 240px; - padding: 15% 0; - height: 100%; - margin-bottom: 0rem; - } - - .blog-title { - font-size: 4rem; - letter-spacing: -1px; - } - - .blog-description { - font-size: 2.2rem; - line-height: 1.5em; - } - - .post { - font-size: 0.9em; - line-height: 1.6em; - } - - .post-template .post { - padding-bottom: 1rem; - } - - .post-template .post-header { - padding: 40px 0; - } - - h1 { - font-size: 4.8rem; - text-indent: -2px; - } - - h2 { - font-size: 3.8rem; - } - - h3 { - font-size: 3.3rem; - } - - h4 { - font-size: 2.8rem; - } - - } - - /* ========================================================================== + +@media only screen and (max-width: 1130px) { + .fixed-nav { + opacity: 1; + position: fixed; + top: 0px; + left: 0px; + z-index: 99999; + background: #f2efe8; + width: 100%; + text-align: center; + padding: 4px; + } + a.fn-item { + display: inline; + margin-left: 10px; + } + blockquote { + margin-left: 0; + } + .post-holder { + padding-top: 20px; + } + #site-head { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + min-height: 240px; + padding: 15% 0; + height: 100%; + margin-bottom: 0rem; + } + + .blog-title { + font-size: 4rem; + letter-spacing: -1px; + } + + .blog-description { + font-size: 2.2rem; + line-height: 1.5em; + } + + .post { + font-size: 0.9em; + line-height: 1.6em; + } + + .post-template .post { + padding-bottom: 1rem; + } + + .post-template .post-header { + padding: 40px 0; + } + + h1 { + font-size: 4.8rem; + text-indent: -2px; + } + + h2 { + font-size: 3.8rem; + } + + h3 { + font-size: 3.3rem; + } + + h4 { + font-size: 2.8rem; + } +} + +/* ========================================================================== 10. Media Queries - Smaller than 500px ========================================================================== */ - - - @media only screen and (max-width: 500px) { - - .fixed-nav { - display: none; - - } - .post-holder { - padding-top: 20px; - } - #blog-logo img { - max-height: 80px; - } - - .inner, - .pagination { - width: auto; - margin-left: 16px; - margin-right: 16px; - } - - .post { - width:auto; - margin-left: 16px; - margin-right: 16px; - font-size: 0.8em; - line-height: 1.6em; - } - - #site-head { - padding: 10% 0; - height: 65%; - } - #header-arrow { - display: none; - } - a.btn { - margin-top: 10px; - } - - .blog-title { - font-size: 3rem; - } - - .blog-description { - font-size: 2.2rem; - } - - - h1, h2 { - font-size: 3rem; - line-height: 1.1em; - letter-spacing: -1px; - } - - h3 { - font-size: 2.8rem; - } - - h4 { - font-size: 2.3rem; - } - - .post-template .post { - padding-bottom: 0; - } - - .post-template .post-header { - padding: 30px 0; - } - - .post-meta { - font-size: 1.3rem; - } - - .post-footer { - padding: 4rem 0; - text-align: center; - } - - .post-footer .author { - margin: 0 0 2rem 0; - padding: 0 0 1.6rem 0; - border-bottom: #EBF2F6 1px dashed; - } - - .post-footer .share { - position: static; - width: auto; - } - - .post-footer .share a { - margin: 1.4rem 0.8rem 0 0.8rem; - } - - .older-posts, - .newer-posts { - position: static; - margin: 10px 0; - } - - .page-number { - display: block; - } - - .site-footer { - /*margin-top: 0.8rem;*/ - font-size: 1.1rem; - } - - } - - /* ========================================================================== + +@media only screen and (max-width: 500px) { + .fixed-nav { + display: none; + } + .post-holder { + padding-top: 20px; + } + #blog-logo img { + max-height: 80px; + } + + .inner, + .pagination { + width: auto; + margin-left: 16px; + margin-right: 16px; + } + + .post { + width: auto; + margin-left: 16px; + margin-right: 16px; + font-size: 0.8em; + line-height: 1.6em; + } + + #site-head { + padding: 10% 0; + height: 65%; + } + #header-arrow { + display: none; + } + a.btn { + margin-top: 10px; + } + + .blog-title { + font-size: 3rem; + } + + .blog-description { + font-size: 2.2rem; + } + + h1, + h2 { + font-size: 3rem; + line-height: 1.1em; + letter-spacing: -1px; + } + + h3 { + font-size: 2.8rem; + } + + h4 { + font-size: 2.3rem; + } + + .post-template .post { + padding-bottom: 0; + } + + .post-template .post-header { + padding: 30px 0; + } + + .post-meta { + font-size: 1.3rem; + } + + .post-footer { + padding: 4rem 0; + text-align: center; + } + + .post-footer .author { + margin: 0 0 2rem 0; + padding: 0 0 1.6rem 0; + border-bottom: #ebf2f6 1px dashed; + } + + .post-footer .share { + position: static; + width: auto; + } + + .post-footer .share a { + margin: 1.4rem 0.8rem 0 0.8rem; + } + + .older-posts, + .newer-posts { + position: static; + margin: 10px 0; + } + + .page-number { + display: block; + } + + .site-footer { + /*margin-top: 0.8rem;*/ + font-size: 1.1rem; + } +} + +/* ========================================================================== End of file. Media queries should be the last thing here. Do not add stuff below this point, or it will probably fuck everything up. ========================================================================== */ -
\ No newline at end of file diff --git a/static/js/icons.js b/static/js/icons.js index dc2aa17..4ae4a07 100755 --- a/static/js/icons.js +++ b/static/js/icons.js @@ -1 +1,506 @@ -var icons = ["fa-wheelchair", "fa-rub", "fa-ruble", "(alias)", "fa-rouble", "(alias)", "fa-pagelines", "fa-stack-exchange", "fa-arrow-circle-o-right", "fa-arrow-circle-o-left", "fa-caret-square-o-left", "fa-toggle-left", "(alias)", "fa-dot-circle-o", "fa-wheelchair", "fa-vimeo-square", "fa-try", "fa-turkish-lira", "(alias)", "fa-plus-square-o", "fa-adjust", "fa-anchor", "fa-archive", "fa-arrows", "fa-arrows-h", "fa-arrows-v", "fa-asterisk", "fa-ban", "fa-bar-chart-o", "fa-barcode", "fa-bars", "fa-beer", "fa-bell", "fa-bell-o", "fa-bolt", "fa-book", "fa-bookmark", "fa-bookmark-o", "fa-briefcase", "fa-bug", "fa-building-o", "fa-bullhorn", "fa-bullseye", "fa-calendar", "fa-calendar-o", "fa-camera", "fa-camera-retro", "fa-caret-square-o-down", "fa-caret-square-o-left", "fa-caret-square-o-right", "fa-caret-square-o-up", "fa-certificate", "fa-check", "fa-check-circle", "fa-check-circle-o", "fa-check-square", "fa-check-square-o", "fa-circle", "fa-circle-o", "fa-clock-o", "fa-cloud", "fa-cloud-download", "fa-cloud-upload", "fa-code", "fa-code-fork", "fa-coffee", "fa-cog", "fa-cogs", "fa-comment", "fa-comment-o", "fa-comments", "fa-comments-o", "fa-compass", "fa-credit-card", "fa-crop", "fa-crosshairs", "fa-cutlery", "fa-dashboard", "(alias)", "fa-desktop", "fa-dot-circle-o", "fa-download", "fa-edit", "(alias)", "fa-ellipsis-h", "fa-ellipsis-v", "fa-envelope", "fa-envelope-o", "fa-eraser", "fa-exchange", "fa-exclamation", "fa-exclamation-circle", "fa-exclamation-triangle", "fa-external-link", "fa-external-link-square", "fa-eye", "fa-eye-slash", "fa-female", "fa-fighter-jet", "fa-film", "fa-filter", "fa-fire", "fa-fire-extinguisher", "fa-flag", "fa-flag-checkered", "fa-flag-o", "fa-flash", "(alias)", "fa-flask", "fa-folder", "fa-folder-o", "fa-folder-open", "fa-folder-open-o", "fa-frown-o", "fa-gamepad", "fa-gavel", "fa-gear", "(alias)", "fa-gears", "(alias)", "fa-gift", "fa-glass", "fa-globe", "fa-group", "(alias)", "fa-hdd-o", "fa-headphones", "fa-heart", "fa-heart-o", "fa-home", "fa-inbox", "fa-info", "fa-info-circle", "fa-key", "fa-keyboard-o", "fa-laptop", "fa-leaf", "fa-legal", "(alias)", "fa-lemon-o", "fa-level-down", "fa-level-up", "fa-lightbulb-o", "fa-location-arrow", "fa-lock", "fa-magic", "fa-magnet", "fa-mail-forward", "(alias)", "fa-mail-reply", "(alias)", "fa-mail-reply-all", "fa-male", "fa-map-marker", "fa-meh-o", "fa-microphone", "fa-microphone-slash", "fa-minus", "fa-minus-circle", "fa-minus-square", "fa-minus-square-o", "fa-mobile", "fa-mobile-phone", "(alias)", "fa-money", "fa-moon-o", "fa-music", "fa-pencil", "fa-pencil-square", "fa-pencil-square-o", "fa-phone", "fa-phone-square", "fa-picture-o", "fa-plane", "fa-plus", "fa-plus-circle", "fa-plus-square", "fa-plus-square-o", "fa-power-off", "fa-print", "fa-puzzle-piece", "fa-qrcode", "fa-question", "fa-question-circle", "fa-quote-left", "fa-quote-right", "fa-random", "fa-refresh", "fa-reply", "fa-reply-all", "fa-retweet", "fa-road", "fa-rocket", "fa-rss", "fa-rss-square", "fa-search", "fa-search-minus", "fa-search-plus", "fa-share", "fa-share-square", "fa-share-square-o", "fa-shield", "fa-shopping-cart", "fa-sign-in", "fa-sign-out", "fa-signal", "fa-sitemap", "fa-smile-o", "fa-sort", "fa-sort-alpha-asc", "fa-sort-alpha-desc", "fa-sort-amount-asc", "fa-sort-amount-desc", "fa-sort-asc", "fa-sort-desc", "fa-sort-down", "(alias)", "fa-sort-numeric-asc", "fa-sort-numeric-desc", "fa-sort-up", "(alias)", "fa-spinner", "fa-square", "fa-square-o", "fa-star", "fa-star-half", "fa-star-half-empty", "(alias)", "fa-star-half-full", "(alias)", "fa-star-half-o", "fa-star-o", "fa-subscript", "fa-suitcase", "fa-sun-o", "fa-superscript", "fa-tablet", "fa-tachometer", "fa-tag", "fa-tags", "fa-tasks", "fa-terminal", "fa-thumb-tack", "fa-thumbs-down", "fa-thumbs-o-down", "fa-thumbs-o-up", "fa-thumbs-up", "fa-ticket", "fa-times", "fa-times-circle", "fa-times-circle-o", "fa-tint", "fa-toggle-down", "(alias)", "fa-toggle-left", "(alias)", "fa-toggle-right", "(alias)", "fa-toggle-up", "(alias)", "fa-trash-o", "fa-trophy", "fa-truck", "fa-umbrella", "fa-unlock", "fa-unlock-alt", "fa-unsorted", "(alias)", "fa-upload", "fa-user", "fa-users", "fa-video-camera", "fa-volume-down", "fa-volume-off", "fa-volume-up", "fa-warning", "(alias)", "fa-wheelchair", "fa-wrench", "fa-check-square", "fa-check-square-o", "fa-circle", "fa-circle-o", "fa-dot-circle-o", "fa-minus-square", "fa-minus-square-o", "fa-plus-square", "fa-plus-square-o", "fa-square", "fa-square-o", "fa-bitcoin", "(alias)", "fa-btc", "fa-cny", "(alias)", "fa-dollar", "(alias)", "fa-eur", "fa-euro", "(alias)", "fa-gbp", "fa-inr", "fa-jpy", "fa-krw", "fa-money", "fa-rmb", "(alias)", "fa-rouble", "(alias)", "fa-rub", "fa-ruble", "(alias)", "fa-rupee", "(alias)", "fa-try", "fa-turkish-lira", "(alias)", "fa-usd", "fa-won", "(alias)", "fa-yen", "(alias)", "fa-align-center", "fa-align-justify", "fa-align-left", "fa-align-right", "fa-bold", "fa-chain", "(alias)", "fa-chain-broken", "fa-clipboard", "fa-columns", "fa-copy", "(alias)", "fa-cut", "(alias)", "fa-dedent", "(alias)", "fa-eraser", "fa-file", "fa-file-o", "fa-file-text", "fa-file-text-o", "fa-files-o", "fa-floppy-o", "fa-font", "fa-indent", "fa-italic", "fa-link", "fa-list", "fa-list-alt", "fa-list-ol", "fa-list-ul", "fa-outdent", "fa-paperclip", "fa-paste", "(alias)", "fa-repeat", "fa-rotate-left", "(alias)", "fa-rotate-right", "(alias)", "fa-save", "(alias)", "fa-scissors", "fa-strikethrough", "fa-table", "fa-text-height", "fa-text-width", "fa-th", "fa-th-large", "fa-th-list", "fa-underline", "fa-undo", "fa-unlink", "(alias)", "fa-angle-double-down", "fa-angle-double-left", "fa-angle-double-right", "fa-angle-double-up", "fa-angle-down", "fa-angle-left", "fa-angle-right", "fa-angle-up", "fa-arrow-circle-down", "fa-arrow-circle-left", "fa-arrow-circle-o-down", "fa-arrow-circle-o-left", "fa-arrow-circle-o-right", "fa-arrow-circle-o-up", "fa-arrow-circle-right", "fa-arrow-circle-up", "fa-arrow-down", "fa-arrow-left", "fa-arrow-right", "fa-arrow-up", "fa-arrows", "fa-arrows-alt", "fa-arrows-h", "fa-arrows-v", "fa-caret-down", "fa-caret-left", "fa-caret-right", "fa-caret-square-o-down", "fa-caret-square-o-left", "fa-caret-square-o-right", "fa-caret-square-o-up", "fa-caret-up", "fa-chevron-circle-down", "fa-chevron-circle-left", "fa-chevron-circle-right", "fa-chevron-circle-up", "fa-chevron-down", "fa-chevron-left", "fa-chevron-right", "fa-chevron-up", "fa-hand-o-down", "fa-hand-o-left", "fa-hand-o-right", "fa-hand-o-up", "fa-long-arrow-down", "fa-long-arrow-left", "fa-long-arrow-right", "fa-long-arrow-up", "fa-toggle-down", "(alias)", "fa-toggle-left", "(alias)", "fa-toggle-right", "(alias)", "fa-toggle-up", "(alias)", "fa-arrows-alt", "fa-backward", "fa-compress", "fa-eject", "fa-expand", "fa-fast-backward", "fa-fast-forward", "fa-forward", "fa-pause", "fa-play", "fa-play-circle", "fa-play-circle-o", "fa-step-backward", "fa-step-forward", "fa-stop", "fa-youtube-play", "fa-adn", "fa-android", "fa-apple", "fa-bitbucket", "fa-bitbucket-square", "fa-bitcoin", "(alias)", "fa-btc", "fa-css3", "fa-dribbble", "fa-dropbox", "fa-facebook", "fa-facebook-square", "fa-flickr", "fa-foursquare", "fa-github", "fa-github-alt", "fa-github-square", "fa-gittip", "fa-google-plus", "fa-google-plus-square", "fa-html5", "fa-instagram", "fa-linkedin", "fa-linkedin-square", "fa-linux", "fa-maxcdn", "fa-pagelines", "fa-pinterest", "fa-pinterest-square", "fa-renren", "fa-skype", "fa-stack-exchange", "fa-stack-overflow", "fa-trello", "fa-tumblr", "fa-tumblr-square", "fa-twitter", "fa-twitter-square", "fa-vimeo-square", "fa-vk", "fa-weibo", "fa-windows", "fa-xing", "fa-xing-square", "fa-youtube", "fa-youtube-play", "fa-youtube-square", "fa-ambulance", "fa-h-square", "fa-hospital-o", "fa-medkit", "fa-plus-square", "fa-stethoscope", "fa-user-md", "fa-wheelchair"];
\ No newline at end of file +var icons = [ + "fa-wheelchair", + "fa-rub", + "fa-ruble", + "(alias)", + "fa-rouble", + "(alias)", + "fa-pagelines", + "fa-stack-exchange", + "fa-arrow-circle-o-right", + "fa-arrow-circle-o-left", + "fa-caret-square-o-left", + "fa-toggle-left", + "(alias)", + "fa-dot-circle-o", + "fa-wheelchair", + "fa-vimeo-square", + "fa-try", + "fa-turkish-lira", + "(alias)", + "fa-plus-square-o", + "fa-adjust", + "fa-anchor", + "fa-archive", + "fa-arrows", + "fa-arrows-h", + "fa-arrows-v", + "fa-asterisk", + "fa-ban", + "fa-bar-chart-o", + "fa-barcode", + "fa-bars", + "fa-beer", + "fa-bell", + "fa-bell-o", + "fa-bolt", + "fa-book", + "fa-bookmark", + "fa-bookmark-o", + "fa-briefcase", + "fa-bug", + "fa-building-o", + "fa-bullhorn", + "fa-bullseye", + "fa-calendar", + "fa-calendar-o", + "fa-camera", + "fa-camera-retro", + "fa-caret-square-o-down", + "fa-caret-square-o-left", + "fa-caret-square-o-right", + "fa-caret-square-o-up", + "fa-certificate", + "fa-check", + "fa-check-circle", + "fa-check-circle-o", + "fa-check-square", + "fa-check-square-o", + "fa-circle", + "fa-circle-o", + "fa-clock-o", + "fa-cloud", + "fa-cloud-download", + "fa-cloud-upload", + "fa-code", + "fa-code-fork", + "fa-coffee", + "fa-cog", + "fa-cogs", + "fa-comment", + "fa-comment-o", + "fa-comments", + "fa-comments-o", + "fa-compass", + "fa-credit-card", + "fa-crop", + "fa-crosshairs", + "fa-cutlery", + "fa-dashboard", + "(alias)", + "fa-desktop", + "fa-dot-circle-o", + "fa-download", + "fa-edit", + "(alias)", + "fa-ellipsis-h", + "fa-ellipsis-v", + "fa-envelope", + "fa-envelope-o", + "fa-eraser", + "fa-exchange", + "fa-exclamation", + "fa-exclamation-circle", + "fa-exclamation-triangle", + "fa-external-link", + "fa-external-link-square", + "fa-eye", + "fa-eye-slash", + "fa-female", + "fa-fighter-jet", + "fa-film", + "fa-filter", + "fa-fire", + "fa-fire-extinguisher", + "fa-flag", + "fa-flag-checkered", + "fa-flag-o", + "fa-flash", + "(alias)", + "fa-flask", + "fa-folder", + "fa-folder-o", + "fa-folder-open", + "fa-folder-open-o", + "fa-frown-o", + "fa-gamepad", + "fa-gavel", + "fa-gear", + "(alias)", + "fa-gears", + "(alias)", + "fa-gift", + "fa-glass", + "fa-globe", + "fa-group", + "(alias)", + "fa-hdd-o", + "fa-headphones", + "fa-heart", + "fa-heart-o", + "fa-home", + "fa-inbox", + "fa-info", + "fa-info-circle", + "fa-key", + "fa-keyboard-o", + "fa-laptop", + "fa-leaf", + "fa-legal", + "(alias)", + "fa-lemon-o", + "fa-level-down", + "fa-level-up", + "fa-lightbulb-o", + "fa-location-arrow", + "fa-lock", + "fa-magic", + "fa-magnet", + "fa-mail-forward", + "(alias)", + "fa-mail-reply", + "(alias)", + "fa-mail-reply-all", + "fa-male", + "fa-map-marker", + "fa-meh-o", + "fa-microphone", + "fa-microphone-slash", + "fa-minus", + "fa-minus-circle", + "fa-minus-square", + "fa-minus-square-o", + "fa-mobile", + "fa-mobile-phone", + "(alias)", + "fa-money", + "fa-moon-o", + "fa-music", + "fa-pencil", + "fa-pencil-square", + "fa-pencil-square-o", + "fa-phone", + "fa-phone-square", + "fa-picture-o", + "fa-plane", + "fa-plus", + "fa-plus-circle", + "fa-plus-square", + "fa-plus-square-o", + "fa-power-off", + "fa-print", + "fa-puzzle-piece", + "fa-qrcode", + "fa-question", + "fa-question-circle", + "fa-quote-left", + "fa-quote-right", + "fa-random", + "fa-refresh", + "fa-reply", + "fa-reply-all", + "fa-retweet", + "fa-road", + "fa-rocket", + "fa-rss", + "fa-rss-square", + "fa-search", + "fa-search-minus", + "fa-search-plus", + "fa-share", + "fa-share-square", + "fa-share-square-o", + "fa-shield", + "fa-shopping-cart", + "fa-sign-in", + "fa-sign-out", + "fa-signal", + "fa-sitemap", + "fa-smile-o", + "fa-sort", + "fa-sort-alpha-asc", + "fa-sort-alpha-desc", + "fa-sort-amount-asc", + "fa-sort-amount-desc", + "fa-sort-asc", + "fa-sort-desc", + "fa-sort-down", + "(alias)", + "fa-sort-numeric-asc", + "fa-sort-numeric-desc", + "fa-sort-up", + "(alias)", + "fa-spinner", + "fa-square", + "fa-square-o", + "fa-star", + "fa-star-half", + "fa-star-half-empty", + "(alias)", + "fa-star-half-full", + "(alias)", + "fa-star-half-o", + "fa-star-o", + "fa-subscript", + "fa-suitcase", + "fa-sun-o", + "fa-superscript", + "fa-tablet", + "fa-tachometer", + "fa-tag", + "fa-tags", + "fa-tasks", + "fa-terminal", + "fa-thumb-tack", + "fa-thumbs-down", + "fa-thumbs-o-down", + "fa-thumbs-o-up", + "fa-thumbs-up", + "fa-ticket", + "fa-times", + "fa-times-circle", + "fa-times-circle-o", + "fa-tint", + "fa-toggle-down", + "(alias)", + "fa-toggle-left", + "(alias)", + "fa-toggle-right", + "(alias)", + "fa-toggle-up", + "(alias)", + "fa-trash-o", + "fa-trophy", + "fa-truck", + "fa-umbrella", + "fa-unlock", + "fa-unlock-alt", + "fa-unsorted", + "(alias)", + "fa-upload", + "fa-user", + "fa-users", + "fa-video-camera", + "fa-volume-down", + "fa-volume-off", + "fa-volume-up", + "fa-warning", + "(alias)", + "fa-wheelchair", + "fa-wrench", + "fa-check-square", + "fa-check-square-o", + "fa-circle", + "fa-circle-o", + "fa-dot-circle-o", + "fa-minus-square", + "fa-minus-square-o", + "fa-plus-square", + "fa-plus-square-o", + "fa-square", + "fa-square-o", + "fa-bitcoin", + "(alias)", + "fa-btc", + "fa-cny", + "(alias)", + "fa-dollar", + "(alias)", + "fa-eur", + "fa-euro", + "(alias)", + "fa-gbp", + "fa-inr", + "fa-jpy", + "fa-krw", + "fa-money", + "fa-rmb", + "(alias)", + "fa-rouble", + "(alias)", + "fa-rub", + "fa-ruble", + "(alias)", + "fa-rupee", + "(alias)", + "fa-try", + "fa-turkish-lira", + "(alias)", + "fa-usd", + "fa-won", + "(alias)", + "fa-yen", + "(alias)", + "fa-align-center", + "fa-align-justify", + "fa-align-left", + "fa-align-right", + "fa-bold", + "fa-chain", + "(alias)", + "fa-chain-broken", + "fa-clipboard", + "fa-columns", + "fa-copy", + "(alias)", + "fa-cut", + "(alias)", + "fa-dedent", + "(alias)", + "fa-eraser", + "fa-file", + "fa-file-o", + "fa-file-text", + "fa-file-text-o", + "fa-files-o", + "fa-floppy-o", + "fa-font", + "fa-indent", + "fa-italic", + "fa-link", + "fa-list", + "fa-list-alt", + "fa-list-ol", + "fa-list-ul", + "fa-outdent", + "fa-paperclip", + "fa-paste", + "(alias)", + "fa-repeat", + "fa-rotate-left", + "(alias)", + "fa-rotate-right", + "(alias)", + "fa-save", + "(alias)", + "fa-scissors", + "fa-strikethrough", + "fa-table", + "fa-text-height", + "fa-text-width", + "fa-th", + "fa-th-large", + "fa-th-list", + "fa-underline", + "fa-undo", + "fa-unlink", + "(alias)", + "fa-angle-double-down", + "fa-angle-double-left", + "fa-angle-double-right", + "fa-angle-double-up", + "fa-angle-down", + "fa-angle-left", + "fa-angle-right", + "fa-angle-up", + "fa-arrow-circle-down", + "fa-arrow-circle-left", + "fa-arrow-circle-o-down", + "fa-arrow-circle-o-left", + "fa-arrow-circle-o-right", + "fa-arrow-circle-o-up", + "fa-arrow-circle-right", + "fa-arrow-circle-up", + "fa-arrow-down", + "fa-arrow-left", + "fa-arrow-right", + "fa-arrow-up", + "fa-arrows", + "fa-arrows-alt", + "fa-arrows-h", + "fa-arrows-v", + "fa-caret-down", + "fa-caret-left", + "fa-caret-right", + "fa-caret-square-o-down", + "fa-caret-square-o-left", + "fa-caret-square-o-right", + "fa-caret-square-o-up", + "fa-caret-up", + "fa-chevron-circle-down", + "fa-chevron-circle-left", + "fa-chevron-circle-right", + "fa-chevron-circle-up", + "fa-chevron-down", + "fa-chevron-left", + "fa-chevron-right", + "fa-chevron-up", + "fa-hand-o-down", + "fa-hand-o-left", + "fa-hand-o-right", + "fa-hand-o-up", + "fa-long-arrow-down", + "fa-long-arrow-left", + "fa-long-arrow-right", + "fa-long-arrow-up", + "fa-toggle-down", + "(alias)", + "fa-toggle-left", + "(alias)", + "fa-toggle-right", + "(alias)", + "fa-toggle-up", + "(alias)", + "fa-arrows-alt", + "fa-backward", + "fa-compress", + "fa-eject", + "fa-expand", + "fa-fast-backward", + "fa-fast-forward", + "fa-forward", + "fa-pause", + "fa-play", + "fa-play-circle", + "fa-play-circle-o", + "fa-step-backward", + "fa-step-forward", + "fa-stop", + "fa-youtube-play", + "fa-adn", + "fa-android", + "fa-apple", + "fa-bitbucket", + "fa-bitbucket-square", + "fa-bitcoin", + "(alias)", + "fa-btc", + "fa-css3", + "fa-dribbble", + "fa-dropbox", + "fa-facebook", + "fa-facebook-square", + "fa-flickr", + "fa-foursquare", + "fa-github", + "fa-github-alt", + "fa-github-square", + "fa-gittip", + "fa-google-plus", + "fa-google-plus-square", + "fa-html5", + "fa-instagram", + "fa-linkedin", + "fa-linkedin-square", + "fa-linux", + "fa-maxcdn", + "fa-pagelines", + "fa-pinterest", + "fa-pinterest-square", + "fa-renren", + "fa-skype", + "fa-stack-exchange", + "fa-stack-overflow", + "fa-trello", + "fa-tumblr", + "fa-tumblr-square", + "fa-twitter", + "fa-twitter-square", + "fa-vimeo-square", + "fa-vk", + "fa-weibo", + "fa-windows", + "fa-xing", + "fa-xing-square", + "fa-youtube", + "fa-youtube-play", + "fa-youtube-square", + "fa-ambulance", + "fa-h-square", + "fa-hospital-o", + "fa-medkit", + "fa-plus-square", + "fa-stethoscope", + "fa-user-md", + "fa-wheelchair", +]; diff --git a/static/js/index.js b/static/js/index.js index ac7641e..820d3c1 100644 --- a/static/js/index.js +++ b/static/js/index.js @@ -2,121 +2,133 @@ * Main JS file for GhostScroll behaviours */ -var $post = $('.post'); -var $first = $('.post.first'); -var $last = $('.post.last'); -var $fnav = $('.fixed-nav'); -var $postholder = $('.post-holder'); -var $postafter = $('.post-after'); -var $sitehead = $('#site-head'); +var $post = $(".post"); +var $first = $(".post.first"); +var $last = $(".post.last"); +var $fnav = $(".fixed-nav"); +var $postholder = $(".post-holder"); +var $postafter = $(".post-after"); +var $sitehead = $("#site-head"); /* Globals jQuery, document */ (function ($) { - "use strict"; - function srcTo (el) { - $('html, body').animate({ - scrollTop: el.offset().top - }, 1000); - } - function srcToAnchorWithTitle (str) { - var $el = $('#' + str); - if ($el.length) { - srcTo($el); - } - } - $(document).ready(function(){ - - $postholder.each(function (e) { - if(e % 2 != 0) - $(this).addClass("odd"); - }); - - $postafter.each(function (e) { - var bg = $(this).parent().css('background-color') - $(this).css('border-top-color', bg); - - if (e % 2 == 0) { - $(this).addClass("even"); - } - }); - - $('a.btn.site-menu').click(function (e) { - srcToAnchorWithTitle($(e.target).data('title-anchor')); - }); - $('#header-arrow').click(function () { - srcTo($first); - }); - - $('.post-title').each(function () { - var t = $(this).text(); - var index = $(this).parents('.post-holder').index(); - $fnav.append("<a class='fn-item' item_index='"+index+"'>"+t+"</a>") - $('.fn-item').click(function () { - var i = $(this).attr('item_index'); - var s = $(".post[item_index='"+i+"']"); - - $('html, body').animate({ - scrollTop: s.offset().top - }, 400); - - }); - }); - - $('.post.last').next('.post-after').hide(); - if($sitehead.length) { - $(window).scroll( function () { - var w = $(window).scrollTop(); - var g = $sitehead.offset().top; - var h = $sitehead.offset().top + $sitehead.height()-100; - - if(w >= g && w<=h) { - $('.fixed-nav').fadeOut('fast'); - } else if($(window).width()>500) { - $('.fixed-nav').fadeIn('fast'); - } - - $post.each(function () { - var f = $(this).offset().top; - var b = $(this).offset().top + $(this).height(); - var t = $(this).parent('.post-holder').index(); - var i = $(".fn-item[item_index='"+t+"']"); - var a = $(this).parent('.post-holder').prev('.post-holder').find('.post-after'); - - $(this).attr('item_index', t); - - if(w >= f && w<=b) { - i.addClass('active'); - a.fadeOut('slow'); - } else { - i.removeClass('active'); - a.fadeIn('slow'); - } - }); - }); - } - - $('ul li').before('<span class="bult fa fa-asterisk icon-asterisk"></span>'); - $('blockquote p').prepend('<span class="quo icon-quote-left"></span>'); - $('blockquote p').append('<span class="quo icon-quote-right"></span>'); - }); - - $post.each(function () { - var postText = $(this).html(); - var fa = []; - for(var i=0; i < icons.length; i++) { - fa[i] = {}; - fa[i].str = "@"+ icons[i]+ "@"; - fa[i].icon = icons[i]; - fa[i].int = postText.search(fa[i].str); - - if(fa[i].int > -1 ) { - fa[i].count = postText.match(new RegExp(fa[i].str,"g")).length; - for(var j=0; j < fa[i].count; j++) { - $(this).html($(this).html().replace(fa[i].str, "<i class='fa "+fa[i].icon+"'></i>")) - } - } - } - }); - - -}(jQuery)); + "use strict"; + function srcTo(el) { + $("html, body").animate( + { + scrollTop: el.offset().top, + }, + 1000 + ); + } + function srcToAnchorWithTitle(str) { + var $el = $("#" + str); + if ($el.length) { + srcTo($el); + } + } + $(document).ready(function () { + $postholder.each(function (e) { + if (e % 2 != 0) $(this).addClass("odd"); + }); + + $postafter.each(function (e) { + var bg = $(this).parent().css("background-color"); + $(this).css("border-top-color", bg); + + if (e % 2 == 0) { + $(this).addClass("even"); + } + }); + + $("a.btn.site-menu").click(function (e) { + srcToAnchorWithTitle($(e.target).data("title-anchor")); + }); + $("#header-arrow").click(function () { + srcTo($first); + }); + + $(".post-title").each(function () { + var t = $(this).text(); + var index = $(this).parents(".post-holder").index(); + $fnav.append( + "<a class='fn-item' item_index='" + index + "'>" + t + "</a>" + ); + $(".fn-item").click(function () { + var i = $(this).attr("item_index"); + var s = $(".post[item_index='" + i + "']"); + + $("html, body").animate( + { + scrollTop: s.offset().top, + }, + 400 + ); + }); + }); + + $(".post.last").next(".post-after").hide(); + if ($sitehead.length) { + $(window).scroll(function () { + var w = $(window).scrollTop(); + var g = $sitehead.offset().top; + var h = $sitehead.offset().top + $sitehead.height() - 100; + + if (w >= g && w <= h) { + $(".fixed-nav").fadeOut("fast"); + } else if ($(window).width() > 500) { + $(".fixed-nav").fadeIn("fast"); + } + + $post.each(function () { + var f = $(this).offset().top; + var b = $(this).offset().top + $(this).height(); + var t = $(this).parent(".post-holder").index(); + var i = $(".fn-item[item_index='" + t + "']"); + var a = $(this) + .parent(".post-holder") + .prev(".post-holder") + .find(".post-after"); + + $(this).attr("item_index", t); + + if (w >= f && w <= b) { + i.addClass("active"); + a.fadeOut("slow"); + } else { + i.removeClass("active"); + a.fadeIn("slow"); + } + }); + }); + } + + $("ul li").before( + '<span class="bult fa fa-asterisk icon-asterisk"></span>' + ); + $("blockquote p").prepend('<span class="quo icon-quote-left"></span>'); + $("blockquote p").append('<span class="quo icon-quote-right"></span>'); + }); + + $post.each(function () { + var postText = $(this).html(); + var fa = []; + for (var i = 0; i < icons.length; i++) { + fa[i] = {}; + fa[i].str = "@" + icons[i] + "@"; + fa[i].icon = icons[i]; + fa[i].int = postText.search(fa[i].str); + + if (fa[i].int > -1) { + fa[i].count = postText.match(new RegExp(fa[i].str, "g")).length; + for (var j = 0; j < fa[i].count; j++) { + $(this).html( + $(this) + .html() + .replace(fa[i].str, "<i class='fa " + fa[i].icon + "'></i>") + ); + } + } + } + }); +})(jQuery); |