135 changed files with 6619 additions and 2 deletions
@ -0,0 +1,73 @@ |
|||
# Changelog |
|||
|
|||
This changelog mainly documented some major changes, updates or fixes (with credits) for reference purposes. It by no means covers all contributors. Nonetheless, to the bottom of my heart, I truly appreciate all of your time and contributions. |
|||
|
|||
__2018-11__ |
|||
|
|||
* Per PR [#56](https://github.com/htr3n/hyde-hyde/commit/5ed13e17400bbc09a342b60fd50cd9fe3e6f1525), Gravatar pics can be used exclusively to `.Site.Params.authorimage` via the parameter `.Site.Params.social.gravatar` |
|||
|
|||
* ```toml |
|||
[params.social] |
|||
gravatar = "your.email@domain.com" |
|||
``` |
|||
|
|||
* Fix Hugo demo (issue [#53](https://github.com/htr3n/hyde-hyde/issues/53)) |
|||
|
|||
* Fix mobile header (PR [#51](https://github.com/htr3n/hyde-hyde/pull/51): credits to [@gamingrobot](https://github.com/gamingrobot)) |
|||
|
|||
* Add Utterances comments (PR [#50](https://github.com/htr3n/hyde-hyde/pull/50): credits to [@gamingrobot](https://github.com/gamingrobot)) |
|||
|
|||
__2018-10__ |
|||
|
|||
* Enable `hyde-hyde` to work directly with SCSSs instead of generated CSSs (PR [#45](https://github.com/htr3n/hyde-hyde/pull/45): credits to [@jd4no](https://github.com/jd4no)) |
|||
* Patch potential vulnerabilities of `target="_blank"` (PR [#48](https://github.com/htr3n/hyde-hyde/pull/48): credits to [@gfrcsd](https://github.com/gfrcsd)) |
|||
|
|||
__2018-09__ |
|||
|
|||
* Add _Table of Contents_ |
|||
* Configure using `.Site.Params.toc` with two possible value: "hugo" (using Hugo `{{ .TableOfContents }}`, and "tocbot" (using [Tocbot](https://tscanlin.github.io/tocbot/)), remove `.Site.Params.toc` to disable TOC |
|||
* Change [_layouts/partials/header/styles.html_](https://github.com/htr3n/hyde-hyde/blob/master/layouts/partials/header/styles.html) to check `.Site.Params.toc` and add the corresponding styles |
|||
* Change [_layouts/partials/page-single/content.html_](https://github.com/htr3n/hyde-hyde/blob/master/layouts/partials/page-single/content.html ) to add TOC per `.Site.Params.toc` |
|||
* Add styles [_static-src/scss/hugo-toc.scss_](https://github.com/htr3n/hyde-hyde/blob/v2.0.2/static-src/scss/hugo-toc.scss) and [_static-src/scss/tocbot.scss_](https://github.com/htr3n/hyde-hyde/blob/v2.0.2/static-src/scss/tocbot.scss) that generate `hugo-toc.css` and `tocbot.css`, respectively |
|||
* Tocbot can be configured in [_layouts/partials/page-single/footer.html_](layouts/partials/page-single/footer.html) with options as described in [its documentation](https://tscanlin.github.io/tocbot/#api) |
|||
|
|||
__2018-07__ |
|||
|
|||
* Revise the shortcode ['fig.html'](https://github.com/htr3n/hyde-hyde/blob/master/layouts/shortcodes/fig.html) |
|||
* Rename `header/font-awesome.html` to `header/font-awesome-css.html` and adds [_footer/font-awesome-js.html_](https://github.com/htr3n/hyde-hyde/blob/master/layouts/partials/footer/font-awesome-js.html), uses Font-Awesome 5 deferred JavaScript loading to reduce CSS rendering blocking |
|||
* Refactor and consolidate all responsive breakpoints and creates a new style [_\_responsive.scss_](https://github.com/htr3n/hyde-hyde/blob/v2.0.1/static-src/scss/hyde-hyde/_responsive.scss) |
|||
* Refactor portfolio's projects into [_\_project.scss_](https://github.com/htr3n/hyde-hyde/blob/v2.0.1/static-src/scss/hyde-hyde/_project.scss) |
|||
* Refactor styles for a list of posts into [_\_list.scss_](https://github.com/htr3n/hyde-hyde/blob/v2.0.1/static-src/scss/hyde-hyde/_list.scss) |
|||
* Refactor misc. styles into [_\_misc.scss_](https://github.com/htr3n/hyde-hyde/blob/v2.0.1/static-src/scss/hyde-hyde/_misc.scss) |
|||
* Remove [_\_customised.scss_](https://github.com/htr3n/hyde-hyde/blob/v2.0.0/static-src/scss/hyde-hyde/_customised.scss) |
|||
|
|||
__Version 2.0__ |
|||
|
|||
* The main styles are refactored and redeveloped using SCSS (see [_static-src/scss_](https://github.com/htr3n/hyde-hyde/tree/v2.0.0/static-src/scss)) |
|||
and we no longer need `poole.css` and `hyde.css` because `hyde-hyde.scss` already incorporates relevant elements |
|||
* `Hyde-hyde` can be customised by changing SCSS styles in [_static-src/scss/hyde-hyde_](https://github.com/htr3n/hyde-hyde/tree/v2.0.0/static-src/scss/hyde-hyde) and layouts in [_layouts_](https://github.com/htr3n/hyde-hyde/tree/v2.0.0/layouts) |
|||
* To generate `hyde-hyde.css`, please use any SCSS compiler to compile the main file `hyde-hyde.scss` |
|||
* Restructure/modularise further the layouts (see [_layouts_](https://github.com/htr3n/hyde-hyde/tree/v2.0.0/layouts)) |
|||
* Add '[_Portfolio_](https://github.com/htr3n/hyde-hyde/tree/v2.0.0/layouts/portfolio)' page inspired by Xiaoying Riley ([@3rdwave_themes](https://twitter.com/3rdwave_themes)) [Developer-Theme](https://github.com/xriley/developer-theme) |
|||
* Change the main body font to use system fonts (see [_\_variables.scss_](https://github.com/htr3n/hyde-hyde/tree/v2.0.0/static-src/scss/hyde-hyde/_variables.scss)) |
|||
* In case you prefer Web fonts, just include the template "[web-fonts.html](https://github.com/htr3n/hyde-hyde/tree/v2.0.0/layouts/partials/header/web-fonts.html)" to "[header.html](https://github.com/htr3n/hyde-hyde/tree/v2.0.0/layouts/partials/header.html)" |
|||
* Switch to main fixed width font [Source Code Pro](https://fonts.google.com/specimen/Source+Code+Pro) |
|||
* Add OpenGraph and TwitterCard templates (for SEO) |
|||
* Add '_Related Articles_' (see [_layouts/partials/post-related.html_](https://github.com/htr3n/hyde-hyde/tree/v2.0.0/layouts/partials/post-related.html)) |
|||
* Add page navigation _NEXT / PREVIOUS_ |
|||
* Switch datetime format to `"Jan 02 '06"` in the list of posts (see [_layouts/partials/post-list.html_](https://github.com/htr3n/hyde-hyde/tree/v2.0.0/layouts/partials/post-list.html)) to save some space |
|||
* Change styles for links, tags, text |
|||
* Add some handy shortcodes for `<kbd></kbd>` and `<blockquote></blockquote>` |
|||
* The License under '_Some Rights Reversed_' in the sidebar is switched from [Creative Commons Attribution 4.0 International License](http://creativecommons.org/licenses/by/4.0/) to [Creative Commons Attribution-ShareAlike 4.0 International License](http://creativecommons.org/licenses/by-sa/4.0/). |
|||
|
|||
__Version 1.0__ |
|||
|
|||
* Color tones and layouts are inspired by [Nate Finch's blog](https://npf.io) |
|||
* Restructure/modularise the layouts (see [`layouts/_default/baseof.html`](https://github.com/htr3n/hyde-hyde/tree/v1.0.0/layouts/_default/baseof.html), [`layouts/_default/single.html`](https://github.com/htr3n/hyde-hyde/tree/v1.0.0/layouts/_default/single.html), [`layouts/_default/list.html`](https://github.com/htr3n/hyde-hyde/tree/v1.0.0/layouts/_default/list.html) and [`layouts/partials`](https://github.com/htr3n/hyde-hyde/tree/v1.0.0/layouts/partials/)) |
|||
* Use [highlight.js](https://highlightjs.org) for code highlighting |
|||
* Use [Font-Awesome 5](https://fontawesome.com)'s icons |
|||
* Use main font [Fira-Sans](https://fonts.google.com/specimen/Fira+Sans) + fixed width font [Roboto Mono](https://fonts.google.com/specimen/Roboto+Mono) |
|||
* Add [GraphComment](https://graphcomment.com) for replacing the built-in [Disqus](https://disqus.com) |
|||
* Fork from [Hyde](https://github.com/spf13/hyde) |
|||
* Refactor `basedof.html` and corresponding pages `index.html`, `single.html`, `list.html` |
|||
- define blocks `content` and `footer` that will be fulfilled by each different type of layout. |
|||
@ -0,0 +1,9 @@ |
|||
# Released under MIT License |
|||
|
|||
Copyright (c) 2018 Huy Tran. |
|||
|
|||
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: |
|||
|
|||
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. |
|||
|
|||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. |
|||
@ -1,3 +1,202 @@ |
|||
# hyde-decker |
|||
[](https://github.com/htr3n/hyde-hyde/blob/master/LICENSE.md)      |
|||
|
|||
Fork of the Hugo theme hyde-hyde that introduces some necessary cleanup and changes. |
|||
# Hyde-hyde |
|||
|
|||
__`Hyde-hyde`__ is a [Hugo](https://gohugo.io)'s theme inspired and derived from @spf13's [Hyde](https://github.com/spf13/hyde.git) and [Nate Finch's blog](https://npf.io). |
|||
|
|||
> NOTICE: Maintainers / collaborators seeking: As I'm underwater with my full time job at the moment, I'm actively looking for and welcome any new maintainers or collaborators. If you are interested, comment on [#130](https://github.com/htr3n/hyde-hyde/issues/130) and I can add you to the project. TIA. |
|||
|
|||
## Breaking Changes |
|||
|
|||
Since version 2.0, __`hyde-hyde`__ has been overhauled and, therefore, might cause some disruptions. |
|||
|
|||
* The main styles are refactored and redeveloped using SCSS (see [_assets/scss_](https://github.com/htr3n/hyde-hyde/blob/master/assets/scss)), `poole.css` and `hyde.css` are no longer needed because `hyde-hyde.scss` already incorporates relevant elements (I still keep them there for reference purpose) |
|||
* Per PR [#45 by [@jd4no](https://github.com/jd4no), `hyde-hyde` can use SCSSs directly in the templates instead of the generated CSSs. The generated CSSs and the generated resources are still kept in `hyde-hyde` in order to ensure the demo on [Hugo theme site](https://themes.gohugo.io) working. |
|||
* The layouts have been heavily restructured and modularised further (see [_layouts_](https://github.com/htr3n/hyde-hyde/blob/master/layouts)) |
|||
* Adding '[_Portfolio_](https://github.com/htr3n/hyde-hyde/blob/master/layouts/portfolio)' page inspired by Xiaoying Riley (@3rdwave_themes) [Developer-Theme](https://github.com/xriley/developer-theme) |
|||
* Switching to use system fonts instead of Web fonts (e.g. privacy issues) |
|||
* Experimenting a collapsible menu in mobile mode |
|||
* Adding _Table of Contents_ |
|||
* Configure using `.Site.Params.toc` with two possible value: "hugo" (using Hugo `{{ .TableOfContents }}`, and "tocbot" (using [Tocbot](https://tscanlin.github.io/tocbot/)), remove `.Site.Params.toc` to disable TOC |
|||
* Tocbot can be configured in [layouts/partials/page-single/footer.html](layouts/partials/page-single/footer.html) with options as described in [its documentation](https://tscanlin.github.io/tocbot/#api) |
|||
|
|||
For more details, please refer to [CHANGELOG](https://github.com/htr3n/hyde-hyde/blob/master/CHANGELOG.md). A real site in action can be found [here](https://htr3n.github.io) and its [WIP source](https://github.com/htr3n/htr3n-blog) for reference. |
|||
|
|||
## Usage |
|||
|
|||
### Installation |
|||
|
|||
__`Hyde-hyde`__ can be easily installed as many other Hugo themes: |
|||
|
|||
```sh |
|||
$ cd HUGO_PROJECT |
|||
|
|||
# then either clone hyde-hyde |
|||
$ git clone https://github.com/htr3n/hyde-hyde.git themes/hyde-hyde |
|||
|
|||
# or just add hyde-hyde as a submodule |
|||
$ git submodule add https://github.com/htr3n/hyde-hyde.git themes/hyde-hyde |
|||
``` |
|||
|
|||
After that, choose `hyde-hyde` as the main theme. |
|||
|
|||
* `config.toml` |
|||
|
|||
```toml |
|||
theme = "hyde-hyde" |
|||
``` |
|||
|
|||
* `config.yaml` |
|||
|
|||
```yaml |
|||
theme : "hyde-hyde" |
|||
``` |
|||
|
|||
That's all. You can render your site using `hugo` and see `hyde-hyde` in action. |
|||
|
|||
### Options |
|||
|
|||
__`Hyde-hyde`__ essentially inherits most of Hyde's [options](https://github.com/spf13/hyde#options). There are some extra options though |
|||
|
|||
* `highlightjs = true`: use [highlight.js](https://highlightjs.org) instead of Hugo built-in support for code highlighting |
|||
|
|||
* `highlightjsstyle="highlight-style"`: only when `highlightjs = true`, please choose one of many _highlight.js_'s [styles](https://highlightjs.org/static/demo). |
|||
* Since [v2.0.1](https://github.com/htr3n/hyde-hyde/tree/v2.0.1), highlighting for each page can be fine-tuned in the front matter, for example |
|||
* `highlight = false` (default `true`) |
|||
* `highlightjslanguages = ["swift", "objectivec"]` |
|||
|
|||
* `postNavigation = true|false` (default `true`): Setting to `false` will disable the navigation _Previous Post_/ _Next Post_ |
|||
|
|||
* `relatedPosts = false|true` (default `false`): Setting to `true` allows related posts. Please refer [here](https://gohugo.io/content-management/related) for more details on related contents with Hugo. |
|||
|
|||
* `GraphCommentId = "your-graphcomment-id"`: to use [GraphComment](https://graphcomment.com) instead of the built-in [Disqus](https://disqus.com). This option should be used exclusively with `disqusShortname = "disqus-shortname"`. |
|||
|
|||
* `UtterancesRepo = "owner/repo-name"`: to use [Utterances](https://utteranc.es/) instead of the built-in [Disqus](https://disqus.com). This option should be used exclusively with `disqusShortname = "disqus-shortname"`. |
|||
* `UtterancesIssueTerm = "pathname"` Method for Utterances to match issue's to posts (pathname, url, title, og:title) |
|||
* `UtterancesTheme = "github-light"` Theme for Utterances (github-light, github-dark) |
|||
|
|||
* `Commento = true`: to use [Commento](https://commento.io/) instead of the built-in [Disqus](https://disqus.com). This option should be used exclusively with `disqusShortname = "disqus-shortname"`. |
|||
* `CommentoHost = "your-commento-instance"` [Self-hosted Commento](https://docs.commento.io/installation/self-hosting/) instance. This is not required if you're a [Commento.io](https://commento.io) user. |
|||
|
|||
* `[params.social]`: in this section, you can set many social identities such as Twitter, Facebook, Github, Bitbucket, Gitlab, Instagram, LinkedIn, StackOverflow, Medium, Xing, Keybase. |
|||
|
|||
```toml |
|||
[params.social] |
|||
twitter = "htr3n" |
|||
keybase = "htr3n" |
|||
github = "htr3n" |
|||
... |
|||
``` |
|||
|
|||
* `include_toc = false`: Setting to `false` in FrontMatter will disable too short TOC data as your want. |
|||
|
|||
* Per PR [#56](https://github.com/htr3n/hyde-hyde/commit/5ed13e17400bbc09a342b60fd50cd9fe3e6f1525), Gravatar pics can be used exclusively to `.Site.Params.authorimage` via the parameter `.Site.Params.social.gravatar` |
|||
|
|||
* ```toml |
|||
[params.social] |
|||
gravatar = "your.email@domain.com" |
|||
``` |
|||
|
|||
### Customisations |
|||
|
|||
* Most of the customisable SCSS styles in [_assets/scss/hyde-hyde_](https://github.com/htr3n/hyde-hyde/blob/master/assets/scss/hyde-hyde) and Hugo templates in [_hyde-hyde/layouts_](https://github.com/htr3n/hyde-hyde/blob/master/layouts) are modularised and can be altered/adapted easily. |
|||
|
|||
## Portfolio |
|||
|
|||
Since version 2.0+, I added a portfolio page just in case. If you need it, simply add a menu section '_Portfolio_' in `config.toml` as following. |
|||
|
|||
```toml |
|||
[[menu.main]] |
|||
name = "Portfolio" |
|||
identifier = "portfolio" |
|||
weight = xyz |
|||
url = "/portfolio/" |
|||
``` |
|||
|
|||
In the folder `content` , create a subfolder `portfolio` and use the following folder/content structure as reference. |
|||
|
|||
``` |
|||
$ tree portfolio |
|||
portfolio |
|||
├── _index.md |
|||
├── p1.md |
|||
├── p1.png |
|||
├── p2.md |
|||
├── p2.png |
|||
... |
|||
├── pn.md |
|||
└── pn.png |
|||
``` |
|||
|
|||
As I design the section _portfolio_ to be rendered as _list_, `_index.md` can be used to set the title for your portfolio (you can read more about `_index.md` [here](https://gohugo.io/content-management/organization/#index-pages-index-md)). For instance, when I want to set the title of my portfolio "_Projects_", the front matter of `_index.md` will be: |
|||
|
|||
```markdown |
|||
--- |
|||
title: 'Projects' |
|||
--- |
|||
``` |
|||
The remaining of `_index.md` will be ignored. |
|||
|
|||
For each project, just create a Markdown file with the following parameters in the front matter: |
|||
|
|||
```markdown |
|||
--- |
|||
title: "Project P1's Title" |
|||
description: "A short description" |
|||
date: '2018-01-02' |
|||
link: 'https://project-p1.com' |
|||
screenshot: 'p1.png' |
|||
layout: 'portfolio' |
|||
featured: true |
|||
--- |
|||
Here is a longer summary of the project. You can write as long as you wish. |
|||
``` |
|||
|
|||
> __Note__: |
|||
> |
|||
> * `date` is important to sort the project chronologically |
|||
> * `layout 'portfolio'` is important as you don't want your project's page appear in the list of posts in the main page of your Web site but only in the _Portfolio_ ;) |
|||
> * `featured: true` : when you want to show a project as featured project. It is default to `false`. Note that only one project should be marked `featured: true` , otherwise, the result could be random as [the Hugo template](https://github.com/htr3n/hyde-hyde/blob/master/layouts/partials/portfolio/content.html) will take the first one. |
|||
> * The body of the Markdown file will be the summary of the project. |
|||
|
|||
If you want to adjust the portfolio page to your needs, please have a look at the [main template](https://github.com/htr3n/hyde-hyde/blob/master/layouts/portfolio/list.html), that uses this [partial template](https://github.com/htr3n/hyde-hyde/blob/master/layouts/partials/portfolio/content.html) and [this SCSS style](https://github.com/htr3n/hyde-hyde/blob/master/assets/scss/hyde-hyde/_project.scss). |
|||
|
|||
### Posts in home page |
|||
By default hugo will show in your home page the most populated section. |
|||
This means that if you have more projects than posts, by default your home page will list your projects instead of your posts. |
|||
If you want to change this behaviour you can change the [mainsections](https://gohugo.io/functions/where/#mainsections). |
|||
For example, for the [exampleSite](https://github.com/htr3n/hyde-hyde/tree/master/exampleSite) this is how you should change the `config.toml` file: |
|||
``` |
|||
[params] |
|||
mainSections = ["posts"] |
|||
``` |
|||
|
|||
## Some Screenshots |
|||
|
|||
### Main page |
|||
|
|||
 |
|||
|
|||
### A post |
|||
|
|||
 |
|||
|
|||
### Portfolio |
|||
|
|||
 |
|||
|
|||
|
|||
|
|||
### Mobile Mode with Collapsible Menu |
|||
|
|||
<img src='https://github.com/htr3n/hyde-hyde/raw/master/images/mobile.png' alt='hyde-hyde in mobile mode' width='60%'> |
|||
|
|||
## Author(s) |
|||
|
|||
* Original developed by [Mark Otto](https://github.com/mdo) |
|||
|
|||
* Hugo's `hyde` ported by [Steve Francia](https://github.com/spf13) |
|||
|
|||
## License |
|||
|
|||
Open sourced under the [MIT license](LICENSE.md) |
|||
|
|||
@ -0,0 +1,16 @@ |
|||
--- |
|||
title: "{{ replace .Name "-" " " | title }}" |
|||
description: "" |
|||
date: {{ .Date }} |
|||
|
|||
tags : [] |
|||
categories : [] |
|||
|
|||
layout: post |
|||
type: "post" |
|||
|
|||
draft: true |
|||
|
|||
slug: "" |
|||
|
|||
--- |
|||
@ -0,0 +1,23 @@ |
|||
--- |
|||
title: "{{ replace .Name "-" " " | title }}" |
|||
date: {{ .Date }} |
|||
lastmod: {{ .Date }} |
|||
tags : [ "dev", "hugo", "hyde-hyde"] |
|||
categories : [ "dev" ] |
|||
layout: post |
|||
type: "post" |
|||
highlight: false |
|||
draft: true |
|||
--- |
|||
|
|||
**Insert Lead paragraph here.** |
|||
|
|||
A augue nunc lacus auctor efficitur tempor placerat, dictum volutpat mi vitae viverra porta non sem, himenaeos senectus vivamus potenti cubilia sollicitudin. Curae cursus inceptos tincidunt magna mi nibh ad enim etiam, molestie eu quis primis hendrerit taciti phasellus. Feugiat ultricies dictumst iaculis potenti odio laoreet urna at, ultrices curae leo accumsan proin sem lobortis. |
|||
|
|||
## Heading 2 |
|||
|
|||
Sollicitudin ornare odio blandit aenean enim lacus accumsan elementum vestibulum porta mauris lorem, ullamcorper class fermentum sem hendrerit ante augue penatibus scelerisque felis leo proin,ad nascetur venenatis sodales dignissim viverra suspendisse turpis convallis condimentum sapien. |
|||
|
|||
### Heading 3 |
|||
|
|||
At quisque litora ullamcorper maecenas ultricies ut dignissim luctus curabitur, cras congue eget primis aliquam fringilla nulla dictum posuere, vestibulum sit magnis nisl praesent eros ipsum nunc. Ligula lacus ipsum orci aenean integer pharetra habitasse interdum, porttitor etiam hac feugiat placerat morbi posuere turpis leo, quam at amet gravida commodo fringilla erat. |
|||
@ -0,0 +1,43 @@ |
|||
// Hugo {{ .TableOfContents }} |
|||
$toc-background-color: #eee; |
|||
$toc-font-size: .9rem; |
|||
|
|||
.toc-wrapper { |
|||
font-size: $toc-font-size; |
|||
padding: 0.5em 0.5em 0.5em 0em; |
|||
background: $toc-background-color; |
|||
label { |
|||
background: url(/img/menu-close-dark.svg) no-repeat right center; |
|||
display: block; |
|||
cursor: pointer; |
|||
padding-left: 1em; |
|||
} |
|||
} |
|||
#TableOfContents { |
|||
overflow: hidden; |
|||
margin-top: 0; |
|||
max-height: 100%; |
|||
> ul { |
|||
list-style-type: none; |
|||
padding-left: 0; |
|||
> li ul { |
|||
list-style-type: none; |
|||
padding-left: 1em; |
|||
} |
|||
} |
|||
} |
|||
|
|||
input#tocToggle { |
|||
display: none; |
|||
+ label { |
|||
font-weight: bold; |
|||
} |
|||
&:checked { |
|||
+ label { |
|||
background-image: url(/img/menu-open-dark.svg); |
|||
} |
|||
~ #TableOfContents { |
|||
max-height: 0; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,20 @@ |
|||
@import "hyde-hyde/variables"; |
|||
// poole |
|||
@import "poole/base"; |
|||
@import "poole/layout"; |
|||
@import "poole/posts"; |
|||
// hyde-hyde |
|||
@import 'hyde-hyde/mixins'; |
|||
@import 'hyde-hyde/base'; |
|||
@import 'hyde-hyde/sidebar'; |
|||
@import 'hyde-hyde/list'; |
|||
@import 'hyde-hyde/post'; |
|||
@import 'hyde-hyde/code'; |
|||
@import 'hyde-hyde/gist'; |
|||
@import 'hyde-hyde/navigation'; |
|||
@import 'hyde-hyde/taxonomies'; |
|||
@import 'hyde-hyde/project'; |
|||
@import 'hyde-hyde/responsive'; |
|||
@import 'hyde-hyde/misc'; |
|||
@import 'hyde-hyde/theme'; |
|||
@import 'hyde-hyde/blog'; |
|||
@ -0,0 +1,140 @@ |
|||
* { |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
html { |
|||
-webkit-text-size-adjust: 100%; // for iOS |
|||
box-direction: normal; |
|||
font-family: $root-font-family; |
|||
font-size: $small-device-font-size; |
|||
line-height: $root-line-height; |
|||
font-weight: $root-font-weight; |
|||
} |
|||
|
|||
html, body { |
|||
margin: 12; |
|||
padding: 0; |
|||
} |
|||
|
|||
h1, |
|||
h2, |
|||
h3, |
|||
h4 { |
|||
font-weight: $heading-font-weight; |
|||
} |
|||
|
|||
h1 { |
|||
font-size: $h1-font-size; |
|||
line-height: $h1-line-height; |
|||
margin-bottom: 1rem; |
|||
} |
|||
|
|||
h2 { |
|||
font-size: $h2-font-size; |
|||
margin-bottom: .5rem; |
|||
} |
|||
|
|||
h3 { |
|||
font-size: $h3-font-size; |
|||
} |
|||
|
|||
h4 { |
|||
font-size: $h4-font-size; |
|||
} |
|||
|
|||
h5 { |
|||
font-size: $h5-font-size; |
|||
} |
|||
|
|||
figure { |
|||
max-width: 100%; |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
|
|||
%quotebox { |
|||
padding: .8889rem; |
|||
margin-top: 1rem; |
|||
margin-left: 0px; |
|||
margin-right: 0px; |
|||
//border-radius: 6px; |
|||
border-left: 6px solid; |
|||
border-right: 6px solid transparent; |
|||
border-right-width: 6px; |
|||
border-right-style: solid; |
|||
border-right-color: rgba(0, 0, 0, 0) transparent; |
|||
color: #7a7a7a; |
|||
} |
|||
|
|||
blockquote { |
|||
background-color: #fafafa; |
|||
border-left-color: #e6e6e6; |
|||
@extend %quotebox; |
|||
} |
|||
|
|||
.important { |
|||
background-color: #fbf8e8; |
|||
border-left-color: #fee450; |
|||
@extend %quotebox; |
|||
} |
|||
|
|||
.warning { |
|||
background-color: #f2dbdc; |
|||
border-left-color: #ae272f; |
|||
@extend %quotebox; |
|||
} |
|||
|
|||
kbd { |
|||
font-family: $root-font-family; |
|||
padding: 2px 7px; |
|||
border: 1px solid $gray-4; |
|||
font-size: 0.8em; |
|||
line-height: 1.4; |
|||
background-color: #f3f3f3; |
|||
color: $gray-9; |
|||
box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 2px $white inset; |
|||
border-radius: 3px; |
|||
display: inline-block; |
|||
text-shadow: 0 1px 0 $white; |
|||
white-space: nowrap; |
|||
} |
|||
|
|||
a { |
|||
//border-bottom: 1px dotted; |
|||
color: $link-color; |
|||
text-decoration: none; |
|||
word-wrap: break-word; |
|||
&.sidebar-nav-item { |
|||
&:hover { |
|||
@include link-no-decoration(); |
|||
} |
|||
&:focus { |
|||
@include link-no-decoration(); |
|||
} |
|||
} |
|||
&:focus { |
|||
@include link-hover(); |
|||
&.tag { |
|||
@include link-no-decoration(); |
|||
} |
|||
} |
|||
&:hover { |
|||
@include link-hover(); |
|||
&.tag { |
|||
@include link-no-decoration(); |
|||
} |
|||
} |
|||
&.tag { |
|||
@include link-no-decoration(); |
|||
} |
|||
&.read-more-symbol { |
|||
text-decoration: none; |
|||
@include link-no-decoration(); |
|||
} |
|||
} |
|||
|
|||
|
|||
.content { |
|||
padding-bottom: 2rem; |
|||
padding-top: 2rem; |
|||
} |
|||
@ -0,0 +1,93 @@ |
|||
.blog__content { |
|||
section { |
|||
margin-bottom: 1.765rem; |
|||
} |
|||
} |
|||
|
|||
.blog__featured-post { |
|||
margin: 0 0 1.765rem; |
|||
img { |
|||
margin: 0 0 1rem; |
|||
box-shadow: 1px 1px $gray-2; |
|||
} |
|||
} |
|||
|
|||
.blog__image { |
|||
border: 1px solid $gray-2; |
|||
box-shadow: 1px 1px $gray-2; |
|||
} |
|||
|
|||
.blog__title { |
|||
margin-top: 1.765rem; |
|||
letter-spacing: 1px; |
|||
font-size: $blog__title-font-size; |
|||
} |
|||
|
|||
%subtitle { |
|||
font-style: $blog__subtitle-font-style; |
|||
color: $blog__subtitle-color; |
|||
display: block; |
|||
margin-top: 0.5rem; |
|||
margin: 0 0 1rem; |
|||
} |
|||
|
|||
.blog__subtitle-big { |
|||
@extend %subtitle; |
|||
font-size: $blog__subtitle-font-size-big; |
|||
} |
|||
|
|||
.blog__subtitle-small { |
|||
@extend %subtitle; |
|||
font-size: $blog__subtitle-font-size-small; |
|||
} |
|||
|
|||
.blog__featured-image { |
|||
position: relative; |
|||
} |
|||
|
|||
.blog__summary { |
|||
margin-bottom: 1.765rem; |
|||
text-align: left; |
|||
} |
|||
|
|||
.divider { |
|||
margin-bottom: 3.5rem; |
|||
} |
|||
.row-space { |
|||
margin-bottom: 1rem; |
|||
} |
|||
|
|||
// only needs some pieces from Bootstrap |
|||
%col_extend { |
|||
min-height: 1px; |
|||
padding-left: 15px; |
|||
padding-right: 15px; |
|||
position: relative; |
|||
} |
|||
|
|||
.row { |
|||
margin-left: -15px; |
|||
margin-right: -15px; |
|||
} |
|||
.col-xs-12 { |
|||
width: 100%; |
|||
@extend %col_extend; |
|||
} |
|||
.col-sm-4 { |
|||
@extend %col_extend; |
|||
} |
|||
.col-md-4 { |
|||
@extend %col_extend; |
|||
} |
|||
.col-sm-8 { |
|||
@extend %col_extend; |
|||
} |
|||
.col-md-8 { |
|||
@extend %col_extend; |
|||
} |
|||
|
|||
.img-responsive { |
|||
display: block; |
|||
max-width: 100%; |
|||
height: auto; |
|||
} |
|||
@ -0,0 +1,58 @@ |
|||
pre { |
|||
//border: 1px solid $gray-1; |
|||
//border-radius: 2px; |
|||
tab-size: 2; |
|||
//width: 111%; |
|||
//margin-left: -11%; |
|||
//padding-left: 9%; |
|||
//padding-right: 2%; |
|||
//background: #29292e; |
|||
code { |
|||
white-space: pre-wrap; |
|||
} |
|||
} |
|||
|
|||
%code-font { |
|||
font-family: $code-font-family; |
|||
font-size: $code-font-size; |
|||
} |
|||
|
|||
%code-in-rounded-box { |
|||
border-radius: 4px; |
|||
padding: 2px 4px; |
|||
color: #bf616a; |
|||
background-color: #f9f2f4; |
|||
} |
|||
|
|||
%code-style-codersblock { |
|||
padding: 2px 4px; |
|||
border: 1px dotted #adb5db; |
|||
background-color: $gray-1; |
|||
} |
|||
|
|||
%code-style-npf { |
|||
padding: .1em .1em; |
|||
color: #ab5979; |
|||
border-radius: 3px; |
|||
} |
|||
|
|||
a { |
|||
code { |
|||
color: $link-color; |
|||
} |
|||
} |
|||
|
|||
code { |
|||
@extend %code-font; |
|||
@extend %code-style-npf; |
|||
} |
|||
|
|||
// highlight.js |
|||
.hljs { |
|||
font-family: $code-font-family; |
|||
font-size: $code-fence-font-size; |
|||
line-height: $root-line-height; |
|||
white-space: pre; |
|||
border: 1px solid $gray-3; |
|||
border-radius: 4px; |
|||
} |
|||
@ -0,0 +1,56 @@ |
|||
// https://codersblock.com/blog/customizing-github-gists |
|||
/* |
|||
body .gist { |
|||
.gist-file { |
|||
margin-bottom: 0; |
|||
border-radius: 0; |
|||
} |
|||
.gist-data { |
|||
border-bottom: none; |
|||
border-radius: 0; |
|||
background-color: $gray-3; |
|||
} |
|||
.blob-wrapper { |
|||
border-radius: 0; |
|||
} |
|||
.highlight { |
|||
background-color: transparent; |
|||
font-family: Droid Sans Mono, monospace; |
|||
font-size: 14px; |
|||
td { |
|||
border: none; |
|||
padding: 5px 15px !important; |
|||
line-height: 1; |
|||
font-family: inherit; |
|||
font-size: inherit; |
|||
} |
|||
} |
|||
tr { |
|||
&:first-child td { |
|||
padding-top: 15px !important; |
|||
} |
|||
&:last-child td { |
|||
padding-bottom: 15px !important; |
|||
} |
|||
} |
|||
.blob-num { |
|||
color: #ced4da; |
|||
background-color: #495057; |
|||
pointer-events: none; |
|||
} |
|||
.gist-meta { |
|||
//display: none; |
|||
} |
|||
} |
|||
*/ |
|||
body .gist { |
|||
.gist-data { |
|||
background-color: $gray-0; |
|||
} |
|||
.highlight { |
|||
background-color: transparent; |
|||
} |
|||
td { |
|||
border: none; |
|||
} |
|||
} |
|||
@ -0,0 +1,27 @@ |
|||
// for the list of posts |
|||
|
|||
.section__title { |
|||
font-size: $section__title-font-size; |
|||
} |
|||
|
|||
.post-list__item { |
|||
margin-bottom: 3em; |
|||
} |
|||
|
|||
.item__title--big { |
|||
display: block; |
|||
font-size: $item__title-big-font-size; |
|||
line-height: 1.25; |
|||
} |
|||
|
|||
.item__title--small { |
|||
font-size: 1rem; |
|||
} |
|||
|
|||
.item__date { |
|||
color: $item__date-color; |
|||
display: block; |
|||
font-size: $item__date-font-size; |
|||
margin-bottom: .2rem; |
|||
margin-top: .2rem; |
|||
} |
|||
@ -0,0 +1,25 @@ |
|||
// some misc styles |
|||
.element--center { |
|||
display: block; |
|||
margin-left: auto; |
|||
margin-right: auto; |
|||
} |
|||
|
|||
.menu { |
|||
background-color: #f3f3f3; |
|||
color: #333; |
|||
border-radius: 2px; |
|||
padding: 1px 5px; |
|||
} |
|||
|
|||
.text-center { |
|||
text-align: center; |
|||
} |
|||
|
|||
.pull-right { |
|||
float: right; |
|||
} |
|||
|
|||
.draft { |
|||
color: #999 !important; |
|||
} |
|||
@ -0,0 +1,26 @@ |
|||
@mixin transform($string){ |
|||
-webkit-transform: $string; |
|||
-moz-transform: $string; |
|||
-ms-transform: $string; |
|||
-o-transform: $string; |
|||
} |
|||
@mixin rotate($deg){ |
|||
-webkit-transform: rotate($deg); |
|||
-moz-transform: rotate($deg); |
|||
-ms-transform: rotate($deg); |
|||
-o-transform: rotate($deg); |
|||
} |
|||
|
|||
@mixin link-no-decoration() { |
|||
border-style: none; |
|||
text-decoration: none; |
|||
} |
|||
|
|||
@mixin link-hover() { |
|||
color: $link-hover-color; |
|||
border-bottom: 1px dotted $gray-4; |
|||
text-decoration: none; |
|||
background: transparent; |
|||
background-color: transparent; |
|||
word-wrap: break-word; |
|||
} |
|||
@ -0,0 +1,66 @@ |
|||
ul.pagination { |
|||
list-style: none; |
|||
li.page-item { |
|||
display: inline-block; |
|||
a { |
|||
padding: 0.05em 0.4em; |
|||
} |
|||
&.active { |
|||
a { |
|||
color: $navigation-color; |
|||
border-bottom: 3px solid $navigation-color; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.navigation { |
|||
max-width: calc(100% - 0px); |
|||
margin: 0 auto; |
|||
margin-top: 60px; |
|||
a { |
|||
font-size: 0.8rem; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 15px; |
|||
color: $navigation-color; |
|||
border: 2px solid $navigation-color; |
|||
line-height: 1.25; |
|||
text-transform: uppercase; |
|||
&:hover { |
|||
padding: 14px; |
|||
border-width: 3px; |
|||
} |
|||
&:nth-child(2) { |
|||
margin-top: 10px; |
|||
} |
|||
&:first-child:last-child { |
|||
width: 100%; |
|||
} |
|||
} |
|||
.fa { |
|||
font-size: 0.8rem; |
|||
} |
|||
.navigation-prev { |
|||
text-align: left; |
|||
.fa { |
|||
padding-right: 10px; |
|||
} |
|||
.navigation-tittle { |
|||
padding-left: 4px; |
|||
} |
|||
} |
|||
.navigation-next { |
|||
text-align: right; |
|||
.fa { |
|||
padding-left: 10px; |
|||
} |
|||
.navigation-tittle { |
|||
padding-right: 4px; |
|||
} |
|||
} |
|||
} |
|||
.navigation-single a { |
|||
text-transform: none; |
|||
} |
|||
@ -0,0 +1,42 @@ |
|||
.post__meta { |
|||
font-size: $meta-font-size; |
|||
color: $meta-color; |
|||
font-weight: $meta-font-weight; |
|||
} |
|||
|
|||
.post__category { |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.post__tag { |
|||
background: $tag-background-color; |
|||
border-radius: 2px; |
|||
color: $tag-color; |
|||
font-size: $tag-font-size; |
|||
font-weight: bold; |
|||
padding: 2px 6px; |
|||
} |
|||
|
|||
.post__title { |
|||
background-image: -webkit-linear-gradient(left, $gradient-color-1, $gradient-color-2); /* For Chrome and Safari */ |
|||
background-image: -moz-linear-gradient(left, $gradient-color-1, $gradient-color-2); /* For old Fx (3.6 to 15) */ |
|||
background-image: -ms-linear-gradient(left, $gradient-color-1, $gradient-color-2); /* For pre-releases of IE 10*/ |
|||
background-image: -o-linear-gradient(left, $gradient-color-1, $gradient-color-2); /* For old Opera (11.1 to 12.0) */ |
|||
background-image: linear-gradient(to right, $gradient-color-1, $gradient-color-2); /* Standard syntax; must be last */ |
|||
color:transparent; |
|||
-webkit-background-clip: text; |
|||
background-clip: text; |
|||
} |
|||
|
|||
.post__subtitle { |
|||
display: block; |
|||
font-size: $post__subtitle-font-size; |
|||
font-style: italic; |
|||
padding: 0 0 1rem 0; |
|||
} |
|||
|
|||
#references { |
|||
li { |
|||
font-size: 0.9rem; |
|||
} |
|||
} |
|||
@ -0,0 +1,53 @@ |
|||
@page { |
|||
margin: 1cm !important; |
|||
} |
|||
body { |
|||
font-size: $small-device-font-size; |
|||
line-height: 1.3; |
|||
background: #fff; |
|||
color: #000; |
|||
} |
|||
|
|||
.content { |
|||
margin: 0 auto; |
|||
width: 100%; |
|||
float: none; |
|||
display: initial; |
|||
} |
|||
|
|||
.container { |
|||
width: 100%; |
|||
float: none; |
|||
display: initial; |
|||
padding-left: 1rem; |
|||
padding-right: 1rem; |
|||
margin: 0 auto; |
|||
} |
|||
img { |
|||
max-width: 100%; |
|||
} |
|||
blockquote, |
|||
ul { |
|||
margin: 0; |
|||
} |
|||
|
|||
.sidebar { |
|||
display: none !important; |
|||
} |
|||
|
|||
.navigation { |
|||
display: none !important; |
|||
} |
|||
|
|||
.post__related { |
|||
display: none !important; |
|||
} |
|||
|
|||
.gist-meta { |
|||
display: none !important; |
|||
} |
|||
|
|||
#disqus_thread { |
|||
display: none !important; |
|||
} |
|||
|
|||
@ -0,0 +1,122 @@ |
|||
.portfolio__content { |
|||
section { |
|||
margin-bottom: 1.765rem; |
|||
} |
|||
} |
|||
|
|||
.portfolio__featured-project { |
|||
margin: 0 0 1.765rem; |
|||
img { |
|||
margin: 0 0 1rem; |
|||
box-shadow: 1px 1px $gray-2; |
|||
} |
|||
} |
|||
|
|||
.project__image { |
|||
border: 1px solid $gray-2; |
|||
box-shadow: 1px 1px $gray-2; |
|||
} |
|||
|
|||
.project__first-screen { |
|||
display: block; |
|||
margin-left: auto; |
|||
margin-right: auto; |
|||
} |
|||
|
|||
.project__additional-screens { |
|||
display: block; |
|||
margin-left: auto; |
|||
margin-right: auto; |
|||
} |
|||
|
|||
.project__single-screen { |
|||
display: inline-block; |
|||
width: 48%; |
|||
} |
|||
|
|||
.project__primary-screen { |
|||
width: 30%; |
|||
float: left; |
|||
margin-right: 1em; |
|||
} |
|||
|
|||
|
|||
.project__extra-screen { |
|||
float:left; |
|||
height:50% |
|||
} |
|||
|
|||
.project__title { |
|||
margin-top: 1.765rem; |
|||
letter-spacing: 1px; |
|||
font-size: $project__title-font-size; |
|||
} |
|||
|
|||
%subtitle { |
|||
font-style: $project__subtitle-font-style; |
|||
color: $project__subtitle-color; |
|||
display: block; |
|||
margin-top: 0.5rem; |
|||
margin: 0 0 1rem; |
|||
} |
|||
|
|||
.project__subtitle-big { |
|||
@extend %subtitle; |
|||
font-size: $project__subtitle-font-size-big; |
|||
} |
|||
|
|||
.project__subtitle-small { |
|||
@extend %subtitle; |
|||
font-size: $project__subtitle-font-size-small; |
|||
} |
|||
|
|||
.project__featured-image { |
|||
position: relative; |
|||
} |
|||
|
|||
.project__summary { |
|||
margin-bottom: 1.765rem; |
|||
text-align: left; |
|||
} |
|||
|
|||
.divider { |
|||
margin-bottom: 3.5rem; |
|||
} |
|||
.row-space { |
|||
margin-bottom: 1rem; |
|||
} |
|||
|
|||
// only needs some pieces from Bootstrap |
|||
%col_extend { |
|||
min-height: 1px; |
|||
padding-left: 15px; |
|||
padding-right: 15px; |
|||
position: relative; |
|||
} |
|||
|
|||
.row { |
|||
margin-left: -15px; |
|||
margin-right: -15px; |
|||
} |
|||
.col-xs-12 { |
|||
width: 100%; |
|||
@extend %col_extend; |
|||
} |
|||
.col-sm-4 { |
|||
@extend %col_extend; |
|||
} |
|||
.col-md-4 { |
|||
@extend %col_extend; |
|||
} |
|||
.col-sm-8 { |
|||
@extend %col_extend; |
|||
} |
|||
.col-md-8 { |
|||
@extend %col_extend; |
|||
} |
|||
|
|||
.img-responsive { |
|||
display: block; |
|||
max-width: 100%; |
|||
height: auto; |
|||
} |
|||
@ -0,0 +1,162 @@ |
|||
// mobile ~320..480px |
|||
// 320px ~ 16rem/16px ~ 18.8235/17px ~ 17.7778/18px |
|||
// 480px ~ 30rem/16px ~ 28.2353rem/17px ~ 26.6667rem/18px |
|||
@media (min-width: 320px) and (max-width: 767px) { |
|||
html, |
|||
body { |
|||
font-size: $small-device-font-size; |
|||
} |
|||
.sidebar { |
|||
li { |
|||
padding: .1rem 0; |
|||
} |
|||
.container { |
|||
padding-left: 0; |
|||
padding-right: 0; |
|||
} |
|||
} |
|||
.hidden-tablet { |
|||
display: none; |
|||
} |
|||
.sidebar-about, |
|||
.copyright { |
|||
display: none; |
|||
} |
|||
.sidebar { |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
.menu-content { |
|||
padding: 0 0 0 0px; |
|||
max-height: 0; |
|||
overflow: hidden; |
|||
margin-top: 0; } |
|||
.collapsible-menu { |
|||
padding: 0px 0px; |
|||
} |
|||
.collapsible-menu ul { |
|||
list-style-type: none; |
|||
padding: 0; |
|||
} |
|||
.collapsible-menu li { |
|||
display: block; |
|||
} |
|||
.collapsible-menu a { |
|||
text-decoration: none; |
|||
cursor: pointer; } |
|||
.collapsible-menu label { |
|||
background: url(/img/menu-open.svg) no-repeat left center; |
|||
background-position: 1.5rem; |
|||
display: block; |
|||
cursor: pointer; |
|||
color: #fff; |
|||
padding: 10px 0 10px 0px; } |
|||
|
|||
input#menuToggle { |
|||
display: none; |
|||
} |
|||
input#menuToggle + label { |
|||
font-weight: bold; |
|||
} |
|||
|
|||
input#menuToggle:checked + label { |
|||
background-image: url(/img/menu-close.svg); |
|||
background-position: 1.5rem; |
|||
color: #fff; |
|||
} |
|||
|
|||
input#menuToggle:checked ~ .menu-content { |
|||
max-height: 100% !important; |
|||
} |
|||
.social { |
|||
padding: 1em 0 1em 0; |
|||
} |
|||
} |
|||
|
|||
// tablet/medium device ~768px+ |
|||
// 768px ~ 48em/16px ~ 45.1765em/17px ~ 42.6667/18px |
|||
@media (min-width: 768px) { |
|||
html, |
|||
body { |
|||
font-size: $small-device-font-size; |
|||
} |
|||
.sidebar { |
|||
bottom: 0; |
|||
left: 0; |
|||
position: fixed; |
|||
text-align: left; |
|||
top: 0; |
|||
width: $sidebar-width; |
|||
} |
|||
.sidebar-sticky { |
|||
left: 1rem; |
|||
position: absolute; |
|||
right: 1rem; |
|||
top: 1rem; |
|||
} |
|||
.content { |
|||
margin-left: $content-margin-left; |
|||
margin-right: $content-margin-right; |
|||
max-width: $content-max-width; |
|||
} |
|||
.layout-reverse { |
|||
.sidebar { |
|||
left: auto; |
|||
right: 0; |
|||
} |
|||
.content { |
|||
margin-left: $content-margin-right; |
|||
margin-right: $content-margin-left; |
|||
} |
|||
} |
|||
.col-sm-8 { |
|||
width: 66.66666667%; |
|||
} |
|||
.project__title { |
|||
margin-top: 0.2rem; |
|||
} |
|||
.navigation { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
a { |
|||
width: calc(50% - 10px); |
|||
&:nth-child(2) { |
|||
margin-top: 0; |
|||
} |
|||
} |
|||
} |
|||
input#menuToggle, |
|||
input#menuToggle + label { |
|||
display: none; |
|||
} |
|||
} |
|||
|
|||
// Large devices (laptops/desktops, 992px and up) |
|||
// ~ 62rem/16px ~ 58.3529rem/17px ~ 55.1111rem/18px |
|||
@media (min-width: 992px) { |
|||
html, |
|||
body { |
|||
font-size: $large-device-font-size; |
|||
} |
|||
.layout-reverse .content { |
|||
margin-left: 4rem; |
|||
margin-right: 22rem; |
|||
} |
|||
.col-md-4 { |
|||
float: left; |
|||
width: 33.33333333%; |
|||
} |
|||
.col-md-8 { |
|||
float: left; |
|||
width: 66.66666667%; |
|||
} |
|||
.portfolio-container { |
|||
width: 68rem; |
|||
} |
|||
} |
|||
|
|||
// Large device ~1024px |
|||
// 1024px ~ 64rem/16px ~ 60.2353rem/17px 56.8889rem/18px |
|||
@media (min-width: 1024px) { |
|||
// styles |
|||
} |
|||
@ -0,0 +1,88 @@ |
|||
.sidebar { |
|||
background-color: $sidebar-color; |
|||
color: rgb(255, 255, 255); |
|||
color: rgba(255, 255, 255, 0.5); |
|||
padding: 2rem 1rem; |
|||
text-align: center; |
|||
a { |
|||
color: $gray-1; |
|||
border: none; |
|||
&:hover { |
|||
color: $link-color; |
|||
} |
|||
&:focus { |
|||
color: $link-color; |
|||
} |
|||
} |
|||
.sidebar-about { |
|||
text-align: center; |
|||
} |
|||
.author-image { |
|||
display: block; |
|||
margin-top: 4px; |
|||
} |
|||
} |
|||
|
|||
.sidebar-nav { |
|||
text-align: center; |
|||
list-style: none; |
|||
margin-bottom: 2rem; |
|||
margin-top: 2rem; |
|||
padding-left: 0; |
|||
} |
|||
|
|||
.sidebar-nav-item { |
|||
display: block; |
|||
line-height: 1.75; |
|||
.active { |
|||
font-weight: bold; |
|||
} |
|||
} |
|||
.site__title { |
|||
font-size: $site__title-font-size; |
|||
margin-bottom: 0.5rem; |
|||
a:hover { |
|||
border: none; |
|||
} |
|||
} |
|||
|
|||
.site__description { |
|||
font-size: 1.285rem; |
|||
font-weight: 300; |
|||
} |
|||
|
|||
.social { |
|||
text-align: center; |
|||
a { |
|||
padding: 0 4px; |
|||
@include link-no-decoration(); |
|||
} |
|||
} |
|||
|
|||
.img--circle { |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
.img--headshot { |
|||
height: 115px; |
|||
width: 115px; |
|||
} |
|||
|
|||
.img--caption { |
|||
font-style: italic; |
|||
} |
|||
|
|||
%small-center-text { |
|||
font-size: $font-scale-dot7; |
|||
line-height: 1.1rem; |
|||
text-align: center; |
|||
} |
|||
|
|||
.copyright { |
|||
padding-top: 1rem; |
|||
@extend %small-center-text; |
|||
} |
|||
.builtwith { |
|||
padding-top: .2rem; |
|||
@extend %small-center-text; |
|||
} |
|||
@ -0,0 +1,37 @@ |
|||
.badge-category, |
|||
a.badge-category { |
|||
color: #fff !important; |
|||
background-color: #0088cc; |
|||
&:hover, &:focus { |
|||
color: #0088cc !important; |
|||
background: transparent; |
|||
background-color: transparent; |
|||
text-decoration: none; |
|||
border-bottom: none; |
|||
} |
|||
} |
|||
|
|||
.badge-tag, |
|||
a.badge-tag { |
|||
color: #fff !important; |
|||
background-color: #7766cc; |
|||
&:hover, &:focus { |
|||
color: #7766cc !important; |
|||
background: transparent; |
|||
background-color: transparent; |
|||
text-decoration: none; |
|||
border-bottom: none; |
|||
} |
|||
} |
|||
|
|||
.badge { |
|||
display: inline-block; |
|||
padding: 0.25em 0.4em; |
|||
font-size: 0.75rem; |
|||
font-weight: bold; |
|||
line-height: 1; |
|||
text-align: center; |
|||
white-space: nowrap; |
|||
vertical-align: baseline; |
|||
border-radius: 0.25rem; |
|||
} |
|||
@ -0,0 +1,88 @@ |
|||
.theme-base-08 { |
|||
.sidebar { |
|||
background-color: #ac4142; |
|||
} |
|||
.content a { |
|||
color: #ac4142; |
|||
} |
|||
.related-posts li a:hover { |
|||
color: #ac4142; |
|||
} |
|||
} |
|||
.theme-base-09 { |
|||
.sidebar { |
|||
background-color: #d28445; |
|||
} |
|||
.content a { |
|||
color: #d28445; |
|||
} |
|||
.related-posts li a:hover { |
|||
color: #d28445; |
|||
} |
|||
} |
|||
.theme-base-0a { |
|||
.sidebar { |
|||
background-color: #f4bf75; |
|||
} |
|||
.content a { |
|||
color: #f4bf75; |
|||
} |
|||
.related-posts li a:hover { |
|||
color: #f4bf75; |
|||
} |
|||
} |
|||
.theme-base-0b { |
|||
.sidebar { |
|||
background-color: #90a959; |
|||
} |
|||
.content a { |
|||
color: #90a959; |
|||
} |
|||
.related-posts li a:hover { |
|||
color: #90a959; |
|||
} |
|||
} |
|||
.theme-base-0c { |
|||
.sidebar { |
|||
background-color: #75b5aa; |
|||
} |
|||
.content a { |
|||
color: #75b5aa; |
|||
} |
|||
.related-posts li a:hover { |
|||
color: #75b5aa; |
|||
} |
|||
} |
|||
.theme-base-0d { |
|||
.sidebar { |
|||
background-color: #6a9fb5; |
|||
} |
|||
.content a { |
|||
color: #6a9fb5; |
|||
} |
|||
.related-posts li a:hover { |
|||
color: #6a9fb5; |
|||
} |
|||
} |
|||
.theme-base-0e { |
|||
.sidebar { |
|||
background-color: #aa759f; |
|||
} |
|||
.content a { |
|||
color: #aa759f; |
|||
} |
|||
.related-posts li a:hover { |
|||
color: #aa759f; |
|||
} |
|||
} |
|||
.theme-base-0f { |
|||
.sidebar { |
|||
background-color: #8f5536; |
|||
} |
|||
.content a { |
|||
color: #8f5536; |
|||
} |
|||
.related-posts li a:hover { |
|||
color: #8f5536; |
|||
} |
|||
} |
|||
@ -0,0 +1,119 @@ |
|||
$gray-0: #fafafa; |
|||
$gray-1: #f9f9f9; |
|||
$gray-2: #eee; |
|||
$gray-3: #ddd; |
|||
$gray-4: #ccc; |
|||
$gray-5: #bbb; |
|||
$gray-6: #878787; |
|||
$gray-7: #767676; |
|||
$gray-8: #515151; |
|||
$gray-9: #313131; |
|||
|
|||
$white: #fff; |
|||
$red: #ac4142; |
|||
$orange: #d28445; |
|||
$yellow: #f4bf75; |
|||
$green: #90a959; |
|||
$cyan: #75b5aa; |
|||
$blue: #268bd2; |
|||
$brown: #8f5536; |
|||
|
|||
//https://www.client9.com/css-system-font-stack-sans-serif-v3 |
|||
$root-font-family: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Droid Sans", "Ubuntu", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol"; |
|||
|
|||
// poole's variables |
|||
$root-font-size: 17px; |
|||
$root-font-weight: 400; |
|||
// golden ratio https://grtcalculator.com |
|||
// 18px @ 33 px, 20px @ 33 px ~ 1.667em |
|||
$root-line-height: 1.667em; |
|||
|
|||
$body-color: $gray-8; |
|||
$body-bg: #fff; |
|||
|
|||
$border-color: #e5e5e5; |
|||
|
|||
$large-breakpoint: 38em; |
|||
$large-font-size: 19px; |
|||
$font-scale-dot7: .7rem; |
|||
$font-scale-dot8: .8rem; |
|||
// |
|||
|
|||
// hyde-hyde |
|||
$small-device-font-size: $root-font-size; |
|||
$large-device-font-size: $large-font-size; |
|||
|
|||
// https://www.client9.com/css-system-font-stack-monospace-v2 |
|||
$code-font-family: "SFMono-Regular", "SF-Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Roboto Mono", "Ubuntu Mono", "Courier New", Courier, monospace; |
|||
$code-font-size: .9rem; |
|||
$code-fence-font-size: .8rem; |
|||
//$code-color: #bf616a; |
|||
//$code-background-color: #f9f2f4; |
|||
$code-line-height: 1.4; |
|||
|
|||
// links |
|||
$link-color: $blue; |
|||
$link-hover-color: $body-color; |
|||
|
|||
// section |
|||
$section__title-font-size: 2.15rem; |
|||
|
|||
// post |
|||
$post__subtitle-font-size: 1.5rem; |
|||
$gradient-color-1: #ff2c2c; |
|||
$gradient-color-2: #7a5e91; |
|||
|
|||
// post meta |
|||
$meta-font-size: $font-scale-dot8; |
|||
$meta-font-weight: 300; |
|||
$meta-color: $gray-6; |
|||
|
|||
// post tags |
|||
$tag-background-color: $gray-2; |
|||
$tag-color: #606570; |
|||
$tag-font-size: .667rem; |
|||
|
|||
// list of posts |
|||
$item__date-color: #9a9a9a; |
|||
$item__date-font-size: 1rem; |
|||
$item__title-big-font-size: 1.785rem; |
|||
|
|||
// heading |
|||
$heading-font-weight: 400; |
|||
$h1-font-size: 2.15rem; |
|||
$h1-line-height: 1.25; |
|||
$h2-font-size: 1.85rem; |
|||
$h3-font-size: 1.5rem; |
|||
$h4-font-size:1.3rem; |
|||
$h5-font-size:1rem; |
|||
|
|||
|
|||
// sidebar |
|||
$sidebar-color: #300030; |
|||
$sidebar-width: 16rem; |
|||
$site__title-font-size: 2.5rem; |
|||
$copyright-font-size: $font-scale-dot7; |
|||
|
|||
// content |
|||
$content-max-width: 100%; // @ ~70 CPL |
|||
$content-margin-left: $sidebar-width + 2rem; |
|||
$content-margin-right: 2rem; |
|||
|
|||
// navigation |
|||
$navigation-color: #c2255c; |
|||
|
|||
// portfolio |
|||
$project__title-font-size: $h2-font-size; |
|||
$project__subtitle-font-size-big: $h3-font-size; |
|||
$project__subtitle-font-size-small: $h4-font-size; |
|||
$project__subtitle-font-style: italic; |
|||
$project__subtitle-color: #778492; |
|||
$ribbon-color: #276582; |
|||
$ribbon-background-color: #479fc8; |
|||
|
|||
// blog |
|||
$blog__title-font-size: $project__title-font-size; |
|||
$blog__subtitle-font-size-big: $project__subtitle-font-size-big; |
|||
$blog__subtitle-font-size-small: $project__subtitle-font-size-small; |
|||
$blog__subtitle-font-style: $project__subtitle-font-style; |
|||
$blog__subtitle-color: $project__subtitle-color; |
|||
@ -0,0 +1,78 @@ |
|||
// Body resets |
|||
// |
|||
// Update the foundational and global aspects of the page. |
|||
|
|||
* { |
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
html, |
|||
body { |
|||
margin: 0; |
|||