diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss index 4dd4a4da..561709fb 100644 --- a/assets/scss/styles.scss +++ b/assets/scss/styles.scss @@ -110,7 +110,7 @@ footer { @apply min-h-screen; @apply flex; @apply flex-col; - @apply flex-no-wrap; + @apply flex-nowrap; } .wrapper .page { @@ -415,14 +415,10 @@ button { @apply font-icon; @apply font-normal; @apply not-italic; - @apply h-6; - @apply w-6; - @apply text-2xl; - @apply leading-6; @apply inline-block; @apply normal-case; @apply tracking-normal; - @apply whitespace-no-wrap; + @apply whitespace-nowrap; @apply antialiased; word-wrap: normal; @@ -627,7 +623,7 @@ ul li, ol li { @apply inline-flex; @apply flex-col; - @apply flex-no-wrap; + @apply flex-nowrap; @apply flex-1; @apply justify-center; @@ -646,7 +642,7 @@ ol li { span, div { @apply inline-flex; - @apply flex-no-wrap; + @apply flex-nowrap; @apply items-center; @apply justify-center; } @@ -661,7 +657,7 @@ ol li { } .redir-response { - @apply text-orange-400; + @apply text-pink-400; } .cl-error-response { @@ -696,7 +692,7 @@ ol li { } #send { - @apply whitespace-no-wrap; + @apply whitespace-nowrap; @apply outline-none; @apply border-none; @@ -719,6 +715,7 @@ ol li { section { @apply flex; @apply rounded-lg; + @apply w-full; } .toasted-container .toasted { @@ -772,7 +769,7 @@ section { ul, ol { @apply flex-col; - @apply flex-no-wrap; + @apply flex-nowrap; } ul li, diff --git a/assets/scss/themes.scss b/assets/scss/themes.scss index 196cec13..e939c27d 100644 --- a/assets/scss/themes.scss +++ b/assets/scss/themes.scss @@ -83,9 +83,9 @@ --ac-color: theme("colors.green.400"); } -@mixin tealTheme { +@mixin indigoTheme { // Acent color - --ac-color: theme("colors.teal.400"); + --ac-color: theme("colors.indigo.400"); } @mixin purpleTheme { @@ -93,11 +93,6 @@ --ac-color: theme("colors.purple.400"); } -@mixin orangeTheme { - // Acent color - --ac-color: theme("colors.orange.400"); -} - @mixin pinkTheme { // Acent color --ac-color: theme("colors.pink.400"); @@ -137,15 +132,12 @@ :root[data-accent="green"] { @include greenTheme; } -:root[data-accent="teal"] { - @include tealTheme; +:root[data-accent="indigo"] { + @include indigoTheme; } :root[data-accent="purple"] { @include purpleTheme; } -:root[data-accent="orange"] { - @include orangeTheme; -} :root[data-accent="pink"] { @include pinkTheme; } diff --git a/components/app/Contributors.vue b/components/app/Contributors.vue index 319dca26..411be9e3 100644 --- a/components/app/Contributors.vue +++ b/components/app/Contributors.vue @@ -162,7 +162,7 @@ .contributors { @apply flex; @apply items-center; - @apply flex-no-wrap; + @apply flex-nowrap; @apply overflow-auto; @apply m-2; } diff --git a/components/app/Sidenav.vue b/components/app/Sidenav.vue index eb5ebd21..6ed1d356 100644 --- a/components/app/Sidenav.vue +++ b/components/app/Sidenav.vue @@ -59,111 +59,61 @@ settings -
- -
-
- -
-
- -
-
- -
-
- -
+ + + + + @@ -178,16 +128,17 @@ $responsiveWidth: 768px; @apply transition; @apply ease-in-out; @apply duration-150; - // @apply overflow-y-auto; + @apply space-y-2; } nav.primary-nav { @apply flex; @apply flex-col; - @apply flex-no-wrap; + @apply flex-nowrap; @apply items-center; @apply justify-center; @apply space-y-2; + @apply w-full; svg { @apply fill-current; @@ -239,45 +190,38 @@ nav.primary-nav::-webkit-scrollbar, nav.secondary-nav { @apply flex; @apply flex-col; - @apply flex-no-wrap; + @apply flex-nowrap; @apply items-center; @apply justify-center; @apply border-t-2; @apply border-dashed; @apply border-brdColor; - @apply mt-2; + @apply pt-2; + @apply space-y-2; - ul { - @apply flex; - @apply flex-col; - @apply flex-no-wrap; - @apply space-y-2; - @apply py-1; + a { + @apply inline-flex; + @apply items-center; + @apply justify-center; + @apply flex-shrink-0; + @apply p-4; + @apply rounded-full; + @apply bg-bgDarkColor; + @apply text-fgLightColor; + @apply fill-current; + @apply outline-none; + @apply transition; + @apply ease-in-out; + @apply duration-150; - li { - @apply flex; + &:hover { + @apply text-fgColor; + @apply fill-current; + } - a { - @apply p-4; - @apply rounded-full; - @apply bg-bgDarkColor; - @apply text-fgLightColor; - @apply fill-current; - @apply outline-none; - @apply transition; - @apply ease-in-out; - @apply duration-150; - - &:hover { - @apply text-fgColor; - @apply fill-current; - } - - &.current { - @apply text-acColor; - @apply fill-current; - } - } + &.current { + @apply text-acColor; + @apply fill-current; } } } @@ -296,7 +240,7 @@ nav.secondary-nav { nav.primary-nav { @apply flex-row; - @apply flex-no-wrap; + @apply flex-nowrap; @apply overflow-auto; @apply bg-bgDarkColor; @apply space-y-0; diff --git a/components/collections/index.vue b/components/collections/index.vue index 15463830..1ac6746b 100644 --- a/components/collections/index.vue +++ b/components/collections/index.vue @@ -1,5 +1,5 @@