diff --git a/README.md b/README.md
index 1d6d825..ffbfcd8 100644
--- a/README.md
+++ b/README.md
@@ -23,7 +23,6 @@
- [Found a bug?](#bug)
- [New cool idea or feature](#feature)
- [`Hello Friend` theme user?](#hello-friend-theme-user)
- - [Sponsoring](#sponsoring)
- [License](#license)
## Features
@@ -53,7 +52,7 @@
font-size: 1rem;
overflow: auto;
- @media (--phone) {
+ @media ($phone) {
white-space: pre-wrap;
word-wrap: break-word;
}
@@ -94,19 +93,56 @@ Some enhancements have been made to Hugo's [internal RSS](https://github.com/goh
You can download the theme manually by going to [https://github.com/panr/hugo-theme-hello-friend.git](https://github.com/panr/hugo-theme-hello-friend.git) and pasting it to `themes/hello-friend` in your root directory.
-You can also clone it directly to your Hugo folder:
+### Install theme as Hugo Module
+
+```bash
+# If this is the first time you're using Hugo Modules
+# in your project. You have to initiate your own module before
+# you fetch the theme module.
+#
+# hugo mod init [your website/module name]
+hugo mod get github.com/panr/hugo-theme-hello-friend
+```
+
+and in your config file add:
+
+```toml
+[module]
+ # this is needed when you fetch the theme as a submodule to your repo.
+ # replacements = "github.com/panr/hugo-theme-hello-friend -> themes/hello-friend"
+[[module.imports]]
+ path = 'github.com/panr/hugo-theme-hello-friend'
+```
+
+Keep in mind that the theme by default won't show up in the `themes` directory. This means that you are using the theme as it was on the repository at the moment you fetched it. Your local `go.sum` file keeps all the references. Read more about Hugo Modules in the [official documentation](https://gohugo.io/hugo-modules/).
+
+⚠️ If you encounter any issues with:
+
+```bash
+Error: module "hello-friend" not found; either add it as a Hugo Module or store it in "[...your custom path]/themes".: module does not exist
+```
+
+then please try to remove `theme = "hello-friend"` from your config file.
+
+⚠️ **The theme needs at least Hugo version 0.74.x**.
+
+### Install theme locally
```bash
git clone https://github.com/panr/hugo-theme-hello-friend.git themes/hello-friend
```
-If you don't want to make any radical changes, it's the best option, because you can get new updates when they are available. To do so, include it as a git submodule:
+This will clone the repository directly to the `themes/hello-friend` directory.
+
+### Install theme as a submodule
```bash
git submodule add -f https://github.com/panr/hugo-theme-hello-friend.git themes/hello-friend
```
-⚠️ **The theme needs at least Hugo version 0.74.x**.
+This will install the repository as a sumbodule in the `themes/hello-friend` directory.
+
+⚠️ **The theme needs at least Hugo version 0.90.x**.
## How to run your site
@@ -125,6 +161,8 @@ The theme doesn't require any advanced configuration. Just copy:
```toml
baseurl = "/"
languageCode = "en-us"
+# Add it only if you keep the theme in the `themes` directory.
+# Remove it if you use the theme as a remote Hugo Module.
theme = "hello-friend"
paginate = 5
@@ -281,14 +319,8 @@ Sounds OK? Cool, let's rock! 🤘
I'd be happy to know more about you and what you are doing. If you want to share it, please make a contribution and [add your site to the list](https://github.com/panr/hugo-theme-hello-friend/blob/master/USERS.md)! 🤗
-## Sponsoring
-
-If you like my work and want to support the development of the project, now you can! Just:
-
-
-
## License
-Copyright © 2019-2020 Radosław Kozieł ([@panr](https://twitter.com/panr))
+Copyright © 2019-2022 Radosław Kozieł ([@panr](https://twitter.com/panr))
The theme is released under the MIT License. Check the [original theme license](https://github.com/panr/hugo-theme-hello-friend/blob/master/LICENSE.md) for additional licensing information.
diff --git a/assets/css/archive.css b/assets/css/archive.scss
similarity index 92%
rename from assets/css/archive.css
rename to assets/css/archive.scss
index 2516089..1911ef2 100644
--- a/assets/css/archive.css
+++ b/assets/css/archive.scss
@@ -11,7 +11,7 @@
align-items: flex-start;
padding: 10px 0;
- @media (--phone) {
+ @media ($phone) {
flex-direction: column;
}
@@ -23,7 +23,7 @@
&-year {
margin-top: 40px;
- @media (--phone) {
+ @media ($phone) {
margin-top: 20px;
}
@@ -42,7 +42,7 @@
width: 200px;
opacity: .5;
- @media (--phone) {
+ @media ($phone) {
margin: 10px 0 0;
}
}
diff --git a/assets/css/buttons.css b/assets/css/buttons.scss
similarity index 100%
rename from assets/css/buttons.css
rename to assets/css/buttons.scss
diff --git a/assets/css/code.css b/assets/css/code.scss
similarity index 100%
rename from assets/css/code.css
rename to assets/css/code.scss
diff --git a/assets/css/fonts.css b/assets/css/fonts.scss
similarity index 100%
rename from assets/css/fonts.css
rename to assets/css/fonts.scss
diff --git a/assets/css/footer.css b/assets/css/footer.scss
similarity index 90%
rename from assets/css/footer.css
rename to assets/css/footer.scss
index 02a66ca..96be829 100644
--- a/assets/css/footer.css
+++ b/assets/css/footer.scss
@@ -11,7 +11,7 @@
width: 760px;
max-width: 100%;
- @media (--tablet) {
+ @media ($tablet) {
flex-direction: column;
}
}
@@ -36,14 +36,14 @@
padding-right: 10px;
margin-right: 10px;
- @media (--tablet) {
+ @media ($tablet) {
border: none;
padding: 0;
margin: 0;
}
}
- @media (--tablet) {
+ @media ($tablet) {
flex-direction: column;
margin-top: 10px;
}
diff --git a/assets/css/header.css b/assets/css/header.scss
similarity index 96%
rename from assets/css/header.css
rename to assets/css/header.scss
index e98ce38..9b7c2dc 100644
--- a/assets/css/header.css
+++ b/assets/css/header.scss
@@ -11,7 +11,7 @@
flex-direction: row;
align-items: center;
- @media (--phone) {
+ @media ($phone) {
flex-direction: row-reverse;
}
}
diff --git a/assets/css/logo.css b/assets/css/logo.scss
similarity index 94%
rename from assets/css/logo.css
rename to assets/css/logo.scss
index 7d45f2b..259a9f8 100644
--- a/assets/css/logo.css
+++ b/assets/css/logo.scss
@@ -14,7 +14,7 @@
align-items: center;
margin-right: 5px;
- @mixin greater-icon 8px;
+ @include greater-icon(8px);
}
&__text {
diff --git a/assets/css/main.css b/assets/css/main.scss
similarity index 96%
rename from assets/css/main.css
rename to assets/css/main.scss
index 32bccd3..8932213 100644
--- a/assets/css/main.css
+++ b/assets/css/main.scss
@@ -23,7 +23,7 @@ body {
-webkit-overflow-scrolling: touch;
-webkit-text-size-adjust: 100%;
- @media (--phone) {
+ @media ($phone) {
font-size: 1rem;
}
}
@@ -48,7 +48,7 @@ h4 {
font-size: 1.125rem;
}
-@media (--phone) {
+@media ($phone) {
h1 {
font-size: 2rem;
}
@@ -150,7 +150,7 @@ pre {
font-size: .9rem;
overflow: auto;
- @media (--phone) {
+ @media ($phone) {
white-space: pre-wrap;
word-wrap: break-word;
}
@@ -170,7 +170,7 @@ blockquote {
margin: 40px;
padding: 10px 20px;
- @media (--phone) {
+ @media ($phone) {
margin: 10px;
padding: 10px;
}
@@ -216,7 +216,7 @@ ul, ol {
margin-left: 40px;
padding: 0;
- @media (--phone) {
+ @media ($phone) {
margin-left: 20px;
}
}
@@ -240,7 +240,7 @@ ol ol {
justify-content: center;
margin: 50px 0;
- @media (--phone) {
+ @media ($phone) {
margin-top: 0;
}
}
@@ -264,7 +264,7 @@ hr {
}
blockquote.twitter-tweet {
- background: hsl(206deg 62% 45% / 10%);
+ background: hsla(206deg, 62%, 45%, 0.1);
border: none;
padding: 30px;
color: inherit;
diff --git a/assets/css/menu.css b/assets/css/menu.scss
similarity index 91%
rename from assets/css/menu.css
rename to assets/css/menu.scss
index 296c395..fead7e5 100644
--- a/assets/css/menu.css
+++ b/assets/css/menu.scss
@@ -1,4 +1,4 @@
-@define-mixin menu {
+@mixin menu {
position: absolute;
background: var(--header);
box-shadow: var(--shadow);
@@ -18,8 +18,8 @@
padding-right: 24px;
font-weight: 500;
- @media (--phone) {
- @mixin menu;
+ @media ($phone) {
+ @include menu;
border: none;
top: 50px;
right: 10px;
@@ -39,7 +39,7 @@
padding: 0;
&--desktop {
- @media (--phone) {
+ @media ($phone) {
display: none;
}
}
@@ -47,7 +47,7 @@
&--mobile {
display: none;
- @media (--phone) {
+ @media ($phone) {
display: block;
}
}
@@ -61,7 +61,7 @@
}
}
- @media (--phone) {
+ @media ($phone) {
flex-direction: column;
align-items: flex-start;
padding: 0;
@@ -84,7 +84,7 @@
}
&-more {
- @mixin menu;
+ @include menu;
top: 35px;
left: 0;
@@ -101,7 +101,7 @@
transform: rotate(90deg);
line-height: 1;
- @mixin greater-icon 5px;
+ @include greater-icon(5px);
}
}
diff --git a/assets/css/pagination.css b/assets/css/pagination.scss
similarity index 100%
rename from assets/css/pagination.css
rename to assets/css/pagination.scss
diff --git a/assets/css/post.css b/assets/css/post.scss
similarity index 92%
rename from assets/css/post.css
rename to assets/css/post.scss
index d98448f..bf2891a 100644
--- a/assets/css/post.css
+++ b/assets/css/post.scss
@@ -5,7 +5,7 @@
padding: 20px;
margin: 20px auto;
- @media (--tablet) {
+ @media ($tablet) {
max-width: 660px;
}
@@ -17,7 +17,7 @@
font-size: 1rem;
margin-bottom: 10px;
- @media (--phone) {
+ @media ($phone) {
font-size: .85rem;
}
}
@@ -26,7 +26,7 @@
font-size: 2.625rem;
margin: 0 0 20px;
- @media (--phone) {
+ @media ($phone) {
font-size: 2rem;
}
@@ -61,7 +61,7 @@
box-shadow: 0 12px 40px rgba(0, 0, 0, .15);
}
- @media (--tablet) {
+ @media ($tablet) {
margin: 20px 0;
width: 100%;
}
diff --git a/assets/css/prism.css b/assets/css/prism.scss
similarity index 100%
rename from assets/css/prism.css
rename to assets/css/prism.scss
diff --git a/assets/css/style.css b/assets/css/style.css
deleted file mode 100644
index 04ebaba..0000000
--- a/assets/css/style.css
+++ /dev/null
@@ -1,18 +0,0 @@
-@import 'variables.css';
-
-@import 'fonts.css';
-@import 'buttons.css';
-
-@import 'header.css';
-@import 'logo.css';
-@import 'menu.css';
-@import 'main.css';
-@import 'post.css';
-@import 'pagination.css';
-@import 'footer.css';
-
-@import 'terms.css';
-@import 'archive.css';
-
-@import 'prism.css';
-@import 'code.css';
diff --git a/assets/css/style.scss b/assets/css/style.scss
new file mode 100644
index 0000000..71baadc
--- /dev/null
+++ b/assets/css/style.scss
@@ -0,0 +1,18 @@
+@import 'variables';
+
+@import 'fonts';
+@import 'buttons';
+
+@import 'header';
+@import 'logo';
+@import 'menu';
+@import 'main';
+@import 'post';
+@import 'pagination';
+@import 'footer';
+
+@import 'terms';
+@import 'archive';
+
+@import 'prism';
+@import 'code';
diff --git a/assets/css/terms.css b/assets/css/terms.scss
similarity index 100%
rename from assets/css/terms.css
rename to assets/css/terms.scss
diff --git a/assets/css/variables.css b/assets/css/variables.scss
similarity index 87%
rename from assets/css/variables.css
rename to assets/css/variables.scss
index dbe72fa..4990b5e 100644
--- a/assets/css/variables.css
+++ b/assets/css/variables.scss
@@ -46,10 +46,11 @@ body.dark-theme {
}
}
-@custom-media --phone (width < 684px);
-@custom-media --tablet (width < 900px);
+/* MEDIA QUERIES */
+$phone: (max-width: 684px);
+$tablet: (max-width: 900px);
-@define-mixin greater-icon $stroke-width: 3px, $width: .95rem, $height: 100% {
+@mixin greater-icon($stroke-width: 3px, $width: .95rem, $height: 100%) {
.greater-icon {
width: $width;
height: $height;
@@ -63,6 +64,6 @@ body.dark-theme {
/* HOW TO USE */
-/*@media (--phone) {*/
+/*@media ($phone) {*/
/*margin-top: 0;*/
/*}*/
diff --git a/assets/js/prism.js b/assets/js/prism.js
index acc5b7c..397e3b2 100644
--- a/assets/js/prism.js
+++ b/assets/js/prism.js
@@ -1,73 +1,80 @@
-/* PrismJS 1.15.0
-https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript+actionscript+apacheconf+applescript+c+csharp+bash+cpp+coffeescript+ruby+csp+css-extras+diff+django+docker+elixir+elm+markup-templating+erlang+fsharp+flow+git+go+graphql+less+handlebars+haskell+http+java+json+kotlin+latex+markdown+makefile+objectivec+ocaml+perl+php+php-extras+sql+processing+scss+python+r+jsx+typescript+reason+textile+rust+sass+stylus+scheme+pug+swift+yaml+haml+toml+twig+tsx+vim+visual-basic+wasm&plugins=line-numbers+toolbar+jsonp-highlight+command-line+copy-to-clipboard */
-var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(){var e=/\blang(?:uage)?-([\w-]+)\b/i,t=0,n=_self.Prism={manual:_self.Prism&&_self.Prism.manual,disableWorkerMessageHandler:_self.Prism&&_self.Prism.disableWorkerMessageHandler,util:{encode:function(e){return e instanceof a?new a(e.type,n.util.encode(e.content),e.alias):"Array"===n.util.type(e)?e.map(n.util.encode):e.replace(/&/g,"&").replace(/e.length)return;if(!(w instanceof s)){if(m&&b!=t.length-1){h.lastIndex=k;var _=h.exec(e);if(!_)break;for(var j=_.index+(d?_[1].length:0),P=_.index+_[0].length,A=b,x=k,O=t.length;O>A&&(P>x||!t[A].type&&!t[A-1].greedy);++A)x+=t[A].length,j>=x&&(++b,k=x);if(t[b]instanceof s)continue;I=A-b,w=e.slice(k,x),_.index-=k}else{h.lastIndex=0;var _=h.exec(w),I=1}if(_){d&&(p=_[1]?_[1].length:0);var j=_.index+p,_=_[0].slice(p),P=j+_.length,N=w.slice(0,j),S=w.slice(P),C=[b,I];N&&(++b,k+=N.length,C.push(N));var E=new s(u,f?n.tokenize(_,f):_,y,_,m);if(C.push(E),S&&C.push(S),Array.prototype.splice.apply(t,C),1!=I&&n.matchGrammar(e,t,a,b,k,!0,u),i)break}else if(i)break}}}}},tokenize:function(e,t){var a=[e],r=t.rest;if(r){for(var l in r)t[l]=r[l];delete t.rest}return n.matchGrammar(e,a,t,0,0,!1),a},hooks:{all:{},add:function(e,t){var a=n.hooks.all;a[e]=a[e]||[],a[e].push(t)},run:function(e,t){var a=n.hooks.all[e];if(a&&a.length)for(var r,l=0;r=a[l++];)r(t)}}},a=n.Token=function(e,t,n,a,r){this.type=e,this.content=t,this.alias=n,this.length=0|(a||"").length,this.greedy=!!r};if(a.stringify=function(e,t,r){if("string"==typeof e)return e;if("Array"===n.util.type(e))return e.map(function(n){return a.stringify(n,t,e)}).join("");var l={type:e.type,content:a.stringify(e.content,t,r),tag:"span",classes:["token",e.type],attributes:{},language:t,parent:r};if(e.alias){var i="Array"===n.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(l.classes,i)}n.hooks.run("wrap",l);var o=Object.keys(l.attributes).map(function(e){return e+'="'+(l.attributes[e]||"").replace(/"/g,""")+'"'}).join(" ");return"<"+l.tag+' class="'+l.classes.join(" ")+'"'+(o?" "+o:"")+">"+l.content+""+l.tag+">"},!_self.document)return _self.addEventListener?(n.disableWorkerMessageHandler||_self.addEventListener("message",function(e){var t=JSON.parse(e.data),a=t.language,r=t.code,l=t.immediateClose;_self.postMessage(n.highlight(r,n.languages[a],a)),l&&_self.close()},!1),_self.Prism):_self.Prism;var r=document.currentScript||[].slice.call(document.getElementsByTagName("script")).pop();return r&&(n.filename=r.src,n.manual||r.hasAttribute("data-manual")||("loading"!==document.readyState?window.requestAnimationFrame?window.requestAnimationFrame(n.highlightAll):window.setTimeout(n.highlightAll,16):document.addEventListener("DOMContentLoaded",n.highlightAll))),_self.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism);
-Prism.languages.markup={comment://,prolog:/<\?[\s\S]+?\?>/,doctype://i,cdata://i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+))?)*\s*\/?>/i,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+)/i,inside:{punctuation:[/^=/,{pattern:/(^|[^\\])["']/,lookbehind:!0}]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/?[\da-z]{1,8};/i},Prism.languages.markup.tag.inside["attr-value"].inside.entity=Prism.languages.markup.entity,Prism.hooks.add("wrap",function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&/,"&"))}),Prism.languages.xml=Prism.languages.markup,Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup;
-Prism.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-]+?[\s\S]*?(?:;|(?=\s*\{))/i,inside:{rule:/@[\w-]+/}},url:/url\((?:(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,selector:/[^{}\s][^{};]*?(?=\s*\{)/,string:{pattern:/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},property:/[-_a-z\xA0-\uFFFF][-\w\xA0-\uFFFF]*(?=\s*:)/i,important:/!important\b/i,"function":/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:,]/},Prism.languages.css.atrule.inside.rest=Prism.languages.css,Prism.languages.markup&&(Prism.languages.insertBefore("markup","tag",{style:{pattern:/(