mirror of
https://github.com/sethcottle/littlelink.git
synced 2024-12-26 07:39:24 -05:00
3a477974b2
Updated .icon padding to make iconography appear centered. Updated container alignment to center to remove outdated attribute. Removed underline from links within buttons.
168 lines
3.8 KiB
CSS
168 lines
3.8 KiB
CSS
/*
|
||
* 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;
|
||
padding: 0 20px;
|
||
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 {
|
||
font-size: 18px;
|
||
line-height: 24px;
|
||
font-weight: 400;
|
||
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; }
|
||
a:hover {
|
||
color: #0085FF; }
|
||
|
||
|
||
/* 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; }
|
||
|