From 2c37d9e58cc42b90e944f0d3ae9108c9e805fefd Mon Sep 17 00:00:00 2001 From: Florian Dieminger <me@fiji-flo.de> Date: Wed, 31 Jan 2024 23:39:35 +0100 Subject: [PATCH] module grid --- .../assets/curriculum/cur-landing-top.svg | 166 +++++++++++++++++ client/src/curriculum/index.tsx | 18 +- client/src/curriculum/module.scss | 1 + client/src/curriculum/modules-list.scss | 175 +++++++++++++----- client/src/curriculum/modules-list.tsx | 16 +- client/src/curriculum/no-side.scss | 23 +++ client/src/curriculum/overview.scss | 16 ++ client/src/curriculum/overview.tsx | 13 +- client/src/ui/base/_themes.scss | 4 +- client/src/ui/molecules/breadcrumbs/index.tsx | 6 +- 10 files changed, 371 insertions(+), 67 deletions(-) create mode 100644 client/public/assets/curriculum/cur-landing-top.svg create mode 100644 client/src/curriculum/no-side.scss create mode 100644 client/src/curriculum/overview.scss diff --git a/client/public/assets/curriculum/cur-landing-top.svg b/client/public/assets/curriculum/cur-landing-top.svg new file mode 100644 index 000000000000..95c1b01fd2ec --- /dev/null +++ b/client/public/assets/curriculum/cur-landing-top.svg @@ -0,0 +1,166 @@ +<svg width="499" height="488" viewBox="0 0 499 488" fill="none" xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <g clip-path="url(#clip0_2804_1038)"> + <path + d="M180.605 87.5063C203.887 75.8858 211.279 72.454 237.391 70.9523C247.648 70.3625 254.75 69.141 264.855 70.9542C280.361 73.7365 299.325 81.5535 312.009 90.729C323.927 99.3502 327.837 100.686 337.918 109.493C350.887 120.822 357.407 128.945 366.418 143.471C376.606 159.893 381.519 171.424 382.828 190.572C383.942 206.869 379.427 215.896 375.606 231.798C372.451 244.928 371.496 252.689 365.804 264.98C356.588 284.882 346.086 293.328 330.725 309.223C319.286 321.058 313.183 328.427 299.256 337.378C274.464 353.311 256.215 359.171 226.518 358.996C197.399 358.824 179.446 353.281 155.328 337.378C136.437 324.921 127.063 314.869 115.605 295.649C96.7538 264.026 95.4148 239.356 100.645 203.141C105.56 169.108 114.535 148.97 137.272 122.699C151.475 106.289 160.999 97.2924 180.605 87.5063Z" + fill="#FEF9F4" /> + <rect y="141" width="565" height="347" fill="url(#pattern0)" /> + <path d="M162.947 283.681L211.91 274.898L210.701 296.332L204.72 316.929L163.092 317.109L162.947 283.681Z" + fill="#FEF9F4" /> + <path + d="M263.313 481.062C265.047 480.853 264.695 480.208 266.429 480L273.55 480.531L280.671 481.062C280.671 481.062 280.645 480.703 287.594 481.062C296.948 481.545 302.263 482.302 311.569 481.062C316.64 480.386 320.892 481.065 322.668 481.065C324.444 481.065 324.444 481.062 322.668 482.661C320.892 484.261 315.911 483.443 311.569 483.728C302.22 484.34 287.594 483.728 287.594 483.728L267.615 482.661C267.615 482.661 261.579 481.27 263.313 481.062Z" + fill="url(#paint0_linear_2804_1038)" /> + <path + d="M328.308 480.062C330.013 479.853 329.667 479.208 331.372 479L345.382 480.062C345.382 480.062 345.356 479.703 352.191 480.062C361.391 480.545 366.619 481.302 375.772 480.062C380.76 479.386 384.943 480.065 386.69 480.065C388.437 480.065 388.437 480.062 386.69 481.661C384.943 483.261 380.043 482.443 375.772 482.728C366.577 483.34 352.191 482.728 352.191 482.728L332.539 481.661C332.539 481.661 326.602 480.27 328.308 480.062Z" + fill="url(#paint1_linear_2804_1038)" /> + <path + d="M212.127 314.291L211.506 314.129L211.501 314.771L212.001 314.775C211.501 314.771 211.501 314.771 211.501 314.771L211.501 314.772L211.501 314.774L211.5 314.781L211.5 314.81L211.5 314.921C211.5 315.018 211.5 315.161 211.501 315.345C211.504 315.713 211.51 316.246 211.527 316.906C211.56 318.226 211.632 320.058 211.791 322.105C212.106 326.181 212.765 331.172 214.159 334.658C216.465 340.425 218.719 343.476 223.195 347.79C226.544 351.018 231.154 353.041 236.14 354.273C241.13 355.507 246.535 355.958 251.513 356.015C256.494 356.071 261.062 355.733 264.384 355.381C266.046 355.205 267.397 355.025 268.334 354.89C268.687 354.838 268.981 354.794 269.211 354.757V403.411C269.211 405.814 271.185 407.343 273.574 408.32C275.997 409.311 279.07 409.835 281.723 410.128C284.711 410.457 288.059 410.738 290.87 410.191C293.707 409.638 296.089 408.217 296.95 405.099C300.119 393.62 300.51 379.564 300.116 368.405C299.919 362.82 299.524 357.95 299.179 354.476C299.007 352.738 298.846 351.349 298.729 350.394C298.691 350.083 298.657 349.817 298.629 349.601L325.954 354.6L329.55 371.346L332.171 405.005L332.192 405.275L332.43 405.405L332.669 404.966C332.43 405.405 332.43 405.405 332.43 405.405L332.43 405.405L332.432 405.406L332.438 405.409L332.459 405.421L332.541 405.464C332.612 405.502 332.717 405.558 332.853 405.628C333.125 405.768 333.518 405.967 334.011 406.205C334.995 406.68 336.374 407.309 337.956 407.924C341.1 409.147 345.123 410.351 348.442 410.13C351.156 409.949 354.373 408.75 356.874 407.623C358.133 407.056 359.226 406.501 360.004 406.087C360.393 405.88 360.705 405.708 360.919 405.588C361.026 405.528 361.109 405.48 361.165 405.448L361.23 405.41L361.247 405.401L361.251 405.398L361.253 405.397L361.253 405.397C361.253 405.397 361.253 405.397 361 404.966L361.253 405.397L361.523 405.239L361.498 404.927L357.827 358.29L357.827 358.289L357.827 358.287L357.826 358.277L357.826 358.276L357.824 358.241C357.822 358.209 357.82 358.162 357.816 358.101C357.808 357.978 357.797 357.798 357.78 357.567C357.745 357.105 357.69 356.437 357.605 355.612C357.434 353.964 357.143 351.685 356.663 349.164C355.708 344.148 353.986 338.083 350.9 334.163C347.151 329.4 340.237 325.342 334.329 322.489C331.364 321.056 328.63 319.917 326.638 319.137C325.641 318.746 324.83 318.445 324.267 318.241C323.985 318.139 323.766 318.062 323.616 318.009C323.541 317.983 323.484 317.963 323.445 317.95L323.401 317.935L323.39 317.931L323.387 317.93L323.386 317.93C323.386 317.93 323.386 317.93 323.228 318.395L323.386 317.93L323.378 317.927L287.702 306.524L286.752 306.22L287.077 307.163C287.224 307.592 287.075 308.223 286.303 309.07C285.547 309.897 284.291 310.815 282.55 311.748C279.075 313.61 273.777 315.478 267.015 316.817C253.499 319.495 234.208 320.048 212.127 314.291Z" + fill="#94B1EB" stroke="#94B1EB" /> + <path + d="M287 326.069C287 326.069 290.226 325.481 293.858 327.744C298.594 330.694 299.537 350.56 300.5 365.5C301.065 374.269 300.5 388 300.5 388C300.5 388 299.5 403.5 297 407C294.5 410.5 291.5 410 291.5 410" + stroke="#2D2D2F" /> + <path d="M261 281L233 283.708L259.444 294L261 281Z" fill="#924A3B" /> + <path + d="M266.371 231.896C266.431 231.387 266.866 231.006 267.379 231.014L352.892 232.323C353.485 232.333 353.939 232.852 353.87 233.441L346.692 294H321.637L317.462 280.711C317.462 280.711 314.852 279.117 314.852 280.711C314.852 282.306 316.418 291.342 316.418 291.342H315.374L311.198 274.333C311.198 274.333 310.185 273.463 309.632 273.801C309.241 274.04 309.11 274.864 309.11 274.864C309.11 274.864 309.077 274.228 308.588 273.801C307.969 273.261 307.24 273.452 306.5 273.801C305.009 274.505 306.5 278.054 306.5 278.054C306.5 278.054 305.456 277.522 304.412 278.054C303.368 278.585 303.89 282.306 303.89 282.306H302.324V293.468L259 294L266.371 231.896Z" + fill="#E3642A" /> + <path + d="M301.616 293.28C301.616 293.28 301.049 293.207 300.699 293.28C299.126 293.607 300.699 297.14 300.699 297.14L305.284 298.856L310.786 301H318.122L325 293.709L322.249 293.28L318.122 280.843C318.122 280.843 314.913 277.842 314.913 279.985C314.913 282.127 316.288 290.707 316.288 290.707H315.371L310.786 273.98C310.786 273.98 310.219 273.908 309.869 273.98C309.479 274.061 309.409 274.405 308.952 274.407C308.494 274.409 309.411 273.554 308.035 273.123C306.66 272.692 305.929 273.461 305.284 274.409C304.398 275.712 306.201 278.269 306.201 278.269C306.201 278.269 304.371 277.752 303.45 278.269C301.915 279.131 303.45 282.558 303.45 282.558C303.45 282.558 301.616 280.845 301.616 282.558C301.616 284.272 301.616 293.28 301.616 293.28Z" + fill="#F5CAC1" /> + <path + d="M270.059 181.265C265.301 195.571 264.435 197.306 252.322 202.075C241.506 198.173 236.747 196.874 235.449 180.398C238.91 163.925 249.015 159.156 258.811 159.156C264.868 162.191 270.925 166.093 270.059 181.265Z" + fill="#ECAFA3" /> + <path + d="M239.776 195.57L261.407 197.738C261.407 197.738 261.407 207.276 264.868 212.045C268.329 216.814 266.599 231.987 266.599 231.987L222.471 215.947C222.471 215.947 229.479 207.796 234.152 204.675C238.045 202.073 239.776 195.57 239.776 195.57Z" + fill="#ECAFA3" /> + <path d="M247.996 189.07C252.042 192.051 254.468 192.923 259.244 192.105" stroke="black" stroke-linecap="round" + stroke-linejoin="round" /> + <path + d="M254.053 187.335H259.245L258.812 177.364C259.488 176.686 259.955 175.892 260.542 175.196C261.274 174.329 261.515 174.27 262.273 173.895C264.091 172.997 267.464 173.895 267.464 173.895L268.33 176.063M244.103 175.63C244.103 175.63 246.106 174.294 247.564 173.895C249.52 173.361 250.86 173.174 252.755 173.895C254.114 174.412 255.783 176.063 255.783 176.063M247.996 179.098C250.087 177.892 251.209 178.14 252.755 179.098M243.67 197.74C243.67 197.74 248.266 201.915 251.89 202.075C253.777 202.159 256.649 201.208 256.649 201.208" + stroke="black" stroke-linecap="round" stroke-linejoin="round" /> + <ellipse cx="263.572" cy="179.098" rx="1.29808" ry="1.30081" fill="#0F0F0F" /> + <ellipse cx="236" cy="179" rx="4" ry="7" fill="#ECAFA3" /> + <path fill-rule="evenodd" clip-rule="evenodd" + d="M249.789 146.513C247.647 143.245 242.883 141.863 238.268 143.423C232.956 145.218 229.852 150.231 231.335 154.619C231.84 156.113 232.812 157.342 234.084 158.242C232.311 161.62 231.299 165.436 231.299 169.303C231.299 171.281 231.335 173.829 232.182 174.157C233.734 174.157 234.734 173.828 235.591 173.249L235.713 173.273C235.713 173.273 236.989 182.463 234.83 188.281C234.706 188.615 234.592 188.937 234.48 189.252C233.988 190.642 233.553 191.869 232.623 193.136C230.807 195.611 225.561 198.875 225.561 198.875C225.561 198.875 230.112 198.584 231.74 197.992C234.956 196.823 236.165 194.53 237.479 191.371C237.96 190.212 238.361 188.281 238.361 188.281V179.011C238.361 177.622 240.127 175.922 240.127 175.922L241.859 167.695C242.169 167.476 242.489 167.251 242.818 167.023L255.675 159.918C257.091 159.436 258.409 159.152 259.549 159.151C261.31 159.151 262.472 160.946 263.553 162.617C264.128 163.506 264.681 164.359 265.288 164.888C266.621 166.052 267.755 167.3 268.711 168.42C269.059 168.828 269.383 169.219 269.685 169.583L269.685 169.583L269.685 169.583C269.877 169.814 270.059 170.033 270.233 170.24C270.481 171.286 270.566 172.895 270.215 175.367C269.26 182.106 269.332 184.637 269.332 184.637C269.332 184.637 270.584 182.547 271.467 181.223C272.215 180.101 272.064 173.821 272.001 171.932C272.759 172.226 273.084 171.127 273.084 167.543C273.084 164.715 272.536 162.017 271.542 159.551C274.145 158.807 276.229 157.069 277.057 154.619C278.54 150.231 275.437 145.218 270.125 143.423C265.175 141.75 260.055 143.461 258.18 147.252C256.267 146.67 254.238 146.357 252.137 146.357C251.343 146.357 250.56 146.41 249.789 146.513Z" + fill="black" /> + <path d="M259.59 155L261.436 158.569L263 161L259 159.369L260.461 158.569L259.59 155Z" fill="#ECAFA3" /> + <path d="M249.524 241.159L257.011 227.628L248.498 225.729L249.524 241.159Z" fill="#EDDBDB" /> + <path + d="M212.449 267.696L210.877 252.941L205.5 259.5H210.353L209.177 268.25L207.5 275L185.5 285.5C185.5 285.5 180.127 288.497 177 286.5C173.886 284.511 173 281.924 173 281.924L177 259.5L181.5 244.5C181.5 244.5 190.25 223.718 201.445 216.053C208.192 211.433 212.03 209.533 219.5 207C225.557 204.946 235.5 203.5 235.5 203.5L244.416 209.202C244.416 209.202 248.167 213.716 249.657 217.107C253.174 225.109 249.657 239.488 249.657 239.488C249.657 239.488 254.216 227.185 255.135 223.598C256.003 220.21 257.517 209.202 257.517 209.202L262 207L273.763 208.148C273.763 208.148 283.219 211.427 287.912 215.526C293.752 220.626 298.393 232.389 298.393 232.389H266.426L260.662 280.87L234.049 283.303C233.518 283.351 233.422 284.086 233.922 284.27L259.09 293.517L288.96 292.99L288.436 309.326C287.599 318.485 239.176 324.081 210.353 314.069L211.401 281.924V273L212.449 267.696Z" + fill="#F9CFA6" /> + <path + d="M174.239 286.157C168.525 277.223 177.77 259.232 177.77 259.232C177.77 259.232 184.499 258.554 188.805 258.787C193.334 259.031 200.282 260.556 200.282 260.556L211.317 257.466C211.422 257.149 211.67 256.408 212.2 254.818C213.524 250.848 216.173 249.522 216.173 249.522C216.173 249.522 217.938 243.558 220.587 242.901C223.235 242.244 223.235 243.635 223.235 246.873C223.235 250.844 221.028 253.494 221.028 253.494L230.739 251.287C230.739 251.287 238.473 247.756 236.477 259.233C234.482 270.71 233.829 270.268 233.829 270.268C233.829 270.268 222.794 273.799 218.821 273.799C214.848 273.799 215 273 215 273L183.067 287.479C183.067 287.479 176.407 289.548 174.239 286.157Z" + fill="#ECAFA3" /> + <path + d="M270 429.497C270 429.497 276.998 428.79 280.909 429.062C284.731 429.328 290 430.788 290 430.788L288.636 441.107L270 451V429.497Z" + fill="#F7F7F7" /> + <path + d="M337 427.336C337 427.336 343.089 425.758 347 426.032C350.822 426.3 357 428.636 357 428.636L356.091 440.33L337 449V427.336Z" + fill="#F7F7F7" /> + <path + d="M271.467 445.627V451.365C271.467 451.365 272.158 447.13 274.115 445.627C275.157 444.827 276.203 445.15 277.205 444.303C278.154 443.5 278.031 442.468 278.971 441.654C279.845 440.897 280.507 440.648 281.619 440.33C283.277 439.856 284.343 439.992 286.033 440.33C287.102 440.544 288.682 441.213 288.682 441.213C288.682 441.213 290.254 442.634 289.565 442.978C289.256 443.133 288.682 442.978 288.682 442.978C288.682 442.978 287.108 442.279 286.033 442.096C284.844 441.892 283.826 442.093 282.943 442.096C282.061 442.099 281.826 442.392 281.619 442.978C281.504 443.303 281.619 443.861 281.619 443.861V445.185L278.088 446.51L275.881 449.158L271.908 454.014L271.025 455.338V455.776L271.467 461.073C271.467 461.073 271.908 462.839 273.674 462.839C275.44 462.839 276.764 461.956 276.764 461.956L287.358 462.839L299.276 468.136C299.276 468.136 307.662 469.46 308.987 469.46C310.311 469.46 304.131 467.253 304.131 467.253V464.604H312.518V466.37H315.608L316.932 465.487C316.932 465.487 319.1 464.773 320.463 465.046C322.39 465.431 323.516 466.399 324.436 468.136C325.484 470.116 325.094 471.732 324.436 473.874C323.677 476.346 320.463 479.171 320.463 479.171L306.338 482.702H294.42L269.26 480.054L263.08 478.288V469.018C263.08 469.018 264.846 466.811 267.053 467.694C269.26 468.577 276.242 473.978 283.826 478.288L305.014 480.054L316.932 476.081V472.55L310.311 475.198H301.041V474.315L286.916 466.37C286.916 466.37 283.826 465.046 282.502 465.487C281.225 465.913 281.428 467.409 280.295 468.136C278.263 469.438 274.115 468.136 274.115 468.136C274.115 468.136 272.145 467.497 271.025 466.811C270.29 466.362 269.26 465.487 269.26 465.487V455.776L268.377 453.572V446.51L271.467 445.627Z" + fill="#7C6063" /> + <path + d="M263.08 469.024L268.377 453.133L269.26 455.781V465.492L278.971 468.582C278.971 468.582 281.178 464.609 282.943 464.609C284.709 464.609 285.389 465.35 286.916 465.934C292.909 468.224 301.041 474.32 301.041 474.32C301.924 475.645 306.452 475.251 309.869 474.762C312.73 474.352 314.283 472.996 316.932 472.555C319.58 472.113 321.346 473.438 316.932 476.086C312.518 478.734 309.89 479.576 305.014 480.5C296.672 482.081 291.403 481.086 283.385 478.293C275.706 475.618 265.729 467.258 265.729 467.258L263.08 469.024Z" + fill="#FFF8F8" /> + <path + d="M281.177 453.124C281.177 453.124 277.646 452.684 274.997 452.684C272.349 452.684 278.087 446.503 278.087 446.503C278.087 446.503 281.619 444.739 282.943 445.18C284.268 445.621 296.626 455.772 296.626 455.772C296.626 455.772 298.392 457.3 299.716 456.655C301.145 455.96 300.158 453.567 301.041 453.567C301.924 453.567 308.544 457.983 307.22 459.747C305.896 461.51 294.862 461.071 292.654 459.747C290.447 458.423 281.177 453.124 281.177 453.124Z" + fill="#F2DDD0" /> + <path + d="M281.619 457.538C281.619 457.538 272.791 454.89 271.908 454.448C271.025 454.007 270.584 457.98 270.584 457.98C273.687 459.876 274.998 461.952 278.529 462.835C282.061 463.718 283.5 464.366 286.033 463.277C287.395 462.691 288.074 461.981 288.682 460.628C289.176 459.527 288.682 457.097 288.682 457.097L283.826 454.449C283.826 454.449 284.448 456.475 283.826 457.097C283.205 457.719 281.619 457.538 281.619 457.538Z" + fill="#C9624B" /> + <path + d="M337.236 448.715L335.912 444.301L333.705 449.598L335.912 452.246L340.326 446.949L348.272 442.977L339.443 444.301L337.236 448.715Z" + fill="#7C6063" /> + <path + d="M328.85 464.164L329.732 465.93L328.85 463.723L340.326 475.641L351.361 478.731C351.361 478.731 362.148 481.404 369.018 480.496C372.002 480.102 373.777 479.968 376.522 478.731C378.571 477.807 381.377 475.641 381.377 475.641L380.494 470.785L373.432 473.434C373.432 473.434 367.252 472.992 365.928 472.11C364.604 471.227 353.568 463.281 351.361 462.84C349.154 462.399 340.326 464.164 340.326 464.164L335.029 462.84V457.984H335.912L337.236 460.191L341.65 458.867L351.361 460.191L367.252 468.137L376.522 469.02L369.018 466.813L368.135 464.164H373.432L379.17 466.813C379.17 466.813 383.262 465.602 385.35 466.813C386.725 467.61 387.354 468.449 387.998 469.902C388.906 471.951 388.83 473.56 387.998 475.641C386.703 478.882 380.494 480.496 380.494 480.496C380.494 480.496 369.228 482.334 361.955 482.262C348.026 482.123 327.084 474.758 327.084 474.758V469.02L328.85 464.164Z" + fill="#7C6063" /> + <path + d="M329.732 465.93L328.85 464.164L327.084 469.02V474.758C327.084 474.758 348.026 482.123 361.955 482.262C369.228 482.334 380.494 480.496 380.494 480.496C380.494 480.496 386.703 478.882 387.998 475.641C388.83 473.56 388.906 471.951 387.998 469.902C387.354 468.449 386.725 467.61 385.35 466.813C383.262 465.602 379.17 466.813 379.17 466.813C376.929 465.778 375.673 465.198 373.432 464.164H368.135L369.018 466.813L376.522 469.02L367.252 468.137L351.361 460.191L341.65 458.867L337.236 460.191L335.912 457.984H335.029V462.84L340.326 464.164C340.326 464.164 349.154 462.399 351.361 462.84C353.568 463.281 364.604 471.227 365.928 472.11C367.252 472.992 373.432 473.434 373.432 473.434L380.494 470.785L381.377 475.641C381.377 475.641 378.571 477.807 376.522 478.731C373.777 479.968 372.002 480.102 369.018 480.496C362.148 481.404 351.361 478.731 351.361 478.731C351.361 478.731 344.636 476.847 340.326 475.641M329.732 465.93C329.732 465.93 336.189 471.848 340.326 475.641M329.732 465.93L328.85 463.723C328.85 463.723 335.844 470.986 340.326 475.641M335.912 444.301L337.236 448.715L339.443 444.301L348.272 442.977L340.326 446.949L335.912 452.246L333.705 449.598L335.912 444.301Z" + stroke="#7C6063" /> + <path + d="M301.481 453.124C301.04 451.8 294.86 445.179 292.653 444.296C290.446 443.413 284.362 446.062 284.707 446.503C285.053 446.944 286.032 447.386 286.032 447.386C286.032 447.386 290.581 444.919 292.653 446.503C293.04 446.799 293.977 447.386 293.536 447.386C293.094 447.386 287.28 448.365 287.797 448.71L289.122 449.593C289.639 449.938 295.743 448.71 295.743 448.71L297.067 450.476L291.329 451.8C291.329 451.8 291.77 453.566 292.653 453.124C293.536 452.683 297.95 451.8 297.95 451.8L300.157 455.773C300.157 455.773 301.922 454.449 301.481 453.124Z" + fill="#393765" /> + <path + d="M367.264 451.982C366.823 450.658 360.643 444.036 358.436 443.154C356.229 442.271 349.689 443.857 350.035 444.298C350.38 444.739 351.815 446.244 351.815 446.244C351.815 446.244 356.364 443.776 358.436 445.361C358.823 445.657 360.657 446.244 359.319 446.244C357.98 446.244 352.608 446.603 353.125 446.947C353.642 447.292 354.388 448.106 354.905 448.451C355.422 448.795 361.512 448.27 361.512 448.27L361.953 448.712L356.215 449.595C356.215 449.595 357.553 452.423 358.436 451.982C359.319 451.54 362.836 450.919 362.836 450.919L365.043 454.891C365.043 454.891 367.706 453.306 367.264 451.982Z" + fill="#393765" /> + <path + d="M329.289 465.926L334.145 448.711L335.91 452.242L335.027 462.836L340.766 464.16C340.766 464.16 344.738 463.277 346.504 463.277C348.27 463.277 349.832 462.694 351.359 463.277C357.352 465.568 365.485 472.106 365.485 472.106C366.367 473.43 370.294 473.678 373.43 473.43C376.31 473.202 375.196 473.43 380.492 471.223C385.789 469.016 381.375 475.637 381.375 475.637C381.375 475.637 378.31 477.859 376.078 478.727C373.305 479.805 368.574 480.051 368.574 480.051C368.574 480.051 353.198 480.195 345.18 477.402C337.501 474.728 329.289 465.926 329.289 465.926Z" + fill="#FFF8F8" /> + <path + d="M346.504 454.929C346.504 454.929 337.676 452.28 336.793 451.839C335.91 451.398 335.469 455.37 335.469 455.37C338.572 457.266 339.883 459.343 343.414 460.226C346.945 461.108 348.384 461.757 350.918 460.667C352.28 460.081 352.958 459.371 353.566 458.019C354.061 456.918 353.566 454.488 353.566 454.488L348.711 451.839C348.711 451.839 349.333 453.866 348.711 454.488C348.089 455.109 346.504 454.929 346.504 454.929Z" + fill="#C9624B" /> + <path + d="M346.488 451.932C346.488 451.932 343.097 451.44 340.554 451.44C338.01 451.44 343.521 444.533 343.521 444.533C343.521 444.533 346.912 442.563 348.184 443.056C349.456 443.548 361.07 454.012 361.07 454.012C361.07 454.012 363.019 456.598 364.291 455.878C365.663 455.101 364.715 452.428 365.563 452.427C366.411 452.427 372.768 457.362 371.497 459.332C370.225 461.303 359.629 460.812 357.509 459.333C355.39 457.853 346.488 451.932 346.488 451.932Z" + fill="#F2DDD0" /> + <path + d="M235 204C235 204 241.388 206.19 244.5 209C248.908 212.98 250.251 216.694 251.5 222.5C252.902 229.016 250 239.5 250 239.5L254.5 227.5" + stroke="black" /> + <path fill-rule="evenodd" clip-rule="evenodd" + d="M14.8002 79.1677C18.0076 76.7653 22.1007 75.3306 25.8114 75.9194C29.6019 76.5208 32.6865 78.958 34.0266 82.2182C35.2542 85.205 33.6008 88.6313 32.3897 91.9241C31.2047 95.1459 30.3066 98.6838 27.23 100.697C24.014 102.801 20.0563 102.9 16.5128 102.312C12.8824 101.709 9.02635 100.534 7.65146 97.4459C6.3342 94.4869 8.73975 91.0331 10.0268 87.7424C11.2404 84.6394 11.9587 81.2961 14.8002 79.1677Z" + fill="#E9A98C" fill-opacity="0.5" /> + <path d="M5.60211 90.4427L5.03693 102.373L17.8095 98.1871M11.2244 84.1782L24.715 80.4474L23.4318 91.9225" + stroke="black" stroke-opacity="0.9" stroke-linecap="round" stroke-linejoin="round" /> + <path + d="M8.68567 89.4558L14.1909 92.3484L9.68232 87.7302C9.68232 87.7302 8.44885 87.7596 8.28467 88.3352C8.15874 88.7767 8.68567 89.4558 8.68567 89.4558Z" + fill="black" stroke="black" /> + <circle cx="16.9629" cy="93.7942" r="1.7215" transform="rotate(-30 16.9629 93.7942)" fill="black" /> + <path fill-rule="evenodd" clip-rule="evenodd" + d="M72.3256 341.288C76.0601 342.137 76.6317 347.669 77.0364 352.23C77.4377 356.753 77.8938 362.398 74.5438 366.29C71.2725 370.09 66.9306 368.106 62.9585 368.586C60.7028 368.859 58.6871 368.942 56.642 368.453C53.702 367.751 49.7606 368.36 48.7069 365.181C47.5651 361.735 48.8427 356.59 51.5191 352.996C54.0051 349.659 57.7961 350.433 61.0574 348.598C65.0289 346.363 68.7071 340.466 72.3256 341.288Z" + fill="#E9A98C" fill-opacity="0.5" /> + <path + d="M40.679 365.665C40.3165 365.841 40.0903 365.937 40.0903 365.937C40.0903 365.937 40.3123 365.827 40.679 365.665Z" + fill="black" /> + <path + d="M66.7157 352.359C68.2395 351.564 69.8726 349.33 69.8726 349.33C69.8726 349.33 67.9093 350.76 66.7157 352.359Z" + fill="black" /> + <path + d="M45.4938 353.424C45.4938 353.424 42.1106 354.423 41.0368 355.997C39.1385 358.779 46.7374 358.523 45.7103 361.518C44.8983 363.886 40.0903 365.937 40.0903 365.937C40.0903 365.937 43.7063 364.148 45.8672 364.363C49.3142 364.707 47.1773 370.888 50.795 370.325C52.7075 370.028 55.2521 367.752 55.2521 367.752M56.8907 347.431C56.8907 347.431 59.7226 341.54 61.0935 344.417C62.4645 347.294 63.2332 348.907 64.6041 351.784C65.9751 354.661 69.8726 349.33 69.8726 349.33C69.8726 349.33 66.3614 351.889 65.8753 353.986C65.2318 356.763 71.4254 356.799 69.7375 359.389C68.7018 360.978 65.2804 361.962 65.2804 361.962" + stroke="black" stroke-linecap="round" stroke-linejoin="round" /> + <circle cx="53.0348" cy="358.66" r="1.42996" transform="rotate(-30 53.0348 358.66)" fill="black" stroke="black" /> + <circle cx="59.9548" cy="353.916" r="0.786641" transform="rotate(-30 59.9548 353.916)" fill="black" + stroke="black" /> + </g> + <path fill-rule="evenodd" clip-rule="evenodd" + d="M472.727 74.1356C477.222 70.9077 483.478 68.8546 487.717 70.1854C491.69 71.4325 490.726 76.4093 491.553 80.0452C492.12 82.541 493.117 84.9492 491.706 87.7355C490.333 90.4453 487.218 92.3137 484.35 94.2667C480.94 96.5886 477.384 100.224 473.832 99.905C470.282 99.5863 470.603 95.4783 469.265 92.9127C468.001 90.4863 465.782 88.5709 466.342 85.535C467.073 81.57 468.599 77.1005 472.727 74.1356Z" + fill="#E9A98C" fill-opacity="0.5" /> + <path + d="M465.941 84.1869L461.534 92.5639L469.543 92.7124M470.542 77.2888L473.856 94.4645M473.864 79.6126L482.332 80.5565L478.456 87.5664" + stroke="black" stroke-opacity="0.8" stroke-linecap="round" stroke-linejoin="round" /> + <path fill-rule="evenodd" clip-rule="evenodd" + d="M253.078 13.9565C257.05 14.4866 260.977 16.3278 263.214 19.346C265.5 22.4293 265.996 26.329 264.67 29.5951C263.456 32.5873 259.876 33.8763 256.706 35.3796C253.605 36.8504 250.486 38.7479 246.88 38.0313C243.111 37.2822 240.215 34.5823 238.097 31.6814C235.927 28.7093 233.996 25.1708 235.176 22.003C236.307 18.9679 240.443 18.1859 243.666 16.7373C246.705 15.3712 249.559 13.4869 253.078 13.9565Z" + fill="#E9A98C" fill-opacity="0.5" /> + <path + d="M248.108 32.1097C248.108 32.1097 249.076 29.8493 250.36 29.0774C251.699 28.2722 254.269 28.5525 254.269 28.5525M248.108 32.1097L250.12 35.5941L256.281 32.0369L254.269 28.5525M248.108 32.1097C248.108 32.1097 247.361 30.02 246.358 29.0776C245.217 28.0073 242.637 27.376 242.637 27.376C242.637 27.376 239.9 26.3126 238.899 24.9144C237.128 22.4439 237.343 19.5375 239.356 16.9505C240.78 15.1205 242.307 14.5134 244.569 13.9406C246.604 13.4254 247.997 13.2319 249.852 13.9703C252.072 14.8536 252.902 16.3073 253.718 18.476C254.675 21.0213 252.902 22.8959 253.401 25.5887C253.621 26.7802 254.269 28.5525 254.269 28.5525" + stroke="black" stroke-opacity="0.8" /> + <path + d="M251.581 26.7965C250.113 23.3409 249.303 21.4153 250.685 19.8418C252.067 18.2683 250.17 20.2912 249.048 20.4065C248.282 20.4853 247.49 19.7965 247.325 18.6421C247.188 17.6835 247.401 17.4722 248.363 17.3774C248.592 17.3548 249.04 17.6576 249.206 18.0693C249.9 19.7846 247.307 20.4233 245.985 21.2363C244.921 21.8907 243.704 22.7072 242.595 21.7557C241.934 21.1883 241.978 20.5308 242.412 19.8981C242.91 19.1708 244.099 20.2522 244.481 21.2476C244.904 22.3479 246.162 23.0073 245.897 23.8205C245.633 24.6336 243.915 24.4689 244.417 24.5592C245.201 24.7004 246.417 24.2912 247.19 24.2768C248.863 24.2456 248.828 28.3857 248.828 28.3857" + stroke="black" stroke-opacity="0.8" /> + <path + d="M250.81 11.5589L254.398 5.09527M243.261 11.5251L241.486 6.27605M235.292 18.0082L228.793 16.5319M238.869 14.0608L235.211 9.89847" + stroke="black" stroke-opacity="0.8" /> + <path + d="M249.224 33.8037C249.879 33.0515 250.776 32.6109 251.577 32.4453M254.913 29.8914C253.964 30.0055 252.348 29.6852 250.539 31.3711M255.637 31.1467C255.637 31.1467 255.179 31.2184 254.92 31.3521C254.599 31.5173 254.431 31.665 254.226 31.9617" + stroke="black" stroke-opacity="0.8" /> + <path fill-rule="evenodd" clip-rule="evenodd" + d="M477.773 320.446C480.853 322.366 484.471 323.818 485.755 327.236C487.145 330.937 487.117 335.557 484.614 338.662C482.268 341.572 477.928 340.819 474.279 341.474C471.186 342.029 468.102 343.409 465.249 342.139C462.15 340.76 459.306 338.047 458.929 334.643C458.575 331.435 462.147 329.422 463.519 326.482C465.176 322.929 464.057 317.471 467.648 315.95C471.216 314.439 474.516 318.416 477.773 320.446Z" + fill="#E9A98C" fill-opacity="0.4" /> + <path + d="M458.934 327.55L456.798 333.79L464.218 333.956M462.881 325.271L470.613 325.814L468.166 331.678M469.118 337.247L476.849 337.79L479.02 325.41" + stroke="black" stroke-opacity="0.9" stroke-linecap="round" stroke-linejoin="round" /> + <defs> + <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1"> + <use xlink:href="#image0_2804_1038" transform="matrix(0.0015354 0 0 0.0025 0.303469 0)" /> + </pattern> + <linearGradient id="paint0_linear_2804_1038" x1="293.5" y1="480" x2="293.5" y2="484" gradientUnits="userSpaceOnUse"> + <stop stop-color="#6B6B6B" /> + <stop offset="1" stop-color="#D9D9D9" stop-opacity="0" /> + </linearGradient> + <linearGradient id="paint1_linear_2804_1038" x1="358" y1="479" x2="358" y2="483" gradientUnits="userSpaceOnUse"> + <stop stop-color="#6B6B6B" /> + <stop offset="1" stop-color="#D9D9D9" stop-opacity="0" /> + </linearGradient> + <clipPath id="clip0_2804_1038"> + <rect width="491" height="445" fill="white" transform="translate(0 43)" /> + </clipPath> + </defs> +</svg> diff --git a/client/src/curriculum/index.tsx b/client/src/curriculum/index.tsx index dc907b1c7ad4..2083ca1a3651 100644 --- a/client/src/curriculum/index.tsx +++ b/client/src/curriculum/index.tsx @@ -1,6 +1,7 @@ import useSWR from "swr"; import { Route, Routes } from "react-router-dom"; +import { ReactComponent as LandingSVG } from "../../public/assets/curriculum/cur-landing-top.svg"; import { HydrationData } from "../../../libs/types/hydration"; import { CurriculumDoc, ModuleData } from "../../../libs/types/curriculum"; import { HTTPError, RenderDocumentBody } from "../document"; @@ -13,6 +14,8 @@ import { CurriculumModuleOverview } from "./overview"; import { CurriculumModule } from "./module"; import "./index.scss"; +import "./no-side.scss"; + import { TopNavigation } from "../ui/organisms/top-navigation"; import { ArticleActionsContainer } from "../ui/organisms/article-actions-container"; import { topic2css, useDocTitle } from "./utils"; @@ -25,7 +28,7 @@ export function Curriculum(appProps: HydrationData) { path="/:module" element={<CurriculumModuleOverview {...appProps} />} /> - <Route path="/*" element={<CurriculumModule {...appProps} />} /> + <Route path="/:module/*" element={<CurriculumModule {...appProps} />} /> </Routes> ); } @@ -66,29 +69,22 @@ export function CurriculumLanding(props: HydrationData<any, CurriculumDoc>) { <ArticleActionsContainer doc={doc} /> </div> <main - className={`curriculum-content-container container topic-${topic2css(doc.topic)}`} + className={`curriculum-content-container container curriculum-no-side topic-${topic2css(doc.topic)}`} > <div className="sidebar-container"> <div className="toc-container"> - <aside className="toc"> - <nav> - {doc.toc && !!doc.toc.length && <TOC toc={doc.toc} />} - </nav> - </aside> {PLACEMENT_ENABLED && <SidePlacement />} </div> - {doc.sidebar && ( - <Sidebar current={doc.mdn_url} sidebar={doc.sidebar} /> - )} </div> <article className="curriculum-content" lang={doc?.locale}> <header> + <LandingSVG /> <h1>{doc?.title}</h1> {doc?.topic && <p>{doc.topic}</p>} </header> <RenderDocumentBody doc={doc} /> <section className="modules"> - <h2>Modules:</h2> + <h2>Modules</h2> {doc.modules && <ModulesListList modules={doc.modules} />} </section> </article> diff --git a/client/src/curriculum/module.scss b/client/src/curriculum/module.scss index dd6f08571543..ce5f911bfa0c 100644 --- a/client/src/curriculum/module.scss +++ b/client/src/curriculum/module.scss @@ -69,6 +69,7 @@ justify-content: flex-start; .topic-icon { + --background-primary: var(--cur-bg-color-topic); align-self: flex-start; grid-area: icon; height: 4rem; diff --git a/client/src/curriculum/modules-list.scss b/client/src/curriculum/modules-list.scss index 2fecbd64adfa..e00efbbc237c 100644 --- a/client/src/curriculum/modules-list.scss +++ b/client/src/curriculum/modules-list.scss @@ -1,3 +1,5 @@ +@use "../ui/vars" as *; + .curriculum-content-container { .curriculum-content { .modules { @@ -10,65 +12,148 @@ h2 { width: 100%; } + } - ol { - display: flex; - flex-wrap: wrap; + ol.modules-list-list { + display: grid; + grid-template-areas: + "a b c spacer" + "h h h h" + "x x x x"; + grid-template-columns: max-content max-content max-content auto; + margin: 0; + padding: 0; - .module-list-item { - border: 0; - border-radius: var(--elem-radius); - box-shadow: var(--shadow-02); - display: flex; - flex-direction: column; - margin: 0.5rem; - max-width: 100%; - min-width: 10rem; - width: 30%; - height: 100%; - - > header { - a { - align-items: center; - background-color: var(--cur-bg-color-topic); - display: flex; - flex-direction: column; - height: 12rem; - padding: 1rem; - - .topic-icon { - height: 5rem; - width: 5rem; - } - - > span { - color: var(--text-primary); - font-weight: var(--font-body-strong-weight); - margin: auto; - text-align: center; - } - } + hr { + border: none; + border-top: 1px solid var(--text-primary); + grid-area: h; + margin: 0 0 1.5rem; + width: 100%; + } + + li { + display: contents; + + > input:checked + label { + text-decoration-color: var(--cur-color); + text-decoration-line: underline; + text-decoration-thickness: 0.25rem; + text-underline-offset: 0.4rem; + } + + > label { + color: var(--text-secondary); + cursor: pointer; + } + + &:nth-child(2) { + > label, + > input { + grid-area: a; } + } - > section { + &:nth-child(3) { + > label, + > input { + grid-area: b; + margin-left: 2rem; + } + } + + &:nth-child(4) { + > label, + > input { + grid-area: c; + margin-left: 2rem; + } + } + + > ol { + grid-area: x; + margin: 0; + padding: 0; + } + } + } + + ol.modules-list { + container-name: module-list; + container-type: inline-size; + display: grid; + flex-wrap: wrap; + gap: 1rem; + margin: 0; + padding: 0; + @media screen and (min-width: $screen-sm) { + grid-template-columns: 1fr; + } + @media screen and (min-width: $screen-md) { + grid-template-columns: 1fr 1fr; + } + @media screen and (min-width: $screen-xl) { + grid-template-columns: 1fr 1fr 1fr; + } + + @container module-list (width >= 25rem) { + grid-template-columns: 1fr 1fr; + } + @container module-list (width >= 38rem) { + grid-template-columns: 1fr 1fr 1fr; + } + + .module-list-item { + border: 0; + border-radius: var(--elem-radius); + box-shadow: var(--shadow-02); + display: flex; + flex-direction: column; + justify-self: center; + max-width: 20rem; + width: 100%; + + > header { + a { align-items: center; + background-color: var(--cur-bg-color-topic); display: flex; flex-direction: column; - font-size: var(--type-smaller-font-size); - height: 11rem; - justify-content: space-between; - padding: 0.5rem 1rem; + height: 12rem; + padding: 1rem 2rem; - p { - margin: 0; + .topic-icon { + height: 5rem; + width: 5rem; } - p:last-child { - color: var(--cur-color-topic); + > span { + color: var(--text-primary); + font-weight: var(--font-body-strong-weight); + margin: auto; text-align: center; } } } + + > section { + align-items: center; + display: flex; + flex-direction: column; + font-size: var(--type-smaller-font-size); + height: 11rem; + justify-content: space-between; + padding: 1rem 1.5rem; + + p { + margin: 0; + } + + p:last-child { + color: var(--cur-color-topic); + text-align: center; + } + } } } } diff --git a/client/src/curriculum/modules-list.tsx b/client/src/curriculum/modules-list.tsx index 5d1ad9ee6521..716a1f564705 100644 --- a/client/src/curriculum/modules-list.tsx +++ b/client/src/curriculum/modules-list.tsx @@ -3,15 +3,25 @@ import { TopicIcon } from "./topic-icon"; import { topic2css } from "./utils"; import "./modules-list.scss"; +import { useState } from "react"; export function ModulesListList({ modules }: { modules: ModuleIndexEntry[] }) { + const [tab, setTab] = useState(1); return ( - <ol> + <ol className="modules-list-list"> + <hr /> {modules.map((c, i) => { return ( <li> + <input + className="visually-hidden" + id={`module-${i}`} + name="selected" + type="radio" + checked={i === tab} + onChange={() => setTab(i)} + /> <label htmlFor={`module-${i}`}>{c.title}</label> - <input id={`module-${i}`} name="selected" type="radio" /> {c.children && <ModulesList modules={c.children} />} </li> ); @@ -22,7 +32,7 @@ export function ModulesListList({ modules }: { modules: ModuleIndexEntry[] }) { export function ModulesList({ modules }: { modules: ModuleIndexEntry[] }) { return ( - <ol> + <ol className="modules-list"> {modules.map((c, j) => { return ( <li diff --git a/client/src/curriculum/no-side.scss b/client/src/curriculum/no-side.scss new file mode 100644 index 000000000000..e6659f6008a0 --- /dev/null +++ b/client/src/curriculum/no-side.scss @@ -0,0 +1,23 @@ +@use "../ui/vars" as *; + +.curriculum-content-container.curriculum-no-side { + @media screen and (min-width: $screen-md) { + display: grid; + gap: 3rem; + grid-template-areas: "main toc"; + grid-template-columns: minmax(0, 1fr) minmax(0, 12rem); + padding-left: 1.5rem; + padding-right: 3rem; + } + + @media screen and (min-width: $screen-xl) { + display: grid; + gap: 3rem; + grid-template-areas: "main toc"; + grid-template-columns: minmax(0, 62rem) minmax(0, 12rem); + margin: 0 auto; + padding-left: 1rem; + padding-right: 1rem; + width: fit-content; + } +} diff --git a/client/src/curriculum/overview.scss b/client/src/curriculum/overview.scss new file mode 100644 index 000000000000..577b4ceca5e0 --- /dev/null +++ b/client/src/curriculum/overview.scss @@ -0,0 +1,16 @@ +.curriculum-content-container .curriculum-content.curriculum-overview { + > header > h1 { + margin-bottom: 1rem; + + > span { + color: var(--cur-color); + } + } + + .module-contents { + > h2 { + margin-bottom: 2rem; + margin-top: 4rem; + } + } +} diff --git a/client/src/curriculum/overview.tsx b/client/src/curriculum/overview.tsx index 6796ada2dfce..5833aec14535 100644 --- a/client/src/curriculum/overview.tsx +++ b/client/src/curriculum/overview.tsx @@ -9,6 +9,7 @@ import { TopNavigation } from "../ui/organisms/top-navigation"; import { ArticleActionsContainer } from "../ui/organisms/article-actions-container"; import { topic2css, useDocTitle } from "./utils"; +import "./no-side.scss"; import "./overview.scss"; export function CurriculumModuleOverview( @@ -40,6 +41,7 @@ export function CurriculumModuleOverview( ); const { doc }: { doc?: CurriculumDoc } = data || props || {}; useDocTitle(doc); + const [coloredTitle, ...restTitle] = doc?.title?.split(" ") || []; return ( <> {doc && ( @@ -49,16 +51,21 @@ export function CurriculumModuleOverview( <ArticleActionsContainer doc={doc} /> </div> <main - className={`curriculum-content-container curriculum-overview container topic-${topic2css(doc.topic)}`} + className={`curriculum-content-container curriculum-no-side container topic-${topic2css(doc.topic)}`} > <div className="sidebar-container"> <div className="toc-container"> {PLACEMENT_ENABLED && <SidePlacement />} </div> </div> - <article className="curriculum-content" lang={doc?.locale}> + <article + className="curriculum-content curriculum-overview" + lang={doc?.locale} + > <header> - <h1>{doc?.title}</h1> + <h1> + <span>{coloredTitle}</span> {restTitle.join(" ")} + </h1> {doc?.topic && <p>{doc.topic}</p>} </header> <RenderDocumentBody doc={doc} /> diff --git a/client/src/ui/base/_themes.scss b/client/src/ui/base/_themes.scss index 7743b797cc43..2ff440677565 100644 --- a/client/src/ui/base/_themes.scss +++ b/client/src/ui/base/_themes.scss @@ -214,7 +214,7 @@ --cur-bg-color-topic-tooling: #d5e4f5; --cur-bg-color-topic-practices: #f5dfd5; --cur-category-color: #e3642a; - --cur-color: #fcefe2; + --cur-color: #d47d55; --cur-color-topic-standards: #187b7f; --cur-color-topic-styling: #187f22; --cur-color-topic-scripting: #7f6f16; @@ -434,7 +434,7 @@ --cur-color-topic-scripting: #fff8d6; --cur-color-topic-tooling: #d5e4f5; --cur-color-topic-practices: #f5dfd5; - --cur-bg-color: #fcefe2; + --cur-bg-color: #d47d55; --cur-bg-color-topic-standards: #187b7f; --cur-bg-color-topic-styling: #187f22; --cur-bg-color-topic-scripting: #7f6f16; diff --git a/client/src/ui/molecules/breadcrumbs/index.tsx b/client/src/ui/molecules/breadcrumbs/index.tsx index 313e62b332f8..36444621b4e4 100644 --- a/client/src/ui/molecules/breadcrumbs/index.tsx +++ b/client/src/ui/molecules/breadcrumbs/index.tsx @@ -25,8 +25,8 @@ export const Breadcrumbs = ({ parents }: { parents: DocParent[] }) => { return ( <li key={parent.uri} property="itemListElement" typeof="ListItem"> - <PreloadingDocumentLink - to={parent.uri} + <a + href={parent.uri} className={isLast ? "breadcrumb-current-page" : "breadcrumb"} property="item" typeof="WebPage" @@ -40,7 +40,7 @@ export const Breadcrumbs = ({ parents }: { parents: DocParent[] }) => { } > <span property="name">{parent.title}</span> - </PreloadingDocumentLink> + </a> <meta property="position" content={`${currentCrumb}`} /> </li> );