devol
/
LinkStack
mirror of https://github.com/LinkStackOrg/LinkStack.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
LinkStack/themes/stargazer/skeleton-auto.css

353 lines
32 KiB
CSS
Raw Normal View History

Added theme "Stargazer"
2022-09-09 22:28:11 +02:00
/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Grid
- Base Styles
- Typography
- Links
- Code
- Spacing
- Utilities
- Misc
- Credit footer
*/
/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
position: relative;
width: 100%;
max-width: 600px;
text-align: center;
margin: 0 auto;
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%;
overflow-x: hidden; }
/* Dark/light mode detection (comment this section out and use the one below for a fixed background color) */
body {
font-size: 18px;
line-height: 24px;
font-weight: 400;
background-color: #000;
font-family: "Roboto";
color: #FFFFFF;
}
::-webkit-scrollbar {
display: none;
}
/* Use this for a fixed background color instead of dark and light mode
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: 900; }
h1 { font-size:26px; line-height: 64px; letter-spacing: 0;}
/* Larger than phablet */
@media (min-width: 550px) {
h1 { font-size: 56px; line-height: 96px;}
}
p {
margin-top: 0;
width: 70% !important; }
/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
color: #0085FF;
text-decoration: none;
}
a:hover {
color: #0085FF; }
.spacing {
padding: 0 10px;
}
/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
padding: .2rem .5rem;
margin: 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; }
/* ===== Scrollbar CSS ===== */
/* Firefox */
* {
scrollbar-width: thin;
scrollbar-color: #171a1d #31363b;
}
/* Chrome, Edge, and Safari */
/* *::-webkit-scrollbar {
width: 8px;
}
*::-webkit-scrollbar-track {
background: #31363b;
}
*::-webkit-scrollbar-thumb {
background-color: #171a1d;
border-radius: 30px;
border: 3px none #ffffff;
}
*/
/* Credit footer
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Styling for credit footer text */
.credit-txt {
font-weight: 700;
font-size: 15px;
text-decoration: none;
}
.credit-icon {
transform: translateX(15px); }
/* Switches text color for credit footer for dark/light mode */
.credit-txt-clr{
color: #FFF !important;
}
.parallax-background {
position: absolute;
margin:0;
left: 0;
right: 0;
top: 0;
bottom: 0;
perspective: 340px;
z-index: 0;
}
.object1 {
position: absolute;
top: 50%;
left: 50%;
width: 2px;
height: 2px;
animation: fly 3s linear infinite;
transform-style: preserve-3d;
border-radius: 30px;
box-shadow: 0 0 rgba(0, 0, 0, 0), 545px 307px 0 0 #e8e8e8, 755px 53px 0 0 #f2f2f2, -257px 413px 0 0 #fff, -769px -290px 0 0 #d1d1d1, 600px -415px 0 0 #ededed, 140px -10px 0 0 #f7f7f7, 1299px 205px 0 0 #e6e6e6, 905px 289px 0 0 #ccc, -1321px 147px 0 0 #bfbfbf, -1260px 115px 0 0 #e3e3e3, 239px 391px 0 0 #ededed, -512px 214px 0 0 #dedede, -621px -270px 0 0 #c9c9c9, -697px 321px 0 0 #ccc, -1397px 383px 0 0 #d4d4d4, 1291px -256px 0 0 #e3e3e3, 1027px 456px 0 0 #d9d9d9, -1276px 350px 0 0 #fcfcfc, 794px -398px 0 0 #ccc, -446px 21px 0 0 #c7c7c7, -851px -413px 0 0 #f0f0f0, 777px 455px 0 0 #f0f0f0, -1438px 322px 0 0 #e3e3e3, -1300px -21px 0 0 #fff, -771px 14px 0 0 #e6e6e6, 616px -206px 0 0 #cfcfcf, 357px -169px 0 0 #ededed, 1400px 247px 0 0 #d4d4d4, -546px 215px 0 0 #d6d6d6, 1054px -25px 0 0 #fff, -1488px 130px 0 0 #d4d4d4, -1306px 81px 0 0 #d4d4d4, 431px -146px 0 0 #dedede, 222px -385px 0 0 #f2f2f2, -1199px -272px 0 0 #fcfcfc, 1141px 36px 0 0 #f0f0f0, 1312px 314px 0 0 #f0f0f0, -655px -167px 0 0 #d9d9d9, -1250px 370px 0 0 #e8e8e8, 144px 144px 0 0 #d4d4d4, 404px 307px 0 0 #ededed, -207px 369px 0 0 #d9d9d9, -1179px -404px 0 0 #ededed, -1144px -301px 0 0 #fafafa, -1396px 129px 0 0 #e3e3e3, -394px 315px 0 0 #c7c7c7, -1387px -310px 0 0 #dedede, 1268px 212px 0 0 #e8e8e8, 611px -350px 0 0 #f5f5f5, -1026px 48px 0 0 #d4d4d4, -1420px 46px 0 0 #e0e0e0, -978px -102px 0 0 #ccc, -1250px 389px 0 0 #fcfcfc, 49px 381px 0 0 #dedede, 96px -440px 0 0 #ededed, 596px -338px 0 0 #f0f0f0, -761px 292px 0 0 #f7f7f7, 593px -139px 0 0 #c2c2c2, -430px 296px 0 0 #c2c2c2, -1172px 144px 0 0 #fff, 1488px 34px 0 0 #e3e3e3, 86px 46px 0 0 #d9d9d9, -1053px -354px 0 0 #ebebeb, -731px 359px 0 0 #f2f2f2, -892px -452px 0 0 #fcfcfc, 183px -84px 0 0 #dedede, -637px -106px 0 0 #e0e0e0, -643px 273px 0 0 #d9d9d9, 427px 370px 0 0 #ededed, 383px -407px 0 0 #cfcfcf, -242px 281px 0 0 #dedede, 1336px -141px 0 0 #fff, -1279px 63px 0 0 #ebebeb, 1478px 429px 0 0 #e8e8e8, -900px -180px 0 0 #ebebeb, -1106px -406px 0 0 #cfcfcf, 541px 212px 0 0 #f0f0f0, 325px 120px 0 0 #f0f0f0, -461px -98px 0 0 #fff, -643px -286px 0 0 #fafafa, -1220px 208px 0 0 #c2c2c2, 1353px 469px 0 0 #e8e8e8, -993px 429px 0 0 #fff, -224px 19px 0 0 #ebebeb, 414px 123px 0 0 #e8e8e8, 129px 68px 0 0 #d9d9d9, -643px -346px 0 0 #c2c2c2, 1168px 312px 0 0 #c7c7c7, 323px -205px 0 0 #f5f5f5, 144px -449px 0 0 #ebebeb, 426px -109px 0 0 #bfbfbf, -1473px -246px 0 0 #ebebeb, 769px 388px 0 0 #ebebeb, -396px -126px 0 0 #d9d9d9, -1461px 385px 0 0 #d9d9d9, -744px 418px 0 0 #f5f5f5, 1327px -342px 0 0 #f7f7f7, 839px 177px 0 0 #f7f7f7, 268px 175px 0 0 #f7f7f7, 107px -442px 0 0 #e8e8e8, -638px 44px 0 0 #d4d4d4, 139px -412px 0 0 #c7c7c7, 549px 411px 0 0 #e8e8e8, -1339px -268px 0 0 #f2f2f2, 1116px -197px 0 0 #c7c7c7, 1175px -123px 0 0 #e6e6e6, -162px 110px 0 0 #dedede, 54px -444px 0 0 #fcfcfc, 364px 453px 0 0 #f5f5f5, 1172px 299px 0 0 #c9c9c9, 1231px 244px 0 0 #fff, -617px 193px 0 0 #d9d9d9, -1464px -141px 0 0 #d9d9d9, 1076px -248px 0 0 #fff, 104px 330px 0 0 #c2c2c2, -1201px 275px 0 0 #d4d4d4, 1225px -253px 0 0 #e0e0e0, -1215px -321px 0 0 #f7f7f7, 1415px 383px 0 0 #f0f0f0, -1124px 26px 0 0 #e8e8e8, 934px 446px 0 0 #fff, 1123px -231px 0 0 #f0f0f0, -56px -17px 0 0 #e6e6e6, -260px 209px 0 0 #f0f0f0, 541px -10px 0 0 #d1d1d1, -948px -78px 0 0 #f7f7f7, -294px -432px 0 0 #d9d9d9, -105px 33px 0 0 #c4c4c4, 552px -147px 0 0 #d9d9d9, -1205px -418px 0 0 #e8e8e8, -1211px -465px 0 0 #d6d6d6, -557px 305px 0 0 #c4c4c4, -123px 475px 0 0 #f7f7f7, 635px 178px 0 0 #e0e0e0, 1275px -128px 0 0 #ccc, -690px -334px 0 0 #dbdbdb, -178px -399px 0 0 #f2f2f2, 1312px -245px 0 0 #f5f5f5, -192px -275px 0 0 #d9d9d9, 266px -256px 0 0 #d4d4d4, 1391px -390px 0 0 #d9d9d9, -643px -284px 0 0 #d9d9d9, -1116px 430px 0 0 #f7f7f7, -761px -262px 0 0 #c9c9c9, -1391px -404px 0 0 #d4d4d4, -1288px 405px 0 0 #fafafa, -1266px -200px 0 0 #fafafa, -418px 84px 0 0 #f7f7f7, 950px 93px 0 0 #e3e3e3, -680px 84px 0 0 #e8e8e8, 1404px 43px 0 0 #e8e8e8, 418px -291px 0 0 #fff, -1491px -384px 0 0 #d9d9d9, -865px -126px 0 0 #c7c7c7, 537px -149px 0 0 #fafafa, -1036px 342px 0 0 #cfcfcf, -228px -301px 0 0 #f
}
.object1:after,
.object1:before {
content: "";
position: absolute;
width: inherit;
height: inherit;
box-shadow: inherit;
}
.object1:before {
transform: translateZ(-320px);
animation: fade1 3s linear infinite;
}
.object1:after {
transform: translateZ(-640px);
animation: fade2 3s linear infinite;
}
@-moz-keyframes fly {
0% {
transform: translateZ(0);
}
to {
transform: translateZ(320px);
}
}
@-webkit-keyframes fly {
0% {
transform: translateZ(0);
}
to {
transform: translateZ(320px);
}
}
@-o-keyframes fly {
0% {
transform: translateZ(0);
}
to {
transform: translateZ(320px);
}
}
@keyframes fly {
0% {
transform: translateZ(0);
}
to {
transform: translateZ(320px);
}
}
@-moz-keyframes fade1 {
0% {
opacity: 0.5;
}
to {
opacity: 1;
}
}
@-webkit-keyframes fade1 {
0% {
opacity: 0.5;
}
to {
opacity: 1;
}
}
@-o-keyframes fade1 {
0% {
opacity: 0.5;
}
to {
opacity: 1;
}
}
@keyframes fade1 {
0% {
opacity: 0.5;
}
to {
opacity: 1;
}
}
@-moz-keyframes fade2 {
0% {
opacity: 0;
}
to {
opacity: 0.5;
}
}
@-webkit-keyframes fade2 {
0% {
opacity: 0;
}
to {
opacity: 0.5;
}
}
@-o-keyframes fade2 {
0% {
opacity: 0;
}
to {
opacity: 0.5;
}
}
@keyframes fade2 {
0% {
opacity: 0;
}
to {
opacity: 0.5;
}
}