From 018527c7c228449813d3c1e80b5f39a8b04cd600 Mon Sep 17 00:00:00 2001
From: Max mal Richtig <max@mal-richtig.de>
Date: Fri, 28 Jul 2023 00:46:01 +0200
Subject: [PATCH] update littlelink-extended

---
 css/brands-extended.css          | 211 ++++++++++++++++---------------
 css/my-custom.css                |   5 +
 images/icons-extended/matrix.svg |  49 +++++++
 3 files changed, 164 insertions(+), 101 deletions(-)
 create mode 100644 images/icons-extended/matrix.svg

diff --git a/css/brands-extended.css b/css/brands-extended.css
index 4112610..c32f9c9 100644
--- a/css/brands-extended.css
+++ b/css/brands-extended.css
@@ -1,87 +1,87 @@
 /*
- * littlelink.io
- * Skeleton V2.0.4
- * Copyright 2014, Dave Gamache
- * www.getskeleton.com
- * Free to use under the MIT license.
- * http://www.opensource.org/licenses/mit-license.php
- * 12/29/2014
- */
+* littlelink.io
+* Skeleton V2.0.4
+* Copyright 2014, Dave Gamache
+* www.getskeleton.com
+* Free to use under the MIT license.
+* http://www.opensource.org/licenses/mit-license.php
+* 12/29/2014
+*/
 
 /*
- * Built using on:
- * Skeleton V2.0.4
- * Copyright 2014, Dave Gamache
- * www.getskeleton.com
- * Free to use under the MIT license.
- * http://www.opensource.org/licenses/mit-license.php
- * 12/29/2014
- */
+* Built using on:
+* Skeleton V2.0.4
+* Copyright 2014, Dave Gamache
+* www.getskeleton.com
+* Free to use under the MIT license.
+* http://www.opensource.org/licenses/mit-license.php
+* 12/29/2014
+*/
 
 /* Table of contents
-   ––––––––––––––––––––––––––––––––––––––––––––––––––
+––––––––––––––––––––––––––––––––––––––––––––––––––
 
-   - Buttons
-   - Brand Styles
+- Buttons
+- Brand Styles
 
- */
+*/
 
 /* Buttons
-   –––––––––––––––––––––––––––––––––––––––––––––––––– */
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
 
 .button,
 button {
-    display: inline-block;
-    text-decoration: none;
-    height: 48px;
-    text-align: center;
-    vertical-align: middle;
-    font-size: 18px;
-    width: 300px;
-    font-weight: 700;
-    line-height: 48px;
-    letter-spacing: 0.1px;
-    white-space: wrap;
-    border-radius: 8px;
-    cursor: pointer;
+  display: inline-block;
+  text-decoration: none;
+  height: 48px;
+  text-align: center;
+  vertical-align: middle;
+  font-size: 18px;
+  width: 300px;
+  font-weight: 700;
+  line-height: 48px;
+  letter-spacing: 0.1px;
+  white-space: wrap;
+  border-radius: 8px;
+  cursor: pointer;
 }
 button:hover,
 .button:focus {
-    color: #333333;
-    border-color: #888888;
-    outline: 0;
+  color: #333333;
+  border-color: #888888;
+  outline: 0;
 }
 .button.button-primary {
-    color: #ffffff;
-    filter: brightness(90%);
+  color: #ffffff;
+  filter: brightness(90%);
 }
 .button.button-primary:hover,
 .button.button-primary:focus {
-    color: #ffffff;
-    filter: brightness(90%);
+  color: #ffffff;
+  filter: brightness(90%);
 }
 
 /* Brand Icons
-   –––––––––––––––––––––––––––––––––––––––––––––––––– */
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
 
 .icon {
-    padding: 0px 8px 3.5px 0px;
-    vertical-align: middle;
-    width: 20px;
-    height: 20px;
+  padding: 0px 8px 3.5px 0px;
+  vertical-align: middle;
+  width: 20px;
+  height: 20px;
 }
 
 /* Brand Styles (we recommend adding these in alphabetical order)
-   –––––––––––––––––––––––––––––––––––––––––––––––––– */
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
 
 /* Extended (this is great for your own brand color!) */
 .button.button-extended {
-    color: #ffffff;
-    background-color: #0085ff;
+  color: #ffffff;
+  background-color: #0085ff;
 }
 .button.button-extended:hover,
 .button.button-extended:focus {
-    filter: brightness(90%);
+  filter: brightness(90%);
 }
 
 /* 500px */
@@ -91,157 +91,166 @@ button:hover,
 }
 .button.button-500px:hover,
 .button.button-500px:focus {
-    filter: brightness(90%);
+  filter: brightness(90%);
 }
 
 /* Alpha Universe (Sony) */
 .button.button-alphauniverse {
-    color: #ffffff;
-    background-color: #000000;
+  color: #ffffff;
+  background-color: #000000;
 }
 .button.button-alphauniverse:hover,
 .button.button-alphauniverse:focus {
-    filter: brightness(90%);
+  filter: brightness(90%);
 }
 
 /* Behance */
 .button.button-behance {
-    color: #1769ff;
-    background-color: #ffffff;
+  color: #1769ff;
+  background-color: #ffffff;
 }
 .button.button-behance:hover,
 .button.button-behance:focus {
-    filter: brightness(90%);
+  filter: brightness(90%);
 }
 
 /* Codepen */
 .button.button-codepen {
-    color: #000000;
-    background-color: #ffffff;
+  color: #000000;
+  background-color: #ffffff;
 }
 .button.button-codepen:hover,
 .button.button-codepen:focus {
-    filter: brightness(90%);
+  filter: brightness(90%);
 }
 
 /* Devpost */
 .button.button-devpost {
-    color: #ffffff;
-    background-color: #003E54;
+  color: #ffffff;
+  background-color: #003E54;
 }
 .button.button-devpost:hover,
 .button.button-devpost:focus {
-    filter: brightness(90%);
+  filter: brightness(90%);
 }
 
 /* Distiller */
 .button.button-dist {
-    color: #ffffff;
-    background-color: #ed5c47;
+  color: #ffffff;
+  background-color: #ed5c47;
 }
 .button.button-dist:hover,
 .button.button-dist:focus {
-    filter: brightness(90%);
+  filter: brightness(90%);
 }
 
 /* Hackerearth */
 .button.button-hackerearth {
-    color: #ffffff;
-    background-color: #2b3352;
+  color: #ffffff;
+  background-color: #2b3352;
 }
 .button.button-hackerearth:hover,
 .button.button-hackerearth:focus {
-    filter: brightness(90%);
+  filter: brightness(90%);
 }
 
 /* Hackerrank */
 .button.button-hackerrank {
-    color: #000000;
-    background-color: #ffffff;
+  color: #000000;
+  background-color: #ffffff;
 }
 .button.button-hackerrank:hover,
 .button.button-hackerrank:focus {
-    filter: brightness(90%);
+  filter: brightness(90%);
 }
 
 /* itch.io */
 .button.button-itchio {
-    color: #ffffff;
-    background-color: #fa5c5c;
+  color: #ffffff;
+  background-color: #fa5c5c;
 }
 .button.button-itchio:hover,
 .button.button-itchio:focus {
-    filter: brightness(90%);
+  filter: brightness(90%);
 }
 
 /* Lemmy */
 .button.button-lemmy {
-    color: #ffffff;
-    background-color: #14854f;
+  color: #ffffff;
+  background-color: #14854f;
 }
 .button.button-lemmy:hover,
 .button.button-lemmy:focus {
-    filter: brightness(90%);
+  filter: brightness(90%);
+}
+
+/* Matrix */
+.button.button-matrix {
+  color: #ffffff;
+  background-color: #000000;
+}
+.button.button-matrix:hover,
+.button.button-matrix:focus {
+  filter: brightness(90%);
 }
 
 /* Micro.blog */
 .button.button-microblog {
-    color: #FFFFFF;
-    background-color: #FD9927 }
+  color: #FFFFFF;
+  background-color: #FD9927 }
 .button.button-microblog:hover,
 .button.button-microblog:focus {
-    filter: brightness(90%) }
+  filter: brightness(90%) }
 
-/* MyAnimeList */
+  /* MyAnimeList */
 .button.button-myanimelist {
-    color: #133a95;
-    background-color: #ffffff }
+  color: #133a95;
+  background-color: #ffffff }
 .button.button-myanimelist:hover,
 .button.button-myanimelist:focus {
-    filter: brightness(90%) }
+  filter: brightness(90%) }
 
-/* osu! */
+  /* osu! */
 .button.button-osu {
-    color: #ffffff;
-    background-color: #ff8ee6;
+  color: #ffffff;
+  background-color: #ff8ee6;
 }
 .button.button-osu:hover,
 .button.button-osu:focus {
-    filter: brightness(90%);
+  filter: brightness(90%);
 }
 
 /* SpaceHey */
 .button.button-spacehey {
-    color: #FFFFFF;
-    background-color: #3234CF;
+  color: #FFFFFF;
+  background-color: #3234CF;
 }
 .button.button-spacehey:hover,
 .button.button-spacehey:focus {
-    filter: brightness(90%);
+  filter: brightness(90%);
 }
 
 /*  Vero */
 .button.button-vero {
-    color: #ffffff;
-    background-color: #000000 }
+  color: #ffffff;
+  background-color: #000000 }
 .button.button-vero:hover,
 .button.button-vero:focus {
-    filter: brightness(90%) }
+  filter: brightness(90%) }
 
 /*  Pixelfed */
 .button.button-pixelfed {
-    color: #000000;
-    border: 1px solid #000000;
-    background-color: #ffffff }
+  color: #000000;
+  background-color: #ffffff }
 .button.button-pixelfed:hover,
 .button.button-pixelfed:focus {
-    filter: brightness(90%) }
+  filter: brightness(90%) }
 
 /* write.as */
 .button.button-writeas {
     color: #000000;
     border: 1px solid #000000;
-    background-color: #ffffff;
+  background-color: #ffffff;
 }
 .button.button-writeas:hover,
 .button.button-writeas:focus {
@@ -252,7 +261,7 @@ button:hover,
 .button.button-writefreely {
     color: #000000;
     border: 1px solid #000000;
-    background-color: #f4f4f4;
+  background-color: #f4f4f4;
 }
 .button.button-writefreely:hover,
 .button.button-writefreely:focus {
diff --git a/css/my-custom.css b/css/my-custom.css
index fc8381f..e5fe9c4 100644
--- a/css/my-custom.css
+++ b/css/my-custom.css
@@ -16,3 +16,8 @@ a, a:visited {
 a:hover, a:active {
     color: #b5dfb5;
 }
+
+.container, .container-left {
+    padding: 20px;
+    background-color: rgba(0,0,0,0.4);
+    }
diff --git a/images/icons-extended/matrix.svg b/images/icons-extended/matrix.svg
new file mode 100644
index 0000000..b1a5817
--- /dev/null
+++ b/images/icons-extended/matrix.svg
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 520 520"
+   style="enable-background:new 0 0 520 520;"
+   xml:space="preserve"
+   sodipodi:docname="matrix.svg"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+   id="defs11" /><sodipodi:namedview
+   id="namedview9"
+   pagecolor="#ffffff"
+   bordercolor="#000000"
+   borderopacity="0.25"
+   inkscape:showpageshadow="2"
+   inkscape:pageopacity="0.0"
+   inkscape:pagecheckerboard="0"
+   inkscape:deskcolor="#d1d1d1"
+   showgrid="false"
+   inkscape:zoom="1.975"
+   inkscape:cx="259.74684"
+   inkscape:cy="259.74684"
+   inkscape:window-width="2560"
+   inkscape:window-height="1371"
+   inkscape:window-x="0"
+   inkscape:window-y="0"
+   inkscape:window-maximized="1"
+   inkscape:current-layer="Layer_1" />
+<path
+   d="M13.7,11.9v496.2h35.7V520H0V0h49.4v11.9H13.7z"
+   id="path2"
+   style="fill:#ffffff;fill-opacity:1" />
+<path
+   d="M166.3,169.2v25.1h0.7c6.7-9.6,14.8-17,24.2-22.2c9.4-5.3,20.3-7.9,32.5-7.9c11.7,0,22.4,2.3,32.1,6.8  c9.7,4.5,17,12.6,22.1,24c5.5-8.1,13-15.3,22.4-21.5c9.4-6.2,20.6-9.3,33.5-9.3c9.8,0,18.9,1.2,27.3,3.6c8.4,2.4,15.5,6.2,21.5,11.5  c6,5.3,10.6,12.1,14,20.6c3.3,8.5,5,18.7,5,30.7v124.1h-50.9V249.6c0-6.2-0.2-12.1-0.7-17.6c-0.5-5.5-1.8-10.3-3.9-14.3  c-2.2-4.1-5.3-7.3-9.5-9.7c-4.2-2.4-9.9-3.6-17-3.6c-7.2,0-13,1.4-17.4,4.1c-4.4,2.8-7.9,6.3-10.4,10.8c-2.5,4.4-4.2,9.4-5,15.1  c-0.8,5.6-1.3,11.3-1.3,17v103.3h-50.9v-104c0-5.5-0.1-10.9-0.4-16.3c-0.2-5.4-1.3-10.3-3.1-14.9c-1.8-4.5-4.8-8.2-9-10.9  c-4.2-2.7-10.3-4.1-18.5-4.1c-2.4,0-5.6,0.5-9.5,1.6c-3.9,1.1-7.8,3.1-11.5,6.1c-3.7,3-6.9,7.3-9.5,12.9c-2.6,5.6-3.9,13-3.9,22.1  v107.6h-50.9V169.2H166.3z"
+   id="path4"
+   style="fill:#ffffff;fill-opacity:1" />
+<path
+   d="M506.3,508.1V11.9h-35.7V0H520v520h-49.4v-11.9H506.3z"
+   id="path6"
+   style="fill:#ffffff;fill-opacity:1" />
+</svg>