diff --git a/app/assets/javascripts/initializers/initializeSpecialNavigationFunctionality.js b/app/assets/javascripts/initializers/initializeSpecialNavigationFunctionality.js index 2266861c0..80d2582a0 100644 --- a/app/assets/javascripts/initializers/initializeSpecialNavigationFunctionality.js +++ b/app/assets/javascripts/initializers/initializeSpecialNavigationFunctionality.js @@ -6,21 +6,21 @@ function initializeSpecialNavigationFunctionality() { if (connectLink) { if (document.getElementById('notifications-container')) { notificationsLink.blur(); - notificationsLink.classList.add('top-bar__link--current'); + notificationsLink.classList.add('crayons-header__link--current'); } else { - notificationsLink.classList.remove('top-bar__link--current'); + notificationsLink.classList.remove('crayons-header__link--current'); } if (document.getElementById('chat')) { connectLink.blur(); - connectLink.classList.add('top-bar__link--current'); + connectLink.classList.add('crayons-header__link--current'); } else { - connectLink.classList.remove('top-bar__link--current'); + connectLink.classList.remove('crayons-header__link--current'); } if (document.getElementById('moderation-page')) { moderationLink.blur(); - moderationLink.classList.add('top-bar__link--current'); + moderationLink.classList.add('crayons-header__link--current'); } else { - moderationLink.classList.remove('top-bar__link--current'); + moderationLink.classList.remove('crayons-header__link--current'); } } } diff --git a/app/assets/javascripts/initializers/initializeTouchDevice.js b/app/assets/javascripts/initializers/initializeTouchDevice.js index c9557c7f8..b032c46e4 100644 --- a/app/assets/javascripts/initializers/initializeTouchDevice.js +++ b/app/assets/javascripts/initializers/initializeTouchDevice.js @@ -8,23 +8,23 @@ function getClassList(className) { function blur(event, className) { setTimeout(() => { if (document.activeElement !== getById(className)) { - getClassList('top-bar__menu').remove('showing'); + getClassList('crayons-header__menu').remove('showing'); } }, 10); } function removeShowingMenu() { - getClassList('top-bar__menu').remove('showing'); + getClassList('crayons-header__menu').remove('showing'); setTimeout(() => { - getClassList('top-bar__menu').remove('showing'); + getClassList('crayons-header__menu').remove('showing'); }, 5); setTimeout(() => { - getClassList('top-bar__menu').remove('showing'); + getClassList('crayons-header__menu').remove('showing'); }, 150); } function toggleMenu() { - getClassList('top-bar__menu').toggle('showing'); + getClassList('crayons-header__menu').toggle('showing'); } function initializeTouchDevice() { @@ -40,9 +40,9 @@ function initializeTouchDevice() { // Use a named function instead of anonymous so duplicate event handlers are discarded getById('navigation-butt').addEventListener('click', toggleMenu); } else { - getClassList('top-bar__menu').add('desktop'); + getClassList('crayons-header__menu').add('desktop'); getById('navigation-butt').addEventListener('focus', (e) => - getClassList('top-bar__menu').add('showing'), + getClassList('crayons-header__menu').add('showing'), ); getById('last-nav-link').addEventListener('blur', (e) => blur(e, 'second-last-nav-link'), diff --git a/app/assets/stylesheets/_mixins.scss b/app/assets/stylesheets/_mixins.scss index 231fe0054..f04ad7ece 100644 --- a/app/assets/stylesheets/_mixins.scss +++ b/app/assets/stylesheets/_mixins.scss @@ -11,21 +11,6 @@ #{$property}: var(--#{$cssVariable}, #{$fallback}); } -/** -* -* Makes working with themeable CSS variables easier. Used when -* a CSS variable requires !important as a postfix of the CSS property's -* value where the CSS variable is being used. -* -* $property: the CSS property to theme. -* $cssVariable: The CSS variable that will store the themed value. -* $fallback: The value to use as a fallback but as well for the CSS variable default value. -*/ -@mixin themeable-important($property, $cssVariable, $fallback) { - #{$property}: #{$fallback} !important; - #{$property}: var(--#{$cssVariable}, #{$fallback}) !important; -} - /* Mixin for a load more wrapper, made by a container div and child button */ @mixin load-more() { text-align: center; diff --git a/app/assets/stylesheets/article-show.scss b/app/assets/stylesheets/article-show.scss index 66e990328..8e4a866b2 100644 --- a/app/assets/stylesheets/article-show.scss +++ b/app/assets/stylesheets/article-show.scss @@ -6,7 +6,7 @@ height: 10px; } -body.default-navbar-config { +body.default-header { .crayons-article .crayons-article__body [id] { scroll-margin-top: var(--header-height); } diff --git a/app/assets/stylesheets/base/helpers.scss b/app/assets/stylesheets/base/helpers.scss index 6251b1c57..d924267d0 100644 --- a/app/assets/stylesheets/base/helpers.scss +++ b/app/assets/stylesheets/base/helpers.scss @@ -12,27 +12,42 @@ -webkit-box-orient: vertical; } +.branded-2 { + border-top: var(--su-2) solid var(--accent-brand); +} - .branded-2 { - border-top: var(--su-2) solid var(--accent-brand); - } +.branded-3 { + border-top: var(--su-3) solid var(--accent-brand); +} - .branded-3 { - border-top: var(--su-3) solid var(--accent-brand); - } +.branded-4 { + border-top: var(--su-4) solid var(--accent-brand); +} - .branded-4 { - border-top: var(--su-4) solid var(--accent-brand); - } +.branded-5 { + border-top: var(--su-5) solid var(--accent-brand); +} - .branded-5 { - border-top: var(--su-5) solid var(--accent-brand); - } +.branded-6 { + border-top: var(--su-6) solid var(--accent-brand); +} - .branded-6 { - border-top: var(--su-6) solid var(--accent-brand); - } +.branded-7 { + border-top: var(--su-7) solid var(--accent-brand); +} - .branded-7 { - border-top: var(--su-7) solid var(--accent-brand); +@media print { + .print-hidden { + display: none; } +} + +/* Hide headers for screen readers */ +// TODO: remove when #10424 and #10508 are merged. +.visually-hidden-header { + position: absolute; + left: -10000px; + width: 1px; + height: 1px; + overflow: hidden; +} diff --git a/app/assets/stylesheets/base/layout.scss b/app/assets/stylesheets/base/layout.scss index a6267ad7e..76f7b72f5 100644 --- a/app/assets/stylesheets/base/layout.scss +++ b/app/assets/stylesheets/base/layout.scss @@ -202,3 +202,47 @@ right: 0; } } + +// Zen Mode +// It's here because it affects the layout. +.zen-mode { + --site-width: 1024px; + --header-height: 0; + .crayons-layout { + --layout: var(--layout-sidebar-left-width) 1fr; + @media (min-width: $breakpoint-m) { + --layout: var(--layout-sidebar-left-width) 1fr; + } + } + .crayons-header, + .crayons-footer, + .crayons-article-sticky, + .crayons-layout__sidebar-right { + display: none; + } +} + +// Used for bigger sections paddings (posts for example) +// It's here because it affects the layout. +:root { + --content-padding-x: var(--su-3); + --content-padding-y: var(--su-3); + + @media (min-width: $breakpoint-s) { + --content-padding-x: var(--su-5); + --content-padding-y: var(--su-5); + } + + @media (min-width: $breakpoint-m) { + --content-padding-x: var(--su-8); + --content-padding-y: var(--su-7); + } + + @media (min-width: $breakpoint-xl) { + --content-padding-x: var(--su-9); + } +} + +.text-padding { + padding: var(--content-padding-y) var(--content-padding-x); +} diff --git a/app/assets/stylesheets/base/main.scss b/app/assets/stylesheets/base/main.scss new file mode 100644 index 000000000..edb949331 --- /dev/null +++ b/app/assets/stylesheets/base/main.scss @@ -0,0 +1,33 @@ +@import '../config/import'; + +body { + background: var(--body-bg); + color: var(--body-color); + font-family: var(--ff-sans-serif); + padding: 0; + margin: 0; + overflow-y: scroll; + display: flex; + flex-direction: column; + min-height: 100vh; + + &.hidden-shell { + padding-top: 0 !important; + + .crayons-header, + .crayons-footer { + display: none; + } + } + + &.default-header { + padding-top: var(--header-height); + min-height: calc(100vh - var(--header-height)); + } +} + +.wrapper { + flex: 1 auto; + visibility: visible; + font-size: 18px; +} diff --git a/app/assets/stylesheets/base/reset.scss b/app/assets/stylesheets/base/reset.scss index 081ab0acb..12810a249 100644 --- a/app/assets/stylesheets/base/reset.scss +++ b/app/assets/stylesheets/base/reset.scss @@ -47,7 +47,6 @@ pre { // Set core body defaults body { - min-height: calc(100vh - var(--header-height)); scroll-behavior: smooth; text-rendering: optimizeSpeed; line-height: 1.5; @@ -84,12 +83,22 @@ textarea { margin: 0; } +// Drop default outline (Crayons provides custom) +input[type='text'], +textarea, +input[type='url'], +input[type='email'], +input[type='password'] { + outline: 0; +} + // Correct the inability to style clickable types in iOS and Safari. button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; + cursor: pointer; } // Remove default stylings for fieldset diff --git a/app/assets/stylesheets/base/typography.scss b/app/assets/stylesheets/base/typography.scss index c8ec8fa29..f7e7afd90 100644 --- a/app/assets/stylesheets/base/typography.scss +++ b/app/assets/stylesheets/base/typography.scss @@ -1,4 +1,15 @@ @import '../mixins'; +@import '../config/import'; + +:root { + --content-rythm: var(--su-2); + --content-font-size: var(--fs-l); + + @media (min-width: $breakpoint-m) { + --content-rythm: var(--su-4); + --content-font-size: var(--fs-xl); + } +} @font-face { font-family: OpenDyslexic; @@ -47,3 +58,225 @@ body { --content-font-family: var(--ff-dyslexic); } } + +.text-styles { + font-size: var(--content-font-size); + font-family: var(--content-font-family); + + a { + code { + color: var(--link-color); + } + + &.anchor { + padding-top: 0; + margin-top: 0; + top: -50px; + display: block; + visibility: hidden; + position: relative; + } + } + + h1, + h2, + h3, + h4, + h5, + h6 { + font-family: var(--ff-sans-serif); + margin: var(--content-rythm) 0; + margin-top: calc(var(--content-rythm) * 2); + padding: 0; + } + + h1 { + font-size: 1.85em; + line-height: 1.25em; + font-weight: 400; + } + + h2 { + font-size: 1.7em; + font-weight: 400; + line-height: 1.25em; + margin-bottom: 0.5em; + } + + h3 { + font-size: 1.32em; + font-weight: 400; + } + + hr { + width: 25%; + opacity: 0.1; + border: 1px solid var(--body-color); + margin: 1.3em auto 1.5em; + } + + p { + margin: var(--content-rythm) 0; + } + + ul, + ol { + padding-left: var(--su-6); + margin: var(--content-rythm) 0; + br { + line-height: 0; + margin: 0; + padding: 0; + } + } + + ul { + list-style-type: disc; + + p { + margin: 0; + padding: 0; + } + + ul { + margin: 0 0.7em 0 1.9em; + list-style-type: square; + + ul { + list-style-type: circle; + } + } + } + + li { + margin: var(--su-2) 0; + } + + figure { + margin: 0; + } + + figcaption { + font-style: italic; + text-align: center; + font-size: 0.8em; + line-height: 1.4em; + color: var(--body-color); + opacity: 0.75; + display: block; + } + + p + figcaption { + margin-top: -0.8em; + } + + blockquote { + border-left: 4px solid var(--base-50); + padding: 0 var(--su-4); + margin: var(--content-rythm) 0; + + p:first-child { + margin: var(--su-2) 0; + } + + &.twitter-tweet { + font-family: var(--ff-sans-serif); + background: var(--body-color-inverted); + max-width: 456px; + border: 1px solid #e9eef2; + font-size: 0.75em; + line-height: 1.35em; + border-radius: 5px; + margin: 1.6em auto; + padding: 60px 10px 18px; + color: white; + min-height: 60px; + padding: 33px 15px 8px; + + a { + color: white; + } + + @media screen and (min-width: $breakpoint-s) { + padding: 60px 22px 18px; + min-height: 105px; + } + } + } + + kbd { + display: inline-block; + padding: 3px 5px; + font-size: 11px; + line-height: 10px; + color: #444d56; + vertical-align: middle; + background-color: #fafbfc; + border: solid 1px #c6cbd1; + border-bottom-color: #959da5; + border-radius: 3px; + box-shadow: inset 0 -1px 0 #959da5; + } + + pre:not(.highlight), + div.highlight { + margin: var(--content-rythm) 0; + } + + img { + height: auto; + position: relative; + display: block; + margin: auto; + max-width: 100%; + max-height: calc(50vh + 180px); + border-radius: var(--radius); + } + + a.article-body-image-wrapper { + cursor: zoom-in; + } + + iframe { + width: 100%; + border: 0; + margin: var(--content-rythm) 0; + } + + .fluidvids { + margin: var(--content-rythm) 0; + + iframe { + margin: 0; + } + } + + .table-wrapper-paragraph { + width: 100%; + margin-left: 0%; + overflow-x: auto; + } + + table { + border-collapse: collapse; + font-size: 0.78em; + margin: 0.8em auto 1.2em; + table-layout: fixed; + + th { + border: 1px solid rgba(0, 0, 0, 0.1); + padding: 5px 1vw; + background: var(--body-bg); + text-align: left; + } + + td { + border: 1px solid rgba(0, 0, 0, 0.1); + padding: 5px 1vw; + } + } + + .twitter-tweet { + margin: auto; + } +} diff --git a/app/assets/stylesheets/buttons.scss b/app/assets/stylesheets/buttons.scss index e67c2268f..31b3e588d 100644 --- a/app/assets/stylesheets/buttons.scss +++ b/app/assets/stylesheets/buttons.scss @@ -8,4 +8,7 @@ -webkit-appearance: none; font-stretch: condensed; font-weight: bold; + &.cta-danger { + background: $red; + } } diff --git a/app/assets/stylesheets/views/top-bar.scss b/app/assets/stylesheets/components/header.scss similarity index 68% rename from app/assets/stylesheets/views/top-bar.scss rename to app/assets/stylesheets/components/header.scss index aa509bb07..28b2979b9 100644 --- a/app/assets/stylesheets/views/top-bar.scss +++ b/app/assets/stylesheets/components/header.scss @@ -1,25 +1,19 @@ @import '../config/import'; -.top-bar { +.crayons-header { --indicator-outline: var(--header-bg); --dropdown-display: none; - position: fixed; - top: 0px; - left: 0px; - right: 0px; - z-index: 102; // Must be higher than the z-index of the broadcast-wrapper. height: var(--header-height); background: var(--header-bg); box-shadow: 0 1px 1px var(--header-shadow); - &, - &::after, - &::before, - & *, - & *::after, - & *::before { - box-sizing: border-box; // todo: make it global when ready + .default-header & { + position: fixed; + top: 0px; + left: 0px; + right: 0px; + z-index: 102; // Must be higher than the z-index of the broadcast-wrapper. } &__container { @@ -45,7 +39,7 @@ } // Logo -.top-bar--logo { +.site-logo { display: flex; .logo { @@ -59,7 +53,7 @@ } // Search bar -.top-bar--search { +.crayons-header--search { max-width: 420px; flex: 1 auto; margin: 0 var(--su-2); @@ -70,45 +64,47 @@ } // Actions on right side... -.top-bar__links { - height: var(--header-height); - display: flex; - align-items: center; - margin-left: auto; -} - -.top-bar__link { - position: relative; - display: flex; - padding: var(--su-2); - margin: 0 var(--su-1); - border-radius: 50%; - align-items: center; - color: var(--header-icons-color); - outline: 0; - transition: background var(--transition-props); - - &:hover, - &:focus { - --indicator-outline: var(--header-bg-hover); - - color: var(--header-icons-color-hover); - background: var(--header-bg-hover); +.crayons-header { + &__links { + height: var(--header-height); + display: flex; + align-items: center; + margin-left: auto; } - &--current { - --indicator-outline: var(--header-bg-current); + &__link { + position: relative; + display: flex; + padding: var(--su-2); + margin: 0 var(--su-1); + border-radius: 50%; + align-items: center; + color: var(--header-icons-color); + outline: 0; + transition: background var(--transition-props); - color: var(--header-icons-color-hover); - background: var(--header-bg-current) !important; - .crayons-indicator { - display: none; + &:hover, + &:focus { + --indicator-outline: var(--header-bg-hover); + + color: var(--header-icons-color-hover); + background: var(--header-bg-hover); + } + + &--current { + --indicator-outline: var(--header-bg-current); + + color: var(--header-icons-color-hover); + background: var(--header-bg-current) !important; + .crayons-indicator { + display: none; + } } } } // Dropdown under profile picture / hamburger icon -.top-bar__menu { +.crayons-header__menu { height: 100%; display: flex; align-items: center; @@ -132,7 +128,7 @@ &.desktop:focus { --dropdown-display: block; - .top-bar__menu__trigger { + .crayons-header__menu__trigger { color: var(--header-icons-color-hover); background: var(--header-bg-hover); } @@ -225,3 +221,29 @@ } } } + +.navigation-progress { + --duration: 3600ms; + --delay: 250ms; + position: fixed; + top: 0; + background: var(--accent-brand); + z-index: 103; + height: var(--su-1); + width: 0; + &.showing { + display: block; + animation: showProgressBar var(--duration) ease-in-out; + animation-delay: var(--delay); + animation-fill-mode: forwards; + } +} + +@keyframes showProgressBar { + 0% { + width: 0; + } + 100% { + width: 100%; + } +} diff --git a/app/assets/stylesheets/components/rich-selectors.scss b/app/assets/stylesheets/components/rich-selectors.scss deleted file mode 100644 index e69de29bb..000000000 diff --git a/app/assets/stylesheets/crayons.scss b/app/assets/stylesheets/crayons.scss index 2654b94d5..955141a05 100644 --- a/app/assets/stylesheets/crayons.scss +++ b/app/assets/stylesheets/crayons.scss @@ -3,6 +3,7 @@ @import 'config/generator'; @import 'base/reset'; +@import 'base/main'; @import 'base/helpers'; @import 'base/icons'; @import 'base/layout'; @@ -15,6 +16,7 @@ @import 'components/comments'; @import 'components/dropdowns'; @import 'components/forms'; +@import 'components/header'; @import 'components/headers'; @import 'components/indicators'; @import 'components/loaders'; @@ -29,13 +31,3 @@ @import 'components/tables'; @import 'components/tabs'; @import 'components/tags'; - -@import 'views/article'; -@import 'views/article-form'; -@import 'views/footer'; -@import 'views/listings'; -@import 'views/dashboard'; -@import 'views/profile'; -@import 'views/signin'; -@import 'views/sponsors'; -@import 'views/top-bar'; diff --git a/app/assets/stylesheets/dashboard.scss b/app/assets/stylesheets/dashboard.scss index 7b825c134..5dbd63c38 100644 --- a/app/assets/stylesheets/dashboard.scss +++ b/app/assets/stylesheets/dashboard.scss @@ -398,7 +398,6 @@ } .toggles button { - @include themeable-important(color, theme-color, $black); display: inline-block; padding: 2px 8px; margin: 8px; diff --git a/app/assets/stylesheets/fundamentals.scss b/app/assets/stylesheets/fundamentals.scss index 571f60b23..574a81ce2 100644 --- a/app/assets/stylesheets/fundamentals.scss +++ b/app/assets/stylesheets/fundamentals.scss @@ -1,3 +1,5 @@ +@import 'variables'; + #error_explanation { width: 100%; border: 2px solid #d94949; @@ -22,3 +24,39 @@ border-radius: 5px; } } + +// Remove post confirmation +.delete-confirm.container { + padding: 150px 10px; + min-height: 300px; + text-align: center; + h4 { + background: $black; + padding: 5px 8px; + color: $white; + display: inline-block; + margin-bottom: 0px; + border-radius: 3px; + } + h2 { + font-size: 22px; + margin-bottom: 40px; + } + a.delete-link { + background: $red; + color: white; + padding: 10px 15px; + &:hover { + color: white; + opacity: 0.9; + } + } + form button { + background: $red; + color: white; + font-size: 1.5em; + border: 0px; + border-radius: 3px; + padding: 6px 12px; + } +} diff --git a/app/assets/stylesheets/minimal.scss b/app/assets/stylesheets/minimal.scss index 79ab3b401..dedf70b9d 100644 --- a/app/assets/stylesheets/minimal.scss +++ b/app/assets/stylesheets/minimal.scss @@ -13,7 +13,6 @@ @import 'comments'; @import 'notifications'; @import 'notifications-welcome-broadcast'; -@import 'signup-modal'; @import 'live'; @import 'preact/sidebar-widget'; @import 'preact/article-form'; diff --git a/app/assets/stylesheets/scaffolds.scss b/app/assets/stylesheets/scaffolds.scss index 404d03a70..34bd11fc1 100644 --- a/app/assets/stylesheets/scaffolds.scss +++ b/app/assets/stylesheets/scaffolds.scss @@ -3,18 +3,6 @@ @import 'variables'; @import 'mixins'; -body { - background: var(--body-bg); - color: var(--body-color); - font-family: var(--ff-sans-serif); - padding: 0; - margin: 0; - overflow-y: scroll; - padding-top: var(--header-height); - display: flex; - flex-direction: column; -} - #audiocontent { display: none; } @@ -36,44 +24,6 @@ body { height: 90vh; } -.zen-mode { - .top-bar, - .crayons-article-sticky, - .crayons-article-actions { - display: none; - } -} - -@media print { - .top-bar, - .crayons-article-sticky { - display: none; - } -} - -.config_minimize_newest_listings { - #sidebar-listings-widget { - .widget-body { - display: none !important; - } - } -} - -.universal-page-content-wrapper { - flex: 1 auto; - visibility: visible; - font-size: 18px; -} - -/* Hide headers for screen readers */ -.visually-hidden-header { - position: absolute; - left: -10000px; - width: 1px; - height: 1px; - overflow: hidden; -} - a { color: var(--link-brand-color); text-decoration: none; @@ -90,33 +40,6 @@ div { display: none; } -.cta { - color: $black; - background: $green; - font-family: $helvetica-condensed; - -webkit-appearance: none; - font-stretch: condensed; - font-weight: bold; - &.cta-danger { - background: $red; - } -} - -button { - cursor: pointer; -} - -input[type='submit'] { - cursor: pointer; -} - -input[type='text'], -textarea, -input[type='url'], -input[type='email'] { - outline: 0; -} - .partner-image-dark-mode { display: none !important; } @@ -130,9 +53,7 @@ body.ten-x-hacker-theme { .icon-image, .dev-badge, .chatchannels__config img, - .message__actions img, - .external-link-img, - .group-img { + .message__actions img { -webkit-filter: invert(95%); filter: invert(95%); } @@ -146,10 +67,6 @@ body.ten-x-hacker-theme { .partner-image-light-mode { display: none !important; } - - .not-dark-theme-text-compatible { - @include themeable-important(color, theme-secondary-color, white); - } } .broadcast-wrapper { @@ -160,6 +77,10 @@ body.ten-x-hacker-theme { text-align: center; width: 100%; z-index: 101; // Must be higher than the z-index of the sticky-nav. + + .static-header & { + position: relative; + } } .broadcast-visible { @@ -171,17 +92,6 @@ body.ten-x-hacker-theme { align-self: center; } -body.static-navbar-config { - padding-top: 0; - .top-bar { - position: relative !important; - } - - .broadcast-wrapper { - position: relative; // Unset fixed position for static navbar config. - } -} - .trusted-visible-block { display: none !important; } @@ -190,56 +100,6 @@ body.trusted-status-true .trusted-visible-block { display: flex !important; } -body.hidden-shell { - .top-bar, - footer { - display: none; - } - .container { - margin-top: 0px; - } - .universal-page-content-wrapper { - margin-top: calc(var(--header-height) * -1) !important; - margin-bottom: 30px; - } -} - -// Remove post confirmation -.delete-confirm.container { - padding: 150px 10px; - min-height: 300px; - text-align: center; - h4 { - background: $black; - padding: 5px 8px; - color: $white; - display: inline-block; - margin-bottom: 0px; - border-radius: 3px; - } - h2 { - font-size: 22px; - margin-bottom: 40px; - } - a.delete-link { - background: $red; - color: white; - padding: 10px 15px; - &:hover { - color: white; - opacity: 0.9; - } - } - form button { - background: $red; - color: white; - font-size: 1.5em; - border: 0px; - border-radius: 3px; - padding: 6px 12px; - } -} - .app-shell-loader { position: absolute; top: 200px; diff --git a/app/assets/stylesheets/shared.scss b/app/assets/stylesheets/shared.scss index c7b877b2c..aaa335726 100644 --- a/app/assets/stylesheets/shared.scss +++ b/app/assets/stylesheets/shared.scss @@ -1,5 +1,4 @@ @import 'config/import'; -@import 'variables'; #audiocontent { position: fixed; @@ -187,36 +186,10 @@ } } -.navigation-progress { - --duration: 3600ms; - --delay: 250ms; - position: fixed; - top: 0; - background: var(--accent-brand); - z-index: 103; - height: var(--su-1); - width: 0; - &.showing { - display: block; - animation: showProgressBar var(--duration) ease-in-out; - animation-delay: var(--delay); - animation-fill-mode: forwards; - } -} - -@keyframes showProgressBar { - 0% { - width: 0; - } - 100% { - width: 100%; - } -} - .global-notice { font-family: var(--ff-sans-serif); - background: $green; - color: black; + background: var(--accent-success-darker); + color: white; padding: 20px 0px 20px; text-align: center; position: relative; diff --git a/app/assets/stylesheets/views.scss b/app/assets/stylesheets/views.scss new file mode 100644 index 000000000..8b4d1cd59 --- /dev/null +++ b/app/assets/stylesheets/views.scss @@ -0,0 +1,9 @@ +@import 'views/article'; +@import 'views/article-form'; +@import 'views/footer'; +@import 'views/listings'; +@import 'views/dashboard'; +@import 'views/profile'; +@import 'views/signin'; +@import 'views/signup-modal'; +@import 'views/sponsors'; diff --git a/app/assets/stylesheets/views/article-form.scss b/app/assets/stylesheets/views/article-form.scss index 04d236b04..8b9892900 100644 --- a/app/assets/stylesheets/views/article-form.scss +++ b/app/assets/stylesheets/views/article-form.scss @@ -168,10 +168,10 @@ position: sticky; top: 0; background: var(--base-0); - padding: var(--su-2) var(--article-padding-x); - margin: calc(var(--article-padding-y) * -1) - calc(var(--article-padding-x) * -1) var(--su-6) - calc(var(--article-padding-x) * -1); + padding: var(--su-2) var(--content-padding-x); + margin: calc(var(--content-padding-y) * -1) + calc(var(--content-padding-x) * -1) var(--su-6) + calc(var(--content-padding-x) * -1); > :first-child { margin-left: calc(var(--su-2) * -1); diff --git a/app/assets/stylesheets/views/article.scss b/app/assets/stylesheets/views/article.scss index 30b43882a..ac14dfb04 100644 --- a/app/assets/stylesheets/views/article.scss +++ b/app/assets/stylesheets/views/article.scss @@ -1,28 +1,5 @@ @import '../config/import'; -:root { - --article-rythm: var(--su-2); - --article-padding-x: var(--su-3); - --article-padding-y: var(--su-3); - --article-font-size: var(--fs-l); - - @media (min-width: $breakpoint-s) { - --article-padding-x: var(--su-5); - --article-padding-y: var(--su-5); - } - - @media (min-width: $breakpoint-m) { - --article-rythm: var(--su-4); - --article-padding-x: var(--su-8); - --article-padding-y: var(--su-7); - --article-font-size: var(--fs-xl); - } - - @media (min-width: $breakpoint-xl) { - --article-padding-x: var(--su-9); - } -} - .article-wrapper { // Hack preventing content exceeding its container - it works for scenarios where we have // `pre` tag having wide (overflowing) text. And the container itself is part of a layout @@ -66,8 +43,8 @@ word-break: break-word; &__meta { - padding: var(--article-padding-y) var(--article-padding-x) 0 - var(--article-padding-x); + padding: var(--content-padding-y) var(--content-padding-x) 0 + var(--content-padding-x); } } @@ -80,7 +57,7 @@ } &__main { - padding: var(--article-padding-y) var(--article-padding-x); + padding: var(--content-padding-y) var(--content-padding-x); gap: var(--su-7); } @@ -88,231 +65,6 @@ overflow-wrap: break-word; } } -.text-styles { - font-size: var(--article-font-size); - font-family: var(--content-font-family); - - a { - code { - color: var(--link-color); - } - - &.anchor { - padding-top: 0; - margin-top: 0; - top: -50px; - display: block; - visibility: hidden; - position: relative; - } - } - - h1, - h2, - h3, - h4, - h5, - h6 { - font-family: var(--ff-sans-serif); - margin: var(--article-rythm) 0; - margin-top: calc(var(--article-rythm) * 2); - padding: 0; - } - - h1 { - font-size: 1.85em; - line-height: 1.25em; - font-weight: 400; - } - - h2 { - font-size: 1.7em; - font-weight: 400; - line-height: 1.25em; - margin-bottom: 0.5em; - } - - h3 { - font-size: 1.32em; - font-weight: 400; - } - - hr { - width: 25%; - opacity: 0.1; - border: 1px solid var(--body-color); - margin: 1.3em auto 1.5em; - } - - p { - margin: var(--article-rythm) 0; - } - - ul, - ol { - padding-left: var(--su-6); - margin: var(--article-rythm) 0; - br { - line-height: 0; - margin: 0; - padding: 0; - } - } - - ul { - list-style-type: disc; - - p { - margin: 0; - padding: 0; - } - - ul { - margin: 0 0.7em 0 1.9em; - list-style-type: square; - - ul { - list-style-type: circle; - } - } - } - - li { - margin: var(--su-2) 0; - } - - figure { - margin: 0; - } - - figcaption { - font-style: italic; - text-align: center; - font-size: 0.8em; - line-height: 1.4em; - color: var(--body-color); - opacity: 0.75; - display: block; - } - - p + figcaption { - margin-top: -0.8em; - } - - blockquote { - border-left: 4px solid var(--base-50); - padding: 0 var(--su-4); - margin: var(--article-rythm) 0; - - p:first-child { - margin: var(--su-2) 0; - } - - &.twitter-tweet { - font-family: var(--ff-sans-serif); - background: var(--body-color-inverted); - max-width: 456px; - border: 1px solid #e9eef2; - font-size: 0.75em; - line-height: 1.35em; - border-radius: 5px; - margin: 1.6em auto; - padding: 60px 10px 18px; - color: white; - min-height: 60px; - padding: 33px 15px 8px; - - a { - color: white; - } - - @media screen and (min-width: $breakpoint-s) { - padding: 60px 22px 18px; - min-height: 105px; - } - } - } - - kbd { - display: inline-block; - padding: 3px 5px; - font-size: 11px; - line-height: 10px; - color: #444d56; - vertical-align: middle; - background-color: #fafbfc; - border: solid 1px #c6cbd1; - border-bottom-color: #959da5; - border-radius: 3px; - box-shadow: inset 0 -1px 0 #959da5; - } - - pre:not(.highlight), - div.highlight { - margin: var(--article-rythm) 0; - } - - img { - height: auto; - position: relative; - display: block; - margin: auto; - max-width: 100%; - max-height: calc(50vh + 180px); - border-radius: var(--radius); - } - - a.article-body-image-wrapper { - cursor: zoom-in; - } - - iframe { - width: 100%; - border: 0; - margin: var(--article-rythm) 0; - } - - .fluidvids { - margin: var(--article-rythm) 0; - - iframe { - margin: 0; - } - } - - .table-wrapper-paragraph { - width: 100%; - margin-left: 0%; - overflow-x: auto; - } - - table { - border-collapse: collapse; - font-size: 0.78em; - margin: 0.8em auto 1.2em; - table-layout: fixed; - - th { - border: 1px solid rgba(0, 0, 0, 0.1); - padding: 5px 1vw; - background: var(--body-bg); - text-align: left; - } - - td { - border: 1px solid rgba(0, 0, 0, 0.1); - padding: 5px 1vw; - } - } - - .twitter-tweet { - margin: auto; - } -} - -.text-padding { - padding: var(--article-padding-y) var(--article-padding-x); -} .crayons-article-actions { position: fixed; @@ -515,7 +267,7 @@ position: -webkit-sticky; position: sticky; top: calc(var(--header-height) + var(--layout-padding)); - .static-navbar-config & { + .static-header & { top: var(--layout-padding); } } diff --git a/app/assets/stylesheets/views/signup-modal.scss b/app/assets/stylesheets/views/signup-modal.scss new file mode 100644 index 000000000..6e103a9b9 --- /dev/null +++ b/app/assets/stylesheets/views/signup-modal.scss @@ -0,0 +1,105 @@ +@import '../config/import'; + +.authentication-modal { + &__box { + position: relative; + margin-left: var(--su-4); + margin-right: var(--su-4); + height: auto; + width: auto; + + @include generate-box( + $level: 2, + $bg: var(--base-inverted), + $border: var(--base), + $color: var(--card-color) + ); + + @media (min-width: $breakpoint-s) { + margin: inherit; + } + } + + &__close-btn { + position: absolute; + top: var(--su-3); + right: var(--su-3); + } + + &__container { + display: grid; + grid-gap: var(--su-2); + padding: var(--su-4); + + @media (min-width: $breakpoint-s) { + padding: var(--su-8) var(--su-8) var(--su-6); + } + } + &__image-container { + width: var(--su-8); + height: var(--su-8); + margin-bottom: var(--su-2); + + @media (min-width: $breakpoint-s) { + height: 80px; + width: 80px; + } + } + + &__image { + border-radius: var(--radius); + transform: rotate(-10deg); + height: auto; + width: 100%; + } + + &__content { + display: grid; + grid-gap: var(--su-1); + } + + &__title { + color: var(--card-color); + font-size: var(--fs-2xl); + line-height: var(--lh-tight); + + @media (min-width: $breakpoint-s) { + font-size: var(--fs-3xl); + } + } + + &__description { + color: var(--card-color-secondary); + } + + &__actions { + display: grid; + grid-gap: var(--su-1); + padding: 0 var(--su-4) var(--su-4); + + @media (min-width: $breakpoint-s) { + display: flex; + flex-direction: column; + width: 100%; + margin: 0 auto; + justify-self: center; + padding: 0 var(--su-8) var(--su-7); + } + } + + &__footer { + border-top: 2px solid var(--base-100); + padding: var(--su-2) var(--su-4); + + @media (min-width: $breakpoint-s) { + padding: var(--su-5) var(--su-8); + } + } + + &__footer-label { + font-size: var(--fs-s); + line-height: var(--lh-tight); + color: var(--card-color-secondary); + text-align: center; + } +} diff --git a/app/decorators/user_decorator.rb b/app/decorators/user_decorator.rb index 78feb646a..2153257e1 100644 --- a/app/decorators/user_decorator.rb +++ b/app/decorators/user_decorator.rb @@ -58,7 +58,7 @@ class UserDecorator < ApplicationDecorator config_theme.tr("_", "-"), "#{config_font_name.tr('_', '-')}-article-body", "trusted-status-#{trusted}", - "#{config_navbar.tr('_', '-')}-navbar-config", + "#{config_navbar.tr('_', '-')}-header", ] body_class.join(" ") end diff --git a/app/javascript/.storybook/preview.js b/app/javascript/.storybook/preview.js index 3d3c5dec1..e2b9c7967 100644 --- a/app/javascript/.storybook/preview.js +++ b/app/javascript/.storybook/preview.js @@ -3,6 +3,7 @@ import { addDecorator, addParameters } from '@storybook/preact'; import '../../assets/stylesheets/minimal.scss'; import '../../assets/stylesheets/crayons.scss'; +import '../../assets/stylesheets/views.scss'; import '../../assets/javascripts/lib/xss'; import '../../assets/javascripts/utilities/timeAgo'; import './storybook.scss'; diff --git a/app/javascript/Search/SearchForm.jsx b/app/javascript/Search/SearchForm.jsx index 8c7b8d1fb..881f81baf 100644 --- a/app/javascript/Search/SearchForm.jsx +++ b/app/javascript/Search/SearchForm.jsx @@ -16,7 +16,7 @@ export const SearchForm = ({ > { - const root = document.getElementById('top-bar--search'); + const root = document.getElementById('header-search'); render(, root); }); diff --git a/app/javascript/packs/homePage.jsx b/app/javascript/packs/homePage.jsx index d7886e2cb..32c51e5de 100644 --- a/app/javascript/packs/homePage.jsx +++ b/app/javascript/packs/homePage.jsx @@ -21,28 +21,6 @@ if (mainNavMoreTrigger) { mainNavMoreTrigger.addEventListener('click', toggleMainNavMore); } -function toggleListingsMinimization() { - if (document.body.classList.contains('config_minimize_newest_listings')) { - // Un-minimize - localStorage.setItem('config_minimize_newest_listings', 'no'); - document.body.classList.remove('config_minimize_newest_listings'); - } else { - // Minimize - localStorage.setItem('config_minimize_newest_listings', 'yes'); - document.body.classList.add('config_minimize_newest_listings'); - } -} - -const sidebarListingsMinimizeButton = document.getElementById( - 'sidebar-listings-widget-minimize-button', -); -if (sidebarListingsMinimizeButton) { - sidebarListingsMinimizeButton.addEventListener( - 'click', - toggleListingsMinimization, - ); -} - /** * Renders tags followed in the left side bar of the homepage. * diff --git a/app/views/admin/display_ads/index.html.erb b/app/views/admin/display_ads/index.html.erb index c5d383aa5..e922ee4ab 100644 --- a/app/views/admin/display_ads/index.html.erb +++ b/app/views/admin/display_ads/index.html.erb @@ -1,6 +1,6 @@