Ищу отзывы о моем новом сайте

[45thj5ej]

@Heliosurge

Так как один из участников этой темы находится в Орегоне

Да, я подумал то же самое, как только это прочитал. Я тоже загляну на ваш сайт! На самом деле я начинал с темы Air и довольно сильно кастомизировал её с помощью CSS и прочего, но сравнивая мою текущую тему с той, что была на Air, я не знаю… кажется, она слишком «базовая». Странно, что я так говорю, ведь в целом я люблю минимализм, ха-ха.

@Heliosurge

Так что время суток тоже может влиять на скорость.

Когда @Lilly, @bryce и @omarfilip сказали, что всё работает медленно, это было в конкретное время ночи для меня и примерно в то же время, когда сервер размещён. Не будет ли слишком хлопотно попросить вас, @Heliosurge, @daemon и @merefield, проверить всё через 12 часов, когда другие отмечали замедления, если вы не заняты и не спите, ха-ха? Очень хочется узнать, связано ли это с временем суток.

@daemon

Для меня ваш сайт загрузился мгновенно.

Это действительно здорово слышать! Особенно из другой части мира по сравнению с местом размещения сервера.

@merefield

У меня тоже всё хорошо.

Отлично!! Есть ли у вас ещё какие-либо отзывы или рекомендации?

[bryce (Bryce Huhtala)]

Я только что попробовал, и теперь оно загружается почти мгновенно. Сначала я подумал, что это просто загрузка из кэша памяти, но, похоже, это не так.

[45thj5ej]

А, понятно. Да, странно. Это, похоже, указывает на зависимость от времени суток. Что, в общем-то, логично, учитывая время ночи в месте размещения сервера и то, что в этот час большинство пользователей, вероятно, были онлайн. Тем не менее… у компаний с оборотом в миллионы или миллиарды долларов таких проблем, наверное, нет, независимо от времени суток? То есть, я бывал на крупных сайтах, которые казались медленными, но это случается гораздо реже, чем что-либо другое.

[MikeNolan]

У меня тоже загрузилось очень быстро, в Небраске, при тарифе 500 Мбит/с.

[daemon (Alex)]

Для меня это было бы 3 часа ночи, а это время, когда я обычно сплю.

[omarfilip]

Теперь загружается довольно быстро, в 8:30 утра по тихоокеанскому времени.

[Arkshine]

Страница загружается быстро для меня. Выглядит хорошо.

Что касается Discourse, я не большой поклонник стиля тегов (только моё мнение):

• Это теги; я не ожидаю, что они будут на всю ширину здесь.
• Они визуально привлекают слишком много внимания.
• Проблема с контрастом — их не очень хорошо читать.

Случайный пример:

Удачи!

[45thj5ej]

Спасибо за этот отзыв!
Да, я действительно экспериментировал с шириной тегов, но не смог понять, как центрировать их после изменения размера. Что касается цвета, я действительно не смог найти лучший вариант, который подходил бы и для светлой, и для тёмной темы. Если я сделаю рамку светлее в светлой теме, она будет слишком яркой в тёмной и вызовет ту же проблему.

Например, если я через «Просмотреть код» изменю свойство max width тега на 40%, визуально это будет выглядеть лучше, но я не могу понять, как центрировать весь элемент, потому что при каждой попытке перемещается только текст, а не рамка позади него.

[bryce (Bryce Huhtala)]

Для центрирования этих тегов можно использовать свойства flexbox. Теги находятся внутри родительского контейнера, для которого уже установлено display: flex.

Flexbox позволяет очень легко управлять расположением дочерних элементов внутри контейнера. В инструментах разработчика есть удобная функция: если нажать на маленькую иконку рядом с display: flex, откроется набор элементов управления, с помощью которых можно увидеть, какой из них даёт нужный эффект.

В данном случае достаточно свойства justify-content: center:

Обратите внимание, что это также работает с несколькими тегами:

Это отличный классический учебник по flexbox, если вы хотите изучить тему подробнее. Это очень полезный инструмент для вашего арсенала CSS

[45thj5ej]

Ого, большое спасибо за это! Да, наличие двух тегов выглядит гораздо менее неловко, чем один центральный тег, но, честно говоря, я не вижу, чтобы многие использовали несколько тегов для большинства постов. Хм… возможно, нужно придумать способ отображать там тег и как-то ещё какой-то элемент темы/поста с помощью CSS или чего-то подобного, чтобы там было две вещи. Или, может быть, просто скрыть всё, но ладно.

Или, что ещё лучше, могу ли я заменить этим категорию?

[Arkshine]

@45thj5ej

Что касается цвета

Я бы посоветовал использовать переменные CSS Discourse для цвета, так как это обеспечит лучшую совместимость с тёмной темой. (вы можете проверить любой элемент и прокрутить вниз)

---

Для центрирования: ИЗМЕНЕНИЕ: Брайс уже ответил на это!

.discourse-tags {
    justify-content: center;
}

color: var(--secondary-low) !important;
background: var(--blend-primary-secondary-5) !important;

Вы также можете использовать функцию dark-light-choose(<светлый_цвет>, <тёмный_цвет>), чтобы задать цвета для светлой и тёмной тем, чтобы правильный цвет применялся автоматически в зависимости от включённого режима тёмной темы.

[45thj5ej]

@Arkshine

Вы также можете использовать функцию dark-light-choose(<светлый_цвет>, <темный_цвет>), чтобы задать светлый и темный цвета, чтобы правильный цвет применялся в зависимости от включенного режима темной темы или нет.

Хм, я что-то сделал не так? Когда я вставил это в «Inspect Element», я получил:

background: dark-light-choose(#f0f2f5, #3a3b3c) !important;

[Arkshine]

Это функция SCSS, доступная в ядре Discourse. Вам нужно использовать её в CSS вашей темы, чтобы она была обработана. Она не будет работать, если вы попытаетесь использовать её напрямую в браузере.

[Heliosurge (Dan DeMontmorency)]

Ваш сайт всё ещё загружается быстро. Видно его лишь очень ненадолго.

@45thj5ej

Да, я подумал точно так же, как только прочитал это. Я тоже загляну на ваш сайт! Я на самом деле начинал с темы Air и довольно сильно кастомизировал её с помощью CSS и прочего, но по сравнению с моей текущей темой и той, что была на Air, я не знаю… кажется, это слишком «базово», что странно для меня, ведь в целом я люблю минимализм, ха-ха

Отличная идея с добавлением компонентов по отдельности. Вы опережаете меня, так как я всё ещё изучаю сторону кода. До Discourse очень давно я работал только с базовыми языками: QBasic и старый Turbo Pascal. Но я постепенно продвигаюсь.

[45thj5ej]

Хм, хорошо, значит, в моём файле .scss у меня есть:

.discourse-tags {
        display: flex;
        margin: 1em 0 0 0;
        /* justify-content: center; */
        a {
          display: inherit;
          flex: 1 0 auto;
          justify-content: center;
          max-width: 35%;
          //line-height: var(--line-height-small);
          line-height: 1.1rem;
          border: 0.5em solid transparent;
          /* color: #000000 !important; */
          color: var(--secondary-low) !important;
          background: dark-light-choose(#f0f2f5, #3a3b3c) !important;

Внимание сосредоточено на последних двух строках. Похоже, что в светлом и тёмном режимах цвет остаётся #f0f2f5 вместо переключения на #3a3b3c в тёмном режиме. Есть какая-нибудь идея, почему так происходит?

При проверке через «Инспектор элементов» свойство просто остаётся:
background: #f0f2f5 !important;
Я даже попробовал ссылку, которую вы дали выше, и попытался определить их как $tagbglight и $tagbgdark и т. д., но всё равно безрезультатно.

[45thj5ej]

dark-light-choose('#f0f2f5', '#3a3b3c') выдаёт мне следующее:

Это отчасти тот же результат, что я получал ранее.
Примечание: В «Инструментах разработчика» (Inspect Element) показаны двойные кавычки. В коде я использовал одинарные, как и вы.

[bryce (Bryce Huhtala)]

Хм, раз в итоговом результате вы получаете кавычки, возможно, стоит попробовать это:

dark-light-choose(unquote("#f0f2f5"), unquote("#3a3b3c"))

Хотя я не уверен, поможет ли это выбрать правильный цвет!

[45thj5ej]

Это убирает кавычки, но при переключении между режимами в качестве фона используется только этот цвет: #f0f2f5

[bryce (Bryce Huhtala)]

Это странно. Похоже, что сама функция сравнивает яркость основного и вторичного цветов. Не совсем понятно, почему она не работает.

@function dark-light-choose($light-theme-result, $dark-theme-result) {
  @if is-light-color-scheme() {
    @return $light-theme-result;
  } @else {
    @return $dark-theme-result;
  }
}

@function is-light-color-scheme() {
  @if dc-color-brightness($primary) < dc-color-brightness($secondary) {
    @return true;
  } @else {
    @return false;
  }
}

[Arkshine]

Я считаю, что вам нужно определить переменную CSS в color_definitions.scss.

@awesomerobot

Из-за особенностей компиляции SCSS пользовательские определения для тёмной/светлой темы должны быть добавлены в color_definitions.scss внутри темы и не будут работать в других файлах SCSS.

Например:

:root {
    --bg-custom: dark-light-choose(#f0f2f5, #3a3b3c);
}

Затем вы можете использовать:

background: var(--bg-custom) !important;