LinkStack/themes/isaac/skeleton-auto.css

236 lines
5.7 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/* Table of contents
- Grid
- Base Styles
- Typography
- Links
- Code
- Spacing
- Utilities
- Misc
- Credit footer
*/
/* Grid
*/
.container {
position: relative;
width: 100%;
max-width: 800px;
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: 95%;
padding: 0; }
}
/* For devices larger than 550px */
@media (min-width: 550px) {
.container {
width: 90%; }
.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%; }
/* 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: #111;
color: #FFFFFF; }
/* 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;
letter-spacing: 5px;
font-weight: 800;
line-height: 64px;
background: -webkit-radial-gradient(#CAC895, #000000);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: perspective(300px) rotateX(15deg);
-moz-transform: perspective(300px) rotateX(15deg);
-ms-transform: perspective(300px) rotateX(15deg);
-o-transform: perspective(300px) rotateX(15deg);
transform: perspective(300px) rotateX(15deg);
filter: drop-shadow(-4px 4px 3px #3f0e48);
}
/* Larger than phablet */
@media (min-width: 550px) {
h1 { font-size: 96px; line-height: 96px;}
}
p {
margin-top: 0; }
/* Links
*/
a {
color: #e1e1e1;
text-decoration: none;
}
a:hover {
color: #e1e1e1;-webkit-filter: brightness(70%); }
.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 {
display: none; }
.credit-footer {
position: relative;
right: 15px; }
/* Switches text color for credit footer for dark/light mode */
.credit-txt-clr{
color: #FFF !important;
}