├── marco
    ├── assets
    │   └── css
    │   │   ├── style.css
    │   │   ├── editor.css
    │   │   └── main.css
    ├── thumbnail.png
    ├── 404.hbs
    ├── partials
    │   ├── footer.hbs
    │   ├── pagination.hbs
    │   ├── head.hbs
    │   └── menu.hbs
    ├── tag.hbs
    ├── index.hbs
    ├── marco.lang.json
    ├── author.hbs
    ├── post.hbs
    ├── visual-override.js
    └── config.json
├── .gitignore
├── ThemePreview.jpg
├── README.md
└── LICENSE


/marco/assets/css/style.css:
--------------------------------------------------------------------------------
1 | 
2 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Autogenerated TMP Publii Files
2 | *.TMP
3 | 


--------------------------------------------------------------------------------
/ThemePreview.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/enslaved2die/Publii_Marco/HEAD/ThemePreview.jpg


--------------------------------------------------------------------------------
/marco/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/enslaved2die/Publii_Marco/HEAD/marco/thumbnail.png


--------------------------------------------------------------------------------
/marco/404.hbs:
--------------------------------------------------------------------------------
 1 | {{> head}}
 2 | 
 3 | <main class="main--full}">
 4 |     <div class="page-header">
 5 |         <h1 class="page-header__title">
 6 |             {{ translate 'error.404' }}
 7 |         </h1>
 8 |         <p class="page-header__desc">
 9 |             {{ translate 'error.description' }}
10 |         </p>
11 |     </div>{{!-- .page-header --}}
12 | </main>
13 | {{> footer}}
14 | 


--------------------------------------------------------------------------------
/marco/partials/footer.hbs:
--------------------------------------------------------------------------------
 1 | <footer class="footer u-small">
 2 |     {{#if @config.custom.copyrightText}}
 3 |         <div class="footer__copyright">
 4 |             {{{@config.custom.copyrightText}}}
 5 |         </div>
 6 |     {{/if}}
 7 | </footer>
 8 | </div>{{!-- .container --}}
 9 | {{!-- Insert some custom code by Custom HTML tool --}}
10 | {{{@footerCustomCode}}}
11 | {{!-- GDPR Cookie popup generated natively by Publii app --}}
12 | {{{ publiiFooter }}}
13 | </body>
14 | 
15 | </html>
16 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Publii Marco Theme
 2 | Version: [1.0.1.2](https://github.com/enslaved2die/Publii_Marco/releases/tag/v.1.0.1.2)
 3 | 
 4 | A free simple to use Portfolio Theme for [Publii.](https://getpublii.com/)  
 5 | It's a CSS Grid based Layout designed by my buddy Marco, therefore the name.  
 6 | He is the one who had the Design idea.  
 7 | He is listed in the Credits tab, please check him out, his working is freaking awesome.
 8 | 
 9 | Lightbox Support is in the making.
10 | 
11 | ![Theme Preview Screenshot](ThemePreview.jpg)
12 | 
13 | ### Author
14 | Joshua Sellke [http://www.sellke.net/](http://www.sellke.net/)
15 | 
16 | ### Credits
17 | * [Marco in the Middle](https://www.instagram.com/marcointhemiddle/)
18 | 
19 | ### Licence
20 | 
21 | MIT
22 | 


--------------------------------------------------------------------------------
/marco/partials/pagination.hbs:
--------------------------------------------------------------------------------
 1 | {{#if @pagination}}
 2 |     <nav class="pagination">
 3 |         {{#if @pagination.previousPage}}
 4 |             <a href="{{@pagination.previousPageUrl}}" class="prev" title="{{ translate 'partials.pagination.prev' }}">
 5 |                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" transform="rotate(180)">
 6 |                     <path d=" M8.122 24l-4.122-4 8-8-8-8 4.122-4 11.878 12z" /></svg>
 7 |             </a>
 8 |         {{/if}}
 9 |         {{#if @pagination.nextPage}}
10 |             <a href="{{@pagination.nextPageUrl}}" class="next" title="{{ translate 'partials.pagination.next' }}">
11 |                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
12 |                     <path d="M8.122 24l-4.122-4 8-8-8-8 4.122-4 11.878 12z" /></svg>
13 |             </a>
14 |         {{/if}}
15 |     </nav>
16 | {{/if}}
17 | 


--------------------------------------------------------------------------------
/marco/tag.hbs:
--------------------------------------------------------------------------------
 1 | {{> head}}
 2 | <div class="page-header page-header--listing">
 3 |     {{#tag}}
 4 |         <h1 class="page-header__title">
 5 |             {{name}}
 6 |             <sup>({{postsNumber}})</sup>
 7 |         </h1>
 8 |         {{#if description}}
 9 |             <p class="page-header__desc">
10 |                 {{description}}
11 |             </p>
12 |         {{/if}}
13 |     {{/tag}}
14 | </div>{{!-- .page-header --}}
15 | <main class="main--grid">
16 |     {{#each posts}}
17 |         <article class="article">
18 |             {{#featuredImage}}
19 |                 {{#if url}}
20 |                     <img src="{{url}}" {{#if @config.custom.responsiveImages}} sizes="{{sizes.listing}}" srcset=" {{srcset.listing}}" {{/if}} alt=" {{alt}}">
21 |                     <a href=" {{../url}}" class="overlay">
22 |                 {{/if}}
23 |             {{/featuredImage}}
24 |             <h1>{{title}}</h1>
25 |             </a>
26 |         </article>
27 |     {{/each}}
28 | 
29 |     {{> pagination}}
30 | </main>
31 | 
32 | {{> footer}}
33 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 Joshua Sellke
 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 | 


--------------------------------------------------------------------------------
/marco/index.hbs:
--------------------------------------------------------------------------------
 1 | {{> head}}
 2 | <main class="main--grid">
 3 |     {{#if featuredPosts}}
 4 |         {{#each featuredPosts}}
 5 |             {{#checkIf @index '<' 3}}
 6 |                 <article class="article">
 7 |                     {{#featuredImage}}
 8 |                         {{#if url}}
 9 |                             <img src="{{url}}" {{#if @config.custom.responsiveImages}} sizes="{{sizes.listing}}" srcset=" {{srcset.listing}}" {{/if}} alt=" {{alt}}">
10 |                             <a href=" {{../url}}" class="overlay">
11 |                         {{/if}}
12 |                     {{/featuredImage}}
13 |                     <h1>{{title}}</h1>
14 |                     </a>
15 |                 </article>
16 |             {{/checkIf}}
17 |         {{/each}}
18 |     {{/if}}
19 |     {{#each posts}}
20 |         <article class="article">
21 |             {{#featuredImage}}
22 |                 {{#if url}}
23 |                     <img src="{{url}}" {{#if @config.custom.responsiveImages}} sizes="{{sizes.listing}}" srcset=" {{srcset.listing}}" {{/if}} alt=" {{alt}}">
24 |                     <a href=" {{../url}}" class="overlay">
25 |                 {{/if}}
26 |             {{/featuredImage}}
27 |             <h1>{{title}}</h1>
28 |             </a>
29 |         </article>
30 |     {{/each}}
31 | </main>
32 | {{> pagination}}
33 | {{> footer}}
34 | 


--------------------------------------------------------------------------------
/marco/marco.lang.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "partials": {
 3 |         "disqus": {
 4 |             "noscript1": "Please enable JavaScript to view the",
 5 |             "noscript2": "comments powered by Disqus."
 6 |         },
 7 |         "menu": {
 8 |             "label": "Menu"
 9 |         },
10 |         "pagination": {
11 |             "prev": "Previous",
12 |             "next": "Next"
13 |         },
14 |         "shareButtons": {
15 |             "shareWithFacebook": "Share with Facebook",
16 |             "shareWithTwitter": "Share with Twitter",
17 |             "shareWithGooglePlus": "Share with Google Plus",
18 |             "shareWithPinterest": "Share with Pinterest",
19 |             "shareWithStumbleUpon": "Share with StumbleUpon",
20 |             "shareWithLinkedIn": "Share with LinkedIn",
21 |             "shareWithBuffer": "Share with Buffer"
22 |         }
23 |     },
24 | 
25 |     "sidebar": {
26 |         "owner": "Owner",
27 |         "authors": "Authors",
28 |         "authorsPost": "Post: ",
29 |         "tags": "Tags",
30 |         "search": "Search",
31 |         "searchPlaceholder": "search...",
32 |         "newsletter": "Newsletter",
33 |         "newsletterDesc": "Sign up to receive email updates and to hear what's going on with us!",
34 |         "newsletterSubscribe": "subscribe"
35 |     },
36 | 
37 |     "post": {
38 |         "publishedOn": "Published on",
39 |         "publishedBy": "Published by",
40 |         "share": "Share this: ",
41 |         "tags": "Tags: ",
42 |         "viewAuthorPosts": "View all posts",
43 |         "relatedPosts": "Related posts",
44 |         "lastUpdatedDate": "This article was updated on",
45 |         "comments": "Comments",
46 |         "previousPost": "Previous Post",
47 |         "nextPost": "Next Post"
48 |     },
49 | 
50 |     "listing": {
51 |         "post": {
52 |             "1": "post",
53 |             "default": "posts"
54 |         },
55 |         "featuredPost": "Featured"
56 |     },
57 | 
58 |     "error": {
59 |         "404": "404",
60 |         "description": "Some evil monkey ninjas stole the content of this site, be careful, they're everywhere."
61 |     },
62 | 
63 |     "search": {
64 |         "title": "Search",
65 |         "description": "This page uses Google Custom Search, to configure it read the following article: <a href=\"https://getpublii.com/docs/search-configuration.html\" target=\"_blank\">https://getpublii.com/docs/search-configuration.html</a>",
66 |         "placeholder": "search..."
67 |     }
68 | }
69 | 


--------------------------------------------------------------------------------
/marco/author.hbs:
--------------------------------------------------------------------------------
 1 | {{> head}}
 2 | <hr class="article__spacer">
 3 | <main class="main--author">
 4 |     {{#author}}
 5 |         {{#if avatar}}
 6 |             <article class="author--avatar">
 7 |                 <img src="{{avatar}}" class="author__avatar" alt="{{name}}">
 8 |             </article>
 9 |         {{/if}}
10 |         {{!-- <h1 class="page-header__title">
11 |                 {{name}}
12 |                 <sup>({{postsNumber}} {{ translate "listing.post" (math postsNumber '+' 0)}})</sup>
13 |             </h1>--}}
14 |         {{#if description}}
15 |             <article class="author-desc">
16 |                 <p>
17 |                     {{description}}
18 |                 </p>
19 |             </article>
20 | 
21 |         {{/if}}
22 |     {{/author}}
23 |     {{!-- {{#each posts}}
24 |         <article class="article">
25 |             {{#featuredImage}}
26 |                 {{#if url}}
27 |                     <a href="{{../url}}">
28 |                         <img src="{{url}}" sizes="{{sizes.listing}}" srcset="{{srcset.listing}}" alt="{{alt}}">
29 |                     </a>
30 |                 {{/if}}
31 |             {{/featuredImage}}
32 | 
33 |             <header>
34 |                 <h2 class="article__title">
35 |                     <a href="{{url}}">{{title}}</a>
36 |                 </h2>
37 |                 {{#if hasCustomExcerpt}}
38 |                     {{{ excerpt }}}
39 |                 {{else}}
40 |                     <p>{{{ excerpt }}}</p>
41 |                 {{/if}}
42 | 
43 |                 <p class="article__meta u-small">
44 |                     {{#author}}
45 |                         <a href="{{url}}" title="{{name}}">
46 |                             {{#if avatar}}
47 |                                 <img src="{{avatar}}" class="article__meta__avatar" alt="{{name}}">
48 |                             {{/if}}
49 |                             {{name}}
50 |                         </a>
51 |                     {{/author}}
52 | 
53 |                     <time datetime="{{date createdAt 'YYYY-MM-DDTHH:mm'}}">
54 |                         {{#checkIf @config.custom.formatDate '!=' 'custom'}}
55 |                             {{date createdAt @config.custom.formatDate}}
56 |     {{else}}
57 |         {{date createdAt @config.custom.formatDateCustom}}
58 |                         {{/checkIf}}
59 |                     </time>
60 |                 </p>
61 | 
62 |             </header>
63 |         </article>
64 |     {{/each}} --}}
65 | 
66 |     {{> pagination}}
67 | </main>
68 | {{> footer}}
69 | 


--------------------------------------------------------------------------------
/marco/partials/head.hbs:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="{{ @website.language }}">
 3 | 
 4 | <head>
 5 |     {{!-- Global site tag (gtag.js) - Google Analytics --}}
 6 |     {{#if @config.custom.trackingID}}
 7 |         <script type="{{ gdprScriptBlocker "analytical"}}" async src="https://www.googletagmanager.com/gtag/js?id={{@config.custom.trackingID}}"></script>
 8 |         <script type="{{ gdprScriptBlocker "analytical"}}">
 9 |             window.dataLayer = window.dataLayer || [];
10 |   function gtag(){dataLayer.push(arguments);}
11 |   gtag('js', new Date());
12 |   gtag('config', '{{@config.custom.trackingID}}');
13 | </script>
14 |     {{/if}}
15 |     <meta charset="utf-8">
16 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
17 |     <meta name="viewport" content="width=device-width, initial-scale=1">
18 |     <meta name="theme-color" content="{{@config.custom.primaryColor}}">
19 |     {{#if title}}
20 |         <title>{{title}}</title>
21 |     {{else}}
22 |         <title>{{@website.name}}</title>
23 |     {{/if}}
24 |     {{metaDescription}}
25 |     {{metaRobots}}
26 |     {{canonicalLink}}
27 |     {{ampLink}}
28 |     {{feedLink}}
29 |     {{socialMetaTags}}
30 |     {{#if @config.custom.faviconUpload}}
31 |         <link rel="shortcut icon" href="{{@config.custom.faviconUpload}}" type="{{@config.custom.faviconExtension}}" />
32 |     {{/if}}
33 |     {{#if @pagination}}
34 |         {{#if @pagination.previousPage}}
35 |             <link rel="prev" href="{{@pagination.previousPageUrl }}">
36 |         {{/if}}
37 |         {{#if @pagination.nextPage}}
38 |             <link rel="next" href="{{@pagination.nextPageUrl }}">
39 |         {{/if}}
40 |     {{/if}}
41 |     <link rel="stylesheet" href="{{css "style.css" }}">
42 |     <link rel="stylesheet" href="{{font @config.custom.headlineFont}}:{{@config.custom.headlineFontWeight}}|{{@config.custom.textFont}}:{{@config.custom.textFontWeight}}, {{@config.custom.heroFontWeight}}" />
43 |     {{jsonLD}}
44 |     {{!-- Insert some custom code by Custom HTML tool --}}
45 |     {{{@headCustomCode}}}
46 | </head>
47 | 
48 | <body>
49 |     {{!-- Insert some custom code by Custom HTML tool --}}
50 |     {{{@bodyCustomCode}}}
51 |     <div class="container">
52 |         <header class="top">
53 |             <a class="logo" href="{{@website.url}}">
54 |                 {{#if @website.logo}}
55 |                     <img src="{{@website.logo}}" alt="{{@website.name}}">
56 |                 {{else}}
57 |                     {{@website.name}}
58 |                 {{/if}}
59 |             </a>
60 |             {{> menu menus.mainMenu}}
61 |             {{#if @config.custom.heroText}}
62 |                 <div class="hero">
63 |                     <div class="hero--text">
64 |                         {{{@config.custom.heroText}}}
65 |                     </div>
66 |                 </div>
67 |             {{/if}}
68 |         </header>
69 | 


--------------------------------------------------------------------------------
/marco/assets/css/editor.css:
--------------------------------------------------------------------------------
  1 | /* 
  2 |  * We can add our own CSS rules to the WYSIWYG editor; thanks to this we can style the post directly in the post editor to match the theme's style.
  3 |  */
  4 | 
  5 | @charset "UTF-8";
  6 | @import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');
  7 | 
  8 | .post__image--left {
  9 |     float: left;
 10 |     margin-right: calc(1.86667rem + 0.5vw);
 11 |     max-width: 50%;
 12 | }
 13 | 
 14 | .post__image--right {
 15 |     float: right;
 16 |     margin-left: calc(1.86667rem + 0.5vw);
 17 |     max-width: 50%;
 18 | }
 19 | 
 20 | .post__image--center {
 21 |     display: block;
 22 |     margin-left: auto;
 23 |     margin-right: auto;
 24 |     text-align: center;
 25 | }
 26 | 
 27 | .post__image--wide {
 28 |     text-align: center;
 29 | }
 30 | 
 31 | .post__image--full {
 32 |     text-align: center;
 33 | }
 34 | 
 35 | .msg {
 36 |     padding: 1.06667rem 1.6rem;
 37 | }
 38 | 
 39 | .msg--highlight {
 40 |     background-color: #fff7e5;
 41 | }
 42 | 
 43 | .msg--info {
 44 |     background-color: #d9edf7;
 45 | }
 46 | 
 47 | .msg--success {
 48 |     background: #d5efc2;
 49 | }
 50 | 
 51 | .dropcap:first-letter {
 52 |     float: left;
 53 |     font-size: 3.65324rem;
 54 |     font-family: "Montserrat";
 55 |     line-height: 0.6;
 56 |     margin-right: 0.5rem;
 57 |     padding: 0.5rem 0.5rem 0.5rem 0;
 58 | }
 59 | 
 60 | p {
 61 |     color: #343434;
 62 |     font-family: 'Montserrat', sans-serif;
 63 |     font-weight: 400;
 64 |     line-height: 1.6
 65 | }
 66 | 
 67 | a {
 68 |     color: #343434;
 69 |     text-decoration: none;
 70 |     -webkit-transition: all 0.24s ease-out;
 71 |     -o-transition: all 0.24s ease-out;
 72 |     transition: all 0.24s ease-out;
 73 | }
 74 | 
 75 | a:hover {
 76 |     color: #3949ab;
 77 | }
 78 | 
 79 | a:active {
 80 |     color: #3949ab;
 81 | }
 82 | 
 83 | a:focus {
 84 |     color: #3949ab;
 85 | }
 86 | 
 87 | p,
 88 | ul,
 89 | ol,
 90 | dl,
 91 | table {
 92 |     margin-top: -webkit-calc(1.33333rem + 0.5vw);
 93 |     margin-top: calc(1.33333rem + 0.5vw);
 94 | }
 95 | 
 96 | blockquote,
 97 | figure {
 98 |     margin-top: -webkit-calc(1.86667rem + 0.5vw);
 99 |     margin-top: calc(1.86667rem + 0.5vw);
100 |     margin-bottom: -webkit-calc(1.86667rem + 0.5vw);
101 |     margin-bottom: calc(1.86667rem + 0.5vw);
102 | }
103 | 
104 | h1,
105 | h2,
106 | h3,
107 | h4,
108 | h5,
109 | h6 {
110 |     color: #343434;
111 |     font-family: 'Montserrat', sans-serif;
112 |     font-weight: 700;
113 |     line-height: 1.2;
114 |     margin-top: -webkit-calc(1.86667rem + 0.5vw);
115 |     margin-top: calc(1.86667rem + 0.5vw);
116 | }
117 | 
118 | h1 {
119 |     font-size: 1.67583rem;
120 |     margin: 0;
121 | }
122 | 
123 | h2 {
124 |     font-size: 1.29454rem;
125 | }
126 | 
127 | h3 {
128 |     font-size: 1.13778rem;
129 | }
130 | 
131 | h4 {
132 |     font-size: 1.06667rem;
133 | }
134 | 
135 | h5 {
136 |     font-size: 0.9375rem;
137 | }
138 | 
139 | h6 {
140 |     font-size: 0.87891rem;
141 | }
142 | 
143 | h2 + p,
144 | h3 + p,
145 | h4 + p,
146 | h5 + p,
147 | h6 + p {
148 |     margin-top: -webkit-calc(0.8rem + 0.25vw);
149 |     margin-top: calc(0.8rem + 0.25vw);
150 | }
151 | 
152 | b,
153 | strong {
154 |     font-weight: 700;
155 | }
156 | 
157 | blockquote {
158 |     font-family: "Montserrat", sans-serif;
159 |     font-weight: 700;
160 |     padding: 0 15%;
161 | }
162 | 
163 | blockquote cite {
164 |     color: #343434;
165 |     display: block;
166 |     font-family: "Montserrat", serif;
167 |     font-size: 0.87891rem;
168 |     font-style: normal;
169 |     padding-top: 0.53333rem;
170 | }
171 | 
172 | blockquote > :nth-child(1) {
173 |     margin-top: 0;
174 | }
175 | 
176 | blockquote:before {
177 |     display: block;
178 |     height: 0;
179 |     content: "“";
180 |     margin-left: -.55em;
181 |     font: normal 400%/0.9 "Montserrat", sans-serif;
182 |     color: #e3e3e3;
183 | }
184 | 
185 | @media all and (min-width: 37.5em) {
186 |     blockquote:before {
187 |         margin-left: -.85em;
188 |     }
189 | }
190 | 
191 | ul,
192 | ol {
193 |     margin-left: 2rem;
194 | }
195 | 
196 | ul > li,
197 | ol > li {
198 |     list-style: inherit;
199 |     padding: 0.26667rem 0 0 1.06667rem;
200 | }
201 | 
202 | dl dt {
203 |     font-weight: 700;
204 | }
205 | 
206 | pre {
207 |     margin: -webkit-calc(1.06667rem + 0.25vw) 0 0;
208 |     margin: calc(1.06667rem + 0.25vw) 0 0;
209 |     padding: 1.6rem 3.2rem;
210 |     white-space: pre-wrap;
211 |     word-wrap: break-word;
212 | }
213 | 
214 | code,
215 | pre {
216 |     background-color: #f6f6f6;
217 |     font-family: "Monaco", "Courier New", monospace;
218 |     font-size: 0.9375rem;
219 | }
220 | 
221 | table {
222 |     border-collapse: collapse;
223 |     border-spacing: 0;
224 |     display: block;
225 |     max-width: 100%;
226 |     overflow-x: auto;
227 |     vertical-align: top;
228 |     text-align: left;
229 |     white-space: nowrap;
230 | }
231 | 
232 | table th {
233 |     border-bottom: 2px solid #e3e3e3;
234 |     padding: 0.8rem 1.33333rem;
235 | }
236 | 
237 | table tr:nth-child(2n) {
238 |     background: whitesmoke;
239 | }
240 | 
241 | table td {
242 |     padding: 0.8rem 1.33333rem;
243 | }
244 | 
245 | figcaption {
246 |     color: #908e98;
247 |     font-family: "Montserrat", sans-serif;
248 |     font-weight: 400;
249 |     font-size: 0.77248rem;
250 |     margin: 1.06667rem 0 0;
251 |     text-align: center;
252 | }
253 | 
254 | sub,
255 | sup {
256 |     font-size: 65%;
257 | }
258 | 


--------------------------------------------------------------------------------
/marco/post.hbs:
--------------------------------------------------------------------------------
  1 | {{> head}}
  2 | 
  3 | {{!-- We use #checkIfNone here because if a sidebar is disabled the main container should stretch to full width. So, if there is no sidebar the main--full class is added. --}}
  4 | <hr class="article__spacer">
  5 | <main class="main--full">
  6 |     {{#if @customHTML.beforePost}}
  7 |         <div class="banner banner--before-post">
  8 |             {{@customHTML.beforePost }}
  9 |         </div>
 10 |     {{/if}}
 11 |     {{#post}}
 12 |         <article class="post">
 13 |             <header>
 14 |                 <h1>
 15 |                     {{title}}
 16 |                 </h1>
 17 |                 {{#checkIfAny @config.post.displayCategoryName @config.post.displayAuthor @config.post.displayDate}}
 18 |                     <ul class="post__meta u-small">
 19 |                         {{#if @config.post.displayAuthor}}
 20 |                             <li>
 21 |                                 {{#author}}
 22 |                                     <a href="{{url}}" rel="author" title="{{name}}">{{name}}</a>
 23 |                                 {{/author}}
 24 |                             </li>
 25 |                         {{/if}}
 26 |                         {{#if @config.post.displayDate}}
 27 |                             <li>
 28 |                                 {{ translate 'post.publishedOn' }}
 29 |                                 <time datetime="{{date createdAt 'YYYY-MM-DDTHH:mm'}}">
 30 |                                     {{#checkIf @config.custom.formatDate '!=' 'custom'}}
 31 |                                         {{date createdAt @config.custom.formatDate}}
 32 |                         {{else}}
 33 |                             {{date createdAt @config.custom.formatDateCustom}}
 34 |                                     {{/checkIf}}
 35 |                                 </time>
 36 |                             </li>
 37 |                         {{/if}}
 38 |                         {{#if @config.post.displayCategoryName}}
 39 |                             {{#if tags}}
 40 |                                 <li>
 41 |                                     {{#each tags}}
 42 |                                         {{#if @first}}
 43 |                                             Category: <a href="{{url}}" title="{{name}}">{{name}}</a>
 44 |                                         {{/if}}
 45 |                                     {{/each}}
 46 |                                 </li>
 47 |                             {{/if}}
 48 |                         {{/if}}
 49 | 
 50 |                         {{!-- If a post is marked as Featured, display the following code --}}
 51 |                         {{#isFeatured}}
 52 |                             <li>
 53 |                                 <svg class="u-icon" aria-hidden="true">
 54 |                                     <use xlink:href="{{@website.assetsUrl}}/svg/svg-map.svg#featured" />
 55 |                                 </svg>
 56 |                                 Featured
 57 |                             </li>
 58 |                         {{/isFeatured}}
 59 |                     </ul>
 60 |                 {{/checkIfAny}}
 61 | 
 62 |                 {{#featuredImage}}
 63 |                     {{#if url}}
 64 |                         <figure>
 65 |                             <img src="{{url}}" sizes="{{sizes.post}}" srcset="{{srcset.post}}" alt="{{alt}}">
 66 |                             {{#checkIfAny caption credits}}
 67 |                                 <figcaption>
 68 |                                     {{caption}}
 69 |                                     {{credits}}
 70 |                                 </figcaption>
 71 |                             {{/checkIfAny}}
 72 |                         </figure>
 73 |                     {{/if}}
 74 |                 {{/featuredImage}}
 75 | 
 76 |             </header>
 77 | 
 78 |             <div class="post__entry">
 79 |                 {{{text}}}
 80 |             </div>
 81 | 
 82 |             {{#checkIfAny @config.post.displayLastUpdatedDate @config.post.displayShareButtons @config.post.displayTags @config.post.displayAuthorBio @config.post.displayPostNavigation @config.post.displayRelatedPosts}}
 83 |                 <footer class="post__footer">
 84 |                     {{#if @config.post.displayLastUpdatedDate}}
 85 |                         {{#if modifiedAt}}
 86 |                             <p class="post__last-updated">
 87 |                                 {{ translate 'post.lastUpdatedDate' }}
 88 |                                 {{date modifiedAt @config.custom.formatDate}}</p>
 89 |                         {{/if}}
 90 |                     {{/if}}
 91 | 
 92 |                     {{#if @config.post.displayTags}}
 93 |                         {{#if tags}}
 94 |                             <ul class="post__tag box">
 95 |                                 <h3 class="box__title">
 96 |                                     {{ translate 'post.tags' }}
 97 |                                 </h3>
 98 |                                 {{#each tags}}
 99 |                                     <li>
100 |                                         <a href="{{url}}">{{name}}</a>
101 |                                     </li>
102 |                                 {{/each}}
103 |                             </ul>
104 |                         {{/if}}
105 |                     {{/if}}
106 |                 </footer>
107 |             {{/checkIfAny}}
108 |         </article>
109 |     {{/post}}
110 | 
111 | 
112 |     {{#if @customHTML.afterPost}}
113 |         <div class="banner banner--after-post">
114 |             {{@customHTML.afterPost}}
115 |         </div>
116 |     {{/if}}
117 | </main>
118 | 
119 | {{> footer}}
120 | 


--------------------------------------------------------------------------------
/marco/visual-override.js:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * Custom function used to generate the output of the override.css file
  3 |  */
  4 | 
  5 | var generateOverride = function (params) {
  6 |     let output = '';
  7 | 
  8 |     if (params.minFontSize !== '1' || params.maxFontSize !== '1.3') {
  9 |         output += `
 10 |         html {
 11 |           font-size: ${params.minFontSize}rem;
 12 |         }
 13 | 		
 14 |         @media screen and (min-width: 20rem) {
 15 |           html {
 16 |                font-size: calc(${params.minFontSize}rem + (${params.maxFontSize} - ${params.minFontSize}) * ((100vw - 20rem) / 113));
 17 |           }
 18 |         }
 19 | 
 20 |         @media screen and (min-width: 133rem) {
 21 |           html {
 22 |                font-size: ${params.maxFontSize}rem;
 23 |             }
 24 |         }`;
 25 |     }
 26 |     if (params.overlayColor !== '#000000' || params.overlayColor !== 'black') {
 27 |         output += `
 28 |         .overlay {
 29 |                background: ${params.overlayColor};
 30 |         }`;
 31 |     }
 32 |     if (params.overlayOpacity !== '0.8') {
 33 |         output += `
 34 |         .overlay:hover {
 35 |                opacity: ${params.overlayOpacity};
 36 |         }`;
 37 |     }
 38 | 
 39 |     if (params.textColor !== '#343434') {
 40 |         output += `
 41 |         body {
 42 |                color: ${params.textColor};
 43 |         }
 44 | `;
 45 |     }
 46 | 
 47 |     if (params.textFont !== 'Montserrat') {
 48 |         output += `
 49 |         body,
 50 | 		blockquote,
 51 | 		figcaption{
 52 |                font-family: ${params.textFont};
 53 |         }`;
 54 |     }
 55 |     if (params.textFontWeight !== '400') {
 56 |         output += `
 57 |         body,
 58 | 		blockquote,
 59 | 		figcaption{
 60 |                font-weight: ${params.textFontWeight};
 61 |         }`;
 62 |     }
 63 |     if (params.heroFontWeight !== '500') {
 64 |         output += `
 65 |         .hero{
 66 |                font-weight: ${params.heroFontWeight};
 67 |         }`;
 68 |     }
 69 | 
 70 |     if (params.headingColor !== '#343434') {
 71 |         output += `
 72 |         h1,
 73 |         h2,
 74 |         h3,
 75 |         h4,
 76 |         h5,
 77 |         h6 {
 78 |                color: ${params.headingColor};
 79 |         }`;
 80 |     }
 81 | 
 82 |     if (params.headlineFont !== 'Montserrat') {
 83 |         output += `
 84 |         h1,
 85 |         h2,
 86 |         h3,
 87 |         h4,
 88 |         h5,
 89 |         h6 {
 90 |                font-family: ${params.headlineFont};
 91 |         }`;
 92 |     }
 93 | 
 94 |     if (params.headlineFontWeight !== '400') {
 95 |         output += `
 96 |         h1,
 97 |         h2,
 98 |         h3,
 99 |         h4,
100 |         h5,
101 |         h6 {
102 |                font-weight: ${params.headlineFontWeight};
103 |         }`;
104 |     }
105 | 
106 |     if (params.linkColor !== '#343434') {
107 |         output += `
108 |         a {
109 |                color: ${params.linkColor};
110 |                fill: ${params.linkColor};
111 |         }
112 |         .post__entry a:hover,
113 |         .post__entry a:active,
114 |         .post__entry a:focus {
115 |                color: ${params.linkColor};
116 |                fill: ${params.linkColor};
117 |         }`;
118 |     }
119 | 
120 |     if (params.linkHoverColor !== '#3949ab') {
121 |         output += `
122 |         a:hover,
123 |         a:active,
124 |         a:focus {
125 |                color: ${params.linkHoverColor};
126 |                fill: ${params.linkHoverColor};
127 |         }
128 |         .post__entry a {
129 |                color: ${params.linkHoverColor};
130 |                fill: ${params.linkHoverColor};
131 |         }
132 |         .post__nav__link:hover h5 {
133 |                color: ${params.linkHoverColor};
134 |                fill: ${params.linkHoverColor};
135 |         }`;
136 |     }
137 | 
138 |     if (params.primaryColor !== '#3949ab') {
139 |         output += `
140 |         .btn,
141 |         [type=button],
142 |         [type=submit],
143 |         button {
144 |                background: ${params.primaryColor};
145 |         }
146 | 
147 |         [type=text]:focus,
148 |         [type=url]:focus,
149 |         [type=tel]:focus,
150 |         [type=number]:focus,
151 |         [type=email]:focus,
152 |         [type=search]:focus,
153 |         textarea:focus,
154 |         select:focus {
155 |                -webkit-box-shadow: inset 0 0 2px ${params.primaryColor};
156 |                box-shadow: inset 0 0 2px ${params.primaryColor};
157 |         }
158 | 
159 |         input[type=checkbox]:checked + label:before {
160 |                background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 8'%3e%3cpolygon points='9.53 0 4.4 5.09 1.47 2.18 0 3.64 2.93 6.54 4.4 8 5.87 6.54 11 1.46 9.53 0' fill='${params.primaryColor.replace('#', '%23')}'/%3e%3c/svg%3e");
161 |         }
162 | 
163 |         input[type=radio]:checked + label:before {
164 |                background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3ccircle cx='4' cy='4' r='4' fill='${params.primaryColor.replace('#', '%23')}'/%3e%3c/svg%3e"); 
165 |         }
166 | 
167 |         select[multiple]:focus {
168 |                border-color: ${params.primaryColor};
169 |         }
170 | 
171 |         .box__title {
172 |                color: ${params.primaryColor};
173 |         }
174 | 
175 |         .page-header__title {
176 |                color: ${params.primaryColor};
177 |         }
178 | 
179 |         .cookie-popup,
180 |         .cookie-popup__save {
181 |                background: ${params.primaryColor};  
182 |         }`;
183 |     }
184 | 
185 |     if (params.submenu === 'custom') {
186 |         output += `
187 |         @media all and (min-width: 56.25em) {
188 |         .navbar__submenu  {
189 |                width: ${params.submenuWidth}rem;
190 |             }
191 |         }`;
192 |     }
193 | 
194 |     if (params.linkColorMenu !== '#343434') {
195 |         output += `
196 |         .navbar__menu li a,
197 |         .navbar__menu li span {
198 |                color: ${params.linkColorMenu};
199 |         }`;
200 |     }
201 | 
202 |     if (params.linkHoverColorMenu !== '#3949ab') {
203 |         output += `
204 |         .navbar__menu li a:hover:not(span),
205 |         .navbar__menu li span:hover:not(span) {
206 |                color: ${params.linkHoverColorMenu};
207 |         }`;
208 |     }
209 | 
210 |     if (params.headingHeroColor !== '#ffffff') {
211 |         output += `
212 |         .hero__text > h1 {
213 |                 color: ${params.headingHeroColor};
214 |         }`;
215 |     }
216 | 
217 |     if (params.textHeroColor !== '#ffffff') {
218 |         output += `
219 |         .hero__text {
220 |                color: ${params.textHeroColor};
221 |         }`;
222 |     }
223 | 
224 |     if (params.galleryItemGap !== '0.53333rem') {
225 |         output += `   
226 |         gallery__item {
227 |                padding: ${params.galleryItemGap}; 
228 |         } 
229 |                gallery {   
230 |                margin: calc(1.6rem + 1vw) -${params.galleryItemGap}; 
231 |         }`;
232 |     }
233 | 
234 |     return output;
235 | }
236 | 
237 | module.exports = generateOverride;
238 | 


--------------------------------------------------------------------------------
/marco/partials/menu.hbs:
--------------------------------------------------------------------------------
  1 | {{!-- We need to display nav element only at first level --}}
  2 | {{#unless level}}
  3 |     <nav class="navbar">
  4 | {{/unless}}
  5 | <ul {{#if level}} class="navbar__submenu" {{else}} class="navbar__menu" {{/if}}>
  6 |     {{#each items}}
  7 |         <li {{menuItemClasses}}>
  8 |             {{#if link}}
  9 |                 <a href="{{menuUrl}}" {{#if title}} title="{{title}}" id="{{title}}" {{/if}}>{{#if @config.custom.escapeMenu}}{{label}}{{else}}{{{label}}}{{/if}}</a>
 10 |                 <div class="active__icon">
 11 |                     <svg width="1.5rem" height="1.5rem" viewBox="0 0 24 24">
 12 |                         <path d="M12 0c-4.87 7.197-8 11.699-8 16.075 0 4.378 3.579 7.925 8 7.925s8-3.547 8-7.925c0-4.376-3.13-8.878-8-16.075z" /></svg>
 13 |                 </div>
 14 |             {{else}} <span {{#if title}} title="{{title}}" {{/if}}>{{label}}</span>
 15 |             {{/if}}
 16 | 
 17 |             {{#if items}}
 18 |                 {{> menu}}
 19 |             {{/if}}
 20 |         </li>
 21 |     {{/each}}
 22 | </ul>
 23 | {{!-- We need to display nav element only at first level --}}
 24 | {{#unless level}}
 25 |     {{#if @config.custom.socialButtons}}
 26 |         <div class="menu__social">
 27 |             {{#if @config.custom.socialFacebook}}
 28 |                 <a href="{{@config.custom.socialFacebook}}" title="Facebook" aria-label="Facebook">
 29 |                     <svg class="u-icon" viewBox="0 0 32 32">
 30 |                         <path d="M30.234 0H1.766A1.766 1.766 0 0 0 0 1.766v28.468A1.766 1.766 0 0 0 1.766 32h15.326V19.608h-4.17v-4.83h4.17v-3.56c0-4.134 2.524-6.385 6.21-6.385a34.216 34.216 0 0 1 3.727.19v4.32h-2.557c-2.005 0-2.394.953-2.394 2.35v3.084h4.78l-.622 4.83h-4.16V32h8.154A1.766 1.766 0 0 0 32 30.234V1.766A1.766 1.766 0 0 0 30.234 0z" />
 31 |                     </svg>
 32 |                 </a>
 33 |             {{/if}}
 34 |             {{#if @config.custom.socialTwitter}}
 35 |                 <a href="{{@config.custom.socialTwitter}}" title="Twitter" aria-label="Twitter">
 36 |                     <svg class="u-icon" viewBox="0 0 24.999 20.316">
 37 |                         <path d="M25 2.405a10.253 10.253 0 0 1-2.947.808A5.144 5.144 0 0 0 24.308.376 10.27 10.27 0 0 1 21.05 1.62a5.134 5.134 0 0 0-8.74 4.68A14.56 14.56 0 0 1 1.74.94a5.134 5.134 0 0 0 1.587 6.846 5.108 5.108 0 0 1-2.323-.642v.064a5.132 5.132 0 0 0 4.114 5.03 5.142 5.142 0 0 1-2.316.088 5.134 5.134 0 0 0 4.79 3.562 10.29 10.29 0 0 1-6.37 2.2A10.44 10.44 0 0 1 0 18.012a14.586 14.586 0 0 0 22.454-12.29q0-.333-.015-.662A10.423 10.423 0 0 0 25 2.405z" />
 38 |                     </svg>
 39 |                 </a>
 40 |             {{/if}}
 41 |             {{#if @config.custom.socialInstagram}}
 42 |                 <a href="{{@config.custom.socialInstagram}}" title="Instagram" aria-label="Instagram">
 43 |                     <svg class="u-icon" viewBox="0 0 32 32">
 44 |                         <path d="M16,2.883c4.272,0,4.778.016,6.465.093a8.853,8.853,0,0,1,2.971.551,4.957,4.957,0,0,1,1.84,1.2,4.957,4.957,0,0,1,1.2,1.84,8.853,8.853,0,0,1,.551,2.971c.077,1.687.093,2.193.093,6.465s-.016,4.778-.093,6.465a8.853,8.853,0,0,1-.551,2.971,5.3,5.3,0,0,1-3.037,3.037,8.853,8.853,0,0,1-2.971.551c-1.687.077-2.193.093-6.465.093s-4.778-.016-6.465-.093a8.853,8.853,0,0,1-2.971-.551,4.957,4.957,0,0,1-1.84-1.2,4.957,4.957,0,0,1-1.2-1.84,8.853,8.853,0,0,1-.551-2.971C2.9,20.778,2.883,20.272,2.883,16s.016-4.778.093-6.465a8.853,8.853,0,0,1,.551-2.971,4.957,4.957,0,0,1,1.2-1.84,4.957,4.957,0,0,1,1.84-1.2,8.853,8.853,0,0,1,2.971-.551C11.222,2.9,11.728,2.883,16,2.883M16,0c-4.345,0-4.89.018-6.6.1A11.744,11.744,0,0,0,5.519.84,7.843,7.843,0,0,0,2.685,2.685,7.843,7.843,0,0,0,.84,5.519,11.744,11.744,0,0,0,.1,9.4C.018,11.11,0,11.655,0,16s.018,4.89.1,6.6A11.744,11.744,0,0,0,.84,26.481a7.843,7.843,0,0,0,1.845,2.834A7.843,7.843,0,0,0,5.519,31.16,11.744,11.744,0,0,0,9.4,31.9c1.707.078,2.251.1,6.6.1s4.89-.018,6.6-.1a11.744,11.744,0,0,0,3.884-.744,8.181,8.181,0,0,0,4.679-4.679A11.744,11.744,0,0,0,31.9,22.6c.078-1.707.1-2.251.1-6.6s-.018-4.89-.1-6.6a11.744,11.744,0,0,0-.744-3.884,7.843,7.843,0,0,0-1.845-2.834A7.843,7.843,0,0,0,26.481.84,11.744,11.744,0,0,0,22.6.1C20.89.018,20.345,0,16,0Zm0,7.784A8.216,8.216,0,1,0,24.216,16,8.216,8.216,0,0,0,16,7.784Zm0,13.55A5.333,5.333,0,1,1,21.333,16,5.333,5.333,0,0,1,16,21.333ZM24.541,5.539a1.92,1.92,0,1,0,1.92,1.92A1.92,1.92,0,0,0,24.541,5.539Z" />
 45 |                     </svg>
 46 |                 </a>
 47 |             {{/if}}
 48 |             {{#if @config.custom.socialLinkedin}}
 49 |                 <a href="{{@config.custom.socialLinkedin}}" title="LinkedIn" aria-label="LinkedIn">
 50 |                     <svg class="u-icon" viewBox="0 0 34.48 32">
 51 |                         <path d="M29.632,0H2.362A2.336,2.336,0,0,0,0,2.306V29.691A2.337,2.337,0,0,0,2.362,32h27.27A2.342,2.342,0,0,0,32,29.691V2.306A2.34,2.34,0,0,0,29.632,0ZM9.491,27.268H4.744V12H9.491ZM7.119,9.909a2.752,2.752,0,1,1,2.75-2.753A2.753,2.753,0,0,1,7.119,9.909ZM27.268,27.268H22.525V19.842c0-1.772-.033-4.05-2.466-4.05-2.47,0-2.848,1.929-2.848,3.921v7.555H12.468V12h4.553v2.086h.063a4.986,4.986,0,0,1,4.491-2.467c4.806,0,5.694,3.163,5.694,7.275Z" />
 52 |                     </svg>
 53 |                 </a>
 54 |             {{/if}}
 55 |             {{#if @config.custom.socialVimeo}}
 56 |                 <a href="{{@config.custom.socialVimeo}}" title="Vimeo" aria-label="Vimeo">
 57 |                     <svg class="u-icon" viewBox="0 0 24.999 20.159">
 58 |                         <path d="M26.105,5.927q3.628,0.1,3.641,4.123c0,0.176-.006.36-0.016,0.548q-0.16,3.416-5.09,9.306-5.089,6.17-8.634,6.183-2.205,0-3.671-3.779l-1.029-3.454L10.29,15.4q-1.124-3.749-2.406-3.746a7.819,7.819,0,0,0-1.95,1.091l-1.187-1.4,1.842-1.53L8.4,8.3a8.908,8.908,0,0,1,3.7-2.107,3.207,3.207,0,0,1,.341-0.016q2.606,0,3.249,3.746,0.356,2.137.594,3.473t0.387,1.867q0.862,3.544,1.859,3.559,0.766,0,2.36-2.31A9.305,9.305,0,0,0,22.562,13a2.969,2.969,0,0,0,.031-0.434,1.439,1.439,0,0,0-1.7-1.547,5.46,5.46,0,0,0-1.843.359q1.763-5.434,6.775-5.449h0.281Z" transform="translate(-4.747 -5.927)" />
 59 |                     </svg>
 60 |                 </a>
 61 |             {{/if}}
 62 |             {{#if @config.custom.socialPinterest}}
 63 |                 <a href="{{@config.custom.socialPinterest}}" title="Pinterest" aria-label="Pinterest">
 64 |                     <svg class="u-icon" viewBox="0 0 32 32">>
 65 |                         <path d="M16 0a16 16 0 0 0-5.83 30.9 15.34 15.34 0 0 1 .055-4.59c.29-1.25 1.876-7.953 1.876-7.953a5.776 5.776 0 0 1-.478-2.375c0-2.225 1.29-3.886 2.9-3.886a2.01 2.01 0 0 1 2.024 2.254c0 1.373-.874 3.425-1.325 5.327a2.323 2.323 0 0 0 2.37 2.89c2.844 0 5.03-3 5.03-7.326a6.316 6.316 0 0 0-6.683-6.508 6.926 6.926 0 0 0-7.225 6.944 6.224 6.224 0 0 0 1.188 3.65.478.478 0 0 1 .11.46c-.12.504-.39 1.59-.443 1.814-.07.293-.232.355-.535.214-2-.93-3.248-3.852-3.248-6.2 0-5.047 3.667-9.682 10.572-9.682 5.55 0 9.864 3.955 9.864 9.24 0 5.515-3.477 9.953-8.3 9.953a4.282 4.282 0 0 1-3.667-1.837s-.8 3.055-1 3.8a17.885 17.885 0 0 1-1.99 4.195A16 16 0 1 0 16 0z" />
 66 |                     </svg>
 67 |                 </a>
 68 |             {{/if}}
 69 |             {{#if @config.custom.socialYoutube}}
 70 |                 <a href="{{@config.custom.socialYoutube}}" title="Youtube" aria-label="Youtube">
 71 |                     <svg class="u-icon" viewBox="0 0 32 22.507">
 72 |                         <path d="M31.68,9.6a6.924,6.924,0,0,0-1.272-3.176A4.577,4.577,0,0,0,27.2,5.07c-4.478-.324-11.2-0.324-11.2-0.324H15.993s-6.717,0-11.2.324A4.577,4.577,0,0,0,1.592,6.426,6.921,6.921,0,0,0,.32,9.6,48.4,48.4,0,0,0,0,14.781v2.428a48.4,48.4,0,0,0,.32,5.179,6.921,6.921,0,0,0,1.272,3.176A5.426,5.426,0,0,0,5.12,26.932C7.68,27.177,16,27.253,16,27.253s6.724-.01,11.2-0.334a4.577,4.577,0,0,0,3.206-1.355,6.923,6.923,0,0,0,1.272-3.176A48.46,48.46,0,0,0,32,17.209V14.781A48.46,48.46,0,0,0,31.68,9.6ZM12.7,20.151l0-8.991,8.647,4.511Z" transform="translate(0 -4.747)" />
 73 |                     </svg>
 74 |                 </a>
 75 |             {{/if}}
 76 |             {{#if @config.custom.socialBehance}}
 77 |                 <a href="{{@config.custom.socialBehance}}" title="Behance" aria-label="Behance">
 78 |                     <svg class="u-icon" viewBox="0 0 50 50" style="height: 1.5rem; width: 1.5rem;">
 79 |                         <path d="M388.432,119.12H280.659V92.35h107.782v26.77H388.432z M208.912,228.895
 80 | 		c6.954,10.771,10.429,23.849,10.429,39.203c0,15.878-3.918,30.122-11.889,42.704c-5.071,8.326-11.367,15.359-18.932,21.021
 81 | 		c-8.52,6.548-18.607,11.038-30.203,13.437c-11.633,2.403-24.224,3.617-37.787,3.617H0V81.247h129.25
 82 | 		c32.579,0.53,55.676,9.969,69.315,28.506c8.184,11.369,12.239,25.011,12.239,40.868c0,16.362-4.104,29.454-12.368,39.401
 83 | 		c-4.597,5.577-11.388,10.65-20.378,15.229C191.675,210.236,202.007,218.086,208.912,228.895z M61.722,186.76h56.632
 84 | 		c11.638,0,21.046-2.212,28.292-6.634c7.241-4.415,10.854-12.263,10.854-23.531c0-12.449-4.784-20.712-14.375-24.689
 85 | 		c-8.244-2.763-18.792-4.186-31.591-4.186H61.722V186.76z M162.953,264.275c0-13.902-5.682-23.513-17.023-28.67
 86 | 		c-6.342-2.931-15.29-4.429-26.763-4.536H61.722v71.322h56.556c11.619,0,20.612-1.521,27.102-4.694
 87 | 		C157.084,291.863,162.953,280.76,162.953,264.275z M428.419,220.736c1.302,8.756,1.891,21.46,1.652,38.065H290.493
 88 | 		c0.77,19.266,7.421,32.739,20.035,40.449c7.607,4.835,16.83,7.196,27.63,7.196c11.388,0,20.67-2.879,27.815-8.797
 89 | 		c3.893-3.137,7.327-7.565,10.296-13.152h51.16c-1.34,11.379-7.5,22.92-18.57,34.648c-17.151,18.641-41.205,27.988-72.097,27.988
 90 | 		c-25.52,0-48.011-7.883-67.533-23.592C249.772,307.777,240,282.211,240,246.746c0-33.257,8.773-58.712,26.378-76.43
 91 | 		c17.67-17.751,40.474-26.586,68.583-26.586c16.661,0,31.68,2.978,45.079,8.965c13.357,5.993,24.396,15.425,33.09,28.388
 92 | 		C420.998,192.499,426.058,205.699,428.419,220.736z M378.062,225.73c-0.938-13.322-5.386-23.405-13.395-30.296
 93 | 		c-7.943-6.91-17.866-10.379-29.706-10.379c-12.886,0-22.836,3.708-29.906,10.996c-7.118,7.273-11.547,17.161-13.362,29.68H378.062
 94 | 		L378.062,225.73z" transform="scale(0.1 0.1)" />
 95 |                     </svg>
 96 |                 </a>
 97 |             {{/if}}
 98 |             {{#if @config.custom.socialPatreon}}
 99 |                 <a href="{{@config.custom.socialPatreon}}" title="Patreon" aria-label="Patreon">
100 |                     <svg class="u-icon" viewBox="0 0 32 32">
101 |                         <path d="M127.996927,0.00236400943 C57.3035887,0.00236400943 0,57.3059527 0,127.999291 L0,255.934753 L29.7127618,255.934753 L29.7127618,127.999291 C29.7127618,73.7216342 73.7187974,29.7132346 127.998818,29.7132346 C182.278839,29.7132346 226.284874,73.7192702 226.284874,127.999291 C226.284874,180.749797 184.71566,223.784225 132.5519,226.162419 C115.97783,226.026743 101.847673,223.336907 95.6586961,219.528535 L95.6586961,177.286523 C104.895827,183.334605 115.943788,186.860762 127.809224,186.860762 C160.262819,186.860762 186.569043,160.554065 186.569043,128.100943 C186.569043,95.6473489 160.262346,69.3269407 127.809224,69.3269407 C95.3556301,69.3269407 69.049406,95.6482945 69.049406,128.100943 L69.049406,255.937117 C88.4432665,255.919009 109.044663,255.963689 128.003073,255.937117 C198.696411,255.937117 256,198.690265 256,128.001655 C255.995272,57.3035887 198.686955,0 127.998345,0 L127.996927,0.00236400943 Z" transform="scale(0.12 0.12)" />
102 |                     </svg>
103 |                 </a>
104 |             {{/if}}
105 |         </div>
106 |     {{/if}}
107 |     </nav>
108 | {{/unless}}
109 | 


--------------------------------------------------------------------------------
/marco/assets/css/main.css:
--------------------------------------------------------------------------------
  1 | *,
  2 | *:before,
  3 | *:after {
  4 |     -webkit-box-sizing: border-box;
  5 |     box-sizing: border-box;
  6 |     margin: 0;
  7 |     padding: 0;
  8 |     text-decoration: none;
  9 | }
 10 | 
 11 | article,
 12 | aside,
 13 | footer,
 14 | header,
 15 | hgroup,
 16 | nav,
 17 | section {
 18 |     display: block;
 19 | }
 20 | 
 21 | li {
 22 |     list-style: none;
 23 | }
 24 | 
 25 | img {
 26 |     height: auto;
 27 |     max-width: 100%;
 28 |     vertical-align: top;
 29 |     pointer-events: none;
 30 | }
 31 | 
 32 | button,
 33 | input,
 34 | select,
 35 | textarea {
 36 |     font: inherit;
 37 | }
 38 | 
 39 | html {
 40 |     font-size: 1rem;
 41 | }
 42 | 
 43 | @media screen and (min-width: 20rem) {
 44 |     html {
 45 |         font-size: -webkit-calc(1rem + 0.2 * ((100vw - 20rem) / 113));
 46 |         font-size: calc(1rem + 0.2 * ((100vw - 20rem) / 113));
 47 |     }
 48 | }
 49 | 
 50 | @media screen and (min-width: 133rem) {
 51 |     html {
 52 |         font-size: 1.2rem;
 53 |     }
 54 | }
 55 | 
 56 | 
 57 | .dropcap:first-letter {
 58 |     color: #343434;
 59 |     float: left;
 60 |     font-family: "Montserrat", sans-serif;
 61 |     line-height: 0.6;
 62 |     margin-right: 0.53333rem;
 63 |     padding: 0.53333rem 0.53333rem 0.53333rem 0;
 64 | }
 65 | 
 66 | .dropcap:first-letter {
 67 |     font-size: 2.8084rem;
 68 | }
 69 | 
 70 | @media screen and (min-width: 20rem) {
 71 |     .dropcap:first-letter {
 72 |         font-size: -webkit-calc(2.8084rem + 1.898 * ((100vw - 20rem) / 113));
 73 |         font-size: calc(2.8084rem + 1.898 * ((100vw - 20rem) / 113));
 74 |     }
 75 | }
 76 | 
 77 | @media screen and (min-width: 133rem) {
 78 |     .dropcap:first-letter {
 79 |         font-size: 4.70641rem;
 80 |     }
 81 | }
 82 | 
 83 | body {
 84 |     background: #ffffff;
 85 |     color: #343434;
 86 |     font-family: 'Montserrat', sans-serif;
 87 |     font-weight: 400;
 88 |     line-height: 1.6
 89 | }
 90 | 
 91 | a {
 92 |     color: #343434;
 93 |     text-decoration: none;
 94 |     -webkit-transition: all 0.24s ease-out;
 95 |     -o-transition: all 0.24s ease-out;
 96 |     transition: all 0.24s ease-out;
 97 | }
 98 | 
 99 | a:hover {
100 |     color: #751aff;
101 |     fill: #751aff;
102 | }
103 | 
104 | a:active {
105 |     color: #751aff;
106 |     fill: #751aff;
107 | }
108 | 
109 | a:focus {
110 |     color: #751aff;
111 |     fill: #751aff;
112 | }
113 | 
114 | p,
115 | ul,
116 | ol,
117 | dl,
118 | table {
119 |     margin-top: -webkit-calc(1.33333rem + 0.5vw);
120 |     margin-top: calc(1.33333rem + 0.5vw);
121 | }
122 | 
123 | blockquote,
124 | figure {
125 |     margin-top: -webkit-calc(1.86667rem + 0.5vw);
126 |     margin-top: calc(1.86667rem + 0.5vw);
127 |     margin-bottom: -webkit-calc(1.86667rem + 0.5vw);
128 |     margin-bottom: calc(1.86667rem + 0.5vw);
129 | }
130 | 
131 | h1,
132 | h2,
133 | h3,
134 | h4,
135 | h5,
136 | h6 {
137 |     color: #343434;
138 |     font-family: 'Montserrat', sans-serif;
139 |     font-weight: 700;
140 |     line-height: 1.2;
141 |     margin-top: -webkit-calc(1.86667rem + 0.5vw);
142 |     margin-top: calc(1.86667rem + 0.5vw);
143 | }
144 | 
145 | h1 {
146 |     margin: 0;
147 | }
148 | 
149 | h1 {
150 |     font-size: 1.67583rem;
151 | }
152 | 
153 | @media screen and (min-width: 20rem) {
154 |     h1 {
155 |         font-size: -webkit-calc(1.67583rem + 0.4936 * ((100vw - 20rem) / 113));
156 |         font-size: calc(1.67583rem + 0.4936 * ((100vw - 20rem) / 113));
157 |     }
158 | }
159 | 
160 | @media screen and (min-width: 133rem) {
161 |     h1 {
162 |         font-size: 2.16943rem;
163 |     }
164 | }
165 | 
166 | h2 {
167 |     font-size: 1.29454rem;
168 | }
169 | 
170 | @media screen and (min-width: 20rem) {
171 |     h2 {
172 |         font-size: -webkit-calc(1.29454rem + 0.27655 * ((100vw - 20rem) / 113));
173 |         font-size: calc(1.29454rem + 0.27655 * ((100vw - 20rem) / 113));
174 |     }
175 | }
176 | 
177 | @media screen and (min-width: 133rem) {
178 |     h2 {
179 |         font-size: 1.57109rem;
180 |     }
181 | }
182 | 
183 | h3 {
184 |     font-size: 1.13778rem;
185 | }
186 | 
187 | @media screen and (min-width: 20rem) {
188 |     h3 {
189 |         font-size: -webkit-calc(1.13778rem + 0.24306 * ((100vw - 20rem) / 113));
190 |         font-size: calc(1.13778rem + 0.24306 * ((100vw - 20rem) / 113));
191 |     }
192 | }
193 | 
194 | @media screen and (min-width: 133rem) {
195 |     h3 {
196 |         font-size: 1.38084rem;
197 |     }
198 | }
199 | 
200 | h4 {
201 |     font-size: 1.06667rem;
202 | }
203 | 
204 | @media screen and (min-width: 20rem) {
205 |     h4 {
206 |         font-size: -webkit-calc(1.06667rem + 0.14696 * ((100vw - 20rem) / 113));
207 |         font-size: calc(1.06667rem + 0.14696 * ((100vw - 20rem) / 113));
208 |     }
209 | }
210 | 
211 | @media screen and (min-width: 133rem) {
212 |     h4 {
213 |         font-size: 1.21363rem;
214 |     }
215 | }
216 | 
217 | h5 {
218 |     font-size: 0.9375rem;
219 | }
220 | 
221 | @media screen and (min-width: 20rem) {
222 |     h5 {
223 |         font-size: -webkit-calc(0.9375rem + 0.12917 * ((100vw - 20rem) / 113));
224 |         font-size: calc(0.9375rem + 0.12917 * ((100vw - 20rem) / 113));
225 |     }
226 | }
227 | 
228 | @media screen and (min-width: 133rem) {
229 |     h5 {
230 |         font-size: 1.06667rem;
231 |     }
232 | }
233 | 
234 | h6 {
235 |     font-size: 0.87891rem;
236 | }
237 | 
238 | @media screen and (min-width: 20rem) {
239 |     h6 {
240 |         font-size: -webkit-calc(0.87891rem + 0.12109 * ((100vw - 20rem) / 113));
241 |         font-size: calc(0.87891rem + 0.12109 * ((100vw - 20rem) / 113));
242 |     }
243 | }
244 | 
245 | @media screen and (min-width: 133rem) {
246 |     h6 {
247 |         font-size: 1rem;
248 |     }
249 | }
250 | 
251 | h2 + p,
252 | h3 + p,
253 | h4 + p,
254 | h5 + p,
255 | h6 + p {
256 |     margin-top: -webkit-calc(0.8rem + 0.25vw);
257 |     margin-top: calc(0.8rem + 0.25vw);
258 | }
259 | 
260 | b,
261 | strong {
262 |     font-weight: 700;
263 | }
264 | 
265 | blockquote {
266 |     font-family: "Montserrat", sans-serif;
267 |     font-weight: 700;
268 |     padding: 0 15%;
269 | }
270 | 
271 | blockquote cite {
272 |     color: #343434;
273 |     display: block;
274 |     font-family: "Montserrat", serif;
275 |     font-size: 0.87891rem;
276 |     font-style: normal;
277 |     padding-top: 0.53333rem;
278 | }
279 | 
280 | blockquote > :nth-child(1) {
281 |     margin-top: 0;
282 | }
283 | 
284 | blockquote:before {
285 |     display: block;
286 |     height: 0;
287 |     content: "“";
288 |     margin-left: -.55em;
289 |     font: normal 400%/0.9 "Montserrat", sans-serif;
290 |     color: #e3e3e3;
291 | }
292 | 
293 | @media all and (min-width: 37.5em) {
294 |     blockquote:before {
295 |         margin-left: -.85em;
296 |     }
297 | }
298 | 
299 | ul > li,
300 | ol > li {
301 |     list-style: inherit;
302 |     padding: 0.26667rem 0 0 1.06667rem;
303 | }
304 | 
305 | dl dt {
306 |     font-weight: 700;
307 | }
308 | 
309 | pre {
310 |     margin: -webkit-calc(1.06667rem + 0.25vw) 0 0;
311 |     margin: calc(1.06667rem + 0.25vw) 0 0;
312 |     padding: 1.6rem 3.2rem;
313 |     white-space: pre-wrap;
314 |     word-wrap: break-word;
315 | }
316 | 
317 | code,
318 | pre {
319 |     background-color: #f6f6f6;
320 |     font-family: "Monaco", "Courier New", monospace;
321 |     font-size: 0.9375rem;
322 | }
323 | 
324 | table {
325 |     border-collapse: collapse;
326 |     border-spacing: 0;
327 |     display: block;
328 |     max-width: 100%;
329 |     overflow-x: auto;
330 |     vertical-align: top;
331 |     text-align: left;
332 |     white-space: nowrap;
333 | }
334 | 
335 | table th {
336 |     border-bottom: 2px solid #e3e3e3;
337 |     padding: 0.8rem 1.33333rem;
338 | }
339 | 
340 | table tr:nth-child(2n) {
341 |     background: whitesmoke;
342 | }
343 | 
344 | table td {
345 |     padding: 0.8rem 1.33333rem;
346 | }
347 | 
348 | figcaption {
349 |     color: #908e98;
350 |     font-family: "Montserrat", sans-serif;
351 |     font-weight: 400;
352 |     font-size: 0.77248rem;
353 |     margin: 1.06667rem 0 0;
354 |     text-align: center;
355 | }
356 | 
357 | sub,
358 | sup {
359 |     font-size: 65%;
360 | }
361 | 
362 | .container {
363 |     width: 100%;
364 |     margin: auto;
365 | }
366 | 
367 | .main--grid,
368 | .main--author {
369 |     display: grid;
370 | }
371 | 
372 | .main--author {
373 |     grid-gap: 2rem;
374 | }
375 | 
376 | .main--author p {
377 |     margin: 0;
378 | }
379 | 
380 | @media only screen and (min-width: 20em) {
381 | 
382 |     .main--grid,
383 |     .main--author {
384 |         grid-template-columns: repeat(6, 1fr);
385 |     }
386 | 
387 |     .main--grid > article {
388 |         grid-column: span 6;
389 |     }
390 | 
391 |     .main--author > article {
392 |         grid-column: span 6;
393 |     }
394 | 
395 |     .main--full,
396 |     .main--author {
397 |         margin: 2rem 3rem;
398 |     }
399 | 
400 | 
401 | }
402 | 
403 | @media only screen and (min-width: 37.5em) {
404 | 
405 |     .main--grid,
406 |     .main--author {
407 |         grid-template-columns: repeat(6, 1fr);
408 |     }
409 | 
410 |     .main--grid > article {
411 |         grid-column: span 3;
412 |     }
413 | 
414 |     .main--author > article {
415 |         grid-column: span 3;
416 |     }
417 | 
418 |     .main--full,
419 |     .main--author {
420 |         border-top: 1rem;
421 |         padding: 3vw;
422 |         max-width: 60rem;
423 |         margin: auto;
424 |     }
425 | 
426 | }
427 | 
428 | @media only screen and (min-width: 60em) {
429 | 
430 |     .main--grid,
431 |     .main--author {
432 |         grid-template-columns: repeat(6, 1fr);
433 |     }
434 | 
435 |     .main--grid > article {
436 |         grid-column: span 2;
437 |     }
438 | 
439 |     .main--author > article {
440 |         grid-column: span 3;
441 |     }
442 | }
443 | 
444 | @media only screen and (min-width: 80em) {
445 | 
446 |     .main--grid,
447 |     .main--author {
448 |         grid-template-columns: repeat(6, 1fr);
449 |     }
450 | 
451 |     .main--grid > article {
452 |         grid-column: span 2;
453 |     }
454 | 
455 |     .main--author > article {
456 |         grid-column: span 3;
457 |     }
458 | }
459 | 
460 | .footer {
461 |     grid-column: 2/3;
462 | }
463 | 
464 | @media all and (min-width: 56.25em) {
465 |     .footer {
466 |         grid-column: 2/4;
467 |     }
468 | }
469 | 
470 | .footer {
471 |     border-top: 1px solid #e3e3e3;
472 |     padding: -webkit-calc(1.86667rem + 0.5vw) 0;
473 |     padding: calc(1.86667rem + 0.5vw) 0;
474 |     text-align: center;
475 | }
476 | 
477 | .footer__social > a {
478 |     display: inline-block;
479 |     padding: 0 0.53333rem;
480 | }
481 | 
482 | .footer__copyright + .footer__social {
483 |     margin-top: 1.6rem;
484 | }
485 | 
486 | .footer__copyright p {
487 |     margin: 0;
488 | }
489 | 
490 | .footer__copyright ul {
491 |     display: inline;
492 |     font-size: 0.8em;
493 | }
494 | 
495 | .footer__copyright ul li {
496 |     display: inline-block;
497 |     margin-right: 10px;
498 | }
499 | 
500 | .u-icon {
501 |     fill: #00003f;
502 |     height: 1rem;
503 |     width: 1rem;
504 |     -webkit-transition: all 0.24s ease-out;
505 |     -o-transition: all 0.24s ease-out;
506 |     transition: all 0.24s ease-out;
507 |     display: block;
508 |     margin: 0.7rem 0;
509 | }
510 | 
511 | .u-icon:hover {
512 |     fill: #751AFF;
513 | }
514 | 
515 | .post__share > a > .u-icon {
516 |     pointer-events: none;
517 |     display: inline-block;
518 |     margin-right: 0.53333rem;
519 |     vertical-align: middle;
520 | }
521 | 
522 | .article {
523 |     overflow: hidden;
524 |     width: 100%;
525 |     padding-top: 100%;
526 |     /* 1:1 Aspect Ratio */
527 |     position: relative;
528 |     background-position: center !important;
529 |     background-size: cover !important;
530 | }
531 | 
532 | .article img {
533 |     width: 100%;
534 |     height: 100%;
535 |     object-fit: cover;
536 |     position: absolute;
537 |     top: 0;
538 | }
539 | 
540 | .overlay {
541 |     width: 100%;
542 |     height: 100%;
543 |     background: black;
544 |     position: absolute;
545 |     top: 0;
546 |     opacity: 0;
547 |     font-size: 1.2em;
548 |     text-transform: uppercase;
549 |     -webkit-transition: opacity .3s cubic-bezier(0.25, 0.46, 0.45, 0.94), font-size 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
550 |     -o-transition: opacity .3s cubic-bezier(0.25, 0.46, 0.45, 0.94), font-size 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
551 |     transition: opacity .3s cubic-bezier(0.25, 0.46, 0.45, 0.94), font-size 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
552 | }
553 | 
554 | .overlay h1 {
555 |     color: white;
556 |     position: relative;
557 |     top: calc(50% - 2rem);
558 |     width: auto;
559 |     text-align: center;
560 |     font-size: inherit;
561 | }
562 | 
563 | .overlay:hover {
564 |     opacity: 0.8;
565 |     font-size: 2em;
566 | }
567 | 
568 | /*Header*/
569 | 
570 | .logo {
571 |     text-transform: uppercase;
572 | }
573 | 
574 | @media only screen and (min-width: 20em) {
575 |     .navbar {
576 |         margin-left: 3rem;
577 |     }
578 | 
579 |     .logo {
580 |         float: none;
581 |         display: block;
582 |         margin: 2rem auto;
583 |         max-width: 10rem;
584 |         font-size: 1.5em;
585 |         text-align: center;
586 |     }
587 | 
588 |     .menu__social {
589 |         margin: 3rem 0;
590 |         width: 1.5rem;
591 |     }
592 | }
593 | 
594 | @media only screen and (min-width: 37.5em) {
595 |     .navbar {
596 |         margin-left: 5rem;
597 |     }
598 | 
599 |     .logo {
600 |         /*
601 |         float: right;
602 |         margin: 2rem 5rem;
603 |         */
604 |         max-width: 12rem;
605 |         position: absolute;
606 |         top: 0;
607 |         right: 0;
608 |         margin: 0 5rem 0 0;
609 |         font-size: 2em;
610 |         text-align: right;
611 | 
612 |     }
613 | 
614 | }
615 | 
616 | @media only screen and (min-width: 60em) {
617 |     .logo {
618 |         max-width: 15rem;
619 |         position: absolute;
620 |         top: 0;
621 |         right: 0;
622 |         margin: 0 5rem 0 0;
623 |         font-size: 2.5em;
624 |     }
625 | }
626 | 
627 | 
628 | @media only screen and (min-width: 80em) {
629 |     .logo {
630 |         max-width: 15rem;
631 |     }
632 | }
633 | 
634 | 
635 | ul.navbar__menu {
636 |     font-weight: 700;
637 |     text-transform: uppercase;
638 |     list-style-type: none;
639 | }
640 | 
641 | ul.navbar__menu > li {
642 |     padding: 0.7rem 0 0 0;
643 | }
644 | 
645 | hr.article__spacer {
646 |     background: #751AFF;
647 |     height: 0.2rem;
648 | }
649 | 
650 | 
651 | .active__icon {
652 |     display: none;
653 | }
654 | 
655 | .active a {
656 |     color: #751AFF !important;
657 | }
658 | 
659 | .active .active__icon {
660 |     display: inline;
661 |     position: relative;
662 |     float: left;
663 |     width: 1.2rem;
664 |     height: 1.2rem;
665 |     fill: #751aff;
666 |     margin-left: -1.2rem;
667 |     transform: translateX(-0.8rem);
668 | }
669 | 
670 | nav a span {
671 |     color: inherit !important;
672 |     text-decoration: line-through;
673 | }
674 | 
675 | .top {
676 |     position: relative;
677 |     margin: 0 0 3rem 0;
678 | }
679 | 
680 | .hero {
681 |     position: absolute;
682 |     bottom: 0;
683 |     margin: 0;
684 |     margin-bottom: -0.5em;
685 |     text-align: center;
686 |     line-height: 2em;
687 |     font-weight: 500;
688 |     width: 100%;
689 |     z-index: -10000;
690 |     color: #BBB;
691 |     text-shadow: 0 2px 2px #DDD;
692 |     -webkit-touch-callout: none;
693 |     /* iOS Safari */
694 |     -webkit-user-select: none;
695 |     /* Safari */
696 |     -khtml-user-select: none;
697 |     /* Konqueror HTML */
698 |     -moz-user-select: none;
699 |     /* Firefox */
700 |     -ms-user-select: none;
701 |     /* Internet Explorer/Edge */
702 |     user-select: none;
703 |     /* Non-prefixed version, currently supported by Chrome and Opera */
704 | 
705 | }
706 | 
707 | .hero p {
708 |     margin: inherit
709 | }
710 | 
711 | .hero strong {
712 |     color: #751aff;
713 |     text-shadow: 0 2px 2px #cdb8ff;
714 |     font-size: inherit;
715 |     font-weight: inherit;
716 |     font-kerning: inherit;
717 |     line-height: inherit;
718 |     margin: inherit;
719 | }
720 | 
721 | /*Posts*/
722 | .post__meta {
723 |     list-style-type: none;
724 |     margin: 0;
725 |     margin-left: -1.2em;
726 |     font-size: 0.8em;
727 | }
728 | 
729 | .post__footer {
730 |     font-size: 0.8em;
731 | }
732 | 
733 | .page-header__title {
734 |     margin: 2rem;
735 | }
736 | 
737 | /*Pagination*/
738 | .pagination {
739 |     width: 100%;
740 |     max-width: 20vh;
741 |     text-align: center;
742 |     margin: 1rem auto;
743 |     display: grid;
744 |     grid-template-columns: repeat(2, 1fr);
745 |     grid-template-areas: "prev next";
746 | }
747 | 
748 | .prev {
749 |     grid-area: prev;
750 | }
751 | 
752 | .next {
753 |     grid-area: next;
754 | }
755 | 
756 | .pagination a {
757 |     background-color: inherit;
758 | }
759 | 
760 | .gallery {
761 |     margin: -webkit-calc(1.6rem + 1vw) -0.53333rem;
762 |     margin: calc(1.6rem + 1vw) -0.53333rem;
763 | }
764 | 
765 | @media all and (min-width: 20em) {
766 |     .gallery {
767 |         display: -webkit-box;
768 |         display: -webkit-flex;
769 |         display: -ms-flexbox;
770 |         display: flex;
771 |         -webkit-flex-wrap: wrap;
772 |         -ms-flex-wrap: wrap;
773 |         flex-wrap: wrap;
774 |     }
775 | }
776 | 
777 | @media all and (min-width: 20em) {
778 |     .gallery[data-columns="1"] .gallery__item {
779 |         width: 100%;
780 |     }
781 | }
782 | 
783 | @media all and (min-width: 30em) {
784 |     .gallery[data-columns="2"] .gallery__item {
785 |         width: 50%;
786 |     }
787 | }
788 | 
789 | @media all and (min-width: 37.5em) {
790 |     .gallery[data-columns="3"] .gallery__item {
791 |         width: 33%;
792 |     }
793 | }
794 | 
795 | @media all and (min-width: 56.25em) {
796 |     .gallery[data-columns="4"] .gallery__item {
797 |         width: 25%;
798 |     }
799 | }
800 | 
801 | @media all and (min-width: 56.25em) {
802 |     .gallery[data-columns="5"] .gallery__item {
803 |         width: 20%;
804 |     }
805 | }
806 | 
807 | @media all and (min-width: 56.25em) {
808 |     .gallery[data-columns="6"] .gallery__item {
809 |         width: 16.666%;
810 |     }
811 | }
812 | 
813 | @media all and (min-width: 56.25em) {
814 |     .gallery[data-columns="7"] .gallery__item {
815 |         width: 14.285%;
816 |     }
817 | }
818 | 
819 | @media all and (min-width: 56.25em) {
820 |     .gallery[data-columns="8"] .gallery__item {
821 |         width: 12.5%;
822 |     }
823 | }
824 | 
825 | .gallery__item {
826 |     margin: 0;
827 |     padding: 0.53333rem;
828 | }
829 | 
830 | @media all and (min-width: 20em) {
831 |     .gallery__item {
832 |         width: 50%;
833 |     }
834 | }
835 | 
836 | @media all and (min-width: 30em) {
837 |     .gallery__item {
838 |         width: 33.333%;
839 |     }
840 | }
841 | 
842 | @media all and (min-width: 37.5em) {
843 |     .gallery__item {
844 |         width: 25%;
845 |     }
846 | }
847 | 
848 | .gallery__item img {
849 |     display: block;
850 |     width: 100%;
851 | }
852 | 


--------------------------------------------------------------------------------
/marco/config.json:
--------------------------------------------------------------------------------
  1 | {
  2 |     "name": "Marco",
  3 |     "version": "1.0.1.2",
  4 |     "author": "Joshua Sellke <http://www.sellke.net/>",
  5 |     "menus": {
  6 |         "mainMenu": "Main menu"
  7 |     },
  8 |     "renderer": {
  9 |         "relatedPostsNumber": 3,
 10 |         "renderRelatedPosts": true,
 11 |         "renderSimilarPosts": false,
 12 |         "renderPrevNextPosts": true,
 13 |         "createContentStructure": false,
 14 |         "includeFeaturedInPosts": true,
 15 |         "tagsIncludeFeaturedInPosts": true,
 16 |         "authorsIncludeFeaturedInPosts": true,
 17 |         "createSearchPage": false,
 18 |         "create404page": true,
 19 |         "customHTML": {
 20 |             "beforePost": "Before every post",
 21 |             "afterPost": "After every post"
 22 |         }
 23 |     },
 24 |     "authorTemplates": {
 25 |         "alternative": "1 column layout"
 26 |     },
 27 |     "tagTemplates": {
 28 |         "alternative": "1 column layout"
 29 |     },
 30 |     "config": [
 31 |         {
 32 |             "name": "postsPerPage",
 33 |             "label": "Posts per page",
 34 |             "value": 4,
 35 |             "type": "number"
 36 |         },
 37 |         {
 38 |             "name": "tagsPostsPerPage",
 39 |             "label": "Tags posts per page",
 40 |             "value": 8,
 41 |             "type": "number"
 42 |         },
 43 |         {
 44 |             "name": "authorsPostsPerPage",
 45 |             "label": "Authors posts per page",
 46 |             "value": 8,
 47 |             "type": "number"
 48 |         },
 49 |         {
 50 |             "name": "excerptLength",
 51 |             "label": "Excerpt length",
 52 |             "value": 15,
 53 |             "type": "number"
 54 |         },
 55 |         {
 56 |             "name": "logo",
 57 |             "label": "Website logo",
 58 |             "value": "",
 59 |             "type": "upload",
 60 |             "upload": true
 61 |         }
 62 |     ],
 63 |     "customConfig": [
 64 |         {
 65 |             "name": "postTitleOffset",
 66 |             "label": "Post Title position offset",
 67 |             "group": "Layout",
 68 |             "note": "Offset value in rem",
 69 |             "value": "2",
 70 |             "type": "text"
 71 |         },
 72 |         {
 73 |             "name": "responsiveImages",
 74 |             "group": "Layout",
 75 |             "note": "False Improves Image Quality, but can increase Site Loading Time.",
 76 |             "label": "Responsive Images",
 77 |             "value": true,
 78 |             "type": "checkbox"
 79 |         },
 80 |         {
 81 |             "name": "separator",
 82 |             "type": "separator",
 83 |             "label": " ",
 84 |             "group": "Layout",
 85 |             "size": "smaller"
 86 |          },
 87 |         {
 88 |             "name": "overlayColor",
 89 |             "label": "Overlay color",
 90 |             "group": "Layout",
 91 |             "value": "#000000",
 92 |             "type": "colorpicker"
 93 |         },
 94 |         {
 95 |             "name": "overlayOpacity",
 96 |             "label": "Overlay opacity",
 97 |             "group": "Layout",
 98 |             "value": "0.8",
 99 |             "type": "text"
100 |         },
101 |         {
102 |             "name": "primaryColor",
103 |             "label": "Primary color",
104 |             "group": "Colors",
105 |             "value": "#3949ab",
106 |             "type": "colorpicker"
107 |         },
108 |         {
109 |             "name": "headingColor",
110 |             "label": "Headings color",
111 |             "group": "Colors",
112 |             "value": "#343434",
113 |             "type": "colorpicker"
114 |         },
115 |         {
116 |             "name": "textColor",
117 |             "label": "Text color",
118 |             "group": "Colors",
119 |             "value": "#343434",
120 |             "type": "colorpicker"
121 |         },
122 |         {
123 |             "name": "linkColor",
124 |             "label": "Link color",
125 |             "group": "Colors",
126 |             "value": "#343434",
127 |             "type": "colorpicker"
128 |         },
129 |         {
130 |             "name": "linkHoverColor",
131 |             "label": "Link hover color",
132 |             "group": "Colors",
133 |             "value": "#3949ab",
134 |             "type": "colorpicker"
135 |         },
136 |         {
137 |             "name": "headlineFont",
138 |             "label": "Heading",
139 |             "group": "Fonts",
140 |             "note": "Enter a Google Font Typeface Name. e.g. Montserrat",
141 |             "value": "Staatliches",
142 |             "type": "text"
143 |         	},
144 |         {
145 |             "name": "headlineFontWeight",
146 |             "label": "Weight",
147 |             "group": "Fonts",
148 |             "note": "Use when your font is not 400",
149 |             "value": "400",
150 |             "type": "text"
151 |         },
152 |         {
153 |             "name": "separator",
154 |             "type": "separator",
155 |             "label": " ",
156 |             "group": "Fonts",
157 |             "size": "smaller"
158 |          },
159 |         {
160 |             "name": "textFont",
161 |             "label": "Text",
162 |             "group": "Fonts",
163 |             "note": "Enter a Google Font Typeface Name. e.g. Montserrat",
164 |             "value": "Montserrat",
165 |             "type": "text"
166 |         },
167 |         {
168 |             "name": "textFontWeight",
169 |             "label": "Weight",
170 |             "group": "Fonts",
171 |             "note": "Use when your font is not 400",
172 |             "value": "400",
173 |             "type": "text"
174 |         },
175 |         {
176 |             "name": "heroFontWeight",
177 |             "label": "Hero Font Weight",
178 |             "group": "Fonts",
179 |             "note": "Use when your font is not 400",
180 |             "value": "500",
181 |             "type": "text"
182 |         },
183 |         {
184 |             "name": "separator",
185 |             "type": "separator",
186 |             "label": " ",
187 |             "group": "Fonts",
188 |             "size": "smaller"
189 |          },
190 |         {
191 |             "name": "minFontSize",
192 |             "label": "Minimum font size",
193 |             "group": "Fonts",
194 |             "note": "The font-size of the root element in REM unit",
195 |             "value": "1",
196 |             "type": "range",
197 |             "min": 1,
198 |             "max": 3,
199 |             "step": 0.05
200 |         },
201 |         {
202 |             "name": "maxFontSize",
203 |             "label": "Maximum font size",
204 |             "group": "Fonts",
205 |             "note": "The font-size of the root element in REM unit",
206 |             "value": "1.2",
207 |             "type": "range",
208 |             "min": 1,
209 |             "max": 3,
210 |             "step": 0.05
211 |         },
212 |         {
213 |             "name": "linkColorMenu",
214 |             "label": "Menu link color",
215 |             "group": "Menu",
216 |             "value": "#343434",
217 |             "type": "colorpicker"
218 |         },
219 |         {
220 |             "name": "linkHoverColorMenu",
221 |             "label": "Menu link hover color",
222 |             "group": "Menu",
223 |             "value": "#3949ab",
224 |             "type": "colorpicker"
225 |         },
226 |         {
227 |             "name": "escapeMenu",
228 |             "group": "Menu",
229 |             "note": "Show or hide something like &lt;span&gt; in Menu",
230 |             "label": "Escape Charakters in Menu",
231 |             "value": false,
232 |             "type": "checkbox"
233 |         },
234 |         {
235 |             "name": "heroText",
236 |             "label": "Hero text",
237 |             "group": "Hero",
238 |             "value": "I'm a simple person, with simple dreams.",
239 |             "type": "wysiwyg"
240 |         },
241 |         {
242 |             "name": "shareFacebook",
243 |             "group": "Share Buttons",
244 |             "label": "Facebook share button",
245 |             "value": true,
246 |             "type": "checkbox"
247 |         },
248 |         {
249 |             "name": "shareTwitter",
250 |             "group": "Share Buttons",
251 |             "label": "Twitter share button",
252 |             "value": true,
253 |             "type": "checkbox"
254 |         },
255 |         {
256 |             "name": "shareTwitterName",
257 |             "group": "Share Buttons",
258 |             "note": "Enter your Twitter account's handle here; it will be used when the Twitter share button is clicked on your site e.g. 'via @TwitterHandle'. If left blanpostk, the default username of @SiteName will be used",
259 |             "value": "",
260 |             "type": "text",
261 |             "dependencies": [{
262 |                 "field": "shareTwitter",
263 |                 "value": "true"
264 |             }]
265 |         },
266 |         {
267 |             "name": "sharePinterest",
268 |             "group": "Share Buttons",
269 |             "label": "Pinterest share button",
270 |             "value": true,
271 |             "type": "checkbox"
272 |         },
273 |         {
274 |             "name": "shareStumbleupon",
275 |             "group": "Share Buttons",
276 |             "label": "StumbleUpon share button",
277 |             "value": true,
278 |             "type": "checkbox"
279 |         },
280 |         {
281 |             "name": "shareLinkedin",
282 |             "group": "Share Buttons",
283 |             "label": "LinkedIn share button",
284 |             "value": true,
285 |             "type": "checkbox"
286 |         },
287 |         {
288 |             "name": "shareBuffer",
289 |             "group": "Share Buttons",
290 |             "label": "Buffer share button",
291 |             "value": true,
292 |             "type": "checkbox"
293 |         },
294 |         {
295 |             "name": "copyrightText",
296 |             "label": "Copyright text",
297 |             "group": "Footer",
298 |             "value": "Powered by Publii - Open-Source CMS for Static Website",
299 |             "type": "wysiwyg"
300 |         },
301 |         {
302 |             "name": "socialButtons",
303 |             "group": "Menu",
304 |             "label": "Follow Buttons",
305 |             "value": false,
306 |             "type": "checkbox"
307 |         },
308 |         {
309 |             "name": "socialFacebook",
310 |             "label": "Facebook",
311 |             "group": "Menu",
312 |             "placeholder": "Please enter your Facebook URL",
313 |             "value": "",
314 |             "type": "text",
315 |             "dependencies": [{
316 |                 "field": "socialButtons",
317 |                 "value": "true"
318 |             }]
319 |         },
320 |         {
321 |             "name": "socialTwitter",
322 |             "label": "Twitter",
323 |             "group": "Menu",
324 |             "placeholder": "Please enter your Twitter URL",
325 |             "value": "",
326 |             "type": "text",
327 |             "dependencies": [{
328 |                 "field": "socialButtons",
329 |                 "value": "true"
330 |             }]
331 |         },
332 |         {
333 |             "name": "socialInstagram",
334 |             "label": "Instagram",
335 |             "group": "Menu",
336 |             "placeholder": "Please enter your Instagram URL",
337 |             "value": "",
338 |             "type": "text",
339 |             "dependencies": [{
340 |                 "field": "socialButtons",
341 |                 "value": "true"
342 |             }]
343 |         },
344 |         {
345 |             "name": "socialLinkedin",
346 |             "label": "LinkedIn",
347 |             "group": "Menu",
348 |             "placeholder": "Please enter your LinkedIn URL",
349 |             "value": "",
350 |             "type": "text",
351 |             "dependencies": [{
352 |                 "field": "socialButtons",
353 |                 "value": "true"
354 |             }]
355 |         },
356 |         {
357 |             "name": "socialVimeo",
358 |             "label": "Vimeo",
359 |             "group": "Menu",
360 |             "placeholder": "Please enter your Vimeo URL",
361 |             "value": "",
362 |             "type": "text",
363 |             "dependencies": [{
364 |                 "field": "socialButtons",
365 |                 "value": "true"
366 |             }]
367 |         },
368 |         {
369 |             "name": "socialPinterest",
370 |             "label": "Pinterest",
371 |             "group": "Menu",
372 |             "placeholder": "Please enter your Pinterest URL",
373 |             "value": "",
374 |             "type": "text",
375 |             "dependencies": [{
376 |                 "field": "socialButtons",
377 |                 "value": "true"
378 |             }]
379 |         },
380 |         {
381 |             "name": "socialYoutube",
382 |             "label": "Youtube",
383 |             "group": "Menu",
384 |             "placeholder": "Please enter your Youtube URL",
385 |             "value": "",
386 |             "type": "text",
387 |             "dependencies": [{
388 |                 "field": "socialButtons",
389 |                 "value": "true"
390 |             }]
391 |         },
392 |         {
393 |             "name": "socialBehance",
394 |             "label": "Behance",
395 |             "group": "Menu",
396 |             "placeholder": "Please enter your Behance URL",
397 |             "value": "",
398 |             "type": "text",
399 |             "dependencies": [{
400 |                 "field": "socialButtons",
401 |                 "value": "true"
402 |             }]
403 |         },
404 |         {
405 |             "name": "socialPatreon",
406 |             "label": "Patreon",
407 |             "group": "Menu",
408 |             "placeholder": "Please enter your Patreon URL",
409 |             "value": "",
410 |             "type": "text",
411 |             "dependencies": [{
412 |                 "field": "socialButtons",
413 |                 "value": "true"
414 |             }]
415 |         },
416 |         {
417 |             "name": "formatDate",
418 |             "label": "Date format",
419 |             "group": "Additional",
420 |             "value": "MMMM D, YYYY",
421 |             "type": "select",
422 |             "options": [
423 |                 {
424 |                     "label": "Nov 1, 2016",
425 |                     "value": "MMM D, YYYY"
426 | 
427 |                 },
428 |                 {
429 |                     "label": "1 Nov 2016",
430 |                     "value": "D MMM YYYY"
431 | 
432 |                 },
433 |                 {
434 |                     "label": "November 1, 2016",
435 |                     "value": "MMMM D, YYYY"
436 |                 },
437 |                 {
438 |                     "label": "1 November 2016",
439 |                     "value": "D MMMM YYYY"
440 |                 },
441 |                 {
442 |                     "label": "Sunday, November 1, 2016",
443 |                     "value": "dddd, MMMM D, YYYY"
444 |                 },
445 |                 {
446 |                     "label": "Sunday, 1 November 2016",
447 |                     "value": "dddd, D MMMM YYYY"
448 |                   },
449 |                 {
450 |                     "label": "November 1, 2016 10:02:05",
451 |                     "value": "MMMM D, YYYY HH:mm:ss"
452 | 
453 |                 },
454 |                 {
455 |                     "label": "1 November 2016 10:02:05",
456 |                     "value": "D MMMM YYYY HH:mm:ss"
457 | 
458 |                 },
459 |                 {
460 |                     "label": "01/21/2016",
461 |                     "value": "MM/DD/YYYY"
462 |                 },
463 |                 {
464 |                     "label": "21/01/2016",
465 |                     "value": "DD/MM/YYYY"
466 |                 },
467 |                 {
468 |                     "label": "Custom - create your own date format",
469 |                     "value": "custom"
470 |                 }
471 |             ]
472 |         },
473 |         {
474 |             "name": "formatDateCustom",
475 |             "group": "Additional",
476 |             "label": "Create a custom date format",
477 |             "note": "More details you can find <a href='https://github.com/taylorhakes/fecha' target='_blank'>here.</a>",
478 |             "value": "HH:mm:ss YY/MM/DD",
479 |             "type": "text",
480 |             "dependencies": [{
481 |                 "field": "formatDate",
482 |                 "value": "custom"
483 |             }]
484 |         },
485 |         {
486 |             "name": "separator",
487 |             "type": "separator",
488 |             "label": " ",
489 |             "group": "Additional",
490 |             "size": "small"
491 |          },
492 | 
493 |         {
494 |             "name": "faviconUpload",
495 |             "label": "Upload favicon file",
496 |             "group": "Additional",
497 |             "note": "The ideal size of a favicon is 16x16 pixels. Save your favicon as either favicon.png or favicon.ico",
498 |             "value": "",
499 |             "type": "smallupload",
500 |             "upload": true
501 | 		},
502 |         {
503 |             "name": "faviconExtension",
504 |             "label": "Favicon extension",
505 |             "group": "Additional",
506 |             "value": "image/x-icon",
507 |             "type": "select",
508 |             "options": [
509 |                 {
510 |                     "label": ".ico",
511 |                     "value": "image/x-icon"
512 | 				},
513 |                 {
514 |                     "label": ".png",
515 |                     "value": "image/png"
516 |                 }]
517 |         },
518 | 
519 |         {
520 |             "name": "separator",
521 |             "type": "separator",
522 |             "label": " ",
523 |             "group": "Additional",
524 |             "size": "small"
525 |         },
526 |         {
527 |             "name": "trackingID",
528 |             "group": "Additional",
529 |             "label": "Google Analytics Tracking-ID",
530 |             "note": "Place your Tracking-ID here.",
531 |             "value": "",
532 |             "type": "text"
533 |         }
534 |     ],
535 |     "postConfig": [
536 |         {
537 |             "name": "displayCategoryName",
538 |             "label": "Display category name",
539 |             "note": "Display the name of the first tag from all assigned to the post.",
540 |             "value": 1,
541 |             "type": "select",
542 |             "options": [
543 |                 {
544 |                     "label": "Enabled",
545 |                     "value": 1
546 |                 },
547 |                 {
548 |                     "label": "Disabled",
549 |                     "value": 0
550 |                 }
551 |             ]
552 |         },
553 |         {
554 |             "name": "displayAuthor",
555 |             "label": "Display author name",
556 |             "value": 1,
557 |             "type": "select",
558 |             "options": [
559 |                 {
560 |                     "label": "Enabled",
561 |                     "value": 1
562 |                 },
563 |                 {
564 |                     "label": "Disabled",
565 |                     "value": 0
566 |                 }
567 |             ]
568 |         },
569 |         {
570 |             "name": "displayDate",
571 |             "label": "Display date",
572 |             "value": 1,
573 |             "type": "select",
574 |             "options": [
575 |                 {
576 |                     "label": "Enabled",
577 |                     "value": 1
578 |                 },
579 |                 {
580 |                     "label": "Disabled",
581 |                     "value": 0
582 |                 }
583 |             ]
584 |         },
585 |         {
586 |             "name": "displayLastUpdatedDate",
587 |             "label": "Display last updated date",
588 |             "value": 1,
589 |             "type": "select",
590 |             "options": [
591 |                 {
592 |                     "label": "Enabled",
593 |                     "value": 1
594 |                 },
595 |                 {
596 |                     "label": "Disabled",
597 |                     "value": 0
598 |                 }
599 |             ]
600 |         },
601 |         {
602 |             "name": "displayShareButtons",
603 |             "label": "Display share buttons",
604 |             "value": 1,
605 |             "type": "select",
606 |             "options": [
607 |                 {
608 |                     "label": "Enabled",
609 |                     "value": 1
610 |                 },
611 |                 {
612 |                     "label": "Disabled",
613 |                     "value": 0
614 |                 }
615 |             ]
616 |         },
617 |         {
618 |             "name": "displayTags",
619 |             "label": "Display tags",
620 |             "value": 1,
621 |             "type": "select",
622 |             "options": [
623 |                 {
624 |                     "label": "Enabled",
625 |                     "value": 1
626 |                 },
627 |                 {
628 |                     "label": "Disabled",
629 |                     "value": 0
630 |                 }
631 |             ]
632 |         }
633 |     ],
634 |     "files": {
635 |         "ignoreAssets": ["sass", ".DS_Store"],
636 |         "assetsPath": "assets",
637 |         "partialsPath": "partials",
638 |         "responsiveImages": {
639 |             "contentImages": {
640 |                 "sizes": "(max-width: 48em) 100vw, 768px",
641 |                 "dimensions": {
642 |                     "xs": {
643 |                         "width": 300,
644 |                         "height": 255,
645 |                         "crop": true
646 |                     },
647 |                     "sm": {
648 |                         "width": 480,
649 |                         "height": "auto"
650 |                     },
651 |                     "md": {
652 |                         "width": 768,
653 |                         "height": "auto"
654 |                     }
655 |                 }
656 |             },
657 |             "featuredImages": {
658 |                 "sizes": {
659 |                     "post": "(max-width: 1024px) 100vw, 1024px",
660 |                     "amp": "(max-width: 768px) 100vw, 768px",
661 |                     "listing": "(min-width: 37.5em) 50vw, 100vw"
662 |                 },
663 |                 "dimensions": {
664 |                     "xs": {
665 |                         "width": 300,
666 |                         "height": 255,
667 |                         "crop": true,
668 |                         "group": "post,listing,amp"
669 |                     },
670 |                     "sm": {
671 |                         "width": 480,
672 |                         "height": "auto",
673 |                         "group": "post,listing,amp"
674 |                     },
675 |                     "md": {
676 |                         "width": 768,
677 |                         "height": "auto",
678 |                         "group": "post,amp"
679 |                     },
680 |                     "lg": {
681 |                         "width": 1024,
682 |                         "height": "auto",
683 |                         "group": "post"
684 |                     }
685 |                 }
686 |             },
687 |             "optionImages": {
688 |                 "sizes": "(max-width: 1024px) 100vw, 1024px",
689 |                 "dimensions": {
690 |                     "xs": {
691 |                         "width": 300,
692 |                         "height": 255,
693 |                         "crop": true
694 |                     },
695 |                     "sm": {
696 |                         "width": 480,
697 |                         "height": "auto"
698 |                     },
699 |                     "md": {
700 |                         "width": 768,
701 |                         "height": "auto"
702 |                     },
703 |                     "lg": {
704 |                         "width": 1024,
705 |                         "height": "auto"
706 |                     }
707 |                 }
708 |             }
709 |         }
710 |     },
711 |     "customElements": [
712 |         {
713 |             "label": "Info",
714 |             "cssClasses": "msg msg--info",
715 |             "selector": "p"
716 |         },
717 |         {
718 |             "label": "Highlight",
719 |             "cssClasses": "msg msg--highlight ",
720 |             "selector": "p"
721 |         },
722 |         {
723 |             "label": "Success",
724 |             "cssClasses": "msg msg--success",
725 |             "selector": "p"
726 |         },
727 |         {
728 |             "label": "Drop cap",
729 |             "cssClasses": "dropcap",
730 |             "selector": "p"
731 |         }
732 |     ]
733 | }
734 | 


--------------------------------------------------------------------------------