my little space on the web https://inhji.de
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.

357 lines
8.1KB

  1. @charset "UTF-8";
  2. // Ascii Art created with:
  3. // http://www.patorjk.com/software/taag/#p=display&f=Big%20Money-nw&t=Base
  4. // $$$$$$\ $$$$$$\ $$\
  5. // $$ __$$\ $$ __$$\ \__|
  6. // $$ / \__| $$$$$$\ $$$$$$$\ $$ / \__|$$\ $$$$$$\
  7. // $$ | $$ __$$\ $$ __$$\ $$$$\ $$ |$$ __$$\
  8. // $$ | $$ / $$ |$$ | $$ |$$ _| $$ |$$ / $$ |
  9. // $$ | $$\ $$ | $$ |$$ | $$ |$$ | $$ |$$ | $$ |
  10. // \$$$$$$ |\$$$$$$ |$$ | $$ |$$ | $$ |\$$$$$$$ |
  11. // \______/ \______/ \__| \__|\__| \__| \____$$ |
  12. // $$\ $$ |
  13. // \$$$$$$ |
  14. // \______/
  15. // Custom Variables
  16. $radius-slightly-rounded: 3px;
  17. $purple: #4c00ff;
  18. $dark-purple: #050011;
  19. $light-purple: #6940fb;
  20. $primary: $purple;
  21. $secondary: #fff;
  22. @import "~bulma/sass/utilities/_all";
  23. // Bulma Overrides
  24. $family-primary: 'Open Sans Regular', sans-serif;
  25. $family-logo: 'Open Sans Light', sans-serif;
  26. $background: $dark-purple;
  27. $body-color: $grey-light;
  28. $body-background-color: $dark-purple;
  29. $navbar-background-color: $dark-purple;
  30. $navbar-item-color: $grey-light;
  31. $navbar-item-hover-background-color: $dark-purple;
  32. $navbar-dropdown-background-color: $dark-purple;
  33. $navbar-dropdown-border-top: 0;
  34. $navbar-dropdown-item-hover-color: $purple;
  35. $navbar-divider-background-color: $purple;
  36. $text: $grey-light;
  37. $text-strong: $grey-light;
  38. $title-color: $grey-light;
  39. $subtitle-color: $grey-light;
  40. $link: $light;
  41. $link-hover: $light-purple;
  42. $card-background-color: transparent;
  43. $card-header-title-size: 3rem;
  44. $card-header-title-letter-spacing: 3px;
  45. $footer-background-color: $dark-purple;
  46. $dimensions: 16 24 32 48 64 96 128 196;
  47. @import "~bulma/sass/base/_all";
  48. @import "~bulma/sass/elements/_all";
  49. @import "~bulma/sass/components/_all";
  50. @import "~bulma/sass/form/_all";
  51. @import "~bulma/sass/grid/_all";
  52. @import "~bulma/sass/layout/_all";
  53. @import "~bulma-prefers-dark/bulma-prefers-dark";
  54. @import "~bulma-tagsinput/dist/css/bulma-tagsinput";
  55. @import "~bulma-switch/dist/css/bulma-switch";
  56. @import "~bulma-divider/dist/css/bulma-divider";
  57. @import "~fork-awesome/scss/fork-awesome.scss";
  58. @import "include/bulma";
  59. @import "include/mixins";
  60. @import "include/notification";
  61. @import "include/helpers";
  62. @import "include/tagcloud";
  63. @import "include/article";
  64. @import "include/prism";
  65. @import "include/zen";
  66. @import "include/lightbox";
  67. // $$$$$$$\
  68. // $$ __$$\
  69. // $$ | $$ | $$$$$$\ $$$$$$$\ $$$$$$\
  70. // $$$$$$$\ | \____$$\ $$ _____|$$ __$$\
  71. // $$ __$$\ $$$$$$$ |\$$$$$$\ $$$$$$$$ |
  72. // $$ | $$ |$$ __$$ | \____$$\ $$ ____|
  73. // $$$$$$$ |\$$$$$$$ |$$$$$$$ |\$$$$$$$\
  74. // \_______/ \_______|\_______/ \_______|
  75. // @import "debug";
  76. ::-moz-selection { background: $primary; color: $white; }
  77. ::selection { background: $primary; color: $white; }
  78. * { box-sizing: border-box; }
  79. @font-face {
  80. font-family: 'Open Sans Regular';
  81. src: url('../fonts/OpenSans-Regular-webfont.woff') format('woff');
  82. font-weight: normal;
  83. font-style: normal;
  84. }
  85. @font-face {
  86. font-family: 'Open Sans Light';
  87. src: url('../fonts/OpenSans-Light-webfont.woff') format('woff');
  88. font-weight: lighter;
  89. font-style: normal;
  90. }
  91. .container {}
  92. a:hover {
  93. text-decoration: underline;
  94. }
  95. ::placeholder {
  96. color: $dark;
  97. opacity: 1;
  98. }
  99. main {
  100. .columns {
  101. margin-right: 0;
  102. .column {
  103. padding-right: 0;
  104. }
  105. }
  106. }
  107. // $$\ $$\ $$\
  108. // $$ | $$ | $$ |
  109. // $$ | $$ | $$$$$$\ $$$$$$\ $$$$$$$ | $$$$$$\ $$$$$$\
  110. // $$$$$$$$ |$$ __$$\ \____$$\ $$ __$$ |$$ __$$\ $$ __$$\
  111. // $$ __$$ |$$$$$$$$ | $$$$$$$ |$$ / $$ |$$$$$$$$ |$$ | \__|
  112. // $$ | $$ |$$ ____|$$ __$$ |$$ | $$ |$$ ____|$$ |
  113. // $$ | $$ |\$$$$$$$\ \$$$$$$$ |\$$$$$$$ |\$$$$$$$\ $$ |
  114. // \__| \__| \_______| \_______| \_______| \_______|\__|
  115. .navbar {
  116. padding: 0 0.75rem;
  117. .navbar-brand {
  118. svg {
  119. fill: $light;
  120. }
  121. .navbar-item {
  122. justify-content: center;
  123. font-family: $family-logo;
  124. font-weight: lighter;
  125. font-size: 150%;
  126. }
  127. }
  128. &.is-dark-purple {
  129. background: $dark-purple;
  130. }
  131. }
  132. .profile {
  133. padding: 1.5rem 0;
  134. margin: 0 1.5rem;
  135. border-bottom: 3px solid $purple;
  136. h1 {
  137. color: $body-color;
  138. }
  139. }
  140. // $$$$$$$$\ $$\
  141. // $$ _____| $$ |
  142. // $$ | $$$$$$\ $$$$$$\ $$$$$$\ $$$$$$\ $$$$$$\
  143. // $$$$$\ $$ __$$\ $$ __$$\\_$$ _| $$ __$$\ $$ __$$\
  144. // $$ __|$$ / $$ |$$ / $$ | $$ | $$$$$$$$ |$$ | \__|
  145. // $$ | $$ | $$ |$$ | $$ | $$ |$$\ $$ ____|$$ |
  146. // $$ | \$$$$$$ |\$$$$$$ | \$$$$ |\$$$$$$$\ $$ |
  147. // \__| \______/ \______/ \____/ \_______|\__|
  148. footer#footer {
  149. .social-links {
  150. li {
  151. float: left;
  152. margin-right: 0.25rem;
  153. }
  154. }
  155. }
  156. // $$$$$$\ $$\ $$\
  157. // $$ __$$\ $$ | $$ |
  158. // $$ / \__| $$$$$$\ $$$$$$$\ $$$$$$\ $$$$$$\ $$$$$$$\ $$$$$$\
  159. // $$ | $$ __$$\ $$ __$$\\_$$ _| $$ __$$\ $$ __$$\\_$$ _|
  160. // $$ | $$ / $$ |$$ | $$ | $$ | $$$$$$$$ |$$ | $$ | $$ |
  161. // $$ | $$\ $$ | $$ |$$ | $$ | $$ |$$\ $$ ____|$$ | $$ | $$ |$$\
  162. // \$$$$$$ |\$$$$$$ |$$ | $$ | \$$$$ |\$$$$$$$\ $$ | $$ | \$$$$ |
  163. // \______/ \______/ \__| \__| \____/ \_______|\__| \__| \____/
  164. #weather {
  165. padding: 0.4rem;
  166. }
  167. main#content {
  168. .card {
  169. box-shadow: none;
  170. .card-header {
  171. .card-header-title {
  172. font-weight: 300;
  173. }
  174. }
  175. }
  176. .invisible {
  177. display: none;
  178. }
  179. .ellipsis:after {
  180. content: "…"
  181. }
  182. article.post,
  183. article.bookmark,
  184. article.like {
  185. margin-bottom: 1rem;
  186. .title {
  187. font-weight: normal;
  188. a {
  189. color: $grey-light;
  190. }
  191. }
  192. .post-header {
  193. strong {
  194. color: $title-color;
  195. }
  196. }
  197. }
  198. }
  199. .content {
  200. .tag, .number {
  201. display: inline;
  202. padding: inherit;
  203. font-size: inherit;
  204. line-height: inherit;
  205. text-align: inherit;
  206. vertical-align: inherit;
  207. border-radius: inherit;
  208. font-weight: inherit;
  209. white-space: inherit;
  210. background: inherit;
  211. margin: inherit;
  212. }
  213. }
  214. .pagination {
  215. margin: 2rem 0 0 0;
  216. .pagination-link {
  217. border: 1px solid $purple;
  218. box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
  219. &.is-current{
  220. background: $purple;
  221. }
  222. }
  223. }
  224. .emoji-picker { z-index: 999; }
  225. .weather {
  226. canvas#weather {
  227. padding: 8px;
  228. border-radius: 5px;
  229. &.clear-night,
  230. &.partly-cloudy-night {
  231. background: #006ab3;
  232. }
  233. &.cloudy,
  234. &.clear-day,
  235. &.partly-cloudy-day,
  236. &.rain,
  237. &.sleet,
  238. &.snow,
  239. &.wind {
  240. background: #00aaff;
  241. }
  242. &.fog {
  243. background: $grey;
  244. }
  245. }
  246. }
  247. // $$\ $$\ $$\ $$\ $$$$$$\
  248. // $$$\ $$$ | $$ |\__| $$ __$$\
  249. // $$$$\ $$$$ | $$$$$$\ $$$$$$$ |$$\ $$$$$$\ $$ / $$ |
  250. // $$\$$\$$ $$ |$$ __$$\ $$ __$$ |$$ | \____$$\ $$ | $$ |
  251. // $$ \$$$ $$ |$$$$$$$$ |$$ / $$ |$$ | $$$$$$$ | $$ | $$ |
  252. // $$ |\$ /$$ |$$ ____|$$ | $$ |$$ |$$ __$$ | $$ $$\$$ |
  253. // $$ | \_/ $$ |\$$$$$$$\ \$$$$$$$ |$$ |\$$$$$$$ | \$$$$$$ /
  254. // \__| \__| \_______| \_______|\__| \_______| \___$$$\
  255. @media screen and (max-width: $desktop) {
  256. .cover-container {
  257. padding-top: 10rem;
  258. }
  259. }
  260. @media screen and (max-width: $tablet) {
  261. .section {
  262. padding: 1rem;
  263. }
  264. .title {
  265. font-size: 1.5rem;
  266. }
  267. }
  268. // This needs to be last to override all other styles
  269. @include prefers-scheme(dark) {
  270. .pagination-link.is-current {
  271. color: $white;
  272. background-color: $dark;
  273. border-color: $primary;
  274. }
  275. .bookmark {
  276. .image {
  277. background-color: $white;
  278. }
  279. }
  280. article {
  281. .content {
  282. a.footnote, a.reversefootnote {
  283. color: findColorInvert($primary);
  284. background: findColorInvert($white);
  285. }
  286. }
  287. }
  288. }