2022-02-09 09:50:46 -05:00
/ *
* 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 ;
2022-02-09 21:10:24 -05:00
box-sizing : border-box ;
}
2022-05-13 15:56:55 -04:00
. container-left {
position : relative ;
width : 100 % ;
max-width : 600px ;
text-align : left ;
margin : 0 auto ;
padding : 0 20px ;
box-sizing : border-box ;
}
2022-02-09 09:50:46 -05:00
. column {
position : center ;
width : 100 % ;
float : center ;
2022-02-09 21:10:24 -05:00
box-sizing : border-box ;
}
2022-02-09 09:50:46 -05:00
/* For devices larger than 400px */
@ media ( min-width : 400px ) {
. container {
width : 85 % ;
2022-02-09 21:10:24 -05:00
padding : 0 ;
}
2022-02-09 09:50:46 -05:00
}
/* For devices larger than 550px */
@ media ( min-width : 550px ) {
. container {
2022-02-09 21:10:24 -05:00
width : 80 % ;
}
2022-02-09 09:50:46 -05:00
. column ,
. columns {
2022-02-09 21:10:24 -05:00
margin-left : 0 ;
}
2022-02-09 09:50:46 -05:00
. column : first-child ,
. columns : first-child {
2022-02-09 21:10:24 -05:00
margin-left : 0 ;
}
2022-02-09 09:50:46 -05:00
}
/ * 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 % ;
color-scheme : light dark ;
}
body {
font-size : 18px ;
line-height : 24px ;
font-weight : 400 ;
2022-02-09 21:10:24 -05:00
font-family : "Open Sans" , "HelveticaNeue" , "Helvetica Neue" , Helvetica , Arial ,
sans-serif ;
2022-02-09 09:50:46 -05:00
}
/ * Typography
– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – * /
h1 {
margin-top : 0 ;
margin-bottom : 16px ;
2022-02-09 21:10:24 -05:00
font-weight : 800 ;
}
h1 {
font-size : 24px ;
line-height : 64px ;
letter-spacing : 0 ;
}
2022-02-09 09:50:46 -05:00
/* Larger than phablet */
@ media ( min-width : 550px ) {
2022-02-09 21:10:24 -05:00
h1 {
font-size : 48px ;
line-height : 96px ;
}
2022-02-09 09:50:46 -05:00
}
p {
2022-02-09 21:10:24 -05:00
margin-top : 0 ;
}
2022-02-09 09:50:46 -05:00
/ * Links
– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – * /
a {
2023-05-01 12:13:53 -04:00
color : # 2457F5 ;
}
a : hover {
color : # 083BDA ;
}
a : focus {
outline : # 7AB8FF solid 2px ;
border-radius : 2px ;
}
/* Link Color Dark Theme */
@ media ( prefers-color-scheme : dark ) {
a {
color : # 4899F7 ;
2022-02-09 21:10:24 -05:00
}
2022-02-09 09:50:46 -05:00
a : hover {
2023-04-28 13:27:07 -04:00
color : # 7AB8FF ;
2022-02-09 21:10:24 -05:00
}
2023-05-01 12:13:53 -04:00
a : focus {
outline : # 7AB8FF solid 2px ;
border-radius : 2px ;
}
}
2022-02-09 09:50:46 -05:00
/ * Code
– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – * /
code {
2022-02-09 21:10:24 -05:00
padding : 0 . 2rem 0 . 5rem ;
margin : 0 0 . 2rem ;
2022-02-09 09:50:46 -05:00
font-size : 90 % ;
white-space : nowrap ;
2022-02-09 21:10:24 -05:00
background : # f1f1f1 ;
border : 1px solid # e1e1e1 ;
border-radius : 4px ;
}
2022-02-09 09:50:46 -05:00
pre > code {
display : block ;
padding : 1rem 1 . 5rem ;
2022-02-09 21:10:24 -05:00
white-space : pre ;
}
2022-02-09 09:50:46 -05:00
/ * Spacing
– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – * /
button ,
. button {
2022-02-09 21:10:24 -05:00
margin-bottom : 1rem ;
}
2022-02-09 09:50:46 -05:00
input ,
textarea ,
select ,
fieldset {
2022-02-09 21:10:24 -05:00
margin-bottom : 1 . 5rem ;
}
2022-02-09 09:50:46 -05:00
pre ,
blockquote ,
dl ,
figure ,
p ,
ol {
2022-02-09 21:10:24 -05:00
margin-bottom : 2 . 5rem ;
}
2022-02-09 09:50:46 -05:00
/ * Utilities
– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – * /
. u-full-width {
width : 100 % ;
2022-02-09 21:10:24 -05:00
box-sizing : border-box ;
}
2022-02-09 09:50:46 -05:00
. u-max-full-width {
max-width : 100 % ;
2022-02-09 21:10:24 -05:00
box-sizing : border-box ;
}
2022-02-09 09:50:46 -05:00
. u-pull-right {
2022-02-09 21:10:24 -05:00
float : right ;
}
2022-02-09 09:50:46 -05:00
. u-pull-left {
2022-02-09 21:10:24 -05:00
float : left ;
}
2022-02-09 09:50:46 -05:00
/ * Misc
– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – * /
hr {
margin-top : 3rem ;
margin-bottom : 3 . 5rem ;
border-width : 0 ;
2022-02-09 21:10:24 -05:00
border-top : 1px solid # e1e1e1 ;
}
2022-06-03 17:43:09 -04:00
/ * Radius values :
10 % -40 % : Squircles
50 % ( default ) : True circle
* /
. avatar {
width : 128px ;
height : 128px ;
object-fit : cover ;
background-position : center ;
border-radius : 50 % ;
2023-02-17 07:09:33 -05:00
}
/* open-sans-regular - vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic */
@ font-face {
font-display : swap ; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family : 'Open Sans' ;
font-style : normal ;
font-weight : 400 ;
src : url ( '../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.eot' ) ; /* IE9 Compat Modes */
src : url ( '../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.eot?#iefix' ) format ( 'embedded-opentype' ) , /* IE6-IE8 */
url ( '../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.woff2' ) format ( 'woff2' ) , /* Super Modern Browsers */
url ( '../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.woff' ) format ( 'woff' ) , /* Modern Browsers */
url ( '../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.ttf' ) format ( 'truetype' ) , /* Safari, Android, iOS */
url ( '../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.svg#OpenSans' ) format ( 'svg' ) ; /* Legacy iOS */
}
/* open-sans-600 - vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic */
@ font-face {
font-display : swap ; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family : 'Open Sans' ;
font-style : normal ;
font-weight : 600 ;
src : url ( '../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.eot' ) ; /* IE9 Compat Modes */
src : url ( '../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.eot?#iefix' ) format ( 'embedded-opentype' ) , /* IE6-IE8 */
url ( '../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.woff2' ) format ( 'woff2' ) , /* Super Modern Browsers */
url ( '../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.woff' ) format ( 'woff' ) , /* Modern Browsers */
url ( '../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.ttf' ) format ( 'truetype' ) , /* Safari, Android, iOS */
url ( '../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.svg#OpenSans' ) format ( 'svg' ) ; /* Legacy iOS */
}
/* open-sans-700 - vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic */
@ font-face {
font-display : swap ; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family : 'Open Sans' ;
font-style : normal ;
font-weight : 700 ;
src : url ( '../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.eot' ) ; /* IE9 Compat Modes */
src : url ( '../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.eot?#iefix' ) format ( 'embedded-opentype' ) , /* IE6-IE8 */
url ( '../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.woff2' ) format ( 'woff2' ) , /* Super Modern Browsers */
url ( '../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.woff' ) format ( 'woff' ) , /* Modern Browsers */
url ( '../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.ttf' ) format ( 'truetype' ) , /* Safari, Android, iOS */
url ( '../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.svg#OpenSans' ) format ( 'svg' ) ; /* Legacy iOS */
}
/* open-sans-800 - vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic */
@ font-face {
font-display : swap ; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family : 'Open Sans' ;
font-style : normal ;
font-weight : 800 ;
src : url ( '../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-800.eot' ) ; /* IE9 Compat Modes */
src : url ( '../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-800.eot?#iefix' ) format ( 'embedded-opentype' ) , /* IE6-IE8 */
url ( '../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-800.woff2' ) format ( 'woff2' ) , /* Super Modern Browsers */
url ( '../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-800.woff' ) format ( 'woff' ) , /* Modern Browsers */
url ( '../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-800.ttf' ) format ( 'truetype' ) , /* Safari, Android, iOS */
url ( '../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-800.svg#OpenSans' ) format ( 'svg' ) ; /* Legacy iOS */
2022-06-03 17:43:09 -04:00
}