├── .forestry ├── front_matter │ └── templates │ │ ├── author.yml │ │ ├── home-hero.yml │ │ ├── home.yml │ │ └── post.yml └── settings.yml ├── .gitignore ├── LICENSE ├── README.md ├── archetypes └── default.md ├── assets ├── css │ └── prism.css ├── js │ ├── addFormStyles.js │ ├── collapseAuthors.js │ ├── copyUrl.js │ ├── initColors.js │ ├── prism.js │ ├── progressBar.js │ ├── toggleBorder.js │ ├── toggleColors.js │ ├── toggleLayout.js │ └── toggleLogos.js └── scss │ ├── anchor.scss │ ├── article.scss │ ├── articles.scss │ ├── authors.scss │ ├── bio.scss │ ├── blockquote.scss │ ├── code.scss │ ├── global.scss │ ├── headings.scss │ ├── home-articles.scss │ ├── horizontal-rule.scss │ ├── image.scss │ ├── layout.scss │ ├── lists.scss │ ├── logo.scss │ ├── navigation.scss │ ├── paginator.scss │ ├── paragraph.scss │ ├── progress.scss │ ├── section.scss │ ├── social-links.scss │ ├── subscription.scss │ ├── tables.scss │ └── vars.scss ├── config.yaml ├── config └── _default │ └── social.yaml ├── exampleSite ├── config.yaml └── content │ ├── _index.md │ ├── about.md │ ├── authors │ └── hugo-authors │ │ └── _index.md │ └── post │ ├── emoji-support.md │ ├── markdown-syntax.md │ ├── math-typesetting.mmark │ └── placeholder-text.md ├── go.mod ├── images ├── screenshot.png └── tn.png ├── layouts ├── _default │ ├── baseof.html │ ├── list.html │ └── single.html ├── authors │ └── list.html ├── index.html ├── partials │ ├── article │ │ ├── authors.html │ │ ├── hero.html │ │ ├── next.html │ │ └── progress.html │ ├── articles │ │ ├── articles.html │ │ ├── hero.html │ │ └── list.html │ ├── author │ │ ├── articles_list.html │ │ ├── hero.html │ │ └── social_links.html │ ├── bio.html │ ├── footer.html │ ├── func │ │ ├── GetArticleAuthors.html │ │ └── GetArticles.html │ ├── head │ │ └── head.html │ ├── header.html │ ├── icons │ │ ├── social │ │ │ ├── dribbble.html │ │ │ ├── facebook.html │ │ │ ├── github.html │ │ │ ├── instagram.html │ │ │ ├── linkedin.html │ │ │ ├── medium.html │ │ │ ├── patreon.html │ │ │ ├── paypal.html │ │ │ ├── twitter.html │ │ │ ├── unsplash.html │ │ │ └── youtube.html │ │ └── ui │ │ │ ├── check-mark-icon.html │ │ │ ├── link.html │ │ │ ├── logo.html │ │ │ ├── rows.html │ │ │ ├── tiles.html │ │ │ ├── toggle-closed.html │ │ │ └── toggle-open.html │ ├── page │ │ └── hero.html │ ├── paginator │ │ └── paginator.html │ ├── seo │ │ ├── debug.html │ │ ├── extend.html │ │ ├── get.html │ │ ├── jsonld.html │ │ ├── print.html │ │ └── tags.html │ ├── social-links │ │ └── social-links.html │ └── subscription │ │ └── subscription.html ├── post │ └── single.html └── shortcodes │ └── subscribe.html ├── netlify.toml ├── resources └── _gen │ └── assets │ └── scss │ └── scss │ ├── global.scss_48b060fe05b0a273d182ef83c0605941.content │ ├── global.scss_48b060fe05b0a273d182ef83c0605941.json │ ├── main.scss_48b060fe05b0a273d182ef83c0605941.content │ └── main.scss_48b060fe05b0a273d182ef83c0605941.json ├── static └── images │ ├── brad-tiller.jpg │ ├── dennis-brotzky.jpg │ ├── favicon.svg │ ├── hero-11.jpg │ ├── hero-2.jpg │ ├── hero-3.jpg │ ├── hero-4.jpg │ ├── hero-5.jpg │ ├── hero-6.jpg │ ├── large.jpg │ ├── mack-mansouri.jpg │ ├── medium.jpg │ ├── profile-01.jpeg │ ├── small.jpg │ └── thiago-costa.jpg └── theme.toml /.forestry/front_matter/templates/author.yml: -------------------------------------------------------------------------------- 1 | --- 2 | label: Author 3 | hide_body: true 4 | fields: 5 | - name: title 6 | type: text 7 | config: 8 | required: false 9 | label: Name 10 | - name: bio 11 | type: textarea 12 | default: '' 13 | config: 14 | required: false 15 | wysiwyg: false 16 | schema: 17 | format: markdown 18 | label: Bio 19 | - name: avatar 20 | type: file 21 | config: 22 | maxSize: 250 23 | label: Avatar Image 24 | - name: social 25 | type: field_group_list 26 | fields: 27 | - name: title 28 | type: text 29 | config: 30 | required: false 31 | label: Title 32 | - name: url 33 | type: text 34 | config: 35 | required: false 36 | label: URL 37 | config: 38 | min: 39 | max: 40 | labelField: 41 | label: Social Media 42 | - name: featured 43 | type: boolean 44 | label: Featured Author 45 | description: Feature this author on the home page 46 | -------------------------------------------------------------------------------- /.forestry/front_matter/templates/home-hero.yml: -------------------------------------------------------------------------------- 1 | --- 2 | label: Home Hero 3 | hide_body: true 4 | fields: 5 | - name: heading 6 | type: text 7 | config: 8 | required: false 9 | label: Heading 10 | description: The text displayed in the hero 11 | - name: maxWidthPX 12 | type: number 13 | label: Max Width 14 | description: The maximum possible width of the hero (in pixels) 15 | default: '652' 16 | config: 17 | required: true 18 | min: 19 | max: 20 | step: 21 | -------------------------------------------------------------------------------- /.forestry/front_matter/templates/home.yml: -------------------------------------------------------------------------------- 1 | --- 2 | label: Home 3 | hide_body: true 4 | fields: 5 | - name: hero 6 | type: include 7 | config: {} 8 | template: home-hero 9 | label: Hero 10 | -------------------------------------------------------------------------------- /.forestry/front_matter/templates/post.yml: -------------------------------------------------------------------------------- 1 | --- 2 | label: Post 3 | hide_body: false 4 | fields: 5 | - name: title 6 | type: text 7 | config: 8 | required: false 9 | label: Title 10 | - name: excerpt 11 | type: text 12 | config: 13 | required: false 14 | label: Excerpt 15 | - name: date 16 | type: datetime 17 | label: Date 18 | description: '' 19 | config: 20 | required: false 21 | date_format: 22 | time_format: 23 | display_utc: false 24 | - name: hero 25 | type: file 26 | config: 27 | maxSize: 250 28 | label: Hero Image 29 | - name: authors 30 | type: tag_list 31 | default: [] 32 | label: Authors 33 | -------------------------------------------------------------------------------- /.forestry/settings.yml: -------------------------------------------------------------------------------- 1 | --- 2 | new_page_extension: md 3 | auto_deploy: false 4 | admin_path: '' 5 | webhook_url: 6 | sections: 7 | - type: heading 8 | label: Content 9 | - type: document 10 | path: content/_index.md 11 | label: Home 12 | - type: directory 13 | path: content/post 14 | label: Posts 15 | create: all 16 | match: "**/*" 17 | templates: 18 | - post 19 | - type: heading 20 | label: Data 21 | - type: directory 22 | path: content/authors 23 | label: Authors 24 | create: all 25 | match: "**/_index.md" 26 | templates: 27 | - author 28 | - type: directory 29 | path: config/_default 30 | label: Config 31 | create: all 32 | match: "**/*" 33 | new_doc_ext: yaml 34 | upload_dir: static/uploads 35 | public_path: "/static/images" 36 | front_matter_path: '' 37 | use_front_matter_path: false 38 | file_template: ":filename:" 39 | build: 40 | preview_env: 41 | - HUGO_ENV=staging 42 | - HUGO_VERSION=0.81.0 43 | preview_output_directory: public 44 | preview_docker_image: forestryio/hugo:latest 45 | mount_path: "/srv" 46 | working_dir: "/srv" 47 | instant_preview_command: hugo server -D -E -F --port 8080 --bind 0.0.0.0 --renderToDisk 48 | -d public 49 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | public 2 | .DS_Store 3 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2019-present Forestry.io and contributors 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Hugo Novela 2 | 3 | A port of [Narative](https://www.narative.co/)'s Gatsby theme [Novela](https://www.narative.co/labs/novela/) 4 | 5 | **This theme requires Hugo extended > 0.65.0** 6 | 7 | ![](https://raw.githubusercontent.com/forestryio/hugo-theme-novela/master/images/tn.png) 8 | 9 | The easiest way to get started is to [import this theme in Forestry CMS](https://app.forestry.io/quick-start?repo=forestryio/novela-hugo-starter&engine=hugo&version=0.81.0) in a single click 10 | 11 | 12 | Import this project into Forestry 13 | 14 | 15 | ## Install from the command line 16 | 17 | If you don't want to use the [starter](https://github.com/forestryio/novela-hugo-starter), you can start from scratch and just install this theme from the command line. 18 | 19 | Create a new Hugo site and initialize your project as a [Hugo module](https://gohugo.io/hugo-modules/use-modules/): 20 | 21 | ``` 22 | hugo new site my-awesome-blog 23 | cd my-awesome-blog 24 | hugo mod init 25 | ``` 26 | 27 | Edit your `config.toml` to add the theme settings: 28 | 29 | ```toml 30 | # Novela settings 31 | theme = "github.com/forestryio/hugo-theme-novela" 32 | 33 | paginate = 6 34 | 35 | [social] 36 | twitter= "https://twitter.com/forestryio" 37 | github= "https://github.com/forestryio/novela-hugo-starter" 38 | linkedin= "https://www.linkedin.com/company/forestry.io" 39 | instagram = "#" 40 | dribbble = "#" 41 | youtube = "#" 42 | 43 | [taxonomies] 44 | author = "authors" 45 | 46 | ``` 47 | 48 | Create your first draft post and preview it locally: 49 | 50 | ``` 51 | hugo new post/my-first-post.md 52 | hugo server -D 53 | ``` 54 | 55 | You're good to go! 56 | 57 | ## Customization 58 | 59 | ### Logo 60 | 61 | Override `/themes/novela/layouts/partials/icons/ui/logo.html` with your own file at `/layouts/partials/icons/ui/logo.html`; include your logo in SVG format for desktop and mobile formats. 62 | 63 | Novela supports light and dark mode. To have your logo respond in kind, add `class="change-fill"` to the svg path(s). 64 | 65 | ### Socials 66 | 67 | In order for the Socials to be surfaced in Forestry, you should copy the theme's `config/_default/social.yaml` to your project. 68 | 69 | ### Authors 70 | 71 | You should register authors as a taxonomy in your project's `config.yaml`` 72 | 73 | ```yaml 74 | taxonomies: 75 | author: authors 76 | ``` 77 | 78 | #### Creating authors 79 | 80 | Authors must be added in `content/authors`. 81 | Create a folder per author and add an `_index.md` file in it. 82 | 83 | Here's an example of the front matter fields supported by default: 84 | 85 | ```yaml 86 | # /content/authors/firstname-lastname/_index.md 87 | --- 88 | title: Dennis Brotzky 89 | bio: | 90 | Written by You. This is where your author bio lives. Share your work, your 91 | joys and of course, your Twitter handle. 92 | avatar: /images/dennis-brotzky.jpg 93 | featured: true 94 | social: 95 | - title: unsplash 96 | url: https://unsplash.com 97 | - title: github 98 | url: https://github.com 99 | - title: github 100 | url: https://github.com 101 | - title: github 102 | url: https://github.com 103 | - title: github 104 | url: https://github.com 105 | --- 106 | ``` 107 | 108 | #### Assigning authors to posts. 109 | Ad the name of the author to the "authors" field: 110 | 111 | ```yaml 112 | authors: 113 | - Dennis Brotzky 114 | - Thiago Costa 115 | ``` 116 | ### Newsletter CTA 117 | 118 | This theme includes a shortcode for a newsletter callout form that you can add to any page. 119 | It uses [formspree.io](//formspree.io/) as proxy to send the actual email. Each month, visitors can send you up to one thousand emails without incurring extra charges. Visit the Formspree site to get get going add your Formspree email to your shortcode like this: 120 | 121 | ``` 122 | {{< subscribe email="your@email.com" >}} 123 | ``` 124 | -------------------------------------------------------------------------------- /archetypes/default.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "{{ replace .Name "-" " " | title }}" 3 | date: {{ .Date }} 4 | hero: /images/hero-3.jpg 5 | excerpt: 6 | draft: true 7 | --- 8 | -------------------------------------------------------------------------------- /assets/css/prism.css: -------------------------------------------------------------------------------- 1 | /* PrismJS 1.21.0 2 | https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript+git+go+json+json5+jsx+tsx+toml+typescript+yaml&plugins=line-numbers+toolbar+copy-to-clipboard */ 3 | /** 4 | * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML 5 | * Based on https://github.com/chriskempson/tomorrow-theme 6 | * @author Rose Pritchard 7 | */ 8 | 9 | code[class*="language-"], 10 | pre[class*="language-"] { 11 | color: #ccc; 12 | background: none; 13 | font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; 14 | font-size: 1em; 15 | text-align: left; 16 | white-space: pre; 17 | word-spacing: normal; 18 | word-break: normal; 19 | word-wrap: normal; 20 | line-height: 1.5; 21 | 22 | -moz-tab-size: 4; 23 | -o-tab-size: 4; 24 | tab-size: 4; 25 | 26 | -webkit-hyphens: none; 27 | -moz-hyphens: none; 28 | -ms-hyphens: none; 29 | hyphens: none; 30 | 31 | } 32 | 33 | /* Code blocks */ 34 | pre[class*="language-"] { 35 | padding: 1em; 36 | margin: .5em 0; 37 | overflow: auto; 38 | } 39 | 40 | :not(pre) > code[class*="language-"], 41 | pre[class*="language-"] { 42 | background: #2d2d2d; 43 | } 44 | 45 | /* Inline code */ 46 | :not(pre) > code[class*="language-"] { 47 | padding: .1em; 48 | border-radius: .3em; 49 | white-space: normal; 50 | } 51 | 52 | .token.comment, 53 | .token.block-comment, 54 | .token.prolog, 55 | .token.doctype, 56 | .token.cdata { 57 | color: #999; 58 | } 59 | 60 | .token.punctuation { 61 | color: #ccc; 62 | } 63 | 64 | .token.tag, 65 | .token.attr-name, 66 | .token.namespace, 67 | .token.deleted { 68 | color: #e2777a; 69 | } 70 | 71 | .token.function-name { 72 | color: #6196cc; 73 | } 74 | 75 | .token.boolean, 76 | .token.number, 77 | .token.function { 78 | color: #f08d49; 79 | } 80 | 81 | .token.property, 82 | .token.class-name, 83 | .token.constant, 84 | .token.symbol { 85 | color: #f8c555; 86 | } 87 | 88 | .token.selector, 89 | .token.important, 90 | .token.atrule, 91 | .token.keyword, 92 | .token.builtin { 93 | color: #cc99cd; 94 | } 95 | 96 | .token.string, 97 | .token.char, 98 | .token.attr-value, 99 | .token.regex, 100 | .token.variable { 101 | color: #7ec699; 102 | } 103 | 104 | .token.operator, 105 | .token.entity, 106 | .token.url { 107 | color: #67cdcc; 108 | } 109 | 110 | .token.important, 111 | .token.bold { 112 | font-weight: bold; 113 | } 114 | .token.italic { 115 | font-style: italic; 116 | } 117 | 118 | .token.entity { 119 | cursor: help; 120 | } 121 | 122 | .token.inserted { 123 | color: green; 124 | } 125 | 126 | pre[class*="language-"].line-numbers { 127 | position: relative; 128 | padding-left: 3.8em; 129 | counter-reset: linenumber; 130 | } 131 | 132 | pre[class*="language-"].line-numbers > code { 133 | position: relative; 134 | white-space: inherit; 135 | } 136 | 137 | .line-numbers .line-numbers-rows { 138 | position: absolute; 139 | pointer-events: none; 140 | top: 0; 141 | font-size: 100%; 142 | left: -3.8em; 143 | width: 3em; /* works for line-numbers below 1000 lines */ 144 | letter-spacing: -1px; 145 | border-right: 1px solid #999; 146 | 147 | -webkit-user-select: none; 148 | -moz-user-select: none; 149 | -ms-user-select: none; 150 | user-select: none; 151 | 152 | } 153 | 154 | .line-numbers-rows > span { 155 | display: block; 156 | counter-increment: linenumber; 157 | } 158 | 159 | .line-numbers-rows > span:before { 160 | content: counter(linenumber); 161 | color: #999; 162 | display: block; 163 | padding-right: 0.8em; 164 | text-align: right; 165 | } 166 | 167 | div.code-toolbar { 168 | position: relative; 169 | } 170 | 171 | div.code-toolbar > .toolbar { 172 | position: absolute; 173 | top: .3em; 174 | right: .2em; 175 | transition: opacity 0.3s ease-in-out; 176 | opacity: 0; 177 | } 178 | 179 | div.code-toolbar:hover > .toolbar { 180 | opacity: 1; 181 | } 182 | 183 | /* Separate line b/c rules are thrown out if selector is invalid. 184 | IE11 and old Edge versions don't support :focus-within. */ 185 | div.code-toolbar:focus-within > .toolbar { 186 | opacity: 1; 187 | } 188 | 189 | div.code-toolbar > .toolbar .toolbar-item { 190 | display: inline-block; 191 | } 192 | 193 | div.code-toolbar > .toolbar a { 194 | cursor: pointer; 195 | } 196 | 197 | div.code-toolbar > .toolbar button { 198 | background: none; 199 | border: 0; 200 | color: inherit; 201 | font: inherit; 202 | line-height: normal; 203 | overflow: visible; 204 | padding: 0; 205 | -webkit-user-select: none; /* for button */ 206 | -moz-user-select: none; 207 | -ms-user-select: none; 208 | } 209 | 210 | div.code-toolbar > .toolbar a, 211 | div.code-toolbar > .toolbar button, 212 | div.code-toolbar > .toolbar span { 213 | color: #bbb; 214 | font-size: .8em; 215 | padding: 0 .5em; 216 | background: #f5f2f0; 217 | background: rgba(224, 224, 224, 0.2); 218 | box-shadow: 0 2px 0 0 rgba(0,0,0,0.2); 219 | border-radius: .5em; 220 | } 221 | 222 | div.code-toolbar > .toolbar a:hover, 223 | div.code-toolbar > .toolbar a:focus, 224 | div.code-toolbar > .toolbar button:hover, 225 | div.code-toolbar > .toolbar button:focus, 226 | div.code-toolbar > .toolbar span:hover, 227 | div.code-toolbar > .toolbar span:focus { 228 | color: inherit; 229 | text-decoration: none; 230 | } 231 | 232 | -------------------------------------------------------------------------------- /assets/js/addFormStyles.js: -------------------------------------------------------------------------------- 1 | document.getElementById("submitButton").addEventListener("click", addErrorStyles); 2 | document.getElementById("emailInput").addEventListener("keyup", updateStyles); 3 | 4 | subscriptionForm = document.getElementById("subscriptionForm"); 5 | emailField = document.getElementById("emailInput"); 6 | submitted = false; 7 | 8 | function addErrorStyles(){ 9 | submitted = true; 10 | updateClasses(); 11 | } 12 | 13 | function updateStyles(){ 14 | if (submitted === true){ 15 | updateClasses(); 16 | } 17 | } 18 | 19 | function updateClasses(){ 20 | if(emailField.validity.valid){ 21 | subscriptionForm.classList.remove("submitted-form"); 22 | } 23 | else{ 24 | subscriptionForm.classList.add("submitted-form"); 25 | emailField.classList.add("submitted-input"); 26 | } 27 | } -------------------------------------------------------------------------------- /assets/js/collapseAuthors.js: -------------------------------------------------------------------------------- 1 | let collapsed = true; 2 | 3 | function displayCoauthors(){ 4 | document.getElementById("uncollapsedCoauthors").classList.remove("hidden"); 5 | } 6 | 7 | function hideCoauthors(){ 8 | document.getElementById("uncollapsedCoauthors").classList.add("hidden"); 9 | } 10 | 11 | function bindCollapseAuthors() { 12 | const collapsedCoauthorsElement = document.getElementById("collapsedCoauthors"); 13 | 14 | if (collapsedCoauthorsElement === null) { 15 | return; 16 | } 17 | 18 | collapsedCoauthorsElement.addEventListener("click", displayCoauthors); 19 | document.getElementById("uncollapsedAction").addEventListener("click", hideCoauthors); 20 | } 21 | 22 | bindCollapseAuthors(); 23 | -------------------------------------------------------------------------------- /assets/js/copyUrl.js: -------------------------------------------------------------------------------- 1 | document.getElementById("copyButton").addEventListener("click", copyToClipboard); 2 | 3 | let currentUrl = window.location; 4 | let copyTextContainer = document.getElementById("copyText"); 5 | let toolTip = document.getElementById("toolTip"); 6 | 7 | function copyToClipboard(){ 8 | copyTextContainer.value = currentUrl 9 | copyTextContainer.focus(); 10 | copyTextContainer.select(); 11 | document.execCommand("copy"); 12 | 13 | toolTip.style.animationName = "pan-toolbar"; 14 | 15 | setTimeout(function(){ 16 | toolTip.style.removeProperty('animation-name'); 17 | }, 2000); 18 | } -------------------------------------------------------------------------------- /assets/js/initColors.js: -------------------------------------------------------------------------------- 1 | 2 | let be = document.getElementsByTagName("BODY")[0]; 3 | 4 | initColors(); 5 | 6 | function initColors(){ 7 | if (localStorage.getItem("isLight") === null) { 8 | localStorage.setItem("isLight", 'true'); 9 | } 10 | 11 | if (localStorage.getItem("isLight") === 'false'){ 12 | makeDark(); 13 | } 14 | else{ 15 | makeLight(); 16 | } 17 | } 18 | 19 | 20 | function makeDark(){ 21 | be.style.setProperty('--primary', "#fff"); 22 | be.style.setProperty('--secondary', "#fff"); 23 | be.style.setProperty('--grey', "#73737D"); 24 | be.style.setProperty('--background-color', "#111216"); 25 | be.style.setProperty('--accent', "#E9DAAC"); 26 | be.style.setProperty('--hover', "rgba(255, 255, 255, 0.07)"); 27 | be.style.setProperty('--gradient', "linear-gradient(180deg, #111216 0%, rgba(66, 81, 98, 0.36) 100%)"); 28 | be.style.setProperty('--articleText', "#fff"); 29 | be.style.setProperty('--track', "rgba(255, 255, 255, 0.3)"); 30 | be.style.setProperty('--progress', "#fff"); 31 | be.style.setProperty('--card', "#1D2128"); 32 | be.style.setProperty('--error', "#EE565B"); 33 | be.style.setProperty('--success', "#46B17B"); 34 | be.style.setProperty('--errorBackground', "rgba(238, 86, 91, 0.1)"); 35 | be.style.setProperty('--horizontalRule', "rgba(255, 255, 255, 0.15)"); 36 | be.style.setProperty('--inputBackground', "rgba(255, 255, 255, 0.07)"); 37 | be.style.setProperty('--tooltip', "#000"); 38 | } 39 | 40 | function makeLight(){ 41 | be.style.setProperty('--primary', ""); 42 | be.style.setProperty('--secondary', ""); 43 | be.style.setProperty('--grey', ""); 44 | be.style.setProperty('--background-color', ""); 45 | be.style.setProperty('--accent', ""); 46 | be.style.setProperty('--hover', ""); 47 | be.style.setProperty('--gradient', ""); 48 | be.style.setProperty('--articleText', ""); 49 | be.style.setProperty('--track', ""); 50 | be.style.setProperty('--progress', ""); 51 | be.style.setProperty('--card', ""); 52 | be.style.setProperty('--error', ""); 53 | be.style.setProperty('--success', ""); 54 | be.style.setProperty('--errorBackground', ""); 55 | be.style.setProperty('--horizontalRule', ""); 56 | be.style.setProperty('--inputBackground', ""); 57 | be.style.setProperty('--tooltip', "lightgrey"); 58 | } -------------------------------------------------------------------------------- /assets/js/progressBar.js: -------------------------------------------------------------------------------- 1 | window.addEventListener("scroll", updateProgress); 2 | 3 | progressBar = document.getElementById("progressBar"); 4 | scrollProgress = document.getElementById("progressIndicator"); 5 | 6 | if (document.getElementById("subscriptionSection")){ 7 | articleSubscription = document.getElementById("subscriptionSection").offsetHeight; 8 | } 9 | else{ 10 | articleSubscription = 0; 11 | } 12 | 13 | if(document.getElementById("articleNext")){ 14 | articleNext = document.getElementById("articleNext").offsetHeight; 15 | } 16 | else{ 17 | articleNext = 0; 18 | } 19 | 20 | footerSection = 150; 21 | 22 | bottomOffset = ((articleSubscription + articleNext + footerSection + 250) / document.body.scrollHeight) * 100 ; 23 | bottomOffset += bottomOffset * 1.1; 24 | 25 | 26 | function updateProgress(){ 27 | let percentScrolled = (window.pageYOffset / document.body.scrollHeight) * (100 + bottomOffset); 28 | scrollProgress.style.transform = "translateY(" + percentScrolled + "%)"; 29 | 30 | if (percentScrolled > 100){ 31 | progressBar.style.animationName = "progress-fade-out"; 32 | setTimeout(function(){ 33 | progressBar.style.opacity = "0"; 34 | }, 500); 35 | } 36 | else{ 37 | progressBar.style.animationName = "progress-fade-in"; 38 | setTimeout(function(){ 39 | progressBar.style.opacity = "1"; 40 | }, 500); 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /assets/js/toggleBorder.js: -------------------------------------------------------------------------------- 1 | window.addEventListener("resize", adjustListBorder); 2 | 3 | let listRemoveWidth = window.matchMedia("(max-width: 1070px)"); 4 | let listAddWidth = window.matchMedia("(min-width: 1070px)"); 5 | 6 | function adjustListBorder(){ 7 | if (listRemoveWidth.matches) { 8 | document.getElementById("articlesList").classList.remove("author-alc"); 9 | } 10 | else if (listAddWidth.matches) { 11 | document.getElementById("articlesList").classList.add("author-alc"); 12 | } 13 | } -------------------------------------------------------------------------------- /assets/js/toggleColors.js: -------------------------------------------------------------------------------- 1 | document.getElementById("themeColorButton").addEventListener("click", toggleColors); 2 | 3 | let bodyElement = document.getElementsByTagName("BODY")[0]; 4 | let moonOrSun = document.getElementById("moonOrSun"); 5 | let sunRays = document.getElementById("sunRays"); 6 | let moonMask = document.getElementById("moonMask"); 7 | 8 | initAnimation(); 9 | 10 | function initAnimation(){ 11 | if (localStorage.getItem("isLight") === 'true'){ 12 | moonMask.style.top = "-8px"; 13 | moonMask.style.right = "-5px"; 14 | moonOrSun.style.transform = "scale(1)" 15 | sunRays.style.transform = "scale(0.1)" 16 | } 17 | else{ 18 | moonMask.style.top = "-25px"; 19 | moonMask.style.right = "-15px"; 20 | moonOrSun.style.transform = "scale(0.5)" 21 | sunRays.style.transform = "scale(0.6)" 22 | } 23 | } 24 | 25 | function toggleColors(){ 26 | if (localStorage.getItem("isLight") === 'true'){ 27 | makeDark(); 28 | 29 | moonMask.classList.add("mask-to-sun-animation"); 30 | moonOrSun.classList.add("to-sun-animation"); 31 | sunRays.classList.add("expand-rays"); 32 | 33 | setTimeout(function(){ 34 | sunRays.classList.remove("expand-rays"); 35 | }, 500); 36 | setTimeout(function(){ 37 | moonMask.classList.remove("mask-to-sun-animation"); 38 | moonOrSun.classList.remove("to-sun-animation"); 39 | initAnimation(); 40 | }, 400); 41 | 42 | localStorage.setItem("isLight", 'false'); 43 | } 44 | else{ 45 | makeLight(); 46 | 47 | moonMask.classList.add("mask-to-moon-animation"); 48 | moonOrSun.classList.add("to-moon-animation"); 49 | sunRays.classList.add("contract-rays"); 50 | 51 | 52 | setTimeout(function(){ 53 | sunRays.classList.remove("contract-rays"); 54 | }, 500); 55 | setTimeout(function(){ 56 | moonMask.classList.remove("mask-to-moon-animation"); 57 | moonOrSun.classList.remove("to-moon-animation"); 58 | sunRays.classList.remove("contract-rays"); 59 | initAnimation(); 60 | }, 400); 61 | 62 | localStorage.setItem("isLight", 'true'); 63 | } 64 | } 65 | 66 | function makeDark(){ 67 | bodyElement.style.setProperty('--primary', "#fff"); 68 | bodyElement.style.setProperty('--secondary', "#fff"); 69 | bodyElement.style.setProperty('--grey', "#73737D"); 70 | bodyElement.style.setProperty('--background-color', "#111216"); 71 | bodyElement.style.setProperty('--accent', "#E9DAAC"); 72 | bodyElement.style.setProperty('--hover', "rgba(255, 255, 255, 0.07)"); 73 | bodyElement.style.setProperty('--gradient', "linear-gradient(180deg, #111216 0%, rgba(66, 81, 98, 0.36) 100%)"); 74 | bodyElement.style.setProperty('--articleText', "#fff"); 75 | bodyElement.style.setProperty('--track', "rgba(255, 255, 255, 0.3)"); 76 | bodyElement.style.setProperty('--progress', "#fff"); 77 | bodyElement.style.setProperty('--card', "#1D2128"); 78 | bodyElement.style.setProperty('--error', "#EE565B"); 79 | bodyElement.style.setProperty('--success', "#46B17B"); 80 | bodyElement.style.setProperty('--errorBackground', "rgba(238, 86, 91, 0.1)"); 81 | bodyElement.style.setProperty('--horizontalRule', "rgba(255, 255, 255, 0.15)"); 82 | bodyElement.style.setProperty('--inputBackground', "rgba(255, 255, 255, 0.07)"); 83 | bodyElement.style.setProperty('--tooltip', "#000"); 84 | } 85 | 86 | function makeLight(){ 87 | bodyElement.style.setProperty('--primary', ""); 88 | bodyElement.style.setProperty('--secondary', ""); 89 | bodyElement.style.setProperty('--grey', ""); 90 | bodyElement.style.setProperty('--background-color', ""); 91 | bodyElement.style.setProperty('--accent', ""); 92 | bodyElement.style.setProperty('--hover', ""); 93 | bodyElement.style.setProperty('--gradient', ""); 94 | bodyElement.style.setProperty('--articleText', ""); 95 | bodyElement.style.setProperty('--track', ""); 96 | bodyElement.style.setProperty('--progress', ""); 97 | bodyElement.style.setProperty('--card', ""); 98 | bodyElement.style.setProperty('--error', ""); 99 | bodyElement.style.setProperty('--success', ""); 100 | bodyElement.style.setProperty('--errorBackground', ""); 101 | bodyElement.style.setProperty('--horizontalRule', ""); 102 | bodyElement.style.setProperty('--inputBackground', ""); 103 | bodyElement.style.setProperty('--tooltip', "lightgrey"); 104 | } -------------------------------------------------------------------------------- /assets/js/toggleLayout.js: -------------------------------------------------------------------------------- 1 | document.getElementById("btnGrid").addEventListener("click", makeGrid); 2 | document.getElementById("btnRows").addEventListener("click", makeRows); 3 | window.addEventListener("resize", adjustListAtMobile); 4 | 5 | document.getElementById("rows").style.fill = "var(--grey)"; 6 | 7 | let listRemoveWidth = window.matchMedia("(max-width: 735px)"); 8 | let listAddWidth = window.matchMedia("(min-width: 735px)"); 9 | let isList = false; 10 | 11 | function adjustListAtMobile(){ 12 | if (listRemoveWidth.matches) { 13 | document.getElementById("articlesList").classList.remove("articles-list-container-alt"); 14 | } 15 | else if (listAddWidth.matches && isList === true) { 16 | document.getElementById("articlesList").classList.add("articles-list-container-alt"); 17 | } 18 | } 19 | 20 | function makeGrid(){ 21 | document.getElementById("articlesList").classList.remove("articles-list-container-alt"); 22 | document.getElementById("tiles").style.fill = "var(--primary)"; 23 | document.getElementById("rows").style.fill = "var(--grey)"; 24 | isList = false; 25 | } 26 | 27 | function makeRows(){ 28 | document.getElementById("articlesList").classList.add("articles-list-container-alt"); 29 | document.getElementById("rows").style.fill = "var(--primary)"; 30 | document.getElementById("tiles").style.fill = "var(--grey)"; 31 | isList = true; 32 | } -------------------------------------------------------------------------------- /assets/js/toggleLogos.js: -------------------------------------------------------------------------------- 1 | window.addEventListener("resize", toggleLogo); 2 | 3 | let lrw = window.matchMedia("(max-width: 735px)"); 4 | let law = window.matchMedia("(min-width: 735px)"); 5 | 6 | function toggleLogo(){ 7 | if (lrw.matches) { 8 | document.getElementById("logo-mobile").classList.remove("hidden"); 9 | document.getElementById("logo-desktop").classList.add("hidden"); 10 | } 11 | else if (law.matches) { 12 | document.getElementById("logo-mobile").classList.add("hidden"); 13 | document.getElementById("logo-desktop").classList.remove("hidden"); 14 | } 15 | } -------------------------------------------------------------------------------- /assets/scss/anchor.scss: -------------------------------------------------------------------------------- 1 | a{ 2 | -webkit-transition: var(--color-mode-transition); 3 | -o-transition: var(--color-mode-transition); 4 | transition: var(--color-mode-transition); 5 | color: var(--accent); 6 | } 7 | 8 | a:visited { 9 | color: var(--accent); 10 | opacity: 0.85; 11 | } 12 | 13 | a:hover, 14 | a:focus { 15 | text-decoration: underline; 16 | } -------------------------------------------------------------------------------- /assets/scss/article.scss: -------------------------------------------------------------------------------- 1 | /**************************************ARTICLE HEAD**************************************/ 2 | 3 | .article-hero{ 4 | @media screen and (max-width: $phablet){ 5 | &::before { 6 | content: ""; 7 | width: 100%; 8 | height: 20px; 9 | background: var(--primary); 10 | position: absolute; 11 | left: 0; 12 | top: 0; 13 | -webkit-transition: var(--color-mode-transition); 14 | -o-transition: var(--color-mode-transition); 15 | transition: var(--color-mode-transition); 16 | } 17 | 18 | &::after { 19 | content: ""; 20 | width: 100%; 21 | height: 10px; 22 | background: var(--background-color); 23 | position: absolute; 24 | left: 0; 25 | top: 10px; 26 | border-top-left-radius: 25px; 27 | border-top-right-radius: 25px; 28 | -webkit-transition: var(--color-mode-transition); 29 | -o-transition: var(--color-mode-transition); 30 | transition: var(--color-mode-transition); 31 | } 32 | } 33 | } 34 | 35 | .article-meta{ 36 | display: -webkit-box; 37 | display: -ms-flexbox; 38 | display: flex; 39 | 40 | /*PHABLET*/ 41 | @media screen and (max-width: $phablet){ 42 | margin-left: 0; 43 | flex-direction: column; 44 | } 45 | } 46 | 47 | .article-header{ 48 | position: relative; 49 | z-index: 10; 50 | margin:100px auto 120px; 51 | padding-left: 68px; 52 | max-width: 749px; 53 | 54 | @media screen and (max-width: $desktop){ 55 | padding-left: 53px; 56 | max-width: calc(507px + 53px); 57 | margin: 100px auto 70px; 58 | } 59 | 60 | @media screen and (max-width: $tablet){ 61 | padding-left: 0; 62 | margin: 100px auto 70px; 63 | max-width: 480px; 64 | } 65 | 66 | @media screen and (max-width: $phablet){ 67 | margin: 170px auto 180px; 68 | padding: 0 40px; 69 | } 70 | 71 | @media screen and (max-height: 700px) { 72 | margin: 100px auto; 73 | } 74 | } 75 | 76 | .article-hero-heading{ 77 | font-size: 48px; 78 | font-family: var(--serif); 79 | margin-bottom: 25px; 80 | font-weight: bold; 81 | line-height: 1.32; 82 | 83 | @media screen and (max-width: $tablet){ 84 | margin-bottom: 20px; 85 | font-size: 36px; 86 | } 87 | 88 | @media screen and (max-width: $phablet){ 89 | font-size: 32px; 90 | } 91 | } 92 | 93 | .article-hero-subtitle{ 94 | padding: 10px; 95 | max-width: 700px; 96 | margin-left: auto; 97 | margin-right: auto; 98 | position: relative; 99 | display: -webkit-box; 100 | display: -ms-flexbox; 101 | display: flex; 102 | font-size: 18px; 103 | color: var(--grey); 104 | 105 | /*PHABLET*/ 106 | @media screen and (max-width: $phablet){ 107 | border: 1px solid var(--horizontalRule); 108 | border-radius: 5px; 109 | } 110 | 111 | @media screen and(max-width: $phablet){ 112 | font-size: 14px; 113 | -webkit-box-orient: vertical; 114 | -webkit-box-direction: normal; 115 | -ms-flex-direction: column; 116 | flex-direction: column; 117 | 118 | &.has-coauthors::before{ 119 | content: ''; 120 | position: absolute; 121 | left: -20px; 122 | right: -20px; 123 | top: -10px; 124 | bottom: -10px; 125 | border: 1px solid var(--horizontalRule); 126 | opacity: 0.5; 127 | border-radius: 5px; 128 | } 129 | 130 | strong { 131 | display: block; 132 | font-weight: 500; 133 | margin-bottom: 5px; 134 | } 135 | } 136 | } 137 | 138 | .article-hero-image{ 139 | position: absolute; 140 | z-index: 1; 141 | width: 100%; 142 | max-width: 944px; 143 | overflow: hidden; 144 | margin: 0 auto; 145 | -webkit-box-shadow: 0 30px 60px -10px rgba(0, 0, 0, 0.2), 146 | 0 18px 36px -18px rgba(0, 0, 0, 0.22); 147 | box-shadow: 0 30px 60px -10px rgba(0, 0, 0, 0.2), 148 | 0 18px 36px -18px rgba(0, 0, 0, 0.22); 149 | 150 | img{ 151 | width: 100%; 152 | } 153 | 154 | /*DESKTOP MEDIUM*/ 155 | @media screen and (max-width: $desktop_medium){ 156 | position: relative; 157 | } 158 | 159 | /*TABLET*/ 160 | @media screen and (max-width: $tablet){ 161 | max-width: 100%; 162 | } 163 | 164 | /*PHABLET*/ 165 | @media screen and (max-width: phablet){ 166 | margin: 0 auto; 167 | width: calc(100vw - 40px); 168 | height: 220px; 169 | 170 | & > div { 171 | height: 220px; 172 | } 173 | } 174 | } 175 | 176 | .article-author-link{ 177 | display: -webkit-box; 178 | display: -ms-flexbox; 179 | display: flex; 180 | -webkit-box-align: center; 181 | -ms-flex-align: center; 182 | align-items: center; 183 | color: inherit; 184 | 185 | &:hover{ 186 | text-decoration: none; 187 | } 188 | 189 | &:visited{ 190 | color: inherit; 191 | } 192 | 193 | strong { 194 | -webkit-transition: var(--color-mode-transition); 195 | -o-transition: var(--color-mode-transition); 196 | transition: var(--color-mode-transition); 197 | } 198 | 199 | &:hover strong { 200 | color: var(--primary); 201 | } 202 | } 203 | 204 | .article-author-avatar{ 205 | height: 25px; 206 | width: 25px; 207 | border-radius: 50%; 208 | margin-right: 14px; 209 | background: var(--grey); 210 | overflow: hidden; 211 | 212 | img{ 213 | width: 100%; 214 | } 215 | 216 | .gatsby-image-wrapper > div { 217 | padding-bottom: 100% !important; 218 | } 219 | 220 | /*PHABLET*/ 221 | @media screen and (max-width: $phablet){ 222 | display: none; 223 | } 224 | } 225 | 226 | .hide-on-mobile{ 227 | /*PHABLET*/ 228 | @media screen and (max-width: $phablet){ 229 | display: none; 230 | } 231 | } 232 | 233 | .article-coauthors-container{ 234 | margin-right: 10px; 235 | position: relative; 236 | display: -webkit-box; 237 | display: -ms-flexbox; 238 | display: flex; 239 | -webkit-box-align: center; 240 | -ms-flex-align: center; 241 | align-items: center; 242 | font-size: 18px; 243 | color: var(--grey); 244 | cursor: pointer; 245 | 246 | &::before { 247 | content: ""; 248 | position: absolute; 249 | left: 0; 250 | right: 0; 251 | top: -16px; 252 | bottom: -16px; 253 | background: var(--card); 254 | -webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1); 255 | box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1); 256 | border-radius: 5px; 257 | z-index: 0; 258 | -webkit-transition: opacity 0.3s; 259 | -o-transition: opacity 0.3s; 260 | transition: opacity 0.3s; 261 | cursor: pointer; 262 | opacity: 0; 263 | } 264 | 265 | &:hover::before { 266 | opacity: 1; 267 | } 268 | 269 | /*PHABLET*/ 270 | @media screen and (max-width: $phablet){ 271 | font-size: 14px; 272 | -webkit-box-align: center; 273 | -ms-flex-align: center; 274 | align-items: center; 275 | 276 | &::before { 277 | -webkit-box-shadow: none; 278 | box-shadow: none; 279 | bottom: -30px; 280 | background: transparent; 281 | } 282 | 283 | 284 | strong { 285 | display: block; 286 | font-weight: semi-bold; 287 | margin-bottom: 5px; 288 | } 289 | } 290 | } 291 | 292 | .article-coauthors-collapsed{ 293 | display: -webkit-box; 294 | display: -ms-flexbox; 295 | display: flex; 296 | } 297 | 298 | .article-coauthors-list{ 299 | position: relative; 300 | height: 25px; 301 | margin-right: 15px; 302 | margin-left: 15px; 303 | 304 | /*PHABLET*/ 305 | @media screen and (max-width: $phablet){ 306 | display: none; 307 | } 308 | } 309 | 310 | .article-coauthors-avatar{ 311 | position: absolute; 312 | height: 25px; 313 | width: 25px; 314 | border-radius: 50%; 315 | z-index: 1; 316 | background: var(--grey); 317 | -webkit-box-shadow: 0 0 0 2px var(--background-color); 318 | box-shadow: 0 0 0 2px var(--background-color); 319 | -webkit-transition: -webkit-box-shadow 0.25s ease; 320 | transition: -webkit-box-shadow 0.25s ease; 321 | -o-transition: box-shadow 0.25s ease; 322 | transition: box-shadow 0.25s ease; 323 | transition: box-shadow 0.25s ease, -webkit-box-shadow 0.25s ease; 324 | overflow: hidden; 325 | pointer-events: none; 326 | 327 | img{ 328 | width: 100%; 329 | } 330 | 331 | /*PHABLET*/ 332 | @media screen and (max-width: $phablet){ 333 | display: none; 334 | } 335 | } 336 | 337 | .article-coauthors-name-container{ 338 | position: relative; 339 | max-width: 260px; 340 | white-space: nowrap; 341 | overflow: hidden; 342 | -o-text-overflow: ellipsis; 343 | text-overflow: ellipsis; 344 | font-weight: 600; 345 | cursor: pointer; 346 | 347 | /*DESKTOP*/ 348 | @media screen and (max-width: $desktop){ 349 | max-width: 120px; 350 | } 351 | 352 | /*PHABLET*/ 353 | @media screen and (max-width: $phablet){ 354 | max-width: 200px; 355 | } 356 | } 357 | 358 | .article-coauthors-icon-container{ 359 | display: -webkit-box; 360 | display: -ms-flexbox; 361 | display: flex; 362 | -webkit-box-align: center; 363 | -ms-flex-align: center; 364 | align-items: center; 365 | position: relative; 366 | cursor: pointer; 367 | margin-left: 10px; 368 | margin-right: 10px; 369 | 370 | /*PHABLET*/ 371 | @media screen and (max-width: $phablet){ 372 | position: absolute; 373 | right: 0; 374 | bottom: 0; 375 | top: 10px; 376 | height: 100%; 377 | } 378 | 379 | } 380 | 381 | .article-coauthors-list-open{ 382 | position: absolute; 383 | z-index: 2; 384 | left: -21px; 385 | right: -21px; 386 | top: -19px; 387 | padding: 21px; 388 | background: var(--card); 389 | -webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1); 390 | box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1); 391 | border-radius: 5px; 392 | cursor: pointer; 393 | list-style-type: none; 394 | -webkit-transform: translateY(-2px); 395 | -ms-transform: translateY(-2px); 396 | transform: translateY(-2px); 397 | 398 | 399 | li::before{ 400 | display: none; 401 | } 402 | } 403 | 404 | .article-icon-open-container{ 405 | position: absolute; 406 | cursor: pointer; 407 | top: 25px; 408 | right: 10px; 409 | 410 | } 411 | 412 | .article-coauthors-list-item-open{ 413 | padding: 0; 414 | a { 415 | width: 100%; 416 | } 417 | 418 | &:not(:last-child) { 419 | margin-bottom: 10px; 420 | } 421 | } 422 | 423 | .article-coauthor-avatar-open{ 424 | height: 25px; 425 | width: 25px; 426 | border-radius: 50%; 427 | margin-right: 15px; 428 | background: var(--grey); 429 | overflow: hidden; 430 | pointer-events: none; 431 | 432 | img{ 433 | width: 100%; 434 | } 435 | 436 | .gatsby-image-wrapper > div { 437 | padding-bottom: 100% !important; 438 | overflow: hidden; 439 | } 440 | } 441 | 442 | .article-author-name-open{ 443 | position: relative; 444 | cursor: pointer; 445 | color: var(--secondary); 446 | font-weight: 600; 447 | } 448 | 449 | /**************************************ARTICLE BODY**************************************/ 450 | 451 | .post-content{ 452 | padding: 160px 0 35px; 453 | } 454 | 455 | /**************************************ARTICLE NEXT**************************************/ 456 | 457 | .footer-next-heading{ 458 | display: block; 459 | font-size: 1.6rem; 460 | position: relative; 461 | opacity: 0.25; 462 | margin-left: 0; 463 | margin-right: 0; 464 | margin-bottom: 100px; 465 | min-width: 100%; 466 | font-weight: 400; 467 | color: var(--primary); 468 | 469 | /*TABLET*/ 470 | @media screen and (max-width: $tablet){ 471 | margin-bottom: 60px; 472 | } 473 | 474 | &::after { 475 | content: ''; 476 | position: absolute; 477 | background: var(--grey); 478 | width: 62%; 479 | max-width: 100%; 480 | height: 1px; 481 | right: 0; 482 | top: 50%; 483 | 484 | /*TABLET*/ 485 | @media screen and (max-width: $tablet){ 486 | width: 41.7%; 487 | } 488 | 489 | /*PHABLET*/ 490 | @media screen and (max-width: $phablet){ 491 | width: 27.8%; 492 | } 493 | 494 | /*PHONE*/ 495 | @media screen and (max-width: $phone){ 496 | width: 90px; 497 | } 498 | } 499 | } 500 | 501 | .footer-spacer{ 502 | margin-bottom: 65px; 503 | } -------------------------------------------------------------------------------- /assets/scss/articles.scss: -------------------------------------------------------------------------------- 1 | /****************************************HEADER****************************************/ 2 | 3 | .subheading-container{ 4 | display: -webkit-box; 5 | display: -ms-flexbox; 6 | display: flex; 7 | -webkit-box-align: center; 8 | -ms-flex-align: center; 9 | align-items: center; 10 | -webkit-box-pack: justify; 11 | -ms-flex-pack: justify; 12 | justify-content: space-between; 13 | margin-bottom: 100px; 14 | 15 | /*DESKTOP*/ 16 | @media screen and (max-width: $desktop){ 17 | margin-bottom: 80px; 18 | } 19 | 20 | /*TABLET*/ 21 | @media screen and (max-width: $tablet){ 22 | margin-bottom: 60px; 23 | } 24 | 25 | /*PHABLET*/ 26 | @media screen and (max-width: $phablet){ 27 | display: none; 28 | } 29 | } 30 | 31 | .grid-controls-container{ 32 | display: -webkit-box; 33 | display: -ms-flexbox; 34 | display: flex; 35 | -webkit-box-align: center; 36 | -ms-flex-align: center; 37 | align-items: center; 38 | 39 | /*TABLET*/ 40 | @media screen and (max-width: $tablet){ 41 | display: none !important; 42 | } 43 | } 44 | 45 | .heading-container{ 46 | margin: 100px 0; 47 | 48 | /*DESKTOP*/ 49 | @media screen and (max-width: $desktop){ 50 | width: 80%; 51 | } 52 | 53 | /*TABLET*/ 54 | @media screen and (max-width: $tablet){ 55 | width: 100%; 56 | } 57 | } 58 | 59 | .hero-heading{ 60 | font-style: normal; 61 | font-weight: 600; 62 | font-size: 52px; 63 | font-family: var(--sanserif); 64 | line-height: 1.15; 65 | color: var(--primary); 66 | margin: 0; 67 | 68 | /*DESKTOP*/ 69 | @media screen and (max-width: $desktop){ 70 | font-size: 38px 71 | } 72 | 73 | /*PHABLET*/ 74 | @media screen and (max-width: $phablet){ 75 | font-size: 32px; 76 | } 77 | } 78 | 79 | .grid-button{ 80 | position: relative; 81 | display: -webkit-box; 82 | display: -ms-flexbox; 83 | display: flex; 84 | -webkit-box-align: center; 85 | -ms-flex-align: center; 86 | align-items: center; 87 | -webkit-box-pack: center; 88 | -ms-flex-pack: center; 89 | justify-content: center; 90 | height: 36px; 91 | width: 36px; 92 | border-radius: 50%; 93 | background: transparent; 94 | -webkit-transition: background 0.25s; 95 | -o-transition: background 0.25s; 96 | transition: background 0.25s; 97 | 98 | &:not(:last-child) { 99 | margin-right: 30px; 100 | } 101 | 102 | &:hover { 103 | background: var(--hover); 104 | } 105 | 106 | &[data-a11y="true"]:focus::after { 107 | content: ""; 108 | position: absolute; 109 | left: -10%; 110 | top: -10%; 111 | width: 120%; 112 | height: 120%; 113 | border: 2px solid var(--accent); 114 | background: rgba(255, 255, 255, 0.01); 115 | border-radius: 50%; 116 | } 117 | 118 | svg { 119 | -webkit-transition: opacity 0.2s; 120 | -o-transition: opacity 0.2s; 121 | transition: opacity 0.2s; 122 | 123 | path { 124 | fill: var(--primary); 125 | } 126 | } 127 | } 128 | 129 | /****************************************LIST****************************************/ 130 | 131 | /*LIMIT TO TWO LINES*/ 132 | .limit-to-two-lines, .articles-title, .article-excerpt{ 133 | -o-text-overflow: ellipsis; 134 | text-overflow: ellipsis; 135 | overflow-wrap: normal; 136 | -webkit-line-clamp: 2; 137 | -webkit-box-orient: vertical; 138 | display: -webkit-box; 139 | white-space: normal; 140 | overflow: hidden; 141 | 142 | /*PHABLET*/ 143 | @media screen and (max-width: $phablet){ 144 | -webkit-line-clamp: 3; 145 | } 146 | } 147 | 148 | /*SHOW DETAILS*/ 149 | .show-details{ 150 | p { 151 | display: -webkit-box; 152 | } 153 | 154 | h2 { 155 | margin-bottom: 10px; 156 | } 157 | } 158 | 159 | .articles-list-container{ 160 | -webkit-transition: opacity 0.25s; 161 | -o-transition: opacity 0.25s; 162 | transition: opacity 0.25s; 163 | } 164 | 165 | .author-alc{ 166 | background-image: -webkit-gradient(linear, left top, left bottom, from(var(--card)), to(var(--background-color))); 167 | background-image: -o-linear-gradient(var(--card), var(--background-color)); 168 | background-image: linear-gradient(var(--card), var(--background-color)); 169 | padding-top: 90px; 170 | 171 | .post-row-alt{ 172 | -webkit-box-pack: center; 173 | -ms-flex-pack: center; 174 | justify-content: center; 175 | .article-link{ 176 | max-width: 40%!important; 177 | margin: 15px; 178 | } 179 | } 180 | } 181 | 182 | /*LIST TITLE*/ 183 | .list-title{ 184 | position: relative; 185 | display: -ms-grid; 186 | display: grid; 187 | -ms-grid-columns: 188 | '457px 1fr'; 189 | grid-template-columns: 190 | '457px 1fr'; 191 | -ms-grid-rows: 2; 192 | grid-template-rows: 2; 193 | -webkit-column-gap: 30px; 194 | -moz-column-gap: 30px; 195 | column-gap: 30px; 196 | 197 | &:not(:last-child) { 198 | margin-bottom: 75px; 199 | } 200 | 201 | /*DESKTOP MEDIUM*/ 202 | @media screen and (max-width: $desktop_medium){ 203 | grid-template-columns: 1fr 1fr; 204 | } 205 | 206 | /*TABLET*/ 207 | @media screen and (max-width: $tablet){ 208 | grid-template-columns: 1fr; 209 | 210 | &:not(:last-child) { 211 | margin-bottom: 0; 212 | } 213 | } 214 | 215 | } 216 | .list-title > *:nth-child(1){ 217 | -ms-grid-row: 1; 218 | -ms-grid-column: 1 219 | 220 | } 221 | 222 | .list-title-alt{ 223 | -ms-grid-columns: 224 | '457px 1fr'; 225 | grid-template-columns: 226 | '457px 1fr'; 227 | } 228 | 229 | .list-item-row{ 230 | display: -ms-grid; 231 | display: grid; 232 | -ms-grid-rows: 1fr; 233 | grid-template-rows: 1fr; 234 | -ms-grid-columns: 1fr 96px 488px; 235 | grid-template-columns: 1fr 488px; 236 | grid-column-gap: 96px; 237 | -ms-grid-rows: 1; 238 | grid-template-rows: 1; 239 | -webkit-box-align: center; 240 | -ms-flex-align: center; 241 | align-items: center; 242 | position: relative; 243 | margin-bottom: 50px; 244 | 245 | /*DESKTOP*/ 246 | @media screen and (max-width: $desktop){ 247 | grid-column-gap: 24px; 248 | grid-template-columns: 1fr 380px; 249 | } 250 | 251 | /*TABLET*/ 252 | @media screen and (max-width: $tablet){ 253 | grid-template-columns: 1fr; 254 | } 255 | 256 | @media (max-width: 540px) { 257 | background: var(--card); 258 | } 259 | 260 | /*PHABLET*/ 261 | @media screen and (max-width: $phablet){ 262 | -webkit-box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.2); 263 | box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.2); 264 | border-bottom-right-radius: 5px; 265 | border-bottom-left-radius: 5px; 266 | } 267 | 268 | 269 | }.list-item-row > *:nth-child(1){ 270 | -ms-grid-row: 1; 271 | -ms-grid-column: 1; 272 | 273 | 274 | }.list-item-row > *:nth-child(2){ 275 | -ms-grid-row: 1; 276 | } 277 | 278 | .list-item-tile{ 279 | position: relative; 280 | 281 | /*TABLET*/ 282 | @media screen and (max-width: $tablet){ 283 | margin-bottom: 60px; 284 | } 285 | 286 | @media (max-width: 540px) { 287 | background: var(--card); 288 | } 289 | 290 | /*PHABLET*/ 291 | @media screen and (max-width: $phablet){ 292 | margin-bottom: 40px; 293 | -webkit-box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.2); 294 | box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.2); 295 | border-bottom-right-radius: 5px; 296 | border-bottom-left-radius: 5px; 297 | } 298 | } 299 | 300 | .list-row{ 301 | display: -ms-grid; 302 | display: grid; 303 | -ms-grid-rows: "1fr 1fr"; 304 | grid-template-rows: "1fr 1fr"; 305 | } 306 | 307 | .list-row-alt{ 308 | -ms-grid-rows: "1fr"; 309 | grid-template-rows: "1fr"; 310 | } 311 | 312 | .image-container{ 313 | display: -webkit-box; 314 | display: -ms-flexbox; 315 | display: flex; 316 | -webkit-box-pack: center; 317 | -ms-flex-pack: center; 318 | justify-content: center; 319 | -webkit-box-align: center; 320 | -ms-flex-align: center; 321 | align-items: center; 322 | overflow: hidden; 323 | position: relative; 324 | height: 280px; 325 | -webkit-box-shadow: 0 30px 60px -10px rgba(0, 0, 0, 0.22), 326 | 0 18px 36px -18px rgba(0, 0, 0, 0.25); 327 | box-shadow: 0 30px 60px -10px rgba(0, 0, 0, 0.22), 328 | 0 18px 36px -18px rgba(0, 0, 0, 0.25); 329 | margin-bottom: 30px; 330 | -webkit-transition: -webkit-transform 0.3s var(--ease-out-quad), 331 | -webkit-box-shadow 0.3s var(--ease-out-quad); 332 | transition: -webkit-transform 0.3s var(--ease-out-quad), 333 | -webkit-box-shadow 0.3s var(--ease-out-quad); 334 | -o-transition: transform 0.3s var(--ease-out-quad), 335 | box-shadow 0.3s var(--ease-out-quad); 336 | transition: transform 0.3s var(--ease-out-quad), 337 | box-shadow 0.3s var(--ease-out-quad); 338 | transition: transform 0.3s var(--ease-out-quad), 339 | box-shadow 0.3s var(--ease-out-quad), 340 | -webkit-transform 0.3s var(--ease-out-quad), 341 | -webkit-box-shadow 0.3s var(--ease-out-quad); 342 | 343 | & > div { 344 | height: 100%; 345 | } 346 | 347 | /*TABLET*/ 348 | @media screen and (max-width: $tablet){ 349 | height: 200px; 350 | margin-bottom: 35px; 351 | } 352 | 353 | /*PHABLET*/ 354 | @media screen and (max-width: $phablet){ 355 | overflow: hidden; 356 | margin-bottom: 0; 357 | -webkit-box-shadow: none; 358 | box-shadow: none; 359 | border-top-right-radius: 5px; 360 | border-top-left-radius: 5px; 361 | } 362 | } 363 | 364 | .article-image{ 365 | -ms-flex-negative: 0; 366 | flex-shrink: 0; 367 | max-width: 100%; 368 | min-height: 100%; 369 | -o-object-fit: cover; 370 | object-fit: cover; 371 | } 372 | 373 | .article-title{ 374 | font-size: 21px; 375 | font-family: var(--serif); 376 | margin-bottom: 35px; 377 | -webkit-transition: color 0.3s ease-in-out; 378 | -o-transition: color 0.3s ease-in-out; 379 | transition: color 0.3s ease-in-out; 380 | 381 | /*DESKTOP*/ 382 | @media screen and (max-width: $desktop){ 383 | margin-bottom: 15px; 384 | } 385 | 386 | /*TABLET*/ 387 | @media screen and (max-width: $tablet){ 388 | font-size: 24px; 389 | } 390 | 391 | /*PHABLET*/ 392 | @media screen and (max-width: $phablet){ 393 | font-size: 22px; 394 | padding: 0 20px 0; 395 | margin-bottom: 10px; 396 | -webkit-line-clamp: 3; 397 | } 398 | } 399 | 400 | .article-excerpt{ 401 | font-size: 16px; 402 | margin-left: 0; 403 | margin-right: 0; 404 | margin-bottom: 10px; 405 | color: var(--grey); 406 | display: none; 407 | 408 | /*DESKTOP*/ 409 | @media screen and (max-width: $desktop){ 410 | display: -webkit-box; 411 | } 412 | 413 | /*PHABLET*/ 414 | @media screem and (max-width: $phablet){ 415 | margin-bottom: 15px; 416 | max-width: 100%; 417 | padding: 0 20px; 418 | margin-bottom: 20px; 419 | -webkit-line-clamp: 3; 420 | } 421 | } 422 | 423 | .article-metadata{ 424 | font-weight: 600; 425 | font-size: 16px; 426 | color: var(--grey); 427 | opacity: 0.33; 428 | 429 | /*PHABLET*/ 430 | @media screen and (max-width: $phablet){ 431 | max-width: 100%; 432 | padding: 0 20px 30px; 433 | } 434 | } 435 | 436 | .post-row{ 437 | display: -webkit-box; 438 | display: -ms-flexbox; 439 | display: flex; 440 | -webkit-box-pack: justify; 441 | -ms-flex-pack: justify; 442 | justify-content: space-between; 443 | width: 100%; 444 | margin-bottom: 100px; 445 | 446 | /*TABLET*/ 447 | @media screen and (max-width: $tablet){ 448 | margin: 0; 449 | -ms-flex-wrap: wrap; 450 | flex-wrap: wrap; 451 | -webkit-box-pack: center; 452 | -ms-flex-pack: center; 453 | justify-content: center; 454 | } 455 | } 456 | 457 | .post-row-alt{ 458 | display: -webkit-box; 459 | display: -ms-flexbox; 460 | display: flex; 461 | -webkit-box-pack: justify; 462 | -ms-flex-pack: justify; 463 | justify-content: space-between; 464 | width: 100%; 465 | margin-bottom: 100px; 466 | -ms-flex-wrap: wrap; 467 | flex-wrap: wrap; 468 | 469 | .article-link{ 470 | margin-top: 75px; 471 | max-width: 48.3%; 472 | 473 | /*TABLET*/ 474 | @media screen and (max-width: $tablet){ 475 | max-width: 100%; 476 | } 477 | } 478 | } 479 | 480 | .article-link{ 481 | max-width: 39.5%; 482 | position: relative; 483 | display: block; 484 | width: 100%; 485 | top: 0; 486 | left: 0; 487 | border-radius: 5px; 488 | z-index: 1; 489 | -webkit-transition: -webkit-transform 0.33s var(--ease-out-quart); 490 | transition: -webkit-transform 0.33s var(--ease-out-quart); 491 | -o-transition: transform 0.33s var(--ease-out-quart); 492 | transition: transform 0.33s var(--ease-out-quart); 493 | transition: transform 0.33s var(--ease-out-quart), -webkit-transform 0.33s var(--ease-out-quart); 494 | -webkit-tap-highlight-color: rgba(255, 255, 255, 0); 495 | 496 | &:hover{ 497 | text-decoration: none; 498 | } 499 | 500 | &:hover .image-container, &:focus .image-container { 501 | -webkit-transform: translateY(-1px); 502 | -ms-transform: translateY(-1px); 503 | transform: translateY(-1px); 504 | -webkit-box-shadow: 0 50px 80px -20px rgba(0, 0, 0, 0.27), 505 | 0 30px 50px -30px rgba(0, 0, 0, 0.3); 506 | box-shadow: 0 50px 80px -20px rgba(0, 0, 0, 0.27), 507 | 0 30px 50px -30px rgba(0, 0, 0, 0.3); 508 | } 509 | 510 | &:hover h2, 511 | &:focus h2 { 512 | color: var(--accent); 513 | } 514 | 515 | &[data-a11y="true"]:focus::after { 516 | content: ""; 517 | position: absolute; 518 | left: -1.5%; 519 | top: -2%; 520 | width: 103%; 521 | height: 104%; 522 | border: 3px solid var(--accent); 523 | background: rgba(255, 255, 255, 0.01); 524 | border-radius: 5px; 525 | } 526 | 527 | /*DESKTOP MEDIUM*/ 528 | @media screen and (max-width: $desktop_medium){ 529 | max-width: 48.5%; 530 | } 531 | 532 | /*TABLET*/ 533 | @media screen and (max-width: $tablet){ 534 | min-width: 80% !important; 535 | display: block; 536 | margin-bottom: 60px; 537 | 538 | p{ 539 | padding: 0; 540 | } 541 | } 542 | 543 | /*PHABLET*/ 544 | @media screen and (max-width: $phablet){ 545 | min-width: 100% !important; 546 | margin-bottom: 40px; 547 | -webkit-box-shadow: 0px 20px 40px rgba(0,0,0,0.2); 548 | box-shadow: 0px 20px 40px rgba(0,0,0,0.2); 549 | 550 | &:hover .image-container { 551 | -webkit-transform: none; 552 | -ms-transform: none; 553 | transform: none; 554 | -webkit-box-shadow: initial; 555 | box-shadow: initial; 556 | } 557 | 558 | &:active { 559 | -webkit-transform: scale(0.97) translateY(3px); 560 | -ms-transform: scale(0.97) translateY(3px); 561 | transform: scale(0.97) translateY(3px); 562 | } 563 | 564 | p{ 565 | padding: 0 20px 0; 566 | } 567 | } 568 | } 569 | 570 | #article-link-bigger{ 571 | max-width: 58.5% !important; 572 | 573 | /*DESKTOP MEDIUM*/ 574 | @media screen and (max-width: $desktop_medium){ 575 | max-width: 48.5% !important; 576 | } 577 | } 578 | 579 | .articles-list-container-alt{ 580 | 581 | .post-row{ 582 | -ms-flex-wrap: wrap !important; 583 | flex-wrap: wrap !important; 584 | margin-bottom: 0; 585 | 586 | .article-link{ 587 | display: -webkit-box !important; 588 | display: -ms-flexbox !important; 589 | display: flex !important; 590 | min-width: 100% !important; 591 | -webkit-box-orient: horizontal; 592 | -webkit-box-direction: normal; 593 | -ms-flex-direction: row; 594 | flex-direction: row; 595 | -ms-flex-wrap: none; 596 | flex-wrap: none; 597 | 598 | .article-data-outer{ 599 | display: -webkit-box !important; 600 | display: -ms-flexbox !important; 601 | display: flex !important; 602 | min-width: 100% !important; 603 | -webkit-box-orient: horizontal; 604 | -webkit-box-direction: normal; 605 | -ms-flex-direction: row; 606 | flex-direction: row; 607 | -ms-flex-wrap: none; 608 | flex-wrap: none; 609 | -webkit-box-pack: justify; 610 | -ms-flex-pack: justify; 611 | justify-content: space-between; 612 | 613 | .image-container{ 614 | max-width: 46%; 615 | } 616 | 617 | .article-data{ 618 | width: 46%; 619 | } 620 | } 621 | } 622 | 623 | } 624 | } -------------------------------------------------------------------------------- /assets/scss/authors.scss: -------------------------------------------------------------------------------- 1 | /****************************HERO****************************/ 2 | .author-hero{ 3 | position: relative; 4 | z-index: 1; 5 | display: -webkit-box; 6 | display: -ms-flexbox; 7 | display: flex; 8 | -webkit-box-orient: vertical; 9 | -webkit-box-direction: normal; 10 | -ms-flex-direction: column; 11 | flex-direction: column; 12 | -webkit-box-align: center; 13 | -ms-flex-align: center; 14 | align-items: center; 15 | -webkit-box-pack: center; 16 | -ms-flex-pack: center; 17 | justify-content: center; 18 | margin: 35px auto 110px; 19 | } 20 | 21 | .author-hero-image{ 22 | position: relative; 23 | z-index: 1; 24 | height: 164px; 25 | width: 164px; 26 | margin-bottom: 35px; 27 | border-radius: 50%; 28 | overflow: hidden; 29 | border: 2px solid var(background-color); 30 | -webkit-box-shadow: 0px 15.619px 31.2381px rgba(0, 0, 0, 0.15); 31 | box-shadow: 0px 15.619px 31.2381px rgba(0, 0, 0, 0.15); 32 | border: 2px solid var(--card); 33 | 34 | img{ 35 | width: 100%; 36 | } 37 | 38 | /*TABLET*/ 39 | @media screen and (max-width: $tablet){ 40 | width: 146px; 41 | height: 146px; 42 | } 43 | 44 | /*PHABLET*/ 45 | @media screen and (max-width: $phablet){ 46 | width: 136px; 47 | height: 136px; 48 | margin-bottom: 25px; 49 | } 50 | } 51 | 52 | .author-heading{ 53 | font-size: 38px; 54 | font-family: var(--sanserif); 55 | color: var(--primary); 56 | margin-bottom: 15px; 57 | font-weight: 600; 58 | text-align: center; 59 | } 60 | 61 | .author-subheading{ 62 | margin: 0 auto; 63 | max-width: 450px; 64 | color: var(--grey); 65 | font-size: 18px; 66 | font-family: var(--sanserif); 67 | line-height: 1.4; 68 | text-align: center; 69 | 70 | /*PHABLET*/ 71 | @media screen and (max-width: $phablet){ 72 | font-size: 14px; 73 | } 74 | } 75 | 76 | .author-social{ 77 | display: -webkit-box; 78 | display: -ms-flexbox; 79 | display: flex; 80 | -webkit-box-align: center; 81 | -ms-flex-align: center; 82 | align-items: center; 83 | -webkit-box-pack: center; 84 | -ms-flex-pack: center; 85 | justify-content: center; 86 | margin-top: 35px; 87 | width: 100%; 88 | 89 | /*PHABLET*/ 90 | @media screen and (max-width: $phablet){ 91 | font-size: 14px; 92 | } 93 | } 94 | 95 | /****************************CONTENT****************************/ 96 | .authors-gradient{ 97 | position: absolute; 98 | bottom: 0; 99 | left: 0; 100 | width: 100%; 101 | height: 590px; 102 | z-index: 0; 103 | pointer-events: none; 104 | background: var(--gradient); 105 | -webkit-transition: var(--color-mode-transition); 106 | -o-transition: var(--color-mode-transition); 107 | transition: var(--color-mode-transition); 108 | } -------------------------------------------------------------------------------- /assets/scss/bio.scss: -------------------------------------------------------------------------------- 1 | .bio-container{ 2 | display: -webkit-box; 3 | display: -ms-flexbox; 4 | display: flex; 5 | -webkit-box-align: center; 6 | -ms-flex-align: center; 7 | align-items: center; 8 | position: relative; 9 | left: -10px; 10 | } 11 | 12 | .bio-link{ 13 | display: -webkit-box; 14 | display: -ms-flexbox; 15 | display: flex; 16 | -webkit-box-align: center; 17 | -ms-flex-align: center; 18 | align-items: center; 19 | 20 | &:hover{ 21 | text-decoration: none; 22 | } 23 | } 24 | 25 | .bio-avatar{ 26 | display: block; 27 | position: relative; 28 | height: 40px; 29 | width: 40px; 30 | border-radius: 50%; 31 | background: rgba(0, 0, 0, 0.25); 32 | margin-right: 16px; 33 | margin: 10px 26px 10px 10px; 34 | } 35 | 36 | .bio-avatar::after { 37 | content: ""; 38 | position: absolute; 39 | left: -5px; 40 | top: -5px; 41 | width: 50px; 42 | height: 50px; 43 | border-radius: 50%; 44 | border: 1px solid rgba(0, 0, 0, 0.25); 45 | } 46 | 47 | .bio-avatar[data-a11y="true"]:focus::after { 48 | content: ""; 49 | position: absolute; 50 | left: -5px; 51 | top: -5px; 52 | width: 50px; 53 | height: 50px; 54 | border: 2px solid var(--accent); 55 | } 56 | 57 | .bio-avatar-inner{ 58 | height: 40px; 59 | width: 40px; 60 | border-radius: 50%; 61 | background: rgba(0, 0, 0, 0.25); 62 | margin-right: 16px; 63 | overflow: hidden; 64 | } 65 | 66 | .bio-text{ 67 | margin-bottom: 0; 68 | max-width: 430px; 69 | font-size: 14px; 70 | line-height: 1.45; 71 | color: var(--grey); 72 | } 73 | 74 | .author-avatar{ 75 | width: 100%; 76 | } -------------------------------------------------------------------------------- /assets/scss/blockquote.scss: -------------------------------------------------------------------------------- 1 | blockquote{ 2 | -webkit-transition: var(--color-mode-transition); 3 | -o-transition: var(--color-mode-transition); 4 | transition: var(--color-mode-transition); 5 | margin: 15px auto 50px; 6 | color: var(--articleText); 7 | font-family: var(--serif); 8 | font-style: italic; 9 | } 10 | 11 | blockquote > p { 12 | font-family: var(--serif); 13 | max-width: 880px !important; 14 | padding-right: 100px; 15 | padding-bottom: 0; 16 | width: 100%; 17 | margin: 0 auto; 18 | font-size: 36px; 19 | line-height: 1.32; 20 | font-weight: bold; 21 | } 22 | 23 | @media screen and (max-width: 735px) { 24 | blockquote{ 25 | margin: 10px auto 35px; 26 | font-size: 26px; 27 | padding: 0 180px; 28 | } 29 | } 30 | 31 | @media screen and (max-width: 540px) { 32 | blockquote{ 33 | font-size: 36px; 34 | padding: 0 20px 0 40px; 35 | } 36 | } -------------------------------------------------------------------------------- /assets/scss/code.scss: -------------------------------------------------------------------------------- 1 | .code-toolbar{ 2 | max-width: 750px; 3 | margin: 0 auto 35px; 4 | overflow: auto; 5 | font-size: 12px; 6 | 7 | pre{ 8 | padding-top: 2.5em !important; 9 | padding-bottom: 2.5em !important; 10 | padding-left: 5em !important; 11 | padding-right: 5em !important; 12 | border-radius: 5px !important; 13 | background-color: #292c34 !important; 14 | 15 | code{ 16 | color: white; 17 | } 18 | } 19 | 20 | .toolbar-item{ 21 | position: absolute; 22 | top: 1em; 23 | right: 1em; 24 | } 25 | } -------------------------------------------------------------------------------- /assets/scss/global.scss: -------------------------------------------------------------------------------- 1 | @import "vars.scss"; 2 | @import "anchor.scss"; 3 | @import "bio.scss"; 4 | @import "blockquote.scss"; 5 | @import "headings.scss"; 6 | @import "horizontal-rule.scss"; 7 | @import "image.scss"; 8 | @import "layout.scss"; 9 | @import "lists.scss"; 10 | @import "logo.scss"; 11 | @import "navigation.scss"; 12 | @import "paragraph.scss"; 13 | @import "progress.scss"; 14 | @import "social-links.scss"; 15 | @import "subscription.scss"; 16 | @import "tables.scss"; 17 | @import "section.scss"; 18 | @import "articles.scss"; 19 | @import "home-articles.scss"; 20 | @import "code.scss"; 21 | @import "article.scss"; 22 | @import "authors.scss"; 23 | @import "paginator.scss"; 24 | 25 | 26 | /** 27 | * Thanks to Benjamin De Cock 28 | * https://gist.github.com/bendc/ac03faac0bf2aee25b49e5fd260a727d 29 | */ 30 | :root { 31 | --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53); 32 | --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22); 33 | --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); 34 | --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1); 35 | --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955); 36 | --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1); 37 | } 38 | 39 | @font-face { 40 | font-family: "-apple-system", "BlinkMacSystemFont", "San Francisco", 41 | "Helvetica Neue", "Helvetica", "Ubuntu", "Roboto", "Noto", "Segoe UI", 42 | "Arial", sans-serif; 43 | font-weight: 400; 44 | font-style: normal; 45 | } 46 | 47 | *, 48 | *:before, 49 | *:after { 50 | -webkit-box-sizing: inherit; 51 | box-sizing: inherit; 52 | margin: 0; 53 | padding: 0; 54 | font-size: inherit; 55 | } 56 | 57 | :root { 58 | -ms-overflow-style: -ms-autohiding-scrollbar; 59 | -webkit-box-sizing: border-box; 60 | box-sizing: border-box; 61 | -webkit-font-smoothing: antialiased; 62 | -moz-osx-font-smoothing: grayscale; 63 | text-rendering: optimizeLegibility; 64 | cursor: default; 65 | font-size: 0.625rem; 66 | line-height: 1.4; 67 | } 68 | 69 | body { 70 | font-family: "-apple-system", "BlinkMacSystemFont", "San Francisco", 71 | "Helvetica Neue", "Helvetica", "Ubuntu", "Roboto", "Noto", "Segoe UI", 72 | "Arial", sans-serif; 73 | font-size: 1.6rem; 74 | margin: 0; 75 | font-weight: 400; 76 | height: 100%; 77 | } 78 | 79 | button, 80 | a { 81 | text-decoration: none; 82 | cursor: pointer; 83 | } 84 | 85 | a:focus { 86 | outline: none; 87 | } 88 | 89 | audio, 90 | canvas, 91 | iframe, 92 | img, 93 | svg, 94 | video { 95 | vertical-align: middle; 96 | } 97 | 98 | input, 99 | textarea, 100 | select, 101 | button { 102 | font-family: "-apple-system", "BlinkMacSystemFont", "San Francisco", 103 | "Helvetica Neue", "Helvetica", "Ubuntu", "Roboto", "Noto", "Segoe UI", 104 | "Arial", sans-serif; 105 | } 106 | 107 | .underline { 108 | text-decoration: underline; 109 | } 110 | 111 | button, 112 | input, 113 | select, 114 | textarea { 115 | color: inherit; 116 | font-family: inherit; 117 | font-style: inherit; 118 | font-weight: inherit; 119 | } 120 | 121 | code, 122 | kbd, 123 | pre, 124 | samp { 125 | font-family: monospace; 126 | } 127 | 128 | fieldset, 129 | button { 130 | -webkit-appearance: none; 131 | -moz-appearance: none; 132 | appearance: none; 133 | border: none; 134 | outline: none; 135 | background: transparent; 136 | } 137 | 138 | table { 139 | border-collapse: separate; 140 | border-spacing: 0; 141 | } 142 | 143 | audio:not([controls]) { 144 | display: none; 145 | } 146 | 147 | details { 148 | display: block; 149 | } 150 | 151 | input { 152 | &:focus, 153 | &:active { 154 | outline: none; 155 | } 156 | 157 | &[type="number"] { 158 | width: auto; 159 | } 160 | } 161 | 162 | img.Image__Zoom ~ div { 163 | background: transparent !important; 164 | } 165 | 166 | .Image__Small{ 167 | width: 100%; 168 | max-width: 680px; 169 | margin-left: auto; 170 | margin-right: auto; 171 | margin-bottom: 35px; 172 | img{ 173 | width: 100%; 174 | } 175 | } 176 | 177 | .Image__medium{ 178 | width: 100%; 179 | margin-left: auto; 180 | margin-right: auto; 181 | margin-bottom: 35px; 182 | img{ 183 | width: 100%; 184 | } 185 | } 186 | 187 | .Image__large{ 188 | width: 100%; 189 | margin-bottom: 35px; 190 | img{ 191 | width: 100vw; 192 | position: relative; 193 | left: 50%; 194 | right: 50%; 195 | margin-left: -50vw; 196 | margin-right: -50vw; 197 | } 198 | } 199 | 200 | .author-alc-section{ 201 | padding-left: 0; 202 | padding-right: 0; 203 | } 204 | 205 | .icon-image{ 206 | path{ 207 | fill: var(--primary); 208 | } 209 | } 210 | 211 | img{ 212 | max-width: 100%; 213 | -webkit-animation-name: image-load-in; 214 | animation-name: image-load-in; 215 | -webkit-animation-duration: 0.8s; 216 | animation-duration: 0.8s; 217 | } 218 | 219 | @-webkit-keyframes image-load-in { 220 | 0% {-webkit-filter: blur(8px);filter: blur(8px); opacity: 0;} 221 | 100% {-webkit-filter: blur(0);filter: blur(0); opacity: 1;} 222 | } 223 | 224 | @keyframes image-load-in { 225 | 0% {-webkit-filter: blur(8px);filter: blur(8px); opacity: 0;} 226 | 100% {-webkit-filter: blur(0);filter: blur(0); opacity: 1;} 227 | } 228 | -------------------------------------------------------------------------------- /assets/scss/headings.scss: -------------------------------------------------------------------------------- 1 | h1, h2, h3, h4, h5, h6{ 2 | margin: 0 auto; 3 | font-weight: bold; 4 | color: var(--primary); 5 | font-family: var(--serif); 6 | width: 100%; 7 | max-width: 680px; 8 | } 9 | 10 | h1, h1 *, h2, h2 * { 11 | margin: 25px auto 18px; 12 | } 13 | 14 | h3, h3 * { 15 | margin: 20px auto 10px; 16 | } 17 | 18 | h1{ 19 | font-size: 52px; 20 | line-height: 1.15; 21 | } 22 | 23 | h2{ 24 | font-size: 32px; 25 | line-height: 1.333; 26 | } 27 | 28 | h3{ 29 | font-size: 24px; 30 | line-height: 1.45; 31 | } 32 | 33 | h4{ 34 | font-size: 18px; 35 | line-height: 1.45; 36 | } 37 | 38 | h5{ 39 | font-size: 18px; 40 | line-height: 1.45; 41 | } 42 | 43 | h6{ 44 | font-size: 16px; 45 | line-height: 1.45; 46 | } 47 | 48 | @media screen and (max-width: 1070px){ 49 | h1{ 50 | font-size: 38px; 51 | line-height: 1.2; 52 | } 53 | h2{ 54 | font-size: 21px; 55 | } 56 | } 57 | 58 | @media screen and (max-width: 737px){ 59 | h1, h2{ 60 | margin: 30px auto 18px; 61 | } 62 | h2{ 63 | font-size: 24px; 64 | line-height: 1.45; 65 | } 66 | h3{ 67 | font-size: 22px; 68 | } 69 | } 70 | 71 | @media screen and (max-width: 540px){ 72 | h1{ 73 | font-size: 32px; 74 | line-height: 1.3; 75 | } 76 | h2{ 77 | font-size: 22px; 78 | } 79 | h3{ 80 | font-size: 20px; 81 | } 82 | h4{ 83 | font-size: 16px; 84 | } 85 | h5{ 86 | font-size: 16px; 87 | } 88 | h6{ 89 | font-size: 14px; 90 | } 91 | } -------------------------------------------------------------------------------- /assets/scss/home-articles.scss: -------------------------------------------------------------------------------- 1 | .articles-gradient{ 2 | position: absolute; 3 | bottom: 0; 4 | left: 0; 5 | width: 100%; 6 | height: 590px; 7 | z-index: 0; 8 | pointer-events: none; 9 | background: var(--gradient); 10 | -webkit-transition: var(--color-mode-transition); 11 | -o-transition: var(--color-mode-transition); 12 | transition: var(--color-mode-transition); 13 | } 14 | 15 | .articles-paginator{ 16 | margin-top: 95px; 17 | } -------------------------------------------------------------------------------- /assets/scss/horizontal-rule.scss: -------------------------------------------------------------------------------- 1 | hr{ 2 | position: relative; 3 | width: 100%; 4 | max-width: 680px; 5 | margin: 50px auto; 6 | border: 0; 7 | height: 14.36px; 8 | background-repeat: repeat-x; 9 | -webkit-box-sizing: border-box; 10 | box-sizing: border-box; 11 | background-position: center; 12 | } 13 | 14 | @media screen and (max-width: 1070px){ 15 | hr{ 16 | max-width: 507px; 17 | } 18 | } 19 | 20 | @media screen and (max-width: 735px){ 21 | hr{ 22 | max-width: 486px; 23 | width: calc(100vw - 40px); 24 | margin: 0px auto 50px; 25 | } 26 | } 27 | 28 | @media screen and (max-width: 340px){ 29 | hr{ 30 | padding: 0 20px; 31 | } 32 | } -------------------------------------------------------------------------------- /assets/scss/image.scss: -------------------------------------------------------------------------------- 1 | .image-placeholder{ 2 | display: -webkit-box; 3 | display: -ms-flexbox; 4 | display: flex; 5 | -webkit-box-align: center; 6 | -ms-flex-align: center; 7 | align-items: center; 8 | -webkit-box-pack: center; 9 | -ms-flex-pack: center; 10 | justify-content: center; 11 | width: 100%; 12 | height: 100%; 13 | background: #ccc; 14 | color: #898989; 15 | font-size: 32px; 16 | font-weight: 600; 17 | } 18 | 19 | .image-zoom{ 20 | display: block; 21 | margin: 0 auto; 22 | width: 100%; 23 | } 24 | 25 | @media screen and (max-width: 540px){ 26 | .image-placeholder{ 27 | font-size: 28px; 28 | } 29 | } -------------------------------------------------------------------------------- /assets/scss/layout.scss: -------------------------------------------------------------------------------- 1 | .layout-styled{ 2 | position: relative; 3 | background: var(--background-color); 4 | -webkit-transition: var(--color-mode-transition); 5 | -o-transition: var(--color-mode-transition); 6 | transition: var(--color-mode-transition); 7 | min-height: 100vh; 8 | } -------------------------------------------------------------------------------- /assets/scss/lists.scss: -------------------------------------------------------------------------------- 1 | ul{ 2 | list-style: none; 3 | counter-reset: list; 4 | color: var(--articleText); 5 | position: relative; 6 | padding: 15px 0 30px 30px; 7 | -webkit-transition: var(--color-mode-transition); 8 | -o-transition: var(--color-mode-transition); 9 | transition: var(--color-mode-transition); 10 | margin: 0 auto; 11 | font-size: 18px; 12 | 13 | width: 100%; 14 | max-width: 680px; 15 | } 16 | 17 | /*DESKTOP*/ 18 | @media screen and (max-width: 1070px){ 19 | ul{ 20 | max-width: 507px; 21 | } 22 | } 23 | 24 | /*TABLET*/ 25 | @media screen and (max-width: 735px){ 26 | ul{ 27 | max-width: 486px; 28 | padding-left: 0px; 29 | } 30 | } 31 | 32 | /*PHABLET*/ 33 | @media screen and (max-width: 540px){ 34 | ul{ 35 | padding-left: 20px; 36 | } 37 | } 38 | 39 | li{ 40 | position: relative; 41 | padding-bottom: 15px; 42 | } 43 | 44 | /*TABLET*/ 45 | @media screen and (max-width: 735px){ 46 | ul li{ 47 | padding-left: 30px; 48 | } 49 | 50 | ul li p{ 51 | padding: 0; 52 | } 53 | } 54 | 55 | /*PHABLET*/ 56 | @media screen and (max-width: 540px){ 57 | ul li{ 58 | padding-left: 30px; 59 | } 60 | } 61 | 62 | ul li > *{ 63 | display: inline; 64 | } 65 | 66 | ul li::before{ 67 | width: 3rem; 68 | display: inline-block; 69 | position: absolute; 70 | color: var(--articleText); 71 | content: ""; 72 | position: absolute; 73 | left: -30px; 74 | top: 8px; 75 | height: 8px; 76 | width: 8px; 77 | background: var(--articleText); 78 | } 79 | 80 | /*TABLET*/ 81 | @media screen and (max-width: 735px){ 82 | ul li::before{ 83 | left: 0; 84 | } 85 | } 86 | 87 | ol{ 88 | list-style: none; 89 | counter-reset: list; 90 | color: var(--articleText); 91 | position: relative; 92 | padding: 15px 0 30px 30px; 93 | margin: 0 auto; 94 | -webkit-transition: var(--color-mode-transition); 95 | -o-transition: var(--color-mode-transition); 96 | transition: var(--color-mode-transition); 97 | font-size: 18px; 98 | width: 100%; 99 | max-width: 680px; 100 | } 101 | 102 | /*DESKTOP*/ 103 | @media screen and (max-width: 1070px){ 104 | ol{ 105 | max-width: 507px; 106 | } 107 | } 108 | 109 | /*TABLET*/ 110 | @media screen and (max-width: 735px){ 111 | ol{ 112 | max-width: 486px; 113 | padding-left: 0px; 114 | } 115 | } 116 | 117 | /*PHABLET*/ 118 | @media screen and (max-width: 540px){ 119 | ol{ 120 | padding-left: 20px; 121 | } 122 | } 123 | 124 | ol li{ 125 | position: relative; 126 | padding-bottom: 15px; 127 | } 128 | 129 | /*TABLET*/ 130 | @media screen and (max-width: 735px){ 131 | ol li{ 132 | padding-left: 30px; 133 | padding: 0; 134 | } 135 | ol li p{ 136 | padding-left: 30px; 137 | } 138 | } 139 | 140 | /*PHABLET*/ 141 | @media screen and (max-width: 540px){ 142 | ol li{ 143 | padding-left: 30px; 144 | } 145 | } 146 | 147 | ol li > *{ 148 | display: inline; 149 | } 150 | 151 | ol li::before { 152 | width: 3rem; 153 | display: inline-block; 154 | position: absolute; 155 | color: var(--articleText); 156 | counter-increment: list; 157 | content: counter(list) "."; 158 | font-weight: 600; 159 | position: absolute; 160 | left: -3rem; 161 | top: -0.3rem; 162 | font-size: 2rem; 163 | } 164 | 165 | @media screen and (max-width: 735px){ 166 | ol li::before{ 167 | left: 0; 168 | } 169 | } -------------------------------------------------------------------------------- /assets/scss/logo.scss: -------------------------------------------------------------------------------- 1 | #logo-desktop{ 2 | .change-fill{ 3 | fill: var(--primary); 4 | } 5 | } 6 | 7 | #logo-mobile{ 8 | path{ 9 | fill: var(--primary); 10 | } 11 | } 12 | 13 | @media screen and (max-width: 735px){ 14 | .Logo__Desktop { 15 | display: none; 16 | } 17 | .Logo__Mobile{ 18 | display: block; 19 | } 20 | } -------------------------------------------------------------------------------- /assets/scss/navigation.scss: -------------------------------------------------------------------------------- 1 | /************************FOOTER************************/ 2 | 3 | .footer-container{ 4 | position: relative; 5 | display: -webkit-box; 6 | display: -ms-flexbox; 7 | display: flex; 8 | -webkit-box-align: center; 9 | -ms-flex-align: center; 10 | align-items: center; 11 | -webkit-box-pack: justify; 12 | -ms-flex-pack: justify; 13 | justify-content: space-between; 14 | padding-bottom: 80px; 15 | color: var(--grey); 16 | } 17 | 18 | /*TABLET*/ 19 | @media screen and (max-width: 735px){ 20 | .footer-container{ 21 | -webkit-box-orient: vertical; 22 | -webkit-box-direction: normal; 23 | -ms-flex-direction: column; 24 | flex-direction: column; 25 | padding-bottom: 100px; 26 | } 27 | } 28 | 29 | /*PHABLET*/ 30 | @media screen and (max-width: 540px){ 31 | .footer-container{ 32 | padding-bottom: 50px; 33 | } 34 | } 35 | 36 | .footer-hr{ 37 | position: relative; 38 | margin: 140px auto 50px; 39 | border-bottom: 1px solid var(--horizontalRule); 40 | } 41 | 42 | /*TABLET*/ 43 | @media screen and (max-width: 735px){ 44 | .footer-hr{ 45 | margin: 60px auto; 46 | } 47 | .footer-text{ 48 | margin-bottom: 80px; 49 | } 50 | } 51 | 52 | /*PHABLET*/ 53 | @media screen and (max-width: 540px){ 54 | .footer-hr{ 55 | display: none; 56 | } 57 | .footer-text{ 58 | margin: 120px auto 100px; 59 | } 60 | } 61 | 62 | .footer-gradient{ 63 | position: absolute; 64 | bottom: 0; 65 | left: 0; 66 | width: 100%; 67 | height: 590px; 68 | z-index: 0; 69 | pointer-events: none; 70 | background: var(--gradient); 71 | -webkit-transition: var(--color-mode-transition); 72 | -o-transition: var(--color-mode-transition); 73 | transition: var(--color-mode-transition); 74 | mix-blend-mode: lighten; 75 | } 76 | 77 | /************************HEADER************************/ 78 | 79 | .back-arrow-ico-container{ 80 | -webkit-transition: 0.2s -webkit-transform var(--ease-out-quad); 81 | transition: 0.2s -webkit-transform var(--ease-out-quad); 82 | -o-transition: 0.2s transform var(--ease-out-quad); 83 | transition: 0.2s transform var(--ease-out-quad); 84 | transition: 0.2s transform var(--ease-out-quad), 0.2s -webkit-transform var(--ease-out-quad); 85 | opacity: 0; 86 | padding-right: 30px; 87 | -webkit-animation: fadein 0.3s linear forwards; 88 | animation: fadein 0.3s linear forwards; 89 | } 90 | 91 | @-webkit-keyframes fadein { 92 | to { 93 | opacity: 1; 94 | } 95 | } 96 | 97 | @keyframes fadein { 98 | to { 99 | opacity: 1; 100 | } 101 | } 102 | 103 | /*DESKTOP MEDIUM*/ 104 | @media screen and (max-width: 1280px){ 105 | .back-arrow-ico-container{ 106 | display: none; 107 | } 108 | } 109 | 110 | .nav-container{ 111 | position: relative; 112 | z-index: 100; 113 | padding-top: 100px; 114 | display: -webkit-box; 115 | display: -ms-flexbox; 116 | display: flex; 117 | -webkit-box-pack: justify; 118 | -ms-flex-pack: justify; 119 | justify-content: space-between; 120 | } 121 | 122 | @media screen and (max-height: 800px) { 123 | .nav-container{ 124 | padding-top: 50px; 125 | } 126 | } 127 | 128 | /*DESKTOP MEDIUM*/ 129 | @media screen and (max-width: 1280px){ 130 | .nav-container{ 131 | padding-top: 50px; 132 | } 133 | } 134 | 135 | .logo-link{ 136 | position: relative; 137 | display: -webkit-box; 138 | display: -ms-flexbox; 139 | display: flex; 140 | -webkit-box-align: center; 141 | -ms-flex-align: center; 142 | align-items: center; 143 | } 144 | 145 | .logo-link[class*="data-ally"]:focus::after { 146 | content: ""; 147 | position: absolute; 148 | left: -10%; 149 | top: -30%; 150 | width: 120%; 151 | height: 160%; 152 | border: 2px solid var(--accent); 153 | background: rgba(255, 255, 255, 0.01); 154 | border-radius: 5px; 155 | } 156 | 157 | .logo-link[class*="back-arrow-ico-container"]{ 158 | -webkit-transform: translateX(-3px); 159 | -ms-transform: translateX(-3px); 160 | transform: translateX(-3px); 161 | } 162 | 163 | .logo-link:hover{ 164 | text-decoration: none; 165 | } 166 | 167 | /*DESKTOP MEDIUM*/ 168 | @media screen and (max-width: 1280px){ 169 | .logo-link{ 170 | left: 0 171 | } 172 | } 173 | 174 | .nav-controls{ 175 | position: relative; 176 | display: -webkit-box; 177 | display: -ms-flexbox; 178 | display: flex; 179 | -webkit-box-align: center; 180 | -ms-flex-align: center; 181 | align-items: center; 182 | } 183 | 184 | /*PHABLET*/ 185 | @media screen and (max-width: 540px){ 186 | .nav-controls{ 187 | right: -5px; 188 | } 189 | } 190 | 191 | .tool-tip{ 192 | opacity: 0; 193 | -webkit-transform: translateY(6px); 194 | -ms-transform: translateY(6px); 195 | transform: translateY(6px); 196 | position: absolute; 197 | padding: 4px 13px; 198 | border-radius: 5px; 199 | font-size: 14px; 200 | top: -35px; 201 | color: var(--primary); 202 | background-color: var(--tooltip); 203 | -webkit-animation-duration: 2s; 204 | animation-duration: 2s; 205 | } 206 | 207 | @-webkit-keyframes pan-toolbar { 208 | 0% {opacity: 0; -webkit-transform: translateY(6px); transform: translateY(6px);} 209 | 30% {opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);} 210 | 70% {opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);} 211 | 100% {opacity: 0; -webkit-transform: translateY(6px); transform: translateY(6px);} 212 | } 213 | 214 | @keyframes pan-toolbar { 215 | 0% {opacity: 0; -webkit-transform: translateY(6px); transform: translateY(6px);} 216 | 30% {opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);} 217 | 70% {opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);} 218 | 100% {opacity: 0; -webkit-transform: translateY(6px); transform: translateY(6px);} 219 | } 220 | 221 | .icon-wrapper{ 222 | opacity: 0.5; 223 | position: relative; 224 | border-radius: 5px; 225 | width: 40px; 226 | height: 25px; 227 | display: -webkit-box; 228 | display: -ms-flexbox; 229 | display: flex; 230 | -webkit-box-align: center; 231 | -ms-flex-align: center; 232 | align-items: center; 233 | -webkit-box-pack: center; 234 | -ms-flex-pack: center; 235 | justify-content: center; 236 | -webkit-transition: opacity 0.3s ease; 237 | -o-transition: opacity 0.3s ease; 238 | transition: opacity 0.3s ease; 239 | margin-left: 30px; 240 | } 241 | 242 | .icon-wrapper:hover{ 243 | opacity: 1; 244 | } 245 | 246 | .icon-wrapper[class*="data-ally"]:focus::after { 247 | content: ""; 248 | position: absolute; 249 | left: 0; 250 | top: -30%; 251 | width: 100%; 252 | height: 160%; 253 | border: 2px solid var(--accent); 254 | background: rgba(255, 255, 255, 0.01); 255 | border-radius: 5px; 256 | } 257 | 258 | /*TABLET*/ 259 | @media screen and (max-width: 735px){ 260 | .icon-wrapper{ 261 | display: -webkit-inline-box; 262 | display: -ms-inline-flexbox; 263 | display: inline-flex; 264 | -webkit-transform: scale(0.708); 265 | -ms-transform: scale(0.708); 266 | transform: scale(0.708); 267 | margin-left: 10px; 268 | } 269 | .icon-wrapper:hover{ 270 | opacity: 0.5; 271 | } 272 | } 273 | 274 | .sun-rays{ 275 | position: relative; 276 | right: -16px; 277 | width: 9px; 278 | height: 9px; 279 | border-radius: 50%; 280 | border: 2px solid 281 | var(--primary); 282 | background: var(--primary); 283 | -webkit-transform: 1; 284 | -ms-transform: 1; 285 | transform: 1; 286 | -webkit-transition: all 0.45s ease; 287 | -o-transition: all 0.45s ease; 288 | transition: all 0.45s ease; 289 | overflow: hidden; 290 | -webkit-box-shadow: 0 -23px 0 var(--primary), 291 | 0 23px 0 var(--primary), 292 | 23px 0 0 var(--primary), 293 | -23px 0 0 var(--primary), 294 | 15px 15px 0 var(--primary), 295 | -15px 15px 0 var(--primary), 296 | 15px -15px 0 var(--primary), 297 | -15px -15px 0 var(--primary); 298 | box-shadow: 0 -23px 0 var(--primary), 299 | 0 23px 0 var(--primary), 300 | 23px 0 0 var(--primary), 301 | -23px 0 0 var(--primary), 302 | 15px 15px 0 var(--primary), 303 | -15px 15px 0 var(--primary), 304 | 15px -15px 0 var(--primary), 305 | -15px -15px 0 var(--primary); 306 | -webkit-transform: scale(0.6); 307 | -ms-transform: scale(0.6); 308 | transform: scale(0.6); 309 | } 310 | 311 | .moon-or-sun{ 312 | position: relative; 313 | width: 24px; 314 | height: 24px; 315 | border-radius: 50%; 316 | border: 2px solid 317 | var(--primary); 318 | background: var(--primary); 319 | -webkit-transform: 1; 320 | -ms-transform: 1; 321 | transform: 1; 322 | -webkit-transition: all 0.45s ease; 323 | -o-transition: all 0.45s ease; 324 | transition: all 0.45s ease; 325 | overflow: hidden; 326 | } 327 | 328 | .moon-mask{ 329 | position: absolute; 330 | right: -1px; 331 | top: -8px; 332 | height: 24px; 333 | width: 24px; 334 | border-radius: 50%; 335 | border: 0; 336 | background: var(--background-color); 337 | -webkit-transform: translate("0, 0"); 338 | -ms-transform: translate("0, 0"); 339 | transform: translate("0, 0"); 340 | opacity: 1; 341 | -webkit-transition: var(--color-mode-transition), -webkit-transform 0.45s ease; 342 | transition: var(--color-mode-transition), -webkit-transform 0.45s ease; 343 | -o-transition: transform 0.45s ease, var(--color-mode-transition); 344 | transition: transform 0.45s ease, var(--color-mode-transition); 345 | transition: transform 0.45s ease, var(--color-mode-transition), -webkit-transform 0.45s ease; 346 | } 347 | 348 | .mask-to-sun-animation{ 349 | -webkit-animation-name: mask-to-sun; 350 | animation-name: mask-to-sun; 351 | -webkit-animation-duration: 0.4s; 352 | animation-duration: 0.4s; 353 | } 354 | 355 | .mask-to-moon-animation{ 356 | -webkit-animation-name: mask-to-moon; 357 | animation-name: mask-to-moon; 358 | -webkit-animation-duration: 0.4s; 359 | animation-duration: 0.4s; 360 | } 361 | 362 | .to-sun-animation{ 363 | -webkit-animation-name: to-sun; 364 | animation-name: to-sun; 365 | -webkit-animation-duration: 0.4s; 366 | animation-duration: 0.4s; 367 | } 368 | 369 | .to-moon-animation{ 370 | -webkit-animation-name: to-moon; 371 | animation-name: to-moon; 372 | -webkit-animation-duration: 0.4s; 373 | animation-duration: 0.4s; 374 | } 375 | 376 | .expand-rays{ 377 | -webkit-animation-name: expand-rays; 378 | animation-name: expand-rays; 379 | -webkit-animation-duration: 0.5s; 380 | animation-duration: 0.5s; 381 | } 382 | 383 | .contract-rays{ 384 | -webkit-animation-name: contract-rays; 385 | animation-name: contract-rays; 386 | -webkit-animation-duration: 0.5s; 387 | animation-duration: 0.5s; 388 | } 389 | 390 | @-webkit-keyframes mask-to-sun { 391 | from {top: -8px; right: -5px; -webkit-transform: scale(1); transform: scale(1);} 392 | to {top: -25px; right: -15px; -webkit-transform: scale(0.5); transform: scale(0.5);} 393 | } 394 | 395 | @keyframes mask-to-sun { 396 | from {top: -8px; right: -5px; -webkit-transform: scale(1); transform: scale(1);} 397 | to {top: -25px; right: -15px; -webkit-transform: scale(0.5); transform: scale(0.5);} 398 | } 399 | 400 | @-webkit-keyframes mask-to-moon { 401 | from {top: -25px; right: -15px; -webkit-transform: scale(0.5); transform: scale(0.5);} 402 | to {top: -8px; right: -5px; -webkit-transform: scale(1); transform: scale(1);} 403 | } 404 | 405 | @keyframes mask-to-moon { 406 | from {top: -25px; right: -15px; -webkit-transform: scale(0.5); transform: scale(0.5);} 407 | to {top: -8px; right: -5px; -webkit-transform: scale(1); transform: scale(1);} 408 | } 409 | 410 | @-webkit-keyframes to-sun { 411 | from {-webkit-transform: scale(1);transform: scale(1);} 412 | to {-webkit-transform: scale(0.5);transform: scale(0.5);} 413 | } 414 | 415 | @keyframes to-sun { 416 | from {-webkit-transform: scale(1);transform: scale(1);} 417 | to {-webkit-transform: scale(0.5);transform: scale(0.5);} 418 | } 419 | 420 | @-webkit-keyframes to-moon { 421 | from {-webkit-transform: scale(0.5);transform: scale(0.5);} 422 | to {-webkit-transform: scale(1);transform: scale(1);} 423 | } 424 | 425 | @keyframes to-moon { 426 | from {-webkit-transform: scale(0.5);transform: scale(0.5);} 427 | to {-webkit-transform: scale(1);transform: scale(1);} 428 | } 429 | 430 | @-webkit-keyframes expand-rays { 431 | from {-webkit-transform: scale(0.1);transform: scale(0.1);} 432 | to {-webkit-transform: scale(0.6);transform: scale(0.6);} 433 | } 434 | 435 | @keyframes expand-rays { 436 | from {-webkit-transform: scale(0.1);transform: scale(0.1);} 437 | to {-webkit-transform: scale(0.6);transform: scale(0.6);} 438 | } 439 | 440 | @-webkit-keyframes contract-rays { 441 | from {-webkit-transform: scale(0.6);transform: scale(0.6);} 442 | to {-webkit-transform: scale(0.1);transform: scale(0.1);} 443 | } 444 | 445 | @keyframes contract-rays { 446 | from {-webkit-transform: scale(0.6);transform: scale(0.6);} 447 | to {-webkit-transform: scale(0.1);transform: scale(0.1);} 448 | } 449 | 450 | 451 | 452 | .header-hidden{ 453 | position: absolute; 454 | display: inline-block; 455 | opacity: 0; 456 | width: 0px; 457 | height: 0px; 458 | visibility: hidden; 459 | overflow: hidden; 460 | } 461 | 462 | /************************HEADER************************/ 463 | 464 | .page-button{ 465 | font-weight: 600; 466 | font-size: 18px; 467 | text-decoration: none; 468 | color: var(--primary); 469 | } 470 | 471 | .page-button:hover, .page-button:focus{ 472 | opacity: 1; 473 | text-decoration: underline; 474 | } 475 | 476 | .page-number-button{ 477 | font-weight: 400; 478 | font-size: 18px; 479 | text-decoration: none; 480 | color: var(--primary); 481 | } 482 | 483 | .page-number-button:hover, .page-number-button:focus{ 484 | text-decoration: underline; 485 | } 486 | 487 | .spacer{ 488 | opacity: 0.3; 489 | } 490 | 491 | .spacer::before{ 492 | content: "..."; 493 | } 494 | 495 | .mobiler-reference{ 496 | font-weight: 400; 497 | color: var(--primary); 498 | } 499 | 500 | .mobile-reference em{ 501 | font-style: normal; 502 | color: var(--primary); 503 | } 504 | 505 | .frame{ 506 | position: relative; 507 | z-index: 1; 508 | display: -webkit-inline-box; 509 | display: -ms-inline-flexbox; 510 | display: inline-flex; 511 | -webkit-box-pack: justify; 512 | -ms-flex-pack: justify; 513 | justify-content: space-between; 514 | -webkit-box-align: center; 515 | -ms-flex-align: center; 516 | align-items: center; 517 | } 518 | 519 | /*TABLET*/ 520 | @media screen and (max-width: 735px){ 521 | .frame{ 522 | left: -15px; 523 | } 524 | } -------------------------------------------------------------------------------- /assets/scss/paginator.scss: -------------------------------------------------------------------------------- 1 | .pagination{ 2 | z-index: 100; 3 | margin: 0; 4 | margin-top: 95px; 5 | padding: 0; 6 | display: -webkit-box; 7 | display: -ms-flexbox; 8 | display: flex; 9 | -webkit-box-pack: start; 10 | -ms-flex-pack: start; 11 | justify-content: flex-start; 12 | 13 | &:hover{ 14 | cursor: pointer; 15 | } 16 | 17 | a:hover{ 18 | color: var(--primary); 19 | } 20 | 21 | .page-item{ 22 | display: block; 23 | width: auto; 24 | height: auto; 25 | padding: 0; 26 | 27 | .page-link{ 28 | display: block; 29 | color: var(--grey); 30 | min-width: 6rem; 31 | } 32 | 33 | .page-next, .page-prev{ 34 | color: var(--primary); 35 | } 36 | 37 | 38 | &::before{ 39 | display: none; 40 | } 41 | } 42 | 43 | .active{ 44 | .page-link{ 45 | color: var(--primary); 46 | } 47 | } 48 | } -------------------------------------------------------------------------------- /assets/scss/paragraph.scss: -------------------------------------------------------------------------------- 1 | p{ 2 | line-height: 1.756; 3 | font-size: 18px; 4 | color: var(--articleText); 5 | font-family: var(--sanserif); 6 | -webkit-transition: var(--color-mode-transition); 7 | -o-transition: var(--color-mode-transition); 8 | transition: var(--color-mode-transition); 9 | margin: 0 auto 35px; 10 | width: 100%; 11 | max-width: 680px; 12 | } 13 | 14 | p b { 15 | font-weight: 800; 16 | } 17 | 18 | /*DESKTOP*/ 19 | @media screen and (max-width: 1070px){ 20 | p{ 21 | max-width: 507px; 22 | } 23 | } 24 | 25 | /*TABLET*/ 26 | @media screen and (max-width: 735px){ 27 | p{ 28 | max-width: 486px; 29 | margin: 0 auto 25px; 30 | } 31 | } 32 | 33 | /*PHABLET*/ 34 | @media screen and (max-width: 540px){ 35 | p{ 36 | padding: 0 20px; 37 | } 38 | } -------------------------------------------------------------------------------- /assets/scss/progress.scss: -------------------------------------------------------------------------------- 1 | /*************************ASIDE*************************/ 2 | .aside-container{ 3 | display: -webkit-box; 4 | display: -ms-flexbox; 5 | display: flex; 6 | margin: 0 auto; 7 | max-width: 1140px; 8 | z-index: 0; 9 | position: -webkit-sticky; 10 | position: sticky; 11 | top: 30%; 12 | -webkit-animation-name: progress-fade-in; 13 | animation-name: progress-fade-in; 14 | -webkit-animation-duration: 0.5s; 15 | animation-duration: 0.5s; 16 | 17 | /*DESKTOP MEDIUM*/ 18 | @media screen and (max-width: $desktop_medium){ 19 | display: none; 20 | } 21 | } 22 | 23 | @-webkit-keyframes progress-fade-in { 24 | from {opacity: 0;} 25 | to {opacity: 1;} 26 | } 27 | 28 | @keyframes progress-fade-in { 29 | from {opacity: 0;} 30 | to {opacity: 1;} 31 | } 32 | 33 | @-webkit-keyframes progress-fade-out { 34 | from {opacity: 1;} 35 | to {opacity: 0;} 36 | } 37 | 38 | @keyframes progress-fade-out { 39 | from {opacity: 1;} 40 | to {opacity: 0;} 41 | } 42 | 43 | .aside-align{ 44 | position: fixed; 45 | display: -webkit-box; 46 | display: -ms-flexbox; 47 | display: flex; 48 | -webkit-transform: translateY(0px); 49 | -ms-transform: translateY(0px); 50 | transform: translateY(0px); 51 | top: 0; 52 | -webkit-box-align: center; 53 | -ms-flex-align: center; 54 | align-items: center; 55 | height: 100vh; 56 | z-index: 3; 57 | 58 | opacity: 1; 59 | visibility: visible; 60 | -webkit-transition: opacity 0.4s linear, visibility 0.4s linear; 61 | -o-transition: opacity 0.4s linear, visibility 0.4s linear; 62 | transition: opacity 0.4s linear, visibility 0.4s linear; 63 | } 64 | 65 | .overlap-container{ 66 | -webkit-user-select: none; 67 | -moz-user-select: none; 68 | -ms-user-select: none; 69 | user-select: none; 70 | pointer-events: none; 71 | opacity: 0; 72 | -webkit-transition: opacity 0.25s; 73 | -o-transition: opacity 0.25s; 74 | transition: opacity 0.25s; 75 | } 76 | 77 | /*************************PROGRESS*************************/ 78 | .progress-container{ 79 | position: relative; 80 | outline: none; 81 | -webkit-user-select: none; 82 | -moz-user-select: none; 83 | -ms-user-select: none; 84 | user-select: none; 85 | } 86 | 87 | .track-line{ 88 | position: relative; 89 | display: -webkit-box; 90 | display: -ms-flexbox; 91 | display: flex; 92 | -webkit-box-orient: vertical; 93 | -webkit-box-direction: normal; 94 | -ms-flex-direction: column; 95 | flex-direction: column; 96 | height: calc(88vh - 40px); 97 | max-height: 425px; 98 | width: 1px; 99 | background-color: var(--track); 100 | opacity: 0.6; 101 | overflow: hidden; 102 | } 103 | 104 | .progress-line{ 105 | position: absolute; 106 | height: 100%; 107 | top: -100%; 108 | width: 1px; 109 | background-color: var(--progress); 110 | left: 0; 111 | } -------------------------------------------------------------------------------- /assets/scss/section.scss: -------------------------------------------------------------------------------- 1 | .section{ 2 | width: 100%; 3 | max-width: 1220px; 4 | margin: 0 auto; 5 | padding: 0 4rem; 6 | 7 | /*DESKTOP*/ 8 | @media screen and (max-width: 1070px){ 9 | max-width: 850px; 10 | } 11 | 12 | /*PHABLET*/ 13 | @media screen and (max-width: 540px){ 14 | max-width: 100%; 15 | padding: 2rem;; 16 | } 17 | 18 | p{ 19 | /*TABLET*/ 20 | @media screen and (max-width: 735px){ 21 | padding: 0 4rem; 22 | max-width: 567px; 23 | } 24 | } 25 | 26 | 27 | } 28 | 29 | .narrow{ 30 | p{ 31 | /*TABLET*/ 32 | @media screen and (max-width: 735px){ 33 | padding: 0 2rem; 34 | max-width: 527px; 35 | } 36 | } 37 | 38 | } -------------------------------------------------------------------------------- /assets/scss/social-links.scss: -------------------------------------------------------------------------------- 1 | .social-icon-outer{ 2 | width: 20%; 3 | min-width: 220px; 4 | } 5 | 6 | /*TABLET*/ 7 | @media screen and (max-width: $tablet){ 8 | .authors-sio{ 9 | width: 60%; 10 | } 11 | } 12 | 13 | .social-icon-container{ 14 | display: -webkit-box; 15 | display: -ms-flexbox; 16 | display: flex; 17 | -webkit-box-orient: horizontal; 18 | -webkit-box-direction: normal; 19 | -ms-flex-direction: row; 20 | flex-direction: row; 21 | -webkit-box-pack: justify; 22 | -ms-flex-pack: justify; 23 | justify-content: space-between; 24 | min-width: 100%; 25 | position: relative; 26 | margin-left: 3.2rem; 27 | text-decoration: none; 28 | max-width: 16px; 29 | 30 | a{ 31 | margin-right: 25px; 32 | } 33 | } 34 | 35 | .social-icon-container:hover > svg { 36 | fill: var (--primary); 37 | } 38 | 39 | .social-icon-container:hover > * { 40 | -webkit-transition: fill 0.25s var(--ease-in-out-quad); 41 | -o-transition: fill 0.25s var(--ease-in-out-quad); 42 | transition: fill 0.25s var(--ease-in-out-quad); 43 | } 44 | 45 | .social-icon-container:first-of-type { 46 | margin-left: 0; 47 | } 48 | 49 | .social-icon-container:last-child { 50 | margin-right: 0; 51 | } 52 | 53 | /*TABLET*/ 54 | @media screen and (max-width: 735px){ 55 | .social-icon-container{ 56 | margin: 0 2.2rem; 57 | } 58 | } 59 | 60 | .social-icon-image{ 61 | path{ 62 | fill: var(--grey); 63 | } 64 | } 65 | 66 | .hidden{ 67 | width: 0px; 68 | height: 0px; 69 | visibility: hidden; 70 | opacity: 0; 71 | overflow: hidden; 72 | display: inline-block; 73 | } -------------------------------------------------------------------------------- /assets/scss/subscription.scss: -------------------------------------------------------------------------------- 1 | .subscription-container{ 2 | position: relative; 3 | display: -webkit-box; 4 | display: -ms-flexbox; 5 | display: flex; 6 | -webkit-box-orient: vertical; 7 | -webkit-box-direction: normal; 8 | -ms-flex-direction: column; 9 | flex-direction: column; 10 | padding: 64px 0 55px; 11 | margin: 10px auto 100px; 12 | background: var(--card); 13 | -webkit-box-shadow: 0px 4px 50px rgba(0, 0, 0, 0.05); 14 | box-shadow: 0px 4px 50px rgba(0, 0, 0, 0.05); 15 | z-index: 1; 16 | 17 | .subscroiption-text{ 18 | margin-left: 0; 19 | margin-right: 0; 20 | } 21 | } 22 | 23 | /*TABLET*/ 24 | @media screen and (max-width: 735px){ 25 | .subscription-container{ 26 | padding: 50px 0 0; 27 | text-align: center; 28 | 29 | .submitted-input{ 30 | max-width: calc(100% - 36px); 31 | } 32 | 33 | .submit-button{ 34 | position: relative; 35 | width: 100%; 36 | left: 0; 37 | border-radius: 0; 38 | height: 60px; 39 | border: none; 40 | border-top: 1px solid var(--theme-ui-colors-horizontalRule,rgba(8,8,11,0.15)); 41 | } 42 | 43 | .submitted-form{ 44 | .submit-button{ 45 | border: none !important; 46 | border-top: 1px solid var(--theme-ui-colors-horizontalRule,rgba(8,8,11,0.15)) !important; 47 | } 48 | } 49 | } 50 | } 51 | 52 | /*PHABLET*/ 53 | @media screen and (max-width: 540px){ 54 | .subscription-container{ 55 | margin: -20px auto 80px; 56 | } 57 | } 58 | 59 | .subscription-content{ 60 | margin: 0 auto; 61 | width: 100%; 62 | max-width: 640px; 63 | } 64 | 65 | /*TABLET*/ 66 | @media screen and (max-width: 735px){ 67 | .subscription-content{ 68 | h3{ 69 | padding: 0 50px; 70 | } 71 | } 72 | } 73 | 74 | /*PHONE*/ 75 | @media screen and (max-width: 376px){ 76 | .subscription-content{ 77 | h3 { 78 | padding: 0 24px; 79 | } 80 | } 81 | } 82 | 83 | .subscription-heading{ 84 | font-family: var(--serif); 85 | margin-bottom: 20px; 86 | } 87 | 88 | /*TABLET*/ 89 | @media screen and (max-width: 735px){ 90 | .subscription-heading{ 91 | margin-bottom: 15px; 92 | } 93 | } 94 | 95 | .subscription-text{ 96 | margin: 0 0 30px; 97 | max-width: 680px; 98 | color: var(--grey); 99 | line-height: 1.75; 100 | } 101 | 102 | /*TABLET*/ 103 | @media screen and (max-width: 735px){ 104 | .subscription-text{ 105 | padding: 0 26px; 106 | margin: 0 auto 25px; 107 | } 108 | } 109 | 110 | .subscription-form{ 111 | position: relative; 112 | } 113 | 114 | .subscription-form::after { 115 | color: var(--accent); 116 | content: ">"; 117 | position: absolute; 118 | left: 21px; 119 | top: 10px; 120 | } 121 | 122 | /*TABLET*/ 123 | @media screen and (max-width: 735px){ 124 | .subscription-form:after{ 125 | left: 34px; 126 | top: 11px; 127 | } 128 | } 129 | 130 | .subscription-input{ 131 | position: relative; 132 | border-radius: 35px; 133 | border: none; 134 | padding: 13px 21px 13px 35px; 135 | width: 471px; 136 | color: var(--primary); 137 | background-color: var(--inputBackground); 138 | } 139 | 140 | .subscription-input.submitted-input:invalid{ 141 | position: relative; 142 | background: var(--theme-ui-colors-errorBackground,rgba(238,86,91,0.1)) !important; 143 | border-radius: 35px; 144 | border: none; 145 | padding: 13px 21px 13px 35px; 146 | width: 471px; 147 | color: var(--primary,#000); 148 | outline: none !important; 149 | } 150 | 151 | input:invalid { 152 | -webkit-box-shadow:0 0 2px 1px transparent; 153 | box-shadow:0 0 2px 1px transparent; 154 | } 155 | 156 | input:focus, 157 | select:focus, 158 | textarea:focus, 159 | button:focus { 160 | outline: none; 161 | } 162 | 163 | .subscription-input.submitted-input:invalid ~ .subscription-error-message{ 164 | opacity: 1; 165 | } 166 | 167 | .subscription-input.submitted-input:invalid ~ .submit-button{ 168 | color: var(--error); 169 | border: 1px solid var(--error); 170 | } 171 | 172 | .submitted-form:after{ 173 | color: var(--error); 174 | } 175 | 176 | .subscription-error-message{ 177 | position: absolute; 178 | left: 35px; 179 | bottom: -20px; 180 | color: var(--theme-ui-colors-error,#EE565B); 181 | font-size: 12px; 182 | opacity: 0; 183 | } 184 | 185 | .subscription-input::-webkit-input-placeholder { 186 | color: var(--track); 187 | opacity: 1; 188 | } 189 | 190 | .subscription-input::-moz-placeholder { 191 | color: var(--track); 192 | opacity: 1; 193 | } 194 | 195 | .subscription-input:-ms-input-placeholder { 196 | color: var(--track); 197 | opacity: 1; 198 | } 199 | 200 | .subscription-input::-ms-input-placeholder { 201 | color: var(--track); 202 | opacity: 1; 203 | } 204 | 205 | .subscription-input::placeholder { 206 | color: var(--track); 207 | opacity: 1; 208 | } 209 | 210 | .subscription-input:-ms-input-placeholder { 211 | color: var(--track); 212 | } 213 | 214 | .subscription-input::-ms-input-placeholder { 215 | color: var(--track); 216 | } 217 | 218 | /*TABLET*/ 219 | @media screen and (max-width: 735px){ 220 | .subscription-input{ 221 | width: calc(100% - 36px); 222 | margin: 0 18px; 223 | padding: 14px 14px 14px 30px; 224 | margin-bottom: 30px; 225 | } 226 | } 227 | 228 | .submit-button{ 229 | border: 1px solid var(--accent); 230 | color: var(--accent); 231 | position: absolute; 232 | left: 306px; 233 | top: 3px; 234 | display: -webkit-box; 235 | display: -ms-flexbox; 236 | display: flex; 237 | -webkit-box-align: center; 238 | -ms-flex-align: center; 239 | align-items: center; 240 | -webkit-box-pack: center; 241 | -ms-flex-pack: center; 242 | justify-content: center; 243 | width: 161px; 244 | height: 38px; 245 | font-weight: 600; 246 | border-radius: 35px; 247 | letter-spacing: 0.42px; 248 | -webkit-transition: border-color 0.2s var(--ease-in-out-quad), 249 | background 0.2s var(--ease-in-out-quad), color 0.2s var(--ease-in-out-quad); 250 | -o-transition: border-color 0.2s var(--ease-in-out-quad), 251 | background 0.2s var(--ease-in-out-quad), color 0.2s var(--ease-in-out-quad); 252 | transition: border-color 0.2s var(--ease-in-out-quad), 253 | background 0.2s var(--ease-in-out-quad), color 0.2s var(--ease-in-out-quad); 254 | } 255 | 256 | .submit-button:disabled { 257 | cursor: not-allowed; 258 | } 259 | 260 | .submit-button svg * { 261 | fill: var(--background-color); 262 | } 263 | 264 | .submit-error{ 265 | position: absolute; 266 | left: 35px; 267 | bottom: -20px; 268 | color: var(--error); 269 | font-size: 12px; 270 | } 271 | 272 | .submit-error a { 273 | color: var (--error); 274 | text-decoration: underline; 275 | } 276 | 277 | /*TABLET*/ 278 | @media screen and (max-width: 735px){ 279 | .submit-error{ 280 | left: 50px; 281 | top: 50px; 282 | } 283 | } -------------------------------------------------------------------------------- /assets/scss/tables.scss: -------------------------------------------------------------------------------- 1 | /*************************************TABLE************************************/ 2 | 3 | table{ 4 | position: relative; 5 | line-height: 1.65; 6 | color: var(--grey); 7 | font-family: var(--sanserif); 8 | -webkit-transition: var(--color-mode-transition); 9 | -o-transition: var(--color-mode-transition); 10 | transition: var(--color-mode-transition); 11 | background: var(--card); 12 | margin: 45px auto 85px; 13 | width: 100%; 14 | max-width: 1004px; 15 | border: 1px solid var(--horizontalRule); 16 | border-radius: 5px; 17 | overflow: hidden; 18 | border-collapse: separate; 19 | } 20 | 21 | /*DESKTOP*/ 22 | @media screen and (max-width: 1070px){ 23 | table{ 24 | margin: 25px auto 65px; 25 | } 26 | } 27 | 28 | /*TABLET*/ 29 | @media screen and (max-width: 735px){ 30 | table{ 31 | max-width: 486px; 32 | } 33 | } 34 | 35 | /*PHABLET*/ 36 | @media screen and (max-width: 540px){ 37 | table{ 38 | margin: 15px auto 55px; 39 | } 40 | } 41 | 42 | /*************************************TABLE CELL************************************/ 43 | 44 | td{ 45 | border-top: 1px solid var(--horizontalRule); 46 | border-right: 1px solid var(--horizontalRule); 47 | padding: 15px 30px; 48 | font-size: 16px; 49 | background: var(--card); 50 | 51 | &:last-child { 52 | border-right: none; 53 | } 54 | } 55 | 56 | /*DESKTOP*/ 57 | @media screen and (max-width: 1070px){ 58 | td{ 59 | padding: 14px 20px; 60 | } 61 | } 62 | 63 | /*TABLET*/ 64 | @media screen and (max-width: 735px){ 65 | td{ 66 | font-size: 14px; 67 | } 68 | } 69 | 70 | /*************************************TABLE HEAD************************************/ 71 | 72 | thead{ 73 | text-align: left; 74 | border-collapse: collapse; 75 | position: relative; 76 | line-height: 1.756; 77 | font-weight: 600; 78 | color: var(--primary); 79 | font-family: var(--serif); 80 | -webkit-transition: var(--color-mode-transition); 81 | -o-transition: var(--color-mode-transition); 82 | transition: var(--color-mode-transition); 83 | } 84 | 85 | th{ 86 | border-right: 1px solid var(--horizontalRule); 87 | padding: 15px 30px; 88 | 89 | &:last-child { 90 | border-right: none; 91 | } 92 | } 93 | 94 | 95 | /*DESKTOP*/ 96 | @media screen and (max-width: 1070px){ 97 | th{ 98 | padding: 14px 20px; 99 | } 100 | } 101 | 102 | /*TABLET*/ 103 | @media screen and (max-width: 735px){ 104 | th{ 105 | font-size: 14px; 106 | } 107 | } 108 | -------------------------------------------------------------------------------- /assets/scss/vars.scss: -------------------------------------------------------------------------------- 1 | /*BREAKPOINTS*/ 2 | $phone_small: 320px; 3 | $phone: 376px; 4 | $phablet: 540px; 5 | $tablet: 735px; 6 | $desktop: 1070px; 7 | $desktop_medium: 1280px; 8 | $desktop_large: 1440px; 9 | 10 | body{ 11 | /*FONTS*/ 12 | --serif: "Merriweather", Georgia, Serif; 13 | --sanserif: "SF Pro Display", "-apple-system", "BlinkMacSystemFont", "San Francisco", "Helvetica Neue", "Helvetica", "Ubuntu", "Roboto", "Noto", "Segoe UI", "Arial", sans-serif; 14 | --monospace: "Operator Mono", Consolas, Menlo, Monaco, source-code-pro, Courier New, monospace; 15 | 16 | /*COLOR MODE TRANSITION*/ 17 | --color-mode-transition: background 0.25s var(--ease-in-out-quad), color 0.25s var(--ease-in-out-quad); 18 | 19 | /*PRIMARY COLORS*/ 20 | --primary: #000; 21 | --secondary: #73737D; 22 | --grey: #73737D; 23 | --background-color: #fafafa; 24 | --accent: #6166DC; 25 | --hover: rgba(0, 0, 0, 0.07); 26 | --gradient: linear-gradient(180deg, rgba(217, 219, 224, 0) 0%, #D9DBE0 100%); 27 | --articleText: #08080B; 28 | --track: rgba(8, 8, 11, 0.3); 29 | --progress: #000; 30 | --card: #fff; 31 | --error: #EE565B; 32 | --success: #46B17B; 33 | --errorBackground: rgba(238, 86, 91, 0.1); 34 | --horizontalRule: rgba(8, 8, 11, 0.15); 35 | --inputBackground: rgba(0, 0, 0, 0.05); 36 | --tooltip: lightgrey; 37 | 38 | /*DARK COLORS*/ 39 | --dark-grey: #73737D; 40 | --dark-primary: #fff; 41 | --dark-secondary: #fff; 42 | --dark-accent: #E9DAAC; 43 | --dark-background: #111216; 44 | --dark-hover: rgba(255, 255, 255, 0.07); 45 | --dark-gradient: linear-gradient(180deg, #111216 0%, rgba(66, 81, 98, 0.36) 100%); 46 | --dark-articleText: #fff; 47 | --dark-track: rgba(255, 255, 255, 0.3); 48 | --dark-progress: #fff; 49 | --dark-card: #1D2128; 50 | --dark-error: #EE565B; 51 | --dark-success: #46B17B; 52 | --dark-errorBackground: rgba(238, 86, 91, 0.1); 53 | --dark-horizontalRule: rgba(255, 255, 255, 0.15); 54 | --dark-inputBackground: rgba(255, 255, 255, 0.07); 55 | 56 | /*PRISM*/ 57 | --token: #fff; 58 | --languageJavascript: #e8696b; 59 | --javascript: #e8696b; 60 | --background: #292c34; 61 | --comment: #5e6a76; 62 | --string: #a8e2a8; 63 | --var: #b3bac5; 64 | --number: #e4854d; 65 | --constant: #b3bac5; 66 | --plain: #fff; 67 | --doctype: #e8696b; 68 | --tag: #e8696b; 69 | --keyword: #d49fd4; 70 | --boolean: #ff5874; 71 | --function: #5F8DC3; 72 | --parameter: #F9965D; 73 | --className: #ffcf74; 74 | --attrName: #bf87ba; 75 | --attrValue: #a8e2a8; 76 | --interpolation: #fff; 77 | --punctuation: #5FA8AA; 78 | --property: #80cbc4; 79 | --propertyAccess: #fff; 80 | --namespace: #b2ccd6; 81 | --highlight: rgba(255,255,255,0.07); 82 | --highlightBorder: #e1bde2; 83 | --dom: #5F8DC3; 84 | --operator: #5FA8AA; 85 | } -------------------------------------------------------------------------------- /config.yaml: -------------------------------------------------------------------------------- 1 | baseURL: "https://example.com" 2 | languageCode: "en-us" 3 | title: "Hugo Novela" 4 | pygmentsstyle: 'monokai' 5 | -------------------------------------------------------------------------------- /config/_default/social.yaml: -------------------------------------------------------------------------------- 1 | twitter: "https://twitter.com/narative" 2 | github: "https://github.com/narative" 3 | instagram: "https://instagram.com/narative.co" 4 | linkedin: "https://www.linkedin.com/company/narative/" 5 | dribbble: "https://dribbble.com/narativestudio" 6 | youtube: "https://youtube.com" 7 | facebook: "" 8 | medium: "" 9 | patreon: "" 10 | paypal: "" 11 | unsplash: "" 12 | -------------------------------------------------------------------------------- /exampleSite/config.yaml: -------------------------------------------------------------------------------- 1 | baseURL: "https://example.com" 2 | languageCode: "en-us" 3 | title: "Hugo Novela" 4 | pygmentsstyle: 'monokai' 5 | paginate: 6 6 | social: 7 | twitter: "#" 8 | github: "#" 9 | instagram: "#" 10 | linkedin: "#" 11 | dribbble: "#" 12 | youtube: "#" 13 | taxonomies: 14 | author: authors 15 | -------------------------------------------------------------------------------- /exampleSite/content/_index.md: -------------------------------------------------------------------------------- 1 | --- 2 | hero: 3 | heading: Welcome to Novela, the simplest way to start publishing with Hugo. 4 | maxWidthPX: 652 5 | seo: 6 | image: /images/hero-2.jpg 7 | --- 8 | -------------------------------------------------------------------------------- /exampleSite/content/about.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: About 3 | --- 4 | 5 | Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus. Donec sed odio dui. 6 | 7 | Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. 8 | 9 | Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. 10 | 11 | Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. -------------------------------------------------------------------------------- /exampleSite/content/authors/hugo-authors/_index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Hugo Authors 3 | bio: | 4 | Written by You. This is where your author bio lives. Share your work, your 5 | joys and of course, your Twitter handle. 6 | avatar: /images/profile-01.jpeg 7 | featured: true 8 | social: 9 | - title: github 10 | url: https://github.com 11 | - title: github 12 | url: https://github.com 13 | - title: github 14 | url: https://github.com 15 | - title: github 16 | url: https://github.com 17 | - title: github 18 | url: https://github.com 19 | --- -------------------------------------------------------------------------------- /exampleSite/content/post/emoji-support.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Emoji Support 3 | date: 2019-03-05 4 | hero: "/images/hero-3.jpg" 5 | excerpt: Guide to emoji usage in Hugo 6 | authors: 7 | - Hugo Authors 8 | 9 | --- 10 | 11 | Emoji can be enabled in a Hugo project in a number of ways. 12 | 13 | The [`emojify`](https://gohugo.io/functions/emojify/) function can be called directly in templates or [Inline Shortcodes](https://gohugo.io/templates/shortcode-templates/#inline-shortcodes). 14 | 15 | To enable emoji globally, set `enableEmoji` to `true` in your site’s [configuration](https://gohugo.io/getting-started/configuration/) and then you can type emoji shorthand codes directly in content files; e.g. 16 | 17 | 18 |

🙈 :see_no_evil: 🙉 :hear_no_evil: 🙊 :speak_no_evil:

19 |
20 | 21 | The [Emoji cheat sheet](http://www.emoji-cheat-sheet.com/) is a useful reference for emoji shorthand codes. 22 | 23 | *** 24 | 25 | **N.B.** The above steps enable Unicode Standard emoji characters and sequences in Hugo, however the rendering of these glyphs depends on the browser and the platform. To style the emoji you can either use a third party emoji font or a font stack; e.g. 26 | 27 | ```css 28 | .emoji { 29 | font-family: Apple Color Emoji,Segoe UI Emoji,NotoColorEmoji,Segoe UI Symbol,Android Emoji,EmojiSymbols; 30 | } 31 | ``` 32 | 33 | {{< css.inline >}} 34 | 47 | {{< /css.inline >}} 48 | -------------------------------------------------------------------------------- /exampleSite/content/post/markdown-syntax.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Markdown Syntax Guide 3 | date: 2019-03-11 4 | hero: "/images/hero-2.jpg" 5 | excerpt: Sample article showcasing basic Markdown syntax and formatting for HTML elements. 6 | authors: 7 | - Hugo Authors 8 | 9 | --- 10 | 11 | This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme. 12 | 13 | 14 | ## Headings 15 | 16 | The following HTML `

`—`

` elements represent six levels of section headings. `

` is the highest section level while `

` is the lowest. 17 | 18 | # H1 19 | ## H2 20 | ### H3 21 | #### H4 22 | ##### H5 23 | ###### H6 24 | 25 | ## Paragraph 26 | 27 | Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat. 28 | 29 | Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat. 30 | 31 | ## Blockquotes 32 | 33 | The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a `footer` or `cite` element, and optionally with in-line changes such as annotations and abbreviations. 34 | 35 | #### Blockquote without attribution 36 | 37 | > Tiam, ad mint andaepu dandae nostion secatur sequo quae. 38 | > **Note** that you can use *Markdown syntax* within a blockquote. 39 | 40 | #### Blockquote with attribution 41 | 42 | > Don't communicate by sharing memory, share memory by communicating. 43 | > — Rob Pike[^1] 44 | 45 | 46 | [^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, November 18, 2015. 47 | 48 | ## Tables 49 | 50 | Tables aren't part of the core Markdown spec, but Hugo supports supports them out-of-the-box. 51 | 52 | Name | Age 53 | --------|------ 54 | Bob | 27 55 | Alice | 23 56 | 57 | #### Inline Markdown within tables 58 | 59 | | Inline    | Markdown    | In    | Table | 60 | | ---------- | --------- | ----------------- | ---------- | 61 | | *italics* | **bold** | ~~strikethrough~~    | `code` | 62 | 63 | ## Code Blocks 64 | 65 | #### Code block with backticks 66 | 67 | ```html 68 | html 69 | 70 | 71 | 72 | 73 | Example HTML5 Document 74 | 75 | 76 |

Test

77 | 78 | 79 | ``` 80 | 81 | #### Code block with Hugo's internal highlight shortcode 82 | {{< highlight html >}} 83 | 84 | 85 | 86 | 87 | Example HTML5 Document 88 | 89 | 90 |

Test

91 | 92 | 93 | {{< /highlight >}} 94 | 95 | ## List Types 96 | 97 | #### Ordered List 98 | 99 | 1. First item 100 | 2. Second item 101 | 3. Third item 102 | 103 | #### Unordered List 104 | 105 | * List item 106 | * Another item 107 | * And another item 108 | 109 | #### Nested list 110 | 111 | * Item 112 | 1. First Sub-item 113 | 2. Second Sub-item 114 | 115 | ## Other Elements — abbr, sub, sup, kbd, mark 116 | 117 | GIF is a bitmap image format. 118 | 119 | H2O 120 | 121 | Xn + Yn = Zn 122 | 123 | Press CTRL+ALT+Delete to end the session. 124 | 125 | Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures. 126 | -------------------------------------------------------------------------------- /exampleSite/content/post/math-typesetting.mmark: -------------------------------------------------------------------------------- 1 | --- 2 | title: Math Typesetting 3 | date: 2019-03-08 4 | hero: /images/hero-6.jpg 5 | excerpt: A brief guide to setup KaTeX 6 | authors: 7 | - Hugo Authors 8 | 9 | --- 10 | 11 | Mathematical notation in a Hugo project can be enabled by using third party JavaScript libraries. 12 | 13 | 14 | In this example we will be using [KaTeX](https://katex.org/) 15 | 16 | - Create a partial under `/layouts/partials/math.html` 17 | - Within this partial reference the [Auto-render Extension](https://katex.org/docs/autorender.html) or host these scripts locally. 18 | - Include the partial in your templates like so: 19 | 20 | ```go 21 | {{ if or .Params.math .Site.Params.math }} 22 | {{ partial "math.html" . }} 23 | {{ end }} 24 | ``` 25 | - To enable KaTex globally set the parameter `math` to `true` in a project's configuration 26 | - To enable KaTex on a per page basis include the parameter `math: true` in content files. 27 | 28 | **Note:** Use the online reference of [Supported TeX Functions](https://katex.org/docs/supported.html) 29 | {{< math.inline >}} 30 | {{ if or .Page.Params.math .Site.Params.math }} 31 | 32 | 33 | 34 | 35 | {{ end }} 36 | {{}} 37 | 38 | ### Examples 39 | 40 | Inline math: $$ \varphi = \dfrac{1+\sqrt5}{2}= 1.6180339887… $$ 41 | 42 | Block math: 43 | 44 | $$ 45 | \varphi = 1+\frac{1} {1+\frac{1} {1+\frac{1} {1+\cdots} } } 46 | $$ 47 | -------------------------------------------------------------------------------- /exampleSite/content/post/placeholder-text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Placeholder Text 3 | date: 2019-03-09 4 | hero: /images/hero-4.jpg 5 | excerpt: Lorem Ipsum Dolor Si Amet 6 | authors: 7 | - Hugo Authors 8 | 9 | --- 10 | 11 | Lorem est tota propiore conpellat pectoribus de 12 | pectora summo. Redit teque digerit hominumque toris verebor lumina non cervice 13 | subde tollit usus habet Arctonque, furores quas nec ferunt. Quoque montibus nunc 14 | caluere tempus inhospita parcite confusaque translucet patri vestro qui optatis 15 | lumine cognoscere flos nubis! Fronde ipsamque patulos Dryopen deorum. 16 | 17 | 1. Exierant elisi ambit vivere dedere 18 | 2. Duce pollice 19 | 3. Eris modo 20 | 4. Spargitque ferrea quos palude 21 | 22 | Rursus nulli murmur; hastile inridet ut ab gravi sententia! Nomine potitus 23 | silentia flumen, sustinet placuit petis in dilapsa erat sunt. Atria 24 | tractus malis. 25 | 26 | 1. Comas hunc haec pietate fetum procerum dixit 27 | 2. Post torum vates letum Tiresia 28 | 3. Flumen querellas 29 | 4. Arcanaque montibus omnes 30 | 5. Quidem et 31 | 32 | # Vagus elidunt 33 | 34 | 35 | 36 | [The Van de Graaf Canon](https://en.wikipedia.org/wiki/Canons_of_page_construction#Van_de_Graaf_canon) 37 | 38 | ## Mane refeci capiebant unda mulcebat 39 | 40 | Victa caducifer, malo vulnere contra 41 | dicere aurato, ludit regale, voca! Retorsit colit est profanae esse virescere 42 | furit nec; iaculi matertera et visa est, viribus. Divesque creatis, tecta novat collumque vulnus est, parvas. **Faces illo pepulere** tempus adest. Tendit flamma, ab opes virum sustinet, sidus sequendo urbis. 43 | 44 | Iubar proles corpore raptos vero auctor imperium; sed et huic: manus caeli 45 | Lelegas tu lux. Verbis obstitit intus oblectamina fixis linguisque ausus sperare 46 | Echionides cornuaque tenent clausit possit. Omnia putatur. Praeteritae refert 47 | ausus; ferebant e primus lora nutat, vici quae mea ipse. Et iter nil spectatae 48 | vulnus haerentia iuste et exercebat, sui et. 49 | 50 | Eurytus Hector, materna ipsumque ut Politen, nec, nate, ignari, vernum cohaesit sequitur. Vel **mitis temploque** vocatus, inque alis, *oculos nomen* non silvis corpore coniunx ne displicet illa. Crescunt non unus, vidit visa quantum inmiti flumina mortis facto sic: undique a alios vincula sunt iactata abdita! Suspenderat ego fuit tendit: luna, ante urbem 51 | Propoetides **parte**. 52 | 53 | {{< css.inline >}} 54 | 57 | {{< /css.inline >}} 58 | -------------------------------------------------------------------------------- /go.mod: -------------------------------------------------------------------------------- 1 | module github.com/forestryio/hugo-theme-novela 2 | 3 | go 1.13 4 | -------------------------------------------------------------------------------- /images/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/forestryio/hugo-theme-novela/5d015eef4c56e5f2ae7b767acc491d52f0df23bb/images/screenshot.png -------------------------------------------------------------------------------- /images/tn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/forestryio/hugo-theme-novela/5d015eef4c56e5f2ae7b767acc491d52f0df23bb/images/tn.png -------------------------------------------------------------------------------- /layouts/_default/baseof.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | {{ partial "head/head.html" . }} 4 | 5 | 6 | 7 | {{ $script := resources.Get "js/initColors.js" }} 8 | 9 | 10 |
11 | 12 | {{ partial "header.html" . }} 13 | 14 | {{ block "main" . }} 15 | 16 | {{ end }} 17 | 18 | {{ partial "footer.html" . }} 19 | 20 |
21 | 22 | {{ $script := resources.Get "js/prism.js" }} 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /layouts/_default/list.html: -------------------------------------------------------------------------------- 1 | {{ define "main" }} 2 | {{ partial "articles/hero.html" . }} 3 | {{ partial "articles/articles.html" . }} 4 | {{ end }} -------------------------------------------------------------------------------- /layouts/_default/single.html: -------------------------------------------------------------------------------- 1 | {{ define "main" }} 2 | 3 |
4 | 5 | {{ partial "page/hero.html" . }} 6 | 7 |
8 | {{ .Content }} 9 |
10 | 11 |
12 | 13 | {{ end }} -------------------------------------------------------------------------------- /layouts/authors/list.html: -------------------------------------------------------------------------------- 1 | {{ define "main" }} 2 |
3 |
4 | {{ partial "author/hero.html" . }} 5 | {{ partial "author/articles_list.html" . }} 6 |
7 |
8 |
9 | 10 | {{ end }} -------------------------------------------------------------------------------- /layouts/index.html: -------------------------------------------------------------------------------- 1 | {{ define "main" }} 2 | 3 | {{ partial "articles/hero.html" . }} 4 | {{ partial "articles/articles.html" . }} 5 | 6 | {{ end }} -------------------------------------------------------------------------------- /layouts/partials/article/authors.html: -------------------------------------------------------------------------------- 1 | 2 | {{ $authors := partialCached "func/GetArticleAuthors" . .File.UniqueID }} 3 | {{ if eq (len $authors) 1 }} 4 | {{ with $author := index $authors 0 }} 5 | 6 | {{ with .avatar }} 7 |
8 | 9 |
10 | {{ end }} 11 | {{ with .name }} 12 | {{ . }} 13 | {{ end }} 14 | ,  15 | 16 | {{ end }} 17 | {{ else }} 18 |
19 | {{ $avatarsWidth:= mul (len $authors) 15 }} 20 | 21 |
22 | {{ range $index, $author := $authors }} 23 | {{ with .avatar }} 24 |
25 | 26 |
27 | {{ end }} 28 | {{ end }} 29 |
30 | 31 | {{ range $index, $author := $authors }} 32 | {{ .firstname }}{{ if ne (add $index 1) (len $authors) }},{{ end }} 33 | {{ end }} 34 | 35 |
36 | {{ partial "icons/ui/toggle-open.html" . }} 37 |
38 | 39 | 40 | 57 |
58 | {{ end }} 59 | 60 | {{ $script := resources.Get "js/collapseAuthors.js" }} 61 | -------------------------------------------------------------------------------- /layouts/partials/article/hero.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |

{{ .Page.Params.Title }}

5 |
6 |
7 | {{ partial "article/authors.html" . }} 8 | {{ .Page.Date.Format "January 2, 2006" }} 9 | • {{ .ReadingTime }} min read 10 |
11 |
12 |
13 | {{ with .Page.Params.hero }} 14 |
15 | 16 |
17 | {{ end }} 18 |
19 |
20 | -------------------------------------------------------------------------------- /layouts/partials/article/next.html: -------------------------------------------------------------------------------- 1 | {{/* 2 | Prints the next 2 articles in the same section or, if less or 2 found, the first (and potentially second) of the section. 3 | 4 | @author @regisphilibert @mountainbug95 5 | 6 | @context Type Page (.) 7 | 8 | @access public 9 | 10 | */}} 11 | 12 | {{/* declaring next empty slice */}} 13 | {{ $next := slice }} 14 | {{/* Checking if current article has a PrevInSection (Prev as we are ordering dsc here.) */}} 15 | {{ with .PrevInSection }} 16 | {{ $next = $next | append . }} 17 | {{/* Checking for that "next" article own "next" to fill the "second next" */}} 18 | {{ with .PrevInSection }} 19 | {{ $next = $next | append . }} 20 | {{ end }} 21 | {{ end }} 22 | {{/* If the number of found "next article" is less than two we need to find the first and potentially second article 23 | of the whole section and append them to our $next slice. */}} 24 | {{ $diff := sub 2 (len $next) }} 25 | {{ if $diff }} 26 | {{/* We use that diff number (if > 0) to grab the first x number of articles */}} 27 | {{ $articles := partialCached "func/GetArticles" . "articles"}} 28 | {{ $next = $next | append (first $diff $articles) }} 29 | {{ end }} 30 |
31 |

More articles from {{ .Site.Title }}

32 |
33 | 58 |
59 | -------------------------------------------------------------------------------- /layouts/partials/article/progress.html: -------------------------------------------------------------------------------- 1 | 15 | -------------------------------------------------------------------------------- /layouts/partials/articles/articles.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | {{ partial "articles/list.html" . }} 4 |
5 | 6 |
7 |
8 |
-------------------------------------------------------------------------------- /layouts/partials/articles/hero.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

{{ .Page.Params.hero.heading }}

4 |
5 |
6 | {{ partial "bio.html" . }} 7 |
8 | 11 | 14 |
15 |
16 |
17 | 18 | {{ $script := resources.Get "js/toggleLayout.js" }} 19 | 20 | -------------------------------------------------------------------------------- /layouts/partials/articles/list.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | {{ $posts := partialCached "func/GetArticles" . "articles" }} 4 | {{ $paginator := .Paginate $posts }} 5 | {{ $biggerFirst := true }} 6 | {{ $biggerPlaced := false }} 7 | {{ range $index, $article := $paginator.Pages }} 8 | {{ $counter := mod $index 2 }} 9 | {{ if not $counter }} 10 |
11 | {{ end }} 12 | 24 |
25 |
26 | 27 |
28 |
29 |

30 | {{ $article.Params.title }} 31 |

32 |

33 | {{ $article.Params.excerpt }} 34 |

35 |
36 | {{ $article.Date.Format "January 2, 2006" }} • {{ $article.ReadingTime }} min read 37 |
38 |
39 |
40 | 41 | {{ $counter := mod (add $index 1) 2 }} 42 | {{ $len := (where .Pages "Type" "posts") }} 43 | {{ if or (eq $counter 0) (eq (add $index 1) $len) }} 44 |
45 | {{ $biggerPlaced = false }} 46 | {{ if $biggerFirst }} 47 | {{ $biggerFirst = false }} 48 | {{ else }} 49 | {{ $biggerFirst = true }} 50 | {{ end }} 51 | {{ end }} 52 | {{ end }} 53 |
54 | {{ partial "paginator/paginator.html" . }} 55 |
56 | -------------------------------------------------------------------------------- /layouts/partials/author/articles_list.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | {{ $articles := .Pages }} 4 | {{ $paginator := .Paginate .Pages }} 5 |
6 | {{ $scratch := newScratch }} 7 | {{ $scratch.Set "numPages" (len $paginator.Pages) }} 8 | {{ range $index, $article := $paginator.Pages }} 9 | {{ $counter := mod $index 2 }} 10 | 11 |
12 |
13 | 14 |
15 |
16 |

17 | {{ .Params.title }} 18 |

19 |

20 | {{ .Params.excerpt }} 21 |

22 |
23 | {{ .Date.Format "January 2, 2006" }} • {{ .ReadingTime }} min read 24 |
25 |
26 |
27 | 28 | {{ if eq ($scratch.Get "numPages") (add $index 1) }} 29 | 30 | 31 | {{ end }} 32 | {{ end }} 33 |
34 |
35 | {{ partial "paginator/paginator.html" . }} 36 |
37 | 38 | {{ $script := resources.Get "js/toggleBorder.js" }} 39 | 40 | -------------------------------------------------------------------------------- /layouts/partials/author/hero.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | {{ with .Params.avatar }} 4 |
5 | 6 |
7 | {{ end }} 8 |

{{ .Title }}

9 |

{{ .Params.bio }}

10 |
11 | {{ partial "author/social_links.html" . }} 12 |
13 |
14 |
-------------------------------------------------------------------------------- /layouts/partials/author/social_links.html: -------------------------------------------------------------------------------- 1 |
2 | 9 |
-------------------------------------------------------------------------------- /layouts/partials/bio.html: -------------------------------------------------------------------------------- 1 |
2 | {{ range site.Taxonomies.authors }} 3 | {{ with .Page }} 4 | {{ if .Params.featured }} 5 | 6 | {{ with .Params.avatar }} 7 |
8 |
9 | 10 |
11 |
12 | {{ end }} 13 | {{ with .Params.bio }} 14 |

{{ . }}

15 | {{ end }} 16 | 17 | {{ end }} 18 | {{ end }} 19 | {{ end }} 20 |
-------------------------------------------------------------------------------- /layouts/partials/footer.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 | © {{ dateFormat "2006" now }} {{ .Site.Title }} 7 |
8 | {{ partial "social-links/social-links.html" . }} 9 |
10 |
-------------------------------------------------------------------------------- /layouts/partials/func/GetArticleAuthors.html: -------------------------------------------------------------------------------- 1 | {{/* 2 | GetArticle Authors 3 | Retrieve the authors assigned to a given article 4 | 5 | @author @regisphilibert 6 | 7 | @context Page (.) The article in quest 8 | 9 | @access public 10 | 11 | @return Slice 12 | - String (.name) 13 | - String (.URL) 14 | - String (.name) 15 | - String (.firstname) 16 | 17 | @example - Go Template 18 | {{ $authors := partialCached "func/GetArticleAuthors" . .File.UniqueID }} 19 | */}} 20 | {{ $authors := slice }} 21 | {{ with .Params.authors }} 22 | {{ range $name := . }} 23 | {{ with site.GetPage (printf "/%s/%s" "authors" ($name | urlize)) }} 24 | {{ $firstname := "" }} 25 | {{ $name := "" }} 26 | {{ $avatar := false }} 27 | {{ with .Title }} 28 | {{ $name = . }} 29 | {{ $firstname = index (split . " ") 0 }} 30 | {{ end }} 31 | {{ with .Params.avatar }} 32 | {{ $avatar = . }} 33 | {{ end }} 34 | {{ $authors = $authors | append (dict "URL" .RelPermalink "name" $name "firstname" $firstname "avatar" $avatar) }} 35 | {{ end }} 36 | {{ end }} 37 | {{ end }} 38 | 39 | {{ return $authors }} -------------------------------------------------------------------------------- /layouts/partials/func/GetArticles.html: -------------------------------------------------------------------------------- 1 | {{/* 2 | GetArticles 3 | Retrieve article or posts 4 | 5 | @author @regisphilibert 6 | 7 | @context Page (.) 8 | 9 | @access public 10 | 11 | @return Collection 12 | - Page (.) 13 | 14 | @example - Go Template 15 | {{ $articles := partialCached "func/GetArticles" . "articles" }} 16 | */}} 17 | {{ $articles := slice }} 18 | {{ with where site.RegularPages "Type" "post" }} 19 | {{ $articles = . }} 20 | {{ end }} 21 | {{ return $articles }} -------------------------------------------------------------------------------- /layouts/partials/head/head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | {{ $style := resources.Get "scss/global.scss" | toCSS | minify | fingerprint }} 7 | 8 | {{ $prism := resources.Get "css/prism.css" }} 9 | 10 | 11 | {{ partial "seo/print.html" . }} 12 | {{ with .Params.forestry_instant_preview_id }} 13 | {{- safeHTML (printf "" .) -}} 14 | {{ end -}} 15 | 16 | -------------------------------------------------------------------------------- /layouts/partials/header.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 | {{ partial "icons/ui/logo.html" . }} 5 | Navigate back to the homepage 6 | 7 |
8 | 15 | 16 | 21 |
22 |
23 |
24 | 25 | {{ $script := resources.Get "js/toggleLogos.js" }} 26 | 27 | 28 | {{ $script := resources.Get "js/toggleColors.js" }} 29 | 30 | 31 | {{ $script := resources.Get "js/copyUrl.js" }} 32 | -------------------------------------------------------------------------------- /layouts/partials/icons/social/dribbble.html: -------------------------------------------------------------------------------- 1 | 9 | 13 | -------------------------------------------------------------------------------- /layouts/partials/icons/social/facebook.html: -------------------------------------------------------------------------------- 1 | 9 | 15 | -------------------------------------------------------------------------------- /layouts/partials/icons/social/github.html: -------------------------------------------------------------------------------- 1 | 9 | 15 | -------------------------------------------------------------------------------- /layouts/partials/icons/social/instagram.html: -------------------------------------------------------------------------------- 1 | 9 | 15 | 21 | 27 | -------------------------------------------------------------------------------- /layouts/partials/icons/social/linkedin.html: -------------------------------------------------------------------------------- 1 | 10 | 16 | -------------------------------------------------------------------------------- /layouts/partials/icons/social/medium.html: -------------------------------------------------------------------------------- 1 | 9 | 15 | -------------------------------------------------------------------------------- /layouts/partials/icons/social/patreon.html: -------------------------------------------------------------------------------- 1 | 9 | 14 | -------------------------------------------------------------------------------- /layouts/partials/icons/social/paypal.html: -------------------------------------------------------------------------------- 1 | 9 | 12 | -------------------------------------------------------------------------------- /layouts/partials/icons/social/twitter.html: -------------------------------------------------------------------------------- 1 | 10 | 16 | -------------------------------------------------------------------------------- /layouts/partials/icons/social/unsplash.html: -------------------------------------------------------------------------------- 1 | 9 | 10 | -------------------------------------------------------------------------------- /layouts/partials/icons/social/youtube.html: -------------------------------------------------------------------------------- 1 | image/svg+xml -------------------------------------------------------------------------------- /layouts/partials/icons/ui/check-mark-icon.html: -------------------------------------------------------------------------------- 1 | 8 | 12 | -------------------------------------------------------------------------------- /layouts/partials/icons/ui/link.html: -------------------------------------------------------------------------------- 1 | 9 | 15 | -------------------------------------------------------------------------------- /layouts/partials/icons/ui/logo.html: -------------------------------------------------------------------------------- 1 |
2 | 10 | 11 | 15 | 19 | 23 | 27 | 31 | 35 | 39 | 43 | 47 | 51 | 55 | 59 | 63 | 67 | 68 | 72 | 76 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 |
88 | -------------------------------------------------------------------------------- /layouts/partials/icons/ui/rows.html: -------------------------------------------------------------------------------- 1 | 8 | 12 | -------------------------------------------------------------------------------- /layouts/partials/icons/ui/tiles.html: -------------------------------------------------------------------------------- 1 | 8 | 12 | -------------------------------------------------------------------------------- /layouts/partials/icons/ui/toggle-closed.html: -------------------------------------------------------------------------------- 1 | 8 | 11 | 14 | -------------------------------------------------------------------------------- /layouts/partials/icons/ui/toggle-open.html: -------------------------------------------------------------------------------- 1 | 8 | 11 | 14 | -------------------------------------------------------------------------------- /layouts/partials/page/hero.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |

{{ .Page.Params.Title }}

5 |
6 | {{ with .Params.hero }} 7 |
8 | 9 |
10 | {{ end }} 11 |
12 |
-------------------------------------------------------------------------------- /layouts/partials/paginator/paginator.html: -------------------------------------------------------------------------------- 1 | {{ $pag := $.Paginator }} 2 | {{ if gt $pag.TotalPages 1 }} 3 | 21 | {{ end }} -------------------------------------------------------------------------------- /layouts/partials/seo/debug.html: -------------------------------------------------------------------------------- 1 | {{/* 2 | Prints a YAML representation of the SEO object 3 | Useful to go through a projects's page and check the formated object (used for og, twitter etc...) 4 | Styling uses Tailwind. 5 | 6 | @author the New Dynamic 7 | 8 | @access public 9 | 10 | @context Page 11 | 12 | @example - Go Template 13 | {{ partial "seo/debug.html" . }} 14 | */}} 15 | {{if ne (getenv "HUGO_ENV") "production" }} 16 | 29 |
30 | 
31 | 		{{ partial "seo/get" . | transform.Remarshal "yaml" }}
32 |
33 |
34 | {{ end }} -------------------------------------------------------------------------------- /layouts/partials/seo/extend.html: -------------------------------------------------------------------------------- 1 | {{/* 2 | Add/Edit SEO Scratch Object 3 | 4 | @author The New Dynamic 5 | 6 | @access public 7 | 8 | @context Page 9 | 10 | User does not load the partial, as the component will. 11 | This allows to overwrite some SEO object keys with project's own. 12 | Project's partial should live under `layouts/partials/seo/extend.html` 13 | 14 | @example - In Partial 15 | {{- if eq "Type" "recipe" -}} 16 | {{- .Scratch.SetInMap "seo" "type" "article" -}} 17 | {{- end -}} 18 | 19 | {{- $locales := dict "fr" "fr_FR" "en" "en_US" -}} 20 | {{- .Scratch.SetInMap "seo" "locale" (index $locales .Lang) -}} 21 | 22 | {{- if .IsHome -}} 23 | {{- .Scratch.SetInMap "seo" "title" "Welcome Home" -}} 24 | {{- end -}} 25 | */}} -------------------------------------------------------------------------------- /layouts/partials/seo/get.html: -------------------------------------------------------------------------------- 1 | {{/* 2 | Retrieve SEO object from a page and returns it as a json string 3 | 4 | @author The New Dynamic 5 | 6 | @access public 7 | 8 | @context Page 9 | 10 | @return SEO object as a json string 11 | 12 | @example - Go Template 13 | To store 14 | {{ $seo := partial "seo/get" . | transform.Unmarshal }} 15 | To print (for debug purposes) 16 | 17 | {{ partial "seo/get" . | transform.Remarshal "yaml" }} 18 | 19 | */}} 20 | {{- with .Scratch.Get "seo" -}} 21 | {{- . | jsonify -}} 22 | {{- end -}} -------------------------------------------------------------------------------- /layouts/partials/seo/jsonld.html: -------------------------------------------------------------------------------- 1 | {{/* 2 | Print JSONLd script tag 3 | 4 | @author The New Dynamic 5 | 6 | @access private 7 | 8 | @context map [page (Page), seo (Map)] 9 | 10 | Result to achieve: 11 | { 12 | [x] "@context": "http://schema.org", 13 | [x] "@type": "Article", 14 | [x] "headline": "Extra! Extra! Read alla bout it", 15 | [ ] "alternativeHeadline": "This article is also about robots and stuff", 16 | [x] "image": "http://example.com/image.jpg", 17 | [ ] "author": "Patrick Coombe", 18 | [ ] "award": "Best article ever written", 19 | [ ] "editor": "Craig Mount", 20 | [ ] "genre": "search engine optimization", 21 | [ ] "keywords": "seo sales b2b", 22 | [x] "wordcount": "1120", 23 | [ ] "publisher": "Book Publisher Inc", 24 | [x] "url": "http://www.example.com", 25 | [x] "datePublished": "2015-09-20", 26 | [ ] "dateCreated": "2015-09-20", 27 | [x] "dateModified": "2015-09-20", 28 | [x] "description": "We love to do stuff to help people and stuff", 29 | [ ] "articleBody": "You can paste your entire post in here, and yes it can get really really long." 30 | } 31 | */}} 32 | 33 | {{- $s := newScratch -}} 34 | {{- $s.Set "seo" dict -}} 35 | {{- $s.SetInMap "seo" "@context" "https://schema.org" -}} 36 | {{- $s.SetInMap "seo" "@type" .seo.type -}} 37 | {{- $s.SetInMap "seo" "headline" .page.Title -}} 38 | {{- $s.SetInMap "seo" "image" .seo.image -}} 39 | {{- $s.SetInMap "seo" "wordcount" (.page.WordCount | string) -}} 40 | {{- $s.SetInMap "seo" "url" .page.Permalink -}} 41 | {{- $s.SetInMap "seo" "datePublished" .seo.published_time -}} 42 | {{- $s.SetInMap "seo" "dateModified" .seo.updated_time -}} 43 | {{- $s.SetInMap "seo" "description" .seo.description -}} 44 | 45 | {{ with .author -}} 46 | {{ $s.SetInMap "seo" "author" . -}} 47 | {{ end -}} 48 | 49 | -------------------------------------------------------------------------------- /layouts/partials/seo/print.html: -------------------------------------------------------------------------------- 1 | {{/* 2 | Structure SEO Data for a given page 3 | + print tags 4 | + print jsonld 5 | 6 | @author The New Dynamic 7 | 8 | @access public 9 | 10 | @context Page 11 | 12 | @example - Go Template 13 | {{ partial "seo/tags" . }} 14 | 15 | TODO: 16 | - [ ] Improve type test on "events", `article` seems very opinated. 17 | - [ ] Find a reasonable default image when `site.Params.default_image` is not set. 18 | - [ ] Twitter can sport "author" handle on top of the site's. Devise a test for author? 19 | - [ ] Maybe consider another approach to set the twitter_card (summary, etc...) 20 | - [ ] Not sure about image size. Following https://docs.imgix.com/best-practices/improving-seo-traffic, we have a 21 | square of 800x800 */}} 22 | 23 | 24 | {{/*------------------------------ 25 | BUILDING SCRATCH SEO OBJECT 26 | ------------------------------ */}} 27 | 28 | {{/* Adding the seo map to scratch which will recieve SEO key/value pairs. */}} 29 | {{- $.Scratch.Set "seo" dict -}} 30 | 31 | {{/* Dates 32 | ----------------------------- */}} 33 | 34 | {{- if not .PublishDate.IsZero -}} 35 | {{- $.Scratch.SetInMap "seo" "published_time" (.PublishDate.Format "2006-01-02T15:04:05-07:00") -}} 36 | {{- else if not .Date.IsZero -}} 37 | {{- $.Scratch.SetInMap "seo" "published_time" (.Date.Format "2006-01-02T15:04:05-07:00") -}} 38 | {{- end -}} 39 | {{- if not .Lastmod.IsZero -}} 40 | {{- $.Scratch.SetInMap "seo" "updated_time" (.Lastmod.Format "2006-01-02T15:04:05-07:00") -}} 41 | {{- end -}} 42 | 43 | 44 | {{/* Description 45 | ---------------------------- 46 | We use the following order of precedence 47 | 1. SEO Description, then, if not found, 48 | 2. Description, then if not found, 49 | 3. Summary then, if not found, 50 | 4. site description */}} 51 | {{ $description := "" }} 52 | {{/* 1. SEO Description */}} 53 | {{- if .Params.seo.description -}} 54 | {{- $description = .Params.seo.description -}} 55 | {{/* 2. Description 56 | As it could potentially contain HTML tags, we strip them with plainify */}} 57 | {{- else if .Params.description -}} 58 | {{- $description = .Params.description | plainify -}} 59 | {{/* 3. Summary */}} 60 | {{- else if .Summary -}} 61 | {{- $description = .Summary -}} 62 | {{- else -}} 63 | {{/* 4. site description */}} 64 | {{ $description = .Site.Params.Description }} 65 | {{- end -}} 66 | 67 | {{- $.Scratch.SetInMap "seo" "description" $description -}} 68 | 69 | {{/* Title 70 | ---------------------------- 71 | We use the following logic 72 | 1. Every pages: `{.Title} | {.Site.Title}` 73 | 2. Homepage: , only {.Site.Title} */}} 74 | {{- if not .IsHome -}} 75 | {{/* 1. `{.Title} | {.Site.Title}` */}} 76 | {{- $.Scratch.SetInMap "seo" "title" (printf "%s | %s" .Title .Site.Title ) -}} 77 | {{- else -}} 78 | {{/* 2. `{.Site.Title}` */}} 79 | {{- $.Scratch.SetInMap "seo" "title" .Site.Title -}} 80 | {{- end -}} 81 | 82 | {{/* Site Name 83 | ---------------------------- */}} 84 | {{- with .Param "seo.site_name" -}} 85 | {{- $.Scratch.SetInMap "seo" "site_name" . -}} 86 | {{- else -}} 87 | {{- $.Scratch.SetInMap "seo" "site_name" .Site.Title -}} 88 | {{- end -}} 89 | 90 | {{/* Twitter 91 | ---------------------------- */}} 92 | {{/* Default twitter_card is "summary_large_image" */}} 93 | {{- $.Scratch.SetInMap "seo" "twitter_card" "summary_large_image" -}} 94 | 95 | {{/* We check the site config sports a Social.twitter and use as handle */}} 96 | {{- with .Site.Social.twitter -}} 97 | {{- $.Scratch.SetInMap "seo" "twitter_handle" (printf "@%s" .) -}} 98 | {{- end -}} 99 | 100 | 101 | {{/* Image 102 | ---------------------------- */}} 103 | 104 | {{- $img := "/uploads/default.jpg" -}} 105 | {{- with .Site.Params.seo.default_image -}} 106 | {{- $img = . -}} 107 | {{- end -}} 108 | 109 | {{- with .Params.seo.image -}} 110 | {{- $img = . -}} 111 | {{ else }} 112 | {{/* If no SEO IMAGE is set, we look for the .Params.images slice 113 | and use the first one if it has an `image` key */}} 114 | {{- with .Params.hero -}} 115 | {{- $img = . -}} 116 | {{- end -}} 117 | {{- with .Params.avatar -}} 118 | {{- $img = . -}} 119 | {{- end -}} 120 | {{- end -}} 121 | 122 | 123 | {{- $.Scratch.SetInMap "seo" "image" ($img | absURL) -}} 124 | 125 | {{/* Type 126 | ---------------------------- */}} 127 | {{- $.Scratch.SetInMap "seo" "type" "website" -}} 128 | 129 | {{- if in (slice "blog" "news") .Type -}} 130 | {{- $.Scratch.SetInMap "seo" "type" "article" -}} 131 | {{ else if in (slice "article") .Type }} 132 | {{- $.Scratch.SetInMap "seo" "type" "event" -}} 133 | {{- end -}} 134 | 135 | 136 | {{/* Locale 137 | ---------------------------- */}} 138 | {{- $.Scratch.SetInMap "seo" "locale" "en_US" -}} 139 | 140 | {{/* Canonical 141 | ---------------------------- */}} 142 | {{ with .Params.seo.canonical }} 143 | {{- $.Scratch.SetInMap "seo" "canonical" (. | absURL) -}} 144 | {{ else }} 145 | {{- $.Scratch.SetInMap "seo" "canonical" .Permalink -}} 146 | {{ end }} 147 | 148 | {{/*------------------------------ 149 | RETRIEVING PROJECT'S OWN DATA 150 | ------------------------------ */}} 151 | {{- partial "seo/extend" . -}} 152 | 153 | {{ partial "seo/tags" (dict "page" $ "seo" ($.Scratch.Get "seo")) }} 154 | {{ with .Site.Params.seo.jsonld }} 155 | {{ partial "seo/jsonld" (dict "page" $ "seo" ($.Scratch.Get "seo")) }} 156 | {{ end }} 157 | 158 | {{ with .Site.Params.seo.debug }} 159 | {{ partial "seo/debug" $ }} 160 | {{ end }} -------------------------------------------------------------------------------- /layouts/partials/seo/tags.html: -------------------------------------------------------------------------------- 1 | {{/* 2 | Print SEO meta tags 3 | 4 | @author The New Dynamic 5 | 6 | @access private 7 | 8 | @context map [page (Page), seo (Map)] */}} 9 | 10 | {{/*------------------------------ 11 | WRITING TAGS 12 | ------------------------------ */}} 13 | {{- $seo := .seo -}} 14 | 15 | {{ $seo.title }} 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | {{- with ($seo.image_width) -}} 25 | 26 | {{- end -}} 27 | {{- with ($seo.image_height) -}} 28 | 29 | {{- end -}} 30 | 31 | 32 | {{ with $seo.canonical }} 33 | 34 | {{ end }} 35 | {{ with $seo.twitter_handle }} 36 | 37 | 38 | {{ end }} 39 | 40 | 41 | 42 | {{- with $seo.updated_time }} 43 | 44 | {{- end }} -------------------------------------------------------------------------------- /layouts/partials/social-links/social-links.html: -------------------------------------------------------------------------------- 1 |
2 | 11 |
-------------------------------------------------------------------------------- /layouts/partials/subscription/subscription.html: -------------------------------------------------------------------------------- 1 | {{ $email := . }} 2 | {{ $action := printf "https://formspree.io/%s.tld" $email }} 3 |
4 |
5 |
6 |

7 | Join our email list and get notified about new content 8 |

9 |

10 | Be the first to receive our latest content with the ability to 11 | opt-out at anytime. We promise to not spam your inbox or share your 12 | email with any third parties. 13 |

14 |
15 | 24 | 30 |
31 | The email you entered is not valid. 32 |
33 |
34 |
35 |
36 |
37 | 38 | {{ $script := resources.Get "js/addFormStyles.js" }} 39 | -------------------------------------------------------------------------------- /layouts/post/single.html: -------------------------------------------------------------------------------- 1 | {{ define "main" }} 2 | 3 |
4 | 5 | {{ partial "article/hero.html" . }} 6 | 7 | {{ partial "article/progress" . }} 8 | 9 |
10 | {{ .Content }} 11 |
12 | 13 | 14 | {{ partial "article/next.html" . }} 15 |
16 | 17 | {{ $script := resources.Get "js/progressBar.js" }} 18 | 19 | {{ end }} 20 | -------------------------------------------------------------------------------- /layouts/shortcodes/subscribe.html: -------------------------------------------------------------------------------- 1 | {{ with .Get "email" }} 2 | {{ partial "subscription/subscription.html" . }} 3 | {{ end }} 4 | -------------------------------------------------------------------------------- /netlify.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | publish = "public" 3 | command = "hugo --gc --minify" 4 | 5 | [build.environment] 6 | HUGO_VERSION = "0.69.0" 7 | 8 | # This is a starter template for Netlify builds. See the following links for more: 9 | # https://www.netlify.com/docs/continuous-deployment/#deploy-contexts 10 | # https://www.netlify.com/blog/2017/04/11/netlify-plus-hugo-0.20-and-beyond/ 11 | -------------------------------------------------------------------------------- /resources/_gen/assets/scss/scss/global.scss_48b060fe05b0a273d182ef83c0605941.json: -------------------------------------------------------------------------------- 1 | {"Target":"scss/global.min.fb4dd79813ef5075eb6e0a596ca103e09f51efc11a614d013d4d9049d60904b1.css","MediaType":"text/css","Data":{"Integrity":"sha256-+03XmBPvUHXrbgpZbKED4J9R78EaYU0BPU2QSdYJBLE="}} -------------------------------------------------------------------------------- /resources/_gen/assets/scss/scss/main.scss_48b060fe05b0a273d182ef83c0605941.content: -------------------------------------------------------------------------------- 1 | @import "/Users/tannersmith/theNewDynamic/theme-narrative-hugo/hugo/narative/assets/css/global.css" -------------------------------------------------------------------------------- /resources/_gen/assets/scss/scss/main.scss_48b060fe05b0a273d182ef83c0605941.json: -------------------------------------------------------------------------------- 1 | {"Target":"scss/main.min.0516f37d101dd5f2e4db165a5d58e9d22c2a8ed35021e5372d1ecb4bc9482039.css","MediaType":"text/css","Data":{"Integrity":"sha256-BRbzfRAd1fLk2xZaXVjp0iwqjtNQIeU3LR7LS8lIIDk="}} -------------------------------------------------------------------------------- /static/images/brad-tiller.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/forestryio/hugo-theme-novela/5d015eef4c56e5f2ae7b767acc491d52f0df23bb/static/images/brad-tiller.jpg -------------------------------------------------------------------------------- /static/images/dennis-brotzky.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/forestryio/hugo-theme-novela/5d015eef4c56e5f2ae7b767acc491d52f0df23bb/static/images/dennis-brotzky.jpg -------------------------------------------------------------------------------- /static/images/favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 7 | 8 | Created by potrace 1.15, written by Peter Selinger 2001-2017 9 | 10 | 12 | 15 | 18 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /static/images/hero-11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/forestryio/hugo-theme-novela/5d015eef4c56e5f2ae7b767acc491d52f0df23bb/static/images/hero-11.jpg -------------------------------------------------------------------------------- /static/images/hero-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/forestryio/hugo-theme-novela/5d015eef4c56e5f2ae7b767acc491d52f0df23bb/static/images/hero-2.jpg -------------------------------------------------------------------------------- /static/images/hero-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/forestryio/hugo-theme-novela/5d015eef4c56e5f2ae7b767acc491d52f0df23bb/static/images/hero-3.jpg -------------------------------------------------------------------------------- /static/images/hero-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/forestryio/hugo-theme-novela/5d015eef4c56e5f2ae7b767acc491d52f0df23bb/static/images/hero-4.jpg -------------------------------------------------------------------------------- /static/images/hero-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/forestryio/hugo-theme-novela/5d015eef4c56e5f2ae7b767acc491d52f0df23bb/static/images/hero-5.jpg -------------------------------------------------------------------------------- /static/images/hero-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/forestryio/hugo-theme-novela/5d015eef4c56e5f2ae7b767acc491d52f0df23bb/static/images/hero-6.jpg -------------------------------------------------------------------------------- /static/images/large.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/forestryio/hugo-theme-novela/5d015eef4c56e5f2ae7b767acc491d52f0df23bb/static/images/large.jpg -------------------------------------------------------------------------------- /static/images/mack-mansouri.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/forestryio/hugo-theme-novela/5d015eef4c56e5f2ae7b767acc491d52f0df23bb/static/images/mack-mansouri.jpg -------------------------------------------------------------------------------- /static/images/medium.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/forestryio/hugo-theme-novela/5d015eef4c56e5f2ae7b767acc491d52f0df23bb/static/images/medium.jpg -------------------------------------------------------------------------------- /static/images/profile-01.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/forestryio/hugo-theme-novela/5d015eef4c56e5f2ae7b767acc491d52f0df23bb/static/images/profile-01.jpeg -------------------------------------------------------------------------------- /static/images/small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/forestryio/hugo-theme-novela/5d015eef4c56e5f2ae7b767acc491d52f0df23bb/static/images/small.jpg -------------------------------------------------------------------------------- /static/images/thiago-costa.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/forestryio/hugo-theme-novela/5d015eef4c56e5f2ae7b767acc491d52f0df23bb/static/images/thiago-costa.jpg -------------------------------------------------------------------------------- /theme.toml: -------------------------------------------------------------------------------- 1 | name = "Hugo Novela" 2 | license = "MIT" 3 | licenselink = "https://github.com/forestryio/hugo-theme-novela/blob/master/LICENSE" 4 | description = "A Hugo port of the Novela theme by Narative" 5 | homepage = "https://hugo-novela-forestry.netlify.com/" 6 | tags = ["blog"] 7 | features = ["dark mode", "grid view"] 8 | min_version = "0.65.0" 9 | 10 | [author] 11 | name = "The New Dynamic" 12 | homepage = "https://www.thenewdynamic.com/" 13 | 14 | # If porting an existing theme 15 | [original] 16 | author = "Narative" 17 | homepage = "https://www.narative.co/" 18 | repo = "https://github.com/narative/gatsby-theme-novela" 19 | --------------------------------------------------------------------------------