40 | {{ content }}
41 |
42 | {{ post.excerpt | strip_html }}
5 | 6 | -------------------------------------------------------------------------------- /_includes/utils/i18n.liquid: -------------------------------------------------------------------------------- 1 | {% comment %} MULTILINGUAL: define the `t` variable for localization and set the 2 | language of the page. {% endcomment %} 3 | 4 | {% assign t = site.data.translations %} 5 | {% assign lang_default = site.lang[0] %} 6 | {% if page.lang != nil %} 7 | {% assign lang = page.lang %} 8 | {% else %} 9 | {% assign lang = lang_default %} 10 | {% endif %} 11 | 12 | {% comment %} MULTILINGUAL: prepare multilingual links. {% endcomment %} 13 | 14 | {% assign t_url_prefix = '' %} 15 | {% if lang != lang_default %} 16 | {% assign t_url_prefix = lang | prepend: '/' %} 17 | {% endif %} 18 | -------------------------------------------------------------------------------- /_includes/utils/path.liquid: -------------------------------------------------------------------------------- 1 | {% comment %} PATH: prepare a path array without the language prefix. {% endcomment %} 2 | 3 | {% assign path = page.url | remove: '.html' | remove_first: '/' %} 4 | {% if lang != lang_default %}{% assign path = path | remove_first: '/' | remove_first: lang %}{% endif %} 5 | {% assign path = path | split: '/' %} 6 | {% assign depth = path | size %} 7 | -------------------------------------------------------------------------------- /_layouts/default.html: -------------------------------------------------------------------------------- 1 | {% include utils/i18n.liquid %} 2 | {% include utils/path.liquid %} 3 | 4 | 5 | 6 | 7 | {% if site.google_tag_manager %}{% include google/tag-manager.html %}{% endif %} 8 | 9 |{{ page.description }}
7 | 8 | {{ content }} 9 | -------------------------------------------------------------------------------- /_layouts/post.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 | 5 | 6 | 7 | 8 | 9 | {% if page.tags %} 10 | 13 | {% endif %} 14 | 15 | 16 |{{ page.description }}
18 | 19 | {{ content }} 20 | -------------------------------------------------------------------------------- /_posts/2017-04-22-first-post.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: First post 3 | description: 'This is the first post of the "posts" collection.' 4 | lang: en 5 | image: /files/images/china-street.jpg 6 | --- 7 | 8 | Lorem ipsum dolor sit amet, augue neglegentur ex sed, ne odio diam labitur vel. Quo te oratio maiestatis. Ne eum nisl dolor. Vel saepe nusquam ea, an atqui tation mel. 9 | 10 | Te atqui maluisset dissentiunt pri. Ut quo adhuc mazim commune, novum ornatus ea has. His solum ipsum partiendo an, sit esse epicuri eu. Nam dicant mollis eu, sea equidem periculis id. Ea esse idque mei. Modus idque vitae ut ius, usu at consul discere invenire, ex inimicus mnesarchum pro. 11 | 12 | Labores definitiones sed in, error dolore adipisci usu in, sint sale viris ad vim. Meis porro ut pro, an usu quando fabellas oporteat. Eum magna delicata salutandi id, in modo prompta qui, mea ne quidam fabellas omittantur. No brute iudico malorum mel, et dicat affert eam. 13 | 14 | Mea agam nobis quando at, ex prompta detraxit per. Aeque urbanitas accommodare id has, choro menandri tacimates ei nec, sea quem duis tota id. Pri te ornatus delectus liberavisse, tollit altera sanctus per ad, in fugit primis per. Laoreet offendit invenire nec an, ea qui aperiri impedit qualisque. Ex saperet fuisset vulputate eam, nec cibo philosophia ei. Duo ubique scripta te, aperiri democritum eloquentiam vim an. 15 | 16 | Vim et habeo primis theophrastus. Ex qui erant forensibus sententiae, in vix adipisci efficiendi. Soluta appetere fabellas an vel. Ad illud audiam erroribus nec. 17 | -------------------------------------------------------------------------------- /_posts/2017-04-23-second-post.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Second post 3 | description: 'This is the second post of the "posts" collection.' 4 | lang: en 5 | image: /files/images/china-shanghai.jpg 6 | --- 7 | 8 | Lorem ipsum dolor sit amet, augue neglegentur ex sed, ne odio diam labitur vel. Quo te oratio maiestatis. Ne eum nisl dolor. Vel saepe nusquam ea, an atqui tation mel. 9 | 10 | Te atqui maluisset dissentiunt pri. Ut quo adhuc mazim commune, novum ornatus ea has. His solum ipsum partiendo an, sit esse epicuri eu. Nam dicant mollis eu, sea equidem periculis id. Ea esse idque mei. Modus idque vitae ut ius, usu at consul discere invenire, ex inimicus mnesarchum pro. 11 | 12 | Labores definitiones sed in, error dolore adipisci usu in, sint sale viris ad vim. Meis porro ut pro, an usu quando fabellas oporteat. Eum magna delicata salutandi id, in modo prompta qui, mea ne quidam fabellas omittantur. No brute iudico malorum mel, et dicat affert eam. 13 | 14 | Mea agam nobis quando at, ex prompta detraxit per. Aeque urbanitas accommodare id has, choro menandri tacimates ei nec, sea quem duis tota id. Pri te ornatus delectus liberavisse, tollit altera sanctus per ad, in fugit primis per. Laoreet offendit invenire nec an, ea qui aperiri impedit qualisque. Ex saperet fuisset vulputate eam, nec cibo philosophia ei. Duo ubique scripta te, aperiri democritum eloquentiam vim an. 15 | 16 | Vim et habeo primis theophrastus. Ex qui erant forensibus sententiae, in vix adipisci efficiendi. Soluta appetere fabellas an vel. Ad illud audiam erroribus nec. 17 | -------------------------------------------------------------------------------- /_posts/2017-04-24-third-post.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Third post 3 | description: 'This is the third post of the "posts" collection.' 4 | lang: en 5 | image: /files/images/china-lamp.jpg 6 | --- 7 | 8 | Lorem ipsum dolor sit amet, augue neglegentur ex sed, ne odio diam labitur vel. Quo te oratio maiestatis. Ne eum nisl dolor. Vel saepe nusquam ea, an atqui tation mel. 9 | 10 | Te atqui maluisset dissentiunt pri. Ut quo adhuc mazim commune, novum ornatus ea has. His solum ipsum partiendo an, sit esse epicuri eu. Nam dicant mollis eu, sea equidem periculis id. Ea esse idque mei. Modus idque vitae ut ius, usu at consul discere invenire, ex inimicus mnesarchum pro. 11 | 12 | Labores definitiones sed in, error dolore adipisci usu in, sint sale viris ad vim. Meis porro ut pro, an usu quando fabellas oporteat. Eum magna delicata salutandi id, in modo prompta qui, mea ne quidam fabellas omittantur. No brute iudico malorum mel, et dicat affert eam. 13 | 14 | Mea agam nobis quando at, ex prompta detraxit per. Aeque urbanitas accommodare id has, choro menandri tacimates ei nec, sea quem duis tota id. Pri te ornatus delectus liberavisse, tollit altera sanctus per ad, in fugit primis per. Laoreet offendit invenire nec an, ea qui aperiri impedit qualisque. Ex saperet fuisset vulputate eam, nec cibo philosophia ei. Duo ubique scripta te, aperiri democritum eloquentiam vim an. 15 | 16 | Vim et habeo primis theophrastus. Ex qui erant forensibus sententiae, in vix adipisci efficiendi. Soluta appetere fabellas an vel. Ad illud audiam erroribus nec. 17 | -------------------------------------------------------------------------------- /_posts/fr/2017-04-22-first-post.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Premier article 3 | description: 'Ceci est le premier article de la collection "posts".' 4 | lang: fr 5 | categories: fr 6 | image: /files/images/china-street.jpg 7 | --- 8 | 9 | Lorem ipsum dolor sit amet, augue neglegentur ex sed, ne odio diam labitur vel. Quo te oratio maiestatis. Ne eum nisl dolor. Vel saepe nusquam ea, an atqui tation mel. 10 | 11 | Te atqui maluisset dissentiunt pri. Ut quo adhuc mazim commune, novum ornatus ea has. His solum ipsum partiendo an, sit esse epicuri eu. Nam dicant mollis eu, sea equidem periculis id. Ea esse idque mei. Modus idque vitae ut ius, usu at consul discere invenire, ex inimicus mnesarchum pro. 12 | 13 | Labores definitiones sed in, error dolore adipisci usu in, sint sale viris ad vim. Meis porro ut pro, an usu quando fabellas oporteat. Eum magna delicata salutandi id, in modo prompta qui, mea ne quidam fabellas omittantur. No brute iudico malorum mel, et dicat affert eam. 14 | 15 | Mea agam nobis quando at, ex prompta detraxit per. Aeque urbanitas accommodare id has, choro menandri tacimates ei nec, sea quem duis tota id. Pri te ornatus delectus liberavisse, tollit altera sanctus per ad, in fugit primis per. Laoreet offendit invenire nec an, ea qui aperiri impedit qualisque. Ex saperet fuisset vulputate eam, nec cibo philosophia ei. Duo ubique scripta te, aperiri democritum eloquentiam vim an. 16 | 17 | Vim et habeo primis theophrastus. Ex qui erant forensibus sententiae, in vix adipisci efficiendi. Soluta appetere fabellas an vel. Ad illud audiam erroribus nec. 18 | -------------------------------------------------------------------------------- /_posts/fr/2017-04-23-second-post.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Second article 3 | description: 'Ceci est le second article de la collection "posts".' 4 | lang: fr 5 | categories: fr 6 | image: /files/images/china-shanghai.jpg 7 | --- 8 | 9 | Lorem ipsum dolor sit amet, augue neglegentur ex sed, ne odio diam labitur vel. Quo te oratio maiestatis. Ne eum nisl dolor. Vel saepe nusquam ea, an atqui tation mel. 10 | 11 | Te atqui maluisset dissentiunt pri. Ut quo adhuc mazim commune, novum ornatus ea has. His solum ipsum partiendo an, sit esse epicuri eu. Nam dicant mollis eu, sea equidem periculis id. Ea esse idque mei. Modus idque vitae ut ius, usu at consul discere invenire, ex inimicus mnesarchum pro. 12 | 13 | Labores definitiones sed in, error dolore adipisci usu in, sint sale viris ad vim. Meis porro ut pro, an usu quando fabellas oporteat. Eum magna delicata salutandi id, in modo prompta qui, mea ne quidam fabellas omittantur. No brute iudico malorum mel, et dicat affert eam. 14 | 15 | Mea agam nobis quando at, ex prompta detraxit per. Aeque urbanitas accommodare id has, choro menandri tacimates ei nec, sea quem duis tota id. Pri te ornatus delectus liberavisse, tollit altera sanctus per ad, in fugit primis per. Laoreet offendit invenire nec an, ea qui aperiri impedit qualisque. Ex saperet fuisset vulputate eam, nec cibo philosophia ei. Duo ubique scripta te, aperiri democritum eloquentiam vim an. 16 | 17 | Vim et habeo primis theophrastus. Ex qui erant forensibus sententiae, in vix adipisci efficiendi. Soluta appetere fabellas an vel. Ad illud audiam erroribus nec. 18 | -------------------------------------------------------------------------------- /_posts/fr/2017-04-24-third-post.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Troisème article 3 | description: 'Ceci est le troisième article de la collection "posts".' 4 | lang: fr 5 | categories: fr 6 | image: /files/images/china-lamp.jpg 7 | --- 8 | 9 | Lorem ipsum dolor sit amet, augue neglegentur ex sed, ne odio diam labitur vel. Quo te oratio maiestatis. Ne eum nisl dolor. Vel saepe nusquam ea, an atqui tation mel. 10 | 11 | Te atqui maluisset dissentiunt pri. Ut quo adhuc mazim commune, novum ornatus ea has. His solum ipsum partiendo an, sit esse epicuri eu. Nam dicant mollis eu, sea equidem periculis id. Ea esse idque mei. Modus idque vitae ut ius, usu at consul discere invenire, ex inimicus mnesarchum pro. 12 | 13 | Labores definitiones sed in, error dolore adipisci usu in, sint sale viris ad vim. Meis porro ut pro, an usu quando fabellas oporteat. Eum magna delicata salutandi id, in modo prompta qui, mea ne quidam fabellas omittantur. No brute iudico malorum mel, et dicat affert eam. 14 | 15 | Mea agam nobis quando at, ex prompta detraxit per. Aeque urbanitas accommodare id has, choro menandri tacimates ei nec, sea quem duis tota id. Pri te ornatus delectus liberavisse, tollit altera sanctus per ad, in fugit primis per. Laoreet offendit invenire nec an, ea qui aperiri impedit qualisque. Ex saperet fuisset vulputate eam, nec cibo philosophia ei. Duo ubique scripta te, aperiri democritum eloquentiam vim an. 16 | 17 | Vim et habeo primis theophrastus. Ex qui erant forensibus sententiae, in vix adipisci efficiendi. Soluta appetere fabellas an vel. Ad illud audiam erroribus nec. 18 | -------------------------------------------------------------------------------- /_posts/zh/2017-04-22-first-post.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 第一篇文章 3 | description: 这是“文章“列表里的第一篇文章。 4 | lang: zh 5 | categories: zh 6 | image: /files/images/china-street.jpg 7 | --- 8 | 9 | 考作英図貫多作州目表経済取文化智刊。惑気写描口禁制観提好成暮劇部。見文減温陸吉野立著周湖一者県。案以環奈得在全家改三情球浮国料記熊相思。信治乗公懸治製方設普憲会独掘落銃爆読伸。氷両持表導所能情方演滋是忌著東支年。車載公屋足法月負響真目発味交半推情本抗。分学性千負年局別柱供全碁。打中著姫外挙究粧索昨備高時性著万。 10 | 11 | 努約面使禁格写日度力遠旧歴映点。済回著写前属読役都区経実。時美物伎機一氏転札増神野防画高方由券公。読女文技換近先時最聞室組済。加持写運本二無国油当写図別。県曇連現便変料判記見発注再際能前清。降低線産載携投受住増多骨。私独速散亡八南東歳前朝次子捕処雨念告。内施仲夜応碁掲掲稚石朝供運語派毎付床機供。 12 | 13 | 鳥諮場意川調団忘毀氏造劇領問水弁。両相米館色新能授京修関必会並上草。最渉新住洋仕市用在童防空用崎。及安与発経留笑極確門壌録不声抗止名。剛会林事激府場育桂得岩統掲暮見元何本実。点主買逆統与万難軍豊線細。業和分長中厚満根禁断芸図著財。題生宮雪新安皇最権差深機字以政阜教末能。域成史米財預潟点担名事菓注図。 14 | 15 | 向円痛近型功宝件覧報公療。科囲名業選負施当賀企大任償掲記旅。覃独質語軽何録犬理軽告薦美。民務週小立更岬揃見村円梨人岡織人生愛玉。飲文用番治作無固全旧逃全。朝痛今法帯無台看齢政都紙告際条属対作。革再戸橋新文午危進載刻探鶴。調地採決着長軽交経久国沢覧。堀同真身連会者手員紀速表士稿。点遠勝戦加湾竹藤融程供気。 16 | 17 | 情南講権鹿銀増記犯本名護士経中。載権海株大前魚東府紙始持自選支目有結記治。充雰堂無樹必月送社今方毎署。速析他注与傷増会内報採神長取。経弱講媛付狂当芸批元録銃却推団。複負対真列県多更陣遺次帯発安済約直。際第供塚期撲本生育嵐予利事倒際。波減津映統保調覧利場転事高体長著以。係泉携紙指細込現浩需結用標運京祭果延藤客。 18 | -------------------------------------------------------------------------------- /_posts/zh/2017-04-23-second-post.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 第二篇文章 3 | description: 这是“文章“列表里的第二篇文章。 4 | lang: zh 5 | categories: zh 6 | image: /files/images/china-shanghai.jpg 7 | --- 8 | 9 | 考作英図貫多作州目表経済取文化智刊。惑気写描口禁制観提好成暮劇部。見文減温陸吉野立著周湖一者県。案以環奈得在全家改三情球浮国料記熊相思。信治乗公懸治製方設普憲会独掘落銃爆読伸。氷両持表導所能情方演滋是忌著東支年。車載公屋足法月負響真目発味交半推情本抗。分学性千負年局別柱供全碁。打中著姫外挙究粧索昨備高時性著万。 10 | 11 | 努約面使禁格写日度力遠旧歴映点。済回著写前属読役都区経実。時美物伎機一氏転札増神野防画高方由券公。読女文技換近先時最聞室組済。加持写運本二無国油当写図別。県曇連現便変料判記見発注再際能前清。降低線産載携投受住増多骨。私独速散亡八南東歳前朝次子捕処雨念告。内施仲夜応碁掲掲稚石朝供運語派毎付床機供。 12 | 13 | 鳥諮場意川調団忘毀氏造劇領問水弁。両相米館色新能授京修関必会並上草。最渉新住洋仕市用在童防空用崎。及安与発経留笑極確門壌録不声抗止名。剛会林事激府場育桂得岩統掲暮見元何本実。点主買逆統与万難軍豊線細。業和分長中厚満根禁断芸図著財。題生宮雪新安皇最権差深機字以政阜教末能。域成史米財預潟点担名事菓注図。 14 | 15 | 向円痛近型功宝件覧報公療。科囲名業選負施当賀企大任償掲記旅。覃独質語軽何録犬理軽告薦美。民務週小立更岬揃見村円梨人岡織人生愛玉。飲文用番治作無固全旧逃全。朝痛今法帯無台看齢政都紙告際条属対作。革再戸橋新文午危進載刻探鶴。調地採決着長軽交経久国沢覧。堀同真身連会者手員紀速表士稿。点遠勝戦加湾竹藤融程供気。 16 | 17 | 情南講権鹿銀増記犯本名護士経中。載権海株大前魚東府紙始持自選支目有結記治。充雰堂無樹必月送社今方毎署。速析他注与傷増会内報採神長取。経弱講媛付狂当芸批元録銃却推団。複負対真列県多更陣遺次帯発安済約直。際第供塚期撲本生育嵐予利事倒際。波減津映統保調覧利場転事高体長著以。係泉携紙指細込現浩需結用標運京祭果延藤客。 18 | -------------------------------------------------------------------------------- /_posts/zh/2017-04-24-third-post.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 第三篇文章 3 | description: 这是“文章“列表里的第三篇文章。 4 | lang: zh 5 | categories: zh 6 | image: /files/images/china-lamp.jpg 7 | --- 8 | 9 | 考作英図貫多作州目表経済取文化智刊。惑気写描口禁制観提好成暮劇部。見文減温陸吉野立著周湖一者県。案以環奈得在全家改三情球浮国料記熊相思。信治乗公懸治製方設普憲会独掘落銃爆読伸。氷両持表導所能情方演滋是忌著東支年。車載公屋足法月負響真目発味交半推情本抗。分学性千負年局別柱供全碁。打中著姫外挙究粧索昨備高時性著万。 10 | 11 | 努約面使禁格写日度力遠旧歴映点。済回著写前属読役都区経実。時美物伎機一氏転札増神野防画高方由券公。読女文技換近先時最聞室組済。加持写運本二無国油当写図別。県曇連現便変料判記見発注再際能前清。降低線産載携投受住増多骨。私独速散亡八南東歳前朝次子捕処雨念告。内施仲夜応碁掲掲稚石朝供運語派毎付床機供。 12 | 13 | 鳥諮場意川調団忘毀氏造劇領問水弁。両相米館色新能授京修関必会並上草。最渉新住洋仕市用在童防空用崎。及安与発経留笑極確門壌録不声抗止名。剛会林事激府場育桂得岩統掲暮見元何本実。点主買逆統与万難軍豊線細。業和分長中厚満根禁断芸図著財。題生宮雪新安皇最権差深機字以政阜教末能。域成史米財預潟点担名事菓注図。 14 | 15 | 向円痛近型功宝件覧報公療。科囲名業選負施当賀企大任償掲記旅。覃独質語軽何録犬理軽告薦美。民務週小立更岬揃見村円梨人岡織人生愛玉。飲文用番治作無固全旧逃全。朝痛今法帯無台看齢政都紙告際条属対作。革再戸橋新文午危進載刻探鶴。調地採決着長軽交経久国沢覧。堀同真身連会者手員紀速表士稿。点遠勝戦加湾竹藤融程供気。 16 | 17 | 情南講権鹿銀増記犯本名護士経中。載権海株大前魚東府紙始持自選支目有結記治。充雰堂無樹必月送社今方毎署。速析他注与傷増会内報採神長取。経弱講媛付狂当芸批元録銃却推団。複負対真列県多更陣遺次帯発安済約直。際第供塚期撲本生育嵐予利事倒際。波減津映統保調覧利場転事高体長著以。係泉携紙指細込現浩需結用標運京祭果延藤客。 18 | -------------------------------------------------------------------------------- /_sass/_variables.scss: -------------------------------------------------------------------------------- 1 | // This is where you would override your variables. For example: 2 | // 3 | // /* Colors */ 4 | // 5 | // $black: #111; 6 | // $blue: #0066cc; 7 | // 8 | // /* Fonts */ 9 | // 10 | // $body: Georgia,Times, "Times New Roman", serif; 11 | // $headline: "Helvetica Neue", Helvetica, Arial, sans-serif; 12 | // 13 | // /* Partials */ 14 | // 15 | // $partials: ( 16 | // base, 17 | // button 18 | // ); 19 | -------------------------------------------------------------------------------- /_sass/custom/README.md: -------------------------------------------------------------------------------- 1 | **THIS IS WHERE YOU ADD CUSTOM STYLES.** 2 | 3 | Add files and link them in the list of imports in `custom/_all.scss`. 4 | -------------------------------------------------------------------------------- /_sass/custom/_all.scss: -------------------------------------------------------------------------------- 1 | @import '_main'; 2 | @import '_header'; 3 | @import '_footer'; 4 | -------------------------------------------------------------------------------- /_sass/custom/_footer.scss: -------------------------------------------------------------------------------- 1 | #footer { 2 | border-top: 1px solid $line-3; 3 | color: $grey; 4 | margin-top: 2*$space; 5 | padding: $space/2 0; 6 | a { 7 | color: inherit; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /_sass/custom/_header.scss: -------------------------------------------------------------------------------- 1 | #header { 2 | background: $black; 3 | color: #FFF; 4 | margin-bottom: 2*$space; 5 | text-align: right; 6 | .container { 7 | padding-bottom: $space/2; 8 | padding-top: $space/2; 9 | } 10 | a { 11 | color: inherit; 12 | margin-left: 1.5*$space/2; 13 | opacity: 0.6; 14 | transition-duration: $ease; 15 | transition-property: opacity; 16 | &:hover { 17 | opacity: 1; 18 | text-decoration: none; 19 | } 20 | } 21 | .links { 22 | float: left; 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /_sass/custom/_main.scss: -------------------------------------------------------------------------------- 1 | h1 + p { 2 | @include font-size($headline-3); 3 | line-height: 160%; 4 | margin-bottom: 2*$space; 5 | margin-top: -$space; 6 | } 7 | 8 | .cover { 9 | background-position: center center; 10 | background-repeat: no-repeat; 11 | background-size: cover; 12 | overflow: hidden; 13 | } 14 | 15 | .thumbnail { 16 | background-color: $light; 17 | height: 3*$space; 18 | width: 3*$space; 19 | } 20 | 21 | // Front page 22 | 23 | .page-front { 24 | #content { 25 | ul { 26 | list-style: none; 27 | margin: 0; 28 | padding: 0; 29 | li { 30 | border-top: 1px solid $line-2; 31 | margin: 0; 32 | padding: 0; 33 | a { 34 | color: inherit; 35 | display: block; 36 | padding: $space 0; 37 | transition-duration: $ease; 38 | transition-property: background; 39 | &:hover { 40 | background: $light; 41 | text-decoration: none; 42 | } 43 | } 44 | h3 { 45 | margin: 0; 46 | } 47 | p { 48 | color: $grey; 49 | margin: 0; 50 | } 51 | h3, 52 | p { 53 | margin-left: 3*$space + 1.5*$space/2; 54 | } 55 | } 56 | .thumbnail { 57 | float: left; 58 | margin-right: 1.5*$space/2; 59 | margin-top: $space/3; 60 | } 61 | } 62 | } 63 | } 64 | 65 | // Post page 66 | 67 | .type-posts { 68 | #content { 69 | .cover { 70 | height: 0; 71 | margin-bottom: $space; 72 | padding-top: 50%; 73 | width: 100%; 74 | } 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /_sass/egg.scss: -------------------------------------------------------------------------------- 1 | /*** VENDORS (by default just normalize.css) ***/ 2 | 3 | @import './vendors/_normalize.scss'; 4 | 5 | /*** VARIABLES (colors, layout, spacing & typography) ***/ 6 | 7 | @import '_variables'; 8 | 9 | /*** MIXINS & PARTIALS ***/ 10 | 11 | @import 'utils/_all'; 12 | @import 'partials/_all'; 13 | 14 | /*** CUSTOM ***/ 15 | 16 | @import 'custom/_all'; 17 | -------------------------------------------------------------------------------- /_sass/partials/README.md: -------------------------------------------------------------------------------- 1 | **AVOID MESSING WITH THIS FOLDER.** 2 | 3 | It contains SASS files that define default styles for things like buttons, dropdown 4 | menus, forms... 5 | 6 | You can easily choose to not load specific styles by overriding the `$partials` 7 | variable in your `_variables.scss`. Default variables are defined in `utils/_variables.scss`: 8 | 9 | $partials: ( 10 | base, 11 | button, 12 | dropdown, 13 | form, 14 | layout, 15 | loading, 16 | modal, 17 | notification, 18 | switch, 19 | tooltip 20 | ) !default; 21 | 22 | This means you can decide to only load the base styles (`partials/_base.scss`) and 23 | buttons (`partials/_button.scss`) by adding the following declaration to your 24 | `_variables.scss` file at the root of your egg folder: 25 | 26 | $partials: ( 27 | base, 28 | button 29 | ); 30 | -------------------------------------------------------------------------------- /_sass/partials/_all.scss: -------------------------------------------------------------------------------- 1 | @import '_base'; 2 | @import '_layout'; 3 | @import '_button'; 4 | @import '_form'; 5 | @import '_switch'; 6 | @import '_loading'; 7 | @import '_dropdown'; 8 | @import '_modal'; 9 | @import '_tooltip'; 10 | @import '_notification'; 11 | -------------------------------------------------------------------------------- /_sass/partials/_base.scss: -------------------------------------------------------------------------------- 1 | @if index($partials, base) { 2 | html { 3 | @include breakpoint(mobile) { 4 | font-size: 57%; 5 | } 6 | @include breakpoint(tablet) { 7 | font-size: 59%; 8 | } 9 | @include breakpoint(desktop) { 10 | font-size: 62.5%; 11 | } 12 | } 13 | 14 | body { 15 | background: $background; 16 | color: $black; 17 | font-family: $body; 18 | @include font-size($regular); 19 | font-size: $regular + px; // Because of Chrome bug (see https://code.google.com/p/chromium/issues/detail?id=319623) 20 | font-weight: normal; 21 | line-height: 160%; 22 | } 23 | 24 | a { 25 | cursor: pointer; 26 | color: $blue; 27 | text-decoration: none; 28 | transition-property: color; 29 | transition-duration: $ease; 30 | &:hover { 31 | color: shade($blue, 10%); 32 | text-decoration: underline; 33 | } 34 | } 35 | 36 | h1, 37 | h2, 38 | h3, 39 | h4, 40 | h5, 41 | h6 { 42 | color: $black; 43 | font-family: $headline; 44 | font-weight: 500; 45 | line-height: 160%; 46 | margin: 0 0 $space; 47 | } 48 | 49 | h1 { 50 | @include font-size($headline-1); 51 | } 52 | 53 | h2 { 54 | @include font-size($headline-2); 55 | } 56 | 57 | h3, 58 | h4, 59 | h5, 60 | h6 { 61 | @include font-size($headline-3); 62 | } 63 | 64 | strong, 65 | b { 66 | font-weight: 500; 67 | } 68 | 69 | p, 70 | pre { 71 | margin: 0 0 $space; 72 | &.smaller { 73 | @include font-size($smaller); 74 | line-height: 160%; 75 | margin-bottom: $space/2; 76 | } 77 | } 78 | 79 | ul, 80 | ol { 81 | margin: 0 0 $space $space; 82 | padding: 0; 83 | li { 84 | margin: 0 0 $space/4; 85 | padding: 0; 86 | } 87 | ul, 88 | ol { 89 | margin-bottom: 0; 90 | li { 91 | margin: $space/4 0 0; 92 | } 93 | } 94 | } 95 | 96 | small { 97 | @include font-size($small); 98 | line-height: 160%; 99 | } 100 | 101 | blockquote { 102 | border-left: $space/4 solid $light; 103 | color: tint($black, 40%); 104 | margin: 0 $space $space; 105 | padding-left: $space; 106 | > *:last-child { 107 | margin-bottom: 0; 108 | } 109 | } 110 | 111 | img { 112 | max-width: 100%; 113 | } 114 | 115 | /* Code */ 116 | 117 | code, 118 | .code { 119 | background: $light; 120 | border-radius: $radius; 121 | display: inline-block; 122 | font-family: $code; 123 | font-size: 85%; 124 | padding: 0 $space/4; 125 | } 126 | 127 | pre { 128 | code, 129 | .code { 130 | display: block; 131 | padding: $space/4 $space/2; 132 | white-space: pre-wrap; 133 | } 134 | } 135 | 136 | /* Tables */ 137 | 138 | table { 139 | border: 0; 140 | border-collapse: collapse; 141 | margin: 0 0 $space; 142 | text-align: left; 143 | width: 100%; 144 | thead, 145 | tbody { 146 | th, 147 | td { 148 | border: 0; 149 | padding: $space/6 $space/4; 150 | } 151 | } 152 | thead { 153 | @include font-size($small); 154 | font-weight: bold; 155 | th { 156 | white-space: nowrap; 157 | } 158 | } 159 | tbody { 160 | tr { 161 | td, 162 | th { 163 | border-top: 1px solid $line-3; 164 | padding: $space/4; 165 | } 166 | } 167 | } 168 | } 169 | 170 | /* Icons */ 171 | 172 | .icon { 173 | display: inline-block; 174 | vertical-align: middle; 175 | svg { 176 | display: block; 177 | fill: $grey; 178 | height: $space; 179 | transition-property: fill; 180 | transition-duration: $ease; 181 | vertical-align: middle; 182 | width: $space; 183 | } 184 | &.smaller { 185 | svg { 186 | height: 1.5*$space/2; 187 | width: 1.5*$space/2; 188 | } 189 | } 190 | &.small { 191 | svg { 192 | height: $space/2; 193 | width: $space/2; 194 | } 195 | } 196 | &.larger { 197 | svg { 198 | height: 1.5*$space; 199 | width: 1.5*$space; 200 | } 201 | } 202 | &.large { 203 | svg { 204 | height: 2*$space; 205 | width: 2*$space; 206 | } 207 | } 208 | } 209 | } 210 | 211 | a.icon { 212 | &:hover { 213 | svg { 214 | fill: $black; 215 | } 216 | } 217 | } 218 | -------------------------------------------------------------------------------- /_sass/partials/_button.scss: -------------------------------------------------------------------------------- 1 | @if index($partials, button) { 2 | .button { 3 | background: $background; 4 | border: 1px solid $line; 5 | border-radius: $radius; 6 | box-sizing: border-box; 7 | color: $black; 8 | cursor: pointer; 9 | display: inline-block; 10 | @include font-size($small); 11 | line-height: inherit; 12 | outline: none; 13 | padding: $space/4 1.5*$space/2; 14 | text-align: center; 15 | text-transform: uppercase; 16 | transition-property: background, border, box-shadow, color; 17 | transition-duration: $ease; 18 | &.smaller { 19 | padding: $space/8 $space/2; 20 | } 21 | &.larger { 22 | padding: $space/3 $space; 23 | @include font-size($smaller); 24 | } 25 | &.processing { 26 | padding-right: 1.5*$space/2 + 1.5*$space/2; 27 | position: relative; 28 | &:before { 29 | @include spinner($space/24, $space/2, #FFF, rgba(#000, 0.1)); 30 | content: ''; 31 | display: block; 32 | height: 1.5*$space/2; 33 | margin-top: -1.5*$space/4; 34 | position: absolute; 35 | right: 1.5*$space/4; 36 | top: 50%; 37 | width: 1.5*$space/2; 38 | } 39 | &.larger { 40 | padding-right: $space + $space; 41 | &:before { 42 | height: $space; 43 | margin-top: -$space/2; 44 | right: $space/2; 45 | width: $space; 46 | } 47 | } 48 | &.smaller { 49 | padding-right: $space/2 + $space/2; 50 | &:before { 51 | height: $space/2; 52 | margin-top: -$space/4; 53 | right: $space/4; 54 | width: $space/2; 55 | } 56 | } 57 | } 58 | &:hover { 59 | border-color: $primary; 60 | color: $primary; 61 | text-decoration: none; 62 | } 63 | &:active, 64 | &:focus { 65 | box-shadow: 0 0 0 2px rgba($blue, 0.2); 66 | } 67 | &[disabled=disabled], 68 | &[disabled=true], 69 | &[disabled], 70 | &.disabled { 71 | border-color: $line-2; 72 | color: $line; 73 | } 74 | &.primary { 75 | background: $primary; 76 | border-color: $primary; 77 | color: #FFF; 78 | &:hover { 79 | background: darken($primary, 5%); 80 | border-color: darken($primary, 5%); 81 | } 82 | &[disabled=disabled], 83 | &[disabled=true], 84 | &[disabled], 85 | &.disabled { 86 | background: $line; 87 | border-color: $line; 88 | } 89 | } 90 | &.danger { 91 | background: $red; 92 | border-color: $red; 93 | color: #FFF; 94 | &:hover { 95 | background: darken($red, 5%); 96 | border-color: darken($red, 5%); 97 | } 98 | &[disabled=disabled], 99 | &[disabled=true], 100 | &[disabled], 101 | &.disabled { 102 | background: $line; 103 | border-color: $line; 104 | } 105 | } 106 | } 107 | 108 | .bundle { 109 | display: inline-block; 110 | > .button, 111 | > * .button { 112 | border-radius: 0; 113 | border-right-width: 0; 114 | &:hover { 115 | & + .button, 116 | & + * .button { 117 | border-left-color: $primary; 118 | } 119 | } 120 | } 121 | > .button:first-child, 122 | > *:first-child .button { 123 | border-radius: $radius 0 0 $radius; 124 | } 125 | > .button:last-child, 126 | > *:last-child .button { 127 | border-radius: 0 $radius $radius 0; 128 | border-right-width: 1px; 129 | } 130 | } 131 | } 132 | -------------------------------------------------------------------------------- /_sass/partials/_dropdown.scss: -------------------------------------------------------------------------------- 1 | @if index($partials, dropdown) { 2 | .dropdown { 3 | position: relative; 4 | > *:first-child { 5 | cursor: pointer; 6 | } 7 | .options { 8 | background: #FFF; 9 | border: 1px solid $line-2; 10 | border-radius: $radius; 11 | box-shadow: $shadow-1; 12 | box-sizing: border-box; 13 | display: block; 14 | margin-top: -$space/2; 15 | opacity: 0; 16 | position: absolute; 17 | top: 100%; 18 | transition-property: opacity, margin; 19 | transition-duration: $ease; 20 | visibility: hidden; 21 | z-index: 999; 22 | } 23 | > *.active:first-child + .options, 24 | &.active .options, 25 | .options:hover, 26 | &.hover:hover .options { 27 | opacity: 1; 28 | margin-top: 0; 29 | visibility: visible; 30 | } 31 | 32 | &.menu { 33 | .options { 34 | padding: $space/6 0; 35 | .option { 36 | background: rgba($light, 0); 37 | display: block; 38 | color: inherit; 39 | cursor: pointer; 40 | @include font-size($smaller); 41 | line-height: 160%; 42 | padding: $space/8 $space/2; 43 | margin: $space/6 0; 44 | transition-property: background; 45 | transition-duration: $ease; 46 | white-space: nowrap; 47 | &:hover { 48 | background: $light; 49 | text-decoration: none; 50 | } 51 | &.danger:hover { 52 | color: $red; 53 | } 54 | a, 55 | a:hover { 56 | color: inherit; 57 | display: block; 58 | font-size: inherit; 59 | line-height: inherit; 60 | text-decoration: inherit; 61 | } 62 | } 63 | > hr { 64 | border: 0; 65 | border-top: 1px solid $line-2; 66 | margin: $space/6 0; 67 | } 68 | } 69 | } 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /_sass/partials/_form.scss: -------------------------------------------------------------------------------- 1 | @if index($partials, form) { 2 | .field { 3 | margin-bottom: 1.5*$space/2; 4 | .description { 5 | color: $grey; 6 | display: block; 7 | margin-top: $space/4; 8 | } 9 | &.full-width { 10 | input, 11 | .select, 12 | .select select, 13 | textarea { 14 | width: 100%; 15 | } 16 | } 17 | } 18 | 19 | fieldset { 20 | border: 1px solid $line; 21 | border-radius: $radius; 22 | margin: 0 0 $space/2; 23 | padding: $space/2 $space/2 0; 24 | position: relative; 25 | } 26 | 27 | label, 28 | .label { 29 | @include font-size($small); 30 | font-weight: 500; 31 | text-transform: uppercase; 32 | display: block; 33 | } 34 | 35 | input, 36 | textarea, 37 | select { 38 | box-shadow: none; 39 | color: inherit; 40 | font-family: inherit; 41 | font-size: inherit; 42 | line-height: inherit; 43 | } 44 | 45 | input, 46 | textarea, 47 | .select select { 48 | background: $background; 49 | border: 1px solid $line; 50 | border-radius: $radius; 51 | box-sizing: border-box; 52 | display: inline-block; 53 | padding: $space/4 $space/2; 54 | transition-property: border; 55 | transition-duration: $ease; 56 | &.small { 57 | padding: $space/8 $space/4; 58 | } 59 | &:hover { 60 | border-color: shade($line, 20%); 61 | } 62 | &:active, 63 | &:focus { 64 | border-color: $blue; 65 | box-shadow: 0 0 0 2px rgba($blue, 0.2); 66 | outline: none; 67 | } 68 | &[disabled], 69 | &[disabled=disabled], 70 | &[disabled=true], 71 | &[disabled], 72 | &[readonly=true], 73 | &[readonly=readonly], 74 | &[readonly] { 75 | background: $light; 76 | border-color: $line-2; 77 | color: $grey; 78 | &:active, 79 | &:focus, 80 | &:hover { 81 | border-color: $line-2; 82 | box-shadow: none; 83 | cursor: not-allowed; 84 | } 85 | } 86 | } 87 | 88 | .select { 89 | cursor: pointer; 90 | display: inline-block; 91 | position: relative; 92 | & > select { 93 | appearance: none; 94 | -webkit-appearance: none; 95 | cursor: pointer; 96 | padding-right: 1.5*$space; 97 | } 98 | &:after { 99 | bottom: 0; 100 | content: '▾'; 101 | cursor: pointer; 102 | @include font-size($smaller); 103 | line-height: 120%; 104 | pointer-events: none; 105 | position: absolute; 106 | right: $space/2; 107 | top: 50%; 108 | transform: translateY(-50%); 109 | } 110 | } 111 | 112 | .actions { 113 | margin-top: $space; 114 | > * { 115 | margin-right: $space/4; 116 | } 117 | } 118 | } 119 | -------------------------------------------------------------------------------- /_sass/partials/_layout.scss: -------------------------------------------------------------------------------- 1 | .container { 2 | box-sizing: border-box; 3 | @include clearfix; 4 | margin: 0 auto; 5 | padding-left: $space/2; 6 | padding-right: $space/2; 7 | max-width: $container; 8 | } 9 | -------------------------------------------------------------------------------- /_sass/partials/_loading.scss: -------------------------------------------------------------------------------- 1 | .loading { 2 | &:before { 3 | background: rgba(#FFF, 0.8); 4 | bottom: 0; 5 | content: ''; 6 | left: 0; 7 | position: fixed; 8 | right: 0; 9 | top: 0; 10 | z-index: 999; 11 | } 12 | position: relative; 13 | &:after { 14 | @include spinner(); 15 | bottom: 0; 16 | content: ''; 17 | display: block; 18 | left: 0; 19 | margin: auto; 20 | position: absolute; 21 | right: 0; 22 | top: 0; 23 | z-index: 1000; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /_sass/partials/_modal.scss: -------------------------------------------------------------------------------- 1 | @if index($partials, modal) { 2 | .modal { 3 | background: rgba($black, 0); 4 | bottom: 0; 5 | left: 0; 6 | opacity: 0; 7 | overflow-y: auto; 8 | position: fixed; 9 | right: 0; 10 | text-align: center; 11 | top: 0; 12 | transition-property: opacity, visibility; 13 | transition-duration: $ease/2; 14 | visibility: hidden; 15 | z-index: 9999; 16 | .box { 17 | background: #FFF; 18 | border: 1px solid $grey-2; 19 | border-radius: 2*$radius; 20 | box-shadow: $shadow-2; 21 | display: block; 22 | left: 50%; 23 | max-width: 24*$space; 24 | opacity: 0; 25 | position: absolute; 26 | text-align: left; 27 | top: 50%; 28 | width: 90%; 29 | transform: translate(-50%, -50%) scale(0.6); 30 | transition-property: opacity, transform; 31 | transition-duration: $ease/2; 32 | width: 90%; 33 | &.larger { 34 | max-width: 36*$space; 35 | } 36 | &.large { 37 | max-width: 48*$space; 38 | } 39 | &.smaller { 40 | max-width: 18*$space; 41 | } 42 | &.small { 43 | max-width: 12*$space; 44 | } 45 | > .header, 46 | > .body, 47 | > .footer { 48 | padding: $space/2 1.5*$space/2; 49 | } 50 | > .header { 51 | border-bottom: 1px solid $line-3; 52 | h2 { 53 | font-size: inherit; 54 | line-height: inherit; 55 | margin: 0 ($space + $space/4); // Accounts for the close icon 56 | padding: 0 $space/4; 57 | text-align: center; 58 | } 59 | .close { 60 | float: right; 61 | svg { 62 | fill: $grey-2; 63 | height: $space; 64 | transition-property: fill; 65 | transition-duration: $ease; 66 | width: $space; 67 | } 68 | &:hover { 69 | svg { 70 | fill: $grey; 71 | } 72 | } 73 | } 74 | } 75 | .body { 76 | max-height: calc(100vh - 108px - 96px); 77 | overflow: auto; 78 | > *:last-child { 79 | margin-bottom: 0; 80 | } 81 | } 82 | .footer { 83 | background: $light; 84 | border-radius: 0 0 $radius $radius; 85 | border-top: 1px solid $line-3; 86 | text-align: right; 87 | } 88 | } 89 | &.active { 90 | background: rgba($black, 0.3); 91 | opacity: 1; 92 | visibility: visible; 93 | .box { 94 | opacity: 1; 95 | transform: translate(-50%, -50%) scale(1); 96 | } 97 | } 98 | } 99 | } 100 | -------------------------------------------------------------------------------- /_sass/partials/_notification.scss: -------------------------------------------------------------------------------- 1 | @if index($partials, notification) { 2 | .notification { 3 | border-radius: $radius; 4 | color: #FFF; 5 | display: block; 6 | @include font-size($smaller); 7 | margin-bottom: $space; 8 | padding: $space/4 $space/2; 9 | &.error { 10 | background: lighten($red, 45%); 11 | color: $red; 12 | } 13 | &.success { 14 | background: lighten($blue, 50%); 15 | color: $blue; 16 | } 17 | &.warning { 18 | background: lighten($orange, 38%); 19 | color: $orange; 20 | } 21 | > *:last-child { 22 | margin-bottom: 0; 23 | } 24 | a { 25 | color: inherit; 26 | text-decoration: underline; 27 | &:active, 28 | &:hover { 29 | text-decoration: none; 30 | } 31 | } 32 | .close { 33 | background: transparent; 34 | border: 0; 35 | color: inherit; 36 | float: right; 37 | opacity: 0.5; 38 | padding: 0; 39 | text-decoration: none; 40 | transition-property: opacity; 41 | transition-duration: $ease; 42 | &:hover { 43 | opacity: 1; 44 | } 45 | } 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /_sass/partials/_switch.scss: -------------------------------------------------------------------------------- 1 | .switch { 2 | display: block; 3 | height: map-get($switch, size) + 2*map-get($switch, padding); 4 | position: relative; 5 | width: map-get($switch, length) + 2*map-get($switch, padding); 6 | &:active { 7 | border-color: $blue; 8 | border-radius: 2*map-get($switch, size); 9 | box-shadow: 0 0 0 2px rgba($blue, 0.2); 10 | outline: none; 11 | } 12 | input { 13 | opacity: 0; 14 | &:checked+.slider { 15 | background: $blue; 16 | } 17 | &:checked+.slider span { 18 | transform: translateX(map-get($switch, length) - map-get($switch, size)); 19 | } 20 | } 21 | .slider { 22 | background: $line; 23 | border-radius: 2*map-get($switch, size); 24 | bottom: 0; 25 | cursor: pointer; 26 | left: 0; 27 | position: absolute; 28 | right: 0; 29 | top: 0; 30 | transition-duration: $ease; 31 | span { 32 | background: #FFF; 33 | border-radius: 50%; 34 | bottom: map-get($switch, padding); 35 | height: map-get($switch, size); 36 | left: map-get($switch, padding); 37 | position: absolute; 38 | width: map-get($switch, size); 39 | transition-duration: $ease; 40 | &:after { 41 | content: ''; 42 | border-radius: 50%; 43 | background: $green; 44 | left: -9px; 45 | opacity: 0; 46 | position: absolute; 47 | top: -9px; 48 | -ms-transform: scale(0); 49 | -webkit-transform: scale(0); 50 | transform: scale(0); 51 | height: map-get($switch, size)*1.6; 52 | width: map-get($switch, size)*1.6; 53 | } 54 | } 55 | } 56 | & + label { 57 | cursor: pointer; 58 | display: inline-block; 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /_sass/partials/_tooltip.scss: -------------------------------------------------------------------------------- 1 | @if index($partials, tooltip) { 2 | .tooltip, 3 | .tooltip-bottom, 4 | .tooltip-left, 5 | .tooltip-right, 6 | .tooltip-top { 7 | position: relative; 8 | > .text { 9 | background: $black; 10 | border-radius: $radius - 1; 11 | color: #FFF; 12 | @include font-size($small); 13 | line-height: 160%; 14 | opacity: 0; 15 | padding: $space/4 1.5*$space/4; 16 | position: absolute; 17 | text-align: center; 18 | transition-property: opacity, transform; 19 | transition-duration: $ease; 20 | // transform: translate(0, 0); 21 | visibility: hidden; 22 | white-space: nowrap; 23 | width: auto; 24 | z-index: 999; 25 | } 26 | &:hover > .text { 27 | opacity: 1; 28 | visibility: visible; 29 | } 30 | } 31 | .tooltip, 32 | .tooltip-top { 33 | > .text { 34 | bottom: 100%; 35 | left: 50%; 36 | margin-bottom: 5px; 37 | transform: translateX(-50%); 38 | &:after { 39 | @include arrow(bottom, $black); 40 | } 41 | } 42 | } 43 | .tooltip-bottom { 44 | > .text { 45 | left: 50%; 46 | margin-top: 5px; 47 | top: 100%; 48 | transform: translateX(-50%); 49 | &:after { 50 | @include arrow(top, $black); 51 | } 52 | } 53 | } 54 | .tooltip-left { 55 | > .text { 56 | margin-right: 5px; 57 | right: 100%; 58 | top: 50%; 59 | transform: translateY(-50%); 60 | &:after { 61 | @include arrow(right, $black); 62 | } 63 | } 64 | } 65 | .tooltip-right { 66 | > .text { 67 | left: 100%; 68 | margin-left: 5px; 69 | top: 50%; 70 | transform: translateY(-50%); 71 | &:after { 72 | @include arrow(left, $black); 73 | } 74 | } 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /_sass/utils/README.md: -------------------------------------------------------------------------------- 1 | **AVOID MESSING WITH THIS FOLDER.** 2 | 3 | It contains mostly SASS mixins that we're leveraging in `partials/` and `custom/` 4 | and doesn't impact your actual CSS. 5 | 6 | Most of your changes should be done by modifying your own `_variables.scss` file 7 | or adding files to the `custom/` folder. 8 | -------------------------------------------------------------------------------- /_sass/utils/_all.scss: -------------------------------------------------------------------------------- 1 | @import '_variables'; 2 | @import '_arrow'; 3 | @import '_clearfix'; 4 | @import '_font-face'; 5 | @import '_font-size'; 6 | @import '_responsive'; 7 | @import '_spinner'; 8 | @import '_grid.scss'; 9 | -------------------------------------------------------------------------------- /_sass/utils/_arrow.scss: -------------------------------------------------------------------------------- 1 | @mixin arrow($position: left, $color: $black, $size: 5px) { 2 | content: ''; 3 | position: absolute; 4 | @if $position == top { 5 | border-left: $size solid transparent; 6 | border-top-color: $color; 7 | border-bottom: $size solid $color; 8 | border-right: $size solid transparent; 9 | left: 50%; 10 | top: -$size; 11 | transform: translateX(-50%); 12 | } 13 | @else if $position == right { 14 | border-top: $size solid transparent; 15 | border-right-color: $color; 16 | border-left: $size solid $color; 17 | border-bottom: $size solid transparent; 18 | right: -$size; 19 | top: 50%; 20 | transform: translateY(-50%); 21 | } 22 | @else if $position == bottom { 23 | border-right: $size solid transparent; 24 | border-bottom-color: $color; 25 | border-top: $size solid $color; 26 | border-left: $size solid transparent; 27 | bottom: -$size; 28 | left: 50%; 29 | transform: translateX(-50%); 30 | } 31 | @else { 32 | border-bottom: $size solid transparent; 33 | border-left-color: $color; 34 | border-right: $size solid $color; 35 | border-top: $size solid transparent; 36 | left: -$size; 37 | top: 50%; 38 | transform: translateY(-50%); 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /_sass/utils/_clearfix.scss: -------------------------------------------------------------------------------- 1 | @mixin clearfix { 2 | &::after { 3 | clear: both; 4 | content: ''; 5 | display: block; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /_sass/utils/_font-face.scss: -------------------------------------------------------------------------------- 1 | @mixin font-face($name, $path, $weight: normal, $style: normal) { 2 | @font-face { 3 | font-family: $name; 4 | src:url($path + '.eot'); 5 | src:url($path + '.eot?#iefix') format('embedded-opentype'), 6 | url($path + '.woff') format('woff'), 7 | url($path + '.ttf') format('truetype'), 8 | url($path + '.svg#Icons') format('svg'); 9 | font-weight: $weight; 10 | font-style: $style; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /_sass/utils/_font-size.scss: -------------------------------------------------------------------------------- 1 | @mixin font-size($size: $regular) { 2 | font-size: $size + px; 3 | font-size: ($size/10) + rem; 4 | } 5 | -------------------------------------------------------------------------------- /_sass/utils/_grid.scss: -------------------------------------------------------------------------------- 1 | // Super dupper simple grid 2 | @mixin grid($columns: 3, $square: false) { 3 | @include clearfix; 4 | list-style: none; 5 | margin: 0; 6 | padding: 0; 7 | > * { 8 | box-sizing: border-box; 9 | clear: none; 10 | float: left; 11 | margin: 0; 12 | padding: 0; 13 | width: 100%/$columns; 14 | @if ($square) { 15 | height: 0; 16 | padding-bottom: 100%/$columns; 17 | } 18 | @else { 19 | &:nth-child(#{$columns}n + 1) { 20 | clear: left; 21 | } 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /_sass/utils/_responsive.scss: -------------------------------------------------------------------------------- 1 | @mixin breakpoint($class) { 2 | @if $class == mobile { 3 | @media (max-width: map-get($breakpoints, tablet)) { @content; } 4 | } 5 | 6 | @else if $class == tablet { 7 | @media (min-width: (map-get($breakpoints, tablet) + 1)) { @content; } 8 | } 9 | 10 | @else if $class == only_tablet { 11 | @media (min-width: (map-get($breakpoints, tablet) + 1)) and (max-width: map-get($breakpoints, desktop)) { @content; } 12 | } 13 | 14 | @else if $class == up_to_desktop { 15 | @media (max-width: map-get($breakpoints, desktop)) { @content; } 16 | } 17 | 18 | @else if $class == desktop { 19 | @media (min-width: (map-get($breakpoints, desktop) + 1)) { @content; } 20 | } 21 | 22 | @else if $class == only_desktop { 23 | @media (min-width: (map-get($breakpoints, desktop) + 1)) and (max-width: map-get($breakpoints, highres)) { @content; } 24 | } 25 | 26 | @else if $class == up_to_highres { 27 | @media (max-width: map-get($breakpoints, highres)) { @content; } 28 | } 29 | 30 | @else if $class == highres { 31 | @media (min-width: (map-get($breakpoints, highres) + 1)) { @content; } 32 | } 33 | 34 | @else { 35 | @warn "Breakpoint mixin supports: mobile, tablet, desktop, highres"; 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /_sass/utils/_spinner.scss: -------------------------------------------------------------------------------- 1 | @mixin spinner($thickness: $space/12, $size: $space, $color: $blue, $background: $light, $ease: 3*$ease) { 2 | animation: spin $ease linear infinite; 3 | border: $thickness solid $background; 4 | border-radius: 50%; 5 | border-top-color: $color; 6 | box-sizing: border-box; 7 | height: $size; 8 | width: $size; 9 | } 10 | 11 | @keyframes spin { 12 | 0% { transform: rotate(0deg); } 13 | 100% { transform: rotate(360deg); } 14 | } 15 | -------------------------------------------------------------------------------- /_sass/utils/_variables.scss: -------------------------------------------------------------------------------- 1 | /* Colors */ 2 | 3 | $black: #1b2733 !default; 4 | $blue: #0070E0 !default; 5 | $purple: #9933CC !default; 6 | $green: #66CC33 !default; 7 | $orange: #ff8e21 !default; 8 | $red: #CC3333 !default; 9 | $silver: #DDDDDD !default; 10 | $yellow: #ffe28f !default; 11 | 12 | $background: #FFF !default; 13 | $primary: $blue !default; 14 | 15 | $light: #f7f9fa !default; 16 | 17 | $grey: #637282 !default; 18 | $grey-2: rgba($grey, 0.6); 19 | $grey-3: rgba($grey, 0.3); 20 | 21 | $line: #c1c7cd !default; 22 | $line-1: $line; 23 | $line-2: rgba($line, 0.6) !default; 24 | $line-3: rgba($line, 0.3) !default; 25 | 26 | /* Sizes */ 27 | 28 | $headline-1: 48 !default; 29 | $headline-2: 32 !default; 30 | $headline-3: 24 !default; 31 | $large: 24 !default; 32 | $larger: 18 !default; 33 | $regular: 16 !default; 34 | $smaller: 14 !default; 35 | $small: 12 !default; 36 | 37 | /* Fonts */ 38 | 39 | $body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !default; 40 | $headline: $body !default; 41 | $code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace !default; 42 | 43 | /* Misc */ 44 | 45 | $ease: 0.2s !default; 46 | $space: 24px !default; 47 | $radius: 3px !default; 48 | $shadow: rgba(0, 0, 0, 0.1) 0 1px 4px 0 !default; 49 | $shadow-1: $shadow; 50 | $shadow-2: rgba(0, 0, 0, 0.3) 0 1px 8px 0 !default; 51 | $hover: rgba(0, 0, 0, 0.2) 0 1px 10px 0 !default; 52 | $container: 960px !default; 53 | 54 | /* Responsive */ 55 | 56 | $breakpoints: ( 57 | tablet: 640px, 58 | desktop: 1024px, 59 | highres: 1280px 60 | ) !default; 61 | 62 | /* Switch */ 63 | 64 | $switch: ( 65 | size: 1.5*$space/2, 66 | length: 5*$space/3, 67 | padding: 2px 68 | ) !default; 69 | 70 | /* Partials */ 71 | 72 | $partials: ( 73 | base, 74 | button, 75 | dropdown, 76 | form, 77 | layout, 78 | loading, 79 | modal, 80 | notification, 81 | switch, 82 | tooltip 83 | ) !default; 84 | -------------------------------------------------------------------------------- /_sass/vendors/_normalize.scss: -------------------------------------------------------------------------------- 1 | /*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /* Document 4 | ========================================================================== */ 5 | 6 | /** 7 | * 1. Correct the line height in all browsers. 8 | * 2. Prevent adjustments of font size after orientation changes in iOS. 9 | */ 10 | 11 | html { 12 | line-height: 1.15; /* 1 */ 13 | -webkit-text-size-adjust: 100%; /* 2 */ 14 | } 15 | 16 | /* Sections 17 | ========================================================================== */ 18 | 19 | /** 20 | * Remove the margin in all browsers. 21 | */ 22 | 23 | body { 24 | margin: 0; 25 | } 26 | 27 | /** 28 | * Correct the font size and margin on `h1` elements within `section` and 29 | * `article` contexts in Chrome, Firefox, and Safari. 30 | */ 31 | 32 | h1 { 33 | font-size: 2em; 34 | margin: 0.67em 0; 35 | } 36 | 37 | /* Grouping content 38 | ========================================================================== */ 39 | 40 | /** 41 | * 1. Add the correct box sizing in Firefox. 42 | * 2. Show the overflow in Edge and IE. 43 | */ 44 | 45 | hr { 46 | box-sizing: content-box; /* 1 */ 47 | height: 0; /* 1 */ 48 | overflow: visible; /* 2 */ 49 | } 50 | 51 | /** 52 | * 1. Correct the inheritance and scaling of font size in all browsers. 53 | * 2. Correct the odd `em` font sizing in all browsers. 54 | */ 55 | 56 | pre { 57 | font-family: monospace, monospace; /* 1 */ 58 | font-size: 1em; /* 2 */ 59 | } 60 | 61 | /* Text-level semantics 62 | ========================================================================== */ 63 | 64 | /** 65 | * Remove the gray background on active links in IE 10. 66 | */ 67 | 68 | a { 69 | background-color: transparent; 70 | } 71 | 72 | /** 73 | * 1. Remove the bottom border in Chrome 57- 74 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 75 | */ 76 | 77 | abbr[title] { 78 | border-bottom: none; /* 1 */ 79 | text-decoration: underline; /* 2 */ 80 | text-decoration: underline dotted; /* 2 */ 81 | } 82 | 83 | /** 84 | * Add the correct font weight in Chrome, Edge, and Safari. 85 | */ 86 | 87 | b, 88 | strong { 89 | font-weight: bolder; 90 | } 91 | 92 | /** 93 | * 1. Correct the inheritance and scaling of font size in all browsers. 94 | * 2. Correct the odd `em` font sizing in all browsers. 95 | */ 96 | 97 | code, 98 | kbd, 99 | samp { 100 | font-family: monospace, monospace; /* 1 */ 101 | font-size: 1em; /* 2 */ 102 | } 103 | 104 | /** 105 | * Add the correct font size in all browsers. 106 | */ 107 | 108 | small { 109 | font-size: 80%; 110 | } 111 | 112 | /** 113 | * Prevent `sub` and `sup` elements from affecting the line height in 114 | * all browsers. 115 | */ 116 | 117 | sub, 118 | sup { 119 | font-size: 75%; 120 | line-height: 0; 121 | position: relative; 122 | vertical-align: baseline; 123 | } 124 | 125 | sub { 126 | bottom: -0.25em; 127 | } 128 | 129 | sup { 130 | top: -0.5em; 131 | } 132 | 133 | /* Embedded content 134 | ========================================================================== */ 135 | 136 | /** 137 | * Remove the border on images inside links in IE 10. 138 | */ 139 | 140 | img { 141 | border-style: none; 142 | } 143 | 144 | /* Forms 145 | ========================================================================== */ 146 | 147 | /** 148 | * 1. Change the font styles in all browsers. 149 | * 2. Remove the margin in Firefox and Safari. 150 | */ 151 | 152 | button, 153 | input, 154 | optgroup, 155 | select, 156 | textarea { 157 | font-family: inherit; /* 1 */ 158 | font-size: 100%; /* 1 */ 159 | line-height: 1.15; /* 1 */ 160 | margin: 0; /* 2 */ 161 | } 162 | 163 | /** 164 | * Show the overflow in IE. 165 | * 1. Show the overflow in Edge. 166 | */ 167 | 168 | button, 169 | input { /* 1 */ 170 | overflow: visible; 171 | } 172 | 173 | /** 174 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 175 | * 1. Remove the inheritance of text transform in Firefox. 176 | */ 177 | 178 | button, 179 | select { /* 1 */ 180 | text-transform: none; 181 | } 182 | 183 | /** 184 | * Correct the inability to style clickable types in iOS and Safari. 185 | */ 186 | 187 | button, 188 | [type="button"], 189 | [type="reset"], 190 | [type="submit"] { 191 | -webkit-appearance: button; 192 | } 193 | 194 | /** 195 | * Remove the inner border and padding in Firefox. 196 | */ 197 | 198 | button::-moz-focus-inner, 199 | [type="button"]::-moz-focus-inner, 200 | [type="reset"]::-moz-focus-inner, 201 | [type="submit"]::-moz-focus-inner { 202 | border-style: none; 203 | padding: 0; 204 | } 205 | 206 | /** 207 | * Restore the focus styles unset by the previous rule. 208 | */ 209 | 210 | button:-moz-focusring, 211 | [type="button"]:-moz-focusring, 212 | [type="reset"]:-moz-focusring, 213 | [type="submit"]:-moz-focusring { 214 | outline: 1px dotted ButtonText; 215 | } 216 | 217 | /** 218 | * Correct the padding in Firefox. 219 | */ 220 | 221 | fieldset { 222 | padding: 0.35em 0.75em 0.625em; 223 | } 224 | 225 | /** 226 | * 1. Correct the text wrapping in Edge and IE. 227 | * 2. Correct the color inheritance from `fieldset` elements in IE. 228 | * 3. Remove the padding so developers are not caught out when they zero out 229 | * `fieldset` elements in all browsers. 230 | */ 231 | 232 | legend { 233 | box-sizing: border-box; /* 1 */ 234 | color: inherit; /* 2 */ 235 | display: table; /* 1 */ 236 | max-width: 100%; /* 1 */ 237 | padding: 0; /* 3 */ 238 | white-space: normal; /* 1 */ 239 | } 240 | 241 | /** 242 | * Add the correct vertical alignment in Chrome, Firefox, and Opera. 243 | */ 244 | 245 | progress { 246 | vertical-align: baseline; 247 | } 248 | 249 | /** 250 | * Remove the default vertical scrollbar in IE 10+. 251 | */ 252 | 253 | textarea { 254 | overflow: auto; 255 | } 256 | 257 | /** 258 | * 1. Add the correct box sizing in IE 10. 259 | * 2. Remove the padding in IE 10. 260 | */ 261 | 262 | [type="checkbox"], 263 | [type="radio"] { 264 | box-sizing: border-box; /* 1 */ 265 | padding: 0; /* 2 */ 266 | } 267 | 268 | /** 269 | * Correct the cursor style of increment and decrement buttons in Chrome. 270 | */ 271 | 272 | [type="number"]::-webkit-inner-spin-button, 273 | [type="number"]::-webkit-outer-spin-button { 274 | height: auto; 275 | } 276 | 277 | /** 278 | * 1. Correct the odd appearance in Chrome and Safari. 279 | * 2. Correct the outline style in Safari. 280 | */ 281 | 282 | [type="search"] { 283 | -webkit-appearance: textfield; /* 1 */ 284 | outline-offset: -2px; /* 2 */ 285 | } 286 | 287 | /** 288 | * Remove the inner padding in Chrome and Safari on macOS. 289 | */ 290 | 291 | [type="search"]::-webkit-search-decoration { 292 | -webkit-appearance: none; 293 | } 294 | 295 | /** 296 | * 1. Correct the inability to style clickable types in iOS and Safari. 297 | * 2. Change font properties to `inherit` in Safari. 298 | */ 299 | 300 | ::-webkit-file-upload-button { 301 | -webkit-appearance: button; /* 1 */ 302 | font: inherit; /* 2 */ 303 | } 304 | 305 | /* Interactive 306 | ========================================================================== */ 307 | 308 | /* 309 | * Add the correct display in Edge, IE 10+, and Firefox. 310 | */ 311 | 312 | details { 313 | display: block; 314 | } 315 | 316 | /* 317 | * Add the correct display in all browsers. 318 | */ 319 | 320 | summary { 321 | display: list-item; 322 | } 323 | 324 | /* Misc 325 | ========================================================================== */ 326 | 327 | /** 328 | * Add the correct display in IE 10+. 329 | */ 330 | 331 | template { 332 | display: none; 333 | } 334 | 335 | /** 336 | * Add the correct display in IE 10. 337 | */ 338 | 339 | [hidden] { 340 | display: none; 341 | } 342 | -------------------------------------------------------------------------------- /assets/favicons/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Wiredcraft/jekyll-basics/57933a74132711bc51eaa8ea99ad131393873f0f/assets/favicons/android-chrome-192x192.png -------------------------------------------------------------------------------- /assets/favicons/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Wiredcraft/jekyll-basics/57933a74132711bc51eaa8ea99ad131393873f0f/assets/favicons/android-chrome-512x512.png -------------------------------------------------------------------------------- /assets/favicons/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Wiredcraft/jekyll-basics/57933a74132711bc51eaa8ea99ad131393873f0f/assets/favicons/apple-touch-icon.png -------------------------------------------------------------------------------- /assets/favicons/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 |