Terraglass — un tema in vetro satinato con palette chiare/scure studiate

Ho appena pubblicato un tema su cui sto lavorando da un po’, ora open source con licenza MIT: un aspetto pulito e moderno basato su superfici traslucide in vetro smerigliato (header, sidebar, ricerca), con una palette di colori chiara e scura progettata appositamente — nessun colore hardcoded, tutto legato alle proprietà CSS custom di Discourse, in modo da funzionare fin da subito con il passaggio automatico tra tema chiaro e scuro.

Repo: GitHub - terraboss/discourse-terraglass · GitHub

Funzionalità

  • Superfici in vetro smerigliato — header, sidebar/menu hamburger e campo/ropdown di ricerca nell’header sono semi-trasparenti con sfocatura dello sfondo (backdrop blur); sia opacità che intensità della sfocatura sono configurabili
  • Palette di colori chiare e scure separate e progettate appositamente (non semplicemente una singola palette invertita), verificate per il contrasto WCAG AA su testo ed elementi dell’interfaccia
  • Anteprime dei link in stile onebox di X/Twitter, con bordo sottile e angoli arrotondati
  • Tag a forma di bandierina/frecce in stile Etiquette
  • Video incorporati con formato fisso 16:9 su tutti i dispositivi
  • Elenco argomenti con righe a strisce (zebra) e stato al passaggio del mouse (hover) sottile
  • Arrotondamento degli angoli configurabile per pulsanti, card, modali e campi di input
  • Outline di focus accessibile che utilizza il colore del testo della palette, così da rimanere visibile sia in modalità chiara che scura
  • Tutto quanto sopra è un’impostazione del tema — disattiva o regola ciò che non ti serve

Installazione

Personalizza → Temi → Installa → Da un repository git:

https://github.com/terraboss/discourse-terraglass

In questo modo avrai anche la funzione “Verifica aggiornamenti” con un clic per il futuro.

Problema noto

backdrop-filter (la sfocatura dietro la sidebar, il menu hamburger e il pannello di ricerca) non viene resa in ogni combinazione di browser/Discourse, anche se la trasparenza stessa funziona in modo affidabile e degrada elegantemente da sola. Sto seguendo la questione qui: backdrop-filter blur has no effect on .menu-panel — se qualcuno ha riscontrato questo problema o ha idee, sarei lieto di sentirle.

Feedback benvenuti, sono felice di ricevere richieste di funzionalità o segnalazioni di bug sul repository.

2 Mi Piace

Puoi pubblicare qualche screenshot? Sembra ottimo