new colors

_includes/footer.html

@@ -32,6 +32,6 @@
 <script src="https://unpkg.com/konami@1.6.3/konami.js"></script>
 <script>
 const easterEgg = new Konami(() => window.location.href =
-  "https://www.youtube.com/watch?v=x9l6eQbKcMw");
+  "https://www.youtube.com/watch?v=uUTDCOBI1ZI");
 </script>
 {% comment %} vim: set ts=2 sw=2 et tw=80: {% endcomment %}

_posts/2016-07-12-installing-gentoo-on-a-thinkpad-x60s.html

@@ -80,8 +80,11 @@ categories: linux
 </p>
 
 <p>
-  {% highlight bash %} # make ARCH=i386 menuconfig # make ARCH=i386 # make
+{% highlight bash %}
-  ARCH=i386 install {% endhighlight %}
+make ARCH=i386 menuconfig
+make ARCH=i386
+make ARCH=i386 install
+{% endhighlight %}
 </p>
 
 <p>

_posts/2016-07-28-how-to-rickroll-people-launching-rm-rf-on-your-system.html

@@ -44,10 +44,10 @@ categories: linux
 </p>
 
 <p>
-  {% highlight bash %} alias rm=/bin/rmAlias alias sudo='sudo ' # this enables
+{% highlight bash %}
-  aliases in sudo, see
+alias rm=/bin/rmAlias
-  http://askubuntu.com/questions/22037/aliases-not-available-when-using-sudo {%
+alias sudo='sudo ' # this enables aliases in sudo, see http://askubuntu.com/q/22037/
-  endhighlight %}
+{% endhighlight %}
 </p>
 
 <p>
@@ -62,18 +62,45 @@ categories: linux
 </p>
 
 <p>
-  {% highlight bash %} #! /bin/bash # Rickroll whoever tries to desert this
+{% highlight bash %}
-  system, even root. # To achieve this, set the appropriate aliases even in
+#!/bin/bash # Rickroll whoever tries to desert this system, even root. 
-  /etc/profile and similars. # Video played when rickrolling
+# To achieve this, set the appropriate aliases even in /etc/profile and similars. 
-  ROLLVIDEO=/opt/anti-rm/serious-video.mkv # it's just Never Gonna Give You Up
+
-  on my system, but be free to customize this! rickroll(){ echo "Never gonna
+# Video played when rickrolling: it's just Never Gonna Give You Up on my system,
-  desert this system..." xdg-open $ROLLVIDEO 2>&1 & exit 0 } while getopts
+# but be free to customize this! 
-  ":rf-" opt; do # Prevent '--force' to be detected as -r and -f if [ "$opt" =
+ROLLVIDEO=/opt/anti-rm/serious-video.mkv
-  "-" ]; then OPTIND=$OPTIND+1 continue fi if [ "$opt" = "r" ] || [ "$opt" = "f"
+
-  ]; then if [ "$tmp" = "" ]; then tmp=$opt continue elif [ "$tmp" != "$opt" ];
+rickroll() { 
-  then rickroll fi fi done for var in "$@" do if [[ "$var" = "--force" && "$tmp"
+    echo "Never gonna desert this system..."
-  = "r" ]]; then rickroll fi done # If it's safe, just run rm /bin/rm "$@" exit
+    xdg-open $ROLLVIDEO 2>&1 & exit 0
-  $? {% endhighlight %}
+}
+
+while getopts ":rf-" opt; do 
+    # Prevent '--force' to be detected as -r and -f
+    if [ "$opt" = "-" ]; then 
+        OPTIND=$OPTIND+1
+        continue
+    fi
+    if [ "$opt" = "r" ] || [ "$opt" = "f" ]; then
+        if [ "$tmp" = "" ]; then 
+            tmp=$opt
+            continue
+        elif [ "$tmp" != "$opt" ]; then
+            rickroll
+        fi
+    fi
+done
+
+for var in "$@" do
+    if [[ "$var" = "--force" && "$tmp" = "r" ]]; then 
+        rickroll 
+    fi
+done 
+
+# If it's safe, just run rm 
+/bin/rm "$@"
+exit $? 
+{% endhighlight %}
 </p>
 
 <p>
@@ -87,7 +114,7 @@ categories: linux
 
 <p>Let's give execution permissions to the script we have just created:</p>
 
-<p>{% highlight bash %} # chmod +x /bin/rmAlias {% endhighlight %}</p>
+<p>{% highlight bash %}chmod +x /bin/rmAlias{% endhighlight %}</p>
 
 <p>
   Restart your shell, and enjoy. If you want to test safely, I suggest trying to

_sass/_base.scss

@@ -29,7 +29,6 @@ html {
   font-family: $base-font-family;
   color: $text-color;
   background-color: $background-color;
-  -webkit-text-stroke: 0.25px #888;  
 }
 
 /* Images */
@@ -63,9 +62,8 @@ h6 {
 /* Links */
 a {
   color: $brand-color;
-  background: $nav-bg;
+  background: $background-color;
   text-decoration: none;
-  -webkit-text-stroke: 0.25px #1B1256;  
   font-weight: bold;
 
   &:visited {
@@ -80,8 +78,8 @@ a {
  * Blockquotes
  */
 blockquote {
-  color: $nav-bg;
+  color: white;
-  background: $nav-col;
+  background: $top-col;
   border-left: 4px solid $brand-color;
   letter-spacing: -1px;
   font-style: italic;
@@ -118,11 +116,11 @@ pre {
 pre,
 code {
   font-size: 0.95rem;
-  background: $nav-col;
+  background: $background-color;
 }
 
 a code {
-  background: $nav-bg;
+  background: $background-color;
 }
 
 /* Disable borders between line numbers and code when

_sass/_layout.scss

@@ -1,7 +1,7 @@
 /* vim: set ts=2 sw=2 et tw=80: */
 body {
   background-color: $background-color;
-  font-family: "Bombardier", sans-serif;
+  font-family: "Radio Canada", sans-serif;
   display: flex;
   min-height: 100vh;
   flex-direction: column;
@@ -22,9 +22,8 @@ ul.navbar-list {
 }
 
 .header {
-  border-bottom: $border;
+  background: $top-col;
-  background: $nav-bg;
+  color: $top-col;
-  color: $nav-col;
 
   .head.navbar {
     display: flex;
@@ -42,6 +41,7 @@ ul.navbar-list {
       padding: 0;
 
       a {
+        background: $top-col;
         color: white;
       }
     }
@@ -54,6 +54,8 @@ ul.navbar-list {
         text-transform: uppercase;
         display: inline-block;
         padding: 0.25rem 0.5rem;
+        background: $top-col;
+        color: white;
       }
 
       a:first-child {
@@ -69,33 +71,48 @@ ul.navbar-list {
 
 .homequote {
   display: flex;
-  background: $nav-bg;
+  color: $text-color;
-  color: $nav-col;
   align-items: stretch;
   margin-bottom: 1rem;
 
   figure {
     margin: 0;
     flex: 0;
-    display: flex;
+    background-image: url(/images/claudio.jpg);
-    align-items: center;
+    background-size: cover;
-    min-width: 300px;
+    background-position: center;
-    background: black;
   }
 
-  @include media-query($on-palm) {
+  figure .blur {
-    figure {
+    width: 100%;
-      display: none;
+    height: 100%;
-    }
+    backdrop-filter: blur(10px) contrast(0.7) brightness(1.3);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 300px;
   }
 
   .quote {
-    border-left: 3px dotted $brand-color;
     flex: 1;
     padding: 1rem 1.5rem;
   }
 }
 
+@include media-query($on-laptop) {
+  .homequote {
+    flex-direction: column;
+
+    figure img {
+      filter: none;
+      object-fit: cover;
+      height: 300px;
+      width: 300px;
+      object-position: center top;
+    }
+  }
+}
+
 .portfolio {
   position: relative;
   padding-top: 2rem;
@@ -147,8 +164,8 @@ ul.navbar-list {
       text-align: right;
 
       .date {
-        background: $nav-bg;
+        background: $top-col;
-        color: $nav-col;
+        color: white;
       }
 
       .category,
@@ -156,8 +173,8 @@ ul.navbar-list {
       .repo,
       .languages {
         background: white;
-        border-left: 3px solid $nav-bg;
+        border-left: 3px solid white;
-        border-bottom: 3px solid $nav-bg;
+        border-bottom: 3px solid white;
       }
 
       .authors {
@@ -171,19 +188,22 @@ ul.navbar-list {
     }
 
     .description {
-      border: 3px solid $nav-bg;
+      border: $border;
       flex-grow: 1;
 
       .images {
-        background: $nav-bg;
+        background: $brand-color;
         padding: 0.5rem;
         margin: -0.5rem -0.5rem 0.5rem -0.5rem;
         text-align: center;
 
+        a {
+          background: none;
+        }
+
         img {
           width: 175px;
           margin: 0.25rem;
-          border: 3px solid $nav-col;
         }
       }
     }
@@ -213,9 +233,7 @@ ul.post-list li:first-child {
 
 footer {
   justify-content: space-between;
-  border-top: $border;
+  background: $brand-color;
-  background: $nav-bg;
-  color: $nav-col;
 
   .container {
     display: flex;
@@ -224,6 +242,13 @@ footer {
       flex: 1;
       font-size: 1rem;
       text-align: right;
+      background: $brand-color;
+      color: white;
+
+      a {
+        background: $brand-color;
+        color: white;
+      }
     }
 
     @include media-query($on-palm) {
@@ -242,8 +267,8 @@ footer {
 
       .icon {
         display: inline-table;
-        background: $nav-col;
+        color: $brand-color;
-        color: $nav-bg;
+        background: white;
         width: 2.5em;
         height: 2.5em;
         text-align: center;

css/bombardier.css

@@ -1,8 +1,8 @@
 /* vim: set ts=2 sw=2 et tw=80: */
 
 @font-face {
-  font-family: "Bombardier";
+  font-family: "Radio Canada";
-  font-style: normal;
+  font-style: regular;
   font-weight: 400;
-  src: url(/webfonts/bombardier.ttf) format("truetype");
+  src: url(/webfonts/RadioCanada-VariableFont_wdth,wght.ttf) format("truetype");
 }

css/main.scss

@@ -12,11 +12,11 @@ $base-line-height: 1.5;
 
 $spacing-unit: 30px;
 
-$nav-bg: #222;
+$text-color: #222;
-$nav-col: #eee;
+$background-color: #fafafa;
-$text-color: $nav-bg;
+
-$background-color: $nav-col;
+$top-col: #018e71;
-$brand-color: #D3B5F0;
+$brand-color: #4f47cc;
 $border: 3px solid $brand-color;
 
 // Width of the content area

index.html

@@ -4,18 +4,40 @@ layout: main
 
 <div class="homequote">
   <figure>
-    <img
+    <div class="blur">
-      width="300"
+      <img
-      height="460"
+        width="300"
-      src="images/claudio.jpg"
+        height="460"
-      alt="Me eating
+        src="images/claudio.jpg"
-                raclette"
+        alt="Me" 
-    />
+      />
+    </div>
   </figure>
   <div class="quote">
     <p>
-      I once read a Linus Torvalds quote comparing computer science to physics,
+      Welcome to my website! My name is Claudio, and here is where I upload all 
-      stating that
+      the stuff I make with computers.
+    </p>
+
+    <p>
+      I am an <a href="https://www.usi.ch/">USI</a> Informatics student
+      in the Master of Software and Data Engineering. Over on <a
+        href="https://git.maggioni.xyz/maggicl">Gitea</a> you will find
+      materials and assignments I had to solve during the years should you be a
+      fellow student (always glad to lend a hand!).
+    </p>
+
+    <p>
+      As you can see I am an archer in my free time. Shout out to the folks at
+      <a href="https://atal-arco.ch/">ATAL</a>, where I was able to snap that
+      picture (by the way I got <em>very</em> lucky there, don't mind the other
+      impacts please).
+    </p>
+
+    <p>
+      I don't have much else to say, but I would like to leave you with this 
+      quote from Linus Torvalds which still rings true to me after many years
+      of working with computers:
     </p>
 
     <blockquote>
@@ -24,27 +46,6 @@ layout: main
         up, in computer science you create the world.</cite
       >
     </blockquote>
-    <p>
-      Hello, my name is Claudio Maggioni, and I have been a passionate "world
-      builder" for 7 years.
-    </p>
-    <p>
-      Since when I began high school, I meddled with software development,
-      developing a creative mindset and an interest in problem solving. Since
-      then, I have always been at least in part a self-taught student of
-      computer science, satisfying my curiosity for topics that were not covered
-      in general school curriculum.
-    </p>
-    <p>
-      My expertise includes web development, mobile application development of
-      multiplatform applications, a passion for functional programming, and
-      DevOps skills for Linux systems.
-    </p>
-    <p>
-      Reaching the end of my undergraduate studies in computer science, I am
-      currently seeking job opportunities to follow at the end of my studies,
-      eager to apply my skills in a corporate setting.
-    </p>
   </div>
 </div>
 <div class="home">