diff --git a/app/assets/stylesheets/components/tabs.scss b/app/assets/stylesheets/components/tabs.scss index 944a31f0d..f22cb6698 100644 --- a/app/assets/stylesheets/components/tabs.scss +++ b/app/assets/stylesheets/components/tabs.scss @@ -171,3 +171,80 @@ } } } + +.crayons-navigation { + --tab-horizontal-padding: var(--su-3); + --tab-vertical-padding: var(--su-2); + + display: flex; + overflow-x: auto; + flex-wrap: nowrap; + // !important here because reset.scss is screwed up a little for ul,ol elements... gotta fix it one day... + padding: var(--su-1) 0 !important; // padding to improve tapable + margin: calc(-1 * var(--su-1)) 0 !important; + + @media (min-width: $breakpoint-s) { + display: block; + overflow-x: unset; + } + + &__item { + display: inline-flex; + white-space: nowrap; + padding: var(--tab-vertical-padding) var(--tab-horizontal-padding); + color: var(--base-70); + position: relative; + border-radius: var(--radius); + + @media (min-width: $breakpoint-s) { + display: flex; + color: var(--base-90); + white-space: unset; + padding: var(--tab-vertical-padding) var(--tab-vertical-padding); + + &:hover { + color: var(--accent-brand); + background: var(--base-inverted-a50); + } + } + + &--current { + font-weight: var(--fw-bold); + color: var(--base-100); + + @media (min-width: $breakpoint-s) { + background: var(--base-inverted); + &:hover { + background: var(--base-inverted); + } + } + } + } +} + +.crayons-navigation--horizontal { + @media (min-width: $breakpoint-s) { + display: flex; + } + + .crayons-navigation__item { + @media (min-width: $breakpoint-s) { + display: inline-flex; + color: var(--base-70); + padding: var(--tab-vertical-padding) var(--tab-horizontal-padding); + } + + &:hover { + color: var(--accent-brand); + } + + &--current { + color: var(--base-100); + background: none; + + &:hover { + background: var(--base-inverted-a50); + } + } + } +} diff --git a/app/assets/stylesheets/config/_colors.scss b/app/assets/stylesheets/config/_colors.scss index d18cd0cb4..e823c2f66 100644 --- a/app/assets/stylesheets/config/_colors.scss +++ b/app/assets/stylesheets/config/_colors.scss @@ -14,17 +14,7 @@ // Base --base: #090909; - - --base-a90: #{rgba(#090909, 0.9)}; - --base-a80: #{rgba(#090909, 0.8)}; - --base-a70: #{rgba(#090909, 0.7)}; - --base-a60: #{rgba(#090909, 0.6)}; - --base-a50: #{rgba(#090909, 0.5)}; - --base-a40: #{rgba(#090909, 0.4)}; - --base-a30: #{rgba(#090909, 0.3)}; - --base-a20: #{rgba(#090909, 0.2)}; - --base-a10: #{rgba(#090909, 0.1)}; - --base-a5: #{rgba(#090909, 0.05)}; + --base-inverted: #fff; --base-100: var(--base); --base-90: #242424; @@ -37,7 +27,28 @@ --base-20: #d6d6d7; --base-10: #efefef; --base-0: #f9f9f9; - --base-inverted: #fff; + + --base-a90: #{rgba(#090909, 0.9)}; + --base-a80: #{rgba(#090909, 0.8)}; + --base-a70: #{rgba(#090909, 0.7)}; + --base-a60: #{rgba(#090909, 0.6)}; + --base-a50: #{rgba(#090909, 0.5)}; + --base-a40: #{rgba(#090909, 0.4)}; + --base-a30: #{rgba(#090909, 0.3)}; + --base-a20: #{rgba(#090909, 0.2)}; + --base-a10: #{rgba(#090909, 0.1)}; + --base-a5: #{rgba(#090909, 0.05)}; + + --base-inverted-a90: #{rgba(#fff, 0.9)}; + --base-inverted-a80: #{rgba(#fff, 0.8)}; + --base-inverted-a70: #{rgba(#fff, 0.7)}; + --base-inverted-a60: #{rgba(#fff, 0.6)}; + --base-inverted-a50: #{rgba(#fff, 0.5)}; + --base-inverted-a40: #{rgba(#fff, 0.4)}; + --base-inverted-a30: #{rgba(#fff, 0.3)}; + --base-inverted-a20: #{rgba(#fff, 0.2)}; + --base-inverted-a10: #{rgba(#fff, 0.1)}; + --base-inverted-a5: #{rgba(#fff, 0.05)}; // Accent colors --accent-brand: #3b49df; diff --git a/app/assets/stylesheets/themes/hacker.scss b/app/assets/stylesheets/themes/hacker.scss index dc0f3a671..d3e402903 100644 --- a/app/assets/stylesheets/themes/hacker.scss +++ b/app/assets/stylesheets/themes/hacker.scss @@ -9,31 +9,42 @@ --theme-color: #ffffff; // Base - --base: #ffffff; - - --base-a90: #{rgba(#ffffff, 0.9)}; - --base-a80: #{rgba(#ffffff, 0.8)}; - --base-a70: #{rgba(#ffffff, 0.7)}; - --base-a60: #{rgba(#ffffff, 0.6)}; - --base-a50: #{rgba(#ffffff, 0.5)}; - --base-a40: #{rgba(#ffffff, 0.4)}; - --base-a30: #{rgba(#ffffff, 0.3)}; - --base-a20: #{rgba(#ffffff, 0.2)}; - --base-a10: #{rgba(#ffffff, 0.1)}; - --base-a5: #{rgba(#ffffff, 0.05)}; + --base: #fff; + --base-inverted: #000; --base-100: var(--base); - --base-90: #e3e3e3; - --base-80: #c8c8c8; - --base-70: #adadad; - --base-60: #939393; - --base-50: #ffffff; - --base-40: #626262; - --base-30: #4b4b4b; - --base-20: #353535; - --base-10: #1c1c1c; - --base-0: #0a0a0a; - --base-inverted: #000000; + --base-90: #efefef; + --base-80: #d6d6d7; + --base-70: #bdbdbd; + --base-60: #a3a3a3; + --base-50: #8a8a8a; + --base-40: #717171; + --base-30: #575757; + --base-20: #3d3d3d; + --base-10: #242424; + --base-0: #090909; + + --base-a90: #{rgba(#fff, 0.9)}; + --base-a80: #{rgba(#fff, 0.8)}; + --base-a70: #{rgba(#fff, 0.7)}; + --base-a60: #{rgba(#fff, 0.6)}; + --base-a50: #{rgba(#fff, 0.5)}; + --base-a40: #{rgba(#fff, 0.4)}; + --base-a30: #{rgba(#fff, 0.3)}; + --base-a20: #{rgba(#fff, 0.2)}; + --base-a10: #{rgba(#fff, 0.1)}; + --base-a5: #{rgba(#fff, 0.05)}; + + --base-inverted-a90: #{rgba(#000, 0.9)}; + --base-inverted-a80: #{rgba(#000, 0.8)}; + --base-inverted-a70: #{rgba(#000, 0.7)}; + --base-inverted-a60: #{rgba(#000, 0.6)}; + --base-inverted-a50: #{rgba(#000, 0.5)}; + --base-inverted-a40: #{rgba(#000, 0.4)}; + --base-inverted-a30: #{rgba(#000, 0.3)}; + --base-inverted-a20: #{rgba(#000, 0.2)}; + --base-inverted-a10: #{rgba(#000, 0.1)}; + --base-inverted-a5: #{rgba(#000, 0.05)}; // Accent colors --accent-brand: #2eff7b; diff --git a/app/assets/stylesheets/themes/night.scss b/app/assets/stylesheets/themes/night.scss index 6d0c7cb32..c7be6010f 100644 --- a/app/assets/stylesheets/themes/night.scss +++ b/app/assets/stylesheets/themes/night.scss @@ -10,17 +10,7 @@ // Base --base: #f9f9f9; - - --base-a90: #{rgba(#f9f9f9, 0.9)}; - --base-a80: #{rgba(#f9f9f9, 0.8)}; - --base-a70: #{rgba(#f9f9f9, 0.7)}; - --base-a60: #{rgba(#f9f9f9, 0.6)}; - --base-a50: #{rgba(#f9f9f9, 0.5)}; - --base-a40: #{rgba(#f9f9f9, 0.4)}; - --base-a30: #{rgba(#f9f9f9, 0.3)}; - --base-a20: #{rgba(#f9f9f9, 0.2)}; - --base-a10: #{rgba(#f9f9f9, 0.1)}; - --base-a5: #{rgba(#f9f9f9, 0.05)}; + --base-inverted: #000; --base-100: var(--base); --base-90: #efefef; @@ -33,7 +23,28 @@ --base-20: #3d3d3d; --base-10: #242424; --base-0: #090909; - --base-inverted: #000; + + --base-a90: #{rgba(#f9f9f9, 0.9)}; + --base-a80: #{rgba(#f9f9f9, 0.8)}; + --base-a70: #{rgba(#f9f9f9, 0.7)}; + --base-a60: #{rgba(#f9f9f9, 0.6)}; + --base-a50: #{rgba(#f9f9f9, 0.5)}; + --base-a40: #{rgba(#f9f9f9, 0.4)}; + --base-a30: #{rgba(#f9f9f9, 0.3)}; + --base-a20: #{rgba(#f9f9f9, 0.2)}; + --base-a10: #{rgba(#f9f9f9, 0.1)}; + --base-a5: #{rgba(#f9f9f9, 0.05)}; + + --base-inverted-a90: #{rgba(#000, 0.9)}; + --base-inverted-a80: #{rgba(#000, 0.8)}; + --base-inverted-a70: #{rgba(#000, 0.7)}; + --base-inverted-a60: #{rgba(#000, 0.6)}; + --base-inverted-a50: #{rgba(#000, 0.5)}; + --base-inverted-a40: #{rgba(#000, 0.4)}; + --base-inverted-a30: #{rgba(#000, 0.3)}; + --base-inverted-a20: #{rgba(#000, 0.2)}; + --base-inverted-a10: #{rgba(#000, 0.1)}; + --base-inverted-a5: #{rgba(#000, 0.05)}; // Accent colors --accent-brand: #7b78ff; diff --git a/app/javascript/packs/searchParams.js b/app/javascript/packs/searchParams.js index c09f7476e..83727fba9 100644 --- a/app/javascript/packs/searchParams.js +++ b/app/javascript/packs/searchParams.js @@ -34,7 +34,7 @@ function searchMain(substories) { function initializeSortingTabs(query) { const sortingTabs = document.querySelectorAll( - '#sorting-option-tabs .crayons-tabs__item', + '#sorting-option-tabs .crayons-navigation__item', ); for (let i = 0; i < sortingTabs.length; i++) { @@ -61,12 +61,12 @@ function initializeSortingTabs(query) { for (let j = 0; j < sortingTabs.length; j++) { if (sortingTabs[j] !== e.target) { - sortingTabs[j].classList.remove('crayons-tabs__item--current'); + sortingTabs[j].classList.remove('crayons-navigation__item--current'); sortingTabs[j].setAttribute('aria-current', ''); } } - e.target.classList.add('crayons-tabs__item--current'); + e.target.classList.add('crayons-navigation__item--current'); e.target.setAttribute('aria-current', 'page'); }); } @@ -76,7 +76,7 @@ function initializeFilters(query, filters) { const filterButts = document.getElementsByClassName('query-filter-button'); for (let i = 0; i < filterButts.length; i++) { if (filters === filterButts[i].dataset.filter) { - filterButts[i].classList.add('crayons-link--current'); + filterButts[i].classList.add('crayons-navigation__item--current'); } filterButts[i].onclick = function (e) { const currentParams = getQueryParams(document.location.search); @@ -99,10 +99,10 @@ function initializeFilters(query, filters) { ); const { className } = e.target; for (let i = 0; i < filterButts.length; i++) { - filterButts[i].classList.remove('crayons-link--current'); + filterButts[i].classList.remove('crayons-navigation__item--current'); } - if (className.indexOf('crayons-link--current') === -1) { - e.target.classList.add('crayons-link--current'); + if (className.indexOf('crayons-navigation__item--current') === -1) { + e.target.classList.add('crayons-navigation__item--current'); window.history.replaceState( null, null, diff --git a/app/views/articles/index.html.erb b/app/views/articles/index.html.erb index 55112fa4d..d7fd79dd1 100644 --- a/app/views/articles/index.html.erb +++ b/app/views/articles/index.html.erb @@ -38,41 +38,42 @@
<%= render(partial: "onboardings/task_card") if user_signed_in? %> -
-

Posts

- -