Buscando feedback sobre meu novo site

Comunidade
21

Sim, pensei o mesmo assim que li isso. Vou conferir seu site também! Na verdade, comecei com o tema Air e o customizei bastante com CSS e outras coisas, mas com meu tema atual em comparação com o tema Air que eu tinha, não sei… parece muito “básico”, o que é estranho para mim dizer porque gosto de minimalismo em geral, haha.

Quando @Lilly, @bryce e @omarfilip disseram que estava lento, isso foi em um horário específico da noite para mim, e depois aproximadamente no mesmo horário em que o servidor está hospedado. Seria muito incômodo pedir a você, @Heliosurge, e @daemon & @merefield para verificarem daqui a 12 horas, quando os outros disseram que estava lento, se vocês não estiverem ocupados e estiverem acordados, haha? Estou morrendo de vontade de saber se é uma questão de horário.

Muito bom saber disso! Especialmente do outro lado do mundo de onde o servidor está hospedado.

Incrível!! Algum outro feedback/recomendação que você tenha?

1 curtida
22

Acabei de tentar e agora parece estar carregando quase instantaneamente. No início, pensei que estivesse apenas carregando da cache de memória, mas não parece ser o caso.

2 curtidas
23

Ah, ok. Sim, estranho. Isso meio que aponta para um problema de horário do dia, então. O que, quero dizer, faz sentido dado o horário da noite em que era para o servidor e a maioria das pessoas provavelmente online naquela hora. Ainda assim… empresas de milhões/bilhões de dólares provavelmente não têm esse problema, certo, não importa a hora do dia? Quer dizer, eu já estive em grandes sites que pareceram lentos antes, mas é mais raro do que qualquer outra coisa.

24

Carregou muito rápido para mim também, em Nebraska com serviço de 500mb.

1 curtida
25

Para mim seriam 3 da manhã, que é quando eu costumo dormir. :wink:

1 curtida
26

Carrega bem rápido agora às 8h30 PDT.

1 curtida
27

A página carrega rápido para mim. :+1: Parece bom.

Sobre o Discourse, não sou um grande fã da estilização das tags (apenas minha opinião):

image
image740×329 25.6 KB

  • São tags; não espero que fiquem em tela cheia aqui.
  • Visualmente chama muita atenção.
  • Problema de contraste – não é super legível.

Exemplo aleatório:

image
image737×334 25.6 KB

Boa sorte!

2 curtidas
28

Obrigado pelo feedback!
Na verdade, experimentei a largura das tags, mas não consegui descobrir como centralizá-las depois de redimensionadas. Em relação à cor, não consegui encontrar uma cor melhor que combinasse com os modos claro e escuro. Se eu deixar a caixa mais clara no modo claro, ela fica muito brilhante no modo escuro e causa o mesmo problema.

Por exemplo, se eu inspecionar o elemento da tag e alterar a propriedade max-width para 40%, ele aparece visualmente melhor, mas então não consigo descobrir como centralizar tudo, porque toda vez que tento, ele apenas move o texto, não a caixa atrás dele.

29

Para centralizar essas tags, você pode usar propriedades flexbox. As tags estão dentro de um contêiner pai que já está definido como display: flex.

image
image1571×171 59.1 KB

O Flexbox torna muito fácil controlar como os elementos filhos são organizados dentro de um contêiner. Há um recurso útil nas ferramentas de desenvolvedor onde você pode clicar no pequeno ícone ao lado de display: flex e ele exibirá um conjunto de controles para que você possa ver qual deles produz o efeito desejado.

image
image641×416 81.6 KB

Neste caso, justify-content: center faz o truque:

image
image933×200 49.1 KB

Observe que também funciona com várias tags:

image
image626×111 8.58 KB

Este é um bom tutorial clássico sobre flexbox se você quiser se aprofundar mais. É uma ferramenta muito útil para sua caixa de ferramentas CSS :grin:

3 curtidas
30

Nossa, muito obrigado por isso! Sim, ter 2 tags exibidas faz com que pareça muito menos estranho do que uma tag centralizada, mas, para ser sincero, não vejo muitas pessoas usando várias tags para a maioria das postagens. Hmmm… pode ser que eu precise descobrir uma maneira de mostrar a tag lá e, em seguida, alguma outra parte do tópico/postagem de alguma forma com CSS ou algo assim para que duas coisas estejam lá. Ou talvez escondê-la completamente, mas, eh.

Ou, melhor ainda, posso substituir a categoria por ela?

tttt
tttt736×334 26.9 KB

31

Eu encorajaria você a usar as variáveis CSS do Discourse sobre a cor, pois funcionará melhor com o modo escuro. (você pode inspecionar qualquer coisa e rolar para baixo)

3qCXLkkcIW
3qCXLkkcIW780×1054 62.2 KB

Para centralizar: EDIT: Bryce já respondeu a isso!

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

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

image
image731×329 26.1 KB

image
image743×335 26 KB

Você também pode usar a função dark-light-choose(<cor clara>, <cor escura>) para definir cores claras e escuras para que a cor certa seja usada quando o modo escuro estiver ativado ou não.

4 curtidas
32

Hmmm, eu fiz isso errado? Quando colei isso no Inspecionar Elemento, recebo:

ttt
ttt263×202 4.31 KB

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

1 curtida
33

Esta é uma função SCSS disponível no núcleo do Discourse. Você precisa usá-la no CSS do seu tema para que ela possa ser processada. Ela não funcionará se você a usar diretamente no seu navegador.

1 curtida
34

Seu site ainda está carregando rapidamente. Só o vejo muito brevemente.

A adição de componentes à la carte é ótima. Você está à minha frente, pois ainda estou aprendendo o lado do código. Antes do Discourse, há muito tempo, só tinha brincado com o básico; qbasic e o antigo turbo Pascal. Mas estou chegando lá.

1 curtida
35

Hmmm, ok, então no meu arquivo .scss, eu tenho:

.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;

O foco está nas últimas 2 linhas. Então, parece que para o modo claro e escuro, ele está permanecendo na cor #f0f2f5 em vez de mudar para a cor 3a3b3c no modo escuro. Alguma ideia do porquê?

No Elemento de Inspeção, a propriedade simplesmente permanece:
background: #f0f2f5 !important;
Eu até tentei o URL que você linkou acima e tentei transformá-los em $tagbglight e $tagbgdark e defini-los, etc., mas ainda sem sucesso.

37

dark-light-choose('#f0f2f5', '#3a3b3c') me dá isto:

ggggg
ggggg1320×459 29 KB

O que é basicamente o mesmo resultado que eu teria antes.
Observação: O Inspecionar Elemento mostra aspas duplas. No código, usei aspas simples como você fez.

38

Hmm, já que você está obtendo aspas no resultado final, talvez tente isto:

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

Não tenho certeza se isso ajudará a selecionar a cor certa, no entanto!

39

Isso remove as citações, mas ainda faz apenas essa cor como plano de fundo ao alternar entre os modos: #f0f2f5

40

Isso é estranho. Parece que a própria função está comparando o brilho das cores primária e secundária. Não tenho certeza por que não está funcionando. :thinking:

@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;
  }
}
41

Acredito que você precise definir uma variável CSS em color_definitions.scss.

Por exemplo:

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

Então você pode usar:

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