styles.css 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291
  1. * {
  2. -webkit-box-sizing: border-box;
  3. -moz-box-sizing: border-box;
  4. box-sizing: border-box; }
  5. /** more normalize **/
  6. *,
  7. *:before,
  8. *:after {
  9. -webkit-box-sizing: border-box;
  10. -moz-box-sizing: border-box;
  11. box-sizing: border-box; }
  12. html, body {
  13. height: 100%; }
  14. /*
  15. Typography
  16. ==================================
  17. */
  18. body {
  19. font-family: "Merriweather", "Georgia", "Times New Roman", serif;
  20. font-weight: 400;
  21. font-style: normal;
  22. line-height: 1.9em; }
  23. header h1 {
  24. font-family: "Merriweather", "Georgia", "Times New Roman", serif;
  25. font-weight: normal; }
  26. h1, h2, h3, h4, h5, h6 {
  27. font-family: "Open Sans", Arial, sans-serif; }
  28. h1 {
  29. margin-top: 0.8em;
  30. margin-bottom: 1em;
  31. font-size: 24pt;
  32. line-height: 1.3em; }
  33. h2, h3, h4, h5, h6 {
  34. margin-top: 2em;
  35. line-height: 1.2em; }
  36. h2:before, h3:before, h4:before, h5:before, h6:before {
  37. content: '';
  38. display: block;
  39. position: relative;
  40. width: 0;
  41. height: 4em;
  42. margin-top: -4em; }
  43. /** Overall structure, desktop and mobile */
  44. header {
  45. background-color: #153E56;
  46. padding: 1.3em;
  47. color: #ffffff;
  48. position: fixed;
  49. height: 80px;
  50. width: 100%; }
  51. header h1 {
  52. margin: 0;
  53. font-size: 26pt; }
  54. header h1 a,
  55. header h1 a:link,
  56. header h1 a:visited {
  57. color: #ffffff;
  58. border-bottom: 0px; }
  59. header h1 a:hover {
  60. border-bottom: 1px solid #fff; }
  61. .edit-button span {
  62. background-color : #1d5392;
  63. padding : .25em .5em;
  64. border-radius : .2em;
  65. }
  66. a:hover.edit-button span,
  67. a:focus.edit-button span {
  68. background-color: #fff;
  69. color : #002a5b;
  70. }
  71. aside {
  72. float: left;
  73. display: block;
  74. margin-right: 2.35765%;
  75. width: 15.36421%;
  76. margin-top: 80px; }
  77. aside:last-child {
  78. margin-right: 0; }
  79. article {
  80. margin-left: 2.13245%;
  81. float: left;
  82. display: block;
  83. margin-right: 2.35765%;
  84. width: 75.88078%;
  85. margin-bottom: 20px;
  86. margin-top: 80px; }
  87. article:last-child {
  88. margin-right: 0; }
  89. @media screen and (max-width: 600px) {
  90. header {
  91. padding: 20px 10px;
  92. height: 65px; }
  93. header h1 {
  94. font-size: 18pt; }
  95. aside {
  96. float: left;
  97. display: block;
  98. margin-right: 2.35765%;
  99. width: 100%;
  100. margin-top: 65px; }
  101. aside:last-child {
  102. margin-right: 0; }
  103. article {
  104. float: left;
  105. display: block;
  106. margin-right: 2.35765%;
  107. width: 100%;
  108. padding-left: 5px;
  109. padding-right: 10px;
  110. margin-top: 0px; }
  111. article:last-child {
  112. margin-right: 0; } }
  113. @media screen and (max-width: 320px) {
  114. header h1 {
  115. font-size: 16pt; } }
  116. /* todo: errrr */
  117. img {
  118. width: 700px; }
  119. /* Lists */
  120. article ul {
  121. padding-left: 1.1em; }
  122. article li {
  123. margin-bottom: 1em; }
  124. li h3,
  125. li h4 {
  126. margin: 0; }
  127. li p {
  128. margin-top: 0; }
  129. /* Navigation */
  130. aside p {
  131. padding-left: 15px; }
  132. aside .sidebar-nav a {
  133. display: block;
  134. padding: 10px;
  135. -webkit-transition: .4s;
  136. transition: .4s; }
  137. aside .sidebar-nav a,
  138. aside .sidebar-nav a:link,
  139. aside .sidebar-nav a:visited {
  140. border-bottom: none;
  141. color: #75787b; }
  142. aside .sidebar-nav li:hover,
  143. aside .sidebar-nav .sidebar-nav-active {
  144. color: #75787b;
  145. border-left: 5px solid #153E56;
  146. background-color: transparent;
  147. border-bottom: 1px solid #babbbd;
  148. padding-left: 0; }
  149. aside .sidebar-nav ul {
  150. margin: 0;
  151. padding: 0; }
  152. aside .sidebar-nav li {
  153. list-style: none;
  154. border-bottom: 1px solid #babbbd;
  155. /*font-size: 1.125em;*/
  156. font-size: 0.8em;
  157. padding-left: 5px; }
  158. aside .sidebar-nav li:last-child {
  159. border-bottom: none; }
  160. p > code, li > code {
  161. padding: 2px 4px;
  162. background-color: #eaeaff;
  163. border: 1px solid #d5d5d5;
  164. font-size: 10pt;
  165. font-family: monospace; }
  166. pre {
  167. max-width: 100%;
  168. font-size: 0.875em;
  169. overflow-y: scroll;
  170. background-color: #f1f2f2;
  171. padding: 10px; }
  172. /* Links */
  173. /* for hover effects */
  174. a {
  175. -webkit-transition: .2s;
  176. -moz-transition: .2s;
  177. transition: .2s; }
  178. a,
  179. a:link,
  180. a:visited {
  181. color: #0072ce;
  182. border-bottom: 1px dotted #0072ce;
  183. text-decoration: none; }
  184. a:hover {
  185. border-bottom: 1px solid #7eb8dd;
  186. color: #7eb8dd;
  187. text-decoration: none; }
  188. a:active {
  189. border-bottom: 1px solid #0072ce;
  190. color: #002d72;
  191. text-decoration: none; }
  192. a:focus {
  193. border-bottom: 1px solid #0072ce;
  194. color: #0072ce;
  195. outline: thin dotted;
  196. text-decoration: none; }
  197. a.skip-link {
  198. color: #0072ce;
  199. border-bottom: none;
  200. padding: .25em; }
  201. a.skip-link:hover,
  202. a.skip-link:active,
  203. a.skip-link:focus {
  204. background-color: #0072ce;
  205. color: #ffffff;
  206. border-bottom: none; }
  207. /* Helpers */
  208. /* Hide from both screenreaders and browsers: h5bp.com/u */
  209. .hidden {
  210. display: none !important;
  211. visibility: hidden; }
  212. /* Hide only visually, but have it available for screenreaders: h5bp.com/v */
  213. .visuallyhidden {
  214. border: 0;
  215. clip: rect(0 0 0 0);
  216. height: 1px;
  217. margin: -1px;
  218. overflow: hidden;
  219. padding: 0;
  220. position: absolute;
  221. width: 1px; }
  222. /* Extends the .visuallyhidden class to allow the element to be focusable
  223. * when navigated to via the keyboard: h5bp.com/p */
  224. .visuallyhidden.focusable:active,
  225. .visuallyhidden.focusable:focus {
  226. clip: auto;
  227. height: auto;
  228. margin: 0;
  229. overflow: visible;
  230. position: static;
  231. width: auto; }
  232. /* Hide visually and from screenreaders, but maintain layout */
  233. .invisible {
  234. visibility: hidden; }
  235. /*# sourceMappingURL=styles.css.map */
  236. /* tables */
  237. table {
  238. border-collapse:collapse;
  239. border-spacing:0;
  240. border:1px solid black;
  241. }
  242. td {
  243. text-align:left;
  244. font-weight:normal;
  245. vertical-align:middle;
  246. border:1px solid black;
  247. padding:5px;
  248. }
  249. th {border: 1px solid black;
  250. padding:5px;}