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.

179 lines
2.2KB

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