masbudikusuma/edukarsa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(layout): perbaiki proporsi floating overlap statistik dan spasi seksi sambutan

Browse Source
This commit is contained in:
Mas Budi Kusuma
2026-09-15 21:25:05 +07:00
parent 954cd83e60
commit 0fb87c5618
2 changed files with 312 additions and 286 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front-page.php
+8 -8
View File
@@ -32,9 +32,9 @@
</section> </section>
<?php endif; ?> <?php endif; ?>
<!-- 2. STATISTIK DESAIN KARTU --> <!-- 2. STATISTIK DESAIN KARTU (FLOATING OVERLAP) -->
<?php if ( get_option('edukarsa_tampil_stats', 1) == 1 ) : ?> <?php if ( get_option('edukarsa_tampil_stats', 1) == 1 ) : ?>
<section class="edukarsa-section edukarsa-stats"> <section class="edukarsa-stats">
<div class="container stats-grid"> <div class="container stats-grid">
<?php for($i=1; $i<=3; $i++) : ?> <?php for($i=1; $i<=3; $i++) : ?>
<div class="stat-item card-style stat-card-modern"> <div class="stat-item card-style stat-card-modern">
@@ -57,7 +57,7 @@
<!-- 3. ABOUT US --> <!-- 3. ABOUT US -->
<?php if ( get_option('edukarsa_tampil_about', 1) == 1 ) : ?> <?php if ( get_option('edukarsa_tampil_about', 1) == 1 ) : ?>
<section class="edukarsa-section edukarsa-sambutan pt-0"> <section class="edukarsa-section edukarsa-sambutan">
<div class="container sambutan-grid"> <div class="container sambutan-grid">
<div class="sambutan-image-wrapper"> <div class="sambutan-image-wrapper">
<div class="img-wrapper-portrait"> <div class="img-wrapper-portrait">
@@ -117,7 +117,7 @@
<?php endif; ?> <?php endif; ?>
</div> </div>
<h3 style="margin-bottom:15px; color:var(--heading-color);"><?php the_title(); ?></h3> <h3 style="margin-bottom:15px; color:var(--heading-color);"><?php the_title(); ?></h3>
<div class="program-desc" style="margin-bottom:20px; font-size:14px; color:#666;"><?php echo wp_trim_words( get_the_excerpt(), 15, '...' ); ?></div> <div class="program-desc" style="margin-bottom:20px; font-size:14px; color:var(--text-muted);"><?php echo wp_trim_words( get_the_excerpt(), 15, '...' ); ?></div>
<a href="<?php the_permalink(); ?>" class="btn-outline-primary">Lihat Detail</a> <a href="<?php the_permalink(); ?>" class="btn-outline-primary">Lihat Detail</a>
</div> </div>
<?php <?php
@@ -182,7 +182,7 @@
<div class="keunggulan-number"><?php echo sprintf("%02d", $nomor); ?></div> <div class="keunggulan-number"><?php echo sprintf("%02d", $nomor); ?></div>
<div class="keunggulan-content-inner"> <div class="keunggulan-content-inner">
<h4><?php the_title(); ?></h4> <h4><?php the_title(); ?></h4>
<div style="font-size: 14px; color: #666;"> <div style="font-size: 14px; color: var(--text-muted);">
<?php echo wp_trim_words( wp_strip_all_tags( get_the_content() ), 15, '...' ); ?> <?php echo wp_trim_words( wp_strip_all_tags( get_the_content() ), 15, '...' ); ?>
</div> </div>
</div> </div>
@@ -201,7 +201,7 @@
</div> </div>
</div> </div>
<!-- 8. CTA SECTION (SEKARANG SUDAH KEMBALI) --> <!-- 8. CTA SECTION -->
<?php if ( get_option('edukarsa_tampil_cta', 1) == 1 ) : ?> <?php if ( get_option('edukarsa_tampil_cta', 1) == 1 ) : ?>
<?php $cta_bg = get_option('edukarsa_cta_bg'); ?> <?php $cta_bg = get_option('edukarsa_cta_bg'); ?>
<section class="edukarsa-section edukarsa-cta-bg" <?php if($cta_bg) echo 'style="background-image: url('.esc_url($cta_bg).');"'; ?>> <section class="edukarsa-section edukarsa-cta-bg" <?php if($cta_bg) echo 'style="background-image: url('.esc_url($cta_bg).');"'; ?>>
@@ -214,7 +214,7 @@
</section> </section>
<?php endif; ?> <?php endif; ?>
<!-- 9. LATEST NEWS DINAMIS --> <!-- 9. LATEST NEWS -->
<?php if ( get_option('edukarsa_tampil_news', 1) == 1 ) : ?> <?php if ( get_option('edukarsa_tampil_news', 1) == 1 ) : ?>
<section class="edukarsa-section edukarsa-latest-news"> <section class="edukarsa-section edukarsa-latest-news">
<div class="container"> <div class="container">
@@ -237,7 +237,7 @@
</div> </div>
<div class="news-content"> <div class="news-content">
<h3 class="news-title"><a href="<?php the_permalink(); ?>" style="color:var(--heading-color);"><?php the_title(); ?></a></h3> <h3 class="news-title"><a href="<?php the_permalink(); ?>" style="color:var(--heading-color);"><?php the_title(); ?></a></h3>
<div class="news-excerpt"><?php echo wp_trim_words( get_the_excerpt(), 15, '...' ); ?></div> <div class="news-excerpt" style="color:var(--text-muted); font-size:14px; margin-bottom:15px;"><?php echo wp_trim_words( get_the_excerpt(), 15, '...' ); ?></div>
<a href="<?php the_permalink(); ?>" class="btn-outline-primary" style="margin-top: auto; align-self: flex-start;">Read More</a> <a href="<?php the_permalink(); ?>" class="btn-outline-primary" style="margin-top: auto; align-self: flex-start;">Read More</a>
</div> </div>
</article> </article>
style.css
+41 -15
View File
@@ -4,7 +4,7 @@ Theme URI: https://edukarsa.masbudi.my.id
Author: masbudikusuma Author: masbudikusuma
Author URI: https://masbudi.my.id Author URI: https://masbudi.my.id
Description: Tema WordPress profesional untuk sekolah dan kampus (Gaya Modern Card Layout). Description: Tema WordPress profesional untuk sekolah dan kampus (Gaya Modern Card Layout).
Version: 1.1.0 Version: 1.1.1
*/ */
:root { :root {
@@ -15,8 +15,8 @@ Version: 1.1.0
--heading-color: #0f172a; --heading-color: #0f172a;
--bg-light-blue: #f8fafc; --bg-light-blue: #f8fafc;
--bg-white: #ffffff; --bg-white: #ffffff;
--radius: 12px; --radius: 14px;
--shadow: 0 10px 30px rgba(15, 23, 42, 0.06); --shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
--font-main: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; --font-main: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
} }
@@ -39,7 +39,7 @@ h1, h2, h3, h4, h5, h6 { color: var(--heading-color); font-weight: 800; line-hei
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.text-center { text-align: center; } .text-center { text-align: center; }
.text-white { color: #fff !important; } .text-white { color: #fff !important; }
.edukarsa-section { padding: 80px 0; } .edukarsa-section { padding: 75px 0; }
.section-title { font-size: 32px; color: var(--heading-color); margin-bottom: 15px; font-weight: 800; letter-spacing: -0.5px; } .section-title { font-size: 32px; color: var(--heading-color); margin-bottom: 15px; font-weight: 800; letter-spacing: -0.5px; }
/* 3. HEADER & MENU NAVIGATION */ /* 3. HEADER & MENU NAVIGATION */
@@ -84,8 +84,8 @@ h1, h2, h3, h4, h5, h6 { color: var(--heading-color); font-weight: 800; line-hei
/* 5. KOMPONEN UMUM */ /* 5. KOMPONEN UMUM */
.bg-light-blue { background-color: var(--bg-light-blue); } .bg-light-blue { background-color: var(--bg-light-blue); }
.bg-dark-blue { background-color: var(--primary-color); } .bg-dark-blue { background-color: var(--primary-color); }
.card-style { background: var(--bg-white); border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid rgba(226, 232, 240, 0.8); transition: transform 0.3s ease, box-shadow 0.3s ease; } .card-style { background: var(--bg-white); border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid rgba(226, 232, 240, 0.9); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.card-style:hover { transform: translateY(-4px); box-shadow: 0 15px 35px rgba(15, 23, 42, 0.09); } .card-style:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12); }
.top-border-blue { border-top: 4px solid var(--primary-color); } .top-border-blue { border-top: 4px solid var(--primary-color); }
.title-underline { width: 50px; border: 2px solid #f39c12; margin: 10px auto 30px; } .title-underline { width: 50px; border: 2px solid #f39c12; margin: 10px auto 30px; }
@@ -98,18 +98,43 @@ h1, h2, h3, h4, h5, h6 { color: var(--heading-color); font-weight: 800; line-hei
.btn-outline-primary:hover { background-color: var(--primary-color); color: #fff; } .btn-outline-primary:hover { background-color: var(--primary-color); color: #fff; }
.badge-title { display: inline-block; color: var(--secondary-color); font-weight: 800; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 10px; } .badge-title { display: inline-block; color: var(--secondary-color); font-weight: 800; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 10px; }
/* 6. GRID SYSTEM */ /* 6. GRID SYSTEM & PROPORSI SPASI TERKALIBRASI */
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; position: relative; z-index: 10; margin-top: -80px; margin-bottom: 40px; } .edukarsa-stats { padding: 0; position: relative; z-index: 20; }
.stat-card-modern { padding: 40px 30px; text-align: left; border-radius: 20px; border-top: 5px solid var(--secondary-color); background: #fff; } .stats-grid {
.stat-icon-wrapper { width: 65px; height: 65px; background-color: #e6f0fa; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 25px; font-size: 28px; } display: grid;
.stat-icon-wrapper img { width: 32px; height: 32px; object-fit: contain; } grid-template-columns: repeat(3, 1fr);
.stat-card-modern .stat-number { font-size: 44px; font-weight: 800; color: var(--primary-color); margin-bottom: 5px; line-height: 1; } gap: 28px;
margin-top: -95px;
margin-bottom: 0;
}
.stat-card-modern {
padding: 35px 30px;
text-align: left;
border-radius: 20px;
border-top: 5px solid var(--secondary-color);
background: #fff;
}
.stat-icon-wrapper {
width: 60px;
height: 60px;
background-color: #e6f0fa;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
font-size: 26px;
}
.stat-icon-wrapper img { width: 30px; height: 30px; object-fit: contain; }
.stat-card-modern .stat-number { font-size: 42px; font-weight: 800; color: var(--primary-color); margin-bottom: 5px; line-height: 1; }
.stat-card-modern .stat-title { font-size: 18px; font-weight: 800; color: var(--heading-color); margin-bottom: 8px; } .stat-card-modern .stat-title { font-size: 18px; font-weight: 800; color: var(--heading-color); margin-bottom: 8px; }
.stat-card-modern .stat-desc { font-size: 14px; color: var(--text-muted); line-height: 1.6; margin: 0; } .stat-card-modern .stat-desc { font-size: 14px; color: var(--text-muted); line-height: 1.6; margin: 0; }
.pt-0 { padding-top: 20px !important; }
/* SEKSI SAMBUTAN DENGAN JARAK IDEAL */
.edukarsa-sambutan { padding: 65px 0 80px; }
.sambutan-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: center; } .sambutan-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: center; }
.sambutan-text { color: #475569; font-size: 16px; margin-bottom: 30px; } .sambutan-text { color: #475569; font-size: 16px; margin-bottom: 30px; }
.milestone-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .milestone-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.milestone-item { padding: 25px; } .milestone-item { padding: 25px; }
.program-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .program-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
@@ -184,7 +209,8 @@ h1, h2, h3, h4, h5, h6 { color: var(--heading-color); font-weight: 800; line-hei
.header-container { flex-direction: column; gap: 15px; } .header-container { flex-direction: column; gap: 15px; }
.nav-menu-custom { flex-wrap: wrap; justify-content: center; } .nav-menu-custom { flex-wrap: wrap; justify-content: center; }
.nav-menu-custom .sub-menu { position: static; visibility: visible; opacity: 1; transform: none; box-shadow: none; background: rgba(0,0,0,0.1); } .nav-menu-custom .sub-menu { position: static; visibility: visible; opacity: 1; transform: none; box-shadow: none; background: rgba(0,0,0,0.1); }
.keunggulan-grid, .program-grid, .milestone-grid, .stats-grid, .news-grid { grid-template-columns: 1fr; } .keunggulan-grid, .program-grid, .milestone-grid, .news-grid { grid-template-columns: 1fr; }
.edukarsa-stats { margin-top: -40px; } .stats-grid { grid-template-columns: 1fr; margin-top: -50px; gap: 16px; }
.edukarsa-sambutan { padding: 45px 0 60px; }
.img-wrapper-slider { height: 380px; } .img-wrapper-slider { height: 380px; }
} }