(update content) |
|||
(8 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
:root { | :root { | ||
+ | #0acd86 #52d8ca #3bcef6 #5999f9 #4f44e7 #089076; | ||
--background-color: #fefefe; | --background-color: #fefefe; | ||
− | |||
--border-color: #a2a2a2; | --border-color: #a2a2a2; | ||
+ | /* #a2a2a2*/ | ||
--border-sec-color: #bbb; | --border-sec-color: #bbb; | ||
--border-active-color: #888; | --border-active-color: #888; | ||
Line 10: | Line 11: | ||
--text-color: #222; | --text-color: #222; | ||
--text-sec-color: #555; | --text-sec-color: #555; | ||
− | --text-active-color: #333; | + | --text-active-color: #fefefe; |
+ | /* #333;*/ | ||
+ | --btn-active-color: #3bcef6; | ||
} | } | ||
+ | |||
/* | /* | ||
Line 43: | Line 47: | ||
/* Grid | /* Grid | ||
–––––––––––––––––––––––––––––––––––––––––––––––––– */ | –––––––––––––––––––––––––––––––––––––––––––––––––– */ | ||
+ | |||
.container { | .container { | ||
position: relative; | position: relative; | ||
width: 100%; | width: 100%; | ||
− | max-width: | + | max-width: 1250px; |
margin: 0 auto; | margin: 0 auto; | ||
− | + | box-sizing: border-box; | |
− | box-sizing: border-box; } | + | } |
+ | |||
.column, | .column, | ||
.columns { | .columns { | ||
width: 100%; | width: 100%; | ||
float: left; | float: left; | ||
− | box-sizing: border-box; } | + | box-sizing: border-box; |
+ | } | ||
+ | |||
/* For devices larger than 400px */ | /* For devices larger than 400px */ | ||
+ | |||
@media (min-width: 400px) { | @media (min-width: 400px) { | ||
.container { | .container { | ||
− | width: | + | width: 95%; |
− | + | } | |
} | } | ||
+ | |||
/* For devices larger than 550px */ | /* For devices larger than 550px */ | ||
+ | |||
@media (min-width: 550px) { | @media (min-width: 550px) { | ||
.container { | .container { | ||
− | width: | + | width: 90%; |
+ | } | ||
.column, | .column, | ||
.columns { | .columns { | ||
− | margin-left: 4%; } | + | margin-left: 4%; |
+ | } | ||
.column:first-child, | .column:first-child, | ||
.columns:first-child { | .columns:first-child { | ||
− | margin-left: 0; | + | margin-left: 0; |
− | + | } | |
.one.column, | .one.column, | ||
− | .one.columns | + | .one.columns { |
− | .two.columns | + | width: 4.66666666667%; |
− | .three.columns | + | } |
− | .four.columns | + | .two.columns { |
− | .five.columns | + | width: 13.3333333333%; |
− | .six.columns | + | } |
− | .seven.columns | + | .three.columns { |
− | .eight.columns | + | width: 22%; |
− | .nine.columns | + | } |
− | .ten.columns | + | .four.columns { |
− | .eleven.columns | + | width: 30.6666666667%; |
− | .twelve.columns | + | } |
− | + | .five.columns { | |
− | .one-third.column | + | width: 39.3333333333%; |
− | .two-thirds.column | + | } |
− | + | .six.columns { | |
− | .one-half.column | + | width: 48%; |
− | + | } | |
+ | .seven.columns { | ||
+ | width: 56.6666666667%; | ||
+ | } | ||
+ | .eight.columns { | ||
+ | width: 65.3333333333%; | ||
+ | } | ||
+ | .nine.columns { | ||
+ | width: 74.0%; | ||
+ | } | ||
+ | .ten.columns { | ||
+ | width: 82.6666666667%; | ||
+ | } | ||
+ | .eleven.columns { | ||
+ | width: 91.3333333333%; | ||
+ | } | ||
+ | .twelve.columns { | ||
+ | width: 100%; | ||
+ | margin-left: 0; | ||
+ | } | ||
+ | .one-third.column { | ||
+ | width: 30.6666666667%; | ||
+ | } | ||
+ | .two-thirds.column { | ||
+ | width: 65.3333333333%; | ||
+ | } | ||
+ | .one-half.column { | ||
+ | width: 48%; | ||
+ | } | ||
/* Offsets */ | /* Offsets */ | ||
.offset-by-one.column, | .offset-by-one.column, | ||
− | .offset-by-one.columns | + | .offset-by-one.columns { |
+ | margin-left: 8.66666666667%; | ||
+ | } | ||
.offset-by-two.column, | .offset-by-two.column, | ||
− | .offset-by-two.columns | + | .offset-by-two.columns { |
+ | margin-left: 17.3333333333%; | ||
+ | } | ||
.offset-by-three.column, | .offset-by-three.column, | ||
− | .offset-by-three.columns | + | .offset-by-three.columns { |
+ | margin-left: 26%; | ||
+ | } | ||
.offset-by-four.column, | .offset-by-four.column, | ||
− | .offset-by-four.columns | + | .offset-by-four.columns { |
+ | margin-left: 34.6666666667%; | ||
+ | } | ||
.offset-by-five.column, | .offset-by-five.column, | ||
− | .offset-by-five.columns | + | .offset-by-five.columns { |
+ | margin-left: 43.3333333333%; | ||
+ | } | ||
.offset-by-six.column, | .offset-by-six.column, | ||
− | .offset-by-six.columns | + | .offset-by-six.columns { |
+ | margin-left: 52%; | ||
+ | } | ||
.offset-by-seven.column, | .offset-by-seven.column, | ||
− | .offset-by-seven.columns | + | .offset-by-seven.columns { |
+ | margin-left: 60.6666666667%; | ||
+ | } | ||
.offset-by-eight.column, | .offset-by-eight.column, | ||
− | .offset-by-eight.columns | + | .offset-by-eight.columns { |
+ | margin-left: 69.3333333333%; | ||
+ | } | ||
.offset-by-nine.column, | .offset-by-nine.column, | ||
− | .offset-by-nine.columns | + | .offset-by-nine.columns { |
+ | margin-left: 78.0%; | ||
+ | } | ||
.offset-by-ten.column, | .offset-by-ten.column, | ||
− | .offset-by-ten.columns | + | .offset-by-ten.columns { |
+ | margin-left: 86.6666666667%; | ||
+ | } | ||
.offset-by-eleven.column, | .offset-by-eleven.column, | ||
− | .offset-by-eleven.columns | + | .offset-by-eleven.columns { |
− | + | margin-left: 95.3333333333%; | |
+ | } | ||
.offset-by-one-third.column, | .offset-by-one-third.column, | ||
− | .offset-by-one-third.columns | + | .offset-by-one-third.columns { |
+ | margin-left: 34.6666666667%; | ||
+ | } | ||
.offset-by-two-thirds.column, | .offset-by-two-thirds.column, | ||
− | .offset-by-two-thirds.columns | + | .offset-by-two-thirds.columns { |
− | + | margin-left: 69.3333333333%; | |
+ | } | ||
.offset-by-one-half.column, | .offset-by-one-half.column, | ||
− | .offset-by-one-half.columns | + | .offset-by-one-half.columns { |
− | + | margin-left: 52%; | |
+ | } | ||
} | } | ||
Line 130: | Line 196: | ||
/* Base Styles | /* Base Styles | ||
–––––––––––––––––––––––––––––––––––––––––––––––––– */ | –––––––––––––––––––––––––––––––––––––––––––––––––– */ | ||
+ | |||
+ | |||
/* NOTE | /* NOTE | ||
html is set to 62.5% so that all the REM measurements throughout Skeleton | html is set to 62.5% so that all the REM measurements throughout Skeleton | ||
are based on 10px sizing. So basically 1.5rem = 15px :) */ | are based on 10px sizing. So basically 1.5rem = 15px :) */ | ||
+ | |||
html { | html { | ||
− | font-size: | + | font-size: 50%; |
− | + | } | |
− | font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */ | + | |
− | + | .mediawiki { | |
+ | font-size: 1.5em; | ||
+ | /* currently ems cause chrome bug misinterpreting rems on body element */ | ||
font-weight: 400; | font-weight: 400; | ||
font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; | font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; | ||
− | color: var(--text-color); } | + | color: var(--text-color); |
+ | } | ||
/* Typography | /* Typography | ||
–––––––––––––––––––––––––––––––––––––––––––––––––– */ | –––––––––––––––––––––––––––––––––––––––––––––––––– */ | ||
− | + | ||
+ | .mediawiki h1, | ||
+ | h2, | ||
+ | h3, | ||
+ | h4, | ||
+ | h5, | ||
+ | h6 { | ||
margin-top: 0; | margin-top: 0; | ||
margin-bottom: 2rem; | margin-bottom: 2rem; | ||
− | font-weight: 300; } | + | font-weight: 300; |
− | + | color: var(--text-color); | |
− | + | font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; | |
− | + | } | |
− | + | ||
− | + | .mediawiki h1 { | |
− | + | font-size: 4.0rem; | |
+ | line-height: 1.2; | ||
+ | letter-spacing: -.1rem; | ||
+ | } | ||
+ | |||
+ | .mediawiki h2 { | ||
+ | font-size: 3.6rem; | ||
+ | line-height: 1.25; | ||
+ | letter-spacing: -.1rem; | ||
+ | } | ||
+ | |||
+ | .mediawiki h3 { | ||
+ | font-size: 3.0rem; | ||
+ | line-height: 1.3; | ||
+ | letter-spacing: -.1rem; | ||
+ | } | ||
+ | |||
+ | .mediawiki h4 { | ||
+ | font-size: 2.4rem; | ||
+ | line-height: 1.35; | ||
+ | letter-spacing: -.08rem; | ||
+ | } | ||
+ | |||
+ | .mediawiki h5 { | ||
+ | font-size: 1.8rem; | ||
+ | line-height: 1.5; | ||
+ | letter-spacing: -.05rem; | ||
+ | } | ||
+ | |||
+ | .mediawiki h6 { | ||
+ | font-size: 1.5rem; | ||
+ | line-height: 1.6; | ||
+ | letter-spacing: 0; | ||
+ | } | ||
+ | |||
/* Larger than phablet */ | /* Larger than phablet */ | ||
+ | |||
@media (min-width: 550px) { | @media (min-width: 550px) { | ||
− | + | .mediawiki h1 { | |
− | + | font-size: 5.0rem; | |
− | + | } | |
− | + | .mediawiki h2 { | |
− | + | font-size: 4.2rem; | |
− | + | } | |
+ | .mediawiki h3 { | ||
+ | font-size: 3.6rem; | ||
+ | } | ||
+ | .mediawiki h4 { | ||
+ | font-size: 3.0rem; | ||
+ | } | ||
+ | .mediawiki h5 { | ||
+ | font-size: 2.4rem; | ||
+ | } | ||
+ | .mediawiki h6 { | ||
+ | font-size: 1.5rem; | ||
+ | } | ||
} | } | ||
p { | p { | ||
− | margin-top: 0; } | + | margin-top: 0; |
+ | } | ||
/* Links | /* Links | ||
–––––––––––––––––––––––––––––––––––––––––––––––––– */ | –––––––––––––––––––––––––––––––––––––––––––––––––– */ | ||
+ | |||
a { | a { | ||
− | color: var(--a-color); } | + | color: var(--a-color); |
+ | } | ||
+ | |||
a:hover { | a:hover { | ||
− | color: var(--a-sec-color); } | + | color: var(--a-sec-color); |
+ | } | ||
+ | |||
a:visited { | a:visited { | ||
− | color: var(--a-vis-color); | + | color: var(--a-vis-color); |
} | } | ||
+ | |||
/* Buttons | /* Buttons | ||
–––––––––––––––––––––––––––––––––––––––––––––––––– */ | –––––––––––––––––––––––––––––––––––––––––––––––––– */ | ||
+ | |||
+ | .button:visited { | ||
+ | color: var(--text-sec-color); | ||
+ | } | ||
+ | |||
.button, | .button, | ||
button, | button, | ||
Line 188: | Line 325: | ||
input[type="button"] { | input[type="button"] { | ||
display: inline-block; | display: inline-block; | ||
− | height: | + | height: 3.8rem; |
− | padding: 0 | + | padding: 0 3rem; |
color: var(--text-sec-color); | color: var(--text-sec-color); | ||
text-align: center; | text-align: center; | ||
font-size: 1.5rem; | font-size: 1.5rem; | ||
font-weight: 600; | font-weight: 600; | ||
− | line-height: | + | line-height: 3.8rem; |
letter-spacing: .1rem; | letter-spacing: .1rem; | ||
text-transform: uppercase; | text-transform: uppercase; | ||
Line 200: | Line 337: | ||
white-space: nowrap; | white-space: nowrap; | ||
background-color: transparent; | background-color: transparent; | ||
− | border-radius: | + | border-radius: 0.4rem; |
border: 1px solid var(--border-sec-color); | border: 1px solid var(--border-sec-color); | ||
cursor: pointer; | cursor: pointer; | ||
− | box-sizing: border-box; } | + | box-sizing: border-box; |
+ | } | ||
+ | |||
.button:hover, | .button:hover, | ||
button:hover, | button:hover, | ||
Line 216: | Line 355: | ||
color: var(--text-active-color); | color: var(--text-active-color); | ||
border-color: var(--border-active-color); | border-color: var(--border-active-color); | ||
− | outline: 0; | + | outline: 0; |
− | text-decoration: none;} | + | text-decoration: none; |
+ | background-color: var(--btn-active-color); | ||
+ | } | ||
+ | |||
.button.button-primary, | .button.button-primary, | ||
button.button-primary, | button.button-primary, | ||
Line 225: | Line 367: | ||
color: #FFF; | color: #FFF; | ||
background-color: #33C3F0; | background-color: #33C3F0; | ||
− | border-color: #33c4f0; } | + | border-color: #33c4f0; |
+ | } | ||
+ | |||
.button.button-primary:hover, | .button.button-primary:hover, | ||
button.button-primary:hover, | button.button-primary:hover, | ||
Line 238: | Line 382: | ||
color: #FFF; | color: #FFF; | ||
background-color: #1eaedb; | background-color: #1eaedb; | ||
− | border-color: #1eaedb | + | border-color: #1eaedb; |
− | + | ||
− | + | ||
} | } | ||
+ | |||
/* Forms | /* Forms | ||
–––––––––––––––––––––––––––––––––––––––––––––––––– */ | –––––––––––––––––––––––––––––––––––––––––––––––––– */ | ||
+ | |||
input[type="email"], | input[type="email"], | ||
input[type="number"], | input[type="number"], | ||
Line 255: | Line 399: | ||
select { | select { | ||
height: 38px; | height: 38px; | ||
− | padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */ | + | padding: 6px 10px; |
+ | /* The 6px vertically centers text on FF, ignored by Webkit */ | ||
background-color: #fff; | background-color: #fff; | ||
border: 1px solid #D1D1D1; | border: 1px solid #D1D1D1; | ||
border-radius: 4px; | border-radius: 4px; | ||
box-shadow: none; | box-shadow: none; | ||
− | box-sizing: border-box; } | + | box-sizing: border-box; |
+ | } | ||
+ | |||
+ | |||
/* Removes awkward default styles on some inputs for iOS */ | /* Removes awkward default styles on some inputs for iOS */ | ||
+ | |||
input[type="email"], | input[type="email"], | ||
input[type="number"], | input[type="number"], | ||
Line 271: | Line 420: | ||
textarea { | textarea { | ||
-webkit-appearance: none; | -webkit-appearance: none; | ||
− | + | -moz-appearance: none; | |
− | + | appearance: none; | |
+ | } | ||
+ | |||
textarea { | textarea { | ||
min-height: 65px; | min-height: 65px; | ||
padding-top: 6px; | padding-top: 6px; | ||
− | padding-bottom: 6px; } | + | padding-bottom: 6px; |
+ | } | ||
+ | |||
input[type="email"]:focus, | input[type="email"]:focus, | ||
input[type="number"]:focus, | input[type="number"]:focus, | ||
Line 287: | Line 440: | ||
select:focus { | select:focus { | ||
border: 1px solid #33C3F0; | border: 1px solid #33C3F0; | ||
− | outline: 0; } | + | outline: 0; |
+ | } | ||
+ | |||
label, | label, | ||
legend { | legend { | ||
display: block; | display: block; | ||
margin-bottom: .5rem; | margin-bottom: .5rem; | ||
− | font-weight: 600; } | + | font-weight: 600; |
+ | } | ||
+ | |||
fieldset { | fieldset { | ||
padding: 0; | padding: 0; | ||
− | border-width: 0; } | + | border-width: 0; |
+ | } | ||
+ | |||
input[type="checkbox"], | input[type="checkbox"], | ||
input[type="radio"] { | input[type="radio"] { | ||
− | display: inline; } | + | display: inline; |
− | label > .label-body { | + | } |
+ | |||
+ | label>.label-body { | ||
display: inline-block; | display: inline-block; | ||
margin-left: .5rem; | margin-left: .5rem; | ||
− | font-weight: normal; } | + | font-weight: normal; |
+ | } | ||
/* Lists | /* Lists | ||
–––––––––––––––––––––––––––––––––––––––––––––––––– */ | –––––––––––––––––––––––––––––––––––––––––––––––––– */ | ||
+ | |||
ul { | ul { | ||
− | list-style: circle inside; } | + | list-style: circle inside; |
+ | } | ||
+ | |||
ol { | ol { | ||
− | list-style: decimal inside; } | + | list-style: decimal inside; |
− | ol, ul { | + | } |
+ | |||
+ | ol, | ||
+ | ul { | ||
padding-left: 0; | padding-left: 0; | ||
− | margin-top: 0; } | + | margin-top: 0; |
+ | } | ||
+ | |||
ul ul, | ul ul, | ||
ul ol, | ul ol, | ||
Line 319: | Line 489: | ||
ol ul { | ol ul { | ||
margin: 1.5rem 0 1.5rem 3rem; | margin: 1.5rem 0 1.5rem 3rem; | ||
− | font-size: 90%; } | + | font-size: 90%; |
+ | } | ||
+ | |||
li { | li { | ||
− | margin-bottom: 1rem; } | + | margin-bottom: 1rem; |
+ | } | ||
/* Code | /* Code | ||
–––––––––––––––––––––––––––––––––––––––––––––––––– */ | –––––––––––––––––––––––––––––––––––––––––––––––––– */ | ||
+ | |||
code { | code { | ||
padding: .2rem .5rem; | padding: .2rem .5rem; | ||
margin: 0 .2rem; | margin: 0 .2rem; | ||
− | font-size: | + | font-size: 120%; |
white-space: nowrap; | white-space: nowrap; | ||
background: #F1F1F1; | background: #F1F1F1; | ||
border: 1px solid #E1E1E1; | border: 1px solid #E1E1E1; | ||
− | border-radius: 4px; | + | border-radius: 4px; |
font-family: monospace; | font-family: monospace; | ||
} | } | ||
− | pre > code { | + | |
+ | pre>code { | ||
display: block; | display: block; | ||
padding: 1rem 1.5rem; | padding: 1rem 1.5rem; | ||
− | white-space: pre; } | + | white-space: pre; |
+ | } | ||
/* Tables | /* Tables | ||
–––––––––––––––––––––––––––––––––––––––––––––––––– */ | –––––––––––––––––––––––––––––––––––––––––––––––––– */ | ||
+ | |||
th, | th, | ||
td { | td { | ||
padding: 12px 15px; | padding: 12px 15px; | ||
text-align: left; | text-align: left; | ||
− | border-bottom: 1px solid #E1E1E1; } | + | border-bottom: 1px solid #E1E1E1; |
+ | } | ||
+ | |||
th:first-child, | th:first-child, | ||
td:first-child { | td:first-child { | ||
− | padding-left: 0; } | + | padding-left: 0; |
+ | } | ||
+ | |||
th:last-child, | th:last-child, | ||
td:last-child { | td:last-child { | ||
− | padding-right: 0; } | + | padding-right: 0; |
+ | } | ||
/* Spacing | /* Spacing | ||
–––––––––––––––––––––––––––––––––––––––––––––––––– */ | –––––––––––––––––––––––––––––––––––––––––––––––––– */ | ||
+ | |||
button, | button, | ||
.button { | .button { | ||
− | margin-bottom: 1rem; } | + | margin-bottom: 1rem; |
+ | } | ||
+ | |||
input, | input, | ||
textarea, | textarea, | ||
select, | select, | ||
fieldset { | fieldset { | ||
− | margin-bottom: 1.5rem; } | + | margin-bottom: 1.5rem; |
+ | } | ||
+ | |||
pre, | pre, | ||
blockquote, | blockquote, | ||
Line 376: | Line 563: | ||
ol, | ol, | ||
form { | form { | ||
− | margin-bottom: 2.5rem; } | + | margin-bottom: 2.5rem; |
+ | } | ||
/* Utilities | /* Utilities | ||
–––––––––––––––––––––––––––––––––––––––––––––––––– */ | –––––––––––––––––––––––––––––––––––––––––––––––––– */ | ||
+ | |||
.u-full-width { | .u-full-width { | ||
width: 100%; | width: 100%; | ||
− | box-sizing: border-box; } | + | box-sizing: border-box; |
+ | } | ||
+ | |||
.u-max-full-width { | .u-max-full-width { | ||
max-width: 100%; | max-width: 100%; | ||
− | box-sizing: border-box; } | + | box-sizing: border-box; |
+ | } | ||
+ | |||
.u-pull-right { | .u-pull-right { | ||
− | float: right; } | + | float: right; |
+ | } | ||
+ | |||
.u-pull-left { | .u-pull-left { | ||
− | float: left; } | + | float: left; |
+ | } | ||
/* Misc | /* Misc | ||
–––––––––––––––––––––––––––––––––––––––––––––––––– */ | –––––––––––––––––––––––––––––––––––––––––––––––––– */ | ||
+ | |||
hr { | hr { | ||
− | margin-top: | + | margin-top: 0; |
− | margin-bottom: | + | margin-bottom: 0; |
border-width: 0; | border-width: 0; | ||
− | border-top: 1px solid var(--border-color); } | + | border-top: 1px solid var(--border-color); |
+ | } | ||
/* Clearing | /* Clearing | ||
–––––––––––––––––––––––––––––––––––––––––––––––––– */ | –––––––––––––––––––––––––––––––––––––––––––––––––– */ | ||
+ | |||
/* Self Clearing Goodness */ | /* Self Clearing Goodness */ | ||
+ | |||
.container:after, | .container:after, | ||
.row:after, | .row:after, | ||
Line 411: | Line 611: | ||
content: ""; | content: ""; | ||
display: table; | display: table; | ||
− | clear: both; } | + | clear: both; |
+ | } | ||
/* Media Queries | /* Media Queries | ||
–––––––––––––––––––––––––––––––––––––––––––––––––– */ | –––––––––––––––––––––––––––––––––––––––––––––––––– */ | ||
+ | |||
+ | |||
/* | /* | ||
Note: The best way to structure the use of media queries is to create the queries | Note: The best way to structure the use of media queries is to create the queries | ||
Line 425: | Line 628: | ||
/* Larger than mobile */ | /* Larger than mobile */ | ||
+ | |||
@media (min-width: 400px) {} | @media (min-width: 400px) {} | ||
+ | |||
/* Larger than phablet (also point when grid becomes active) */ | /* Larger than phablet (also point when grid becomes active) */ | ||
+ | |||
@media (min-width: 550px) {} | @media (min-width: 550px) {} | ||
+ | |||
/* Larger than tablet */ | /* Larger than tablet */ | ||
+ | |||
@media (min-width: 750px) {} | @media (min-width: 750px) {} | ||
+ | |||
/* Larger than desktop */ | /* Larger than desktop */ | ||
+ | |||
@media (min-width: 1000px) {} | @media (min-width: 1000px) {} | ||
+ | |||
/* Larger than Desktop HD */ | /* Larger than Desktop HD */ | ||
+ | |||
@media (min-width: 1200px) {} | @media (min-width: 1200px) {} |
Latest revision as of 12:01, 4 May 2017
- root {
#0acd86 #52d8ca #3bcef6 #5999f9 #4f44e7 #089076; --background-color: #fefefe; --border-color: #a2a2a2; /* #a2a2a2*/ --border-sec-color: #bbb; --border-active-color: #888; --a-color: #1EAEDB; --a-sec-color: #0FA0CE; --a-vis-color: var(--a-color); --text-color: #222; --text-sec-color: #555; --text-active-color: #fefefe; /* #333;*/ --btn-active-color: #3bcef6;
}
/*
- 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
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
- /
/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
position: relative; width: 100%; max-width: 1250px; margin: 0 auto; box-sizing: border-box;
}
.column, .columns {
width: 100%; float: left; box-sizing: border-box;
}
/* For devices larger than 400px */
@media (min-width: 400px) {
.container { width: 95%; }
}
/* For devices larger than 550px */
@media (min-width: 550px) {
.container { width: 90%; } .column, .columns { margin-left: 4%; } .column:first-child, .columns:first-child { margin-left: 0; } .one.column, .one.columns { width: 4.66666666667%; } .two.columns { width: 13.3333333333%; } .three.columns { width: 22%; } .four.columns { width: 30.6666666667%; } .five.columns { width: 39.3333333333%; } .six.columns { width: 48%; } .seven.columns { width: 56.6666666667%; } .eight.columns { width: 65.3333333333%; } .nine.columns { width: 74.0%; } .ten.columns { width: 82.6666666667%; } .eleven.columns { width: 91.3333333333%; } .twelve.columns { width: 100%; margin-left: 0; } .one-third.column { width: 30.6666666667%; } .two-thirds.column { width: 65.3333333333%; } .one-half.column { width: 48%; } /* Offsets */ .offset-by-one.column, .offset-by-one.columns { margin-left: 8.66666666667%; } .offset-by-two.column, .offset-by-two.columns { margin-left: 17.3333333333%; } .offset-by-three.column, .offset-by-three.columns { margin-left: 26%; } .offset-by-four.column, .offset-by-four.columns { margin-left: 34.6666666667%; } .offset-by-five.column, .offset-by-five.columns { margin-left: 43.3333333333%; } .offset-by-six.column, .offset-by-six.columns { margin-left: 52%; } .offset-by-seven.column, .offset-by-seven.columns { margin-left: 60.6666666667%; } .offset-by-eight.column, .offset-by-eight.columns { margin-left: 69.3333333333%; } .offset-by-nine.column, .offset-by-nine.columns { margin-left: 78.0%; } .offset-by-ten.column, .offset-by-ten.columns { margin-left: 86.6666666667%; } .offset-by-eleven.column, .offset-by-eleven.columns { margin-left: 95.3333333333%; } .offset-by-one-third.column, .offset-by-one-third.columns { margin-left: 34.6666666667%; } .offset-by-two-thirds.column, .offset-by-two-thirds.columns { margin-left: 69.3333333333%; } .offset-by-one-half.column, .offset-by-one-half.columns { margin-left: 52%; }
}
/* 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: 50%;
}
.mediawiki {
font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */ font-weight: 400; font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--text-color);
}
/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.mediawiki h1, h2, h3, h4, h5, h6 {
margin-top: 0; margin-bottom: 2rem; font-weight: 300; color: var(--text-color); font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.mediawiki h1 {
font-size: 4.0rem; line-height: 1.2; letter-spacing: -.1rem;
}
.mediawiki h2 {
font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem;
}
.mediawiki h3 {
font-size: 3.0rem; line-height: 1.3; letter-spacing: -.1rem;
}
.mediawiki h4 {
font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem;
}
.mediawiki h5 {
font-size: 1.8rem; line-height: 1.5; letter-spacing: -.05rem;
}
.mediawiki h6 {
font-size: 1.5rem; line-height: 1.6; letter-spacing: 0;
}
/* Larger than phablet */
@media (min-width: 550px) {
.mediawiki h1 { font-size: 5.0rem; } .mediawiki h2 { font-size: 4.2rem; } .mediawiki h3 { font-size: 3.6rem; } .mediawiki h4 { font-size: 3.0rem; } .mediawiki h5 { font-size: 2.4rem; } .mediawiki h6 { font-size: 1.5rem; }
}
p {
margin-top: 0;
}
/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
color: var(--a-color);
}
a:hover {
color: var(--a-sec-color);
}
a:visited {
color: var(--a-vis-color);
}
/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button:visited {
color: var(--text-sec-color);
}
.button, button, input[type="submit"], input[type="reset"], input[type="button"] {
display: inline-block; height: 3.8rem; padding: 0 3rem; color: var(--text-sec-color); text-align: center; font-size: 1.5rem; font-weight: 600; line-height: 3.8rem; letter-spacing: .1rem; text-transform: uppercase; text-decoration: none; white-space: nowrap; background-color: transparent; border-radius: 0.4rem; border: 1px solid var(--border-sec-color); cursor: pointer; box-sizing: border-box;
}
.button:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, .button:focus, button:focus, input[type="submit"]:focus, input[type="reset"]:focus, input[type="button"]:focus {
color: var(--text-active-color); border-color: var(--border-active-color); outline: 0; text-decoration: none; background-color: var(--btn-active-color);
}
.button.button-primary, button.button-primary, input[type="submit"].button-primary, input[type="reset"].button-primary, input[type="button"].button-primary {
color: #FFF; background-color: #33C3F0; border-color: #33c4f0;
}
.button.button-primary:hover, button.button-primary:hover, input[type="submit"].button-primary:hover, input[type="reset"].button-primary:hover, input[type="button"].button-primary:hover, .button.button-primary:focus, button.button-primary:focus, input[type="submit"].button-primary:focus, input[type="reset"].button-primary:focus, input[type="button"].button-primary:focus {
color: #FFF; background-color: #1eaedb; border-color: #1eaedb;
}
/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea, select {
height: 38px; padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */ background-color: #fff; border: 1px solid #D1D1D1; border-radius: 4px; box-shadow: none; box-sizing: border-box;
}
/* Removes awkward default styles on some inputs for iOS */
input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea {
-webkit-appearance: none; -moz-appearance: none; appearance: none;
}
textarea {
min-height: 65px; padding-top: 6px; padding-bottom: 6px;
}
input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="text"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, textarea:focus, select:focus {
border: 1px solid #33C3F0; outline: 0;
}
label, legend {
display: block; margin-bottom: .5rem; font-weight: 600;
}
fieldset {
padding: 0; border-width: 0;
}
input[type="checkbox"], input[type="radio"] {
display: inline;
}
label>.label-body {
display: inline-block; margin-left: .5rem; font-weight: normal;
}
/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
list-style: circle inside;
}
ol {
list-style: decimal inside;
}
ol, ul {
padding-left: 0; margin-top: 0;
}
ul ul, ul ol, ol ol, ol ul {
margin: 1.5rem 0 1.5rem 3rem; font-size: 90%;
}
li {
margin-bottom: 1rem;
}
/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
padding: .2rem .5rem; margin: 0 .2rem; font-size: 120%; white-space: nowrap; background: #F1F1F1; border: 1px solid #E1E1E1; border-radius: 4px; font-family: monospace;
}
pre>code {
display: block; padding: 1rem 1.5rem; white-space: pre;
}
/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
th, td {
padding: 12px 15px; text-align: left; border-bottom: 1px solid #E1E1E1;
}
th:first-child, td:first-child {
padding-left: 0;
}
th:last-child, td:last-child {
padding-right: 0;
}
/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button, .button {
margin-bottom: 1rem;
}
input, textarea, select, fieldset {
margin-bottom: 1.5rem;
}
pre, blockquote, dl, figure, table, p, ul, ol, form {
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: 0; margin-bottom: 0; border-width: 0; border-top: 1px solid var(--border-color);
}
/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Self Clearing Goodness */
.container:after, .row:after, .u-cf {
content: ""; display: table; clear: both;
}
/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
- /
/* Larger than mobile */
@media (min-width: 400px) {}
/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}
/* Larger than tablet */
@media (min-width: 750px) {}
/* Larger than desktop */
@media (min-width: 1000px) {}
/* Larger than Desktop HD */
@media (min-width: 1200px) {}