API tools faq
paste
Advertisement
FlyFar

skeleton.css

FlyFar
Jul 19th, 2023
991
0
Never
1
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 13.15 KB | Source Code | 0 0
raw download clone embed print report
  1. /* latin-ext */
  2. @font-face {
  3.   font-family: 'Raleway';
  4.   font-style: normal;
  5.   font-weight: 300;
  6.   src: local('Raleway Light'), local('Raleway-Light');
  7.   unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
  8. }
  9. /* latin */
  10. @font-face {
  11.   font-family: 'Raleway';
  12.   font-style: normal;
  13.   font-weight: 300;
  14.   src: local('Raleway Light'), local('Raleway-Light');
  15.   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
  16. }
  17. /* latin-ext */
  18. @font-face {
  19.   font-family: 'Raleway';
  20.   font-style: normal;
  21.   font-weight: 400;
  22.   src: local('Raleway'), local('Raleway-Regular');
  23.   unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
  24. }
  25. /* latin */
  26. @font-face {
  27.   font-family: 'Raleway';
  28.   font-style: normal;
  29.   font-weight: 400;
  30.   src: local('Raleway'), local('Raleway-Regular');
  31.   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
  32. }
  33. /* latin-ext */
  34. @font-face {
  35.   font-family: 'Raleway';
  36.   font-style: normal;
  37.   font-weight: 600;
  38.   src: local('Raleway SemiBold'), local('Raleway-SemiBold');
  39.   unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
  40. }
  41. /* latin */
  42. @font-face {
  43.   font-family: 'Raleway';
  44.   font-style: normal;
  45.   font-weight: 600;
  46.   src: local('Raleway SemiBold'), local('Raleway-SemiBold');
  47.   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
  48. }
  49.  
  50. /*
  51. * Skeleton V2.0.4
  52. * Copyright 2014, Dave Gamache
  53. * www.getskeleton.com
  54. * Free to use under the MIT license.
  55. * http://www.opensource.org/licenses/mit-license.php
  56. * 12/29/2014
  57. */
  58.  
  59.  
  60. /* Table of contents
  61. ––––––––––––––––––––––––––––––––––––––––––––––––––
  62. - Grid
  63. - Base Styles
  64. - Typography
  65. - Links
  66. - Buttons
  67. - Forms
  68. - Lists
  69. - Code
  70. - Tables
  71. - Spacing
  72. - Utilities
  73. - Clearing
  74. - Media Queries
  75. */
  76.  
  77.  
  78. /* Grid
  79. –––––––––––––––––––––––––––––––––––––––––––––––––– */
  80. .container {
  81.   position: relative;
  82.   width: 100%;
  83.   max-width: 960px;
  84.   margin: 0 auto;
  85.   padding: 0 20px;
  86.   box-sizing: border-box; }
  87. .column,
  88. .columns {
  89.   width: 100%;
  90.   box-sizing: border-box; }
  91.  
  92. /* For devices larger than 400px */
  93. @media (min-width: 400px) {
  94.   .container {
  95.     width: 85%;
  96.     padding: 0; }
  97. }
  98.  
  99. /* For devices larger than 550px */
  100. @media (min-width: 550px) {
  101.   .container {
  102.     width: 80%; }
  103.   .column,
  104.   .columns {
  105.     margin-left: 4%; }
  106.   .column:first-child,
  107.   .columns:first-child {
  108.     margin-left: 0; }
  109.  
  110.   .one.column,
  111.   .one.columns                    { width: 4.66666666667%; }
  112.   .two.columns                    { width: 13.3333333333%; }
  113.   .three.columns                  { width: 22%;            }
  114.   .four.columns                   { width: 30.6666666667%; }
  115.   .five.columns                   { width: 39.3333333333%; }
  116.   .six.columns                    { width: 48%;            }
  117.   .seven.columns                  { width: 56.6666666667%; }
  118.   .eight.columns                  { width: 65.3333333333%; }
  119.   .nine.columns                   { width: 74.0%;          }
  120.   .ten.columns                    { width: 82.6666666667%; }
  121.   .eleven.columns                 { width: 91.3333333333%; }
  122.   .twelve.columns                 { width: 100%; margin-left: 0; }
  123.  
  124.   .one-third.column               { width: 30.6666666667%; }
  125.   .two-thirds.column              { width: 65.3333333333%; }
  126.  
  127.   .one-half.column                { width: 48%; }
  128.  
  129.   /* Offsets */
  130.   .offset-by-one.column,
  131.   .offset-by-one.columns          { margin-left: 8.66666666667%; }
  132.   .offset-by-two.column,
  133.   .offset-by-two.columns          { margin-left: 17.3333333333%; }
  134.   .offset-by-three.column,
  135.   .offset-by-three.columns        { margin-left: 26%;            }
  136.   .offset-by-four.column,
  137.   .offset-by-four.columns         { margin-left: 34.6666666667%; }
  138.   .offset-by-five.column,
  139.   .offset-by-five.columns         { margin-left: 43.3333333333%; }
  140.   .offset-by-six.column,
  141.   .offset-by-six.columns          { margin-left: 52%;            }
  142.   .offset-by-seven.column,
  143.   .offset-by-seven.columns        { margin-left: 60.6666666667%; }
  144.   .offset-by-eight.column,
  145.   .offset-by-eight.columns        { margin-left: 69.3333333333%; }
  146.   .offset-by-nine.column,
  147.   .offset-by-nine.columns         { margin-left: 78.0%;          }
  148.   .offset-by-ten.column,
  149.   .offset-by-ten.columns          { margin-left: 86.6666666667%; }
  150.   .offset-by-eleven.column,
  151.   .offset-by-eleven.columns       { margin-left: 95.3333333333%; }
  152.  
  153.   .offset-by-one-third.column,
  154.   .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
  155.   .offset-by-two-thirds.column,
  156.   .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }
  157.  
  158.   .offset-by-one-half.column,
  159.   .offset-by-one-half.columns     { margin-left: 52%; }
  160.  
  161. }
  162.  
  163.  
  164. /* Base Styles
  165. –––––––––––––––––––––––––––––––––––––––––––––––––– */
  166. /* NOTE
  167. html is set to 62.5% so that all the REM measurements throughout Skeleton
  168. are based on 10px sizing. So basically 1.5rem = 15px :) */
  169. html {
  170.   font-size: 62.5%; }
  171. body {
  172.   font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
  173.   line-height: 1.6;
  174.   font-weight: 400;
  175.   font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  176.   color: #222; }
  177.  
  178.  
  179. /* Typography
  180. –––––––––––––––––––––––––––––––––––––––––––––––––– */
  181. h1, h2, h3, h4, h5, h6 {
  182.   margin-top: 0;
  183.   margin-bottom: 2rem;
  184.   font-weight: 300; }
  185. h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
  186. h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
  187. h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
  188. h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
  189. h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
  190. h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }
  191.  
  192. /* Larger than phablet */
  193. @media (min-width: 550px) {
  194.   h1 { font-size: 5.0rem; }
  195.   h2 { font-size: 4.2rem; }
  196.   h3 { font-size: 3.6rem; }
  197.   h4 { font-size: 3.0rem; }
  198.   h5 { font-size: 2.4rem; }
  199.   h6 { font-size: 1.5rem; }
  200. }
  201.  
  202. p {
  203.   margin-top: 0; }
  204.  
  205.  
  206. /* Links
  207. –––––––––––––––––––––––––––––––––––––––––––––––––– */
  208. a {
  209.   color: #1EAEDB; }
  210. a:hover {
  211.   color: #0FA0CE; }
  212.  
  213.  
  214. /* Buttons
  215. –––––––––––––––––––––––––––––––––––––––––––––––––– */
  216. .button,
  217. button,
  218. input[type="submit"],
  219. input[type="reset"],
  220. input[type="button"] {
  221.   display: inline-block;
  222.   height: 38px;
  223.   padding: 0 25px;
  224.   color: #555;
  225.   text-align: center;
  226.   font-size: 11px;
  227.   font-weight: 600;
  228.   line-height: 38px;
  229.   letter-spacing: .1rem;
  230.   text-transform: uppercase;
  231.   text-decoration: none;
  232.   white-space: nowrap;
  233.   background-color: transparent;
  234.   border-radius: 4px;
  235.   border: 1px solid #bbb;
  236.   cursor: pointer;
  237.   box-sizing: border-box; }
  238. .button:hover,
  239. button:hover,
  240. input[type="submit"]:hover,
  241. input[type="reset"]:hover,
  242. input[type="button"]:hover,
  243. .button:focus,
  244. button:focus,
  245. input[type="submit"]:focus,
  246. input[type="reset"]:focus,
  247. input[type="button"]:focus {
  248.   color: #333;
  249.   border-color: #888;
  250.   outline: 0; }
  251. .button.button-primary,
  252. button.button-primary,
  253. input[type="submit"].button-primary,
  254. input[type="reset"].button-primary,
  255. input[type="button"].button-primary {
  256.   color: #FFF;
  257.   background-color: #33C3F0;
  258.   border-color: #33C3F0; }
  259. .button.button-primary:hover,
  260. button.button-primary:hover,
  261. input[type="submit"].button-primary:hover,
  262. input[type="reset"].button-primary:hover,
  263. input[type="button"].button-primary:hover,
  264. .button.button-primary:focus,
  265. button.button-primary:focus,
  266. input[type="submit"].button-primary:focus,
  267. input[type="reset"].button-primary:focus,
  268. input[type="button"].button-primary:focus {
  269.   color: #FFF;
  270.   background-color: #1EAEDB;
  271.   border-color: #1EAEDB; }
  272.  
  273.  
  274. /* Forms
  275. –––––––––––––––––––––––––––––––––––––––––––––––––– */
  276. input[type="email"],
  277. input[type="number"],
  278. input[type="search"],
  279. input[type="text"],
  280. input[type="tel"],
  281. input[type="url"],
  282. input[type="password"],
  283. textarea,
  284. select {
  285.   height: 38px;
  286.   padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
  287.   background-color: #fff;
  288.   border: 1px solid #D1D1D1;
  289.   border-radius: 4px;
  290.   box-shadow: none;
  291.   box-sizing: border-box; }
  292. /* Removes awkward default styles on some inputs for iOS */
  293. input[type="email"],
  294. input[type="number"],
  295. input[type="search"],
  296. input[type="text"],
  297. input[type="tel"],
  298. input[type="url"],
  299. input[type="password"],
  300. textarea {
  301.   -webkit-appearance: none;
  302.      -moz-appearance: none;
  303.           appearance: none; }
  304. textarea {
  305.   min-height: 65px;
  306.   padding-top: 6px;
  307.   padding-bottom: 6px; }
  308. input[type="email"]:focus,
  309. input[type="number"]:focus,
  310. input[type="search"]:focus,
  311. input[type="text"]:focus,
  312. input[type="tel"]:focus,
  313. input[type="url"]:focus,
  314. input[type="password"]:focus,
  315. textarea:focus,
  316. select:focus {
  317.   border: 1px solid #33C3F0;
  318.   outline: 0; }
  319. label,
  320. legend {
  321.   display: block;
  322.   margin-bottom: .5rem;
  323.   font-weight: 600; }
  324. fieldset {
  325.   padding: 0;
  326.   border-width: 0; }
  327. input[type="checkbox"],
  328. input[type="radio"] {
  329.   display: inline; }
  330. label > .label-body {
  331.   display: inline-block;
  332.   margin-left: .5rem;
  333.   font-weight: normal; }
  334.  
  335.  
  336. /* Lists
  337. –––––––––––––––––––––––––––––––––––––––––––––––––– */
  338. ul {
  339.   list-style: circle inside; }
  340. ol {
  341.   list-style: decimal inside; }
  342. ol, ul {
  343.   padding-left: 0;
  344.   margin-top: 0; }
  345. ul ul,
  346. ul ol,
  347. ol ol,
  348. ol ul {
  349.   margin: 1.5rem 0 1.5rem 3rem;
  350.   font-size: 90%; }
  351. li {
  352.   margin-bottom: 1rem; }
  353.  
  354.  
  355. /* Code
  356. –––––––––––––––––––––––––––––––––––––––––––––––––– */
  357. code {
  358.   padding: .2rem .5rem;
  359.   margin: 0 .2rem;
  360.   font-size: 90%;
  361.   white-space: nowrap;
  362.   background: #F1F1F1;
  363.   border: 1px solid #E1E1E1;
  364.   border-radius: 4px; }
  365. pre > code {
  366.   display: block;
  367.   padding: 1rem 1.5rem;
  368.   white-space: pre; }
  369.  
  370.  
  371. /* Tables
  372. –––––––––––––––––––––––––––––––––––––––––––––––––– */
  373. th,
  374. td {
  375.   padding: 12px 15px;
  376.   text-align: left;
  377.   border-bottom: 1px solid #E1E1E1; }
  378. th:first-child,
  379. td:first-child {
  380.   padding-left: 0; }
  381. th:last-child,
  382. td:last-child {
  383.   padding-right: 0; }
  384.  
  385.  
  386. /* Spacing
  387. –––––––––––––––––––––––––––––––––––––––––––––––––– */
  388. button,
  389. .button {
  390.   margin-bottom: 1rem; }
  391. input,
  392. textarea,
  393. select,
  394. fieldset {
  395.   margin-bottom: 1.5rem; }
  396. pre,
  397. blockquote,
  398. dl,
  399. figure,
  400. table,
  401. p,
  402. ul,
  403. ol,
  404. form {
  405.   margin-bottom: 2.5rem; }
  406.  
  407.  
  408. /* Utilities
  409. –––––––––––––––––––––––––––––––––––––––––––––––––– */
  410. .u-full-width {
  411.   width: 100%;
  412.   box-sizing: border-box; }
  413. .u-max-full-width {
  414.   max-width: 100%;
  415.   box-sizing: border-box; }
  416. .u-pull-right {
  417.   float: right; }
  418. .u-pull-left {
  419.   float: left; }
  420.  
  421.  
  422. /* Misc
  423. –––––––––––––––––––––––––––––––––––––––––––––––––– */
  424. hr {
  425.   margin-top: 3rem;
  426.   margin-bottom: 3.5rem;
  427.   border-width: 0;
  428.   border-top: 1px solid #E1E1E1; }
  429.  
  430.  
  431. /* Clearing
  432. –––––––––––––––––––––––––––––––––––––––––––––––––– */
  433.  
  434. /* Self Clearing Goodness */
  435. .container:after,
  436. .row:after,
  437. .u-cf {
  438.   content: "";
  439.   display: table;
  440.   clear: both; }
  441.  
  442.  
  443. /* Media Queries
  444. –––––––––––––––––––––––––––––––––––––––––––––––––– */
  445. /*
  446. Note: The best way to structure the use of media queries is to create the queries
  447. near the relevant code. For example, if you wanted to change the styles for buttons
  448. on small devices, paste the mobile query code up in the buttons section and style it
  449. there.
  450. */
  451.  
  452.  
  453. /* Larger than mobile */
  454. @media (min-width: 400px) {}
  455.  
  456. /* Larger than phablet (also point when grid becomes active) */
  457. @media (min-width: 550px) {}
  458.  
  459. /* Larger than tablet */
  460. @media (min-width: 750px) {}
  461.  
  462. /* Larger than desktop */
  463. @media (min-width: 1000px) {}
  464.  
  465. /* Larger than Desktop HD */
  466. @media (min-width: 1200px) {}
Advertisement
Comments
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!