diff options
| author | fourtyone11 <asleeppiano@outlook.com> | 2020-04-22 10:27:31 +0300 |
|---|---|---|
| committer | fourtyone11 <asleeppiano@outlook.com> | 2020-04-22 10:27:31 +0300 |
| commit | 8541b1746c505c59fe5ab6ce46bff873bc5a5915 (patch) | |
| tree | 475d7e67b3519804a8679d00f2f39acd41a95e2a | |
| parent | 7cc5f950aeaf0ca192efc99c4a58e8bd5f4dc8a2 (diff) | |
changed tn image, add support for css only, put content to content folder in exampleSite, fix min theme version in theme.toml
33 files changed, 232 insertions, 38 deletions
@@ -24,7 +24,7 @@ git submodule add https://gitlab.com/asleeppiano/origin-hugo-theme.git themes/or # Featured posts -You can replace homescreen grid with default post list item. +You can replace homescreen grid with default post list items. edit config.toml @@ -32,3 +32,12 @@ edit config.toml [params] featured = false ``` + +# JS + +If you want to disable js, set cssonly parameter to true. + +```toml +[params] + cssonly = true +``` diff --git a/assets/js/script.js b/assets/js/script.js index 84c789e..c189c46 100644 --- a/assets/js/script.js +++ b/assets/js/script.js @@ -40,7 +40,6 @@ if (burgerButton) { window.requestAnimationFrame(() => {
headerNavMobile.style.opacity = "1";
headerNavListItems.forEach((item, i) => {
- console.log(item);
setTimeout(() => {
item.style.opacity = 1;
}, 90 * i);
diff --git a/assets/scss/_header.scss b/assets/scss/_header.scss index 9d95372..dac78c7 100644 --- a/assets/scss/_header.scss +++ b/assets/scss/_header.scss @@ -3,6 +3,8 @@ header { margin: 0 auto; padding: 1rem 2%; width: 100%; + position: relative; + z-index:100; @media (min-width: $screen-lg) { padding: 1rem 4%; } @@ -60,6 +62,21 @@ header { background: var(--color-text-light); color: var(--color-text); } + &__nav-btn.css-only:hover ~ .navigation { + display: block !important; + } + &__nav-btn.css-only:hover:before { + position: absolute; + content: ""; + display: block; + width: 150px; + height: 100px; + top: 0; + right:0; + } +} +.navigation:hover { + display: block !important; } .header-nav.desktop { @@ -77,6 +94,7 @@ header { display: none; position: fixed; background: var(--color-bg); + opacity: 0; z-index: 10; top: 0; left: 0; @@ -85,6 +103,11 @@ header { width: 100%; height: 100vh; + &:target { + display: block; + opacity: 1; + } + &__wrapper { display: flex; flex-direction: row; @@ -133,6 +156,9 @@ header { margin: 1rem auto; text-align: center; } + &__item.cssonly { + opacity: 1; + } &__link { text-transform: uppercase; font-weight: bold; diff --git a/assets/scss/_list.scss b/assets/scss/_list.scss index cdd1e79..cece5f7 100644 --- a/assets/scss/_list.scss +++ b/assets/scss/_list.scss @@ -1,6 +1,7 @@ .post-list { display: flex; flex-flow: column nowrap; + height: 100%; margin: 0 auto; width: 100%; @media (min-width: $screen-lg) { diff --git a/assets/scss/_main.scss b/assets/scss/_main.scss index f8c961e..8bba8d6 100644 --- a/assets/scss/_main.scss +++ b/assets/scss/_main.scss @@ -1,9 +1,12 @@ #content { + flex: 1 0 auto; width: 100%; padding: 2%; max-width: $screen-max; margin: 0 auto; background: var(--color-bg); + display: flex; + flex-flow: column nowrap; @media (min-width: $screen-lg) { padding: 4%; } diff --git a/assets/scss/_navigation.scss b/assets/scss/_navigation.scss new file mode 100644 index 0000000..bd968df --- /dev/null +++ b/assets/scss/_navigation.scss @@ -0,0 +1,35 @@ +.navigation { + top: 5.5rem; + right:0; + width: 100%; + max-height: calc(100vh - 5.5rem); + overflow: hidden; + position: fixed; + display: none; + opacity: 1; + background-color: var(--color-extra); + &__wrapper { + padding: 2rem; + display: flex; + flex-flow: row wrap; + } + &__container { + flex: 1 1 50%; + display: flex; + flex-flow: column wrap; + align-items: center; + } + &__list { + display: flex; + flex-flow: column nowrap; + } + &__list-item { + font-size: 1.25rem; + } + &__list-item:not(:last-of-type) { + margin-bottom: 0.5rem; + } + &__link:link:hover { + border-bottom: 1px solid black; + } +} diff --git a/assets/scss/_pagination.scss b/assets/scss/_pagination.scss index 92a77b1..99057af 100644 --- a/assets/scss/_pagination.scss +++ b/assets/scss/_pagination.scss @@ -3,6 +3,11 @@ display: flex; justify-content: space-between; align-items: center; + width: 100%; + margin: 3rem auto 0 auto; + @media (min-width: $screen-lg) { + width: 80%; + } &__item { width: 48px; height: 48px; diff --git a/assets/scss/_single.scss b/assets/scss/_single.scss index ebc6db5..3a3624d 100644 --- a/assets/scss/_single.scss +++ b/assets/scss/_single.scss @@ -77,6 +77,10 @@ padding: 0; border-radius: inherit; } + .highlight { + box-shadow: 5px 5px var(--color-boxshadow); + border: 1px solid var(--color-border); + } .highlight pre { padding: 1rem; overflow: auto; diff --git a/assets/scss/style.scss b/assets/scss/style.scss index 33a0a96..3625d42 100644 --- a/assets/scss/style.scss +++ b/assets/scss/style.scss @@ -55,12 +55,14 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } +html, body { + height: 100%; +} body { line-height: 1; font-family: $sans-serif; box-sizing: border-box; background: var(--color-bg); - height: 100vh; display: flex; flex-flow: column nowrap; } @@ -100,6 +102,7 @@ a { @import "flex"; @import "spacing"; @import "header"; +@import "navigation"; @import "list-header"; @import "main"; @import "pagination"; diff --git a/exampleSite/_index.md b/exampleSite/_index.md index 6abc75e..1a893be 100644 --- a/exampleSite/_index.md +++ b/exampleSite/_index.md @@ -1,4 +1,2 @@ -+++ -author = "Hugo Authors" -+++ +# Document Title diff --git a/exampleSite/config.toml b/exampleSite/config.toml index 9fa7cb9..acf432a 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -2,7 +2,7 @@ baseURL = "https://example.com" title = "Origin" author = "Andrey Parfenov" copyright = "© 2020, Andrey Parfenov" -paginate = 10 +paginate = 4 languageCode = "en" DefaultContentLanguage = "en" enableInlineShortcodes = true @@ -13,6 +13,7 @@ favicon = "" [params] description = "simple hugo theme" featured = true + cssonly = true facebook = "" twitter = "" instagram = "" @@ -41,3 +42,7 @@ favicon = "" [markup.highlight] style = "github" tabWidth = 4 + +[markup.goldmark.renderer] +unsafe = true + diff --git a/exampleSite/content/_index.md b/exampleSite/content/_index.md new file mode 100644 index 0000000..6abc75e --- /dev/null +++ b/exampleSite/content/_index.md @@ -0,0 +1,4 @@ ++++ +author = "Hugo Authors" ++++ + diff --git a/exampleSite/about.md b/exampleSite/content/about.md index a412806..a412806 100644 --- a/exampleSite/about.md +++ b/exampleSite/content/about.md diff --git a/exampleSite/homepage/about.md b/exampleSite/content/homepage/about.md index c2ba680..c2ba680 100644 --- a/exampleSite/homepage/about.md +++ b/exampleSite/content/homepage/about.md diff --git a/exampleSite/homepage/index.md b/exampleSite/content/homepage/index.md index 01ffa31..01ffa31 100644 --- a/exampleSite/homepage/index.md +++ b/exampleSite/content/homepage/index.md diff --git a/exampleSite/homepage/work.md b/exampleSite/content/homepage/work.md index f2fee73..f2fee73 100644 --- a/exampleSite/homepage/work.md +++ b/exampleSite/content/homepage/work.md diff --git a/exampleSite/post/_index.md b/exampleSite/content/post/_index.md index 7c6bd54..7c6bd54 100644 --- a/exampleSite/post/_index.md +++ b/exampleSite/content/post/_index.md diff --git a/exampleSite/post/emoji-support.md b/exampleSite/content/post/emoji-support.md index 85e366b..d7b70a7 100644 --- a/exampleSite/post/emoji-support.md +++ b/exampleSite/content/post/emoji-support.md @@ -6,7 +6,7 @@ description = "Guide to emoji usage in Hugo" tags = [ "emoji", ] -image = "photo2.webp" +imagelink = "https://images.unsplash.com/photo-1587129980116-d44492ecc7bb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" +++ Emoji can be enabled in a Hugo project in a number of ways. diff --git a/exampleSite/post/markdown-syntax.md b/exampleSite/content/post/markdown-syntax.md index 4711611..f917a21 100644 --- a/exampleSite/post/markdown-syntax.md +++ b/exampleSite/content/post/markdown-syntax.md @@ -15,7 +15,7 @@ categories = [ ] series = ["Themes Guide"] aliases = ["migrate-from-jekyl"] -image = "01_origin-ghost-theme-preview.png" +imagelink = "https://images.unsplash.com/photo-1587133599421-40a3cd84831b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80" +++ This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme. diff --git a/exampleSite/post/math-typesetting.mmark b/exampleSite/content/post/math-typesetting.mmark index 7f421ae..7f421ae 100644 --- a/exampleSite/post/math-typesetting.mmark +++ b/exampleSite/content/post/math-typesetting.mmark diff --git a/exampleSite/post/placeholder-text.md b/exampleSite/content/post/placeholder-text.md index 378b995..378b995 100644 --- a/exampleSite/post/placeholder-text.md +++ b/exampleSite/content/post/placeholder-text.md diff --git a/exampleSite/post/rich-content.md b/exampleSite/content/post/rich-content.md index ccf2577..c53fcb8 100644 --- a/exampleSite/post/rich-content.md +++ b/exampleSite/content/post/rich-content.md @@ -7,7 +7,7 @@ tags = [ "shortcodes", "privacy", ] -image = "photo.webp" +imagelink = "https://images.unsplash.com/photo-1587129980116-d44492ecc7bb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" +++ Hugo ships with several [Built-in Shortcodes](https://gohugo.io/content-management/shortcodes/#use-hugo-s-built-in-shortcodes) for rich content, along with a [Privacy Config](https://gohugo.io/about/hugo-and-gdpr/) and a set of Simple Shortcodes that enable static and no-JS versions of various social media embeds. diff --git a/exampleSite/web/_index.md b/exampleSite/content/web/_index.md index 87a55a1..87a55a1 100644 --- a/exampleSite/web/_index.md +++ b/exampleSite/content/web/_index.md diff --git a/exampleSite/resources/_gen/assets/scss/scss/style.scss_48b060fe05b0a273d182ef83c0605941.content b/exampleSite/resources/_gen/assets/scss/scss/style.scss_48b060fe05b0a273d182ef83c0605941.content index ea78a4c..1bef3fa 100644 --- a/exampleSite/resources/_gen/assets/scss/scss/style.scss_48b060fe05b0a273d182ef83c0605941.content +++ b/exampleSite/resources/_gen/assets/scss/scss/style.scss_48b060fe05b0a273d182ef83c0605941.content @@ -1 +1 @@ -:root{--color-bg: rgba(255,247,240, 1);--color-card-bg: rgba(250,250,250,0.8);--color-header-bg: white;--color-text: black;--color-text-2: #222222;--color-text-light: white;--color-text-light-2: rgba(255,255,255,0.9);--color-link: #0F4C81;--color-hover: linear-gradient(to right, rgba(120,120,120,1) 0%, rgba(120,120, 120,0.7) 50%);--color-border: rgba(120,120,120,1);--color-border-dark: black;--color-border-light: white;--color-header-border: black;--color-boxshadow: rgba(100,100,100,1);--color-boxshadow-dark: rgba(70,70,70,1);--color-extra: #ffecbc;--color-extra-2: #fcb279;--color-footer-bg: rgba(250,250,250,0.8);--color-code-bg: rgba(100,100,100,1);--color-table-bg: rgba(200,200,200);--color-blockquote: #999999;--color-twitter: rgb(29, 161, 242);--color-link-bg: rgb(200, 200,200, 0.25)}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1;font-family:lato,noto sans,pt sans,roboto,sans-serif;box-sizing:border-box;background:var(--color-bg);height:100vh;display:flex;flex-flow:column nowrap}*{box-sizing:border-box}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}button{cursor:pointer;background:0 0;border:none;outline:none}a{text-decoration:none;color:initial}.h2{font-size:3rem;font-weight:700}.text-shadow{text-shadow:1px 1px 1px #3c3c3c,2px 2px 1px #646464,3px 3px 1px #6e6e6e,4px 4px 1px #787878,5px 5px 1px #828282,6px 6px 1px #8c8c8c,7px 7px 1px #969696}.flex-1{flex:1}.flex-col{display:flex;flex-flow:column nowrap}.flex-row{display:flex;flex-flow:row nowrap}.flex-between{display:flex;justify-content:space-between;align-items:center}.flex-center{display:flex;justify-content:center;align-items:center}.py--sm{padding-top:1rem;padding-bottom:1rem}.px--sm{padding-right:1rem;padding-left:1rem}.py--md{padding-top:2rem;padding-bottom:2rem}.px--md{padding-left:2rem;padding-right:2rem}.p--sm{padding:1rem}.p--md{padding:2rem}.pl-sm{padding-left:1rem}.mb-sm{margin-bottom:1rem}.mb-xs{margin-bottom:.5rem}header{max-width:1584px;margin:0 auto;padding:1rem 2%;width:100%}@media(min-width:1056px){header{padding:1rem 4%}}.header{display:flex;justify-content:space-between;align-items:center}.header__title{font-size:2rem;font-weight:700;margin-bottom:.5rem}.header-nav-list{display:flex;flex-flow:row wrap;justify-content:center;align-items:center}.header-nav-list--menu{display:none}@media(min-width:1056px){.header-nav-list--menu{display:flex}}.header-nav-list__item{margin:.5rem}.header-nav-list__link{border-bottom:2px solid transparent}.header-nav-list__link:hover{border-bottom:2px solid #000;color:#000}.header-nav-list__nav-btn{display:none;padding:3px 5px;background:var(--color-text);color:var(--color-text-light);border:1px solid var(--color-border-dark);max-height:30px;cursor:pointer}@media(min-width:1056px){.header-nav-list__nav-btn{display:inline-block}}.header-nav-list__nav-btn:hover{background:var(--color-text-light);color:var(--color-text)}.header-nav.desktop{display:none}@media(min-width:1056px){.header-nav.desktop{display:block}}.header-nav{display:flex}.mb-header-nav{transition:opacity .3s ease;overflow:auto;display:none;position:fixed;background:var(--color-bg);z-index:10;top:0;left:0;bottom:0;right:0;width:100%;height:100vh}.mb-header-nav__wrapper{display:flex;flex-direction:row;flex-wrap:wrap}.mb-header-nav__container{flex:1;text-align:center}.mb-header-nav__close-btn{position:absolute;top:1rem;right:1rem;fill:currentColor}.mb-header-nav__close-btn:hover .mb-header-nav__svg-icon{color:gray;fill:gray}.mb-header-nav__title{font-size:2.5rem;font-weight:700}.mb-header-nav__title text{animation:2s stroke alternate;stroke-width:.4}.mb-header-nav.active{display:block}.mb-header-nav-list__list{margin:auto;width:50%;display:flex;flex-flow:column;padding:1rem}.mb-header-nav-list__item{opacity:0;transition:opacity .3s ease;font-size:2.5rem;margin:1rem auto;text-align:center}.mb-header-nav-list__link{text-transform:uppercase;font-weight:700;position:relative;display:inline-block;-webkit-text-stroke:1px var(--color-text);color:transparent;background:linear-gradient(90deg,var(--color-extra-2) 0%,var(--color-extra-2) 100%);background-position:0;background-size:0%;background-repeat:no-repeat;transition:background-size .5s ease;background-clip:text;-webkit-background-clip:text}.mb-header-nav-list__link:hover{background-size:100%}.mb-header__menu-btn{flex:0 0 1.5rem;display:block;height:1.5rem;width:1.5rem;padding:0;position:relative}.mb-header__menu-btn>span:nth-child(1){transition:transform .2s ease;display:inline-block;position:absolute;left:0;top:3px;width:100%;height:2px;background:#000}.mb-header__menu-btn>span:nth-child(2){transition:transform .2s ease;display:inline-block;background:#000;position:absolute;left:0;top:12px;width:100%;height:2px}.mb-header__menu-btn>span:nth-child(3){transition:transform .2s ease;display:inline-block;background:#000;position:absolute;left:0;top:21px;width:100%;height:2px}.mb-header__menu-btn:hover .mb-header__menu-btn-line:nth-child(1){transform:translate(-2px,-6px)rotate(2deg)}.mb-header__menu-btn:hover .mb-header__menu-btn-line:nth-child(2){transform:translate(-2px,-2px)rotate(-2deg)}.mb-header__menu-btn:hover .mb-header__menu-btn-line:nth-child(3){transform:translate(-2px,6px)rotate(2deg)}@media(min-width:1056px){.mb-header__menu-btn{display:none}}.header-frame{width:100%;transform:translateX(-6px);padding:1rem;background:var(--color-header-bg);border:3px solid var(--color-header-border);box-shadow:11px 11px var(--color-header-border);position:relative;margin-right:auto;margin-left:auto;transform-style:preserve-3d;overflow:visible}@media(min-width:1056px){.header-frame{width:80%}}.header-frame:after{content:"";position:absolute;background:var(--color-header-border);width:15px;height:15px;left:1px;bottom:-11px;transform:translateZ(-1px)rotate(45deg);z-index:-1}.header-frame:before{content:"";position:absolute;background:var(--color-header-border);width:15px;height:15px;right:-11px;top:1px;transform:translateZ(-1px)rotate(45deg);z-index:-1}@keyframes stroke{0%{fill:transparent;stroke:#000;stroke-dasharray:0% 50%;stroke-width:1}70%{fill:transparent;stroke:#000;stroke-dasharray:90% 50%;stroke-width:1}100%{fill:#000;stroke:#000}}.list-header{overflow-x:hidden;position:relative;display:flex;background:var(--color-extra);padding:2rem;margin:0 auto;border:1px solid var(--color-border);box-shadow:5px 5px var(--color-boxshadow);transition-property:box-shadow,transform,background;transition-duration:.2s,.3s,.3s;transition-timing-function:ease}@media(min-width:672px){.list-header{width:80%}}.list-header:hover{background-color:var(--color-extra-2)}.list-header:hover .list-header__title-2:nth-of-type(1){transition-delay:50ms;opacity:1;transform:translate(100%)}.list-header:hover .list-header__title-2:nth-of-type(2){transition-delay:100ms;opacity:1;transform:translate(200%)}.list-header:hover .list-header__title-2:nth-of-type(3){transition-delay:150ms;opacity:1;transform:translate(300%)}.list-header:hover .list-header__title-2:nth-of-type(4){transition-delay:200ms;opacity:1;transform:translate(400%)}.list-header__title{font-size:2.5rem;font-weight:700;margin-right:1rem}.list-header__title-2{transition-property:opacity,transform;transition-duration:.3s,.3s;transition-timing-function:ease;opacity:0;position:absolute;font-size:2.5rem;font-weight:700;-webkit-text-stroke:2px var(--color-text);-webkit-text-fill-color:transparent}#content{width:100%;padding:2%;max-width:1584px;margin:0 auto;background:var(--color-bg)}@media(min-width:1056px){#content{padding:4%}}.pagination{margin-top:3rem;display:flex;justify-content:space-between;align-items:center}.pagination__item{width:48px;height:48px}.pagination__item:not(:last-of-type){margin-right:1rem}.pagination__pagenums{flex:1 1 auto;display:flex;justify-content:center;align-items:center}.pagination__link{border:1px solid var(--color-border);background:var(--color-card-bg);display:flex;justify-content:center;align-items:center;width:100%;height:100%;box-shadow:5px 5px var(--color-boxshadow);transition-property:box-shadow,transform;transition-duration:.2s,.3s;transition-timing-function:ease}.pagination__link:hover{transform:translate(4px,4px);box-shadow:1px 1px var(--color-boxshadow)}.post-item{color:var(--color-text);padding:.5rem;position:relative;margin-bottom:var(--margin-between-cards);margin-right:auto;margin-left:auto;width:calc(100%);max-height:250px;background:var(--color-card-bg);transition:transform .2s ease;border:1px solid var(--color-border);box-shadow:5px 5px var(--color-boxshadow);transition-property:box-shadow,transform;transition-duration:.2s,.3s;transition-timing-function:ease}.post-item:hover{transform:translate(4px,4px);box-shadow:1px 1px var(--color-boxshadow)}.post-item__meta{padding-top:1.5rem}.post-item__meta.no-tag{padding-top:0}.post-item__description{line-height:1.5;margin-top:.5rem;color:var(--color-text-2)}.post-item__date{color:var(--color-text-2);font-family:monospace}.post-item--left{flex:1 1 47%;margin-right:1rem}.post-item--right{flex:1 1 47%}.post-item__image{display:block;padding-top:20%;border:1px solid var(--color-border);overflow:hidden;position:relative}.post-item__image>img{position:absolute;left:0;top:0;right:0;bottom:0;width:100%;height:100%;object-fit:cover}.post-item__title{line-height:1.2;font-size:1.5rem;font-weight:600;color:#000}.post-item__tag{position:absolute;padding:3px 5px;background:var(--color-text);color:var(--color-text-light);top:0;left:0;border:1px solid var(--color-border-dark);max-height:30px;display:block}.post-item__tag:hover{background:var(--color-text-light);color:var(--color-text);cursor:pointer}.post-item:not(:last-of-type){margin-bottom:1rem}.post-item-flex{display:flex;overflow:hidden}.post-list{display:flex;flex-flow:column nowrap;margin:0 auto;width:100%}@media(min-width:1056px){.post-list{width:80%}}.list__title{font-size:2.1rem;font-weight:700}.featured-title{font-size:1.5rem;font-family:monospace;margin:0 auto}@media(min-width:1056px){.featured-title{width:80%}}.featured-posts{display:grid;width:100%;height:auto;max-height:100vh;margin:0 auto 2.5rem;box-shadow:4px 4px var(--color-boxshadow-dark);transition-property:box-shadow,transform;transition-duration:.2s,.3s;transition-timing-function:ease;background:var(--color-card-bg);grid-template-rows:2fr repeat(2,1fr);grid-template-areas:"first" "second" "third"}@media(min-width:672px){.featured-posts{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto;grid-template-areas:"first second" "first third"}}@media(min-width:1056px){.featured-posts{width:80%}}.featured-post{display:flex;flex-flow:column nowrap;justify-content:center;border:1px solid var(--color-border);padding:1rem;position:relative;transition-property:box-shadow,transform;transition-duration:.2s,.3s;transition-timing-function:ease;background:var(--color-hover)}@media(min-width:672px){.featured-post{background:0 0;padding:1.5rem;z-index:1;position:relative}}@media(min-width:1056px){.featured-post{padding:2rem}}.featured-post time{font-family:monospace}.featured-post:hover{background:var(--color-hover);transform:translate(4px,4px);box-shadow:0 0 3px 0 var(--color-boxshadow)}.featured-post__wrapper{background:0 0;z-index:1;position:relative;display:block;color:var(color-text-light)}@media(min-width:672px){.featured-post__wrapper{color:var(color-text)}}.featured-post__wrapper time{color:var(--color-text-light)}@media(min-width:672px){.featured-post__wrapper time{color:var(--color-text)}}.featured-post__title{color:var(--color-text-light)}@media(min-width:672px){.featured-post__title{color:var(--color-text)}}.featured-post__image{opacity:1;position:absolute;top:0;bottom:0;left:0;right:0;z-index:0;width:100%;height:100%;object-fit:cover;transition:opacity .3s ease}@media(min-width:672px){.featured-post__image{opacity:0}}.featured-post__image-filter{display:block;background:rgba(0,0,0,.7);position:absolute;z-index:0;width:100%;height:100%;top:0;bottom:0;left:0;right:0}@media(min-width:672px){.featured-post__image-filter{display:none}}.featured-post__description{color:var(--color-text-light);margin:.5rem 0}@media(min-width:672px){.featured-post__description{color:var(--color-text-2)}}.featured-post__tags{display:flex;flex-flow:row wrap;position:relative;z-index:1;margin-top:1rem;margin-left:-.5rem}.featured-post__tags>li{padding:.5rem;border:1px solid var(--color-border-light);margin:.5rem}@media(min-width:672px){.featured-post__tags>li{border:1px solid var(--color-border)}}.featured-post__tags>li>a{color:var(--color-text-light)}@media(min-width:672px){.featured-post__tags>li>a{color:var(--color-text)}}.featured-post__tags>li:hover{background:rgba(0,0,0,.8);box-shadow:0 0 8px 1px rgba(0,0,0,.4);transition:transform .4s ease;transform:translate(2px,2px)}.featured-post:nth-child(1){grid-area:first}.featured-post:nth-child(1) .featured-post__title{font-weight:700;font-size:1.5rem;margin:0 0 1rem}.featured-post:nth-child(1) .featured-post__description{font-size:1rem}.featured-post:nth-child(2){grid-area:second}.featured-post:nth-child(2) .featured-post__title{font-weight:700;font-size:1rem;margin:.5rem 0}.featured-post:nth-child(2) .featured-post__description{font-size:.8rem}.featured-post:nth-child(3){grid-area:third}.featured-post:nth-child(3) .featured-post__title{font-weight:700;font-size:1rem;margin:.5rem 0}.featured-post:nth-child(3) .featured-post__description{font-size:.8rem}.featured-post:hover .featured-post__image{opacity:1}.featured-post:hover .featured-post__image-filter{display:block}.featured-post:hover .featured-post__wrapper{color:var(--color-text-light);z-index:1;position:relative}.featured-post:hover .featured-post__title{color:var(--color-text-light);z-index:1;position:relative}.featured-post:hover .featured-post__wrapper time{color:var(--color-text-light);z-index:1;position:relative}.featured-post:hover .featured-post__description{color:var(--color-text-light)}.featured-post:hover .featured-post__tags>li>a{color:var(--color-text-light)}.featured-post:hover .featured-post__tags>li{border:1px solid var(--color-border-light)}.post{width:100%;max-width:1056px;margin:0 auto}@media(min-width:1056px){.post{width:80%}}.post-content h1{font-size:3rem;font-weight:700;margin:1rem 0}.post-content h2{font-size:2.5rem;font-weight:700;margin:.825rem 0}.post-content h3{font-size:2rem;font-weight:semibold;margin:.825rem 0}.post-content h4{font-size:1.5rem;font-weight:semibold;margin:.825rem 0}.post-content h5{font-size:1rem;margin:.825rem 0}.post-content h6{font-size:.75rem;margin:.825rem 0}.post-content h1,.post-content h2,.post-content h3,.post-content h4,.post-content h5,.post-content h6,.post-content p,.post-content code,.post-content blockquote,.post-content a{line-height:1.4}@media(min-width:1056px){.post-content h1,.post-content h2,.post-content h3,.post-content h4,.post-content h5,.post-content h6,.post-content p,.post-content code,.post-content blockquote,.post-content a{line-height:1.5}}.post-content p{margin:1rem 0;color:var(--color-text-2)}.post-content blockquote{margin-left:1rem;padding-left:1rem;border-left:4px solid var(--color-border);font-family:roboto mono,pt mono,ibm plex mono,monospace}.post-content code{padding:1px 3px;border-radius:2px;background-color:var(--color-code-bg);color:var(--color-text-light)}.post-content pre code{color:inherit;background-color:inherit;padding:0;border-radius:inherit}.post-content .highlight pre{padding:1rem;overflow:auto}.post-content .highlight code{color:inherit;background-color:inherit;padding:0;border-radius:inherit}.post-content ul{list-style-type:disc;padding-left:1rem;color:var(--color-text-2)}.post-content ol{list-style-type:decimal;padding-left:1rem;color:var(--color-text-2)}.post-content a,.post-content a:any-link{color:var(--color-link);border-bottom:1px solid var(--color-border)}.post-content a:hover,.post-content a:hover:any-link{border-bottom:3px solid var(--color-border);background-color:var(--color-link-bg)}.post-content table{margin:.5rem 0;color:var(--color-text-2)}.post-content table th{padding:.5rem;background:var(--color-extra)}.post-content table td{padding:.5rem;border-bottom:1px solid var(--color-border);border-collapse:collapse}.post-content table tbody tr:nth-child(even){background:var(--color-table-bg)}.post-content table tbody tr:hover{background:var(--color-hover);color:var(--color-text-light)}.post-content cite{font-family:roboto mono,pt mono,ibm plex mono,monospace}.post-content sub{vertical-align:sub}.post-content sup{vertical-align:super}.post-content kbd{background:var(--color-code-bg);padding:1px 3px;border-radius:2px;color:var(--color-text-light)}.post-content mark{background-color:var(--color-extra);padding:1px 3px;border-radius:2px;border:1px solid var(--color-border)}.post-content strong{font-weight:700}.post-content div[class~=__h_instagram]{margin:1rem auto}.post-content div[class~=__h_instagram].card>.card-header{background-color:var(--color-card-bg);border:1px solid var(--color-border);padding:1rem;text-align:center}.post-content div[class~=__h_instagram].card>a{display:flex;align-items:center;justify-content:center;border:none}.post-content div[class~=__h_instagram].card>a:hover{border:none}.post-content div[class~=__h_instagram].card>.card-body{background-color:var(--color-card-bg);border:1px solid var(--color-border);padding:1rem;text-align:center}.post-content div[class~=__h_instagram].card>a>.img-fluid{border:1px solid var(--color-border);width:100%;height:auto;object-fit:cover}.post-content blockquote.twitter-tweet{border-left:4px solid var(--color-twitter)}footer{max-width:1584px;margin:auto auto 0;width:100%;padding:10px 1%}.footer{display:flex;flex-flow:row wrap;justify-content:space-between;align-items:center;border:1px solid var(--color-border);padding:1rem 2rem;background:var(--color-footer-bg);width:100%;margin:0 auto}@media(min-width:672px){.footer{width:80%}}.footer__socials{display:flex;align-items:center}.post-footer{padding-right:calc(48px + 2rem)}@media(min-width:672px){.post-footer{padding-right:1%}}.floating-button{padding:0;background-color:var(--color-header-bg);position:fixed;bottom:1rem;right:1rem;width:48px;height:48px;border:1px solid var(--color-border);box-shadow:5px 5px var(--color-boxshadow);transition-property:box-shadow,transform;transition-duration:.2s,.3s;transition-timing-function:ease;text-align:center}.floating-button__link{display:flex;justify-content:center;align-items:center;height:100%}.floating-button:hover{transform:translate(4px,4px);box-shadow:1px 1px var(--color-boxshadow)}.not-found{display:flex}.not-found__left{flex:1 1 100px;margin-right:1rem}.not-found__htext{font-size:2.5rem;font-weight:700;margin-bottom:1rem}.not-found__title{font-size:1.5rem;font-weight:700}.not-found__right{flex:2 1 auto}.not-found__post{padding-left:1rem;border-left:3px solid transparent}.not-found__post:hover{border-left:3px solid var(--color-border)}.not-found__post:not(:last-of-type){margin-bottom:1.5rem}.not-found__home-button{display:inline-block;padding:1rem;border:1px solid var(--color-border)}.not-found__home-button:hover{border:1px solid var(--color-border-dark);background-color:var(--color-card-bg)}
\ No newline at end of file +:root{--color-bg: rgba(255,247,240, 1);--color-card-bg: rgba(250,250,250,0.8);--color-header-bg: white;--color-text: black;--color-text-2: #222222;--color-text-light: white;--color-text-light-2: rgba(255,255,255,0.9);--color-link: #0F4C81;--color-hover: rgba(120,120,120,0.9);--color-border: rgba(120,120,120,1);--color-border-dark: black;--color-border-light: white;--color-header-border: black;--color-boxshadow: rgba(100,100,100,1);--color-boxshadow-dark: rgba(70,70,70,1);--color-extra: #ffecbc;--color-extra-2: #fcb279;--color-footer-bg: rgba(250,250,250,0.8);--color-code-bg: rgba(100,100,100,1);--color-table-bg: rgba(200,200,200);--color-blockquote: #999999;--color-twitter: rgb(29, 161, 242);--color-link-bg: rgb(200, 200,200, 0.25)}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}html,body{height:100%}body{line-height:1;font-family:lato,noto sans,pt sans,roboto,sans-serif;box-sizing:border-box;background:var(--color-bg);display:flex;flex-flow:column nowrap}*{box-sizing:border-box}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}button{cursor:pointer;background:0 0;border:none;outline:none}a{text-decoration:none;color:initial}.h2{font-size:3rem;font-weight:700}.flex-1{flex:1}.flex-col{display:flex;flex-flow:column nowrap}.flex-row{display:flex;flex-flow:row nowrap}.flex-between{display:flex;justify-content:space-between;align-items:center}.flex-center{display:flex;justify-content:center;align-items:center}.py--sm{padding-top:1rem;padding-bottom:1rem}.px--sm{padding-right:1rem;padding-left:1rem}.py--md{padding-top:2rem;padding-bottom:2rem}.px--md{padding-left:2rem;padding-right:2rem}.p--sm{padding:1rem}.p--md{padding:2rem}.pl-sm{padding-left:1rem}.mb-sm{margin-bottom:1rem}.mb-xs{margin-bottom:.5rem}.mb-0{margin-bottom:0}header{max-width:1584px;margin:0 auto;padding:1rem 2%;width:100%;position:relative;z-index:100}@media(min-width:1056px){header{padding:1rem 4%}}.header{display:flex;justify-content:space-between;align-items:center}.header__title{font-size:2rem;font-weight:700;margin-bottom:.5rem}.header__title--nomargin{margin-bottom:0}.header-nav-list{display:flex;flex-flow:row wrap;justify-content:center;align-items:center}.header-nav-list--menu{display:none}@media(min-width:1056px){.header-nav-list--menu{display:flex}}.header-nav-list__item{margin:.5rem}.header-nav-list__link{border-bottom:2px solid transparent}.header-nav-list__link:hover{border-bottom:2px solid #000;color:#000}.header-nav-list__nav-btn{display:none;padding:3px 5px;background:var(--color-text);color:var(--color-text-light);border:1px solid var(--color-border-dark);max-height:30px;cursor:pointer}@media(min-width:1056px){.header-nav-list__nav-btn{display:inline-block}}.header-nav-list__nav-btn:hover{background:var(--color-text-light);color:var(--color-text)}.header-nav-list__nav-btn.css-only:hover~.navigation{display:block!important}.header-nav-list__nav-btn.css-only:hover:before{position:absolute;content:"";display:block;width:150px;height:100px;top:0;right:0}.navigation:hover{display:block!important}.header-nav.desktop{display:none}@media(min-width:1056px){.header-nav.desktop{display:block}}.header-nav{display:flex}.mb-header-nav{transition:opacity .3s ease;overflow:auto;display:none;position:fixed;background:var(--color-bg);opacity:0;z-index:10;top:0;left:0;bottom:0;right:0;width:100%;height:100vh}.mb-header-nav:target{display:block;opacity:1}.mb-header-nav__wrapper{display:flex;flex-direction:row;flex-wrap:wrap}.mb-header-nav__container{flex:1;text-align:center}.mb-header-nav__close-btn{position:absolute;top:1rem;right:1rem;fill:currentColor}.mb-header-nav__close-btn:hover .mb-header-nav__svg-icon{color:gray;fill:gray}.mb-header-nav__title{font-size:2.5rem;font-weight:700}.mb-header-nav__title text{animation:2s stroke alternate;stroke-width:.4}.mb-header-nav.active{display:block}.mb-header-nav-list__list{margin:auto;width:50%;display:flex;flex-flow:column;padding:1rem}.mb-header-nav-list__item{opacity:0;transition:opacity .3s ease;font-size:2.5rem;margin:1rem auto;text-align:center}.mb-header-nav-list__item.cssonly{opacity:1}.mb-header-nav-list__link{text-transform:uppercase;font-weight:700;position:relative;display:inline-block;-webkit-text-stroke:1px var(--color-text);color:transparent;background:linear-gradient(90deg,var(--color-extra-2) 0%,var(--color-extra-2) 100%);background-position:0;background-size:0%;background-repeat:no-repeat;transition:background-size .5s ease;background-clip:text;-webkit-background-clip:text}.mb-header-nav-list__link:hover{background-size:100%}.mb-header__menu-btn{flex:0 0 1.5rem;display:block;height:1.5rem;width:1.5rem;padding:0;position:relative}.mb-header__menu-btn>span:nth-child(1){transition:transform .2s ease;display:inline-block;position:absolute;left:0;top:3px;width:100%;height:2px;background:#000}.mb-header__menu-btn>span:nth-child(2){transition:transform .2s ease;display:inline-block;background:#000;position:absolute;left:0;top:12px;width:100%;height:2px}.mb-header__menu-btn>span:nth-child(3){transition:transform .2s ease;display:inline-block;background:#000;position:absolute;left:0;top:21px;width:100%;height:2px}.mb-header__menu-btn:hover .mb-header__menu-btn-line:nth-child(1){transform:translate(-2px,-6px)rotate(2deg)}.mb-header__menu-btn:hover .mb-header__menu-btn-line:nth-child(2){transform:translate(-2px,-2px)rotate(-2deg)}.mb-header__menu-btn:hover .mb-header__menu-btn-line:nth-child(3){transform:translate(-2px,6px)rotate(2deg)}@media(min-width:1056px){.mb-header__menu-btn{display:none}}.header-frame{width:100%;transform:translateX(-6px);padding:1rem;background:var(--color-header-bg);border:3px solid var(--color-header-border);box-shadow:11px 11px var(--color-header-border);position:relative;margin-right:auto;margin-left:auto;transform-style:preserve-3d;overflow:visible}@media(min-width:1056px){.header-frame{width:80%}}.header-frame:after{content:"";position:absolute;background:var(--color-header-border);width:15px;height:15px;left:1px;bottom:-11px;transform:translateZ(-1px)rotate(45deg);z-index:-1}.header-frame:before{content:"";position:absolute;background:var(--color-header-border);width:15px;height:15px;right:-11px;top:1px;transform:translateZ(-1px)rotate(45deg);z-index:-1}@keyframes stroke{0%{fill:transparent;stroke:#000;stroke-dasharray:0% 50%;stroke-width:1}70%{fill:transparent;stroke:#000;stroke-dasharray:90% 50%;stroke-width:1}100%{fill:#000;stroke:#000}}.navigation{top:5.5rem;right:0;width:100%;max-height:calc(100vh - 5.5rem);overflow:hidden;position:fixed;display:none;opacity:1;background-color:var(--color-extra)}.navigation__wrapper{padding:2rem;display:flex;flex-flow:row wrap}.navigation__container{flex:1 1 50%;display:flex;flex-flow:column wrap;align-items:center}.navigation__list{display:flex;flex-flow:column nowrap}.navigation__list-item{font-size:1.25rem}.navigation__list-item:not(:last-of-type){margin-bottom:.5rem}.navigation__link:link:hover{border-bottom:1px solid #000}.list-header{overflow-x:hidden;position:relative;display:flex;background:var(--color-extra);padding:2rem;margin:0 auto;border:1px solid var(--color-border);box-shadow:5px 5px var(--color-boxshadow);transition-property:box-shadow,transform,background;transition-duration:.2s,.3s,.3s;transition-timing-function:ease}@media(min-width:1056px){.list-header{width:80%}}.list-header:hover{background-color:var(--color-extra-2)}.list-header:hover .list-header__title-2:nth-of-type(1){transition-delay:50ms;opacity:1;transform:translate(100%)}.list-header:hover .list-header__title-2:nth-of-type(2){transition-delay:100ms;opacity:1;transform:translate(200%)}.list-header:hover .list-header__title-2:nth-of-type(3){transition-delay:150ms;opacity:1;transform:translate(300%)}.list-header:hover .list-header__title-2:nth-of-type(4){transition-delay:200ms;opacity:1;transform:translate(400%)}.list-header__title{font-size:2.5rem;font-weight:700;margin-right:1rem}.list-header__title-2{transition-property:opacity,transform;transition-duration:.3s,.3s;transition-timing-function:ease;opacity:0;position:absolute;font-size:2.5rem;font-weight:700;-webkit-text-stroke:2px var(--color-text);-webkit-text-fill-color:transparent}#content{flex:1 0 auto;width:100%;padding:2%;max-width:1584px;margin:0 auto;background:var(--color-bg);display:flex;flex-flow:column nowrap}@media(min-width:1056px){#content{padding:4%}}.pagination{margin-top:3rem;display:flex;justify-content:space-between;align-items:center;width:100%;margin:3rem auto 0}@media(min-width:1056px){.pagination{width:80%}}.pagination__item{width:48px;height:48px}.pagination__item:not(:last-of-type){margin-right:1rem}.pagination__pagenums{flex:1 1 auto;display:flex;justify-content:center;align-items:center}.pagination__link{border:1px solid var(--color-border);background:var(--color-card-bg);display:flex;justify-content:center;align-items:center;width:100%;height:100%;box-shadow:5px 5px var(--color-boxshadow);transition-property:box-shadow,transform;transition-duration:.2s,.3s;transition-timing-function:ease}.pagination__link:hover{transform:translate(4px,4px);box-shadow:1px 1px var(--color-boxshadow)}.post-item{color:var(--color-text);padding:.5rem;position:relative;margin-bottom:var(--margin-between-cards);margin-right:auto;margin-left:auto;width:calc(100%);max-height:250px;background:var(--color-card-bg);transition:transform .2s ease;border:1px solid var(--color-border);box-shadow:5px 5px var(--color-boxshadow);transition-property:box-shadow,transform;transition-duration:.2s,.3s;transition-timing-function:ease}@media(min-width:1056px){.post-item{padding:1rem 4%}}.post-item:hover{transform:translate(4px,4px);box-shadow:1px 1px var(--color-boxshadow)}.post-item__meta{padding-top:1.5rem}.post-item__meta.no-tag{padding-top:0}.post-item__description{line-height:1.5;margin-top:.5rem;color:var(--color-text-2)}.post-item__date{color:var(--color-text-2);font-family:monospace}.post-item--left{flex:1 1 47%;margin-right:1rem}.post-item--right{flex:1 1 47%}.post-item__image{display:block;padding-top:20%;border:1px solid var(--color-border);overflow:hidden;position:relative}.post-item__image>img{position:absolute;left:0;top:0;right:0;bottom:0;width:100%;height:100%;object-fit:cover}.post-item__title{line-height:1.2;font-size:1.5rem;font-weight:600;color:#000}.post-item__tag{position:absolute;padding:3px 5px;background:var(--color-text);color:var(--color-text-light);top:0;left:0;border:1px solid var(--color-border-dark);max-height:30px;display:block}.post-item__tag:hover{background:var(--color-text-light);color:var(--color-text);cursor:pointer}.post-item:not(:last-of-type){margin-bottom:1rem}.post-item-flex{display:flex;overflow:hidden}.post-list{display:flex;flex-flow:column nowrap;height:100%;margin:0 auto;width:100%}@media(min-width:1056px){.post-list{width:80%}}.list__title{font-size:2.1rem;font-weight:700}.featured-title{font-size:1.5rem;font-family:monospace;margin:0 auto}@media(min-width:1056px){.featured-title{width:80%}}.featured-posts{display:grid;width:100%;height:auto;max-height:100vh;margin:0 auto 2.5rem;box-shadow:4px 4px var(--color-boxshadow-dark);transition-property:box-shadow,transform;transition-duration:.2s,.3s;transition-timing-function:ease;background:var(--color-card-bg);grid-template-rows:2fr repeat(2,1fr);grid-template-areas:"first" "second" "third"}@media(min-width:672px){.featured-posts{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto;grid-template-areas:"first second" "first third"}}@media(min-width:1056px){.featured-posts{width:80%}}.featured-post{display:flex;flex-flow:column nowrap;justify-content:center;border:1px solid var(--color-border);padding:1rem;position:relative;transition-property:box-shadow,transform;transition-duration:.2s,.3s;transition-timing-function:ease;background:var(--color-hover)}@media(min-width:672px){.featured-post{background:0 0;padding:1.5rem;z-index:1;position:relative}}@media(min-width:1056px){.featured-post{padding:2rem}}.featured-post time{font-family:monospace}.featured-post:hover{background:var(--color-hover);transform:translate(4px,4px);box-shadow:0 0 3px 0 var(--color-boxshadow)}.featured-post__wrapper{height:100%;background:0 0;z-index:1;position:relative;display:block;color:var(color-text-light)}@media(min-width:672px){.featured-post__wrapper{color:var(color-text)}}.featured-post__wrapper time{color:var(--color-text-light)}@media(min-width:672px){.featured-post__wrapper time{color:var(--color-text)}}.featured-post__title{color:var(--color-text-light)}@media(min-width:672px){.featured-post__title{color:var(--color-text)}}.featured-post__image{opacity:1;position:absolute;top:0;bottom:0;left:0;right:0;z-index:0;width:100%;height:100%;object-fit:cover;transition:opacity .3s ease}@media(min-width:672px){.featured-post__image{opacity:0}}.featured-post__image-filter{display:block;background:rgba(0,0,0,.7);position:absolute;z-index:0;width:100%;height:100%;top:0;bottom:0;left:0;right:0}@media(min-width:672px){.featured-post__image-filter{display:none}}.featured-post__description{color:var(--color-text-light);margin:.5rem 0}@media(min-width:672px){.featured-post__description{color:var(--color-text-2)}}.featured-post__tags{display:flex;flex-flow:row wrap;position:relative;z-index:1;margin-top:1rem;margin-left:-.5rem}.featured-post__tags>li{padding:.5rem;border:1px solid var(--color-border-light);margin:.5rem}@media(min-width:672px){.featured-post__tags>li{border:1px solid var(--color-border)}}.featured-post__tags>li>a{color:var(--color-text-light)}@media(min-width:672px){.featured-post__tags>li>a{color:var(--color-text)}}.featured-post__tags>li:hover{background:rgba(0,0,0,.8);box-shadow:0 0 8px 1px rgba(0,0,0,.4);transition:transform .4s ease;transform:translate(2px,2px)}.featured-post:nth-child(1){grid-area:first}.featured-post:nth-child(1) .featured-post__title{font-weight:700;font-size:1.5rem;margin:0 0 1rem}.featured-post:nth-child(1) .featured-post__description{font-size:1rem}.featured-post:nth-child(2){grid-area:second}.featured-post:nth-child(2) .featured-post__title{font-weight:700;font-size:1rem;margin:.5rem 0}.featured-post:nth-child(2) .featured-post__description{font-size:.8rem}.featured-post:nth-child(3){grid-area:third}.featured-post:nth-child(3) .featured-post__title{font-weight:700;font-size:1rem;margin:.5rem 0}.featured-post:nth-child(3) .featured-post__description{font-size:.8rem}.featured-post:hover .featured-post__image{opacity:1}.featured-post:hover .featured-post__image-filter{display:block}.featured-post:hover .featured-post__wrapper{color:var(--color-text-light);z-index:1;position:relative}.featured-post:hover .featured-post__title{color:var(--color-text-light);z-index:1;position:relative}.featured-post:hover .featured-post__wrapper time{color:var(--color-text-light);z-index:1;position:relative}.featured-post:hover .featured-post__description{color:var(--color-text-light)}.featured-post:hover .featured-post__tags>li>a{color:var(--color-text-light)}.featured-post:hover .featured-post__tags>li{border:1px solid var(--color-border-light)}.post{width:100%;max-width:1056px;margin:0 auto}@media(min-width:1056px){.post{width:80%}}.post-content--nopost{font-size:1.5rem;text-align:center}.post-content h1{font-size:3rem;font-weight:700;margin:1rem 0}.post-content h2{font-size:2.5rem;font-weight:700;margin:.825rem 0}.post-content h3{font-size:2rem;font-weight:semibold;margin:.825rem 0}.post-content h4{font-size:1.5rem;font-weight:semibold;margin:.825rem 0}.post-content h5{font-size:1rem;margin:.825rem 0}.post-content h6{font-size:.75rem;margin:.825rem 0}.post-content h1,.post-content h2,.post-content h3,.post-content h4,.post-content h5,.post-content h6,.post-content p,.post-content code,.post-content blockquote,.post-content a,.post-content ul,.post-content ol{line-height:1.4}@media(min-width:1056px){.post-content h1,.post-content h2,.post-content h3,.post-content h4,.post-content h5,.post-content h6,.post-content p,.post-content code,.post-content blockquote,.post-content a,.post-content ul,.post-content ol{line-height:1.5}}.post-content p,.post-content code,.post-content blockquote,.post-content a,.post-content table,.post-content pre,.post-content ul,.post-content ol{font-size:1rem}@media(min-width:320px){.post-content p,.post-content code,.post-content blockquote,.post-content a,.post-content table,.post-content pre,.post-content ul,.post-content ol{font-size:1.125rem}}@media(min-width:1056px){.post-content p,.post-content code,.post-content blockquote,.post-content a,.post-content table,.post-content pre,.post-content ul,.post-content ol{font-size:1.25rem;line-height:1.5}}.post-content p{margin:1rem 0;color:var(--color-text-2)}.post-content blockquote{margin-left:1rem;padding-left:1rem;border-left:4px solid var(--color-border);font-family:roboto mono,pt mono,ibm plex mono,monospace}.post-content code{padding:1px 3px;border-radius:2px;background-color:var(--color-code-bg);color:var(--color-text-light)}.post-content pre code{color:inherit;background-color:inherit;padding:0;border-radius:inherit}.post-content .highlight{box-shadow:5px 5px var(--color-boxshadow);border:1px solid var(--color-border)}.post-content .highlight pre{padding:1rem;overflow:auto}.post-content .highlight code{color:inherit;background-color:inherit;padding:0;border-radius:inherit}.post-content ul{list-style-type:disc;padding-left:1rem;color:var(--color-text-2)}.post-content ol{list-style-type:decimal;padding-left:1rem;color:var(--color-text-2)}.post-content a,.post-content a:any-link{color:var(--color-link);border-bottom:1px solid var(--color-border)}.post-content a:hover,.post-content a:hover:any-link{border-bottom:3px solid var(--color-border);background-color:var(--color-link-bg)}.post-content table{margin:.5rem 0;color:var(--color-text-2)}.post-content table th{padding:.5rem;background:var(--color-extra)}.post-content table td{padding:.5rem;border-bottom:1px solid var(--color-border);border-collapse:collapse}.post-content table tbody tr:nth-child(even){background:var(--color-table-bg)}.post-content table tbody tr:hover{background:var(--color-hover);color:var(--color-text-light)}.post-content cite{font-family:roboto mono,pt mono,ibm plex mono,monospace}.post-content sub{vertical-align:sub}.post-content sup{vertical-align:super}.post-content kbd{background:var(--color-code-bg);padding:1px 3px;border-radius:2px;color:var(--color-text-light)}.post-content mark{background-color:var(--color-extra);padding:1px 3px;border-radius:2px;border:1px solid var(--color-border)}.post-content strong{font-weight:700}.post-content div[class~=__h_instagram]{margin:1rem auto}.post-content div[class~=__h_instagram].card>.card-header{background-color:var(--color-card-bg);border:1px solid var(--color-border);padding:1rem;text-align:center}.post-content div[class~=__h_instagram].card>a{display:flex;align-items:center;justify-content:center;border:none}.post-content div[class~=__h_instagram].card>a:hover{border:none}.post-content div[class~=__h_instagram].card>.card-body{background-color:var(--color-card-bg);border:1px solid var(--color-border);padding:1rem;text-align:center}.post-content div[class~=__h_instagram].card>a>.img-fluid{border:1px solid var(--color-border);width:100%;height:auto;object-fit:cover}.post-content blockquote.twitter-tweet{border-left:4px solid var(--color-twitter)}footer{max-width:1584px;margin:auto auto 0;width:100%;padding:10px 1%}.footer{display:flex;flex-flow:row wrap;justify-content:space-between;align-items:center;border:1px solid var(--color-border);padding:1rem 2rem;background:var(--color-footer-bg);width:100%;margin:0 auto}@media(min-width:672px){.footer{width:80%}}.footer__socials{display:flex;align-items:center}.post-footer{padding-right:calc(48px + 2rem)}@media(min-width:672px){.post-footer{padding-right:1%}}.floating-button{padding:0;background-color:var(--color-header-bg);position:fixed;bottom:1rem;right:1rem;width:48px;height:48px;border:1px solid var(--color-border);box-shadow:5px 5px var(--color-boxshadow);transition-property:box-shadow,transform;transition-duration:.2s,.3s;transition-timing-function:ease;text-align:center}.floating-button__link{display:flex;justify-content:center;align-items:center;height:100%}.floating-button:hover{transform:translate(4px,4px);box-shadow:1px 1px var(--color-boxshadow)}.not-found{display:flex}.not-found__left{flex:1 1 100px;margin-right:1rem}.not-found__htext{font-size:2.5rem;font-weight:700;margin-bottom:1rem}.not-found__title{font-size:1.5rem;font-weight:700}.not-found__right{flex:2 1 auto}.not-found__post{padding-left:1rem;border-left:3px solid transparent}.not-found__post:hover{border-left:3px solid var(--color-border)}.not-found__post:not(:last-of-type){margin-bottom:1.5rem}.not-found__home-button{display:inline-block;padding:1rem;border:1px solid var(--color-border)}.not-found__home-button:hover{border:1px solid var(--color-border-dark);background-color:var(--color-card-bg)}
\ No newline at end of file diff --git a/exampleSite/resources/_gen/assets/scss/scss/style.scss_48b060fe05b0a273d182ef83c0605941.json b/exampleSite/resources/_gen/assets/scss/scss/style.scss_48b060fe05b0a273d182ef83c0605941.json index 65cbd71..2a0cce4 100644 --- a/exampleSite/resources/_gen/assets/scss/scss/style.scss_48b060fe05b0a273d182ef83c0605941.json +++ b/exampleSite/resources/_gen/assets/scss/scss/style.scss_48b060fe05b0a273d182ef83c0605941.json @@ -1 +1 @@ -{"Target":"scss/style.min.a1a21126c601ff12145829d459dc23393a1c70be51d916a14bc3660fa58cc11e.css","MediaType":"text/css","Data":{"Integrity":"sha256-oaIRJsYB/xIUWCnUWdwjOToccL5R2RahS8NmD6WMwR4="}}
\ No newline at end of file +{"Target":"scss/style.min.39f43c1ee38aced9af7a47acf2808335491bf330a41b8e15b09f8333e9feb952.css","MediaType":"text/css","Data":{"Integrity":"sha256-OfQ8HuOKztmvekes8oCDNUkb8zCkG44VsJ+DM+n+uVI="}}
\ No newline at end of file diff --git a/images/tn.png b/images/tn.png Binary files differindex 1a82b8e..367292b 100644 --- a/images/tn.png +++ b/images/tn.png diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index debecc2..881bf2e 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -2,11 +2,13 @@ <html> {{- partial "head.html" . -}} <body> - {{- block "header" .}}{{- end }} - <div id="content"> - {{- block "main" . }}{{- end }} - </div> - {{- block "footer" . }}{{- end}} + {{- block "header" .}}{{- end }} + <div id="content"> + {{- block "main" . }}{{- end }} + </div> + {{- block "footer" . }}{{- end}} + {{ if not (isset .Site.Params "cssonly") }} {{ partial "script.html" . }} + {{end}} </body> </html> diff --git a/layouts/index.html b/layouts/index.html index d0fff19..451a111 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -25,18 +25,17 @@ {{ end }} {{end}} - {{ partial "pagination" . }} </div> +{{ partial "pagination" . }} + {{else}} <div class="post-list"> {{ range $paginator.Pages }} {{ .Render "li" }} {{ end }} - - {{ partial "pagination" . }} </div> +{{ partial "pagination" . }} {{end}} - {{end}} {{define "footer"}} {{partial "footer" .}} diff --git a/layouts/partials/header-hover.html b/layouts/partials/header-hover.html new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/layouts/partials/header-hover.html diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 5f3eec6..0d8a448 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -34,13 +34,26 @@ {{ end }} {{ end }} </ul> - <button class="header-nav-list__nav-btn">navigation</button> + <button class="header-nav-list__nav-btn {{ if isset .Site.Params "cssonly"}} css-only {{ end }}">navigation</button> + {{partial "navigation" .}} </nav> - <button class="mb-header__menu-btn"> - <span class="mb-header__menu-btn-line"></span> - <span class="mb-header__menu-btn-line"></span> - <span class="mb-header__menu-btn-line"></span> - </button> + {{if isset .Site.Params "cssonly"}} + <a href="#mobile-header-nav" class="mb-header__menu-btn"> + <span class="mb-header__menu-btn-line"></span> + <span class="mb-header__menu-btn-line"></span> + <span class="mb-header__menu-btn-line"></span> + </a> + {{else}} + <button class="{{ if isset .Site.Params "cssonly"}} css-only {{ end }} mb-header__menu-btn "> + <span class="mb-header__menu-btn-line"></span> + <span class="mb-header__menu-btn-line"></span> + <span class="mb-header__menu-btn-line"></span> + </button> + {{end}} </div> + {{if isset .Site.Params "cssonly"}} {{partial "mobile-header-nav" .}} + {{else}} + {{partial "mobile-popup" .}} + {{end}} </header> diff --git a/layouts/partials/mobile-header-nav.html b/layouts/partials/mobile-header-nav.html index 5926612..9e0d0b1 100644 --- a/layouts/partials/mobile-header-nav.html +++ b/layouts/partials/mobile-header-nav.html @@ -1,6 +1,23 @@ -<nav class="mb-header-nav"> - <button class="mb-header-nav__close-btn flex-center"> - <svg +<nav id="mobile-header-nav" class="mb-header-nav"> + {{ $cssonly := isset .Site.Params "cssonly" }} + {{ if $cssonly }} + <a href="#" class="mb-header-nav__close-btn"> + <svg + class="mb-header-nav__svg-icon" + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 24 24" + width="32" + height="32" + > + <path + d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" + /> + <path d="M0 0h24v24H0z" fill="none" /> + </svg> + </a> + {{else}} + <button class="mb-header-nav__close-btn flex-center"> + <svg class="mb-header-nav__svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" @@ -13,6 +30,7 @@ <path d="M0 0h24v24H0z" fill="none" /> </svg> </button> + {{end}} <div class="mb-header-nav__wrapper"> <div class="mb-header-nav__container"> <svg @@ -28,7 +46,7 @@ <ul class="mb-header-nav-list"> {{if .IsHome}} {{ range .Site.Taxonomies.tags }} - <li class="mb-header-nav-list__item"> + <li class="mb-header-nav-list__item {{ if $cssonly }} cssonly {{ end }}"> <a class="mb-header-nav-list__link" href="{{ .Page.Permalink}}" >{{.Page.Title}}</a > @@ -37,7 +55,7 @@ {{else}} {{range .Params.tags}} {{with $.Site.GetPage (printf "/%s/%s" "tags" ( . | urlize ))}} - <li class="mb-header-nav-list__item"> + <li class="mb-header-nav-list__item {{if $cssonly}} cssonly {{end}}"> <a class="mb-header-nav-list__link" href="{{ .Permalink}}" >{{.Title}}</a > @@ -62,7 +80,7 @@ {{ $currentPage := . }} {{ range .Site.Menus.main }} {{ if .HasChildren }} - <li class="mb-header-nav-list__item {{ if $currentPage.HasMenuCurrent "main" . }}active{{ end }}"> + <li class="mb-header-nav-list__item {{ if $currentPage.HasMenuCurrent "main" . }}active{{ end }} {{if $cssonly}} cssonly {{end}}"> <a class="mb-header-nav-list__link" href="#"> {{ .Pre }} <span>{{ .Name }}</span> @@ -70,13 +88,13 @@ </li> <ul class="mb-header-nav-list"> {{ range .Children }} - <li class="mb-header-nav-list__item {{ if $currentPage.IsMenuCurrent "main" . }}active{{ end }}"> + <li class="mb-header-nav-list__item {{ if $currentPage.IsMenuCurrent "main" . }}active{{ end }} {{if $cssonly}} cssonly {{end}}"> <a class="mb-header-nav-list__link" href="{{ .URL }}">{{ .Name }}</a> </li> {{ end }} </ul> {{ else }} - <li class="mb-header-nav-list__item"> + <li class="mb-header-nav-list__item {{ if $cssonly }} cssonly {{ end }}"> <a class="mb-header-nav-list__link" href="{{ .URL }}"> {{ .Name }} </a> diff --git a/layouts/partials/navigation.html b/layouts/partials/navigation.html new file mode 100644 index 0000000..c092299 --- /dev/null +++ b/layouts/partials/navigation.html @@ -0,0 +1,71 @@ +<nav class="navigation"> + <div class="navigation__wrapper"> + <div class="navigation__container"> + <svg + width="240" + height="72" + viewBox="0 0 240 72" + class="mb-header-nav__title" + > + <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle"> + Tags + </text> + </svg> + <ul class="navigation__list"> + {{if .IsHome}} + {{ range .Site.Taxonomies.tags }} + <li class="navigation__list-item"> + <a class="navigation__link" href="{{ .Page.Permalink}}">{{.Page.Title}}</a> + </li> + {{end}} + {{else}} + {{range .Params.tags}} + {{with $.Site.GetPage (printf "/%s/%s" "tags" ( . | urlize ))}} + <li class="navigation__list-item"> + <a class="navigation__list" href="{{ .Permalink}}">{{.Title}}</a> + </li> + {{end}} + {{end}} + {{end}} + </ul> + </div> + <div class="navigation__container"> + <svg + width="240" + height="72" + viewBox="0 0 240 72" + class="mb-header-nav__title" + > + <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle"> + Menu + </text> + </svg> + <ul class="navigation__list"> + {{ $currentPage := . }} + {{ range .Site.Menus.main }} + {{ if .HasChildren }} + <li class="navigation__list-item"> + <a class="navigation__list" href="#"> + {{ .Pre }} + <span>{{ .Name }}</span> + </a> + </li> + <ul class="navigation__list"> + {{ range .Children }} + <li class="navigation__list-item"> + <a class="navigation__list" href="{{ .URL }}">{{ .Name }}</a> + </li> + {{ end }} + </ul> + {{ else }} + <li class="navigation__list-item"> + <a class="navigation__link" href="{{ .URL }}"> + {{ .Name }} + </a> + </li> + {{ end }} + {{ end }} + </ul> + </div> + </div> +</nav> @@ -4,9 +4,8 @@ licenselink = "https://gitlab.com/asleeppiano/origin-hugo-theme/-/blob/master/LI description = "simple theme for hugo" homepage = "https://asleeppiano.gitlab.io/origin-hugo-site/" tags = ["blog", "responsive", "light", "simple"] -features = [] -min_version = "0.60" +features = ["pagination", "single-column", "syntax-highlighting"] +min_version = "0.60.0" [author] name = "Andrey Parfenov" - homepage = "" |
