Como funcionam os `@import` com SCSS?

[Question42]

Olá, não queria poluir os fóruns com vários tópicos, então tenho 4 perguntas principais aqui como um usuário/membro mais novo dos fóruns Discourse:

1) Existe uma maneira de remover todos os vestígios de mídias sociais do meu site?

Não tenho certeza se está embutido no Discourse ou se é algo específico do tema, mas no código-fonte, há 5 menções ao Twitter e uma menção ao Facebook em cada página se você visualizar o código-fonte. Eles são:

<meta name="twitter:card" content="summary" />
<meta name="twitter:image" content="https://forums.mysite.me/uploads/default/original/1X/9c81453y45yh45ha81cedd21d3cf20.png" />
<meta name="twitter:url" content="https://forums.mysite.me/" />
<meta name="twitter:title" content="SiteTitle" />
<meta name="twitter:description" content="Site Description Is Here" />

E sob <div class="hidden" id="data-preloaded" data-preloaded=, a menção ao Facebook é: "facebook_app_id". Meu site é focado em privacidade extrema, então tê-los no site não é uma boa aparência.

Perguntado novamente em Remove All Traces of Social Media On My Website?

2) Como funcionam os @import’s com SCSS? Ao personalizar o Tema Air, notei na página do GitHub que há CSS para Desktop que é:

@import "showcased-categories";
@import "chat-desktop";
@import "sidebar-desktop";

Então, tentei criar meu próprio tema e incluí-lo na seção Editar CSS/HTML → Desktop do meu tema, mas quando fui salvar essa entrada, recebi:

e não consigo entender como fazer as coisas com @import funcionarem. Eu até entrei no servidor VPS da instalação do Discourse, criei uma pasta chamada “scss” e coloquei os arquivos que esse código tenta importar lá, reiniciei meus fóruns e ainda assim não funcionou.

3) Como posso fazer com que os fóruns sejam reiniciados automaticamente se meu servidor VPS for reiniciado? O servidor é Ubuntu 22.04. Enquanto pesquisava, encontrei esta resposta nestes fóruns, mas fiz o que diz e devo estar cego porque não vejo instruções sobre como fazer isso na página de instalação como esse comentário sugere.

4) Como posso mover todo o meu fórum um pouco para baixo? Parece bom no Desktop, mas no celular, parece como na parte superior, no comentário abaixo desta postagem (já que novos usuários só podem adicionar 1 captura de tela por postagem, aparentemente), com as bordas arredondadas atingindo a barra superior…

Tentei adicionar uma tag de quebra (<br>) na seção Head do CSS do tema, mas isso moveu tudo para baixo, incluindo a barra de navegação superior, que eu quero que permaneça no topo.

Acho que é tudo por enquanto. Obrigado.

[Question42]

Em relação ao item nº 4 acima, esta é a captura de tela a que me referia:

[Arkshine]

Olá, bem-vindo à Meta

1. Não tenho uma resposta para sua pergunta. No entanto, posso estar enganado. Não acho que esses metadados OpenGraph e facebook_app_id sejam problemas de privacidade aqui. Espero que outra pessoa possa dar uma visão melhor sobre isso.

2. Você não criou um tema remoto. Ele vive em um repositório do GitHub. Você pode criar seus arquivos, como dividir seu CSS em vários arquivos em um diretório scss. Então, o @import se referirá automaticamente a este diretório.

Você não pode fazer isso quando cria manualmente um tema no Admin.

Se você quiser personalizar um tema remoto, pode criar um Componente de Tema, anexá-lo ao Tema Air e adicionar qualquer CSS que desejar. Isso não é necessário para importar esses arquivos. No entanto, pode ser necessário copiar quaisquer funções/mixins SCSS se precisar deles para suas personalizações (por exemplo, discourse-air/scss/sidebar-desktop.scss at main · discourse/discourse-air · GitHub)

Para mais informações sobre temas: Developing Discourse Themes & Theme Components

3. Como Falco disse, por padrão, se você seguir a instalação padrão, o Docker sempre inicia na reinicialização. Não há instruções para encontrar porque esse é o comportamento padrão. Você pode confirmar que seu fórum não iniciou na reinicialização?

4. Primeiro, tudo é exibido corretamente com o modo de segurança ativado? Apenas para ter certeza de que isso não está relacionado a quaisquer personalizações. Esse seria o primeiro passo para descobrir o problema.

[Question42]

Obrigado pela resposta. Para o nº 4, presumo que seja um problema de CSS ou algo assim, é por isso que não tenho certeza de como adicionar um espaço para que o site móvel não pareça ruim. Com o modo de segurança ativado, ele ainda acontece (com a 1ª opção desmarcada).

Em relação ao nº 1, eles podem não ser “problemas de privacidade” em si, mas eu apenas não quero menções de redes sociais em lugar nenhum.

Nº 2: Ah, ok, interessante… Eu fiz isso com um componente que estava editando há cerca de 5 horas, mas não sabia que era assim que funcionava para temas. Vou tentar isso rapidamente.

Hm… meu Docker não iniciou automaticamente assim que meu VPS foi iniciado, estranho.

[thoka (Thomas Kalka)]

@Question42

Oi, não queria lotar os fóruns com vários tópicos, então tenho 4 perguntas importantes aqui como um novo usuário/membro dos fóruns Discourse:

Hum. Se mais pessoas seguirem esse caminho, o fórum será inundado com títulos de tópicos inutilizáveis.

[JammyDodger]

Seria melhor @Question42 se você pudesse criar um tópico por problema. Isso não só torna os títulos dos tópicos muito mais relevantes, mas também torna os tópicos muito mais fáceis para as pessoas darem sua opinião e muito mais claros para quem procura algo semelhante no futuro.

[Question42]

2º comentário sobre o ponto nº 2 rapidinho:
Então, eu fiz um fork do tema Air, fiz minhas próprias alterações, fiz o upload para o meu próprio repositório, instalei-o com o link do GitHub na minha seção de temas do painel de administração… mas agora não consigo acessar CSS/HTML, pois agora é um tema não local. Como posso contornar isso? Ou tenho que fazer a coisa do componente que você mencionou?

Não há como editar CSS/HTML local com um tema importado do GitHub? Porque, pelo menos localmente, eu podia editar facilmente o CSS/HTML no painel de administração, mas não conseguia fazer as coisas de @import. Mas agora fiz a coisa remota que você mencionou e não consigo editar o tema para adicionar os códigos de @import, que era o objetivo disso.

[bryce (Bryce Huhtala)]

Em relação ao nº 4:
Você pode tentar adicionar uma margem superior à classe .list-controls.

// no CSS para dispositivos móveis
.list-controls {
  margin-top: 1rem;
}

[Question42]

Então, a única menção de .list-controls no meu arquivo mobile.scss que tenho são:

.categories-list .list-controls {
  background: var(--secondary);
  padding: 0.5em;
  border-radius: 8px;
}

.list-controls .nav-pills {
  li.navigation-toggle {
    border-radius: 8px;
    border: none;
    background-color: var(--secondary);
    a:hover,
    a:focus {
      color: var(--primary);
      background-color: var(--secondary);
    }
  }

Em qual deles devo colocar o seu código?

[bryce (Bryce Huhtala)]

Você poderia colocá-lo dentro do primeiro seletor.
Ou outra opção seria que esta parte:

.list-controls .nav-pills {
  li.navigation-toggle {
    border-radius: 8px;
    border: none;
    background-color: var(--secondary);
    a:hover,
    a:focus {
      color: var(--primary);
      background-color: var(--secondary);
    }
  }
}

Pode ser reescrita como:

.list-controls {
  
  .nav-pills {
    li.navigation-toggle {
      border-radius: 8px;
      border: none;
      background-color: var(--secondary);
      a:hover,
      a:focus {
        color: var(--primary);
        background-color: var(--secondary);
      }
    }
  }
}

Então você pode colocar novas declarações que afetarão apenas .list-controls antes da parte .nav-pills.

[Question42]

Então posso adicionar

.list-controls {
  margin-top: 1rem;
}

para fazer tudo parecer assim:

.list-controls {
  margin-top: 1rem;
  
  .nav-pills {
    li.navigation-toggle {
      border-radius: 8px;
      border: none;
      background-color: var(--secondary);
      a:hover,
      a:focus {
        color: var(--primary);
        background-color: var(--secondary);
      }
    }
  }

?

[bryce (Bryce Huhtala)]

Está certo! Embora pareça que precise de mais um } no final.

[Question42]

Então, é isso que ele me dá no celular:

Infelizmente, fez com que a barra/área Superior/Responder/Atividade não tocasse mais nas postagens e a aba “Mais Recentes” agora está tocando o topo. Podemos fazer com que a área Superior/Responder/Atividade ainda toque na área da postagem, mas a caixa suspensa “Mais Recentes” não toque na barra superior?

Mesmo que estivesse bagunçado, a área “Mais Recentes” parecia boa quando mesclada com a área do Tópico, como mostrado na captura de tela original:

EDIT: Ah, meu Deus… pedi a um amigo para verificar o site no celular dele (iPhone 13) e o site parece arruinado no celular dele agora, lol… uhhh Mas parece “bom” no meu celular (captura de tela acima, menos as correções que eu quero). Parece que a visualização normal do celular está boa no celular dele, mas o modo desktop no celular deixa tudo bagunçado.

[bryce (Bryce Huhtala)]

Hmm, é difícil dizer quais outros estilos estão afetando seu tema. Eu recomendo dar uma olhada em este guia, se você ainda não o fez, especialmente as partes que mostram o uso do inspetor do navegador (nas Ferramentas do Desenvolvedor – acessado com F12 no Chrome). Ele permite que você veja quais estilos estão sendo aplicados a cada elemento e os ative e desative para ver a diferença em tempo real.

Como está relacionado à visualização móvel, você pode emular dispositivos móveis em seu desktop na maioria dos navegadores. Veja como o botão se parece no Chrome:

[Firepup650 (Firepup Sixfifty)]

@Question42

modo desktop no celular deixa tudo bagunçado

Isso seria esperado, não? O modo desktop não é realmente destinado a dispositivos móveis.