mirror of
https://github.com/LinkStackOrg/LinkStack.git
synced 2024-12-12 10:16:19 +01:00
8fdc1a7f74
Fixed word spacing bug in texts added by the new page editor. This bug caused inserted links to have extended spacing between words. This 'bug' was a previous feature added to display links further apart for easier readability. The feature didn't scale well with the newly added page editor which allowed users to add their own links to edited texts, causing the bug. The extended spacing was achieved with the 'padding' CSS tag. I simply removed the tag from all an HTML tags and made it into its own class, 'spacing'. I added the class to every element on the site that previously depended on this tag.
194 lines
4.3 KiB
CSS
Vendored
194 lines
4.3 KiB
CSS
Vendored
/*
|
||
* 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;
|
||
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%; }
|
||
body {
|
||
background-color: #292929;
|
||
font-size: 18px;
|
||
line-height: 24px;
|
||
font-weight: 400;
|
||
font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||
color: #FFFFFF; }
|
||
|
||
|
||
/* 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; }
|
||
a:hover {
|
||
color: #0085FF; }
|
||
|
||
.spacing {
|
||
padding: 0 10px;
|
||
}
|
||
|
||
/* Code
|
||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||
code {
|
||
padding: .2rem .5rem;
|
||
margin: 0 .2rem;
|
||
font-size: 90%;
|
||
color: #000000;
|
||
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;
|
||
}
|