strange-case.css 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291
  1. /*
  2. *
  3. * Strange Case
  4. * ------------
  5. *
  6. * Built by ExchangeRate-API with Bootstrap - inspired by
  7. * Hyde (https://github.com/mdo/hyde) for Hugo.
  8. *
  9. *
  10. * CSS SECTIONS
  11. *
  12. * Defaults
  13. * Blog Content
  14. * Sidebar
  15. * Themes
  16. *
  17. */
  18. /* DEFAULTS */
  19. html, body {
  20. height: 100%
  21. }
  22. h1, h2, h3, h4 {
  23. font-family: Roboto, sans-serif;
  24. }
  25. p {
  26. font-family: Roboto, sans-serif;
  27. font-size: 1.2em;
  28. }
  29. /* BLOG CONTENT */
  30. .content {
  31. padding-left: 5em;
  32. }
  33. @media (max-width: 768px) {
  34. .content {
  35. padding-left: 1em;
  36. }
  37. }
  38. .post {
  39. margin-bottom: 3em;
  40. }
  41. .post .post-heading {
  42. margin-bottom: 1em;
  43. }
  44. .post .post-heading h1 {
  45. margin-top: 1.4em;
  46. }
  47. .post h1 {
  48. font-size: 2.6em;
  49. margin-bottom: 0.2em;
  50. margin-top: 1em;
  51. font-weight: bold;
  52. }
  53. .post h2 {
  54. font-size: 1.8em;
  55. margin-bottom: 0.2em;
  56. margin-top: 1em;
  57. font-weight: bold;
  58. }
  59. .post .post-heading span {
  60. font-size:1.4em;
  61. }
  62. /* SIDEBAR */
  63. .sidebar {
  64. padding: 2em;
  65. font-size: 1.3em;
  66. text-align: left;
  67. }
  68. .sidebar .sidebar-content {
  69. width:85%;
  70. margin:0 auto;
  71. }
  72. .sidebar .sidebar-freetext {
  73. margin-top: 1.5em;
  74. }
  75. .sidebar .sidebar-menus {
  76. padding-left: 0;
  77. margin-left: 0;
  78. margin-top: 1.5em;
  79. }
  80. .sidebar .sidebar-menus li {
  81. list-style: none;
  82. font-size:1em;
  83. }
  84. .sidebar .sidebar-recent {
  85. margin-top: 1.5em;
  86. }
  87. .sidebar .sidebar-menus li a {
  88. text-decoration:underline;
  89. }
  90. @media (min-width: 768px) {
  91. .sidebar {
  92. top: 0;
  93. bottom: 0;
  94. left: 0;
  95. position: fixed;
  96. }
  97. .sidebar-content {
  98. top: 1em;
  99. bottom: 1em;
  100. left: 1em;
  101. right: 1em;
  102. position: absolute;
  103. }
  104. .sidebar .sidebar-content {
  105. width:75%;
  106. margin:0 auto;
  107. }
  108. }
  109. @media (max-width: 992px) {
  110. .sidebar {
  111. font-size: 1em;
  112. }
  113. }
  114. @media (max-width: 1200px) {
  115. .sidebar {
  116. font-size: 1.1em;
  117. }
  118. }
  119. .sidebar h1 {
  120. font-size: 1.8em;
  121. font-weight: bold;
  122. margin-bottom: 0;
  123. }
  124. .sidebar li {
  125. font-size: 0.8em;
  126. }
  127. p.copyright {
  128. font-size: 0.7em;
  129. border-top: 1px dotted #ccc;
  130. padding-top: 1em;
  131. margin-top: 2em;
  132. margin-bottom: 0.1em;
  133. }
  134. p.attr {
  135. margin-top: 0;
  136. font-size: 0.6em;
  137. }
  138. /* THEMES */
  139. /* Gulf Racing Scheme */
  140. .scheme-gulfracing .sidebar {
  141. background-color: #85B2D3;
  142. color: #444;
  143. }
  144. .scheme-gulf .sidebar h1 {
  145. color: #1C1C28;
  146. }
  147. .scheme-gulf .sidebar a {
  148. color: #444;
  149. }
  150. .scheme-gulf .content a {
  151. color: #E75E16;
  152. }
  153. .scheme-gulf .post .post-heading span {
  154. color: #9a9a9a;
  155. }
  156. /* YOUR SCHEME HERE */
  157. /*.scheme-custom .sidebar {
  158. background-color: #85B2D3;
  159. color: #444;
  160. }
  161. .scheme-custom .sidebar h1 {
  162. color: #1C1C28;
  163. }
  164. .scheme-custom .sidebar a {
  165. color: #444;
  166. }
  167. .scheme-custom .content a {
  168. color: #E75E16;
  169. }
  170. .scheme-custom .post .post-heading span {
  171. color: #9a9a9a;
  172. }*/
  173. /*
  174. * The original Hyde theme uses Base16 for colour schemes so
  175. * we decided to also use this project. We picked different
  176. * colors though. We also used the Ocean and 80's palettes in
  177. * addition to the Default palette.
  178. *
  179. * Base16: (http://chriskempson.github.io/base16)
  180. *
  181. */
  182. /* Dark Brown Scheme */
  183. .scheme-darkbrown .sidebar {
  184. background-color: #2d2d2d;
  185. color: #f2f0ec;
  186. }
  187. .scheme-darkbrown .sidebar h1 {
  188. color: #99cc99;
  189. }
  190. .scheme-darkbrown .sidebar a {
  191. color: #99cc99;
  192. }
  193. .scheme-darkbrown .content a {
  194. color: #2d2d2d;
  195. }
  196. .scheme-darkbrown .post .post-heading span {
  197. color: #9a9a9a;
  198. }
  199. /* Light Brown Scheme */
  200. .scheme-lightbrown .sidebar {
  201. background-color: #d3d0c8;
  202. color: #393939;
  203. }
  204. .scheme-lightbrown .sidebar h1 {
  205. color: #393939;
  206. }
  207. .scheme-lightbrown .sidebar a {
  208. color: #515151;
  209. }
  210. .scheme-lightbrown .content a {
  211. color: #393939;
  212. }
  213. .scheme-lightbrown .post .post-heading span {
  214. color: #9a9a9a;
  215. }
  216. /* Orange Scheme */
  217. .scheme-orange .sidebar {
  218. background-color: #f99157;
  219. color: #f2f0ec;
  220. }
  221. .scheme-orange .sidebar h1 {
  222. color: #515151;
  223. }
  224. .scheme-orange .sidebar a {
  225. color: #747369;
  226. }
  227. .scheme-orange .content a {
  228. color: #393939;
  229. }
  230. .scheme-orange .post .post-heading span {
  231. color: #9a9a9a;
  232. }
  233. /* Green Scheme */
  234. .scheme-green .sidebar {
  235. background-color: #a3be8c;
  236. color: #4f5b66;
  237. }
  238. .scheme-green .sidebar h1 {
  239. color: #2b303b;
  240. }
  241. .scheme-green .sidebar a {
  242. color: #eff1f5;
  243. }
  244. .scheme-green .content a {
  245. color: #2d2d2d;
  246. }
  247. .scheme-green .post .post-heading span {
  248. color: #9a9a9a;
  249. }
  250. /* Slate Scheme */
  251. .scheme-slate .sidebar {
  252. background-color: #a7adba;
  253. color: #343d46;
  254. }
  255. .scheme-slate .sidebar h1 {
  256. color: #2b303b;
  257. }
  258. .scheme-slate .sidebar a {
  259. color: #bf616a;
  260. }
  261. .scheme-slate .content a {
  262. color: #65737e;
  263. }
  264. .scheme-slate .post .post-heading span {
  265. color: #9a9a9a;
  266. }