Added Theme files

JulianPrieber · JulianPrieber · commit 51070c96f583 · 2022-07-02T19:06:20.000+02:00
diff --git a/animations.css b/animations.css
@@ -0,0 +1,120 @@
+/* ************************************************************* */
+/* 
+/* Use this file to add custom CSS animations.
+/* Delete this file if you wish to use the default animations.
+/* If you do not want to have animations in your theme,
+/* remove or comment them and include this file in your theme.
+/* 
+/* ************************************************************* */
+
+
+/* Table of contents
+––––––––––––––––––––––––––––––––––––––––––––––––––
+- Entrance animations
+- Button hover animations
+- Icon hover animations
+- Footer hover animations
+
+*/
+
+
+
+/* Entrance animations
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+
+.button-entrance {
+    animation-name: popUp;
+    animation-duration: 1s;
+    animation-fill-mode: both;
+    /* Used to start button entrance animation one after another  */
+    animation-delay: calc(var(--delay)/10);
+  }
+
+@keyframes popUp {
+  from {
+    opacity: 0;
+    transform: scale3d(0.3, 0.3, 0.3);
+  }
+
+  50% {
+    opacity: 1;
+  }
+}
+
+.fadein {
+    animation-name: fadein;
+    animation-duration: 3s;
+    animation-fill-mode: both;
+  }
+
+@keyframes fadein {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+
+/* Button hover animations
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+/* (Also apply to icon) */
+
+.credit-hover{
+    display:inline-block;
+    -webkit-transform:perspective(1px) translateZ(0);
+    transform:perspective(1px) translateZ(0);
+    box-shadow:0 0 1px rgba(0,0,0,0);
+    -webkit-transition-duration:.3s;
+    transition-duration:.3s;
+    -webkit-transition-property:transform;
+    transition-property:transform
+}
+.credit-hover:active, 
+.credit-hover:focus, 
+.credit-hover:hover{
+    -webkit-transform:scale(1.1);
+    transform:scale(1.1)
+}
+
+.button-hover{
+    display:inline-block;
+    -webkit-transform:perspective(1px) translateZ(0);
+    transform:perspective(1px) translateZ(0);
+    box-shadow:0 0 1px rgba(0,0,0,0);
+    -webkit-transition-duration:.1s;
+    transition-duration:.1s;
+    -webkit-transition-property:transform;
+    transition-property:transform
+}
+.button-hover:active, 
+.button-hover:focus, 
+.button-hover:hover{
+    filter: contrast(115%);
+    text-shadow: 0px 0px 20px #49FF18;
+    -webkit-transform:scale(1.02);
+    transform:scale(1.02)
+}
+
+
+/* Footer hover animations
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+
+.footer-hover{
+    display:inline-block;
+    -webkit-transform:perspective(1px) translateZ(0);
+    transform:perspective(1px) translateZ(0);
+    box-shadow:0 0 1px rgba(0,0,0,0);
+    -webkit-transition-duration:.3s;
+    transition-duration:.3s;
+    -webkit-transition-property:transform;
+    transition-property:transform;
+    -webkit-transition-timing-function:ease-out;
+    transition-timing-function:ease-out
+}
+.footer-hover:active,.footer-hover:focus,.footer-hover:hover{
+    -webkit-transform:translateY(-8px);
+    transform:translateY(-8px)
+}
diff --git a/brands.css b/brands.css
@@ -0,0 +1,111 @@
+
+/* Table of contents
+––––––––––––––––––––––––––––––––––––––––––––––––––
+
+- Rounded user avatars
+- Buttons
+- Brand Styles
+
+*/
+
+
+/* Rounded avatars
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+
+/* Disable this if you don't want rounded avatars for users */
+.rounded-avatar {
+  clip-path: path('m189.1 98.6q2.5 0.6 5.1 1.3c1.4 0.4 3.5 0 4.1 2 0.5 1.9 0.1 5.2 0.1 7.3 0.1 2.3 0.4 4-0.8 5.7-0.9 1.3-2.7 3.2-2.9 5-0.3 2.6 2.1 1.7 3.1 3 0.9 1.2 0.6 4 0.6 5.6q0.2 3.8 0.2 7.7c0.1 9.1 0.4 18.4 1 27.4q0.1 1.9 0.2 3.7 0.1 1.8 0.1 3.6 0.1 1.9 0 3.7 0 1.8-0.1 3.7c-0.3 4.4-1.2 8.6-1.1 13.1 0.1 2.2 1 5.6 0.5 7.6-0.4 2-1.7 1.2-3.1 1q-1.2-0.1-2.3-0.1-1.2 0-2.4 0-1.2 0-2.3 0.1-1.2 0.1-2.4 0.2c-3.7 0.4-7.2-1.8-10.8-1.8-1.5 0-3.5 0.8-4.9 0.2-1.4-0.6-0.9-2.3-1.9-3.3-0.6-0.6-1.7 0-2.4 0q-0.3-0.1-0.6-0.1-0.3-0.1-0.7-0.1-0.3-0.1-0.6-0.1-0.3-0.1-0.6-0.2-0.7-0.1-1.3-0.2-0.7-0.1-1.3-0.1-0.7 0-1.3 0-0.7 0.1-1.3 0.2-0.6 0.1-1.1 0.2-0.5 0.1-1 0.3-0.5 0.3-0.9 0.6-0.5 0.3-1 0.7-0.4 0.5-0.8 0.8-0.5 0.4-1 0.7-0.4 0.2-0.9 0.3-0.5 0.2-1 0.2c-3.5 0.2-6.8-0.1-10.3 0.4-3.1 0.4-6.2 0.6-9.3 0.8-3.6 0.3-7.1 0.9-10.7 0.6-1.7-0.1-3.3-0.8-5.2-0.8-1.8 0-1.1-0.8-2.6-1.9-0.7-0.5-2-0.2-2.9-0.6q-0.2-0.2-0.5-0.4-0.3-0.2-0.6-0.4-0.3-0.2-0.5-0.4-0.3-0.2-0.6-0.5c-1.5-1.2-1.6-0.2-3.2 0.6-1.3 0.6-1.8 1-2.7-0.4-0.9-1.3-0.7-4.7-1.9-5.7-0.9 0.6-1 5-1.2 6.2-0.2 1.4 0 2.1-1 2.7-0.5 0.3-2 0-2.6 0h-11.2c-7.9 0.1-15.7-0.7-23.5-0.7-3.8 0-7.6 0.2-11.4-0.2q-0.6-0.1-1.3-0.2-0.7-0.1-1.4-0.1-0.7-0.1-1.3-0.1-0.7 0-1.4-0.1c-1.8 0.2-2.2-0.5-3.5-2.3-1.1-1.5-1.7-3-3.4-2.1-1.4 0.7-2.3 3.2-3.8 3.4-1.3 0.2-2.9-0.3-4.2-0.3q-2.9 0-5.9 0.1-5.4 0.3-10.9 0.7c-3.4 0.3-6.6 1.3-10 1.4-1.8 0-2.3 0.4-2.3-2.2 0.1-2.2 0.2-4.4 0.2-6.7 0-4 0.3-8 0.5-12 0.2-5 0-10 0.2-15 0.2-2.9-0.2-7.1 1-9.6 0.5-1.1 2.8-2.3 2.7-3.5-0.1-1.3-1.9-2.1-2.6-2.6-1.9-1.1-1.9-1.4-1.9-4.1 0-2.2-0.1-4.4 0-6.6 0.5-8.6 0.4-17.1 0.6-25.7 0.1-2.3-0.3-5.6 0.2-7.8 0.3-1.5 0.4-1.3 1.8-1.5q0.5-0.1 1-0.2 0.6-0.1 1.1-0.2 0.5-0.2 1-0.4 0.5-0.2 1-0.4c1.5-0.9 0.9-1.2-0.3-2.2-1.4-1.2-3.3-2.1-4.5-3.5-1.1-1.1-1-2.7-1.1-4.5q0-0.7-0.1-1.4 0-0.8 0-1.5 0-0.7 0-1.4 0-0.7 0-1.4c0-0.6-0.3-2.2 0-2.9 0.4-0.6 0.4 0 0.9-0.4 0.8-0.6 0.7 0.3 1-1.2q0-0.3 0-0.7 0-0.3 0-0.7-0.1-0.3-0.1-0.7 0-0.3-0.1-0.6c-0.1-1.9-0.1-3.7-0.1-5.5 0-2.1 0.3-3.6-0.7-5.4-1-1.7-0.8-3.5-0.9-5.8-0.1-9-0.8-18.3-0.5-27.3 0.2-4.9 0.5-9.9 0.4-14.8-0.1-4.3-0.6-8.5-0.6-12.8 0-1.7-0.4-4.4 0.6-5.2 1-0.6 3.6 0.2 4.7 0.2 3 0.1 5.8-0.1 8.8 0.1 3.4 0.3 6.9 0.5 10.4 0.7 2.6 0.2 7-0.5 9 1.9 0.8 0.8 2.1 3.8 3.1 3.8 1.1 0 2-3.1 3.2-3.5 0.4-0.1 1.2 0.5 1.7 0.6q0.3 0 0.6 0 0.3 0 0.5 0 0.3 0 0.6 0 0.3 0 0.6-0.1 0.5 0 1-0.1 0.5-0.1 1-0.2 0.4-0.1 0.9-0.2 0.5-0.1 1-0.3c3.1-1.5 6.7-0.7 9.9-0.5 3.1 0.2 6.2 0.5 9.2 0.8 7 0.5 13.7 1.7 20.7 0.3q1.2-0.2 2.4-0.3 1.2-0.1 2.4-0.2 1.2 0 2.4 0 1.2 0 2.4 0.1c1.6 0.1 1.7 0.3 2.2 2.3q0.7 2.7 1.4 5.5c1.1-1.5 1.4-3.7 1.9-5.7 0.7-2.7 1.8-2 3.8-1.9q0.4 0.1 0.8 0.1 0.4 0 0.8 0 0.4 0 0.8-0.1 0.4 0 0.8 0c0.5-0.1 1.7-0.9 2.3-0.6 1.3 0.7 0.8 4.4 1.5 5.5 0.6 1.1 2.8-0.2 3.4-0.9 1.1-1.1 1.1-3.2 1.5-4.8 0.5-2.1 1.3-0.9 2.7-0.5q0.7 0.2 1.3 0.3 0.7 0.2 1.3 0.3 0.6 0.1 1.3 0.2 0.6 0.1 1.3 0.1c6.9 1 14.1 0.6 21 0.8 7.2 0.3 14.3-0.2 21.4-0.5 3.7-0.1 7.4-1 11.1-1 1.5 0 2.6-0.2 3.6 1.5 0.7 1.2 1 3 1.6 4.3 1.1-1.9 1.6-6.9 3.6-7.4 1.1-0.4 2.8 0.3 3.9 0.4q0.6 0 1.2 0.1 0.6 0 1.2 0 0.6 0 1.2 0 0.6-0.1 1.2-0.1c2.2-0.4 3.1-0.9 2.5 2.6-0.2 1.7-0.7 3-0.7 4.7q0.1 0.7 0.1 1.3 0 0.7 0 1.4-0.1 0.7-0.1 1.3-0.1 0.7-0.2 1.4c-0.4 3.4-0.1 7 0.2 10.5q0.1 1.4 0.1 2.9 0.1 1.5 0.2 3 0 1.5 0 3 0 1.4 0 2.9c0 1.6-0.1 3.1-0.2 4.8 0 1.6 0.4 3.3 0.2 5-0.4 3.1-2 4.9-3.6 7 2 1 2.7 1.1 2.3 4q-0.1 1-0.1 1.9-0.1 0.9-0.1 1.9-0.1 0.9-0.1 1.9 0 0.9-0.1 1.9c0 1.3 0 2.8-0.5 3.9-0.4 0.8-1.5 1.2-1.8 1.9-0.4 1.1 0.8 4.5 1 6 0.5 5.7 1.7 11.5 1.8 17.3 0 1.2 0.2 2.3-0.6 3.1-0.7 0.7-2.2 0.8-3.1 1-0.6 0.2-5.4 1.1-5.4 1.3 0.9 0.2 0-0.1 0-0.1z');
+  width: 201px;
+  height: 201px;
+}
+
+
+/* Buttons
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+
+  @media (max-width: 400px) {
+  .button,
+    button {
+      display: inline-block;
+      text-decoration: none;
+      text-align: center;
+      vertical-align: middle;
+      font-size: 14px !important;
+      color: #fff !important;
+      height: 48px;
+      width: 100%;
+      font-weight: 100;
+      line-height: 48px;
+      letter-spacing: 0.1px;
+      white-space: wrap;
+      cursor: pointer;
+      font-family: "sottext", sans-serif !important;
+      text-transform: uppercase;
+      background: url(https://seaofthieveswebassetsprod.azureedge.net/60471ecd4f70f24f193bcc51f714e286/assets/button/turquoise-button-sprite.svg#off) 0 0/100% 100% no-repeat !important;
+     }
+  }
+  
+  @media (max-width: 550px) {
+    .button,
+      button {
+        display: inline-block;
+        text-decoration: none;
+        text-align: center;
+        vertical-align: middle;
+        font-size: 14px !important;
+        color: #fff !important;
+        height: 48px;
+        width: 80%;
+        font-weight: 100;
+        line-height: 48px;
+        letter-spacing: 0.1px;
+        white-space: wrap;
+        cursor: pointer;
+        font-family: "sottext", sans-serif !important;
+        text-transform: uppercase;
+        background: url(https://seaofthieveswebassetsprod.azureedge.net/60471ecd4f70f24f193bcc51f714e286/assets/button/turquoise-button-sprite.svg#off) 0 0/100% 100% no-repeat !important;
+       }
+    }
+
+  @media (min-width: 551px) {
+  .button,
+    button {
+      display: inline-block;
+      text-decoration: none;
+      text-align: center;
+      vertical-align: middle;
+      font-size: 14px !important;
+      color: #fff !important;
+      height: 60px;
+      width: 400px;
+      font-weight: 100;
+      line-height: 60px;
+      letter-spacing: 0.1px;
+      white-space: wrap;
+      cursor: pointer;
+      font-family: "sottext", sans-serif !important;
+      text-transform: uppercase;
+      background: url(https://seaofthieveswebassetsprod.azureedge.net/60471ecd4f70f24f193bcc51f714e286/assets/button/turquoise-button-sprite.svg#off) 0 0/100% 100% no-repeat !important;
+     }
+  }
+button:hover,
+.button:focus {
+  color: #333;
+  border-color: #888;
+  outline: 0; }
+.button.button-primary {
+  color: #FFF;}
+.button.button-primary:hover,
+.button.button-primary:focus {
+  color: #FFF;} 
+
+
+/* Brand Icons
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+
+.icon {
+  padding: 0px 8px 3.5px 0px;
+  vertical-align: middle;
+  width: 20px;
+  height: 20px;
+}
diff --git a/preview.png b/preview.png
diff --git a/readme.md b/readme.md
@@ -0,0 +1,28 @@
+# A LittleLink Custom Theme
+Find more themes: https://github.com/JulianPrieber/llc-themes
+                                                                                                                                                                         
+*	Theme Name: Sot
+*	Theme Version: 1.0
+*	Theme Date: 2022-07-02
+*	Theme Author: JulianPrieber
+*	Theme Author URI: https://github.com/JulianPrieber
+*	Theme License: GPLv3 (Non-commercial use only)
+
+
+### Used assets:
+* Built using:
+* https://github.com/dhg/Skeleton
+* License: MIT
+
+*
+* https://www.dafont.com/pragroman.font
+* License: Non-commercial use only
+
+*
+* https://www.dafont.com/windlass.font
+* License: Non-commercial use only
+
+
+* Button vector graphics:
+* https://www.seaofthieves.com
+* © Microsoft, Rare, the Rare logo, Sea of Thieves are trademarks of the Microsoft group of companies.
diff --git a/share.button.css b/share.button.css
@@ -0,0 +1,108 @@
+.share-icon {
+  padding: 0px 8px 3.5px 0px;
+  vertical-align: middle;
+  color: #fff !important; 
+  width: 20px;
+  height: 20px;
+}
+
+.sharediv {
+  position:relative; 
+  top: 30px; 
+  right: 30px; 
+  padding-bottom: 40px;
+}
+
+.toastdiv {
+  display: -webkit-flex;
+  display: flex;
+  -webkit-align-items: center;
+  align-items: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+}
+
+.toastbox {
+  width: 280px;
+  padding: 10px;
+  background-color: rgba(0, 0, 0, 0.7);
+  color: white;
+  border-radius: 4px;
+  position: fixed;
+  top: 105%;
+  -webkit-transition: transform 0.3s linear;
+  transition: transform 0.3s linear;
+  z-index: 2;
+  text-align: center;
+}
+.toastbox.toast-tox--active {
+  -webkit-transform: translateY(-150px);
+  transform: translateY(-150px);
+}
+  .sharebutton,
+  sharebutton {
+    display: inline-block;
+    text-decoration: none;
+    height: 48px;
+    text-align: center;
+    vertical-align: middle;
+    font-size: 14px;
+    width: 48px;
+    font-weight: 100;
+    line-height: 48px;
+    letter-spacing: 0.1px;
+    white-space: wrap;
+    border-radius: 8px;
+    cursor: pointer;
+    color: #fff !important; 
+    background: url(https://seaofthieveswebassetsprod.azureedge.net/60471ecd4f70f24f193bcc51f714e286/assets/button/green-button-sprite.svg#off) 0 0/100% 100% no-repeat !important;
+   }
+@media screen and (min-width: 600px) {
+  .sharebutton,
+  sharebutton {
+    display: inline-block;
+    text-decoration: none;
+    height: 48px;
+    text-align: center;
+    vertical-align: middle;
+    font-size: 14px;
+    width: 150px;
+    font-weight: 100;
+    line-height: 48px;
+    letter-spacing: 0.1px;
+    white-space: wrap;
+    border-radius: 8px;
+    cursor: pointer;
+    color: #fff !important; 
+    background: url(https://seaofthieveswebassetsprod.azureedge.net/60471ecd4f70f24f193bcc51f714e286/assets/button/green-button-sprite.svg#off) 0 0/100% 100% no-repeat !important;
+   }
+}
+sharebutton:hover,
+.sharebutton:hover {
+  color: #000000;
+  opacity: 0.85;
+  filter: alpha(opacity=40);
+  border-color: #888;
+  text-shadow: none !important;
+  -webkit-transform:scale(1.00) !important;
+  transform:scale(1.00) !important;
+  outline: 0; }
+.sharebutton.sharebutton-primary {
+  color: #FFFFFF;
+  filter: brightness(90%) }
+.sharebutton.sharebutton-primary:hover,
+.sharebutton.sharebutton-primary:focus {
+  color: #FFFFFF;
+  filter: brightness(90%) }
+
+  @media screen and (max-width: 600px) {
+    .sharebutton-mb {
+     display: none;
+    }
+    .sharebutton-img {
+      position: relative;
+      left: 3px;
+      margin-left: auto;
+      margin-right: auto;
+     }
+   }
diff --git a/skeleton-auto.css b/skeleton-auto.css
