Admin/site_users
1
0
Fork 0
mirror of https://gitlab.unicamp.br/infimecc_drupal11_modules/site_users.git synced 2026-05-03 21:30:41 -03:00
Code Issues Packages Projects Releases Wiki Activity

Adiciona barra social lateral ao tema do microsite

Browse Source 
Implementa o layout estilo Olivero: em desktop (≥ 1200 px) a região
Social fica fixada à esquerda com conteúdo girado −90°; em mobile exibe
barra horizontal compacta. Usa IntersectionObserver para aplicar
.is-fixed ao scroll.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Quintino A. G. Souza
2026-03-16 10:38:54 -03:00
parent d169052065
commit 0b137e8d12
5 changed files with 145 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
themes/site_users_microsite_theme/css/microsite.css
View File

@@ -154,12 +154,82 @@ body.microsite {
margin-bottom: 1.5rem;
}
/* Social ------------------------------------------------------------------- */
/* Social Bar --------------------------------------------------------------- */
/*
* Mobile: barra horizontal compacta.
* Desktop (≥ 1200px): coluna lateral fixa à esquerda, 90px de largura,
* conteúdo girado −90° (estilo Olivero Social Bar).
*/
.microsite-social {
max-width: 900px;
margin: 0 auto 2rem;
padding: 0 1.5rem;
.social-bar__inner {
position: relative;
padding: 0.5rem 1rem;
}
.social-bar__inner .rotate > * {
margin-bottom: 0.5rem;
}
@media (min-width: 1200px) {
/* Layout flex: barra social à esquerda, conteúdo principal à direita */
.microsite-layout--has-social {
display: flex;
align-items: flex-start;
}
.microsite-content-area {
flex: 1;
min-width: 0;
}
/* Coluna .social-bar no fluxo (placeholder de 90px) */
.social-bar {
flex-shrink: 0;
width: 90px;
background-color: #f3f3f3;
align-self: stretch;
}
/* Wrapper interno: posicionamento relativo normal; .is-fixed o fixa */
.social-bar__inner {
position: relative;
width: 90px;
padding: 2.5rem 0;
}
.social-bar__inner.is-fixed {
position: fixed;
top: 3rem;
left: 0;
height: calc(100vh - 3rem);
}
/* Conteúdo girado em −90° */
.social-bar__inner .rotate {
position: absolute;
left: 50%;
display: flex;
flex-direction: row-reverse;
width: 100vh;
transform: rotate(-90deg) translateX(-100%);
transform-origin: left;
}
@supports (width: max-content) {
.social-bar__inner .rotate {
width: max-content;
}
}
.social-bar__inner .rotate > * {
display: flex;
align-items: center;
margin-bottom: 0;
}
.social-bar__inner .rotate > *:not(:first-child) {
margin-right: 2rem;
}
}
/* Footer ------------------------------------------------------------------- */