diff --git a/.gitignore b/.gitignore
index 4befed30..a036416d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
.DS_Store
.idea
+.devcontainer
\ No newline at end of file
diff --git a/LICENSE.md b/LICENSE.md
index 03231cc6..bfe6bc4e 100644
--- a/LICENSE.md
+++ b/LICENSE.md
@@ -1,5 +1,5 @@
MIT License
-Copyright 2019-2021 Seth Cottle
+Copyright 2019-2024 Seth Cottle
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
diff --git a/README.md b/README.md
index a2b84a04..e7a24459 100644
--- a/README.md
+++ b/README.md
@@ -1,25 +1,25 @@
-![Logo](https://cdn.cottle.cloud/littlelink/littlelink.gif)
+![Logo](https://cdn.cottle.cloud/GitHub/LittleLink/littlelink.gif)
# LittleLink
The DIY self-hosted LinkTree alternative. LittleLink has more than 100 branded button styles you can easily use, with more regularly added by our community in this repo and in [LittleLink Extended](https://github.com/sethcottle/littlelink-extended).
---
### ๐ Themes and Accessibility
-LittleLink offers both `light` and `dark` themes right out of the box. If the default color schemes don't match your preference, you can easily customize them by updating the values in `skeleton-light.css` or `skeleton-dark.css`. For those who prefer an automatic adjustment, setting your CSS to `skeleton-auto.css` enables the theme to adapt based on the device's system settings. To enhance visual accessibility in both `light` and `dark` modes, buttons lacking sufficient contrast with the background are outlined with an inverse stroke to ensure visibility. While LittleLink emphasizes accessibility, it's important to acknowledge that not all brands incorporated into LittleLink achieve this standard. Branded buttons that come into LittleLink always retain the original essence of the brand and some branded buttons might fall short of optimal accessibility in terms of contrast.
+LittleLink offers `auto`, `light`, and `dark` themes right out of the box. If the default color schemes don't match your preference, you can easily customize them by updating the values in `style.css`. You can set any of the themes right in `index.html`. To enhance visual accessibility in both `light` and `dark` modes, buttons lacking sufficient contrast with the background are outlined with an inverse stroke to ensure visibility. While LittleLink emphasizes accessibility, it's important to acknowledge that not all brands incorporated into LittleLink achieve this standard. Branded buttons that come into LittleLink always retain the original essence of the brand and some branded buttons might fall short of optimal accessibility in terms of contrast.
-![Theme](https://cdn.cottle.cloud/littlelink/themesupport.gif)
+![Theme](https://cdn.cottle.cloud/GitHub/LittleLink/ThemeSupport.gif)
---
### ๐ฅ Performance
-![Performance](https://cdn.cottle.cloud/littlelink/PerformanceBlock.svg)
+![Performance](https://cdn.cottle.cloud/GitHub/LittleLink/ranking.gif)
-LittleLink epitomizes simplicity and minimalism. When evaluating the [LittleLink sample page](https://littlelink.io/sample/seth) (which mirrors a typical LittleLink setup for an individual) through tools such as [Google PageSpeed Insights](https://pagespeed.web.dev/analysis/https-littlelink-io-sample-seth/17ex80ryq4?form_factor=mobile), showcases LittleLink's excellence with 100/100 in Performance, Accessibility, Best Practices, and SEO. My initial vision for LittleLink was to craft it from the fundamentals. I chose [Skeleton](http://getskeleton.com/) as the foundation, enabling me to create something minimal and quick, removing the unnecessary bloat you would get from using a large framework for a page that requires nothing more than simplicity.
+LittleLink epitomizes simplicity and minimalism. When evaluating the [LittleLink sample page](https://littlelink.io/sample/seth) (which mirrors a typical LittleLink setup for an individual) through tools such as [Google PageSpeed Insights](https://pagespeed.web.dev/analysis/https-littlelink-io-sample-seth/17ex80ryq4?form_factor=mobile), showcases LittleLink's excellence with 100/100 in Performance, Accessibility, Best Practices, and SEO. My initial vision for LittleLink was to craft it from the fundamentals. LittleLink leverages it's own vanilla `css` to remove the unnecessary bloat you would get from using a large framework for a page that requires nothing more than simplicity.
---
### โ๏ธ Deploy
-![Publish](https://cdn.cottle.cloud/littlelink/Deployment.svg)
+![Publish](https://cdn.cottle.cloud/GitHub/LittleLink/test/css/deploy.gif)
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/), [Netlify](https://www.netlify.com/), or [Amplify](https://aws.amazon.com/amplify) using the button below. LittleLink is also easy to host through [GitHub Pages](https://pages.github.com/) or on your home lab server, CDN, or other frontend hosting services. To edit, all you need is a little basic HTML knowledge to add a link to the exisiting buttons or you can create your own. See our [adding custom buttons to your own fork wiki](https://github.com/sethcottle/littlelink/wiki/Adding-custom-buttons-to-your-own-fork). It's simple, promise. ๐ค
@@ -56,7 +56,7 @@ Duplicate the [LittleLink Template on Figma Community](https://www.figma.com/com
#### ๐๏ธ Misc
โข [Khashayar](https://github.com/khashayarzavosh) is building [LittleLink Admin](https://github.com/khashayarzavosh/admin-littlelink) which lets you host your own admin portal to manage LittleLink!
-โข [Julian](https://github.com/JulianPrieber) is building [LittleLink Custom](https://github.com/JulianPrieber/littlelink-custom) which approaches the admin portal with an easy-to-use "plug-and-play" mentality!
+โข [Julian](https://github.com/JulianPrieber) is building [LinkStack](https://github.com/LinkStackOrg/LinkStack), which is a fork of [Khashayar](https://github.com/khashayarzavosh)'s [LittleLink Admin](https://github.com/khashayarzavosh/admin-littlelink).
---
diff --git a/VERSION.md b/VERSION.md
new file mode 100644
index 00000000..7b929990
--- /dev/null
+++ b/VERSION.md
@@ -0,0 +1,42 @@
+# LittleLink Version History
+
+## Current Version: v3.0.0
+
+### v3.0.0 - 11/13/2024
+A complete modernization of LittleLink focusing on accessibility, maintainability, and more modern web standards.
+
+#### Major Changes
+- Complete rebuild of CSS architecture
+ - Moved away from Skeleton CSS dependency to custom, purpose-built CSS
+ - Improved maintainability with modular CSS structure
+ - Enhanced dark mode and auto themeing implementation
+ - Enhanced `brands.css`
+
+- Accessibility Improvements
+ - Improved keyboard navigation throughout
+ - Enhanced screen reader compatibility
+ - Better focus management and visible focus states
+ - Proper ARIA labels and semantic HTML structure
+
+- HTML Modernization
+ - Rebuilt `index.html`
+ - Rebuilt `privacy.html`
+ - Optimized meta tags and SEO structure
+
+#### Developer Experience
+- Better documented codebase
+- Simplified customization process
+- Improved maintainability
+- More consistent standards
+- Added VERSION.md so you know what version of LittleLink you downloaded
+
+#### Brand Changes
+- Updated PayPal button color
+- Updated Discord button color
+- Updated YouTube to us their Almost Black
+- Updated Ko-fi button color and updated their logo
+- Updated Medium logo
+
+---
+For the complete history of changes, please visit:
+https://github.com/sethcottle/littlelink/releases
\ No newline at end of file
diff --git a/css/brands.css b/css/brands.css
index 0f04e300..a3118aaa 100644
--- a/css/brands.css
+++ b/css/brands.css
@@ -1,1079 +1,722 @@
/*
-* littlelink.io
-* Skeleton V2.0.4
-* Copyright 2014, Dave Gamache
-* www.getskeleton.com
-* Free to use under the MIT license.
+* LittleLink Button Styles
+* https://littlelink.io
+* 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 Button Base Styles
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
-
-.button,
-button {
- display: inline-block;
- text-decoration: none;
- height: 100%;
- text-align: center;
- vertical-align: middle;
- font-size: 18px;
- width: 300px;
- font-weight: 700;
- 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: #212121;
- border-color: #888;
- outline: #7AB8FF solid 3px
-}
-.button.button-primary {
- color: #fff;
- filter: brightness(90%);
-}
-.button.button-primary:hover,
-.button.button-primary:focus {
- color: #fff;
- filter: brightness(90%);
+/* Only include brand-specific button styling here */
+.button,button {
+ color:var(--button-text,#000000);
+ background-color:var(--button-background,transparent);
+ border:var(--button-border,none);
+ transition:filter 0.2s ease,transform 0.2s ease;
}
-/* Brand Icons
+/* Global Button Hover Effect
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
+.button:hover,button:hover {
+ filter:brightness(90%);
+ transform:translateY(-1px);
+}
+/* Button Icons
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
.icon {
- padding: 0px 8px 3.5px 0px;
- vertical-align: middle;
- width: 20px;
- height: 20px;
+ filter:var(--icon-filter,none);
}
-/* Brand Styles
+/* Brand-Specific Styles
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
-/* Default (this is great for your own brand color!) */
+/* Default */
.button.button-default {
- color: #ffffff;
- background-color: #2457F5;
-}
-.button.button-default:hover,
-.button.button-default:focus {
- filter: brightness(90%);
+ --button-text:#ffffff;
+ --button-background:#2457F5;
+ --button-border:1px solid #ffffff;
}
/* Amazon */
-.button.button-amazon {
- color: #000000;
- background-color: #FFFFFF;
- border: 1px solid #212121;
-}
-.button.button-amazon:hover,
-.button.button-amazon:focus {
- filter: brightness(90%);
+.button-amazon {
+ --button-text:#000000;
+ --button-background:#FFFFFF;
+ --button-border:1px solid #212121;
}
/* Amazon Music */
-.button.button-amazon-music {
- color: #000000;
- background-color: #25D1DA;
-}
-.button.button-amazon-music:hover,
-.button.button-amazon-music:focus {
- filter: brightness(90%);
+.button-amazon-music {
+ --button-text:#000000;
+ --button-background:#25D1DA;
}
/* Apple App Store */
-.button.button-appstore {
- color: #FFFFFF;
- background-color: #000000;
- border: 1px solid #FFFFFF;
-}
-.button.button-appstore:hover,
-.button.button-appstore:focus {
- filter: brightness(90%);
+.button-appstore {
+ --button-text:#FFFFFF;
+ --button-background:#000000;
+ --button-border:1px solid #FFFFFF;
}
/* Apple Music */
-.button.button-apple-music {
- color: #ffffff;
- background-color: #000000;
- border: 1px solid #FFFFFF;
-}
-.button.button-apple-music:hover,
-.button.button-apple-music:focus {
- filter: brightness(90%);
+.button-apple-music {
+ --button-text:#ffffff;
+ --button-background:#000000;
+ --button-border:1px solid #FFFFFF;
}
/* Apple Music Alt */
-.button.button-apple-music-alt {
- color: #ffffff;
- background-image: linear-gradient(to bottom, #FB5C74, #FA233B);
-}
-.button.button-apple-music-alt:hover,
-.button.button-apple-music-alt:focus {
- filter: brightness(90%);
+.button-apple-music-alt {
+ --button-text:#ffffff;
+ background-image:linear-gradient(to bottom,#FB5C74,#FA233B);
}
/* Apple Podcasts */
-.button.button-apple-podcasts {
- color: #ffffff;
- background-color: #000000;
- border: 1px solid #FFFFFF;
-}
-.button.button-apple-podcasts:hover,
-.button.button-apple-podcasts:focus {
- filter: brightness(90%);
+.button-apple-podcasts {
+ --button-text:#ffffff;
+ --button-background:#000000;
+ --button-border:1px solid #FFFFFF;
}
/* Apple Podcasts Alt */
-.button.button-apple-podcasts-alt {
- color: #ffffff;
- background-image: linear-gradient(to bottom, #F452FF, #832BC1);
-}
-.button.button-apple-podcasts-alt:hover,
-.button.button-apple-podcasts-alt:focus {
- filter: brightness(90%);
-}
-
-/* ArtStation */
-.button.button-artstation {
- color: #ffffff;
- background-color: #18181C;
- border: 1px solid #FFFFFF;
-}
-.button.button-artstation:hover,
-.button.button-artstation:focus {
- filter: brightness(90%);
+.button-apple-podcasts-alt {
+ --button-text:#ffffff;
+ background-image:linear-gradient(to bottom,#F452FF,#832BC1);
}
/* Bandcamp */
-.button.button-bandcamp {
- color: #ffffff;
- background-color: #1d9fc3;
-}
-.button.button-bandcamp:hover,
-.button.button-bandcamp:focus {
- filter: brightness(90%);
+.button-bandcamp {
+ --button-text:#ffffff;
+ --button-background:#1d9fc3;
}
/* Behance */
-.button.button-behance {
- color: #ffffff;
- background-color: #0057FF;
-}
-.button.button-behance:hover,
-.button.button-behance:focus {
- filter: brightness(90%);
+.button-behance {
+ --button-text:#ffffff;
+ --button-background:#0057FF;
+ --button-border:1px solid #FFFFFF;
}
/* Bluesky */
-.button.button-bluesky {
- color: #FFFFFF;
- background-color: #1185FE;
-}
-
-.button.button-bluesky:hover,
-.button.button-bluesky:focus {
- filter: brightness(90%);
+.button-bluesky {
+ --button-text:#FFFFFF;
+ --button-background:#1185FE;
}
/* Bluesky Alt */
-.button.button-bluesky-alt {
- color: #000000;
- background-color: #FFFFFF;
- border: 1px solid #000000;
-}
-.button.button-bluesky-alt:hover,
-.button.button-bluesky-alt:focus {
- filter: brightness(90%);
+.button-bluesky-alt {
+ --button-text:#000000;
+ --button-background:#FFFFFF;
+ --button-border:1px solid #000000;
}
/* Buy Me a Coffee */
-.button.button-coffee {
- color: #000000;
- background-color: #ffdd00;
-}
-.button.button-coffee:hover,
-.button.button-coffee:focus {
- filter: brightness(90%);
+.button-coffee {
+ --button-text:#000000;
+ --button-background:#ffdd00;
}
/* Cal.com */
-.button.button-cal {
- color: #FFFFFF;
- background-color: #292929;
- border: 1px solid #FFFFFF;
-}
-.button.button-cal:hover,
-.button.button-cal:focus {
- filter: brightness(90%);
+.button-cal {
+ --button-text:#FFFFFF;
+ --button-background:#292929;
+ --button-border:1px solid #FFFFFF;
}
/* Calendly */
-.button.button-calendly {
- color: #FFFFFF;
- background-color: #006BFF;
-}
-.button.button-calendly:hover,
-.button.button-calendly:focus {
- filter: brightness(90%);
+.button-calendly {
+ --button-text:#FFFFFF;
+ --button-background:#006BFF;
}
/* Cash App */
-.button.button-cash-app {
- color: #ffffff;
- background-image: linear-gradient(to bottom, #00d64b, #00c244);
-}
-.button.button-cash-app:hover,
-.button.button-cash-app:focus {
- filter: brightness(90%);
+.button-cash-app {
+ --button-text:#ffffff;
+ background-image:linear-gradient(to bottom,#00d64b,#00c244);
}
/* dev.to */
-.button.button-dev-to {
- color: #000000;
- background-color: #f5f5f5;
- border: 1px solid #212121;
-}
-.button.button-dev-to:hover,
-.button.button-dev-to:focus {
- filter: brightness(90%);
+.button-dev-to {
+ --button-text:#000000;
+ --button-background:#f5f5f5;
+ --button-border:1px solid #212121;
}
/* Discogs */
-.button.button-discogs {
- color: #000000;
- background-color: #FFFFFF;
- border: 1px solid #000000
-}
-.button.button-discogs:hover,
-.button.button-discogs:focus {
- filter: brightness(90%);
+.button-discogs {
+ --button-text:#000000;
+ --button-background:#FFFFFF;
+ --button-border:1px solid #000000;
}
/* Discogs Alt */
-.button.button-discogs-alt {
- color: #FFFFFF;
- background-color: #000000;
- border: 1px solid #FFFFFF
-}
-.button.button-discogs-alt:hover,
-.button.button-discogs-alt:focus {
- filter: brightness(90%);
+.button-discogs-alt {
+ --button-text:#FFFFFF;
+ --button-background:#000000;
+ --button-border:1px solid #FFFFFF;
}
/* Discord */
-.button.button-discord {
- color: #ffffff;
- background-color: #161CBB;
-}
-.button.button-discord:hover,
-.button.button-discord:focus {
- filter: brightness(90%);
+.button-discord {
+ --button-text:#ffffff;
+ --button-background:#5865F2;
}
/* Dribbble */
-.button.button-dribbble {
- color: #000000;
- background-color: #FFFFFF;
- border: 1px solid #212121;
-}
-.button.button-dribbble:hover,
-.button.button-dribbble:focus {
- filter: brightness(90%);
+.button-dribbble {
+ --button-text:#000000;
+ --button-background:#FFFFFF;
+ --button-border:1px solid #212121;
}
/* Etsy */
-.button.button-etsy {
- color: #ffffff;
- background-color: #F45800;
-}
-.button.button-etsy:hover,
-.button.button-etsy:focus {
- filter: brightness(90%);
+.button-etsy {
+ --button-text:#ffffff;
+ --button-background:#F45800;
}
/* Facebook */
-.button.button-faceb {
- color: #ffffff;
- background-color: #1877f2;
-}
-.button.button-faceb:hover,
-.button.button-faceb:focus {
- filter: brightness(90%);
+.button-faceb {
+ --button-text:#ffffff;
+ --button-background:#1877f2;
}
/* Facebook Messenger */
-.button.button-messenger {
- color: #ffffff;
- background-image: linear-gradient(
- 25deg,
- #0099ff,
- #5f5dff,
- #a033ff,
- #c740cc,
- #ff5280,
- #ff7061
- );
-}
-.button.button-messenger:hover,
-.button.button-messenger:focus {
- filter: brightness(90%);
+.button-messenger {
+ --button-text:#ffffff;
+ background-image:linear-gradient(25deg,#0099ff,#5f5dff,#a033ff,#c740cc,#ff5280,#ff7061);
}
/* Figma */
-.button.button-figma {
- color: #ffffff;
- background-color: #000000;
- border: 1px solid #FFFFFF;
-}
-.button.button-figma:hover,
-.button.button-figma:focus {
- filter: brightness(90%);
+.button-figma {
+ --button-text:#ffffff;
+ --button-background:#000000;
+ --button-border:1px solid #FFFFFF;
}
/* Fiverr */
-.button.button-fiverr {
- color: #ffffff;
- background-color: #1DBF73;
-}
-.button.button-fiverr:hover,
-.button.button-fiverr:focus {
- filter: brightness(90%);
+.button-fiverr {
+ --button-text:#ffffff;
+ --button-background:#1DBF73;
}
/* Flickr */
-.button.button-flickr {
- color: #ffffff;
- background-color: #000000;
- border: 1px solid #FFFFFF;
-}
-.button.button-flickr:hover,
-.button.button-flickr:focus {
- filter: brightness(90%);
+.button-flickr {
+ --button-text:#ffffff;
+ --button-background:#000000;
+ --button-border:1px solid #FFFFFF;
}
/* GitHub */
-.button.button-github {
- color: #ffffff;
- background-color: #000000;
- border: 1px solid #FFFFFF;
-}
-.button.button-github:hover,
-.button.button-github:focus {
- filter: brightness(90%);
+.button-github {
+ --button-text:#ffffff;
+ --button-background:#000000;
+ --button-border:1px solid #FFFFFF;
}
/* GitLab */
-.button.button-gitlab {
- color: #ffffff;
- background-color: #6151b2;
-}
-.button.button-gitlab:hover,
-.button.button-gitlab:focus {
- filter: brightness(90%);
+.button-gitlab {
+ --button-text:#ffffff;
+ --button-background:#6151b2;
}
/* GoFundMe */
-.button.button-gofundme {
- color: #ffffff;
- background-color: #02A95C;
-}
-.button.button-gofundme:hover,
-.button.button-gofundme:focus {
- filter: brightness(90%);
+.button-gofundme {
+ --button-text:#ffffff;
+ --button-background:#02A95C;
}
/* Goodreads */
-.button.button-goodreads {
- color: #333333;
- background-color: #f3f1e6;
- border: 1px solid #212121;
-}
-.button.button-goodreads:hover,
-.button.button-goodreads:focus {
- filter: brightness(90%);
+.button-goodreads {
+ --button-text:#333333;
+ --button-background:#f3f1e6;
+ --button-border:1px solid #212121;
}
/* Google Black */
-.button.button-google-black {
- color: #FFFFFF;
- background-color: #000000;
- border: 1px solid #FFFFFF;
-}
-.button.button-google-black:hover,
-.button.button-google-black:focus {
- filter: brightness(90%);
+.button-google-black {
+ --button-text:#FFFFFF;
+ --button-background:#000000;
+ --button-border:1px solid #FFFFFF;
}
/* Google Play Store */
-.button.button-playstore {
- color: #FFFFFF;
- background-color: #000000;
- border: 1px solid #FFFFFF;
-}
-.button.button-playstore:hover,
-.button.button-playstore:focus {
- filter: brightness(90%);
+.button-playstore {
+ --button-text:#FFFFFF;
+ --button-background:#000000;
+ --button-border:1px solid #FFFFFF;
}
/* Google Scholar */
-.button.button-google-scholar {
- color: #000000;
- background-color: #FFFFFF;
- border: 1px solid #212121;
-}
-.button.button-google-scholar:hover,
-.button.button-google-scholar:focus {
- filter: brightness(90%);
+.button-google-scholar {
+ --button-text:#000000;
+ --button-background:#FFFFFF;
+ --button-border:1px solid #212121;
}
/* Hashnode */
-.button.button-hashnode {
- color: #000000;
- background-color: #ffffff;
- border: 1px solid #212121;
-}
-.button.button-hashnode:hover,
-.button.button-hashnode:focus {
- filter: brightness(90%);
+.button-hashnode {
+ --button-text:#000000;
+ --button-background:#ffffff;
+ --button-border:1px solid #212121;
}
/* Instagram */
-.button.button-instagram {
- color: #ffffff;
- background-image: linear-gradient(-135deg, #1400c8, #b900b4, #f50000);
-}
-.button.button-instagram:hover,
-.button.button-instagram:focus {
- filter: brightness(90%);
+.button-instagram {
+ --button-text:#ffffff;
+ background-image:linear-gradient(-135deg,#1400c8,#b900b4,#f50000);
}
/* Kick */
-.button.button-kick {
- background-color:#000000;
- color: #ffffff;
- border: 1px solid #ffffff;
-}
-.button.button-kick:hover {
- filter: brightness(90%);
+.button-kick {
+ --button-text:#ffffff;
+ --button-background:#000000;
+ --button-border:1px solid #ffffff;
}
/* Kick Alt */
-.button.button-kick-alt {
- background-color:#01e701;
- color: #000;
-}
-.button.button-kick-alt:hover {
- filter: brightness(90%);
+.button-kick-alt {
+ --button-text:#000000;
+ --button-background:#01e701;
}
/* Kickstarter */
-.button.button-kickstarter {
- color: #ffffff;
- background-color: #05ce78;
-}
-.button.button-kickstarter:hover,
-.button.button-kickstarter:focus {
- filter: brightness(90%);
+.button-kickstarter {
+ --button-text:#ffffff;
+ --button-background:#05ce78;
}
/* Kit */
-.button.button-kit {
- color: #ffffff;
- background-color: #000000;
- border: 1px solid #FFFFFF;
-}
-.button.button-kit:hover,
-.button.button-kit:focus {
- filter: brightness(90%);
+.button-kit {
+ --button-text:#ffffff;
+ --button-background:#000000;
+ --button-border:1px solid #FFFFFF;
}
/* Ko-fi */
-.button.button-ko-fi {
- color: #ffffff;
- background-color: #13C3FF;
-}
-.button.button-ko-fi:hover,
-.button.button-ko-fi:focus {
- filter: brightness(90%);
+.button-ko-fi {
+ --button-text:#ffffff;
+ --button-background:#000000;
+ --button-border:1px solid #FFFFFF;
}
/* Last.fm */
-.button.button-last-fm {
- color: #ffffff;
- background-color: #D51007;
-}
-.button.button-last-fm:hover,
-.button.button-last-fm:focus {
- filter: brightness(90%);
+.button-last-fm {
+ --button-text:#ffffff;
+ --button-background:#D51007;
}
/* Letterboxd */
-.button.button-letterboxd {
- color: #ffffff;
- background-color: #2c3440;
- border: 1px solid #FFFFFF;
-}
-.button.button-letterboxd:hover,
-.button.button-letterboxd:focus {
- filter: brightness(90%);
+.button-letterboxd {
+ --button-text:#ffffff;
+ --button-background:#2c3440;
+ --button-border:1px solid #FFFFFF;
}
/* Line */
-.button.button-line {
- color: #FFFFFF;
- background-color: #06C755;
-}
-.button.button-line:hover,
-.button.button-line:focus {
- filter: brightness(90%);
+.button-line {
+ --button-text:#FFFFFF;
+ --button-background:#06C755;
}
/* LinkedIn */
-.button.button-linked {
- color: #ffffff;
- background-color: #2867b2;
-}
-.button.button-linked:hover,
-.button.button-linked:focus {
- filter: brightness(90%);
+.button-linked {
+ --button-text:#ffffff;
+ --button-background:#2867b2;
}
/* Mailchimp */
-.button.button-mailchimp {
- color: #000000;
- background-color: #FFE01B;
-}
-.button.button-mailchimp:hover,
-.button.button-mailchimp:focus {
- filter: brightness(90%);
+.button-mailchimp {
+ --button-text:#000000;
+ --button-background:#FFE01B;
}
/* Mastodon */
-.button.button-mastodon {
- color: #ffffff;
- background-color: #17063B;
- border: 1px solid #FFFFFF;
-}
-.button.button-mastodon:hover,
-.button.button-mastodon:focus {
- filter: brightness(90%);
+.button-mastodon {
+ --button-text:#ffffff;
+ --button-background:#17063B;
+ --button-border:1px solid #FFFFFF;
}
/* Medium */
-.button.button-medium {
- color: #ffffff;
- background-color: #000000;
- border: 1px solid #FFFFFF;
-}
-.button.button-medium:hover,
-.button.button-medium:focus {
- filter: brightness(90%);
+.button-medium {
+ --button-text:#ffffff;
+ --button-background:#000000;
+ --button-border:1px solid #FFFFFF;
}
/* Microsoft */
-.button.button-microsoft {
- color: #ffffff;
- background-color: #000000;
- border: 1px solid #FFFFFF;
-}
-.button.button-microsoft:hover,
-.button.button-microsoft:focus {
- filter: brightness(90%);
-}
-
-/* NGL */
-.button.button-ngl {
- color: #ffffff;
- background-image: linear-gradient(-45deg, #ff8d10, #ec1187);
-}
-.button.button-ngl:hover,
-.button.button-ngl:focus {
- filter: brightness(90%);
+.button-microsoft {
+ --button-text:#ffffff;
+ --button-background:#000000;
+ --button-border:1px solid #FFFFFF;
}
/* Notion */
-.button.button-notion {
- color: #000000;
- border: 1px solid #212121;
- background-color: #ffffff;
-}
-.button.button-notion:hover,
-.button.button-notion:focus {
- filter: brightness(90%);
+.button-notion {
+ --button-text:#000000;
+ --button-background:#ffffff;
+ --button-border:1px solid #212121;
}
/* OnlyFans */
-.button.button-onlyfans {
- color: #ffffff;
- background-color: #00AEEF;
-}
-.button.button-onlyfans:hover,
-.button.button-onlyfans:focus {
- filter: brightness(90%);
+.button-onlyfans {
+ --button-text:#ffffff;
+ --button-background:#00AEEF;
}
/* Patreon */
-.button.button-patreon {
- color: #ffffff;
- background-color: #000000;
- border: 1px solid #FFFFFF;
-}
-.button.button-patreon:hover,
-.button.button-patreon:focus {
- filter: brightness(90%);
+.button-patreon {
+ --button-text:#ffffff;
+ --button-background:#000000;
+ --button-border:1px solid #FFFFFF;
}
/* PayPal */
-.button.button-paypal {
- color: #ffffff;
- background-color: #003087;
-}
-.button.button-paypal:hover,
-.button.button-paypal:focus {
- filter: brightness(90%);
+.button-paypal {
+ --button-text:#ffffff;
+ --button-background:#002991;
+ --button-border:1px solid #FFFFFF;
}
/* Pinterest */
-.button.button-pinterest {
- color: #000000;
- background-color: #ffe2eb;
- border: 1px solid #212121;
-}
-.button.button-pinterest:hover,
-.button.button-pinterest:focus {
- filter: brightness(90%);
-}
-
-/* Post.news */
-.button.button-post-news {
- color: #ffffff;
- background-color: #678BFF;
-}
-.button.button-post-news:hover,
-.button.button-post-news:focus {
- filter: brightness(90%);
+.button-pinterest {
+ --button-text:#000000;
+ --button-background:#ffe2eb;
+ --button-border:1px solid #212121;
}
/* Product Hunt */
-.button.button-product-hunt {
- color: #000000;
- background-color: #ffffff;
- border: 1px solid #212121;
-}
-.button.button-producthunt:hover,
-.button.button-producthunt:focus {
- filter: brightness(90%);
+.button-product-hunt {
+ --button-text:#000000;
+ --button-background:#ffffff;
+ --button-border:1px solid #212121;
}
/* Read.cv */
-.button.button-read-cv {
- color: #FFFFFF;
- background-color: #000000;
- border: 1px solid #FFFFFF;
-}
-.button.button-read-cv:hover,
-.button.button-read-cv:focus {
- filter: brightness(90%);
+.button-read-cv {
+ --button-text:#FFFFFF;
+ --button-background:#000000;
+ --button-border:1px solid #FFFFFF;
}
/* Redbubble */
-.button.button-redbubble {
- color: #e41321;
- background-color: #ffffff;
- border: 1px solid #212121;
-}
-.button.button-redbubble:hover,
-.button.button-redbubble:focus {
- filter: brightness(90%);
+.button-redbubble {
+ --button-text:#e41321;
+ --button-background:#ffffff;
+ --button-border:1px solid #212121;
}
/* Reddit */
-.button.button-reddit {
- color: #FFFFFF;
- background-color: #FF4500;
-}
-.button.button-reddit:hover,
-.button.button-reddit:focus {
- filter: brightness(90%);
+.button-reddit {
+ --button-text:#FFFFFF;
+ --button-background:#FF4500;
}
/* Revolut */
-.button.button-revolut {
- color: #000000;
- background-color: #ffffff;
- border: 1px solid black;
-}
-.button.button-revolut:hover,
-.button.button-revolut:focus {
- filter: brightness(90%);
+.button-revolut {
+ --button-text:#000000;
+ --button-background:#ffffff;
+ --button-border:1px solid black;
}
/* Shop */
-.button.button-shop {
- color: #ffffff;
- background-color: #5A31F4;
-}
-.button.button-shop:hover,
-.button.button-shop:focus {
- filter: brightness(90%);
+.button-shop {
+ --button-text:#ffffff;
+ --button-background:#5A31F4;
}
/* Signal */
-.button.button-signal {
- color: #ffffff;
- background-color: #3a76f0;
-}
-.button.button-signal:hover,
-.button.button-signal:focus {
- filter: brightness(90%);
+.button-signal {
+ --button-text:#ffffff;
+ --button-background:#3a76f0;
}
/* Slack */
-.button.button-slack {
- color: #000000;
- background-color: #FFFFFF;
- border: 1px solid #212121;
-}
-.button.button-slack:hover,
-.button.button-slack:focus {
- filter: brightness(90%);
+.button-slack {
+ --button-text:#000000;
+ --button-background:#FFFFFF;
+ --button-border:1px solid #212121;
}
/* Snapchat */
-.button.button-snapchat {
- color: #000000;
- background-color: #fffc00;
-}
-.button.button-snapchat:hover,
-.button.button-snapchat:focus {
- filter: brightness(90%);
+.button-snapchat {
+ --button-text:#000000;
+ --button-background:#fffc00;
}
/* SoundCloud */
-.button.button-soundcloud {
- color: #ffffff;
- background-color: #ff5500;
-}
-.button.button-soundcloud:hover,
-.button.button-soundcloud:focus {
- filter: brightness(90%);
+.button-soundcloud {
+ --button-text:#ffffff;
+ --button-background:#ff5500;
}
/* Spotify */
-.button.button-spotify {
- color: #191414;
- background-color: #1db954;
-}
-.button.button-spotify:hover,
-.button.button-spotify:focus {
- filter: brightness(90%);
+.button-spotify {
+ --button-text:#191414;
+ --button-background:#1db954;
}
/* Spotify Alt */
-.button.button-spotify-alt {
- color: #FFFFFF;
- background-color: #191414;
- border: 1px solid #FFFFFF;
-}
-.button.button-spotify-alt:hover,
-.button.button-spotify-alt:focus {
- filter: brightness(90%);
+.button-spotify-alt {
+ --button-text:#FFFFFF;
+ --button-background:#191414;
+ --button-border:1px solid #FFFFFF;
}
/* Square */
-.button.button-square {
- color: #FFFFFF;
- background-color: #006AFF;
-}
-.button.button-square:hover,
-.button.button-square:focus {
- filter: brightness(90%);
+.button-square {
+ --button-text:#FFFFFF;
+ --button-background:#006AFF;
}
/* Stack Overflow */
-.button.button-stack-overflow {
- color: #000000;
- background-color: #FFFFFF;
- border: 1px solid #000000;
-}
-.button.button-stack-overflow:hover,
-.button.button-stack-overflow:focus {
- filter: brightness(90%);
+.button-stack-overflow {
+ --button-text:#000000;
+ --button-background:#FFFFFF;
+ --button-border:1px solid #000000;
}
/* Steam */
-.button.button-steam {
- color: #ffffff;
- background-image: linear-gradient(90deg, #08BBFF, #2B75FF);
-}
-.button.button-steam:hover,
-.button.button-steam:focus {
- filter: brightness(90%);
+.button-steam {
+ --button-text:#ffffff;
+ background-image:linear-gradient(90deg,#08BBFF,#2B75FF);
}
/* Steam Alt */
-.button.button-steam-alt {
- color: #ffffff;
- background-image: linear-gradient(90deg, #09172a, #072a57, #0c5085);
- border: 1px solid #FFFFFF;
-}
-.button.button-steam-alt:hover,
-.button.button-steam-alt:focus {
- filter: brightness(90%);
+.button-steam-alt {
+ --button-text:#ffffff;
+ background-image:linear-gradient(90deg,#09172a,#072a57,#0c5085);
+ --button-border:1px solid #FFFFFF;
}
/* Strava */
-.button.button-strava {
- color: #ffffff;
- background-color: #fc5200;
-}
-.button.button-strava:hover,
-.button.button-strava:focus {
- filter: brightness(90%);
+.button-strava {
+ --button-text:#ffffff;
+ --button-background:#fc5200;
}
/* Substack */
-.button.button-substack {
- color: #ffffff;
- background-color: #FF6719;
-}
-.button.button-substack:hover,
-.button.button-substack:focus {
- filter: brightness(90%);
+.button-substack {
+ --button-text:#ffffff;
+ --button-background:#FF6719;
}
/* Telegram */
-.button.button-telegram {
- color: #ffffff;
- background-color: #3faee8;
-}
-.button.button-telegram:hover,
-.button.button-telegram:focus {
- filter: brightness(90%);
+.button-telegram {
+ --button-text:#ffffff;
+ --button-background:#3faee8;
}
/* Threads */
-.button.button-threads {
- color: #FFFFFF;
- background-color: #000000;
- border: 1px solid #FFFFFF;
-}
-.button.button-threads:hover,
-.button.button-threads:focus {
- filter: brightness(90%);
+.button-threads {
+ --button-text:#FFFFFF;
+ --button-background:#000000;
+ --button-border:1px solid #FFFFFF;
}
/* Threema */
-.button.button-threema {
- color: #000000;
- background-color: #3fe669;
-}
-.button.button-threema:hover,
-.button.button-threema:focus {
- filter: brightness(90%);
+.button-threema {
+ --button-text:#000000;
+ --button-background:#3fe669;
}
/* TikTok */
-.button.button-tiktok {
- color: #ffffff;
- background-color: #000000;
- border: 1px solid #FFFFFF;
-}
-.button.button-tiktok:hover,
-.button.button-tiktok:focus {
- filter: brightness(90%);
+.button-tiktok {
+ --button-text:#ffffff;
+ --button-background:#000000;
+ --button-border:1px solid #FFFFFF;
}
/* Trakt */
-.button.button-trakt {
- color: #ffffff;
- background-color: #ED1C24;
-}
-.button.button-trakt:hover,
-.button.button-trakt:focus {
- filter: brightness(90%);
+.button-trakt {
+ --button-text:#ffffff;
+ --button-background:#ED1C24;
}
/* Trello */
-.button.button-trello {
- color: #ffffff;
- background-color: #0065ff;
-}
-.button.button-trello:hover,
-.button.button-trello:focus {
- filter: brightness(90%);
+.button-trello {
+ --button-text:#ffffff;
+ --button-background:#0065ff;
}
/* Tumblr */
-.button.button-tumb {
- color: #ffffff;
- background-color: #131313;
- border: 1px solid #FFFFFF;
-}
-.button.button-tumb:hover,
-.button.button-tumb:focus {
- filter: brightness(90%);
+.button-tumb {
+ --button-text:#ffffff;
+ --button-background:#131313;
+ --button-border:1px solid #FFFFFF;
}
/* Twitch */
-.button.button-twitch {
- color: #ffffff;
- background-color: #9146ff;
-}
-.button.button-twitch:hover,
-.button.button-twitch:focus {
- filter: brightness(90%);
+.button-twitch {
+ --button-text:#ffffff;
+ --button-background:#9146ff;
}
/* Unsplash */
-.button.button-unsplash {
- color: #000000;
- background-color: #ffffff;
- border: 1px solid #212121;
-}
-.button.button-unsplash:hover,
-.button.button-unsplash:focus {
- filter: brightness(90%);
+.button-unsplash {
+ --button-text:#000000;
+ --button-background:#ffffff;
+ --button-border:1px solid #212121;
}
/* Untappd */
-.button.button-untappd {
- color: #000000;
- background-color: #ffc000;
-}
-.button.button-untappd:hover,
-.button.button-untappd:focus {
- filter: brightness(90%);
+.button-untappd {
+ --button-text:#000000;
+ --button-background:#ffc000;
}
/* Upwork */
-.button.button-upwork {
- color: #FFFFFF;
- background-color: #14A800;
-}
-.button.button-upwork:hover,
-.button.button-upwork:focus {
- filter: brightness(90%);
+.button-upwork {
+ --button-text:#FFFFFF;
+ --button-background:#14A800;
}
/* Venmo */
-.button.button-venmo {
- color: #ffffff;
- background-color: #008CFF;
-}
-.button.button-venmo:hover,
-.button.button-venmo:focus {
- filter: brightness(90%);
+.button-venmo {
+ --button-text:#ffffff;
+ --button-background:#008CFF;
}
/* Vimeo */
-.button.button-vimeo {
- color: #ffffff;
- background-color: #1ab7ea;
-}
-.button.button-vimeo:hover,
-.button.button-vimeo:focus {
- filter: brightness(90%);
+.button-vimeo {
+ --button-text:#ffffff;
+ --button-background:#1ab7ea;
}
/* VSCO */
-.button.button-vsco {
- color: #FFFFFF;
- background-color: #000000;
- border: 1px solid #FFFFFF;
-}
-.button.button-vsco:hover,
-.button.button-vsco:focus {
- filter: brightness(90%);
-}
-
-/* Website */
-.button.button-web {
- color: #ffffff;
- background-color: #000000;
- border: 1px solid #FFFFFF;
-}
-.button.button-web:hover,
-.button.button-web:focus {
- filter: brightness(90%);
+.button-vsco {
+ --button-text:#FFFFFF;
+ --button-background:#000000;
+ --button-border:1px solid #FFFFFF;
}
/* WhatsApp */
-.button.button-whatsapp {
- color: #ffffff;
- background-color: #455a64;
-}
-.button.button-whatsapp:hover,
-.button.button-whatsapp:focus {
- filter: brightness(90%);
+.button-whatsapp {
+ --button-text:#ffffff;
+ --button-background:#455a64;
}
-/* Wordpress */
-.button.button-wordpress {
- color: #ffffff;
- background-color: #21759b;
-}
-.button.button-wordpress:hover,
-.button.button-wordpress:focus {
- filter: brightness(90%);
+/* WordPress */
+.button-wordpress {
+ --button-text:#ffffff;
+ --button-background:#21759b;
}
/* X */
-.button.button-x {
- color: #FFFFFF;
- background-color: #000000;
- border: 1px solid #FFFFFF;
-}
-.button.button-x:hover,
-.button.button-x:focus {
- filter: brightness(90%);
+.button-x {
+ --button-text:#FFFFFF;
+ --button-background:#000000;
+ --button-border:1px solid #FFFFFF;
}
/* YouTube */
-.button.button-yt {
- color: #ffffff;
- background-color: #000000;
- border: 1px solid #FFFFFF;
-}
-.button.button-yt:hover,
-.button.button-yt:focus {
- filter: brightness(90%);
+.button-yt {
+ --button-text:#ffffff;
+ --button-background:#282828;
+ --button-border:1px solid #FFFFFF;
}
/* Zoom */
-.button.button-zoom {
- color: #ffffff;
- background-color: #0B5CFF;
+.button-zoom {
+ --button-text:#ffffff;
+ --button-background:#0B5CFF;
+ --button-border:1px solid #FFFFFF;
+}
+
+/* Generic Buttons */
+.button-default {
+ --button-text:#ffffff;
+ --button-background:#000000;
+ --button-border:1px solid #FFFFFF;
+}
+
+.button-blog {
+ --button-text:#ffffff;
+ --button-background:#000000;
+ --button-border:1px solid #FFFFFF;
+}
+
+.button-calendar {
+ --button-text:#ffffff;
+ --button-background:#000000;
+ --button-border:1px solid #FFFFFF;
+}
+
+.button-cloud {
+ --button-text:#ffffff;
+ --button-background:#000000;
+ --button-border:1px solid #FFFFFF;
+}
+
+.button-code {
+ --button-text:#ffffff;
+ --button-background:#000000;
+ --button-border:1px solid #FFFFFF;
+}
+
+.button-computer {
+ --button-text:#ffffff;
+ --button-background:#000000;
+ --button-border:1px solid #FFFFFF;
+}
+
+.button-email {
+ --button-text:#ffffff;
+ --button-background:#000000;
+ --button-border:1px solid #FFFFFF;
+}
+
+.button-homepage {
+ --button-text:#ffffff;
+ --button-background:#000000;
+ --button-border:1px solid #FFFFFF;
+}
+
+.button-map {
+ --button-text:#ffffff;
+ --button-background:#000000;
+ --button-border:1px solid #FFFFFF;
+}
+
+.button-phone {
+ --button-text:#ffffff;
+ --button-background:#000000;
+ --button-border:1px solid #FFFFFF;
+}
+
+.button-review {
+ --button-text:#ffffff;
+ --button-background:#000000;
+ --button-border:1px solid #FFFFFF;
+}
+
+.button-rss {
+ --button-text:#ffffff;
+ --button-background:#000000;
+ --button-border:1px solid #FFFFFF;
+}
+
+.button-shopping-bag {
+ --button-text:#ffffff;
+ --button-background:#000000;
+ --button-border:1px solid #FFFFFF;
+}
+
+.button-shopping-tag {
+ --button-text:#ffffff;
+ --button-background:#000000;
+ --button-border:1px solid #FFFFFF;
+}
+
+.button-sms {
+ --button-text:#ffffff;
+ --button-background:#000000;
+ --button-border:1px solid #FFFFFF;
+}
+
+.button-website {
+ --button-text:#ffffff;
+ --button-background:#000000;
+ --button-border:1px solid #FFFFFF;
}
-.button.button-zoom:hover,
-.button.button-zoom:focus {
- filter: brightness(90%);
-}
\ No newline at end of file
diff --git a/css/normalize.css b/css/normalize.css
deleted file mode 100644
index 458eea1e..00000000
--- a/css/normalize.css
+++ /dev/null
@@ -1,427 +0,0 @@
-/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
-
-/**
- * 1. Set default font family to sans-serif.
- * 2. Prevent iOS text size adjust after orientation change, without disabling
- * user zoom.
- */
-
-html {
- font-family: sans-serif; /* 1 */
- -ms-text-size-adjust: 100%; /* 2 */
- -webkit-text-size-adjust: 100%; /* 2 */
-}
-
-/**
- * Remove default margin.
- */
-
-body {
- margin: 0;
-}
-
-/* HTML5 display definitions
- ========================================================================== */
-
-/**
- * Correct `block` display not defined for any HTML5 element in IE 8/9.
- * Correct `block` display not defined for `details` or `summary` in IE 10/11
- * and Firefox.
- * Correct `block` display not defined for `main` in IE 11.
- */
-
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-main,
-menu,
-nav,
-section,
-summary {
- display: block;
-}
-
-/**
- * 1. Correct `inline-block` display not defined in IE 8/9.
- * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
- */
-
-audio,
-canvas,
-progress,
-video {
- display: inline-block; /* 1 */
- vertical-align: baseline; /* 2 */
-}
-
-/**
- * Prevent modern browsers from displaying `audio` without controls.
- * Remove excess height in iOS 5 devices.
- */
-
-audio:not([controls]) {
- display: none;
- height: 0;
-}
-
-/**
- * Address `[hidden]` styling not present in IE 8/9/10.
- * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
- */
-
-[hidden],
-template {
- display: none;
-}
-
-/* Links
- ========================================================================== */
-
-/**
- * Remove the gray background color from active links in IE 10.
- */
-
-a {
- background-color: transparent;
-}
-
-/**
- * Improve readability when focused and also mouse hovered in all browsers.
- */
-
-a:active,
-a:hover {
- outline: 0;
-}
-
-/* Text-level semantics
- ========================================================================== */
-
-/**
- * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
- */
-
-abbr[title] {
- border-bottom: 1px dotted;
-}
-
-/**
- * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
- */
-
-b,
-strong {
- font-weight: bold;
-}
-
-/**
- * Address styling not present in Safari and Chrome.
- */
-
-dfn {
- font-style: italic;
-}
-
-/**
- * Address variable `h1` font-size and margin within `section` and `article`
- * contexts in Firefox 4+, Safari, and Chrome.
- */
-
-h1 {
- font-size: 2em;
- margin: 0.67em 0;
-}
-
-/**
- * Address styling not present in IE 8/9.
- */
-
-mark {
- background: #ff0;
- color: #000;
-}
-
-/**
- * Address inconsistent and variable font size in all browsers.
- */
-
-small {
- font-size: 80%;
-}
-
-/**
- * Prevent `sub` and `sup` affecting `line-height` in all browsers.
- */
-
-sub,
-sup {
- font-size: 75%;
- line-height: 0;
- position: relative;
- vertical-align: baseline;
-}
-
-sup {
- top: -0.5em;
-}
-
-sub {
- bottom: -0.25em;
-}
-
-/* Embedded content
- ========================================================================== */
-
-/**
- * Remove border when inside `a` element in IE 8/9/10.
- */
-
-img {
- border: 0;
-}
-
-/**
- * Correct overflow not hidden in IE 9/10/11.
- */
-
-svg:not(:root) {
- overflow: hidden;
-}
-
-/* Grouping content
- ========================================================================== */
-
-/**
- * Address margin not present in IE 8/9 and Safari.
- */
-
-figure {
- margin: 1em 40px;
-}
-
-/**
- * Address differences between Firefox and other browsers.
- */
-
-hr {
- -moz-box-sizing: content-box;
- box-sizing: content-box;
- height: 0;
-}
-
-/**
- * Contain overflow in all browsers.
- */
-
-pre {
- overflow: auto;
-}
-
-/**
- * Address odd `em`-unit font size rendering in all browsers.
- */
-
-code,
-kbd,
-pre,
-samp {
- font-family: monospace, monospace;
- font-size: 1em;
-}
-
-/* Forms
- ========================================================================== */
-
-/**
- * Known limitation: by default, Chrome and Safari on OS X allow very limited
- * styling of `select`, unless a `border` property is set.
- */
-
-/**
- * 1. Correct color not being inherited.
- * Known issue: affects color of disabled elements.
- * 2. Correct font properties not being inherited.
- * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
- */
-
-button,
-input,
-optgroup,
-select,
-textarea {
- color: inherit; /* 1 */
- font: inherit; /* 2 */
- margin: 0; /* 3 */
-}
-
-/**
- * Address `overflow` set to `hidden` in IE 8/9/10/11.
- */
-
-button {
- overflow: visible;
-}
-
-/**
- * Address inconsistent `text-transform` inheritance for `button` and `select`.
- * All other form control elements do not inherit `text-transform` values.
- * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
- * Correct `select` style inheritance in Firefox.
- */
-
-button,
-select {
- text-transform: none;
-}
-
-/**
- * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
- * and `video` controls.
- * 2. Correct inability to style clickable `input` types in iOS.
- * 3. Improve usability and consistency of cursor style between image-type
- * `input` and others.
- */
-
-button,
-html input[type="button"], /* 1 */
-input[type="reset"],
-input[type="submit"] {
- -webkit-appearance: button; /* 2 */
- cursor: pointer; /* 3 */
-}
-
-/**
- * Re-set default cursor for disabled elements.
- */
-
-button[disabled],
-html input[disabled] {
- cursor: default;
-}
-
-/**
- * Remove inner padding and border in Firefox 4+.
- */
-
-button::-moz-focus-inner,
-input::-moz-focus-inner {
- border: 0;
- padding: 0;
-}
-
-/**
- * Address Firefox 4+ setting `line-height` on `input` using `!important` in
- * the UA stylesheet.
- */
-
-input {
- line-height: normal;
-}
-
-/**
- * It's recommended that you don't attempt to style these elements.
- * Firefox's implementation doesn't respect box-sizing, padding, or width.
- *
- * 1. Address box sizing set to `content-box` in IE 8/9/10.
- * 2. Remove excess padding in IE 8/9/10.
- */
-
-input[type="checkbox"],
-input[type="radio"] {
- box-sizing: border-box; /* 1 */
- padding: 0; /* 2 */
-}
-
-/**
- * Fix the cursor style for Chrome's increment/decrement buttons. For certain
- * `font-size` values of the `input`, it causes the cursor style of the
- * decrement button to change from `default` to `text`.
- */
-
-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
- height: auto;
-}
-
-/**
- * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
- * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
- * (include `-moz` to future-proof).
- */
-
-input[type="search"] {
- -webkit-appearance: textfield; /* 1 */
- -moz-box-sizing: content-box;
- -webkit-box-sizing: content-box; /* 2 */
- box-sizing: content-box;
-}
-
-/**
- * Remove inner padding and search cancel button in Safari and Chrome on OS X.
- * Safari (but not Chrome) clips the cancel button when the search input has
- * padding (and `textfield` appearance).
- */
-
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-decoration {
- -webkit-appearance: none;
-}
-
-/**
- * Define consistent border, margin, and padding.
- */
-
-fieldset {
- border: 1px solid #c0c0c0;
- margin: 0 2px;
- padding: 0.35em 0.625em 0.75em;
-}
-
-/**
- * 1. Correct `color` not being inherited in IE 8/9/10/11.
- * 2. Remove padding so people aren't caught out if they zero out fieldsets.
- */
-
-legend {
- border: 0; /* 1 */
- padding: 0; /* 2 */
-}
-
-/**
- * Remove default vertical scrollbar in IE 8/9/10/11.
- */
-
-textarea {
- overflow: auto;
-}
-
-/**
- * Don't inherit the `font-weight` (applied by a rule above).
- * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
- */
-
-optgroup {
- font-weight: bold;
-}
-
-/* Tables
- ========================================================================== */
-
-/**
- * Remove most spacing between table cells.
- */
-
-table {
- border-collapse: collapse;
- border-spacing: 0;
-}
-
-td,
-th {
- padding: 0;
-}
diff --git a/css/reset.css b/css/reset.css
new file mode 100644
index 00000000..d158daf5
--- /dev/null
+++ b/css/reset.css
@@ -0,0 +1,91 @@
+/*
+* LittleLink Reset
+* A minimal CSS reset for LittleLink
+*/
+
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
+/* Remove default margin */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+figure,
+blockquote,
+dl,
+dd {
+ margin: 0;
+}
+
+/* Remove list styles on ul, ol elements */
+ul,
+ol {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+/* Set core root defaults */
+html:focus-within {
+ scroll-behavior: smooth;
+}
+
+/* Set core body defaults */
+body {
+ min-height: 100vh;
+ text-rendering: optimizeSpeed;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+/* Make images easier to work with */
+img,
+picture {
+ max-width: 100%;
+ display: block;
+}
+
+/* Inherit fonts for inputs and buttons */
+input,
+button,
+textarea,
+select {
+ font: inherit;
+}
+
+/* Remove all animations and transitions for people that prefer not to see them */
+@media (prefers-reduced-motion: reduce) {
+ html:focus-within {
+ scroll-behavior: auto;
+ }
+ *,
+ *::before,
+ *::after {
+ animation-duration: 0.01ms !important;
+ animation-iteration-count: 1 !important;
+ transition-duration: 0.01ms !important;
+ scroll-behavior: auto !important;
+ }
+}
+
+/* Modern focus styles */
+:focus:not(:focus-visible) {
+ outline: none;
+}
+
+:focus-visible {
+ outline: 2px solid #2457F5;
+ outline-offset: 2px;
+}
+
+/* Remove touch callout on iOS */
+a {
+ -webkit-touch-callout: none;
+}
\ No newline at end of file
diff --git a/css/skeleton-auto.css b/css/skeleton-auto.css
deleted file mode 100644
index 56f49cbe..00000000
--- a/css/skeleton-auto.css
+++ /dev/null
@@ -1,279 +0,0 @@
-/*
-* littlelink V1
-* https://littlelink.com
-* Free to use under the MIT license.
-* http://www.opensource.org/licenses/mit-license.php
-* 12/21/2019
-*
-* Built using:
-*
-* 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
-โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
-- Grid
-- Base Styles
-- Typography
-- Links
-- Code
-- Spacing
-- Utilities
-*
-* You'll find the button css in css/brands.css.
-*
-*/
-
-/* Grid
-โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
-.container {
- position: relative;
- width: 100%;
- max-width: 600px;
- text-align: center;
- margin: 0 auto;
- padding: 0 20px;
- box-sizing: border-box;
-}
-.container-left {
- position: relative;
- width: 100%;
- max-width: 600px;
- text-align: left;
- margin: 0 auto;
- padding: 0 20px;
- box-sizing: border-box;
-}
-.column {
- position: center;
- width: 100%;
- float: center;
- box-sizing: border-box;
-}
-
-/* For devices larger than 400px */
-@media (min-width: 400px) {
- .container {
- width: 85%;
- padding: 0;
- }
-}
-
-/* For devices larger than 550px */
-@media (min-width: 550px) {
- .container {
- width: 80%;
- }
- .column,
- .columns {
- margin-left: 0;
- }
- .column:first-child,
- .columns:first-child {
- margin-left: 0;
- }
-}
-
-/* Base Styles
-โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
-/* NOTE
-html is set to 62.5% so that all the REM measurements throughout Skeleton
-are based on 10px sizing. So basically 1.5rem = 15px :) */
-
-html {
- font-size: 100%;
- color-scheme: light dark;
-}
-body {
- font-size: 18px;
- line-height: 24px;
- font-weight: 400;
- font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial,
- sans-serif;
-}
-
-/* Typography
-โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
-h1 {
- margin-top: 0;
- margin-bottom: 16px;
- font-weight: 800;
-}
-h1 {
- font-size: 24px;
- line-height: 64px;
- letter-spacing: 0;
-}
-
-/* Larger than phablet */
-@media (min-width: 550px) {
- h1 {
- font-size: 48px;
- line-height: 96px;
- }
-}
-
-p {
- margin-top: 0;
-}
-
-/* Links
-โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
-a {
- 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
-โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
-code {
- padding: 0.2rem 0.5rem;
- margin: 0 0.2rem;
- font-size: 90%;
- white-space: nowrap;
- background: #f1f1f1;
- border: 1px solid #e1e1e1;
- border-radius: 4px;
-}
-pre > code {
- display: block;
- padding: 1rem 1.5rem;
- white-space: pre;
-}
-
-/* Spacing
-โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
-button,
-.button {
- margin-bottom: 1rem;
-}
-input,
-textarea,
-select,
-fieldset {
- margin-bottom: 1.5rem;
-}
-pre,
-blockquote,
-dl,
-figure,
-p,
-ol {
- margin-bottom: 2.5rem;
-}
-
-/* Utilities
-โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
-.u-full-width {
- width: 100%;
- box-sizing: border-box;
-}
-.u-max-full-width {
- max-width: 100%;
- box-sizing: border-box;
-}
-.u-pull-right {
- float: right;
-}
-.u-pull-left {
- float: left;
-}
-
-/* Misc
-โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
-hr {
- margin-top: 3rem;
- margin-bottom: 3.5rem;
- border-width: 0;
- border-top: 1px solid #e1e1e1;
-}
-/* Radius values:
-
-10%-40%: Squircles
-50% (default): True circle
-*/
-.avatar {
- width: 128px;
- height: 128px;
- object-fit: cover;
- background-position: center;
- border-radius: 50%;
-}
-
-/* open-sans-regular - vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic */
-@font-face {
- font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
- font-family: 'Open Sans';
- font-style: normal;
- font-weight: 400;
- src: url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.eot'); /* IE9 Compat Modes */
- src: url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
- url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.woff2') format('woff2'), /* Super Modern Browsers */
- url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.woff') format('woff'), /* Modern Browsers */
- url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.ttf') format('truetype'), /* Safari, Android, iOS */
- url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
-}
-/* open-sans-600 - vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic */
-@font-face {
- font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
- font-family: 'Open Sans';
- font-style: normal;
- font-weight: 600;
- src: url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.eot'); /* IE9 Compat Modes */
- src: url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
- url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.woff2') format('woff2'), /* Super Modern Browsers */
- url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.woff') format('woff'), /* Modern Browsers */
- url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.ttf') format('truetype'), /* Safari, Android, iOS */
- url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.svg#OpenSans') format('svg'); /* Legacy iOS */
-}
-/* open-sans-700 - vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic */
-@font-face {
- font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
- font-family: 'Open Sans';
- font-style: normal;
- font-weight: 700;
- src: url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.eot'); /* IE9 Compat Modes */
- src: url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
- url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.woff2') format('woff2'), /* Super Modern Browsers */
- url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.woff') format('woff'), /* Modern Browsers */
- url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.ttf') format('truetype'), /* Safari, Android, iOS */
- url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.svg#OpenSans') format('svg'); /* Legacy iOS */
-}
-/* open-sans-800 - vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic */
-@font-face {
- font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
- font-family: 'Open Sans';
- font-style: normal;
- font-weight: 800;
- src: url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-800.eot'); /* IE9 Compat Modes */
- src: url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
- url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-800.woff2') format('woff2'), /* Super Modern Browsers */
- 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 */
-}
\ No newline at end of file
diff --git a/css/skeleton-dark.css b/css/skeleton-dark.css
deleted file mode 100644
index f2f57f8c..00000000
--- a/css/skeleton-dark.css
+++ /dev/null
@@ -1,261 +0,0 @@
-/*
-* littlelink V1
-* https://littlelink.com
-* Free to use under the MIT license.
-* http://www.opensource.org/licenses/mit-license.php
-* 12/21/2019
-*
-* Built using:
-*
-* 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
-โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
-- Grid
-- Base Styles
-- Typography
-- Links
-- Code
-- Spacing
-- Utilities
-*
-* You'll find the button css in css/brands.css.
-*
-*/
-
-/* Grid
-โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
-.container {
- position: relative;
- width: 100%;
- max-width: 600px;
- text-align: center;
- margin: 0 auto;
- padding: 0 20px;
- box-sizing: border-box;
-}
-.container-left {
- position: relative;
- width: 100%;
- max-width: 600px;
- text-align: left;
- margin: 0 auto;
- padding: 0 20px;
- box-sizing: border-box;
-}
-.column {
- position: center;
- width: 100%;
- float: center;
- box-sizing: border-box;
-}
-
-/* For devices larger than 400px */
-@media (min-width: 400px) {
- .container {
- width: 85%;
- padding: 0;
- }
-}
-
-/* For devices larger than 550px */
-@media (min-width: 550px) {
- .container {
- width: 80%;
- }
- .column,
- .columns {
- margin-left: 0;
- }
- .column:first-child,
- .columns:first-child {
- margin-left: 0;
- }
-}
-
-/* Base Styles
-โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
-/* NOTE
-html is set to 62.5% so that all the REM measurements throughout Skeleton
-are based on 10px sizing. So basically 1.5rem = 15px :) */
-
-html {
- font-size: 100%;
- color-scheme: dark;
-}
-body {
- font-size: 18px;
- line-height: 24px;
- font-weight: 400;
- font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial,
- sans-serif;
-}
-
-/* Typography
-โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
-h1 {
- margin-top: 0;
- margin-bottom: 16px;
- font-weight: 800;
-}
-h1 {
- font-size: 24px;
- line-height: 64px;
- letter-spacing: 0;
-}
-
-/* Larger than phablet */
-@media (min-width: 550px) {
- h1 {
- font-size: 48px;
- line-height: 96px;
- }
-}
-
-p {
- margin-top: 0;
-}
-
-/* Links
-โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
-a {
- color: #4899F7;
-}
-a:hover {
- color: #7AB8FF;
-}
-
-/* Code
-โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
-code {
- padding: 0.2rem 0.5rem;
- margin: 0 0.2rem;
- font-size: 90%;
- white-space: nowrap;
- background: #f1f1f1;
- border: 1px solid #e1e1e1;
- border-radius: 4px;
-}
-pre > code {
- display: block;
- padding: 1rem 1.5rem;
- white-space: pre;
-}
-
-/* Spacing
-โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
-button,
-.button {
- margin-bottom: 1rem;
-}
-input,
-textarea,
-select,
-fieldset {
- margin-bottom: 1.5rem;
-}
-pre,
-blockquote,
-dl,
-figure,
-p,
-ol {
- margin-bottom: 2.5rem;
-}
-
-/* Utilities
-โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
-.u-full-width {
- width: 100%;
- box-sizing: border-box;
-}
-.u-max-full-width {
- max-width: 100%;
- box-sizing: border-box;
-}
-.u-pull-right {
- float: right;
-}
-.u-pull-left {
- float: left;
-}
-
-/* Misc
-โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
-hr {
- margin-top: 3rem;
- margin-bottom: 3.5rem;
- border-width: 0;
- border-top: 1px solid #e1e1e1;
-}
-/* Radius values:
-
-10%-40%: Squircles
-50% (default): True circle
-*/
-.avatar {
- width: 128px;
- height: 128px;
- object-fit: cover;
- background-position: center;
- border-radius: 50%;
-}
-
-/* open-sans-regular - vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic */
-@font-face {
- font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
- font-family: 'Open Sans';
- font-style: normal;
- font-weight: 400;
- src: url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.eot'); /* IE9 Compat Modes */
- src: url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
- url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.woff2') format('woff2'), /* Super Modern Browsers */
- url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.woff') format('woff'), /* Modern Browsers */
- url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.ttf') format('truetype'), /* Safari, Android, iOS */
- url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
-}
-/* open-sans-600 - vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic */
-@font-face {
- font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
- font-family: 'Open Sans';
- font-style: normal;
- font-weight: 600;
- src: url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.eot'); /* IE9 Compat Modes */
- src: url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
- url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.woff2') format('woff2'), /* Super Modern Browsers */
- url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.woff') format('woff'), /* Modern Browsers */
- url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.ttf') format('truetype'), /* Safari, Android, iOS */
- url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.svg#OpenSans') format('svg'); /* Legacy iOS */
-}
-/* open-sans-700 - vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic */
-@font-face {
- font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
- font-family: 'Open Sans';
- font-style: normal;
- font-weight: 700;
- src: url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.eot'); /* IE9 Compat Modes */
- src: url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
- url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.woff2') format('woff2'), /* Super Modern Browsers */
- url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.woff') format('woff'), /* Modern Browsers */
- url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.ttf') format('truetype'), /* Safari, Android, iOS */
- url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.svg#OpenSans') format('svg'); /* Legacy iOS */
-}
-/* open-sans-800 - vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic */
-@font-face {
- font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
- font-family: 'Open Sans';
- font-style: normal;
- font-weight: 800;
- src: url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-800.eot'); /* IE9 Compat Modes */
- src: url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
- url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-800.woff2') format('woff2'), /* Super Modern Browsers */
- 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 */
-}
\ No newline at end of file
diff --git a/css/skeleton-light.css b/css/skeleton-light.css
deleted file mode 100644
index d33a65d0..00000000
--- a/css/skeleton-light.css
+++ /dev/null
@@ -1,261 +0,0 @@
-/*
-* littlelink V1
-* https://littlelink.com
-* Free to use under the MIT license.
-* http://www.opensource.org/licenses/mit-license.php
-* 12/21/2019
-*
-* Built using:
-*
-* 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
-โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
-- Grid
-- Base Styles
-- Typography
-- Links
-- Code
-- Spacing
-- Utilities
-*
-* You'll find the button css in css/brands.css.
-*
-*/
-
-/* Grid
-โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
-.container {
- position: relative;
- width: 100%;
- max-width: 600px;
- text-align: center;
- margin: 0 auto;
- padding: 0 20px;
- box-sizing: border-box;
-}
-.container-left {
- position: relative;
- width: 100%;
- max-width: 600px;
- text-align: left;
- margin: 0 auto;
- padding: 0 20px;
- box-sizing: border-box;
-}
-.column {
- position: center;
- width: 100%;
- float: center;
- box-sizing: border-box;
-}
-
-/* For devices larger than 400px */
-@media (min-width: 400px) {
- .container {
- width: 85%;
- padding: 0;
- }
-}
-
-/* For devices larger than 550px */
-@media (min-width: 550px) {
- .container {
- width: 80%;
- }
- .column,
- .columns {
- margin-left: 0;
- }
- .column:first-child,
- .columns:first-child {
- margin-left: 0;
- }
-}
-
-/* Base Styles
-โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
-/* NOTE
-html is set to 62.5% so that all the REM measurements throughout Skeleton
-are based on 10px sizing. So basically 1.5rem = 15px :) */
-
-html {
- font-size: 100%;
- color-scheme: light;
-}
-body {
- font-size: 18px;
- line-height: 24px;
- font-weight: 400;
- font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial,
- sans-serif;
-}
-
-/* Typography
-โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
-h1 {
- margin-top: 0;
- margin-bottom: 16px;
- font-weight: 800;
-}
-h1 {
- font-size: 24px;
- line-height: 64px;
- letter-spacing: 0;
-}
-
-/* Larger than phablet */
-@media (min-width: 550px) {
- h1 {
- font-size: 48px;
- line-height: 96px;
- }
-}
-
-p {
- margin-top: 0;
-}
-
-/* Links
-โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
-a {
- color: #2457F5;
-}
-a:hover {
- color: #083BDA;
-}
-
-/* Code
-โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
-code {
- padding: 0.2rem 0.5rem;
- margin: 0 0.2rem;
- font-size: 90%;
- white-space: nowrap;
- background: #f1f1f1;
- border: 1px solid #e1e1e1;
- border-radius: 4px;
-}
-pre > code {
- display: block;
- padding: 1rem 1.5rem;
- white-space: pre;
-}
-
-/* Spacing
-โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
-button,
-.button {
- margin-bottom: 1rem;
-}
-input,
-textarea,
-select,
-fieldset {
- margin-bottom: 1.5rem;
-}
-pre,
-blockquote,
-dl,
-figure,
-p,
-ol {
- margin-bottom: 2.5rem;
-}
-
-/* Utilities
-โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
-.u-full-width {
- width: 100%;
- box-sizing: border-box;
-}
-.u-max-full-width {
- max-width: 100%;
- box-sizing: border-box;
-}
-.u-pull-right {
- float: right;
-}
-.u-pull-left {
- float: left;
-}
-
-/* Misc
-โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
-hr {
- margin-top: 3rem;
- margin-bottom: 3.5rem;
- border-width: 0;
- border-top: 1px solid #e1e1e1;
-}
-/* Radius values:
-
-10%-40%: Squircles
-50% (default): True circle
-*/
-.avatar {
- width: 128px;
- height: 128px;
- object-fit: cover;
- background-position: center;
- border-radius: 50%;
-}
-
-/* open-sans-regular - vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic */
-@font-face {
- font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
- font-family: 'Open Sans';
- font-style: normal;
- font-weight: 400;
- src: url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.eot'); /* IE9 Compat Modes */
- src: url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
- url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.woff2') format('woff2'), /* Super Modern Browsers */
- url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.woff') format('woff'), /* Modern Browsers */
- url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.ttf') format('truetype'), /* Safari, Android, iOS */
- url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
-}
-/* open-sans-600 - vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic */
-@font-face {
- font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
- font-family: 'Open Sans';
- font-style: normal;
- font-weight: 600;
- src: url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.eot'); /* IE9 Compat Modes */
- src: url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
- url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.woff2') format('woff2'), /* Super Modern Browsers */
- url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.woff') format('woff'), /* Modern Browsers */
- url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.ttf') format('truetype'), /* Safari, Android, iOS */
- url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.svg#OpenSans') format('svg'); /* Legacy iOS */
-}
-/* open-sans-700 - vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic */
-@font-face {
- font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
- font-family: 'Open Sans';
- font-style: normal;
- font-weight: 700;
- src: url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.eot'); /* IE9 Compat Modes */
- src: url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
- url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.woff2') format('woff2'), /* Super Modern Browsers */
- url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.woff') format('woff'), /* Modern Browsers */
- url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.ttf') format('truetype'), /* Safari, Android, iOS */
- url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.svg#OpenSans') format('svg'); /* Legacy iOS */
-}
-/* open-sans-800 - vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic */
-@font-face {
- font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
- font-family: 'Open Sans';
- font-style: normal;
- font-weight: 800;
- src: url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-800.eot'); /* IE9 Compat Modes */
- src: url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
- url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-800.woff2') format('woff2'), /* Super Modern Browsers */
- 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 */
-}
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 00000000..906fa625
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,382 @@
+/*
+* LittleLink
+* https://littlelink.io
+* Free to use under the MIT license
+* http://www.opensource.org/licenses/mit-license.php
+*/
+
+/* Base Typography Settings
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
+:root {
+ font-size:16px;
+}
+
+/* Grid
+ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
+ .container {
+ position:relative;
+ width:100%;
+ max-width:37.5rem; /* 600px */
+ text-align:center;
+ margin:0 auto;
+ padding:3rem 1.25rem 0 1.25rem;
+ box-sizing:border-box;
+}
+.container-left {
+ position:relative;
+ width:100%;
+ max-width:37.5rem;
+ text-align:left;
+ margin:0 auto;
+ padding:0 1.25rem;
+ box-sizing:border-box;
+}
+.container-left p {
+ margin-bottom: 1rem; /* 16px space between paragraphs */
+ }
+.column {
+ position:center;
+ width:100%;
+ float:center;
+ box-sizing:border-box;
+}
+/* For devices larger than 400px */
+ @media (min-width:25rem) { /* 400px */
+ .container {
+ width:85%;
+ padding-left:0;
+ padding-right:0;
+}
+}/* For devices larger than 550px */
+ @media (min-width:34.375rem) { /* 550px */
+ .container {
+ width:80%;
+}
+.column,.columns {
+ margin-left:0;
+}
+.column:first-child,.columns:first-child {
+ margin-left:0;
+}
+}
+
+/* Base Styles
+ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
+ body {
+ margin:0;
+ padding:0;
+ background-color:#ffffff;
+ color:#1a1a1a;
+ font-family:"Open Sans",system-ui;
+ font-size:1.125rem; /* 18px */
+ font-weight:400;
+ line-height:1.6;
+}
+
+/* Typography
+ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
+ h1 {
+ margin:0 0 0.5rem 0;
+ font-size:3rem; /* 48px */
+ font-weight:800;
+ line-height:1;
+ letter-spacing:0;
+ word-wrap:break-word;
+ overflow-wrap:break-word;
+ hyphens:auto; /* Delete this to remove automatic hyphen on line break */
+}
+.container p {
+ margin:0 0 2rem 0;
+}
+
+/* Base Typography Settings
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
+/* Base size - 16px browser default */
+:root {
+ font-size:16px; /* Using a 1.25 modular scale for typography */
+ --scale-0:1rem; /* 16px */
+ --scale-1:1.25rem; /* 20px */
+ --scale-2:1.563rem; /* 25px */
+ --scale-3:1.953rem; /* 31px */
+ --scale-4:2.441rem; /* 39px */
+ --scale-5:3.052rem; /* 49px */
+
+ /* Spacing units */
+ --spacing-xs:0.5rem; /* 8px */
+ --spacing-s:1rem; /* 16px */
+ --spacing-m:1.5rem; /* 24px */
+ --spacing-l:2rem; /* 32px */
+ --spacing-xl:3rem; /* 48px */
+ --spacing-xxl:4rem; /* 64px */
+}
+
+/* Avatar */
+.avatar {
+ width: 8rem; /* 128px */
+ height: 8rem;
+ border-radius: 50%;
+ object-fit: cover;
+ background-position: center;
+ margin-bottom: var(--spacing-l);
+ margin-left: auto;
+ margin-right: auto;
+ display: block;
+ }
+
+/* Typography Scale */
+h1 {
+ margin:0 0 var(--spacing-m) 0;
+ font-size:var(--scale-5); /* ~49px */
+ font-weight:800;
+ line-height:1.1;
+ letter-spacing:-0.02em;
+ word-wrap:break-word;
+ overflow-wrap:break-word;
+}
+body {
+ font-size:var(--scale-1); /* 20px */
+ line-height:1.6;
+}
+.container p {
+ margin:0 0 var(--spacing-xl) 0;
+ font-size:var(--scale-1);
+ line-height:1.6;
+}
+
+/* Container spacing */
+.container {
+ padding:var(--spacing-xl) var(--spacing-m) 0 var(--spacing-m);
+ text-align:center;
+}
+
+/* Footer */
+footer {
+ margin:var(--spacing-xxl) 0; /* 4rem (64px) top and bottom */
+ font-size:var(--scale-0);
+}
+
+/* Responsive adjustments */
+@media (max-width:34.375rem) { /* 550px */
+ h1 {
+ font-size:var(--scale-4);
+}
+body {
+ font-size:var(--scale-0);
+}
+.container p {
+ font-size:var(--scale-0);
+}
+.avatar {
+ margin-bottom:var(--spacing-m);
+}
+footer {
+ margin:var(--spacing-xl) 0; /* 3rem (48px) top and bottom */
+}
+}
+
+/* Links
+ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
+ a {
+ color:#2457F5;
+ text-decoration:underline;
+}
+a:hover {
+ color:#083BDA;
+}
+
+/* Buttons
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
+.button,button {
+ display:inline-flex;
+ align-items:center;
+ justify-content:center;
+ width:18.75rem; /* 300px */
+ min-height:3rem; /* 48px */
+ padding:0.75rem 1rem; /* 12px ; 16px */
+ font-size:1.125rem; /* 18px */
+ font-weight:700;
+ text-decoration:none;
+ white-space:normal;
+ background-color:var(--button-background,transparent);
+ color:var(--button-text,#000000);
+ border:var(--button-border,none);
+ border-radius:0.5rem;
+ cursor:pointer;
+ box-sizing:border-box;
+ hyphens:auto; /* Delete this to remove automatic hyphen on line break */
+ margin-bottom:1rem;
+ text-align:center;
+ line-height:1.3;
+}
+
+/* Icons
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
+.icon {
+ width:1.25rem;
+ height:1.25rem;
+ margin-right:0.5rem;
+ flex-shrink:0;
+}
+
+/* Avatar
+ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
+.avatar {
+ width: 8rem; /* 128px */
+ height: 8rem;
+ object-fit: cover;
+ background-position: center;
+ margin-bottom: var(--spacing-l);
+ }
+
+ /* Modifier for no avatar rounding */
+ .avatar--none {
+ border-radius: 0%;
+ }
+
+ /* Modifier for rounded avatar */
+ .avatar--rounded {
+ border-radius: 50%;
+ }
+
+ /* Modifier for slightly rounded corners */
+ .avatar--soft {
+ border-radius: 0.5rem; /* 8px rounded corners */
+ }
+
+/* Theme System
+ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
+/* Light theme is default above */
+
+/* Dark theme */
+:root.theme-dark {
+ color-scheme:dark;
+}
+:root.theme-dark :focus-visible {
+ outline: 2px solid #4899F7;
+ outline-offset: 2px;
+ }
+:root.theme-dark body {
+ background-color:#121212;
+ color:#ffffff;
+}
+:root.theme-dark a:not(.button) {
+ color:#4899F7;
+}
+:root.theme-dark a:not(.button):hover {
+ color:#7AB8FF;
+}
+
+/* Auto theme */
+:root.theme-auto {
+ color-scheme:light dark;
+}
+@media (prefers-color-scheme:dark) {
+ :root.theme-auto body {
+ background-color:#121212;
+ color:#ffffff;
+}
+:root.theme-auto :focus-visible {
+ outline: 2px solid #4899F7;
+ outline-offset: 2px;
+ }
+:root.theme-auto a:not(.button) {
+ color:#4899F7;
+}
+:root.theme-auto a:not(.button):hover {
+ color:#7AB8FF;
+}
+}
+
+/* Button Text Color Override
+ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
+ .button:hover,button:hover {
+ color:var(--button-text);
+}
+
+/* Responsive Typography
+ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
+ @media (max-width:34.375rem) { /* 550px */
+ h1 {
+ font-size:2rem; /* 32px */
+ }
+ body {
+ font-size:1rem; /* 16px */
+ }
+}
+
+/* Privacy Page Styles
+ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
+nav {
+ margin:var(--spacing-l) 0;
+ text-align:left;
+}
+section {
+ margin:var(--spacing-xl) 0;
+ text-align:left;
+}
+h2 {
+ font-size:var(--scale-3);
+ font-weight:700;
+ margin-bottom:var(--spacing-m);
+}
+h3 {
+ font-size:var(--scale-2);
+ font-weight:600;
+ margin:var(--spacing-l) 0 var(--spacing-s) 0;
+}
+ul {
+ list-style:none;
+ padding:0;
+ margin:0 0 var(--spacing-m) 0;
+}
+ul li {
+ margin-bottom:var(--spacing-xs);
+}
+
+/* Privacy page specific responsive adjustments */
+ @media (max-width:34.375rem) {
+ h2 {
+ font-size:var(--scale-2);
+ }
+ h3 {
+ font-size:var(--scale-1);
+ }
+ section {
+ margin:var(--spacing-l) 0;
+ }
+}
+
+/* Font Face Definitions
+ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
+@font-face {
+ font-display:swap;
+ font-family:'Open Sans';
+ font-style:normal;
+ font-weight:400;
+ src:url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.eot');
+ src:url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.eot?#iefix') format('embedded-opentype'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.woff2') format('woff2'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.woff') format('woff'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.ttf') format('truetype'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.svg#OpenSans') format('svg');
+}
+@font-face {
+ font-display:swap;
+ font-family:'Open Sans';
+ font-style:normal;
+ font-weight:600;
+ src:url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.eot');
+ src:url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.eot?#iefix') format('embedded-opentype'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.woff2') format('woff2'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.woff') format('woff'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.ttf') format('truetype'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.svg#OpenSans') format('svg');
+}
+@font-face {
+ font-display:swap;
+ font-family:'Open Sans';
+ font-style:normal;
+ font-weight:700;
+ src:url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.eot');
+ src:url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.eot?#iefix') format('embedded-opentype'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.woff2') format('woff2'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.woff') format('woff'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.ttf') format('truetype'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.svg#OpenSans') format('svg');
+}
+@font-face {
+ font-display:swap;
+ font-family:'Open Sans';
+ font-style:normal;
+ font-weight:800;
+ src:url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-800.eot');
+ src:url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-800.eot?#iefix') format('embedded-opentype'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-800.woff2') format('woff2'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-800.woff') format('woff'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-800.ttf') format('truetype'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-800.svg#OpenSans') format('svg');
+}
diff --git a/images/avatar.png b/images/avatar.png
new file mode 100644
index 00000000..b88ecad6
Binary files /dev/null and b/images/avatar.png differ
diff --git a/images/avatar@2x.png b/images/avatar@2x.png
new file mode 100644
index 00000000..2255a425
Binary files /dev/null and b/images/avatar@2x.png differ
diff --git a/images/icons/ko-fi.svg b/images/icons/ko-fi.svg
index 8bcd6858..fa05eed6 100644
--- a/images/icons/ko-fi.svg
+++ b/images/icons/ko-fi.svg
@@ -1 +1,20 @@
-
\ No newline at end of file
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/images/icons/littlelink.svg b/images/icons/littlelink.svg
index 3a5a0073..55e0bc86 100644
--- a/images/icons/littlelink.svg
+++ b/images/icons/littlelink.svg
@@ -1 +1,11 @@
-
\ No newline at end of file
+
+
+
+
+
+
+
+
+
+
+
diff --git a/images/icons/medium.svg b/images/icons/medium.svg
index e8ea6473..0ae1ff41 100644
--- a/images/icons/medium.svg
+++ b/images/icons/medium.svg
@@ -1 +1,12 @@
-
\ No newline at end of file
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/images/littlelink.png b/images/littlelink.png
deleted file mode 100644
index b38bd437..00000000
Binary files a/images/littlelink.png and /dev/null differ
diff --git a/images/littlelink.svg b/images/littlelink.svg
deleted file mode 100644
index 2f2d4869..00000000
--- a/images/littlelink.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/images/littlelink@2x.png b/images/littlelink@2x.png
deleted file mode 100644
index 48629a38..00000000
Binary files a/images/littlelink@2x.png and /dev/null differ
diff --git a/index.html b/index.html
index 01955d07..264072ca 100644
--- a/index.html
+++ b/index.html
@@ -1,454 +1,401 @@
-
-
-
-
+
-
-
- LittleLink
-
-
+
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+ LittleLink
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
+
-
-
-
-
+
+
-
+
- This page has been built with every pre-designed button available in LittleLink by default. You can rearrange and delete as needed.
+
+
+ LittleLink
+
- You can add your own brand or others brands you may need in the `css/brands.css` file.
+
+
An open source DIY Linktree alternative.
- You can add custom icons to `images/icons/...`. It is recommended to use a 24x24 .SVG.
+
+
+
+
+
+
-
diff --git a/privacy.html b/privacy.html
index bbf642bc..0650cb58 100644
--- a/privacy.html
+++ b/privacy.html
@@ -1,164 +1,86 @@
-
+
+
+
+
+
-
+
+
-
-
-
LittleLink Privacy Policy
-
-
+
+
Privacy Policy | LittleLink
+
-
-
-
-
+
+
+
-
-
-
-
-
-
-
+
+
+
+
+
+
-
+
-
-
-
-
-
- โฌ
๏ธ Back to main page
-
-
-
-
-
-
๐ Privacy Overview
-
-
-
- Personal Data collected for the following purposes and using the
- following services:
-
-
-
- ๐งฎ Analytics
-
- 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.
-
-
-
- 1.) Example LLC.
- Personal Data:
- various types of Data as specified in the privacy policy of the
- service
- Privacy Policy
-
-
-
-
-
- ๐ฆ Displaying Content From External Platforms
-
- This type of service allows you to view content hosted on external
- platforms directly from the pages of this website and interact with
- them.
- 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.
-
-
-
- 1.) Example LLC
- Personal Data:
- Usage Data; various types of Data as specified in the privacy
- policy of the service
-
- Privacy Policy
-
-
-
-
-
- ๐ Hosting and Backend Infrastructure
-
- This type of service has the purpose of hosting Data and files that
- enable this website to exist.
-
-
- 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.
-
-
-
- 1.) Example LLC.
- Personal Data:
- various types of Data as specified in the privacy policy of the
- service
-
- Privacy Policy
-
-
-
-
-
-
-
- Build your own by forking LittleLink .
-
-
+
+
+
+ โ Back to main page
+
+
+
Privacy Overview
+
+
+ Analytics
+ 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.
+
+ Example LLC
+
+ Personal Data: various types of Data as specified in the privacy policy of the service
+ Privacy Policy
+
+
+
+
+ External Content
+ This type of service allows you to view content hosted on external platforms directly from the pages of this website and interact with them.
+ 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.
+
+ Example LLC
+
+ Personal Data: Usage Data; various types of Data as specified in the privacy policy of the service
+ Privacy Policy
+
+
+
+
+ Hosting and Infrastructure
+ This type of service has the purpose of hosting Data and files that enable this website to exist.
+ 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.
+
+ Example LLC
+
+ Personal Data: various types of Data as specified in the privacy policy of the service
+ Privacy Policy
+
+
+
+
-
-
+
+
\ No newline at end of file