forked from izu/student-web-if-development-kit
Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 powji17
|
243541d1e4 | ||
 powji
|
e07d70093b |
+251
-14
@@ -1594,7 +1594,7 @@
|
||||
<div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md:w-[calc(50%_-_16px)]">
|
||||
<div
|
||||
class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
|
||||
<img src="./assets/images/kegiatan-unggulan/upc.jpg" alt="UPC 2025"
|
||||
<img src="./assets/images/kegiatan-unggulan/upc.JPG" alt="UPC 2025"
|
||||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
||||
</div>
|
||||
<div class="flex items-start gap-4 mt-6">
|
||||
@@ -1618,7 +1618,7 @@
|
||||
<div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md:w-[calc(50%_-_16px)]">
|
||||
<div
|
||||
class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
|
||||
<img src="./assets/images/kegiatan-unggulan/informers.jpg" alt="Ultah Informatika"
|
||||
<img src="./assets/images/kegiatan-unggulan/informers.JPG" alt="Ultah Informatika"
|
||||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
||||
</div>
|
||||
<div class="flex items-start gap-4 mt-6">
|
||||
@@ -1790,7 +1790,7 @@
|
||||
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="block col-span-1 row-span-2 overflow-hidden rounded-xl group cursor-pointer">
|
||||
<img src="./assets/images/galeri-keseruan/DSC00636.jpg" alt="UPC V"
|
||||
<img src=".\assets\images\galeri-keseruan\DSC00636.JPG" alt="UPC V"
|
||||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
||||
</a>
|
||||
|
||||
@@ -1798,7 +1798,7 @@
|
||||
<a href="https://instagram.com/hmif_ftuntan" target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="hidden md:block col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
|
||||
<img src="./assets/images/galeri-keseruan/Copy of DSC09492.jpg" alt="Gemastik"
|
||||
<img src=".\assets\images\galeri-keseruan\Copy of DSC09492.JPG" alt="Gemastik"
|
||||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
||||
</a>
|
||||
|
||||
@@ -1806,7 +1806,7 @@
|
||||
<a href="https://www.instagram.com/informershmif?igsh=MW5odm9pbXN2aThlMA=="
|
||||
target="_blank" rel="noopener noreferrer"
|
||||
class="hidden md:block col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
|
||||
<img src="./assets/images/galeri-keseruan/IMG_0204.jpg" alt="INFORMERS"
|
||||
<img src=".\assets\images\galeri-keseruan\IMG_0204.JPG" alt="INFORMERS"
|
||||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
||||
</a>
|
||||
|
||||
@@ -1814,7 +1814,7 @@
|
||||
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="hidden md:block col-span-2 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
|
||||
<img src="./assets/images/galeri-keseruan/DSC00456.jpg" alt="UPC V"
|
||||
<img src=".\assets\images\galeri-keseruan\DSC00456.JPG" alt="UPC V"
|
||||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
||||
</a>
|
||||
|
||||
@@ -1828,7 +1828,7 @@
|
||||
<!-- Foto besar kiri -->
|
||||
<a href="https://instagram.com/hmif_ftuntan" target="_blank" rel="noopener noreferrer"
|
||||
class="block col-span-1 row-span-2 overflow-hidden rounded-xl group cursor-pointer">
|
||||
<img src="./assets/images/galeri-keseruan/DSCF8922.jpg"
|
||||
<img src=".\assets\images\galeri-keseruan\DSCF8922.JPG"
|
||||
alt="Ulang Tahun Informatika"
|
||||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
||||
</a>
|
||||
@@ -1837,14 +1837,14 @@
|
||||
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="hidden md:block col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
|
||||
<img src="./assets/images/galeri-keseruan/DSC00091.jpg" alt="UPC V"
|
||||
<img src=".\assets\images\galeri-keseruan\DSC00091.JPG" alt="UPC V"
|
||||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
||||
</a>
|
||||
|
||||
<!-- Foto kecil kanan atas 2 -->
|
||||
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank" rel="noopener noreferrer"
|
||||
class="hidden md:block col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
|
||||
<img src="./assets/images/galeri-keseruan/DSC03316.jpg"
|
||||
<img src=".\assets\images\galeri-keseruan\DSC03316.JPG"
|
||||
alt="Silaturahmi Keluarga Besar Informatika"
|
||||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
||||
</a>
|
||||
@@ -1853,7 +1853,7 @@
|
||||
<a href="https://www.instagram.com/informershmif?igsh=MW5odm9pbXN2aThlMA=="
|
||||
target="_blank" rel="noopener noreferrer"
|
||||
class="hidden md:block col-span-2 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
|
||||
<img src="./assets/images/galeri-keseruan/IMG_5705.jpg" alt="INFORMERS"
|
||||
<img src=".\assets\images\galeri-keseruan\IMG_5705.JPG" alt="INFORMERS"
|
||||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
||||
</a>
|
||||
|
||||
@@ -1868,7 +1868,7 @@
|
||||
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="block col-span-1 row-span-2 overflow-hidden rounded-xl group cursor-pointer">
|
||||
<img src="./assets/images/galeri-keseruan/DSC00252.jpg" alt="UPC V"
|
||||
<img src=".\assets\images\galeri-keseruan\DSC00252.JPG" alt="UPC V"
|
||||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
||||
</a>
|
||||
|
||||
@@ -1876,7 +1876,7 @@
|
||||
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="hidden md:block col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
|
||||
<img src="./assets/images/galeri-keseruan/DSC00519.jpg" alt="UPC V"
|
||||
<img src=".\assets\images\galeri-keseruan\DSC00519.JPG" alt="UPC V"
|
||||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
||||
</a>
|
||||
|
||||
@@ -1884,7 +1884,7 @@
|
||||
<a href="https://www.instagram.com/informershmif?igsh=MW5odm9pbXN2aThlMA=="
|
||||
target="_blank" rel="noopener noreferrer"
|
||||
class="hidden md:block col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
|
||||
<img src="./assets/images/galeri-keseruan/IMG_0030.jpg" alt="INFORMERS"
|
||||
<img src=".\assets\images\galeri-keseruan\IMG_0030.JPG" alt="INFORMERS"
|
||||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
||||
</a>
|
||||
|
||||
@@ -1892,7 +1892,7 @@
|
||||
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="hidden md:block col-span-2 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
|
||||
<img src="./assets/images/galeri-keseruan/DSC01002.jpg" alt="UPC V"
|
||||
<img src=".\assets\images\galeri-keseruan\DSC01002.JPG" alt="UPC V"
|
||||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
||||
</a>
|
||||
|
||||
@@ -2085,6 +2085,243 @@
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// =============================================================================
|
||||
// main.js — Logika Interaksi Halaman HMIF
|
||||
//
|
||||
// Struktur:
|
||||
// 1. Galeri Keseruan — Slider bento grid foto keseruan
|
||||
// 2. Kegiatan Unggulan — Slider kartu kegiatan tahunan
|
||||
// =============================================================================
|
||||
|
||||
// =============================================================================
|
||||
// 1. GALERI KESERUAN — SLIDER
|
||||
// Slider bento grid foto keseruan dengan auto-slide, navigasi manual,
|
||||
// dot indicator, pause on hover, dan recalculate on resize.
|
||||
// =============================================================================
|
||||
|
||||
(function () {
|
||||
var AUTO_DELAY_MS = 4000; // 4 detik per slide
|
||||
var GAP_PX = 16 * 2; // grid gap-4 = 1rem? but original used gap-4; keep reasonable spacing if needed
|
||||
|
||||
var track = document.getElementById('galeri-track');
|
||||
var viewport = document.getElementById('galeri-viewport');
|
||||
var prevBtn = document.getElementById('galeri-prev');
|
||||
var nextBtn = document.getElementById('galeri-next');
|
||||
var dotsContainer = document.getElementById('galeri-dots');
|
||||
|
||||
if (!track || !viewport || !prevBtn || !nextBtn) return;
|
||||
|
||||
var currentSlide = 0;
|
||||
var autoSlideTimer;
|
||||
var originalHTML = track.innerHTML;
|
||||
|
||||
// collect all anchor elements (images) in the original order
|
||||
var originalAnchors = Array.from((function () {
|
||||
var tmp = document.createElement('div'); tmp.innerHTML = originalHTML; return tmp;
|
||||
})().querySelectorAll('a'));
|
||||
|
||||
// builds slides where each slide contains a single image (for small screens)
|
||||
function buildSingleImageSlides() {
|
||||
var slides = originalAnchors.map(function (a) {
|
||||
// clone anchor and remove mobile-hidden class so it becomes visible in single-image slides
|
||||
try {
|
||||
var clone = a.cloneNode(true);
|
||||
if (clone.classList) clone.classList.remove('hidden');
|
||||
// also remove inline style display:none if present
|
||||
if (clone.style) clone.style.display = '';
|
||||
return '<div class="flex-shrink-0 w-full">' +
|
||||
'<div class="aspect-video w-full overflow-hidden rounded-xl">' +
|
||||
clone.outerHTML +
|
||||
'</div></div>';
|
||||
} catch (e) {
|
||||
return '';
|
||||
}
|
||||
});
|
||||
return slides.join('');
|
||||
}
|
||||
|
||||
function getTotalSlides() {
|
||||
return track.children.length;
|
||||
}
|
||||
|
||||
// render dot buttons dynamically according to total slides
|
||||
function renderDots(n) {
|
||||
if (!dotsContainer) return;
|
||||
dotsContainer.innerHTML = '';
|
||||
for (var i = 0; i < n; i++) {
|
||||
var btn = document.createElement('button');
|
||||
btn.className = 'galeri-dot h-2.5 rounded-full transition-all duration-300 ' + (i === 0 ? 'bg-hmif-primary w-6' : 'bg-gray-200 w-2.5');
|
||||
btn.setAttribute('data-index', String(i));
|
||||
btn.setAttribute('aria-label', 'Slide ' + (i+1));
|
||||
(function (idx) { btn.addEventListener('click', function () { goToSlide(idx); startAutoSlide(); }); })(i);
|
||||
dotsContainer.appendChild(btn);
|
||||
}
|
||||
}
|
||||
|
||||
function updateDots(activeIndex) {
|
||||
if (!dotsContainer) return;
|
||||
var dots = dotsContainer.querySelectorAll('button');
|
||||
dots.forEach(function (dot, i) {
|
||||
if (i === activeIndex) {
|
||||
dot.classList.remove('bg-gray-200', 'w-2.5');
|
||||
dot.classList.add('bg-hmif-primary', 'w-6');
|
||||
} else {
|
||||
dot.classList.remove('bg-hmif-primary', 'w-6');
|
||||
dot.classList.add('bg-gray-200', 'w-2.5');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function rebuildTrackForViewport() {
|
||||
var isMobile = window.innerWidth < 768; // md breakpoint
|
||||
if (isMobile) {
|
||||
track.innerHTML = buildSingleImageSlides();
|
||||
} else {
|
||||
track.innerHTML = originalHTML;
|
||||
}
|
||||
renderDots(getTotalSlides());
|
||||
}
|
||||
|
||||
// Pindah ke slide dengan index tertentu, loop otomatis di kedua arah
|
||||
function goToSlide(index) {
|
||||
var total = getTotalSlides();
|
||||
if (total === 0) return;
|
||||
currentSlide = ((index % total) + total) % total;
|
||||
track.style.transform = 'translateX(-' + (currentSlide * viewport.offsetWidth) + 'px)';
|
||||
updateDots(currentSlide);
|
||||
}
|
||||
|
||||
// Mulai atau restart timer auto-slide
|
||||
function startAutoSlide() {
|
||||
clearInterval(autoSlideTimer);
|
||||
autoSlideTimer = setInterval(function () { goToSlide(currentSlide + 1); }, AUTO_DELAY_MS);
|
||||
}
|
||||
|
||||
prevBtn.addEventListener('click', function () { goToSlide(currentSlide - 1); startAutoSlide(); });
|
||||
nextBtn.addEventListener('click', function () { goToSlide(currentSlide + 1); startAutoSlide(); });
|
||||
|
||||
// Pause saat kursor di atas galeri
|
||||
viewport.addEventListener('mouseenter', function () { clearInterval(autoSlideTimer); });
|
||||
viewport.addEventListener('mouseleave', startAutoSlide);
|
||||
|
||||
// Recalculate posisi slide saat browser di-resize
|
||||
window.addEventListener('resize', function () { rebuildTrackForViewport(); goToSlide(currentSlide); });
|
||||
|
||||
// initial build
|
||||
rebuildTrackForViewport();
|
||||
goToSlide(0);
|
||||
startAutoSlide();
|
||||
})();
|
||||
|
||||
|
||||
// =============================================================================
|
||||
// 2. KEGIATAN UNGGULAN — SLIDER
|
||||
// Slider kartu kegiatan tahunan yang menampilkan 2 kartu sekaligus pada desktop,
|
||||
// dan 1 kartu pada layar sempit. Logika pergantian disesuaikan agar pergeseran
|
||||
// selalu berpindah tepat satu item, memperhitungkan gap antar-kartu.
|
||||
// =============================================================================
|
||||
|
||||
(function () {
|
||||
var TOTAL_CARDS = 6;
|
||||
var AUTO_DELAY_MS = 2000;
|
||||
var GAP_PX = 32; // gap-8 = 2rem = 32px (tailwind)
|
||||
|
||||
var track = document.getElementById('slider-track');
|
||||
var viewport = document.getElementById('slider-viewport');
|
||||
var prevBtn = document.getElementById('slider-prev');
|
||||
var nextBtn = document.getElementById('slider-next');
|
||||
var dotsContainer = document.getElementById('slider-dots');
|
||||
|
||||
if (!track || !viewport || !prevBtn || !nextBtn) return;
|
||||
|
||||
var current = 0;
|
||||
var autoTimer;
|
||||
|
||||
function getCardsVisible() {
|
||||
return window.innerWidth >= 768 ? 2 : 1; // md breakpoint
|
||||
}
|
||||
|
||||
// lebar kartu yang terlihat (tidak termasuk gap)
|
||||
function getCardWidth() {
|
||||
var visible = getCardsVisible();
|
||||
if (visible === 1) return viewport.offsetWidth;
|
||||
return (viewport.offsetWidth - GAP_PX) / visible;
|
||||
}
|
||||
|
||||
function getMaxIndex() {
|
||||
return Math.max(0, TOTAL_CARDS - getCardsVisible());
|
||||
}
|
||||
|
||||
// Pindah ke posisi slide tertentu; perhitungan berbeda untuk 1 atau 2 kartu
|
||||
function goTo(index) {
|
||||
var maxIndex = getMaxIndex();
|
||||
current = ((index % (maxIndex + 1)) + (maxIndex + 1)) % (maxIndex + 1);
|
||||
|
||||
if (getCardsVisible() === 1) {
|
||||
// langkah pergeseran = viewport width + gap
|
||||
var step = viewport.offsetWidth + GAP_PX;
|
||||
track.style.transform = 'translateX(-' + (current * step) + 'px)';
|
||||
} else {
|
||||
var cardW = getCardWidth();
|
||||
track.style.transform = 'translateX(-' + (current * (cardW + GAP_PX)) + 'px)';
|
||||
}
|
||||
|
||||
updateDots(current);
|
||||
}
|
||||
|
||||
// Render dot indicators dynamically based on total slides
|
||||
function renderSliderDots(n) {
|
||||
if (!dotsContainer) return;
|
||||
dotsContainer.innerHTML = '';
|
||||
for (var i = 0; i < n; i++) {
|
||||
var btn = document.createElement('button');
|
||||
btn.className = 'slider-dot h-2.5 rounded-full transition-all duration-300 ' + (i === 0 ? 'bg-hmif-primary w-6' : 'bg-gray-200 w-2.5');
|
||||
btn.setAttribute('data-index', String(i));
|
||||
btn.setAttribute('aria-label', 'Slide ' + (i+1));
|
||||
(function (idx) { btn.addEventListener('click', function () { goTo(idx); startAuto(); }); })(i);
|
||||
dotsContainer.appendChild(btn);
|
||||
}
|
||||
}
|
||||
|
||||
function updateDots(activeIndex) {
|
||||
if (!dotsContainer) return;
|
||||
var dots = dotsContainer.querySelectorAll('button');
|
||||
dots.forEach(function (dot, i) {
|
||||
if (i === activeIndex) {
|
||||
dot.classList.remove('bg-gray-200', 'w-2.5');
|
||||
dot.classList.add('bg-hmif-primary', 'w-6');
|
||||
} else {
|
||||
dot.classList.remove('bg-hmif-primary', 'w-6');
|
||||
dot.classList.add('bg-gray-200', 'w-2.5');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Mulai atau restart timer auto-slide
|
||||
function startAuto() {
|
||||
clearInterval(autoTimer);
|
||||
autoTimer = setInterval(function () { goTo(current + 1); }, AUTO_DELAY_MS);
|
||||
}
|
||||
|
||||
prevBtn.addEventListener('click', function () { goTo(current - 1); startAuto(); });
|
||||
nextBtn.addEventListener('click', function () { goTo(current + 1); startAuto(); });
|
||||
|
||||
// initial render of dots according to current viewport
|
||||
renderSliderDots(getMaxIndex() + 1);
|
||||
|
||||
// Pause saat kursor di atas slider
|
||||
viewport.addEventListener('mouseenter', function () { clearInterval(autoTimer); });
|
||||
viewport.addEventListener('mouseleave', startAuto);
|
||||
|
||||
// Recalculate posisi slide and dots saat browser di-resize
|
||||
window.addEventListener('resize', function () { renderSliderDots(getMaxIndex() + 1); goTo(current); });
|
||||
|
||||
goTo(0);
|
||||
startAuto();
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
const menuItems = document.querySelectorAll('[data-menu]');
|
||||
|
||||
+47
-6
@@ -1,6 +1,47 @@
|
||||
/*
|
||||
* LimaEm — Group 07 | Kehidupan Mahasiswa & Himpunan (HMIF)
|
||||
*
|
||||
* CSS utama ada di: assets/css/output.css (Tailwind custom build)
|
||||
* File ini tersedia untuk CSS tambahan jika diperlukan.
|
||||
*/
|
||||
:root {
|
||||
--brand-navy: #003150;
|
||||
--brand-yellow: #feb401;
|
||||
--text-main: #1e293b;
|
||||
--text-soft: #64748b;
|
||||
--bg-soft: #f8fafc;
|
||||
--line: #e2e8f0;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
body { font-family: "Roboto", Arial, sans-serif; color: var(--text-main); background: #fff; line-height: 1.6; }
|
||||
.container { width: min(1100px, 92%); margin-inline: auto; }
|
||||
|
||||
.nav { background: var(--brand-navy); color: #fff; border-bottom: 4px solid var(--brand-yellow); padding: 14px 0; }
|
||||
.brand { font-size: 1.1rem; font-weight: 700; letter-spacing: .02em; }
|
||||
|
||||
.hero { position: relative; color: #fff; min-height: 220px; display: flex; align-items: flex-end; overflow: hidden; }
|
||||
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.45); }
|
||||
.hero-inner { position: relative; z-index: 1; padding: 36px 0; }
|
||||
.badge { display: inline-block; background: var(--brand-yellow); color: #111827; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: .2rem .45rem; margin-bottom: 12px; }
|
||||
.hero h1 { margin: 0; font-size: clamp(1.6rem, 3.2vw, 2.8rem); line-height: 1.2; }
|
||||
|
||||
.layout { display: grid; grid-template-columns: 1fr; gap: 2rem; padding: 2rem 0 4rem; }
|
||||
@media (min-width: 1024px) { .layout { grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr); } }
|
||||
|
||||
.meta { font-size: .78rem; text-transform: uppercase; color: #475569; display: flex; flex-wrap: wrap; gap: .75rem 1rem; margin-bottom: 1rem; }
|
||||
.cover { background: var(--bg-soft); border: 1px solid var(--line); margin-bottom: 1.5rem; }
|
||||
.cover img { width: 100%; height: auto; display: block; }
|
||||
|
||||
.article-body > * + * { margin-top: 1.1em; }
|
||||
.article-body h2 { font-size: 1.35rem; margin: 1.6em 0 .5em; }
|
||||
.article-body h3 { font-size: 1.1rem; margin: 1.4em 0 .4em; }
|
||||
.article-body p { margin: 0 0 1em; }
|
||||
.article-body ul, .article-body ol { padding-left: 1.4rem; }
|
||||
.article-body blockquote { border-left: 4px solid #005eb8; background: #eef6ff; padding: .8rem 1rem; color: #334155; }
|
||||
.article-body a { color: #005eb8; }
|
||||
.article-body img { max-width: 100%; border-radius: 8px; }
|
||||
.article-body code { background: #f1f5f9; padding: .1em .35em; border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
|
||||
|
||||
.note { border: 1px solid var(--line); background: var(--bg-soft); padding: 1rem; }
|
||||
.note h3 { margin: 0 0 .5rem; font-size: .76rem; text-transform: uppercase; letter-spacing: .12em; color: #475569; }
|
||||
|
||||
.footer { margin-top: 2rem; background: var(--brand-navy); color: #fff; border-top: 4px solid var(--brand-yellow); }
|
||||
.footer-inner { display: flex; align-items: center; justify-content: center; gap: .75rem; padding: 1rem 0; }
|
||||
.footer-logo { height: 28px; width: auto; }
|
||||
.footer-ornament { width: 100%; display: block; opacity: .9; }
|
||||
|
||||
Reference in New Issue
Block a user