Add platform status page

_sass/_components.scss

@@ -20,6 +20,27 @@
   padding-bottom: 1.5rem;
 }
 
+.c-site__link {
+  &:hover {
+    text-shadow: 0 0 0.35px map-get($colors, text), 0 0 0.35px map-get($colors, text);
+    text-shadow: 0 0 0.35px color(text), 0 0 0.35px color(text);
+
+    &::after {
+      text-shadow: none;
+    }
+  }
+
+  &::after {
+    content: '|';
+    display: inline-block;
+
+  }
+
+  &:last-child::after {
+    content: '';
+  }
+}
+
 // Events listing
 .c-past-event {
   box-shadow: 0 2px 5px 0 map-get($colors, shadow);
@@ -146,6 +167,46 @@
   margin-bottom: 1.5rem;
 }
 
+// PLatform status page
+.c-platform {
+  display: flex;
+  flex-wrap: wrap;
+  text-align: center;
+  margin-bottom: 3rem;
+}
+
+.c-platform__link {
+  display: block;
+  flex: 1 0 calc(50% - 2rem);
+  border: 1px solid map-get($colors, secondary);
+  border: 1px solid color(secondary);
+  padding: 1.5rem 1rem 0;
+  margin: 1rem;
+  transition: border 0.3s;
+
+  p {
+    transition: color 0.3s;
+  }
+
+  &:hover {
+    border: 1px solid map-get($colors, main);
+    border: 1px solid color(main);
+
+    p {
+      color: map-get($colors, main);
+      color: color(main);
+    }
+  }
+}
+
+.c-platform__icon {
+  display: inline-block;
+  vertical-align: middle;
+  width: 100%;
+  height: 2em;
+  margin-bottom: 1rem;
+}
+
 // Site footer styles
 .c-site-footer {
   background: map-get($colors, main);

platform.md

@@ -0,0 +1,27 @@
+---
+layout: page
+title: Platform status
+permalink: /platform-status/
+---
+All the major browser vendors publish the list of web platform features and their implementation status on every major browser. The information on each site is more or less the same, but each site has a different design and presentation, so take your pick.
+
+<div class="c-platform">
+    <a href="https://platform-status.mozilla.org/" class="c-platform__link c-platform__firefox">
+        <img src="/img/firefox.svg" class="c-platform__icon" alt="Firefox">
+        <p>Firefox Platform Status</p>
+    </a>
+    <a href="https://www.chromestatus.com/features" class="c-platform__link c-platform__chrome">
+        <img src="/img/chrome.svg" class="c-platform__icon" alt="Chrome">
+        <p>Chrome Platform Status</p>
+    </a>
+    <a href="https://webkit.org/status/" class="c-platform__link c-platform__webkit">
+        <img src="/img/webkit.svg" class="c-platform__icon" alt="WebKit">
+        <p>WebKit Feature Status</p>
+    </a>
+    <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/" class="c-platform__link c-platform__microsoft">
+        <img src="/img/microsoft.svg" class="c-platform__icon" alt="Microsoft">
+        <p>Edge Platform Status</p>
+    </a>
+</div>
+
+*P.S. The layout of this page is kinda broken on Internet Explorer at the moment, but I'll fix it up when I have the time. Sorry about that.*