Site web
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.

335 lines
5.2 KiB

3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
  1. @import "variables";
  2. @import "KNACSS";
  3. @import "fonts";
  4. body {
  5. font-family: 'Ubuntu';
  6. color: $text;
  7. background-color: $bg;
  8. }
  9. header {
  10. padding-top: 1rem;
  11. padding-bottom: 1rem;
  12. border-bottom: 1px solid $bg;
  13. position: fixed;
  14. top: 0;
  15. width: 100%;
  16. background: $text;
  17. color: $bg;
  18. font-size: 2rem;
  19. a {
  20. color: $bg;
  21. text-decoration: underline dashed;
  22. text-decoration-thickness: 1px;
  23. &:hover, &:focus {
  24. color: darken($bg, 20%);
  25. text-decoration: underline dashed;
  26. text-decoration-thickness: 1px;
  27. }
  28. }
  29. div.brand, nav {
  30. padding: 1rem;
  31. }
  32. }
  33. /* Navigation */
  34. nav[role="navigation"] input[type="checkbox"].menu {
  35. position: absolute;
  36. top: -9999px;
  37. left: -9999px;
  38. }
  39. nav[role="navigation"] label.menu {
  40. display: none;
  41. cursor: pointer;
  42. user-select: none;
  43. }
  44. @media screen and (max-width: 800px) {
  45. html, body {
  46. margin: 0;
  47. header .brand {
  48. font-size: 1.5rem;
  49. }
  50. }
  51. nav[role="navigation"] a {
  52. display: none;
  53. }
  54. nav[role="navigation"] label.menu {
  55. display: inline;
  56. width: 100%;
  57. margin-top: .5rem;
  58. }
  59. nav[role="navigation"] label.menu:after {
  60. position: absolute;
  61. right: 1.5rem;
  62. top: 1.5rem;
  63. content: "\2261";
  64. }
  65. nav[role="navigation"] input[type=checkbox].menu:checked ~ label:after {
  66. content: "\203A";
  67. }
  68. nav[role="navigation"] input[type=checkbox].menu:checked ~ a {
  69. display: block;
  70. font-size: 1.5rem;
  71. }
  72. .w50, .w60 {
  73. width: 90%;
  74. }
  75. .pal {
  76. padding: 1rem;
  77. }
  78. }
  79. section div.descriptions {
  80. border-radius: 2rem;
  81. }
  82. .content {
  83. section {
  84. min-height: 100vh;
  85. padding-top: 130px;
  86. display: flex;
  87. flex-direction: column;
  88. align-items: center;
  89. justify-content: center;
  90. > div {
  91. flex: 0 1 auto;
  92. }
  93. &:nth-child(even) {
  94. background-color: $text;
  95. color: $bg;
  96. a {
  97. color: $bg;
  98. &:focus, &:hover {
  99. color: lighten($bg, 20%);
  100. }
  101. }
  102. }
  103. }
  104. }
  105. #title {
  106. .logo {
  107. width: 300px;
  108. border-radius: 300px;
  109. background-color: $text;
  110. }
  111. }
  112. #festival {
  113. font-size: 2.5rem;
  114. }
  115. #infos {
  116. div.descriptions {
  117. margin-top: 3rem;
  118. div {
  119. border: 2px solid $text;
  120. border-radius: 1rem;
  121. }
  122. }
  123. }
  124. #association {
  125. a .logo-contact {
  126. text-decoration: none;
  127. }
  128. .logo-contact {
  129. max-width: 60px;
  130. }
  131. }
  132. #location {
  133. display: flex;
  134. padding: 5rem;
  135. & > div {
  136. flex: 1 1 auto;
  137. }
  138. & > img {
  139. object-fit: contain;
  140. align-self: flex-start;
  141. margin-left: 1rem;
  142. }
  143. }
  144. #contact svg, #sponsors img {
  145. max-width: 20rem;
  146. max-height: 20rem;
  147. background-color: $bg;
  148. padding: 1.5rem;
  149. border-radius: 3rem;
  150. }
  151. /* Modals */
  152. #modal-background {
  153. position: fixed;
  154. top: 0;
  155. left: 0;
  156. width: 100%;
  157. height: 100%;
  158. background-color: rgba(0, 0, 0, .4);
  159. color: $bg;
  160. display: none;
  161. a {
  162. color: $bg;
  163. &:focus, &:hover {
  164. color: darken($bg, 20%);
  165. }
  166. }
  167. &.show {
  168. display: block;
  169. }
  170. .close {
  171. position: absolute;
  172. right: 0;
  173. top: 0;
  174. width: 50px;
  175. height: 50px;
  176. text-align: center;
  177. margin: 5px 10px;
  178. font-size: 3rem;
  179. border-radius: $modal-radius;
  180. cursor: pointer;
  181. &:hover {
  182. background-color: #aaa;
  183. }
  184. }
  185. }
  186. a.donate {
  187. img {
  188. height: 51px;
  189. width: 148px;
  190. }
  191. &:focus, &:hover {
  192. border: none;
  193. }
  194. }
  195. progress {
  196. width: 50%;
  197. height: 2em;
  198. margin: .5em 0;
  199. border: 3px solid white;
  200. border-radius: 5px;
  201. background-color: black;
  202. &::-webkit-progress-bar {
  203. border-radius: 5px;
  204. }
  205. &::-webkit-progress-value {
  206. border-radius: 5px;
  207. background-color: $progress;
  208. background-image: -webkit-linear-gradient(-45deg, transparent 25%, rgba(255, 255, 255, 0.3) 25%, rgba(255, 255, 255, 0.3) 50%, transparent 50%, transparent 75%, rgba(255, 255, 255, 0.3) 75%, rgba(255, 255, 255, 0.3));
  209. background-image: linear-gradient(-45deg, transparent 25%, rgba(255, 255, 255, 0.3) 25%, rgba(255, 255, 255, 0.3) 50%, transparent 50%, transparent 75%, rgba(255, 255, 255, 0.3) 75%, rgba(255, 255, 255, 0.3));
  210. background-size: 40px 40px;
  211. }
  212. &::-moz-progress-bar {
  213. border-radius: 5px;
  214. background-color: $progress;
  215. background-image: linear-gradient(-45deg, transparent 25%, rgba(255, 255, 255, 0.3) 25%, rgba(255, 255, 255, 0.3) 50%, transparent 50%, transparent 75%, rgba(255, 255, 255, 0.3) 75%, rgba(255, 255, 255, 0.3));
  216. background-size: 40px 40px;
  217. }
  218. }
  219. [data-modal] {
  220. position: fixed;
  221. width: 75%;
  222. height: 75%;
  223. top: 50%;
  224. left: 50%;
  225. transform: translate(-50%, -50%);
  226. border: 1px solid $bg;
  227. border-radius: $modal-radius;
  228. padding: $modal-radius;
  229. background-color: $text;
  230. transition: opacity linear 500ms, visibility 500ms linear;
  231. overflow: auto;
  232. &.hide {
  233. visibility: hidden;
  234. opacity: 0;
  235. }
  236. &.show {
  237. visibility: visible;
  238. opacity: 1;
  239. z-index: 2;
  240. }
  241. }
  242. @media screen and (max-width: 800px) {
  243. #festival {
  244. font-size: inherit;
  245. }
  246. [data-modal] {
  247. border-radius: 2rem;
  248. padding: 2rem;
  249. padding-top: 4rem;
  250. }
  251. #contact svg, #sponsors img {
  252. max-width: 10rem;
  253. max-height: 10rem;
  254. padding: 1rem;
  255. border-radius: 1rem;
  256. }
  257. }
  258. #needs {
  259. .list {
  260. display: flex;
  261. & > ul {
  262. flex: 1 1 auto;
  263. align-self: center;
  264. }
  265. & > img {
  266. object-fit: contain;
  267. align-self: flex-start;
  268. }
  269. }
  270. }
  271. @media screen and (max-width: 800px) {
  272. #needs {
  273. .list {
  274. display: block;
  275. & > ul {
  276. padding-top: 1rem;
  277. }
  278. }
  279. }
  280. #location {
  281. display: block;
  282. padding: 2rem;
  283. padding-top: 4rem;
  284. & > img {
  285. margin: 0;
  286. padding-bottom: 2rem;
  287. }
  288. }
  289. }