Learn Page Redesign

This commit is contained in:
Spencer Strickland
2023-08-25 12:16:26 -05:00
parent 0a7375b3ec
commit c8dfd8e479
5 changed files with 367 additions and 204 deletions

View File

@@ -1097,14 +1097,14 @@ select.dropdown {
right: 0.75rem;
}
.top-1 {
top: 0.25rem;
}
.right-1 {
right: 0.25rem;
}
.top-1 {
top: 0.25rem;
}
.isolate {
isolation: isolate;
}
@@ -1129,6 +1129,22 @@ select.dropdown {
order: 1;
}
.order-4 {
order: 4;
}
.order-6 {
order: 6;
}
.order-5 {
order: 5;
}
.order-7 {
order: 7;
}
.col-span-2 {
grid-column: span 2 / span 2;
}
@@ -1163,16 +1179,16 @@ select.dropdown {
margin-right: auto;
}
.my-4 {
margin-top: 1rem;
margin-bottom: 1rem;
}
.my-16 {
margin-top: 4rem;
margin-bottom: 4rem;
}
.my-4 {
margin-top: 1rem;
margin-bottom: 1rem;
}
.my-3 {
margin-top: 0.75rem;
margin-bottom: 0.75rem;
@@ -1225,14 +1241,34 @@ select.dropdown {
margin-top: 0.5rem;
}
.mb-16 {
margin-bottom: 4rem;
.mb-0 {
margin-bottom: 0px;
}
.mb-2 {
margin-bottom: 0.5rem;
}
.mt-6 {
margin-top: 1.5rem;
}
.mt-1 {
margin-top: 0.25rem;
}
.mr-2 {
margin-right: 0.5rem;
}
.ml-6 {
margin-left: 1.5rem;
}
.mb-16 {
margin-bottom: 4rem;
}
.mt-3 {
margin-top: 0.75rem;
}
@@ -1245,14 +1281,6 @@ select.dropdown {
margin-bottom: 2.75rem;
}
.ml-6 {
margin-left: 1.5rem;
}
.mb-2 {
margin-bottom: 0.5rem;
}
.mb-6 {
margin-bottom: 1.5rem;
}
@@ -1261,10 +1289,6 @@ select.dropdown {
margin-right: 1.25rem;
}
.mr-2 {
margin-right: 0.5rem;
}
.mr-3 {
margin-right: 0.75rem;
}
@@ -1281,6 +1305,10 @@ select.dropdown {
margin-top: 0px;
}
.ml-2 {
margin-left: 0.5rem;
}
.mt-16 {
margin-top: 4rem;
}
@@ -1297,10 +1325,6 @@ select.dropdown {
margin-right: 0.25rem;
}
.mb-0 {
margin-bottom: 0px;
}
.mt-4 {
margin-top: 1rem;
}
@@ -1309,10 +1333,6 @@ select.dropdown {
margin-left: -0.5rem;
}
.mt-1 {
margin-top: 0.25rem;
}
.ml-0 {
margin-left: 0px;
}
@@ -1345,26 +1365,6 @@ select.dropdown {
margin-left: 1rem;
}
.ml-2 {
margin-left: 0.5rem;
}
.-mt-2 {
margin-top: -0.5rem;
}
.-mt-3 {
margin-top: -0.75rem;
}
.-mt-6 {
margin-top: -1.5rem;
}
.-mb-6 {
margin-bottom: -1.5rem;
}
.block {
display: block;
}
@@ -1397,14 +1397,26 @@ select.dropdown {
display: contents;
}
.list-item {
display: list-item;
}
.hidden {
display: none;
}
.aspect-square {
aspect-ratio: 1 / 1;
}
.h-screen {
height: 100vh;
}
.h-3 {
height: 0.75rem;
}
.h-full {
height: 100%;
}
@@ -1449,6 +1461,15 @@ select.dropdown {
height: 1rem;
}
.h-\[470px\] {
height: 470px;
}
.h-fit {
height: -moz-fit-content;
height: fit-content;
}
.max-h-\[470px\] {
max-height: 470px;
}
@@ -1457,6 +1478,16 @@ select.dropdown {
max-height: 24rem;
}
.max-h-min {
max-height: -moz-min-content;
max-height: min-content;
}
.max-h-max {
max-height: -moz-max-content;
max-height: max-content;
}
.w-full {
width: 100%;
}
@@ -1465,6 +1496,10 @@ select.dropdown {
width: 50%;
}
.w-6 {
width: 1.5rem;
}
.w-auto {
width: auto;
}
@@ -1514,10 +1549,6 @@ select.dropdown {
width: 30px;
}
.w-6 {
width: 1.5rem;
}
.w-\[90\%\] {
width: 90%;
}
@@ -1578,6 +1609,16 @@ select.dropdown {
width: 300px;
}
.w-fit {
width: -moz-fit-content;
width: fit-content;
}
.w-max {
width: -moz-max-content;
width: max-content;
}
.min-w-\[100px\] {
min-width: 100px;
}
@@ -1594,6 +1635,19 @@ select.dropdown {
max-width: 100%;
}
.max-w-none {
max-width: none;
}
.max-w-min {
max-width: -moz-min-content;
max-width: min-content;
}
.max-w-\[572px\] {
max-width: 572px;
}
.flex-auto {
flex: 1 1 auto;
}
@@ -1658,6 +1712,10 @@ select.dropdown {
list-style-type: disc;
}
.grid-flow-row {
grid-auto-flow: row;
}
.grid-flow-col {
grid-auto-flow: column;
}
@@ -1666,6 +1724,10 @@ select.dropdown {
grid-auto-rows: minmax(0, 1fr);
}
.auto-rows-min {
grid-auto-rows: min-content;
}
.grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
@@ -1750,10 +1812,18 @@ select.dropdown {
gap: 1.5rem;
}
.gap-2 {
gap: 0.5rem;
}
.gap-4 {
gap: 1rem;
}
.gap-y-5 {
row-gap: 1.25rem;
}
.gap-y-10 {
row-gap: 2.5rem;
}
@@ -1763,6 +1833,10 @@ select.dropdown {
column-gap: 0.75rem;
}
.gap-y-0 {
row-gap: 0px;
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1882,6 +1956,10 @@ select.dropdown {
justify-self: center;
}
.overflow-hidden {
overflow: hidden;
}
.overflow-x-auto {
overflow-x: auto;
}
@@ -1898,6 +1976,10 @@ select.dropdown {
overflow-y: hidden;
}
.overflow-x-clip {
overflow-x: clip;
}
.whitespace-normal {
white-space: normal;
}
@@ -1939,6 +2021,14 @@ select.dropdown {
border-top-right-radius: 0.5rem;
}
.rounded-bl-lg {
border-bottom-left-radius: 0.5rem;
}
.rounded-br-lg {
border-bottom-right-radius: 0.5rem;
}
.border {
border-width: 1px;
}
@@ -2081,6 +2171,11 @@ select.dropdown {
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
}
.bg-emerald-400 {
--tw-bg-opacity: 1;
background-color: rgb(52 211 153 / var(--tw-bg-opacity));
}
.bg-charcoal {
--tw-bg-opacity: 1;
background-color: rgb(23 42 52 / var(--tw-bg-opacity));
@@ -2103,60 +2198,44 @@ select.dropdown {
background-color: rgb(254 240 138 / 0.7);
}
.bg-green {
--tw-bg-opacity: 1;
background-color: rgb(90 213 153 / var(--tw-bg-opacity));
}
.bg-emerald-800 {
--tw-bg-opacity: 1;
background-color: rgb(6 95 70 / var(--tw-bg-opacity));
}
.bg-emerald-600 {
--tw-bg-opacity: 1;
background-color: rgb(5 150 105 / var(--tw-bg-opacity));
}
.bg-emerald-400 {
--tw-bg-opacity: 1;
background-color: rgb(52 211 153 / var(--tw-bg-opacity));
}
.bg-emerald-500 {
--tw-bg-opacity: 1;
background-color: rgb(16 185 129 / var(--tw-bg-opacity));
}
.bg-blue-500 {
--tw-bg-opacity: 1;
background-color: rgb(59 130 246 / var(--tw-bg-opacity));
}
.bg-blue-600 {
--tw-bg-opacity: 1;
background-color: rgb(37 99 235 / var(--tw-bg-opacity));
}
.bg-blue-400 {
--tw-bg-opacity: 1;
background-color: rgb(96 165 250 / var(--tw-bg-opacity));
}
.bg-blue-300 {
--tw-bg-opacity: 1;
background-color: rgb(147 197 253 / var(--tw-bg-opacity));
.bg-transparent {
background-color: transparent;
}
.bg-opacity-10 {
--tw-bg-opacity: 0.1;
}
.object-contain {
-o-object-fit: contain;
object-fit: contain;
}
.object-cover {
-o-object-fit: cover;
object-fit: cover;
}
.object-fill {
-o-object-fit: fill;
object-fit: fill;
}
.object-none {
-o-object-fit: none;
object-fit: none;
}
.object-scale-down {
-o-object-fit: scale-down;
object-fit: scale-down;
}
.object-center {
-o-object-position: center;
object-position: center;
}
.p-6 {
padding: 1.5rem;
}
@@ -2218,6 +2297,11 @@ select.dropdown {
padding-bottom: 0.25rem;
}
.px-0 {
padding-left: 0px;
padding-right: 0px;
}
.py-3 {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
@@ -2258,6 +2342,11 @@ select.dropdown {
padding-bottom: 1.5rem;
}
.px-1 {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.py-8 {
padding-top: 2rem;
padding-bottom: 2rem;
@@ -2278,21 +2367,11 @@ select.dropdown {
padding-right: 1.25rem;
}
.px-1 {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.px-\[40px\] {
padding-left: 40px;
padding-right: 40px;
}
.px-0 {
padding-left: 0px;
padding-right: 0px;
}
.py-\[1px\] {
padding-top: 1px;
padding-bottom: 1px;
@@ -2311,6 +2390,14 @@ select.dropdown {
padding-top: 0.5rem;
}
.pl-8 {
padding-left: 2rem;
}
.pl-4 {
padding-left: 1rem;
}
.pr-2 {
padding-right: 0.5rem;
}
@@ -2435,6 +2522,11 @@ select.dropdown {
line-height: 1.75rem;
}
.text-3xl {
font-size: 1.875rem;
line-height: 2.25rem;
}
.text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
@@ -2514,6 +2606,11 @@ select.dropdown {
color: rgb(255 159 0 / var(--tw-text-opacity));
}
.text-sky-600 {
--tw-text-opacity: 1;
color: rgb(2 132 199 / var(--tw-text-opacity));
}
.text-green {
--tw-text-opacity: 1;
color: rgb(90 213 153 / var(--tw-text-opacity));
@@ -2534,11 +2631,6 @@ select.dropdown {
color: rgb(75 85 99 / var(--tw-text-opacity));
}
.text-sky-600 {
--tw-text-opacity: 1;
color: rgb(2 132 199 / var(--tw-text-opacity));
}
.text-gray-400 {
--tw-text-opacity: 1;
color: rgb(156 163 175 / var(--tw-text-opacity));
@@ -2875,6 +2967,11 @@ select.dropdown {
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.dark .dark\:text-sky-300 {
--tw-text-opacity: 1;
color: rgb(125 211 252 / var(--tw-text-opacity));
}
.dark .dark\:text-orange {
--tw-text-opacity: 1;
color: rgb(255 159 0 / var(--tw-text-opacity));
@@ -3019,6 +3116,26 @@ select.dropdown {
order: 9999;
}
.md\:order-1 {
order: 1;
}
.md\:order-5 {
order: 5;
}
.md\:order-6 {
order: 6;
}
.md\:order-7 {
order: 7;
}
.md\:col-span-2 {
grid-column: span 2 / span 2;
}
.md\:float-right {
float: right;
}
@@ -3056,6 +3173,10 @@ select.dropdown {
margin-top: 3.5rem;
}
.md\:mb-2 {
margin-bottom: 0.5rem;
}
.md\:mt-3 {
margin-top: 0.75rem;
}
@@ -3088,10 +3209,6 @@ select.dropdown {
margin-top: 1.5rem;
}
.md\:mb-2 {
margin-bottom: 0.5rem;
}
.md\:mb-6 {
margin-bottom: 1.5rem;
}
@@ -3176,10 +3293,6 @@ select.dropdown {
min-width: 150px;
}
.md\:max-w-7xl {
max-width: 80rem;
}
.md\:max-w-3xl {
max-width: 48rem;
}
@@ -3196,6 +3309,10 @@ select.dropdown {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.md\:grid-rows-3 {
grid-template-rows: repeat(3, minmax(0, 1fr));
}
.md\:grid-rows-1 {
grid-template-rows: repeat(1, minmax(0, 1fr));
}
@@ -3217,6 +3334,10 @@ select.dropdown {
column-gap: 2.5rem;
}
.md\:gap-y-5 {
row-gap: 1.25rem;
}
.md\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
@@ -3274,6 +3395,10 @@ select.dropdown {
border-radius: 0px;
}
.md\:rounded-lg {
border-radius: 0.5rem;
}
.md\:rounded-l-lg {
border-top-left-radius: 0.5rem;
border-bottom-left-radius: 0.5rem;
@@ -3283,6 +3408,22 @@ select.dropdown {
border-top-left-radius: 0px;
}
.md\:rounded-tl-lg {
border-top-left-radius: 0.5rem;
}
.md\:rounded-tr-lg {
border-top-right-radius: 0.5rem;
}
.md\:rounded-bl-lg {
border-bottom-left-radius: 0.5rem;
}
.md\:rounded-br-lg {
border-bottom-right-radius: 0.5rem;
}
.md\:border {
border-width: 1px;
}
@@ -3404,6 +3545,11 @@ select.dropdown {
padding-bottom: 0px;
}
.md\:text-3xl {
font-size: 1.875rem;
line-height: 2.25rem;
}
.md\:text-6xl {
font-size: 3.75rem;
line-height: 1;
@@ -3428,11 +3574,6 @@ select.dropdown {
font-size: 1.5rem;
line-height: 2rem;
}
.md\:text-3xl {
font-size: 1.875rem;
line-height: 2.25rem;
}
}
@media (min-width: 1024px) {
@@ -3501,6 +3642,11 @@ select.dropdown {
margin-left: calc(1.25rem * calc(1 - var(--tw-space-x-reverse)));
}
.lg\:text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;
}
.lg\:text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
@@ -3511,11 +3657,6 @@ select.dropdown {
line-height: 1.5rem;
}
.lg\:text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;
}
.lg\:text-3xl {
font-size: 1.875rem;
line-height: 2.25rem;