The documentation for Plume.
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.
 
 
 
 

426 lines
6.6 KiB

  1. $plume: #7765e3;
  2. $plumedark: #6457a6;
  3. $gray: #F4F4F4;
  4. $black: invert($gray);
  5. @import url('https://fonts.googleapis.com/css?family=Playfair+Display');
  6. :root {
  7. --lang-switcher-margin: 2vw;
  8. --lang-switcher-width: 2em;
  9. }
  10. html, body {
  11. padding: 0px;
  12. margin: 0px;
  13. color: $black;
  14. }
  15. h1, h2, h3 {
  16. font-family: 'Playfair Display';
  17. }
  18. header {
  19. grid-area: head;
  20. margin: 0;
  21. padding: 10vh 5vw;
  22. background: linear-gradient(0deg, $plumedark, $plume);
  23. color: white;
  24. font-size: 1.5em;
  25. .language-switcher {
  26. position: absolute;
  27. top: var(--lang-switcher-margin);
  28. right: var(--lang-switcher-margin);
  29. margin: 0;
  30. padding: 0;
  31. line-height: 1;
  32. }
  33. }
  34. body {
  35. display: grid;
  36. grid-template-columns: repeat(5, 1fr);
  37. grid-template-rows: min-content 1fr min-content;
  38. grid-template-areas:
  39. "menu head head head head"
  40. "menu cont cont cont cont"
  41. "menu foot foot foot foot";
  42. }
  43. body > main > nav, body > main > nav ul {
  44. padding: 0;
  45. li {
  46. padding: 0;
  47. }
  48. }
  49. nav {
  50. background: $gray;
  51. img {
  52. display: inline;
  53. height: 2em;
  54. width: 2em;
  55. }
  56. ul {
  57. list-style: none;
  58. padding: 0px;
  59. margin: 0px;
  60. display: grid;
  61. grid: 1fr / auto-flow;
  62. li {
  63. a {
  64. padding: 2em 0em;
  65. transition: all ease-in 0.2s;
  66. }
  67. }
  68. }
  69. }
  70. main nav li {
  71. display: flex;
  72. align-items: stretch;
  73. justify-items: stretch;
  74. a {
  75. flex: 1;
  76. display: flex;
  77. align-items: center;
  78. justify-content: center;
  79. border-bottom: 2px solid transparent;
  80. &:hover {
  81. border-bottom-color: $plume;
  82. }
  83. img {
  84. margin: 0px 20px;
  85. }
  86. }
  87. }
  88. a, a:visited {
  89. text-decoration: none;
  90. color: $plume;
  91. }
  92. footer {
  93. padding: 5em 5vw;
  94. background: $gray;
  95. text-align: center;
  96. grid-area: foot;
  97. }
  98. .highlight {
  99. padding-top: 1em;
  100. padding-bottom: 1em;
  101. overflow-x: auto;
  102. white-space: pre-line;
  103. }
  104. body > main {
  105. grid-area: cont;
  106. line-height: 1.7;
  107. ul {
  108. padding: 0 7.5vw;
  109. li {
  110. padding: 0.5em 0;
  111. }
  112. }
  113. }
  114. aside {
  115. grid-area: menu;
  116. background: $black;
  117. box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
  118. z-index: 2;
  119. svg {
  120. display: none;
  121. }
  122. nav {
  123. padding: 0px;
  124. height: 100%;
  125. overflow-y: auto;
  126. & > a {
  127. font-weight: bold;
  128. font-size: 1.2em;
  129. padding: 2em;
  130. display: flex;
  131. justify-content: space-between;
  132. align-items: center;
  133. }
  134. ul {
  135. display: block;
  136. text-transform: none;
  137. font-weight: 400;
  138. list-style: none;
  139. padding: 0px;
  140. margin: 0px;
  141. li {
  142. display: inline;
  143. & > a, & > details {
  144. display: block;
  145. border-bottom: none;
  146. }
  147. & > a, & > details > summary {
  148. margin: 2em;
  149. }
  150. & > details > summary {
  151. display: flex;
  152. justify-content: space-between;
  153. align-items: center;
  154. svg {
  155. display: block;
  156. transition: transform 0.1s ease-in;
  157. }
  158. }
  159. & > details[open] > summary svg {
  160. transform: rotate(-90deg);
  161. }
  162. & > a, & > details > summary > a {
  163. opacity: 0.6;
  164. padding: 0px;
  165. &:hover {
  166. opacity: 1;
  167. }
  168. }
  169. }
  170. }
  171. & > ul {
  172. text-transform: uppercase;
  173. font-weight: 800;
  174. }
  175. & > ul > li > ul {
  176. font-weight: 600;
  177. & > li > a {
  178. padding: 1.5em;
  179. padding-left: 3em;
  180. }
  181. }
  182. & > ul > li > ul > li > ul > li > a {
  183. padding: 1em;
  184. padding-left: 4em;
  185. }
  186. details > ul > li > * {
  187. padding-left: 1em;
  188. }
  189. }
  190. }
  191. main > article {
  192. padding: 3em 0em;
  193. img {
  194. max-width: 90%;
  195. display: block;
  196. margin: 2em auto;
  197. }
  198. hr {
  199. margin: 4em auto;
  200. border: none;
  201. background: $black;
  202. height: 1px;
  203. max-width: 5em;
  204. }
  205. }
  206. main > article > * {
  207. padding: 0 5vw;
  208. }
  209. .choices {
  210. display: flex;
  211. flex-wrap: wrap;
  212. justify-items: stretch;
  213. list-style: none;
  214. padding: 2em 5vw;
  215. & > li {
  216. flex: 1;
  217. a {
  218. text-align: center;
  219. border-radius: 5px;
  220. display: block;
  221. padding: 2em;
  222. transition: all ease-in 0.2s;
  223. &:hover {
  224. background: $gray;
  225. }
  226. }
  227. }
  228. }
  229. .cards {
  230. display: grid;
  231. grid: auto-flow / 1fr 1fr;
  232. grid-column-gap: 30px;
  233. grid-row-gap: 30px;
  234. margin-top: 60px;
  235. article {
  236. background: $gray;
  237. min-height: 100px;
  238. padding: 20px;
  239. h2, svg {
  240. display: block;
  241. text-align: center;
  242. margin: 20px auto;
  243. max-width: 75%;
  244. }
  245. transition: all ease-in 0.2s;
  246. &:hover {
  247. box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  248. }
  249. }
  250. }
  251. a.action {
  252. text-align: center;
  253. display: block;
  254. padding: 20px;
  255. max-width: 200px;
  256. margin: 5em auto;
  257. border-radius: 5px;
  258. background: $plume;
  259. color: white;
  260. }
  261. @media screen and (max-width: 1000px) {
  262. main nav li a {
  263. padding: 15px 0px;
  264. }
  265. aside > svg {
  266. display: block;
  267. position: relative;
  268. top: 0;
  269. left: 100%;
  270. color: white;
  271. padding: 0.5em;
  272. margin: 0.5em;
  273. background: $black;
  274. border-radius: 5px;
  275. }
  276. body > main > article > * {
  277. padding: 0 5vw;
  278. }
  279. header {
  280. padding: 10vh 0vw;
  281. text-align: center;
  282. }
  283. .cards, body > main > nav ul {
  284. grid: auto-flow / 1fr;
  285. }
  286. aside {
  287. position: fixed;
  288. left: -100vw;
  289. top: 0;
  290. bottom: 0;
  291. width: 100vw;
  292. transition: all ease-in 0.2s;
  293. }
  294. aside.show {
  295. left: 0;
  296. svg {
  297. left: 0;
  298. }
  299. }
  300. body {
  301. grid-template-areas:
  302. "head head head head head"
  303. "cont cont cont cont cont"
  304. "foot foot foot foot foot";
  305. }
  306. }
  307. .language-switcher {
  308. position: relative;
  309. font-size: 1rem;
  310. [aria-haspopup] {
  311. display: block;
  312. width: var(--lang-switcher-width);
  313. padding: 0;
  314. line-height: 1;
  315. border: none;
  316. background: transparent;
  317. &:hover {
  318. opacity: 0.5;
  319. }
  320. &[aria-expanded="true"] {
  321. opacity: 0.5;
  322. }
  323. img {
  324. width: 100%;
  325. height: auto;
  326. }
  327. }
  328. [aria-hidden="true"] {
  329. display: none;
  330. }
  331. .languages {
  332. position: absolute;
  333. right: 0;
  334. list-style: none;
  335. margin: 0;
  336. padding: 0.5em 0;
  337. max-height: calc(90vh - var(--lang-switcher-margin) - var(--lang-switcher-width));
  338. overflow-y: scroll;
  339. overscroll-behavior: contain;
  340. border-radius: 0.1em;
  341. background: #ffffff;
  342. box-shadow: 0 0 16px -6px rgba(0, 0, 0, 0.6);
  343. }
  344. .language {
  345. padding: 0;
  346. a {
  347. display: block;
  348. box-sizing: border-box;
  349. width: 100%;
  350. height: 100%;
  351. padding: 0.5em 1em;
  352. border-left: solid 0.5em transparent;
  353. &:hover, &:focus {
  354. border-left-color: $plume;
  355. }
  356. }
  357. }
  358. }