main.css 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291
  1. /*! HTML5 Boilerplate v6.0.1 | MIT License | https://html5boilerplate.com/ */
  2. /*
  3. * What follows is the result of much research on cross-browser styling.
  4. * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
  5. * Kroc Camen, and the H5BP dev community and team.
  6. */
  7. /* ==========================================================================
  8. Base styles: opinionated defaults
  9. ========================================================================== */
  10. html {
  11. color: #222;
  12. font-size: 1em;
  13. line-height: 1.4;
  14. }
  15. /*
  16. * Remove text-shadow in selection highlight:
  17. * https://twitter.com/miketaylr/status/12228805301
  18. *
  19. * Vendor-prefixed and regular ::selection selectors cannot be combined:
  20. * https://stackoverflow.com/a/16982510/7133471
  21. *
  22. * Customize the background color to match your design.
  23. */
  24. ::-moz-selection {
  25. background: #b3d4fc;
  26. text-shadow: none;
  27. }
  28. ::selection {
  29. background: #b3d4fc;
  30. text-shadow: none;
  31. }
  32. /*
  33. * A better looking default horizontal rule
  34. */
  35. hr {
  36. display: block;
  37. height: 1px;
  38. border: 0;
  39. border-top: 1px solid #ccc;
  40. margin: 1em 0;
  41. padding: 0;
  42. }
  43. /*
  44. * Remove the gap between audio, canvas, iframes,
  45. * images, videos and the bottom of their containers:
  46. * https://github.com/h5bp/html5-boilerplate/issues/440
  47. */
  48. audio,
  49. canvas,
  50. iframe,
  51. img,
  52. svg,
  53. video {
  54. vertical-align: middle;
  55. }
  56. /*
  57. * Remove default fieldset styles.
  58. */
  59. fieldset {
  60. border: 0;
  61. margin: 0;
  62. padding: 0;
  63. }
  64. /*
  65. * Allow only vertical resizing of textareas.
  66. */
  67. textarea {
  68. resize: vertical;
  69. }
  70. /* ==========================================================================
  71. Browser Upgrade Prompt
  72. ========================================================================== */
  73. .browserupgrade {
  74. margin: 0.2em 0;
  75. background: #ccc;
  76. color: #000;
  77. padding: 0.2em 0;
  78. }
  79. /* ==========================================================================
  80. Author's custom styles
  81. ========================================================================== */
  82. /* ==========================================================================
  83. Helper classes
  84. ========================================================================== */
  85. /*
  86. * Hide visually and from screen readers
  87. */
  88. .hidden {
  89. display: none !important;
  90. }
  91. /*
  92. * Hide only visually, but have it available for screen readers:
  93. * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
  94. *
  95. * 1. For long content, line feeds are not interpreted as spaces and small width
  96. * causes content to wrap 1 word per line:
  97. * https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
  98. */
  99. .visuallyhidden {
  100. border: 0;
  101. clip: rect(0 0 0 0);
  102. -webkit-clip-path: inset(50%);
  103. clip-path: inset(50%);
  104. height: 1px;
  105. margin: -1px;
  106. overflow: hidden;
  107. padding: 0;
  108. position: absolute;
  109. width: 1px;
  110. white-space: nowrap; /* 1 */
  111. }
  112. /*
  113. * Extends the .visuallyhidden class to allow the element
  114. * to be focusable when navigated to via the keyboard:
  115. * https://www.drupal.org/node/897638
  116. */
  117. .visuallyhidden.focusable:active,
  118. .visuallyhidden.focusable:focus {
  119. clip: auto;
  120. -webkit-clip-path: none;
  121. clip-path: none;
  122. height: auto;
  123. margin: 0;
  124. overflow: visible;
  125. position: static;
  126. width: auto;
  127. white-space: inherit;
  128. }
  129. /*
  130. * Hide visually and from screen readers, but maintain layout
  131. */
  132. .invisible {
  133. visibility: hidden;
  134. }
  135. /*
  136. * Clearfix: contain floats
  137. *
  138. * For modern browsers
  139. * 1. The space content is one way to avoid an Opera bug when the
  140. * `contenteditable` attribute is included anywhere else in the document.
  141. * Otherwise it causes space to appear at the top and bottom of elements
  142. * that receive the `clearfix` class.
  143. * 2. The use of `table` rather than `block` is only necessary if using
  144. * `:before` to contain the top-margins of child elements.
  145. */
  146. .clearfix:before,
  147. .clearfix:after {
  148. content: " "; /* 1 */
  149. display: table; /* 2 */
  150. }
  151. .clearfix:after {
  152. clear: both;
  153. }
  154. /* ==========================================================================
  155. EXAMPLE Media Queries for Responsive Design.
  156. These examples override the primary ('mobile first') styles.
  157. Modify as content requires.
  158. ========================================================================== */
  159. @media only screen and (min-width: 35em) {
  160. /* Style adjustments for viewports that meet the condition */
  161. }
  162. @media print,
  163. (-webkit-min-device-pixel-ratio: 1.25),
  164. (min-resolution: 1.25dppx),
  165. (min-resolution: 120dpi) {
  166. /* Style adjustments for high resolution devices */
  167. }
  168. /* ==========================================================================
  169. Print styles.
  170. Inlined to avoid the additional HTTP request:
  171. http://www.phpied.com/delay-loading-your-print-css/
  172. ========================================================================== */
  173. @media print {
  174. *,
  175. *:before,
  176. *:after {
  177. background: transparent !important;
  178. color: #000 !important; /* Black prints faster:
  179. http://www.sanbeiji.com/archives/953 */
  180. box-shadow: none !important;
  181. text-shadow: none !important;
  182. }
  183. a,
  184. a:visited {
  185. text-decoration: underline;
  186. }
  187. a[href]:after {
  188. content: " (" attr(href) ")";
  189. }
  190. abbr[title]:after {
  191. content: " (" attr(title) ")";
  192. }
  193. /*
  194. * Don't show links that are fragment identifiers,
  195. * or use the `javascript:` pseudo protocol
  196. */
  197. a[href^="#"]:after,
  198. a[href^="javascript:"]:after {
  199. content: "";
  200. }
  201. pre {
  202. white-space: pre-wrap !important;
  203. }
  204. pre,
  205. blockquote {
  206. border: 1px solid #999;
  207. page-break-inside: avoid;
  208. }
  209. /*
  210. * Printing Tables:
  211. * http://css-discuss.incutio.com/wiki/Printing_Tables
  212. */
  213. thead {
  214. display: table-header-group;
  215. }
  216. tr,
  217. img {
  218. page-break-inside: avoid;
  219. }
  220. p,
  221. h2,
  222. h3 {
  223. orphans: 3;
  224. widows: 3;
  225. }
  226. h2,
  227. h3 {
  228. page-break-after: avoid;
  229. }
  230. }