misconstruedⓂ️monologues https://blog.bemoe.online
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

198 lines
2.4KB

  1. html {
  2. font-family: monospace;
  3. font-size: 82.5%;
  4. color: #eee;
  5. background-color: #4a525a;
  6. }
  7. body {
  8. font-size: 1.6rem;
  9. color: #fff;
  10. text-align: justify;
  11. }
  12. strong {
  13. color: #80f3af;
  14. }
  15. em {
  16. color: yellow;
  17. }
  18. li {
  19. text-align: left;
  20. }
  21. img {
  22. max-width: 100%;
  23. margin: auto;
  24. display: block;
  25. }
  26. blockquote {
  27. padding: 0 1em;
  28. color: #2ecc40;
  29. border-left: 0.25em solid #dfe2e5;
  30. }
  31. header {
  32. border-bottom: 0.2rem solid #eee;
  33. }
  34. nav {
  35. text-align: right;
  36. }
  37. nav a:link,
  38. nav a:visited {
  39. font-size: 1.8rem;
  40. font-weight: bold;
  41. color: #499cd4;
  42. text-decoration: none;
  43. text-transform: lowercase;
  44. }
  45. a {
  46. text-decoration: none;
  47. }
  48. a:link {
  49. color: #499cd4;
  50. }
  51. a:visited {
  52. color: #ca49d4;
  53. }
  54. footer {
  55. margin-top: 3rem;
  56. margin-bottom: 1.2rem;
  57. padding: 1.2rem 0;
  58. border-top: 0.2rem solid #eee;
  59. font-size: 1.2rem;
  60. color: #ccf;
  61. }
  62. h1 {
  63. font-size: 2.4rem;
  64. }
  65. h2 {
  66. font-size: 2rem;
  67. color: pink;
  68. }
  69. article .header {
  70. font-size: 1.4rem;
  71. text-align: right;
  72. color: #cfc;
  73. }
  74. .logo a {
  75. font-weight: bold;
  76. color: #ccc;
  77. text-decoration: none;
  78. }
  79. @media (max-width: 319px) {
  80. body {
  81. width: 90%;
  82. margin: 0;
  83. padding: 0 5%;
  84. }
  85. header {
  86. margin: 4.2rem 0;
  87. }
  88. nav {
  89. margin: 0 auto 3rem;
  90. text-align: center;
  91. }
  92. footer {
  93. text-align: center;
  94. }
  95. .logo {
  96. text-align: center;
  97. margin: 1rem auto 3rem;
  98. }
  99. .logo a {
  100. font-size: 2.4rem;
  101. }
  102. nav a {
  103. display: block;
  104. line-height: 1.6;
  105. }
  106. }
  107. @media (min-width: 320px) {
  108. body {
  109. width: 90%;
  110. margin: 0;
  111. padding: 0 5%;
  112. /* text-align: center;
  113. */
  114. }
  115. header {
  116. margin: 4.2rem 0;
  117. }
  118. nav {
  119. margin: 0 auto 3rem;
  120. text-align: center;
  121. }
  122. footer {
  123. text-align: center;
  124. }
  125. .logo {
  126. text-align: center;
  127. margin: 1rem auto 3rem;
  128. }
  129. .logo a {
  130. font-size: 2.4rem;
  131. }
  132. nav a {
  133. display: inline;
  134. margin: 0 0.6rem;
  135. }
  136. }
  137. @media (min-width: 640px) {
  138. body {
  139. width: 72rem;
  140. margin: 0 auto;
  141. padding: 0;
  142. }
  143. header {
  144. margin: 0 0 3rem;
  145. padding: 1.2rem 0;
  146. }
  147. nav {
  148. margin: 0;
  149. text-align: right;
  150. }
  151. nav a {
  152. margin: 0 0 0 1.2rem;
  153. display: inline;
  154. }
  155. footer a,
  156. footer a:visited {
  157. color: #499cd4;
  158. }
  159. .bleft {
  160. text-align: left;
  161. display: inline;
  162. float: left;
  163. }
  164. .bright {
  165. text-align: right;
  166. display: inline;
  167. float: right;
  168. }
  169. .logo {
  170. margin: 0;
  171. text-align: left;
  172. }
  173. .logo a {
  174. float: left;
  175. font-size: 1.8rem;
  176. }
  177. }