openvibers/openvibe.mediahub Commits

openvibe.video and openvibe.pics front pages use the network's heading face and sizes; inner pages keep their compact headings (#121)

OP OpenVibers committed 20 days ago · 151aba9392 · 2 files, +12 −0

Changes

ddiff --git a/public/css/pics.css b/public/css/pics.css
iindex 53fed4e..586f0fa 100644
---- a/public/css/pics.css
++++ b/public/css/pics.css
@@@ -64,6 +64,12 @@
.ovp-section { margin-top: 2.2rem; }
.ovp-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin: 0 0 .9rem; }
.ovp-section-head h1, .ovp-section-head h2 { margin: 0; }
++/* The front page's headings take the network's heading face and sizes (openvibe-shared/showcase.css), like every other
++ OpenVibe home; a video's, picture's or channel's page keeps its compact headings (the hero is on the front page only). */
++.ovp-hero h1, .ovp-hero ~ .ovp-section > h2, .ovp-hero ~ .ovp-section > .ovp-section-head > h2 { font-family: var(--ov-font, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif); letter-spacing: -.02em; }
++.ovp-hero h1 { font-weight: 800; }
++.ovp-hero ~ .ovp-section { margin-top: 56px; }
++.ovp-hero ~ .ovp-section > h2, .ovp-hero ~ .ovp-section > .ovp-section-head > h2 { font-size: clamp(22px, 2.6vw, 30px); }
.ovp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.ovp-tile { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 12px; border: 1px solid var(--ovp-line); background: var(--bg-tertiary, #16223a); }
.ovp-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s ease; }
ddiff --git a/public/css/video.css b/public/css/video.css
iindex e4ba983..026fbb6 100644
---- a/public/css/video.css
++++ b/public/css/video.css
@@@ -38,6 +38,12 @@
.ovv-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin: 0 0 .75rem; }
.ovv-section-head h2 { margin: 0; }
.ovv-section-head a { font-size: .9rem; font-weight: 700; }
++/* The front page's headings take the network's heading face and sizes (openvibe-shared/showcase.css), like every other
++ OpenVibe home; a video's, picture's or channel's page keeps its compact headings (the hero is on the front page only). */
++.ovv-hero h1, .ovv-hero ~ .ovv-section > h2, .ovv-hero ~ .ovv-section > .ovv-section-head > h2 { font-family: var(--ov-font, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif); letter-spacing: -.02em; }
++.ovv-hero h1 { font-weight: 800; }
++.ovv-hero ~ .ovv-section { margin-top: 56px; }
++.ovv-hero ~ .ovv-section > h2, .ovv-hero ~ .ovv-section > .ovv-section-head > h2 { font-size: clamp(22px, 2.6vw, 30px); }
.ovv-section h2 { display: flex; align-items: center; gap: 8px; }
.ovv-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--live-red, #ef4444); box-shadow: 0 0 0 4px color-mix(in srgb, var(--live-red, #ef4444) 25%, transparent); flex: none; }
.ovv-tag.ovv-tag--live { background: color-mix(in srgb, var(--live-red, #ef4444) 70%, #000); text-transform: uppercase; letter-spacing: .4px; }