write about, start link colors

assets/sass/main.sass

@@ -11,6 +11,7 @@ $color-dark-mint: #5A6867
 $color-beige: #F5E9E4
 $color-light-brown: #D1C1BA
 $color-dark-brown: #52453F
+$color-light-dark-brown: #736159
 $color-white: #FFFFFF
 
 $slope-size: 6vw
@@ -21,6 +22,23 @@ body
   color: $color-dark-brown
   background: $color-mint
 
+a
+  color: $color-dark-brown
+  font: 100% $medium-font-stack
+  text-decoration: underline
+
+a:hover
+  color: $color-light-dark-brown
+
+a:link
+  color: $color-dark-brown
+
+a:active
+  color: $color-light-dark-brown
+
+a:visited
+  color: $color-light-dark-brown
+
 #website-title
   font-size: 3.5em
   margin-top: 30px
@@ -29,6 +47,14 @@ body
   font-weight: bold
   color: $color-white
 
+#blog-button
+  font-size: 150%
+  font-weight: bold
+  color: $color-dark-mint
+  margin-top: 30px
+  margin-right: 30px
+  float: right
+
 /* left top, right top, right bottom, left bottom
 .beige-content-block
   background: $color-beige
@@ -48,6 +74,12 @@ body
   padding-top: $slope-size + $extra-padding
   padding-bottom: $slope-size + $extra-padding
 
+#social-links
+  text-align: center
+  margin-top: 60px
+  i
+    margin: 0 20px
+
 #picture-holder
   clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - #{$slope-size}))
 
@@ -56,4 +88,4 @@ body
   background: $color-mint
   padding-top: $slope-size
   text-align: center
-  font: 100% $medium-font-stack
+  font: 100% $regular-font-stack

content/posts/about.md

@@ -1,8 +1,15 @@
 ---
 title: "About"
 date: 2019-08-18T17:14:38+02:00
-draft: true
+draft: false
 ---
 # About the site :gear:
 
-
+This is already the second version of my website and like the version before it was built with love and a cherry-picked selection of open source tools :raised_hands:  
+Although, this time I exchanged some of the tools just to try something new.  
+I decided to build the site using the popular [Hugo](http://gohugo.io/) to keep the code cleaner and to use [Sass](https://sass-lang.com/) conveniently, although a simple static HTML page would have done a good job as well.
+Responsiveness is done using the flex grid of [Picnic CSS](https://picnicss.com/), which was also responsible for the blog button in the upper right corner. I love its simplicity!  
+The main font I'm using, is called [Fira Sans](https://mozilla.github.io/Fira/) from Mozilla. The font I'm using for my name is called [Learning Curve](https://www.fontsquirrel.com/fonts/Learning-Curve-Pro), while the icons I used for my social links come from [Font Awesome](http://fortawesome.github.io/Font-Awesome/).  
+The page is hosted in the Netherlands on a [Debian](https://www.debian.org/) server from [Liteserver](https://liteserver.nl/) running [Freedombox](https://freedombox.org/), which gives me the power to host a bunch of other services for myself :smiling_face_with_hearts:  
+Those weird shapes are done using CSS' clip path with polygons, see the corresponding part of my CSS [here](https://github.com/fschrofner/schro.fi/blob/9eb9d4d11ab112a7a3715f2d51e32331b7d1d268/assets/sass/main.sass#L35).
+Also the rest of the changes to this website are done in public, you can find the source code [here](https://github.com/fschrofner/schro.fi)

content/posts/curriculum.md

@@ -3,7 +3,7 @@ title: "Curriculum"
 date: 2020-07-10T15:14:38+02:00
 draft: false
 ---
-# Curriculum Vitae
+# Curriculum :scroll:
 
 ## Work :hammer:
 **11.2018 - now**  

content/posts/footer.md

@@ -1 +1,4 @@
-Imprint
+**Imprint**  
+Florian Schrofner  
+5061 Elsbethen  
+AUSTRIA

content/posts/intro.md

@@ -11,12 +11,13 @@ Currently I craft wonderful apps at [LOOP](https://www.agentur-loop.com/) for cl
 I specialized on Google's operating system as I appreciate its openness and flexibility, although both of which can sometimes be a headache during development :shrug:  
 On my workstations I run Linux for the same reasons, my distribution of choice being [Manjaro](https://manjaro.org/) as I became too lazy to setup Arch Linux from scratch every time.  
 Aside from coding and tinkering, I also enjoy doing sports, most importantly cycling, but you can find me in the gym as well from time to time or spot me going for a run in my neighbourhood.  
-Most of the time I like listening to music while doing so and I generally prefer to have some nice tracks playing while I'm working. Alas, describing my music taste would be too tricky, so better check out my Last.fm profile linked below yourself.  
+Most of the time I like listening to music while doing so, and I generally prefer to have some nice tracks playing while I'm working. Alas, describing my music taste would be too tricky, so better check out my Last.fm profile linked below yourself.  
 Additionally, I recently started to excessively listen to podcasts, I found it to be a nice way to get some entertainment without straining my eyes even more after a full day's work in front of the screen.  
 In case my eyes are still good, I also like to watch some interesting movies from time to time, you can check out my Mubi profile [here](https://mubi.com/users/7455172) (once Font Awesome adds a Mubi icon I will move it to the other social links below :wink:)
 
-
+<div id="social-links">
-[<i class="fab fa-mastodon fa-3x"></i>](https://mastodon.online/@schrofi)
+<a href="https://mastodon.online/@schrofi"><i class="fab fa-mastodon fa-3x"></i></a>
-[<i class="fab fa-github fa-3x"></i>](https://github.com/fschrofner)
+<a href="https://github.com/fschrofner"><i class="fab fa-github fa-3x"></i></a>
-[<i class="fab fa-strava fa-3x"></i>](https://www.strava.com/athletes/schrofi)
+<a href="https://www.strava.com/athletes/schrofi"><i class="fab fa-strava fa-3x"></i></a>
-[<i class="fab fa-lastfm fa-3x"></i>](https://www.last.fm/user/FlowingKashmir)
+<a href="https://www.last.fm/user/FlowingKashmir"><i class="fab fa-lastfm fa-3x"></i></a>
+</div>

content/posts/section.md

@@ -1,12 +0,0 @@
----
-title: "Section"
-date: 2019-08-18T17:14:38+02:00
-draft: true
----
-# Section
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin diam nec nulla vestibulum fermentum. Aenean ullamcorper eget metus quis auctor. Proin at quam nec diam suscipit faucibus fringilla eget lacus. Nulla sollicitudin gravida tristique. Etiam tincidunt eget libero vel iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut congue ornare laoreet. Quisque malesuada ex efficitur ultricies aliquam. Sed facilisis velit ac nisl dapibus, in ultrices nisi faucibus. Curabitur tempor luctus imperdiet. Sed facilisis rutrum sapien ut feugiat.
-
-Etiam et eros neque. Donec pellentesque bibendum ipsum, at convallis nisi imperdiet sit amet. Integer varius volutpat pretium. Morbi eu eros laoreet, tristique ligula in, facilisis sapien. Vivamus vehicula laoreet nisl sit amet hendrerit. Proin congue magna a pretium rhoncus. Suspendisse eleifend nibh sit amet augue convallis, condimentum fermentum elit lacinia. Nullam laoreet condimentum metus, ac fringilla sem tincidunt sit amet. Integer sapien lacus, volutpat eget elementum a, efficitur quis nulla. Aliquam a arcu ultricies, interdum ipsum in, malesuada tellus. Integer ligula ipsum, dictum et pulvinar et, efficitur id orci. Etiam egestas tellus non elit accumsan dignissim. Proin lacinia eget felis sit amet mattis. Aliquam vestibulum imperdiet orci, vitae semper nisl. Nunc suscipit pulvinar lectus vulputate accumsan. Nunc vel est vitae tellus pulvinar malesuada.
-
-Proin placerat ornare orci, id ornare lectus ultricies quis. Duis euismod tincidunt tellus, ut volutpat elit dictum feugiat. Nunc viverra enim vitae condimentum gravida. Cras sed sapien convallis, pharetra turpis sed, condimentum nunc. Integer mi dolor, faucibus vel diam nec, vulputate rutrum erat. Sed ut sem enim. Mauris blandit, massa in consectetur tincidunt, justo tortor fringilla velit, id rhoncus enim neque quis neque. Nunc porttitor arcu in risus mattis cursus.

layouts/index.html

@@ -6,9 +6,16 @@
     </head>
     <body>
         <div class="flex twelve grow">
-                <div>
+                <div class="two-third">
                     <p id="website-title">Florian Schrofner</p>
                 </div>
+
+
+                <div class="third">
+                    <form>
+                        <button id="blog-button" class="pseudo" formaction="https://blog.schro.fi">Blog</button>
+                    </form>
+                </div>
             </div>
 
             <div class="flex twelve center" id="picture-holder">
@@ -17,7 +24,7 @@
                 {{ $sPicture := $picture.Resize "x100" }}
                 {{ $mPicture := $picture.Resize "x400" }}
                 {{ $lPicture := $picture.Resize "x600" }}
-                <img class="half third-1200" src="{{$picture.Permalink}}">
+                <img class="two-third half-1000 third-1200" src="{{$picture.Permalink}}">
             </div>
 
             <div class="flex twelve center beige-content-block">