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.

183 lines
3.8 KiB

4 years ago
  1. /*!
  2. * Copyright (C) 2019 Josh Habdas <jhabdas@protonmail.com>
  3. *
  4. * This file is part of After Dark.
  5. *
  6. * After Dark is free software: you can redistribute it and/or modify
  7. * it under the terms of the GNU Affero General Public License as published
  8. * by the Free Software Foundation, either version 3 of the License, or
  9. * (at your option) any later version.
  10. *
  11. * After Dark is distributed in the hope that it will be useful,
  12. * but WITHOUT ANY WARRANTY; without even the implied warranty of
  13. * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  14. * GNU Affero General Public License for more details.
  15. *
  16. * You should have received a copy of the GNU Affero General Public License
  17. * along with this program. If not, see <https://www.gnu.org/licenses/>.
  18. */
  19. :root {
  20. --screen-size-small: 30em; /* breakpoint reference only */
  21. }
  22. @keyframes intro {
  23. 0% { opacity: 0 } 100% { opacity: 1 }
  24. }
  25. .blur-up.lazyloading {
  26. filter: blur(5px);
  27. opacity: 1;
  28. transition: opacity 1s, filter 1.5s;
  29. }
  30. .blur-up.lazyload {
  31. opacity: 0;
  32. filter: blur(10px);
  33. }
  34. .blur-up.lazyloaded {
  35. filter: blur(0);
  36. transition: filter 1s;
  37. }
  38. .hack .readmore {
  39. margin-bottom: 2.2em;
  40. }
  41. .responsive-iframe,
  42. .ratio-container {
  43. position: relative;
  44. padding-bottom: 56.25%; /* 16:9 = 56.25% = calc(9 / 16 * 100%) */
  45. padding-top: 25px;
  46. height: 0;
  47. }
  48. .responsive-iframe iframe,
  49. .ratio-container > *:not([itemprop="caption"]) {
  50. position: absolute;
  51. top: 0;
  52. left: 0;
  53. width: 100%;
  54. height: 100%;
  55. }
  56. iframe {
  57. border: 0;
  58. }
  59. main, footer {
  60. animation: intro 0.3s both;
  61. animation-delay: 0.15s;
  62. }
  63. header:first-of-type + details {
  64. margin: 20px 0;
  65. }
  66. footer time[datetime$="M"]:before {
  67. content: "\2013\0020";
  68. }
  69. body > footer p.muted {
  70. margin-bottom: 0;
  71. }
  72. @media only screen and (max-width: 768px) {
  73. footer time[datetime$="M"] {
  74. display: none;
  75. }
  76. }
  77. blockquote cite {
  78. display: block;
  79. }
  80. blockquote cite::before {
  81. content: "\2014\00A0";
  82. }
  83. :target {
  84. filter: brightness(1.2);
  85. }
  86. :disabled {
  87. cursor: not-allowed;
  88. }
  89. /* hack.css overrides and enhancements */
  90. .hack li ul {
  91. margin: 0;
  92. }
  93. .hack ol li {
  94. padding-left: 27px;
  95. }
  96. .main {
  97. padding: 20px 10px;
  98. }
  99. input.form-control {
  100. border-radius: 0;
  101. background-color: transparent;
  102. -webkit-appearance: none;
  103. -moz-appearance: none;
  104. -ms-appearance: none;
  105. }
  106. input.form-control,
  107. textarea.form-control,
  108. select.form-control,
  109. .help-block {
  110. font-size: initial;
  111. }
  112. @media only screen and (max-width: 768px) {
  113. .help-block {
  114. font-size: unset;
  115. }
  116. }
  117. html {
  118. font-size: 13px;
  119. }
  120. .hack .form input,
  121. .hack .form textarea,
  122. .hack .form button,
  123. .hack .form label {
  124. font-size: 1rem;
  125. }
  126. .hack .alert .highlight:first-of-type .chroma,
  127. .hack .card .highlight:first-of-type .chroma,
  128. .hack .alert pre:first-of-type,
  129. .hack .alert p:first-of-type,
  130. .hack .card pre:first-of-type,
  131. .hack .card p:first-of-type {
  132. margin-top: unset;
  133. }
  134. .hack .alert .highlight:last-of-type .chroma,
  135. .hack .card .highlight:last-of-type .chroma,
  136. .hack .alert pre:last-of-type,
  137. .hack .alert p:last-of-type,
  138. .hack .card pre:last-of-type,
  139. .hack .card p:last-of-type {
  140. margin-bottom: unset;
  141. }
  142. .hack blockquote,
  143. .hack blockquote:after {
  144. line-height: 1.5;
  145. }
  146. .hack figure,
  147. .standard figure {
  148. margin: unset;
  149. }
  150. .hack figure a {
  151. border-bottom: none;
  152. }
  153. .hack figure a:hover {
  154. background-color: inherit;
  155. }
  156. article header img {
  157. width: 100%;
  158. border-radius: 3px;
  159. }
  160. table td, table th {
  161. line-height: inherit;
  162. }
  163. table a {
  164. border-bottom: unset;
  165. }
  166. img {
  167. max-width: 100%;
  168. }
  169. @media only screen and (min-width: 768px) {
  170. html {
  171. font-size: 16px;
  172. }
  173. .container {
  174. max-width: 50rem;
  175. }
  176. }
  177. @media only screen and (min-width: 768px), (-ms-high-contrast: active), (-ms-high-contrast: none) {
  178. /* @see http://browserhacks.com/#hack-28f493d247a12ab654f6c3637f6978d5 */
  179. html {
  180. margin-left: calc(100vw - 100%); /* @see https://aykevl.nl/2014/09/fix-jumping-scrollbar */
  181. }
  182. }