app.css 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191
  1. /* general styling */
  2. html, body {
  3. font-family: 'Lato', sans-serif;
  4. color: #333;
  5. font-size: 1.1em;
  6. }
  7. a, a:visited {
  8. color: #3a9784;
  9. }
  10. a:hover {
  11. text-decoration: none;
  12. color: #317f6f;
  13. }
  14. h1 {
  15. margin-top: 25px;
  16. margin-bottom: 18px;
  17. font-size: 2.5em;
  18. }
  19. h2 {
  20. margin-top: 20px;
  21. margin-bottom: 5px;
  22. font-size: 1.8em;
  23. }
  24. h3 {
  25. margin-top: 20px;
  26. margin-bottom: 5px;
  27. font-size: 1.3em;
  28. }
  29. p {
  30. margin-top: 10px;
  31. margin-bottom: 20px;
  32. font-size: 1.1em;
  33. line-height: 140%;
  34. }
  35. p.smallMarginBottom {
  36. margin-bottom: 10px;
  37. }
  38. tt {
  39. background: #eee;
  40. padding: 2px 7px;
  41. border-radius: 3px;
  42. }
  43. code {
  44. display: block;
  45. background: #eee;
  46. font-family: monospace;
  47. padding: 20px;
  48. border-radius: 3px;
  49. margin-top: 10px;
  50. margin-bottom: 20px;
  51. }
  52. /* Lato font (OFL), https://fonts.google.com/specimen/Lato#about,
  53. embedded with the help of https://google-webfonts-helper.herokuapp.com/fonts/lato?subsets=latin */
  54. @font-face {
  55. font-family: 'Lato';
  56. font-style: normal;
  57. font-weight: 400;
  58. src: local(''),
  59. url('../font/lato-v17-latin-ext_latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
  60. url('../font/lato-v17-latin-ext_latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  61. }
  62. /* Main page */
  63. #main {
  64. max-width: 900px;
  65. margin: 0 auto 50px auto;
  66. }
  67. #error {
  68. color: darkred;
  69. font-style: italic;
  70. }
  71. #ironicCenterTagDontFreakOut {
  72. color: #666;
  73. }
  74. /* Subscribe box */
  75. button {
  76. background: #3a9784;
  77. border: none;
  78. border-radius: 3px;
  79. padding: 3px 5px;
  80. color: white;
  81. cursor: pointer;
  82. }
  83. button:hover {
  84. background: #317f6f;
  85. padding: 5px;
  86. }
  87. ul {
  88. padding-left: 1em;
  89. list-style-type: none;
  90. padding-bottom: 0;
  91. margin: 0;
  92. }
  93. li {
  94. padding: 4px 0;
  95. margin: 4px 0;
  96. font-size: 0.9em;
  97. }
  98. @media only screen and (min-width: 1600px) {
  99. #subscribeBox {
  100. position: fixed;
  101. top: 180px;
  102. right: 10px;
  103. width: 300px;
  104. border-left: 4px solid #3a9784;
  105. padding: 10px;
  106. }
  107. #subscribeBox h3 {
  108. margin-top: 0;
  109. margin-bottom: 5px;
  110. font-size: 1.1em;
  111. }
  112. #subscribeBox #topicsHeader {
  113. margin-bottom: 0;
  114. }
  115. #subscribeBox p {
  116. font-size: 0.9em;
  117. margin-bottom: 10px;
  118. }
  119. #subscribeBox ul {
  120. margin: 0;
  121. padding: 0;
  122. }
  123. #subscribeBox input {
  124. height: 18px;
  125. border-radius: 3px;
  126. border: none;
  127. border-bottom: 1px solid #aaa;
  128. }
  129. #subscribeBox input:focus {
  130. border-bottom: 2px solid #3a9784;
  131. outline: none;
  132. }
  133. #subscribeBox li {
  134. margin: 3px 0;
  135. padding: 0;
  136. }
  137. #subscribeBox li img {
  138. width: 15px;
  139. height: 15px;
  140. vertical-align: bottom;
  141. }
  142. #subscribeBox button {
  143. font-size: 0.7em;
  144. background: #3a9784;
  145. border-radius: 3px;
  146. padding: 3px 5px;
  147. color: white;
  148. cursor: pointer;
  149. border-top: solid transparent 2px;
  150. border-bottom: solid transparent 2px;
  151. }
  152. #subscribeBox button:hover {
  153. background: #317f6f;
  154. }
  155. }