¿Cómo funcionan los `@import` con SCSS?

[Question42]

Hola, no quería saturar los foros con varios temas, así que tengo 4 preguntas importantes aquí como usuario/miembro nuevo de los foros de Discourse:

1) ¿Hay alguna forma de eliminar todo rastro de redes sociales en mi sitio web?

No estoy seguro de si está integrado en Discourse o si es algo específico del tema, pero en el código fuente, hay 5 menciones de Twitter y una mención de Facebook en cada página si ves el código fuente. Son:

<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" />

Y bajo <div class="hidden" id="data-preloaded" data-preloaded=, la mención de Facebook es: "facebook_app_id". Mi sitio está muy centrado en la privacidad, por lo que tener eso en el sitio no da una buena impresión.

Preguntado de nuevo en Remove All Traces of Social Media On My Website?

2) ¿Cómo funcionan los @import con SCSS? Mientras personalizaba el Tema Air, noté en la página de GitHub que hay CSS para el Escritorio que es:

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

Así que intenté crear mi propio tema e incluir eso en la sección Editar CSS/HTML → Escritorio de mi tema, pero cuando fui a guardar esa entrada, obtuve:

y no puedo por nada del mundo entender cómo hacer que funcionen las cosas de @import. Incluso entré en el servidor de mi VPS de la instalación de Discourse, creé una carpeta llamada “scss” y puse los archivos que ese código intenta importar allí, reinicié mis foros y todavía no funcionaba.

3) ¿Cómo puedo hacer que los foros se reinicien automáticamente si mi servidor VPS se reinicia? El servidor es Ubuntu 22.04. Mientras investigaba, encontré esta respuesta en estos foros, pero hice lo que dice y debo estar ciego porque no veo instrucciones sobre cómo hacer esto en la página de instalación como sugiere ese comentario.

4) ¿Cómo puedo bajar todo mi foro un poco? Se ve bien en el escritorio, pero en el móvil, se ve como en la parte superior, en el comentario debajo de esta publicación (ya que los usuarios nuevos solo pueden agregar 1 captura de pantalla por publicación aparentemente), con los bordes redondeados golpeando la barra superior…

Intenté agregar una etiqueta de salto de línea (<br>) en la sección Head del CSS del tema, pero eso movió todo hacia abajo, incluida la barra de navegación superior, que quiero que permanezca en la parte superior.

Creo que eso es todo por ahora. Gracias.

[Question42]

Con respecto al #4 anterior, esta es la captura de pantalla a la que me refería:

[Arkshine]

Hola, bienvenido a Meta

1. No tengo una respuesta a tu pregunta. Sin embargo, podría estar equivocado. No creo que estas metaetiquetas OpenGraph y facebook_app_id sean problemas de privacidad aquí. Espero que alguien más pueda dar una mejor perspectiva sobre esto.

2. No creaste un tema remoto. Vive en un repositorio de GitHub. Puedes crear tus archivos, como dividir tu CSS en varios archivos en un directorio scss. Luego, @import se referirá automáticamente a este directorio.

No puedes hacer eso cuando creas manualmente un tema en la administración.

Si deseas personalizar un tema remoto, puedes crear un Componente de Tema, adjuntarlo al Tema Air y agregar cualquier CSS que desees. Esto no es necesario para importar estos archivos. Sin embargo, es posible que necesites copiar las funciones/mezclas SCSS si las necesitas para tus personalizaciones (por ejemplo, discourse-air/scss/sidebar-desktop.scss at main · discourse/discourse-air · GitHub)

Para más información sobre temas: Developing Discourse Themes & Theme Components

3. Como dijo Falco, por defecto, si sigues la instalación estándar, Docker siempre se inicia al reiniciar. No hay instrucciones que buscar porque ese es el comportamiento predeterminado. ¿Puedes confirmar que tu foro no se inició al reiniciar?

4. Primero, ¿se muestra todo correctamente con el modo seguro habilitado? Solo para asegurarnos de que esto no esté relacionado con ninguna personalización. Ese sería el primer paso para averiguar el problema.

[Question42]

Gracias por la respuesta. Para el #4, supongo que es un problema de CSS o algo así, por eso no estoy seguro de cómo agregar un espacio para que el sitio móvil no se vea mal. Con el modo seguro activado, todavía sucede (con la primera opción sin marcar).

Con respecto al #1, puede que no sean “problemas de privacidad” como tales, pero simplemente no quiero ninguna mención de redes sociales en ninguna parte.

#2: Ah, ok, interesante… Hice eso con un componente que estaba editando hace unas 5 horas, pero no sabía que así funcionaban las cosas para los temas. Lo probaré rápidamente.

Hm… mi Docker no se inició automáticamente una vez que mi VPS arrancó, extraño.

[thoka (Thomas Kalka)]

@Question42

Hola, no quería spamear los foros con varios temas, así que tengo 4 preguntas importantes aquí como un usuario/miembro más nuevo de los foros de Discourse:

Mmm. Si más gente sigue este camino, el foro se llenará de títulos de hilos inútiles.

[JammyDodger]

Sería mejor @Question42 si pudieras crear un tema por problema. No solo hace que los títulos de los temas sean mucho más relevantes, sino que también hace que sea mucho más fácil para las personas opinar y mucho más claro para cualquiera que busque algo similar en el futuro.

[Question42]

2º comentario sobre el punto #2, rápido:
He bifurcado el tema Air, he hecho mis propios cambios, lo he subido a mi propio repositorio, lo he instalado con el enlace de GitHub en mi sección de temas del panel de administración… pero ahora no puedo acceder al CSS/HTML ya que ahora es un tema no local. ¿Cómo lo soluciono? ¿O tengo que hacer lo del componente que mencionaste?

¿No hay forma de editar CSS/HTML local con un tema importado de GitHub? Porque al menos localmente, podía editar fácilmente el CSS/HTML en el panel de administración, pero simplemente no podía hacer las cosas de @import. Pero ahora he hecho lo del tema remoto que mencionaste y no puedo editar el tema para agregar los códigos @import, que era el propósito de esto.

[bryce (Bryce Huhtala)]

Con respecto a #4:
Podrías intentar agregar un margen superior a la clase .list-controls.

// en css móvil
.list-controls {
  margin-top: 1rem;
}

[Question42]

Entonces, la única mención de .list-controls en mi archivo mobile.scss que tengo es:

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

¿En cuál debería poner tu código?

[bryce (Bryce Huhtala)]

Podrías ponerlo dentro del primer selector.
O otra opción sería 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);
    }
  }
}

Se puede reescribir 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);
      }
    }
  }
}

Luego puedes colocar nuevas declaraciones que solo afectarán a .list-controls antes de la parte .nav-pills.

[Question42]

Entonces puedo añadir

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

para que todo se vea así:

.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)]

¡Así es! Aunque parece que necesita una } más al final.

[Question42]

Así que, esto es lo que me da en el móvil:

Desafortunadamente, hizo que la barra/área superior/responder/actividad ya no tocara las publicaciones y la pestaña “Más reciente” ahora toca la parte superior. ¿Podemos hacer de alguna manera que el área superior/responder/actividad siga tocando el área de la publicación, pero que el cuadro desplegable “Más reciente” no toque la barra superior?

Incluso aunque estuviera desordenado, el área “Más reciente” se veía bien fusionada con el área del tema, como se muestra en la captura de pantalla original:

EDITAR: Oh, vaya… un amigo revisó el sitio en su teléfono (iPhone 13) y el sitio ahora se ve arruinado en su teléfono, jajaja… ehhh Pero se ve “bien” en mi teléfono (captura de pantalla anterior, menos las correcciones que quiero). Parece que la vista móvil normal está bien en su teléfono, pero el modo de escritorio en el teléfono lo desordena todo.

[bryce (Bryce Huhtala)]

Hmm, es difícil saber qué otros estilos están afectando tu tema. Te recomiendo echar un vistazo a esta guía si aún no lo has hecho, en particular las partes que muestran cómo usar el inspector del navegador (en las Herramientas de desarrollador, se accede con F12 en Chrome). Te permite ver qué estilos se están aplicando a cada elemento y activarlos o desactivarlos para ver la diferencia en tiempo real.

Dado que está relacionado con la vista móvil, puedes emular el móvil en tu escritorio desde la mayoría de los navegadores. Así es como se ve el botón en Chrome:

[Firepup650 (Firepup Sixfifty)]

@Question42

El modo de escritorio en el teléfono lo desordena todo

Eso sería lo esperado, ¿no? El modo de escritorio no está realmente pensado para dispositivos móviles.