mirror of
https://github.com/LinkStackOrg/LinkStack.git
synced 2025-01-10 17:23:12 +01:00
Updated CSS
Updated CSS used for styling on virtually all pages. - Fixed dead link - Changed background color of dark mode to gradient - Added automatic dark mode with CSS (not implemented on any page yet)
This commit is contained in:
Julian Prieber
parent
c6d71b0d70
commit
0e271a1ce2
243
littlelink/css/skeleton-auto.css
vendored
Normal file
243
littlelink/css/skeleton-auto.css
vendored
Normal file
@ -0,0 +1,243 @@
|
||||
/*
|
||||
* LittleLink Custom
|
||||
* https://littlelink-custom.com
|
||||
* Free to use under the GPL-3.0 License.
|
||||
* https://www.gnu.org/licenses/gpl-3.0.en.html
|
||||
* 05/12/2022
|
||||
*
|
||||
* Built using:
|
||||
*
|
||||
* littlelink V1
|
||||
* https://littlelink.io
|
||||
* Free to use under the MIT license.
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
* 12/21/2019
|
||||
*
|
||||
* 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;
|
||||
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%; }
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body {
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
font-weight: 400;
|
||||
background: #292929;
|
||||
background: radial-gradient(circle, #292929 28%, #1b1b1b 100%);
|
||||
font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
color: #FFFFFF; }
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
body {
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
font-weight: 400;
|
||||
background: #F1F1F1;
|
||||
font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
color: #222; }
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* 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: #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; }
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
/* ===== 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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
/* ===== Scrollbar CSS ===== */
|
||||
/* Firefox */
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #323232 #dbdbdb;
|
||||
}
|
||||
|
||||
/* Chrome, Edge, and Safari */
|
||||
*::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-track {
|
||||
background: #dbdbdb;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-thumb {
|
||||
background-color: #323232;
|
||||
border-radius: 30px;
|
||||
border: 3px none #ffffff;
|
||||
}
|
||||
|
||||
}
|
||||
15
littlelink/css/skeleton-dark.css
vendored
15
littlelink/css/skeleton-dark.css
vendored
@ -1,12 +1,18 @@
|
||||
/*
|
||||
* LittleLink Custom
|
||||
* https://littlelink-custom.com
|
||||
* Free to use under the GPL-3.0 License.
|
||||
* https://www.gnu.org/licenses/gpl-3.0.en.html
|
||||
* 05/12/2022
|
||||
*
|
||||
* Built using:
|
||||
*
|
||||
* littlelink V1
|
||||
* https://littlelink.com
|
||||
* https://littlelink.io
|
||||
* 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
|
||||
@ -76,7 +82,8 @@ are based on 10px sizing. So basically 1.5rem = 15px :) */
|
||||
html {
|
||||
font-size: 100%; }
|
||||
body {
|
||||
background-color: #292929;
|
||||
background: #292929;
|
||||
background: radial-gradient(circle, #292929 28%, #1b1b1b 100%);
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
font-weight: 400;
|
||||
|
||||
12
littlelink/css/skeleton-light.css
vendored
12
littlelink/css/skeleton-light.css
vendored
@ -1,12 +1,18 @@
|
||||
/*
|
||||
* LittleLink Custom
|
||||
* https://littlelink-custom.com
|
||||
* Free to use under the GPL-3.0 License.
|
||||
* https://www.gnu.org/licenses/gpl-3.0.en.html
|
||||
* 05/12/2022
|
||||
*
|
||||
* Built using:
|
||||
*
|
||||
* littlelink V1
|
||||
* https://littlelink.com
|
||||
* https://littlelink.io
|
||||
* 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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user