Initial commit

Add supporter links.dev to README.md

Caddyfile

@@ -0,0 +1,18 @@
+:80 {
+    root * /srv
+    file_server {
+	hide Caddyfile
+	hide .git .gitignore Caddyfile *.md 
+    }
+
+    handle_errors {
+	@404 {
+	    expression {http.error.status_code} == 404
+	}
+	rewrite @404 /404.html
+	file_server
+    }
+    
+    log
+    metrics /metrics
+}

README.md

@@ -1,11 +1,13 @@
 ![Logo](https://cdn.cottle.cloud/littlelink/littlelink.gif)
 
 # LittleLink
-The DIY self-hosted <a href="https://linktr.ee/" target="_blank" rel="noopener">LinkTree</a> alternative. LittleLink has more than 60 branded button styles you can easily use, with more being added by our community all the time.
+This repository is a fork of [LittleLink](https://github.com/sethcottle/littlelink) hosted on my [website](https://syyrell.com). It adds additional websites as long as a custom toggle button to switch between dark and light mode. Default theme is chosen according to client operating system preference thanks to **prefers-color-scheme** CSS media feature (see [Mozilla documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme))
+
+The DIY self-hosted <a href="https://linktr.ee/" target="_blank" rel="noopener">LinkTree</a> alternative. LittleLink has more than 100 branded button styles you can easily use, with more being added by our community all the time.
 
 ![Theme](https://cdn.cottle.cloud/littlelink/themesupport.gif)
 
-LittleLink has more than 60 branded button styles you can use (with even more being added by our community). You'll also find a light and dark theme ready to go. Not a fan of the default colors? Update `skeleton-light.css` or `skeleton-dark.css` to the HEX values of your choosing. You can also set your CSS to `skeleton-auto.css`, which will use the system theme of the device you visit on.
+LittleLink has more than 100 branded button styles you can use (with even more being added by our community). You'll also find a light and dark theme ready to go. Not a fan of the default colors? Update `skeleton-light.css` or `skeleton-dark.css` to the HEX values of your choosing. You can also set your CSS to `skeleton-auto.css`, which will use the system theme of the device you visit on.
 
 ![Performance](https://cdn.cottle.cloud/littlelink/Lighthouse.svg)
 
@@ -13,9 +15,13 @@ Using [Skeleton](http://getskeleton.com/) let us build something that loads quic
 
 ![Publish](https://cdn.cottle.cloud/littlelink/Publish.svg)
 
-No need for gulp, npm, or anything else to make LittleLink work—it uses the bare essentials. You can automatically fork and deploy LittleLink with [Vercel](https://vercel.com/). Enjoy free and fast hosting with automatic deployments on every branch push with one click below. 👇️
+No need for gulp, npm, or anything else to make LittleLink work—it uses the bare essentials. You can automatically fork and deploy LittleLink with [Netlify](https://www.netlify.com/), [Vercel](https://vercel.com/), or [Amplify](https://aws.amazon.com/amplify). 👇️
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Fsethcottle%2Flittlelink&project-name=littlelink&repository-name=littlelink&demo-title=LittleLink%20Demo&demo-description=Imported%20from%20GitHub.)
+[![Deploy to Netlify](https://cdn.cottle.cloud/littlelink/button-deploy-netlify.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/sethcottle/littlelink)
+
+[![Deploy to Vercel](https://cdn.cottle.cloud/littlelink/button-deploy-vercel.svg)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fsethcottle%2Flittlelink&project-name=littlelink&repository-name=littlelink)
+
+[![Deploy to Amplify](https://cdn.cottle.cloud/littlelink/button-deploy-amplify.svg)](https://console.aws.amazon.com/amplify/home#/deploy?repo=https://github.com/sethcottle/littlelink)
 
 ---
 
@@ -43,6 +49,8 @@ Duplicate the [LittleLink Template on Figma Community](https://www.figma.com/com
 You can support LittleLink by [buying me a beer](https://www.buymeacoffee.com/seth). You can also have your name or your company added to this section and the supporters page of the [LittleLink.io](https://littlelink.io) website.
 
 #### 🏢 Business Supporters
+**[links.dev](https://github.com/fatih-yavuz/links.dev)**
+
 [Add Your Company Name](https://www.buymeacoffee.com/seth/e/50574)
 
 #### ✨ Individual Supporters

css/brands.css

@@ -33,23 +33,26 @@
 button {
   display: inline-block;
   text-decoration: none;
-  height: 48px;
+  height: 100%;
   text-align: center;
   vertical-align: middle;
   font-size: 18px;
   width: 300px;
   font-weight: 700;
-  line-height: 48px;
+  line-height: 20px;
+  padding: 14px 12px 12px 12px;
   letter-spacing: 0.1px;
   white-space: wrap;
+  outline: none;
   border-radius: 8px;
   cursor: pointer;
-}
+  
+}     
 button:hover,
 .button:focus {
-  color: #333;
+  color: #212121;
   border-color: #888;
-  outline: 0;
+  outline: #7AB8FF solid 3px
 }
 .button.button-primary {
   color: #fff;
@@ -354,6 +357,16 @@ button:hover,
   filter: brightness(90%);
 }
 
+/* Gitea */
+.button.button-gitea {
+  color: #ffffff;
+  background-color: #87ab63;
+}
+.button.button-gitea:hover,
+.button.button-gitea:focus {
+  filter: brightness(90%);
+}
+
 /* GitHub */
 .button.button-github {
   color: #ffffff;
@@ -375,6 +388,16 @@ button:hover,
   filter: brightness(90%);
 }
 
+/* GoFundMe */
+.button.button-gofundme {
+  color: #ffffff;
+  background-color: #02A95C;
+}
+.button.button-gofundme:hover,
+.button.button-gofundme:focus {
+  filter: brightness(90%);
+}
+
 /* Goodreads */
 .button.button-goodreads {
   color: #333333;
@@ -430,6 +453,16 @@ button:hover,
   filter: brightness(90%);
 }
 
+/* GPG */
+.button.button-gpg {
+  color: #ffffff;
+  background-color: #29aff1;
+}
+.button.button-gpg:hover,
+.button.button-gpg:focus {
+  filter: brightness(90%);
+}
+
 /* Guilded */
 .button.button-guilded {
   color: #000000;
@@ -451,6 +484,16 @@ button:hover,
   filter: brightness(90%);
 }
 
+/* Hedgedoc */
+.button.button-hedgedoc {
+  color: #ffffff;
+  background-color: #eebc7a;
+}
+.button.button-hedgedoc:hover,
+.button.button-hedgedoc:focus {
+  filter: brightness(90%);
+}
+
 /* Instagram */
 .button.button-instagram {
   color: #ffffff;
@@ -555,6 +598,20 @@ button:hover,
   filter: brightness(90%);
 }
 
+/* Mealie */
+.button.button-mealie {
+  color: #ffffff;
+  background-color: #e58325;
+}
+.button.button-mealie:hover,
+.button.button-mealie:focus {
+  filter: brightness(90%);
+}
+
+.icon.icon-mealie {
+  filter: brightness(0) invert(1);
+}
+
 /* Medium */
 .button.button-medium {
   color: #ffffff;

css/skeleton-auto.css

@@ -125,11 +125,29 @@ p {
 /* Links
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
 a {
-  color: #4899F7;
+  color: #2457F5;
+}
+a:hover {
+  color: #083BDA; 
+}
+a:focus {
+  outline: #7AB8FF solid 2px;
+  border-radius: 2px;
+}         
+
+/* Link Color Dark Theme */
+@media (prefers-color-scheme: dark) {
+  a {
+    color: #4899F7;
 }
 a:hover {
   color: #7AB8FF;
 }
+a:focus {
+  outline: #7AB8FF solid 2px;
+  border-radius: 2px;
+}
+}
 
 /* Code
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
@@ -258,4 +276,50 @@ hr {
        url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-800.woff') format('woff'), /* Modern Browsers */
        url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-800.ttf') format('truetype'), /* Safari, Android, iOS */
        url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-800.svg#OpenSans') format('svg'); /* Legacy iOS */
+}
+
+label {
+  width:70px;
+  height:35px;
+  position: relative;
+  display: block;
+  top: -40px;
+  left: 265px;
+  background: #ebebeb;
+  border-radius: 20px;
+  box-shadow: inset 0px 0px 10px rgba(0,0,0,0.4), inset 0px 0px 10px rgba(255,255,255,0.4);
+  cursor: pointer;
+}
+
+label:after {
+  content: "";
+  width:28px;
+  height: 28px;
+  position: absolute;
+  top:4px;
+  left:2px;
+  background: linear-gradient(180deg,#ffcc89,#d8860b);
+  border-radius: 60px;
+  box-shadow: 0px 5px 10px rgba(0,0,0,0.2);
+}
+input {
+  width: 0;
+  height: 0;
+  visibility: hidden;
+}
+
+input:checked + label {
+  background: #242424;
+}
+input:checked + label:after {
+  left:68px;
+  transform: translateX(-100%);
+  background: linear-gradient(180deg,#777,#3a3a3a);
+}
+label, label:after {
+  transition: 0.3s
+}
+
+label:active:after{ 
+  width: 40px; 
 }

images/icons/gitea.svg

@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="main_outline" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+	 y="0px" viewBox="0 0 640 640" style="enable-background:new 0 0 640 640;" xml:space="preserve">
+<g>
+	<path id="teabag" style="fill:#FFFFFF" d="M395.9,484.2l-126.9-61c-12.5-6-17.9-21.2-11.8-33.8l61-126.9c6-12.5,21.2-17.9,33.8-11.8
+		c17.2,8.3,27.1,13,27.1,13l-0.1-109.2l16.7-0.1l0.1,117.1c0,0,57.4,24.2,83.1,40.1c3.7,2.3,10.2,6.8,12.9,14.4
+		c2.1,6.1,2,13.1-1,19.3l-61,126.9C423.6,484.9,408.4,490.3,395.9,484.2z"/>
+	<g>
+		<g>
+			<path style="fill:#609926" d="M622.7,149.8c-4.1-4.1-9.6-4-9.6-4s-117.2,6.6-177.9,8c-13.3,0.3-26.5,0.6-39.6,0.7c0,39.1,0,78.2,0,117.2
+				c-5.5-2.6-11.1-5.3-16.6-7.9c0-36.4-0.1-109.2-0.1-109.2c-29,0.4-89.2-2.2-89.2-2.2s-141.4-7.1-156.8-8.5
+				c-9.8-0.6-22.5-2.1-39,1.5c-8.7,1.8-33.5,7.4-53.8,26.9C-4.9,212.4,6.6,276.2,8,285.8c1.7,11.7,6.9,44.2,31.7,72.5
+				c45.8,56.1,144.4,54.8,144.4,54.8s12.1,28.9,30.6,55.5c25,33.1,50.7,58.9,75.7,62c63,0,188.9-0.1,188.9-0.1s12,0.1,28.3-10.3
+				c14-8.5,26.5-23.4,26.5-23.4s12.9-13.8,30.9-45.3c5.5-9.7,10.1-19.1,14.1-28c0,0,55.2-117.1,55.2-231.1
+				C633.2,157.9,624.7,151.8,622.7,149.8z M125.6,353.9c-25.9-8.5-36.9-18.7-36.9-18.7S69.6,321.8,60,295.4
+				c-16.5-44.2-1.4-71.2-1.4-71.2s8.4-22.5,38.5-30c13.8-3.7,31-3.1,31-3.1s7.1,59.4,15.7,94.2c7.2,29.2,24.8,77.7,24.8,77.7
+				S142.5,359.9,125.6,353.9z M425.9,461.5c0,0-6.1,14.5-19.6,15.4c-5.8,0.4-10.3-1.2-10.3-1.2s-0.3-0.1-5.3-2.1l-112.9-55
+				c0,0-10.9-5.7-12.8-15.6c-2.2-8.1,2.7-18.1,2.7-18.1L322,273c0,0,4.8-9.7,12.2-13c0.6-0.3,2.3-1,4.5-1.5c8.1-2.1,18,2.8,18,2.8
+				l110.7,53.7c0,0,12.6,5.7,15.3,16.2c1.9,7.4-0.5,14-1.8,17.2C474.6,363.8,425.9,461.5,425.9,461.5z"/>
+			<path style="fill:#609926" d="M326.8,380.1c-8.2,0.1-15.4,5.8-17.3,13.8c-1.9,8,2,16.3,9.1,20c7.7,4,17.5,1.8,22.7-5.4
+				c5.1-7.1,4.3-16.9-1.8-23.1l24-49.1c1.5,0.1,3.7,0.2,6.2-0.5c4.1-0.9,7.1-3.6,7.1-3.6c4.2,1.8,8.6,3.8,13.2,6.1
+				c4.8,2.4,9.3,4.9,13.4,7.3c0.9,0.5,1.8,1.1,2.8,1.9c1.6,1.3,3.4,3.1,4.7,5.5c1.9,5.5-1.9,14.9-1.9,14.9
+				c-2.3,7.6-18.4,40.6-18.4,40.6c-8.1-0.2-15.3,5-17.7,12.5c-2.6,8.1,1.1,17.3,8.9,21.3c7.8,4,17.4,1.7,22.5-5.3
+				c5-6.8,4.6-16.3-1.1-22.6c1.9-3.7,3.7-7.4,5.6-11.3c5-10.4,13.5-30.4,13.5-30.4c0.9-1.7,5.7-10.3,2.7-21.3
+				c-2.5-11.4-12.6-16.7-12.6-16.7c-12.2-7.9-29.2-15.2-29.2-15.2s0-4.1-1.1-7.1c-1.1-3.1-2.8-5.1-3.9-6.3c4.7-9.7,9.4-19.3,14.1-29
+				c-4.1-2-8.1-4-12.2-6.1c-4.8,9.8-9.7,19.7-14.5,29.5c-6.7-0.1-12.9,3.5-16.1,9.4c-3.4,6.3-2.7,14.1,1.9,19.8
+				C343.2,346.5,335,363.3,326.8,380.1z"/>
+		</g>
+	</g>
+</g>
+</svg>

images/icons/gofundme.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.132 18.4042C18.5041 15.5885 15.4684 13.6966 11.9927 13.6966C8.50229 13.6966 5.46654 15.5885 3.83868 18.4042H20.132Z" fill="white"/>
+<path d="M23.549 9.19432C22.9331 8.59303 21.9505 8.59303 21.3492 9.19432L19.0174 11.5261C18.4308 12.1127 18.4161 13.066 18.9588 13.6673L19.0174 13.7259C19.6334 14.3272 20.616 14.3272 21.2172 13.7259L23.549 11.3941C24.1503 10.7782 24.1503 9.7956 23.549 9.19432Z" fill="white"/>
+<path d="M2.65078 9.19432C2.06416 8.6077 1.11091 8.59303 0.509623 9.13566L0.450962 9.19432C-0.150321 9.81027 -0.150321 10.7929 0.450962 11.3941L2.78277 13.7259C3.39872 14.3272 4.3813 14.3272 4.98259 13.7259C5.58387 13.11 5.58387 12.1274 4.98259 11.5261L2.65078 9.19432Z" fill="white"/>
+<path d="M12.0367 5H11.9633C11.1127 5 10.4235 5.68927 10.4088 6.55454V9.85426C10.4088 10.7049 11.1127 11.4088 11.9633 11.4088C12.8139 11.4088 13.5179 10.7049 13.5179 9.85426V6.55454C13.5179 5.71861 12.8579 5.02933 12.0367 5Z" fill="white"/>
+</svg>

images/icons/gpg.svg

@@ -0,0 +1,88 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://web.resource.org/cc/"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   id="svg2"
+   sodipodi:version="0.32"
+   inkscape:version="0.45"
+   width="70"
+   height="92"
+   version="1.0"
+   sodipodi:docbase="D:\Desktop"
+   sodipodi:docname="GnuPG-Logo.png"
+   sodipodi:modified="true">
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs5" />
+  <sodipodi:namedview
+     inkscape:window-height="975"
+     inkscape:window-width="1280"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     guidetolerance="10.0"
+     gridtolerance="10.0"
+     objecttolerance="10.0"
+     borderopacity="1.0"
+     bordercolor="#666666"
+     pagecolor="#ffffff"
+     id="base"
+     width="70px"
+     height="92px"
+     inkscape:zoom="4"
+     inkscape:cx="37.678772"
+     inkscape:cy="50.578436"
+     inkscape:window-x="-4"
+     inkscape:window-y="-4"
+     inkscape:current-layer="svg2" />
+  <rect
+     style="opacity:1;fill:#0093dd;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.5;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+     id="rect3132"
+     width="70"
+     height="47.099998"
+     x="0"
+     y="44.900002" />
+  <rect
+     style="opacity:1;fill:#0093dd;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.5;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+     id="rect4103"
+     width="15.009007"
+     height="19.485378"
+     x="4.7396865"
+     y="25.468845" />
+  <rect
+     style="opacity:1;fill:#0093dd;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.5;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+     id="rect4105"
+     width="15.18455"
+     height="19.239996"
+     x="50.117794"
+     y="25.694933" />
+  <path
+     style="opacity:1;fill:#0093dd;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="M 35.625,0 C 13.155955,0.16164779 4.75,20.998357 4.75,25.5625 C 10.896546,25.562499 17.561658,25.90625 18.96875,25.90625 C 19.298759,25.90625 19.367598,25.906322 19.6875,25.90625 C 21.365862,19.035999 27.552617,13.9375 34.9375,13.9375 C 42.289526,13.9375 48.445364,18.988532 50.15625,25.8125 C 50.543323,25.812313 50.720292,25.8125 51.125,25.8125 C 63.764162,25.8125 65.25,25.90625 65.25,25.90625 C 65.25,25.90625 60.201152,-0.17554394 35.625,0 z "
+     id="path6045" />
+  <path
+     style="fill:#ffffff;fill-rule:evenodd;stroke:none;stroke-width:0.1;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none;fill-opacity:1"
+     d="M 10.269321,25.20553 C 21.691029,1.9172856 37.700972,5.1573508 46.958242,6.5921309 C 46.958242,6.5921309 34.785164,0.76242296 23.084029,6.5100997 C 11.608567,12.146925 10.269321,25.20553 10.269321,25.20553 z "
+     id="path7026"
+     sodipodi:nodetypes="ccsc" />
+  <path
+     style="fill:#ffffff;fill-rule:evenodd;stroke:none;stroke-width:0.1;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none;fill-opacity:1"
+     d="M -0.25,68.25 C -0.25,68.25 7.5390098,59.548683 13.8125,57.25 C 22,54.25 32,55.1875 48.5625,51.875 C 54.425075,50.702485 56.25,49.25 65.1875,44.625 C 65.942492,44.234305 70.5625,44.3125 70.5625,44.3125 L 70.1875,50.5625 C 60,61.25 36.75,67.21875 34.8125,67.125 C 54.479984,69.763423 64.97809,59.568082 69.25,58.9375 C 59.3125,80.0625 24.0625,79 24.0625,79 C 44.5,84.5625 61.125,76.25 61.125,76.25 C 51.8125,91.65625 17.4375,89.5625 17.4375,89.5625 C 13.84375,89.875 10.9375,92.1875 10.9375,92.1875 L -0.125,92.5 L -0.25,68.25 z "
+     id="path7997"
+     sodipodi:nodetypes="cssscccccccccc" />
+</svg>

index.html

@@ -6,15 +6,12 @@
   <!-- Page Information
   –––––––––––––––––––––––––––––––––––––––––––––––––– -->
   <meta charset="utf-8">
-  <title>LittleLink</title>
+  <title>Syrell</title>
-  <meta name="description" content="https://littlelink.io">
-  <meta name="author" content="Seth Cottle">
 
   <!-- Mobile Specific Metas
   –––––––––––––––––––––––––––––––––––––––––––––––––– -->
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
-
   <!-- CSS
   –––––––––––––––––––––––––––––––––––––––––––––––––– -->
   <link rel="stylesheet" href="css/normalize.css">
@@ -24,12 +21,20 @@
             Light:  css/skeleton-light.css
             Dark:   css/skeleton-dark.css
      -->
+     <script>
+      function setTheme() {
+         var decider = document.getElementById('darkmode-toggle').checked ? 'dark' : 'light';
+         document.head.insertAdjacentHTML(
+             'beforeend',
+             `<link rel="stylesheet" href="css/skeleton-${decider}.css" onload="document.documentElement.style.display = \'\'">`
+         );         
+       }
+      </script>
     <link rel="stylesheet" href="css/skeleton-auto.css">
 
     <!-- Brand Styles -->
     <link rel="stylesheet" href="css/brands.css">
 
-
   <!-- Favicon
   –––––––––––––––––––––––––––––––––––––––––––––––––– -->
   <link rel="icon" type="image/png" href="images/littlelink.png">
@@ -63,13 +68,12 @@
         -->
 
         <!-- Your Image Here -->
-        <img src="images/littlelink.svg" class="avatar" srcset="images/littlelink.svg 2x" alt="LittleLink Logo">
+        <img src="images/parrot.png" class="avatar" srcset="images/parrot.png 2x" alt="">
 
         <!-- Title -->
-        <h1>LittleLink</h1>
+        <h1 role="heading">Syrell</h1>
 
         <!-- Short Bio -->
-        <p>An open source DIY <a href="https://linktr.ee" target="_blank" rel="noopener">Linktree</a> alternative.</p>
 
         <!--
 
@@ -86,6 +90,8 @@
           4.) rel="noopener" | This attribute instructs the browser to navigate to the target resource without granting the new browsing context access to the document that opened it.
           This is especially useful when opening untrusted links. https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/noopener
 
+          5.) role="button" | The button role identifies an element as a button to assistive technology such as screen readers.
+
           ## Breaking down the <img> attributes:
           
           1.) class="icon" | This class is telling the <img> tag that it should use the styling for icons found in `css/brands.css`.
@@ -93,328 +99,47 @@
           2.) src="images/icons/[icon-name].svg" | This defines the icon you would like to display from the 'images/icons/' folder. For example, you can change this to src="images/icons/discord.svg" to use the Discord icon.
           Add your own 24x24 icons to the "icons" folder to reference them. We recommend providing a SVG.
 
-          3.) alt="Example Logo" | This alt attribute helps provides alternate text for an image, this can assist users who use screen readers. 
+          3.) alt="" | Since the text at the end of the snippet, "..>[Button Text]</a><br>", explains what the button is, we use "alt=""" to nullify the icon annoucement from the accessibility tree. 
+          This can improve the experience for assistive technology users by hiding what is essentially duplicated
 
         -->
+        <input class="button" type="checkbox" id="darkmode-toggle" onclick="setTheme()"/>
+        <label for="darkmode-toggle"></label>
 
-        <!-- Default LittleLink -->
+        <script>
-        <a class="button button-default" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/littlelink.svg" alt="LittleLink Logo">LittleLink</a><br>
+          if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            document.getElementById("darkmode-toggle").checked = true;
+          }
+          else {
+            document.getElementById("darkmode-toggle").checked = false;
+          }
+        </script>
 
-        <!-- Amazon -->
+        <!-- Email -->
-        <a class="button button-amazon" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/amazon.svg" alt="Amazon Logo">Amazon Wishlist</a><br>
+        <a class="button button-default" href="mailto:contact@syyrell.com" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/generic-email.svg" alt="">Email</a><br>
 
-        <!-- Amazon Music -->
+        <!-- GPG -->
-        <a class="button button-amazon-music" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/amazon-music.svg" alt="Amazon Music Logo">Listen on Amazon Music</a><br>       
+        <a class="button button-gpg" href="https://git.syyrell.com/syrell.gpg" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/gpg.svg" alt="">GPG</a><br>
-        
-        <!-- Apple App Store -->
-        <a class="button button-appstore" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/apple.svg" alt="Apple Logo">Apple App Store</a><br>
 
-        <!-- Apple Music -->
+        <!-- Gitea -->
-        <a class="button button-apple-music" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/apple-music.svg" alt="Apple Music Logo">Listen on Apple Music</a><br>            
+        <a class="button button-gitea" href="https://git.syyrell.com/syrell" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/gitea.svg" alt="">Gitea</a><br>
-       
-        <!-- Apple Music Alternate -->
-        <a class="button button-apple-music-alt" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/apple-music-alt.svg" alt="Apple Music Logo">Listen on Apple Music</a><br> 
-
-        <!-- Apple Podcasts -->
-        <a class="button button-apple-podcasts" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/apple-podcasts.svg" alt="Apple Prodcasts Logo">Listen on Apple Podcasts</a><br> 
-        
-        <!-- Apple Podcasts Alternate -->
-        <a class="button button-apple-podcasts-alt" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/apple-podcasts-alt.svg" alt="Apple Prodcasts Logo">Listen on Apple Podcasts</a><br> 
-
-        <!-- Bandcamp -->
-        <a class="button button-bandcamp" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/bandcamp.svg" alt="Bandcamp Logo">Bandcamp</a><br> 
-
-        <!-- Behance -->
-        <a class="button button-behance" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/behance.svg" alt="Behance Logo">Behance</a><br> 
-
-        <!-- Bluesky -->
-        <a class="button button-bluesky" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/bluesky.svg" alt="Bluesky Logo">Bluesky</a><br> 
-
-        <!-- Buy Me A Coffee -->
-        <a class="button button-coffee" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/buy-me-a-coffee.svg" alt="Buy Me A Coffee Logo">Buy Me A Coffee</a><br>
-
-        <!-- Cal.com -->
-        <a class="button button-cal" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/cal.svg" alt="Cal.com Logo">Schedule with Cal.com</a><br>
-
-        <!-- Calendly -->
-        <a class="button button-calendly" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/calendly.svg" alt="Calendly Logo">Schedule with Calendly</a><br>
-
-        <!-- Cash App -->
-        <a class="button button-cash-app" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/cash-app-dollar.svg" alt="Cash App Logo">Cash App</a><br>
-
-        <!-- Clubhouse -->
-        <a class="button button-clubhouse" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/clubhouse.svg" alt="Clubhouse Logo">Clubhouse</a><br>
-
-        <!-- Dev.to -->
-        <a class="button button-dev-to" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/dev-to.svg" alt="Dev.to Logo">Dev.to</a><br>
-
-        <!-- Discord -->
-        <a class="button button-discord" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/discord.svg" alt="Discord Logo">Discord</a><br>
-
-        <!-- Dribbble -->
-        <a class="button button-dribbble" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/dribbble.svg" alt="Dribbble Logo">Dribbble</a><br>
-
-        <!-- Etsy -->
-        <a class="button button-etsy" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/etsy.svg" alt="Etsy Logo">Shop on Etsy</a><br>
-
-        <!-- Facebook -->
-        <a class="button button-faceb" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/facebook.svg" alt="Facebook Logo">Find us on Facebook</a><br>
-
-        <!-- Facebook Messenger -->
-        <a class="button button-messenger" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/messenger.svg" alt="Facebook Messenger Logo">Chat on Messenger</a><br>
-
-        <!-- Figma -->
-        <a class="button button-figma" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/figma.svg" alt="Figma Logo">Figma Community</a><br>
-
-        <!-- Fiverr -->
-        <a class="button button-fiverr" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/fiverr.svg" alt="Fiverr Logo">Fiverr Gig</a><br>
-
-        <!-- Flickr -->
-        <a class="button button-flickr" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/flickr.svg" alt="Flickr Logo">Flickr</a><br>
-
-        <!-- GitHub -->
-        <a class="button button-github" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/github.svg" alt="GitHub Logo">GitHub</a><br>
 
         <!-- GitLab -->
-        <a class="button button-gitlab" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/gitlab.svg" alt="GitLab Logo">GitLab</a><br>
+        <a class="button button-gitlab" href="https://gitlab.com/syrell" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/gitlab.svg" alt="">GitLab</a><br>       
 
-        <!-- Goodreads -->
+        <!-- Hedgedoc -->
-        <a class="button button-goodreads" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/goodreads.svg" alt="Goodreads Logo">Goodreads</a><br>
+        <a class="button button-hedgedoc" href="https://hedgedoc.syyrell.com/" target="_blank" rel="noopener" role="button"><img class="icon icon-hedgedoc" src="images/icons/hedgedoc.png" alt="">Hedgedoc</a><br>
 
-        <!-- Google Drive -->
+        <!-- Mealie -->
-        <a class="button button-google-black" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/google-drive.svg" alt="Google Drive Logo">View in Google Drive</a><br>
+        <a class="button button-mealie" href="https://food.syyrell.com/" target="_blank" rel="noopener" role="button"><img class="icon icon-mealie" src="images/icons/mealie.png" alt="">Mealie</a><br>
 
-        <!-- Google Play Store -->
-        <a class="button button-playstore" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/google-play.svg" alt="Google Play Store Logo">Google Play Store</a><br>
-
-        <!-- Google Podcasts -->
-        <a class="button button-google-podcasts" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/google-podcasts.svg" alt="Google Podcasts Logo">Listen on Google Podcasts</a><br>
-
-        <!-- Google Scholar -->
-        <a class="button button-google-scholar" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/google-scholar.svg" alt="Google Scholar Logo">Google Scholar</a><br>
-
-        <!-- Guilded -->
-        <a class="button button-guilded" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/guilded.svg" alt="Guilded Logo">Guilded</a><br>
-
-        <!-- Hashnode -->
-        <a class="button button-hashnode" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/hashnode.svg" alt="Hashnode Logo">Hashnode</a><br>
-
-        <!-- Instagram -->
-        <a class="button button-instagram" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/instagram.svg" alt="Instagram Logo">Instagram</a><br>
-
-        <!-- Kickstarter -->
-        <a class="button button-kickstarter" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/kickstarter.svg" alt="Kickstarter Logo">Kickstarter</a><br>
-
-        <!-- Kit -->
-        <a class="button button-kit" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/kit.svg" alt="Kit Logo">Kit</a><br>
-
-        <!-- Ko-fi -->
-        <a class="button button-ko-fi" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/ko-fi.svg" alt="Ko-fi Logo">Ko-fi</a><br>
-
-        <!-- Last.fm -->
-        <a class="button button-last-fm" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/last-fm.svg" alt="Last.fm Logo">Last.fm</a><br>
-
-        <!-- Letterboxd -->
-        <a class="button button-letterboxd" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/letterboxd.svg" alt="Letterboxd Logo">Letterboxd</a><br>
-
-        <!-- Line -->
-        <a class="button button-line" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/line.svg" alt="Line Logo">Line</a><br>
-
-        <!-- LinkedIn -->
-        <a class="button button-linked" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/linkedin.svg" alt="LinkedIn Logo">LinkedIn</a><br>
-
-        <!-- Mailchimp -->
-        <a class="button button-mailchimp" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/mailchimp.svg" alt="Mailchimp Logo">Mailchimp</a><br>
-
-        <!-- Mastodon -->
-        <a class="button button-mastodon" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/mastodon.svg" alt="Mastodon Logo">Mastodon</a><br>
-
-        <!-- Medium -->
-        <a class="button button-medium" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/medium.svg" alt="Medium Logo">Medium</a><br>
-
-        <!-- Notion -->
-        <a class="button button-notion" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/notion.svg" alt="Notion Logo">Notion</a><br>
-
-        <!-- OnlyFans -->
-        <a class="button button-onlyfans" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/onlyfans.svg" alt="OnlyFans Logo">OnlyFans (18+)</a><br>
-
-        <!-- Patreon -->
-        <a class="button button-patreon" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/patreon.svg" alt="Patreon Logo">Patreon</a><br>
-
-        <!-- PayPal -->
-        <a class="button button-paypal" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/paypal.svg" alt="PayPal Logo">PayPal</a><br>
-
-        <!-- Pinterest -->
-        <a class="button button-pinterest" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/pinterest.svg" alt="Pinterest Logo">Pinterest</a><br>
-
-        <!-- Post.news -->
-        <a class="button button-post-news" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/post-news.svg" alt="Post.news Logo">Post.news</a><br>
-
-        <!-- Product Hunt -->
-        <a class="button button-product-hunt" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/product-hunt.svg" alt="Product Hunt Logo">Product Hunt</a><br>
-
-        <!-- Read.cv -->
-        <a class="button button-read-cv" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/read-cv.svg" alt="Read.cv Logo">Read.cv</a><br>
-
-        <!-- Redbubble -->
-        <a class="button button-redbubble" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/redbubble.svg" alt="Redbubble Logo">Redbubble</a><br>
-
-        <!-- Reddit -->
-        <a class="button button-reddit" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/reddit.svg" alt="Reddit Logo">Reddit</a><br>
-
-        <!-- Shop -->
-        <a class="button button-shop" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/shop.svg" alt="Shop Logo">Buy with Shop</a><br>
-
-        <!-- Signal -->
-        <a class="button button-signal" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/signal.svg" alt="Signal Logo">Signal</a><br>
-
-        <!-- Skoob -->
-        <a class="button button-skoob" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/skoob.svg" alt="Skoob Logo">Skoob</a><br>
-
-        <!-- Slack -->
-        <a class="button button-slack" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/slack.svg" alt="Slack Logo">Join Slack</a><br>
-
-        <!-- Snapchat -->
-        <a class="button button-snapchat" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/snapchat.svg" alt="Snapchat Logo">Snapchat</a><br>
-
-        <!-- SoundCloud -->
-        <a class="button button-soundcloud" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/soundcloud.svg" alt="SoundCloud Logo">SoundCloud</a><br>
-
-        <!-- Spotify -->
-        <a class="button button-spotify" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/spotify.svg" alt="Spotify Logo">Listen on Spotify</a><br>
-
-        <!-- Spotify Alt -->
-        <a class="button button-spotify-alt" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/spotify-alt.svg" alt="Spotify Logo">Listen on Spotify</a><br>
-
-        <!-- Square -->
-        <a class="button button-square" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/square.svg" alt="Square Logo">Buy with Square</a><br>
-
-        <!-- Steam -->
-        <a class="button button-steam" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/steam.svg" alt="Steam Logo">Steam</a><br>
-
-        <!-- Strava -->
-        <a class="button button-strava" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/strava.svg" alt="Strava Logo">Strava</a><br>
-
-        <!-- Substack -->
-        <a class="button button-substack" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/substack.svg" alt="Substack Logo">Substack</a><br>
-
-        <!-- Telegram -->
-        <a class="button button-telegram" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/telegram.svg" alt="Telegram Logo">Telegram</a><br>
-
-        <!-- Threema -->
-        <a class="button button-threema" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/threema.svg" alt="Threema Logo">Threema</a><br>
-
-        <!-- TikTok -->
-        <a class="button button-tiktok" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/tiktok.svg" alt="TikTok Logo">TikTok</a><br>
-
-        <!-- Trello -->
-        <a class="button button-trello" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/trello.svg" alt="Trello Logo">Trello</a><br>
-
-        <!-- Tumblr -->
-        <a class="button button-tumb" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/tumblr.svg" alt="Tumblr Logo">Tumblr</a><br>
-
-        <!-- Twitch -->
-        <a class="button button-twitch" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/twitch.svg" alt="Twitch Logo">Twitch</a><br>
-
-        <!-- Twitter -->
-        <a class="button button-twit" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/twitter.svg" alt="Twitter Logo">Twitter</a><br>
-
-        <!-- Unsplash -->
-        <a class="button button-unsplash" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/unsplash.svg" alt="Unsplash Logo">Unsplash</a><br>
-
-        <!-- Untappd -->
-        <a class="button button-untappd" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/untappd.svg" alt="Untapped Logo">Untappd</a><br>
-
-        <!-- Upwork -->
-        <a class="button button-upwork" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/upwork.svg" alt="Upwork Logo">Upwork</a><br>
-
-        <!-- Venmo -->
-        <a class="button button-venmo" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/venmo.svg" alt="Venmo Logo">Venmo</a><br>
-
-        <!-- Vimeo -->
-        <a class="button button-vimeo" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/vimeo.svg" alt="Clubhouse Logo">Vimeo</a><br>
-
-        <!-- VRChat -->
-        <a class="button button-vrchat" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/vrchat.svg" alt="VR Chat Logo">VRChat</a><br>
-
-        <!-- VSCO -->
-        <a class="button button-vsco" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/vsco.svg" alt="VR Chat Logo">VSCO</a><br>
-
-        <!-- WhatsApp -->
-        <a class="button button-whatsapp" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/whatsapp.svg" alt="WhatsApp Logo">WhatsApp</a><br>
-
-        <!-- WordPress -->
-        <a class="button button-wordpress" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/wordpress.svg" alt="WordPress Logo">WordPress</a><br>
-
-        <!-- Xing -->
-        <a class="button button-xing" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/xing.svg" alt="Xing Logo">Xing</a><br>
-
-        <!-- YouTube -->
-        <a class="button button-yt" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/youtube.svg" alt="YouTube Logo">YouTube</a><br>        
-
-        <!-- YouTube Music -->
-        <a class="button button-yt" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/youtube-music.svg" alt="YouTube Music Logo">Listen on YouTube Music</a><br>
-
-        <!-- Zoom -->
-        <a class="button button-zoom" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/zoom.svg" alt="Zoom Logo">Join Zoom Webinar</a><br>  
-
-        <!-- Generic Blog -->
-        <a class="button button-default" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/generic-blog.svg" alt="Blog Icon">Read our blog</a><br>
-
-        <!-- Generic Calendar -->
-        <a class="button button-default" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/generic-calendar.svg" alt="Calendar Icon">Event RSVP</a><br>
-
-        <!-- Generic Cloud -->
-        <a class="button button-default" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/generic-cloud.svg" alt="Cloud Icon">Download File</a><br>
-
-        <!-- Generic Code -->
-        <a class="button button-default" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/generic-code.svg" alt="Code Icon">View the code</a><br>
-
-        <!-- Generic Computer -->
-        <a class="button button-default" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/generic-computer.svg" alt="Computer Icon">Homelab Setup</a><br>
-
-        <!-- Generic Email -->
-        <a class="button button-default" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/generic-email.svg" alt="Email Icon">Email Us</a><br>
-
-        <!-- Generic Email Alt -->
-        <a class="button button-default" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/generic-email-alt.svg" alt="Email Alt Icon">Email Us</a><br>
-
-        <!-- Generic Homepage -->
-        <a class="button button-default" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/generic-homepage.svg" alt="Homepage Icon">Visit Homepage</a><br>
-
-        <!-- Generic Map -->
-        <a class="button button-default" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/generic-map.svg" alt="Map Icon">Get Directions</a><br>
-
-        <!-- Generic Phone -->
-        <a class="button button-default" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/generic-phone.svg" alt="Phone Icon">Call Us</a><br>
-
-        <!-- Generic Review -->
-        <a class="button button-default" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/generic-review.svg" alt="Review Icon">Leave us a review</a><br>
-
-        <!-- Generic RSS -->
-        <a class="button button-default" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/generic-rss.svg" alt="RSS Icon">RSS Subscribe</a><br>
-
-        <!-- Generic Shopping Bag -->
-        <a class="button button-default" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/generic-shopping-bag.svg" alt="Shopping Bag Icon">Visit Our Shop</a><br>
-                
-        <!-- Generic Shopping Tag -->
-        <a class="button button-default" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/generic-shopping-tag.svg" alt="Shopping Tag Icon">10% Discount</a><br>
-
-        <!-- Generic SMS -->
-        <a class="button button-default" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/generic-sms.svg" alt="SMS Icon">Send us a message</a><br>
-
-        <!-- Generic Website -->
-        <a class="button button-default" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/generic-website.svg" alt="Website Icon">Visit Website</a><br>
-
-        <br>
         <!-- 
             Footer:
             This includes a link to privacy.html page which can be setup for your Privacy Policy.
             This also includes a link to the LittleLink repository to make forking LittleLink easier.
             You can edit or remove anything here to make your own footer.
         -->
-        <p><a href="privacy.html">Privacy Policy</a> | Build your own by forking <a href="https://littlelink.io" target="_blank" rel="noopener">LittleLink</a>.</p>
+        <p>© Syrell</p>
-
       </div>
     </div>
   </div>

privacy.html

@@ -1,164 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
-
-    <!-- Page Information
-  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
-    <meta charset="utf-8" />
-    <title>LittleLink Privacy Policy</title>
-    <meta name="description" content="https://littlelink.io" />
-    <meta name="author" content="Seth Cottle" />
-
-    <!-- Mobile Specific Metas
-  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-
-    <!-- CSS
-  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
-    <link rel="stylesheet" href="css/normalize.css" />
-
-    <!-- 
-        Themes:
-         Auto:   css/skeleton-auto.css
-         Light:  css/skeleton-light.css
-         Dark:   css/skeleton-dark.css
-     -->
-
-    <link rel="stylesheet" href="css/skeleton-auto.css" />
-    <link rel="stylesheet" href="css/brands.css" />
-
-    <!-- Favicon
-  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
-    <link rel="icon" type="image/png" href="images/littlelink.png" />
-
-  </head>
-
-  <body>
-    <!-- Primary Page Layout
-  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
-    <div class="container-left">
-      <div class="row">
-        <div class="column" style="margin-top: 10%">
-          <p>
-            <a href="index.html">⬅️ Back to main page</a>
-          </p>
-
-          <!--
-            Privacy Policy:
-            We recommend adding a Privacy Policy to your LittleLink. Adding one can help you stay compliant 
-            with different privacy legislation and can also help set expectations for your site visitors.
-
-            This is a boilerplate, what is here may not be applicable to you. By default, we give three sections...
-
-            Analytics: where you can add links to analytic services.
-
-            Content From External Platforms: This could be used for CDN services or additional buttons like GitHub hotlinkable buttons.
-
-            Hosting and Backend Infrastructure: For where you host your LittleLink.
-
-            You can remove, edit, and add to these as necessary for your project. 
-          -->
-
-          <!-- Page Name -->
-          <h1>🔒 Privacy Overview</h1>
-
-          <!-- Page Information -->
-          <p>
-            <b
-              >Personal Data collected for the following purposes and using the
-              following services:</b
-            >
-            <br />
-            <br />
-            <!-- Start Section -->
-            <b>🧮 Analytics</b>
-            <br />
-            The services contained in this section enable the Owner to monitor
-            and analyze web traffic and can be used to keep track of User
-            behavior.
-            <br />
-            <br />
-            <!-- Here you can add any analytics companies you use and what they track -->
-            <b>1.) Example LLC.</b><br />
-            Personal Data:
-            <i
-              >various types of Data as specified in the privacy policy of the
-              service</i
-            ><br />
-            <a href="https://example.com/privacy/"
-              >Privacy Policy</a
-            >
-          </p>
-          <!-- End Section -->
-
-          <!-- Start Section -->
-          <p>
-            <b>📦 Displaying Content From External Platforms</b>
-            <br />
-            This type of service allows you to view content hosted on external
-            platforms directly from the pages of this website and interact with
-            them.<br /><br />
-            This type of service might still collect web traffic data for the
-            pages where the service is installed, even when Users do not use it.
-            <br />
-            <br />
-            <!-- Add any external cdn's and they use and what they track -->
-            <b>1.) Example LLC</b><br />
-            Personal Data:
-            <i
-              >Usage Data; various types of Data as specified in the privacy
-              policy of the service</i
-            >
-            <br />
-            <a href="https://example.com/privacy/"
-              >Privacy Policy</a
-            >
-          </p>
-          <!-- End Section -->
-
-          <!-- Start Section -->
-          <p>
-            <b>📁 Hosting and Backend Infrastructure</b>
-            <br />
-            This type of service has the purpose of hosting Data and files that
-            enable this website to exist.
-            <br />
-            <br />
-            Some services among those listed below, if any, may work through
-            geographically distributed servers, making it difficult to determine
-            the actual location where the Personal Data are stored.
-            <br />
-            <br />
-            <!-- Here you can add any hosting companies you use and what they track -->
-            <b>1.) Example LLC.</b><br />
-            Personal Data:
-            <i
-              >various types of Data as specified in the privacy policy of the
-              service</i
-            >
-            <br />
-            <a href="https://example.com/privacy"
-              >Privacy Policy</a
-            >
-          </p>
-          <!-- End Section -->
-          <br />
-          <br />
-          
-          <!-- 
-            Footer:
-            This includes a link to the LittleLink repository to make forking LittleLink easier.
-            You can edit or remove anything here to make your own footer.
-           -->
-          <center>
-            <p>Build your own by forking <a href="https://littlelink.io" target="_blank" rel="noopener">LittleLink</a>.</p>
-          </center>
-        </div>
-      </div>
-    </div>
-
-    <!-- End Document
-  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
-  </body>
-</html>