jk
5 years ago
30 changed files with 1236 additions and 530 deletions
-
18config.toml
-
298content/css/style.css
-
BINcontent/favicons/android-chrome-144x144.png
-
BINcontent/favicons/apple-touch-icon.png
-
9content/favicons/browserconfig.xml
-
BINcontent/favicons/favicon-16x16.png
-
BINcontent/favicons/favicon-32x32.png
-
BINcontent/favicons/favicon-48x48.png
-
BINcontent/favicons/favicon.ico
-
BINcontent/favicons/mstile-150x150.png
-
14content/favicons/safari-pinned-tab.svg
-
14content/favicons/site.webmanifest
-
BINcontent/images/Language-Icons/icon24x24px-exported.png
-
36content/post/beer-journal-introduction/index.jp.md
-
2content/post/beer-tasting-notes-op-and-top/index.jp.md
-
141content/post/chinook-what-i-made/index.jp.md
-
4content/post/why-pixelfed/index.md
-
25content/posts.en.md
-
25content/posts.jp.md
-
1content/snaps.md
-
6themes/anatole/layouts/_default/baseof.html
-
2themes/anatole/layouts/_default/list.html
-
2themes/anatole/layouts/_default/list.jp.html
-
7themes/anatole/layouts/_default/single.html
-
2themes/anatole/layouts/index.html
-
16themes/anatole/layouts/partials/footer.html
-
6themes/anatole/layouts/partials/head.html
-
21themes/anatole/layouts/partials/navbar.html
-
815themes/anatole/static/css/backup_style.css
-
298themes/anatole/static/css/style.css
|
After Width: 144 | Height: 144 | Size: 11 KiB |
|
After Width: 180 | Height: 180 | Size: 8.3 KiB |
@ -0,0 +1,9 @@ |
|||
<?xml version="1.0" encoding="utf-8"?> |
|||
<browserconfig> |
|||
<msapplication> |
|||
<tile> |
|||
<square150x150logo src="/favicons/mstile-150x150.png"/> |
|||
<TileColor>#da532c</TileColor> |
|||
</tile> |
|||
</msapplication> |
|||
</browserconfig> |
|||
|
After Width: 16 | Height: 16 | Size: 6.9 KiB |
|
After Width: 32 | Height: 32 | Size: 7.1 KiB |
|
After Width: 48 | Height: 48 | Size: 7.0 KiB |
|
After Width: 270 | Height: 270 | Size: 5.7 KiB |
@ -0,0 +1,14 @@ |
|||
<?xml version="1.0" standalone="no"?> |
|||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" |
|||
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> |
|||
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" |
|||
width="180.000000pt" height="180.000000pt" viewBox="0 0 180.000000 180.000000" |
|||
preserveAspectRatio="xMidYMid meet"> |
|||
<metadata> |
|||
Created by potrace 1.11, written by Peter Selinger 2001-2013 |
|||
</metadata> |
|||
<g transform="translate(0.000000,180.000000) scale(0.100000,-0.100000)" |
|||
fill="#000000" stroke="none"> |
|||
<path d="M0 900 l0 -900 900 0 900 0 0 900 0 900 -900 0 -900 0 0 -900z"/> |
|||
</g> |
|||
</svg> |
|||
@ -0,0 +1,14 @@ |
|||
{ |
|||
"name": "", |
|||
"short_name": "", |
|||
"icons": [ |
|||
{ |
|||
"src": "/favicons/android-chrome-144x144.png", |
|||
"sizes": "144x144", |
|||
"type": "image/png" |
|||
} |
|||
], |
|||
"theme_color": "#ffffff", |
|||
"background_color": "#ffffff", |
|||
"display": "standalone" |
|||
} |
|||
|
After Width: 24 | Height: 24 | Size: 8.4 KiB |
@ -0,0 +1,36 @@ |
|||
--- |
|||
title: "Brewshido - A beer journal - Intro" |
|||
date: 2019-03-25T13:20:07Z |
|||
Blog: ["Brewshido"] |
|||
categories: ["Homebrewing","自家製ビール","Craft Beer","クラフトビール"] |
|||
tags: ["grainfather", "stewart brewing","グレーンファーザー","スチュワート・ブリューイング社"] |
|||
draft: false |
|||
image: ../images/img_20190126_162816.jpg |
|||
--- |
|||
Some time ago, I made the decision that at some future point in my life I want to be a craft beer brewer. For **reasons** this has not yet transpired but the dream still remains and recent plans to relocate to rural Japan in 4 years time provide potential opportunity for the wheels to be put in motion. |
|||
|
|||
以前からずっと、将来ビール醸造者になりたいと思っていました。まだまだ夢の段階ですが、4年後ぐらいに日本の田舎に引っ越す予定なので、達成可能な夢だと思います。 |
|||
|
|||
My only experience thus far of brewing was when a few years ago, a friend invited myself and a few others to the [Stewart Brewing Craft Beer Kitchen](https://www.stewartbrewing.co.uk/craft-beer-kitchen/) where under the guidance of a resident brewer we had a fairly decent go at making a _milk stout_. The day in the brew kitchen was excellent and really encouraged me to learn more about the process. |
|||
|
|||
今までにビールを作ったことが一度だけあります。その時は友達と一緒にStewart Brewing Craft Beer Kitchen(スチュワート・ブルーイング・クラフトビール・キッチン)でビール醸造者からミルクスタウトの作り方を学びました。それはとても面白い経験だったので、ビールの作り方についてもっと学ぶように励まされました。 |
|||
|
|||
As it stands, in a room which was formerly a garage but hasn't quite finished it's conversion into anything resembling usable, sits a [Grainfather All Grain Brewing System](https://www.grainfather.com/) along with a conical fermenter, a large urn and various other brewing paraphernalia. All as of yet, still boxed and awaiting their inaugural run. I have a few other pieces to "invest" in before I'm ready to start brewing but the main barrier has been the unfinished room.. which will hopefully be finished soon. |
|||
|
|||
残念なことに、「Grainfather(グレーンファーザー）」というビール醸造機や円すい発酵槽、その他のいろいろな醸造の機器を買ったにもかかわらず、私はまだビールを醸造していません。できれば近いうちに最初のビールを作りたいです。 |
|||
|
|||
I've been a member of the [Beer52](https://www.beer52.com) craft beer club since a month after its inception (_I think_) and have sampled many craft beers from around the planet and each month I learn a little more. I initially started a paper journal, just recording the hop choices and tasting notes for the beers I was getting delivered, however that soon became tiresome and primarily delayed the drinking of the beer so I stopped. I still have a lot of learning to do and am hoping that recording my drinking and eventually brewing experiences will help me in this process. |
|||
|
|||
「Beer52]というクラフトビールクラブが始まってすぐの頃から、私は会員です。毎月いろいろな世界中からの新しいビールを試飲する度に、ビールについてもう少し深く学べています。でも、まだまだ勉強するつもりです。 |
|||
|
|||
 |
|||
|
|||
So, the purpose of this blog will be primarily self-education and note-taking but I hope that it provides some interesting reading for fellow enthusiasts who like myself don't necessarily have all the jargon knowledge of more seasoned professionals. |
|||
|
|||
このブログでビールの試飲や醸造の記録を書きながら、ビールの作り方について学んでいこうと思っています。このブログで他の方と興味を共有できれば幸いです。 |
|||
|
|||
I'm categorising this journal under _brewshido_.. Bushido is the Japanese term for "way of the warrior" and I previously had a blog called bushidodreams (which can be found on this site).. so I'm coining the term _brewshido_ to mean the way of the brewer. |
|||
|
|||
_I acknowledge that neither my brewing nor my Japanese language knowledge are of a sufficient level to warrant the brashness of coining a new word in my second language but it is what it is!_ |
|||
|
|||
ところでビール醸造以外には、武士道と日本の歴史に興味があります。それで、Brewは「醸造」という意味なのです。でも私の日本語もビール醸造のレベルはまだまだですが、侍もビールも好きなので、ブログの名前をbrewshidoにしました。 |
|||
@ -1,141 +0,0 @@ |
|||
--- |
|||
title: "Chinook What I Made" |
|||
date: 2020-02-13T23:56:00+01:00 |
|||
Description: "Notes from brew day #3" |
|||
Blog: ["Brewshido"] |
|||
Categories: ["Homebrewing","自家製ビール","Craft Beer","クラフトビール"] |
|||
Tags: ["brewstore", "grainfather", "グレーンファーザー","NEIPA","hop stand","late shift","fierce beer"] |
|||
Image: /images/chinook-what-i-made/img_20200126_135830.jpg |
|||
DisableComments: false |
|||
--- |
|||
After the [abject failure of my previous brew](/post/crying-tears-of-hazy-gold) determination was high. Mistakes would not be made, at least not with regards to the most important stage of the process, sanitisation! |
|||
|
|||
This was my first brew day with assistance, in the form of my dad, and having someone to "teach" really helped my focus throughout the day, not only were there considerably less mistakes there were also notable improvements throughout the steps compared to previous attempts. |
|||
|
|||
#### TL:DR I DIDN'T DESTROY THIS BEER!! WOOHOOO!! |
|||
|
|||
In my [summary of brew day ichi-ban](/post/and-so-it-begins) I described in detail (my understanding) of the steps involved so I'll not go into as much detail this time but will attempt to follow the same structure. |
|||
|
|||
#### The Beer Kit |
|||
|
|||
 |
|||
|
|||
The *[New England IPA 19L All Grain Beer Kit](https://www.brewstore.co.uk/19-l-new-england-ipa-all-grain-beer-kit)* was the same beer kit that I had used in the previous disastrous brew however due to issues with online payment I had to visit the [brew store](https://www.brewstore.co.uk/) to pick up, and the hops that were included in this kit were different from the previous kit. I'm a novice so I didn't question this at the time but at various times during the brew I considered that perhaps I had been given the *wrong* hops. |
|||
|
|||
 |
|||
|
|||
In the kit this time was a bag of mixed grains, 200 grams of *Chinook* hops as well as a sachet of *White Labs WLP066 London Fog Ale Yeast* (liquid). |
|||
|
|||
As previously ingredients were accompanied by some general brewing tips and the ... |
|||
|
|||
#### Brew Day Sheet |
|||
|
|||
This very handy two page guide split the brew into its composite stages and provided target temperatures, gravity readings and volumes as well as space for recording timings and measurements throughout the day. It was very useful and despite my occasional flapping it kept me pretty much on track. The composite parts of the sheet will be incorporated below in the stage sections. |
|||
|
|||
This was actually missing from the kit on this occasion but I had the previous brew's sheet and I noted all of the important steps and numbers in a notebook. |
|||
|
|||
#### Stage 0 - Prep! |
|||
|
|||
Not only did I clean and sanitise EVERYTHING immediately after the last brew, on the night before this one, I went through the whole process again! This time however, on the advice of a [retired chemist](https://mastodon.social/users/wizardofosmium) on [the fediverse](/post/the-fediverse) I noted every measurement and each step down. |
|||
|
|||
 |
|||
|
|||
In addition, to directly address the issue that wrecked my last beer, I bought accurate measuring devices in the form of a glass pipette set which enabled me to measure exactly 2ml of the 'no rinse' sanitiser in with 1 litre of water for the spray bottle. |
|||
|
|||
 |
|||
|
|||
I also endeavoured to spray less enthusiastically, or rather less intensely.. enthusiasm levels were high regardless of the somewhat tedious task at hand. The extra focus on preparation definitely provided a solid foundation for the next day's activities! |
|||
|
|||
#### Stage 1 - Striking & Mashing |
|||
Another lesson learned from the previous brew was to heat the strike water as soon as I rolled out of bed, this meant that by the time the brew started the water was already at the correct temperature.. enabling me to spend just short of an extra hour with my daughter before I started in earnest. |
|||
|
|||
Previously, I had noted that the thermometer probe wasn't secure and had slipped out during the last brew.. this was firmly taped to the unit this time and didn't budge through the whole day. |
|||
|
|||
With the mash, we actually actively mashed and stirred the grain in for the entire duration of the water dropping from 76°C to 66°C.. this was tough work, I'm not entirely sure how long it took but my dad and I took turns, and in actively working the mash for the whole time we not only reduced the cool down time considerably but also released more sugars into the wort than previously. |
|||
|
|||
This stage was absolutely nailed, a marked improvement on previous attempts, and the benefits of having a brew buddy became very apparent, very quickly. |
|||
|
|||
#### Stage 2 - Lautering & Sparging |
|||
|
|||
According to the brew sheet for this NEIPA recipe, approximately 8-10 litres of 76°C water should be rinsed or *sparged* through the spent grains in order to hit a pre-boil wort volume of 25 litres.. I needed 12L which was the same as last time. |
|||
|
|||
It could be that there are improvements that could be made to this part of the process so I'll maybe agitate the grain a bit more during this process to release more sugars and move the sparge water through, I suspect that of the 12L poured in a fair amount was still sitting within the grain cake. |
|||
|
|||
#### Stage 3 - Boiling |
|||
|
|||
Somewhat excitingly (likely to a very limited audience only) there was some proper protein build up as the wort hit the boiling point. I had experienced this during a trip to the [Stewart Brewing Craft Beer Kitchen](https://www.stewartbrewing.co.uk/craft-beer-kitchen/) with friends a few years previous and was a little confused as to why it hadn't happened on my ealier brews.. but it seems that our increased activity during the mash stage was the reason. What nice, natural, confirmatory feedback on our enhanced efforts! |
|||
|
|||
With the confidence that the thermometer probe was securely seated and accurately measuring temperature, after breaking up the protein with a paddle, the rest of the boil went very smoothly. |
|||
|
|||
We filled the time reading brewing books and chatting about my future brewing plans in Japan. As my dad was driving later in the day we weren't drinking.. my next brew buddy is a non-driver! |
|||
|
|||
 |
|||
|
|||
#### Stage 4 - Hop Additions |
|||
|
|||
There was an initial 50g of the *Chinook* hops as a 10 minute (from end of boil) addition, then the *hop stand* which involves lowering the temperature post-boil to 70-80°C, adding in another 50g of the hops and holding the hot *wort* at that temperature for 30-45 minutes, we went for 40 minutes at 76°C since 76 appears to be a special number. |
|||
|
|||
So far the *hop stand* seems to be a specific step for this style of beer and must contribute to the hazy or rather juicy look of the final beer. |
|||
|
|||
 |
|||
|
|||
Whilst we were reading in the previous stage, I had spotted a note attached to a recipe from [BrewDog's DIY DOG 2017](https://www.brewdog.com/blog/diy-dog-2017/) which stated that they get the best results when dry -hopping for 5 days (rather than 4 recommended elsewhere) at 14°C. It wasn't overly clear if they meant specifically with the recipe the note was attached to or as a general rule of thumb but with my newly acquired chiller, I gave it a go. |
|||
|
|||
Hop schedule for this brew was: |
|||
|
|||
* 50g of hops at 10 minutes (50 minutes into boil) |
|||
* 50g of hops post-boil in a hop stand |
|||
* 100g of dry hops post-fermentation for 5 days at 14°C |
|||
|
|||
#### Stage 5 - Cooling |
|||
|
|||
Post-brew it occurred to me that I missed a step which could logically fit in this stage, I briefly mentioned it in [my first brew post](/post/and-so-it-begins) and will remember to do it next time. |
|||
|
|||
The whirlpooling stage is primarily meant to separate *trub* (errant hops or grains which managed to escape the grain basket post-sparge) from the wort by dragging them down to the bottom of the .. boiling vessel.. but also the act of a 5 minute (yup!) whirlpool will also cool the wort a little, albeit slower than the cooling coil that comes with the *Grainfather*. |
|||
|
|||
We cooled the wort to 18°C and transferred into the fermenter at a higher elevation than before in previously in order to increase the oxygen in the wort for the hungry yeast. |
|||
|
|||
#### Stage 6 - Fermenting |
|||
|
|||
The target original gravity (OG) for this beer is 1.063 which on my previous disastrous brew I hit on the nose, this time though I missed it by a little, landing on 1.059.. There was about an extra litre of of pre-boil wort and it seems that this was extra sparge water resulting in a very slightly weaker final wort. |
|||
|
|||
 |
|||
|
|||
The fermentation of this beer was the most active (noisiest) so far.. even into day 8 there was still the occasional bubble through the airlock. However, as previously experienced the active yeast increased the temperature of the wort in the fermenter, and it occurred to me finally that I had forgotten to buy a cooling system, so I ordered an inexpensive one and took immediate action whilst awaiting its delivery. |
|||
|
|||
On noticing the temperature creeping up to almost 23°C, my wife and I carefully moved the fermenter on to a worktop in the utility room, opened the window to a Scottish winter and watched the temperature drop. The fermenter has a heating element so whenever it drops below the target temperature it slowly recovers.. so whilst there were a few periods where the temperature was slightly below 18°C, they were brief and the heat never exceeded 20°C for the remainder of the fermentation window. |
|||
|
|||
During the fermentation, I noted that the yeast dump deposits were a bit smaller than previously but this made sense because the yeast was .. expiring.. at a slower rate. Where the fermenter previously went dormant after 4 days it stretched out twice as long this time before fermentation seemed to be done. |
|||
|
|||
Again though, my final gravity (FG) reading was higher than the target and this time I'm not sure why. It was closer to the FG this time (1.026) than last time (1.033) so some progress is being made. Perhaps I need to look into the pH levels of the water or perhaps it will improve upon the introduction of a 5 minute whirlpool.. This is a challenge I feel will take a bit of time to understand. |
|||
|
|||
As a result of missing both OG and FG targets my final ABV (according to the [Brewer's Friend Calculator](https://www.brewersfriend.com/abv-calculator/)) is 4.33% had I hit my OG this would have been 4.86%. |
|||
|
|||
For reference the following were my volume and gravity targets and final gravity (FG) results: |
|||
|
|||
* Desired Volume: 19L |
|||
* Actual Volume: 19L |
|||
* Desired OG: 1.063 |
|||
* Actual OG: 1.059 |
|||
* Desired FG: 1.013 |
|||
* Actual FG: 1.026 |
|||
* Desired ABV: 6.6% |
|||
* Actual ABV: 4.3% |
|||
|
|||
#### Stage 7: Kegging & Carbonising |
|||
|
|||
I force-carbonated the beer for 2 days at 30PSI, brought it down to 12PSI for another 24 hours, hooked it up to the tap and lowered the pressure to 10PSI. However, as I had noticed on my first brew this resulted in a slightly under-carbonated beer so I cranked up the PSI to 30 for another 24 hours. |
|||
|
|||
#### Stage 8: Drinking |
|||
|
|||
Vindication you taste awesome! OK, dialling it down a bit.. this is a tasty beer, I would be happy if I ordered this in a pub and would enjoy every last drop. I wouldn't necessarily rush back to order it again though but that's an issue of personal taste.. |
|||
|
|||
I like my NEIPAs to be almost fruit juice like, certain hops give off more fruity qualities that I think are better suited to a NEIPA than others. *Chinook* has some of those qualities it seems but also some resin-y qualities, this is fine, [Fierce Beer](https://www.fiercebeer.com) make a very nice juicy beer which is quite resin-y ([Late Shift](https://www.fiercebeer.com/item/115/Late-Shift.html)) but it just isn't my personal preference. |
|||
|
|||
 |
|||
|
|||
As an exercise in brewing this was a fantastic experience and my confidence and enthusiasm has been restored. |
|||
|
|||
Will I drink this beer? Of course, with pride and I'll make it again, but next time I'll use *El Dorado* hops and see if they taste like I think they would taste without the accidental inclusion of sanitising chemicals. |
|||
|
|||
For the next brew, I have a friend joining me and whilst we enjoy this NEIPA, we'll be having a crack at an Imperial Stout.. arguably my favourite type of beer! |
|||
@ -1,25 +0,0 @@ |
|||
--- |
|||
title: "Posts" |
|||
description: "Hugo, the world’s fastest framework for building websites" |
|||
date: "2018-02-11" |
|||
aliases: ["about-us","about-hugo","contact"] |
|||
author: "Hugo Authors" |
|||
--- |
|||
|
|||
Written in Go, Hugo is an open source static site generator available under the [Apache Licence 2.0.](https://github.com/gohugoio/hugo/blob/master/LICENSE) Hugo supports TOML, YAML and JSON data file types, Markdown and HTML content files and uses shortcodes to add rich content. Other notable features are taxonomies, multilingual mode, image processing, custom output formats, HTML/CSS/JS minification and support for Sass SCSS workflows. |
|||
|
|||
Hugo makes use of a variety of open source projects including: |
|||
|
|||
* https://github.com/russross/blackfriday |
|||
* https://github.com/alecthomas/chroma |
|||
* https://github.com/muesli/smartcrop |
|||
* https://github.com/spf13/cobra |
|||
* https://github.com/spf13/viper |
|||
|
|||
Hugo is ideal for blogs, corporate websites, creative portfolios, online magazines, single page applications or even a website with thousands of pages. |
|||
|
|||
Hugo is for people who want to hand code their own website without worrying about setting up complicated runtimes, dependencies and databases. |
|||
|
|||
Websites built with Hugo are extremelly fast, secure and can be deployed anywhere including, AWS, GitHub Pages, Heroku, Netlify and any other hosting provider. |
|||
|
|||
Learn more and contribute on [GitHub](https://github.com/gohugoio). |
|||
@ -1,25 +0,0 @@ |
|||
--- |
|||
title: "Posts" |
|||
description: "Hugo, the world’s fastest framework for building websites" |
|||
date: "2018-02-11" |
|||
aliases: ["about-us","about-hugo","contact"] |
|||
author: "Hugo Authors" |
|||
--- |
|||
日本語 |
|||
Written in Go, Hugo is an open source static site generator available under the [Apache Licence 2.0.](https://github.com/gohugoio/hugo/blob/master/LICENSE) Hugo supports TOML, YAML and JSON data file types, Markdown and HTML content files and uses shortcodes to add rich content. Other notable features are taxonomies, multilingual mode, image processing, custom output formats, HTML/CSS/JS minification and support for Sass SCSS workflows. |
|||
|
|||
Hugo makes use of a variety of open source projects including: |
|||
|
|||
* https://github.com/russross/blackfriday |
|||
* https://github.com/alecthomas/chroma |
|||
* https://github.com/muesli/smartcrop |
|||
* https://github.com/spf13/cobra |
|||
* https://github.com/spf13/viper |
|||
|
|||
Hugo is ideal for blogs, corporate websites, creative portfolios, online magazines, single page applications or even a website with thousands of pages. |
|||
|
|||
Hugo is for people who want to hand code their own website without worrying about setting up complicated runtimes, dependencies and databases. |
|||
|
|||
Websites built with Hugo are extremelly fast, secure and can be deployed anywhere including, AWS, GitHub Pages, Heroku, Netlify and any other hosting provider. |
|||
|
|||
Learn more and contribute on [GitHub](https://github.com/gohugoio). |
|||
@ -1,5 +1,19 @@ |
|||
|
|||
</body> |
|||
|
|||
<script> |
|||
// This code is only used to remember theme selection between page loads |
|||
const themeSwitch = document.querySelector('.theme-switch'); |
|||
themeSwitch.checked = localStorage.getItem('switchedTheme') === 'true'; |
|||
|
|||
themeSwitch.addEventListener('change', function(e) { |
|||
if (e.currentTarget.checked === true) { |
|||
// Add item to localstorage |
|||
localStorage.setItem('switchedTheme', 'true'); |
|||
} else { |
|||
// Remove item if theme is switched back to normal |
|||
localStorage.removeItem('switchedTheme'); |
|||
} |
|||
}); |
|||
</script> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,815 @@ |
|||
@charset "UTF-8"; |
|||
@import url('https://rsms.me/inter/inter.css'); |
|||
html { font-family: 'Inter', sans-serif; height:100%;} |
|||
@supports (font-variation-settings: normal) { |
|||
html { font-family: 'Inter var', sans-serif; } |
|||
} |
|||
:root { |
|||
--third-color:#0065BF; |
|||
--dark-text:#f8f8f8; |
|||
--dark-bg:#2b2b2b; |
|||
--light-text:#2b2b2b; |
|||
--light-bg:#f8f8f8; |
|||
|
|||
--text-color: var(--dark-text); |
|||
--bg-color: var(--dark-bg); |
|||
} |
|||
|
|||
/* Switched mode */ |
|||
.theme-switch:checked ~ #page { |
|||
--text-color:var(--light-text); |
|||
--bg-color:var(--light-bg); |
|||
} |
|||
.theme-switch{ |
|||
display:none; |
|||
} |
|||
#page { |
|||
background: var(--bg-color); |
|||
color:var(--text-color); |
|||
} |
|||
html { |
|||
background: var(--bg-color); |
|||
-webkit-font-smoothing: antialiased; |
|||
} |
|||
|
|||
body { |
|||
color: var(--text-color); |
|||
font-size: 15px; |
|||
width: 100%; |
|||
margin: 0 auto 30px auto; |
|||
} |
|||
|
|||
p { |
|||
line-height: 1.9em; |
|||
font-weight: 400; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
a { |
|||
text-decoration: none; |
|||
} |
|||
|
|||
img { |
|||
opacity: .75; |
|||
transition: opacity .5s ease-in-out; |
|||
} |
|||
img:hover { |
|||
opacity: 1 |
|||
} |
|||
.category { |
|||
padding: 4px 6px; |
|||
border-radius: 3px; |
|||
color: var(--bg-color); |
|||
background-color: var(--text-color); |
|||
border: 1px solid var(--bg-color); |
|||
} |
|||
|
|||
.blog { |
|||
padding: 4px 6px; |
|||
border-radius: 3px; |
|||
color: var(--text-color); |
|||
background-color: var(--third-color); |
|||
border: 1px solid var(--text-color); |
|||
} |
|||
|
|||
.tag::before { |
|||
content: "#"; |
|||
opacity: .5; |
|||
} |
|||
|
|||
.tag, .category { |
|||
display: inline-block; |
|||
font-size: 15px; |
|||
line-height: 1; |
|||
margin: 5px 8px 5px 0; |
|||
} |
|||
|
|||
pre { |
|||
background-color: #f9f9fd; |
|||
padding: 5px; |
|||
} |
|||
|
|||
.info i{ |
|||
opacity: 0.5; |
|||
margin-right: 5px; |
|||
} |
|||
|
|||
a:link, a:visited { |
|||
opacity: 1; |
|||
-webkit-transition: all .15s linear; |
|||
-moz-transition: all .15s linear; |
|||
-o-transition: all .15s linear; |
|||
-ms-transition: all .15s linear; |
|||
transition: all .15s linear; |
|||
color: var(--color); |
|||
} |
|||
|
|||
a:hover, a:active { |
|||
color: var(--third-color); |
|||
} |
|||
|
|||
/*basic styles ends*/ |
|||
/*animation starts*/ |
|||
.animated { |
|||
-webkit-animation-fill-mode: both; |
|||
-moz-animation-fill-mode: both; |
|||
-ms-animation-fill-mode: both; |
|||
-o-animation-fill-mode: both; |
|||
animation-fill-mode: both; |
|||
-webkit-animation-duration: 1s; |
|||
-moz-animation-duration: 1s; |
|||
-ms-animation-duration: 1s; |
|||
-o-animation-duration: 1s; |
|||
animation-duration: 1s; |
|||
} |
|||
|
|||
.animated.hinge { |
|||
-webkit-animation-duration: 1s; |
|||
-moz-animation-duration: 1s; |
|||
-ms-animation-duration: 1s; |
|||
-o-animation-duration: 1s; |
|||
animation-duration: 1s; |
|||
} |
|||
|
|||
@-webkit-keyframes fadeInDown { |
|||
0% { |
|||
opacity: 0; |
|||
-webkit-transform: translateY(-20px); |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
-webkit-transform: translateY(0); |
|||
} |
|||
} |
|||
@-moz-keyframes fadeInDown { |
|||
0% { |
|||
opacity: 0; |
|||
-moz-transform: translateY(-20px); |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
-moz-transform: translateY(0); |
|||
} |
|||
} |
|||
@-o-keyframes fadeInDown { |
|||
0% { |
|||
opacity: 0; |
|||
-o-transform: translateY(-20px); |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
-o-transform: translateY(0); |
|||
} |
|||
} |
|||
@keyframes fadeInDown { |
|||
0% { |
|||
opacity: 0; |
|||
transform: translateY(-20px); |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
transform: translateY(0); |
|||
} |
|||
} |
|||
.fadeInDown { |
|||
-webkit-animation-name: fadeInDown; |
|||
-moz-animation-name: fadeInDown; |
|||
-o-animation-name: fadeInDown; |
|||
animation-name: fadeInDown; |
|||
} |
|||
|
|||
/*animation ends*/ |
|||
.content { |
|||
height: auto; |
|||
float: right; |
|||
width: 70%; |
|||
margin-top: 60px; |
|||
} |
|||
|
|||
.page-top { |
|||
width: 70%; |
|||
position: fixed; |
|||
right: 0; |
|||
z-index: 3; |
|||
background-color: var(--bg-color); |
|||
height: 60px; |
|||
border-bottom: 1px solid #f8f8f8; |
|||
} |
|||
.page-top .nav { |
|||
width:90%; |
|||
list-style: none; |
|||
padding: 18px 30px; |
|||
float: left; |
|||
font-size: 14px; |
|||
} |
|||
.page-top .nav li, .page-top .language-selector li { |
|||
position: relative; |
|||
display: initial; |
|||
padding-right: 20px; |
|||
} |
|||
.page-top .nav a { |
|||
color: var(--text-color); |
|||
} |
|||
.page-top .nav a:hover { |
|||
color: var(--third-color); |
|||
} |
|||
.page-top .nav a.current { |
|||
color: var(--text-color); |
|||
padding-bottom: 22px; |
|||
border-bottom: 1px solid var(--text-color); |
|||
} |
|||
.page-top .information{ |
|||
float: right; |
|||
padding-top: 12px; |
|||
padding-right: 20px; |
|||
} |
|||
.page-top .information .avatar { |
|||
float: right; |
|||
} |
|||
.page-top .information .avatar img { |
|||
width: 48px; |
|||
height: 48px; |
|||
border-radius: 300px; |
|||
} |
|||
.page-top .information .back_btn { |
|||
float: left; |
|||
padding-top: 5px; |
|||
margin-right: -10px; |
|||
} |
|||
.page-top .information .back_btn li { |
|||
display: initial; |
|||
padding-right: 40px; |
|||
} |
|||
.page-top .language-selector { |
|||
float:right; |
|||
position:relative; |
|||
top:-5px; |
|||
padding-bottom:22px; |
|||
} |
|||
.page-top .language-selector img{ |
|||
display:inline; |
|||
position:fixed; |
|||
margin:0; |
|||
padding:10px; |
|||
top:0; |
|||
opacity:1; |
|||
|
|||
} |
|||
.page-top .language-selector ul{ |
|||
display:inline; |
|||
list-style:none; |
|||
position:relative; |
|||
margin-top:5px; |
|||
} |
|||
.page-top .language-selector li{ |
|||
vertical-align:top; |
|||
margin:10px; |
|||
} |
|||
|
|||
.sidebar { |
|||
width: 30%; |
|||
-webkit-background-size: cover; |
|||
background-size: cover; |
|||
background-color: var(--bg-color); |
|||
height: 100%; |
|||
transition: 0.8s; |
|||
top: 0; |
|||
left: 0; |
|||
position: fixed; |
|||
z-index: 4; |
|||
border-right: 1px solid var(--text-color); |
|||
} |
|||
.sidebar #logo{ |
|||
max-width: 300px; |
|||
width: 80%; |
|||
margin: 0 auto; |
|||
display:block; |
|||
padding: 10px; |
|||
} |
|||
.sidebar .logo-title { |
|||
text-align: center; |
|||
padding-top: 240px; |
|||
} |
|||
.sidebar .logo-title .description { |
|||
font-size: 14px; |
|||
width: 60%; |
|||
margin: 0 auto; |
|||
color: var(--text-color); |
|||
padding-bottom:10px; |
|||
} |
|||
.sidebar .logo-title .logo { |
|||
margin: 0 auto; |
|||
} |
|||
.sidebar .logo-title .title h3 { |
|||
text-transform: uppercase; |
|||
font-size: 2rem; |
|||
font-weight: bold; |
|||
letter-spacing: 2px; |
|||
line-height: 1; |
|||
margin: 1em; |
|||
} |
|||
.sidebar .logo-title .title a { |
|||
text-decoration: none; |
|||
color: var(--text-color); |
|||
font-size: 2rem; |
|||
font-weight: bold; |
|||
} |
|||
.sidebar .social-links { |
|||
list-style: none; |
|||
padding: 0; |
|||
font-size: 14px; |
|||
text-align: center; |
|||
} |
|||
.sidebar .social-links i { |
|||
margin-right: 3px; |
|||
} |
|||
.sidebar .social-links li { |
|||
display: inline; |
|||
padding: 0 4px; |
|||
line-height: 0; |
|||
} |
|||
.sidebar .social-links a { |
|||
color: var(--text-color); |
|||
} |
|||
.sidebar .social-links a:hover { |
|||
color: var(--third-color); |
|||
} |
|||
|
|||
.post { |
|||
background-color: var(--bg-color); |
|||
margin: 30px; |
|||
width:80%; |
|||
padding-left:20px; |
|||
} |
|||
.post .banner{ |
|||
width:100%; |
|||
max-height: 300px; |
|||
object-fit:scale-down; |
|||
object-position:top; |
|||
} |
|||
.post .post-title h1 { |
|||
text-transform: uppercase; |
|||
font-size: 30px; |
|||
letter-spacing: 5px; |
|||
line-height: 1; |
|||
} |
|||
.post .post-title h2 { |
|||
text-transform: uppercase; |
|||
letter-spacing: 1px; |
|||
font-size: 28px; |
|||
line-height: 1; |
|||
font-weight: 600; |
|||
color: var(--text-color); |
|||
} |
|||
.post .post-title h3 { |
|||
text-transform: uppercase; |
|||
letter-spacing: 1px; |
|||
line-height: 1; |
|||
font-weight: 600; |
|||
color: var(--text-color); |
|||
font-size: 22px; |
|||
margin: 0; |
|||
} |
|||
.post .post-title a { |
|||
text-decoration: none; |
|||
letter-spacing: 1px; |
|||
color: var(--text-color); |
|||
} |
|||
.post .post-title a:hover { |
|||
text-decoration: underline; |
|||
} |
|||
.post .post-content a { |
|||
text-decoration: none; |
|||
color: var(--third-color); |
|||
} |
|||
|
|||
.post .post-content table { |
|||
border-collapse:collapse; |
|||
} |
|||
|
|||
.post .post-content table,.post .post-content table td, .post .post-content table th{ |
|||
border: 1px dashed var(--text-color); |
|||
} |
|||
|
|||
.post .post-content table tr:nth-child(even) { |
|||
background-color: #f2f2f2; |
|||
} |
|||
.post .post-content table td, .post .post-content table th{ |
|||
padding: 15px |
|||
} |
|||
.post .post-content a:hover { |
|||
color: var(--third-color); |
|||
} |
|||
.post .post-content h3 { |
|||
color: var(--text-color); |
|||
font-size: 22px; |
|||
font-weight: 600; |
|||
} |
|||
.post .post-content h4 { |
|||
color: var(--text-color) |
|||
font-size: 16px; |
|||
} |
|||
.post .post-content img { |
|||
max-width: 60%; |
|||
text-align: center; |
|||
margin: 0 auto; |
|||
display:block; |
|||
padding:10px; |
|||
} |
|||
.post .post-footer { |
|||
padding: 0 0 30px 0; |
|||
border-bottom: 1px solid var(--text-color); |
|||
} |
|||
.post .post-footer .meta { |
|||
max-width: 100%; |
|||
height: 25px; |
|||
color: var(--text-color); |
|||
} |
|||
.post .post-footer .meta .info { |
|||
float: left; |
|||
font-size: 12px; |
|||
margin-bottom: 1em; |
|||
} |
|||
.post .post-footer .info .separator a { |
|||
margin-right: 0.2em; |
|||
} |
|||
.post .post-footer .meta .info .date { |
|||
margin-right: 10px; |
|||
} |
|||
.info { |
|||
margin: 1em; |
|||
} |
|||
.post .post-footer .meta a { |
|||
text-decoration: none; |
|||
color: var(--text-color) |
|||
padding-right: 10px; |
|||
} |
|||
.post .post-footer .meta a:hover { |
|||
color: var(--third-color); |
|||
} |
|||
.post .post-footer .blog{ |
|||
color: var(--text-color); |
|||
} |
|||
.post .post-footer .blog:hover{ |
|||
color: var(--first-color); |
|||
} |
|||
.post .post-footer .meta i { |
|||
margin-right: 6px; |
|||
} |
|||
.post .post-footer .tags { |
|||
padding-bottom: 15px; |
|||
font-size: 13px; |
|||
} |
|||
.post .post-footer .tags ul { |
|||
list-style-type: none; |
|||
display: inline; |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
.post .post-footer .tags ul li { |
|||
list-style-type: none; |
|||
margin: 0; |
|||
padding-right: 5px; |
|||
display: inline; |
|||
} |
|||
.post .post-footer .tags a { |
|||
text-decoration: none; |
|||
color: var(--text-color); |
|||
font-weight: 400; |
|||
} |
|||
.post .post-footer .tags a:hover { |
|||
text-decoration: none; |
|||
} |
|||
|
|||
.pagination { |
|||
margin: 30px; |
|||
padding: 0px 0 56px 0; |
|||
border-bottom: 1px solid var(--text-color); |
|||
} |
|||
.pagination ul { |
|||
list-style: none; |
|||
margin: 0; |
|||
padding: 0; |
|||
height: 13px; |
|||
} |
|||
.pagination ul li { |
|||
margin: 0 2px 0 2px; |
|||
display: inline; |
|||
line-height: 1; |
|||
} |
|||
.pagination ul li a { |
|||
text-decoration: none; |
|||
} |
|||
.pagination .pre { |
|||
float: left; |
|||
} |
|||
.pagination .next { |
|||
float: right; |
|||
} |
|||
|
|||
.like-reblog-buttons { |
|||
float: right; |
|||
} |
|||
|
|||
.like-button { |
|||
float: right; |
|||
padding: 0 0 0 10px; |
|||
} |
|||
|
|||
.reblog-button { |
|||
float: right; |
|||
padding: 0; |
|||
} |
|||
|
|||
#install-btn { |
|||
position: fixed; |
|||
bottom: 0px; |
|||
right: 6px; |
|||
} |
|||
|
|||
.footer { |
|||
clear: both; |
|||
text-align: center; |
|||
font-size: 14px; |
|||
margin: 0 auto; |
|||
bottom: 0; |
|||
position: absolute; |
|||
width: 100%; |
|||
padding-bottom: 20px; |
|||
background: var(--bg-color); |
|||
} |
|||
|
|||
.footer a { |
|||
color: var(--text-color); |
|||
} |
|||
.footer a:hover { |
|||
color: var(--third-color); |
|||
} |
|||
|
|||
/*for archive*/ |
|||
.archive { |
|||
width: 80%; |
|||
} |
|||
.list-title{ |
|||
margin:30px; |
|||
font-size:30px; |
|||
font-weight:bold; |
|||
color: var(--text-color) |
|||
} |
|||
|
|||
.list-title i{ |
|||
font-size:22px; |
|||
vertical-align:middle; |
|||
color: var(--text-color) |
|||
} |
|||
|
|||
.list-with-title { |
|||
font-size: 14px; |
|||
margin: 30px; |
|||
padding: 0; |
|||
} |
|||
.list-with-title li { |
|||
list-style-type: none; |
|||
padding: 0; |
|||
} |
|||
.list-with-title .listing-title { |
|||
font-size: 24px; |
|||
color: var(--text-color); |
|||
font-weight: 600; |
|||
line-height: 2.2em; |
|||
} |
|||
.list-with-title .listing { |
|||
padding: 0; |
|||
} |
|||
.list-with-title .listing .listing-post { |
|||
padding-bottom: 5px; |
|||
} |
|||
.list-with-title .listing .listing-post .post-time { |
|||
float: right; |
|||
color: var(--text-color); |
|||
} |
|||
.list-with-title .listing .listing-post a { |
|||
color: var(--text-color); |
|||
} |
|||
.list-with-title .listing .listing-post a:hover { |
|||
color: var(--third-color); |
|||
} |
|||
|
|||
/* share */ |
|||
.share { |
|||
margin: 0px 30px; |
|||
display: inline-flex; |
|||
} |
|||
|
|||
/* about */ |
|||
.about { |
|||
margin: 30px; |
|||
width:80%; |
|||
} |
|||
.about h3 { |
|||
font-size: 22px; |
|||
} |
|||
|
|||
/* links*/ |
|||
.links { |
|||
margin: 30px; |
|||
} |
|||
.links h3 { |
|||
font-size: 22px; |
|||
} |
|||
.links a { |
|||
cursor: pointer; |
|||
} |
|||
|
|||
/* Comments */ |
|||
.comment-count { |
|||
color: #666; |
|||
} |
|||
|
|||
.tab-community { |
|||
color: #666; |
|||
} |
|||
|
|||
.readmore { |
|||
font-size: 14px; |
|||
text-align:left; |
|||
padding:0; |
|||
text-decoration:underline; |
|||
} |
|||
|
|||
.back-button { |
|||
padding-top: 30px; |
|||
max-width: 100px; |
|||
padding-left: 40px; |
|||
float: left; |
|||
} |
|||
|
|||
/* Buttons */ |
|||
a.btn { |
|||
color: #868686; |
|||
font-weight: 400; |
|||
} |
|||
|
|||
.btn { |
|||
display: inline-block; |
|||
position: relative; |
|||
outline: 0; |
|||
color: rgba(0, 0, 0, 0.44); |
|||
background: transparent; |
|||
font-size: 14px; |
|||
text-align: center; |
|||
text-decoration: none; |
|||
cursor: pointer; |
|||
border: 1px solid rgba(0, 0, 0, 0.15); |
|||
white-space: nowrap; |
|||
font-weight: 400; |
|||
font-style: normal; |
|||
border-radius: 999em; |
|||
} |
|||
|
|||
.btn:hover { |
|||
display: inline-block; |
|||
position: relative; |
|||
outline: 0px; |
|||
color: #464545; |
|||
background: transparent; |
|||
font-size: 14px; |
|||
text-align: center; |
|||
text-decoration: none; |
|||
cursor: pointer; |
|||
border: 1px solid #464545; |
|||
white-space: nowrap; |
|||
font-weight: 400; |
|||
font-style: normal; |
|||
border-radius: 999em; |
|||
} |
|||
|
|||
[role="back"] { |
|||
padding: 0.5em 1.25em; |
|||
line-height: 1.666em; |
|||
} |
|||
|
|||
[role="home"] { |
|||
padding: 0.5em 1.25em; |
|||
line-height: 1.666em; |
|||
} |
|||
|
|||
[role="navigation"] { |
|||
padding: 0.5em 1.25em; |
|||
line-height: 1.666em; |
|||
} |
|||
|
|||
[role="tags"] { |
|||
padding: 6px 12px; |
|||
} |
|||
|
|||
/* Menu */ |
|||
.menu { |
|||
float: right; |
|||
padding-top: 30px; |
|||
} |
|||
.menu .btn-down { |
|||
margin: 0px; |
|||
} |
|||
.menu .btn-down li { |
|||
list-style: none; |
|||
width: 100px; |
|||
} |
|||
.menu .btn-down li a { |
|||
display: inline-block; |
|||
position: relative; |
|||
padding: 0.5em 1.25em; |
|||
outline: 0; |
|||
color: rgba(0, 0, 0, 0.44); |
|||
background: transparent; |
|||
font-size: 14px; |
|||
text-align: center; |
|||
text-decoration: none; |
|||
cursor: pointer; |
|||
border: 1px solid rgba(0, 0, 0, 0.15); |
|||
white-space: nowrap; |
|||
font-weight: 400; |
|||
font-style: normal; |
|||
border-radius: 999em; |
|||
margin-top: 5px; |
|||
} |
|||
.menu .btn-down li a:hover { |
|||
position: relative; |
|||
padding: 0.5em 1.25em; |
|||
outline: 0; |
|||
color: #fff; |
|||
background: #3CBD10; |
|||
font-size: 14px; |
|||
text-align: center; |
|||
text-decoration: none; |
|||
cursor: pointer; |
|||
border: 1px solid rgba(0, 0, 0, 0.15); |
|||
white-space: nowrap; |
|||
font-weight: 400; |
|||
font-style: normal; |
|||
border-radius: 999em; |
|||
margin-top: 5px; |
|||
} |
|||
.menu .btn-down div { |
|||
position: absolute; |
|||
visibility: hidden; |
|||
width: 100px; |
|||
float: right; |
|||
} |
|||
|
|||
.page_404 { |
|||
text-align: center; |
|||
padding-top: 50px; |
|||
} |
|||
|
|||
.pixelfed_embed { |
|||
margin:0 auto; |
|||
display:block; |
|||
} |
|||
|
|||
@media screen and (max-width: 960px) { |
|||
.sidebar { |
|||
width: 100%; |
|||
position: absolute; |
|||
border-right: none; |
|||
z-index: 1; |
|||
} |
|||
.sidebar .logo-title { |
|||
padding-top: 100px; |
|||
} |
|||
.sidebar .logo-title .title img { |
|||
width: 70px; |
|||
} |
|||
.sidebar .logo-title .title h3 { |
|||
font-size: 20px; |
|||
} |
|||
.sidebar #logo{ |
|||
padding-top:80px; |
|||
} |
|||
.page-top { |
|||
width: 100%; |
|||
} |
|||
|
|||
.post-title h3 { |
|||
line-height: 1.6; |
|||
} |
|||
|
|||
.content { |
|||
margin-top: 680px; |
|||
width: 100%; |
|||
z-index: 2; |
|||
position: absolute; |
|||
} |
|||
|
|||
.about, .post{ |
|||
width:90%; |
|||
margin-left:15px; |
|||
} |
|||
.footer { |
|||
display: none; |
|||
} |
|||
|
|||
.share { |
|||
display: grid; |
|||
} |
|||
} |
|||
Reference in new issue