## Major CodePress CMS Enhancement
### 🚀 New Features - **League CommonMark Integration**: Replaced basic Markdown parser with full CommonMark 2.7 support - **Bootstrap Sass Architecture**: Modern SCSS build system with Bootstrap 5.3.8 - **Enhanced Navigation**: Uses filenames instead of H1 titles for consistency - **Improved Styling**: Transparent navigation backgrounds, no rounded corners ### 🎨 UI/UX Improvements - Navigation items now use formatted filenames (e.g., "kennis-boven-aantallen" → "Kennis Boven Aantallen") - Transparent navigation backgrounds with subtle hover effects - Removed rounded corners from first-level navigation - 50% opacity navigation background using Bootstrap variables ### 🔧 Technical Improvements - **Class Organization**: Extracted CodePressCMS and SimpleTemplate to separate files - **Full PHPDoc Documentation**: Complete documentation for all methods - **Modern Build Process**: npm scripts for SCSS compilation - **Enhanced Markdown Support**: Tables, strikethrough, task lists, autolinks - **Security**: Proper HTML sanitization with CommonMark ### 📦 Dependencies - Added `league/commonmark` for professional Markdown parsing - Added `bootstrap` for SCSS-based styling - Updated `sass` build process ### 🐛 Bug Fixes - Fixed content directory path configuration - Resolved navigation title inconsistencies - Improved Markdown bold/italic formatting - Fixed homepage 404 issues ### 🔄 Migration Notes - Content directory moved from `content/` to `public/content/` - Navigation now displays filenames instead of content H1 titles - CSS now compiled from SCSS source files The CMS now provides a professional, modern experience with robust Markdown support and clean, maintainable code architecture.
This commit is contained in:
352
src/scss/main.scss
Normal file
352
src/scss/main.scss
Normal file
@@ -0,0 +1,352 @@
|
||||
// Custom variables (must come before Bootstrap import)
|
||||
$primary: #0d6efd;
|
||||
$navigation-opacity: 0.5; // 50% opacity
|
||||
|
||||
// Import Bootstrap
|
||||
@import "bootstrap/scss/bootstrap";
|
||||
|
||||
// Custom navigation background with 50% opacity of primary color
|
||||
.navigation-50-opacity {
|
||||
background-color: rgba($primary, $navigation-opacity) !important;
|
||||
}
|
||||
|
||||
// Custom CodePress styles
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
header.navbar {
|
||||
flex-shrink: 0;
|
||||
height: 66px;
|
||||
}
|
||||
|
||||
/* Navigation section */
|
||||
.navigation-section {
|
||||
background-color: #ffffff;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
padding: 0.5rem 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Tab styling */
|
||||
.nav-tabs {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.nav-tabs .nav-link {
|
||||
border: 1px solid transparent;
|
||||
border-bottom: none;
|
||||
border-radius: 0; // Geen ronde hoeken
|
||||
color: #6c757d;
|
||||
background-color: transparent; // Transparante achtergrond voor eerste laag
|
||||
margin-right: 0.25rem;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.nav-tabs .nav-link:hover {
|
||||
color: #495057;
|
||||
background-color: rgba(0, 0, 0, 0.05); // Subtiel hover effect
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.nav-tabs .nav-link.active {
|
||||
color: #495057;
|
||||
background-color: #ffffff; // Alleen active heeft witte achtergrond
|
||||
border-color: #dee2e6 #dee2e6 transparent;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Dropdown in tabs - eerste laag */
|
||||
.nav-tabs .nav-item.dropdown .nav-link {
|
||||
background-color: transparent; // Transparante achtergrond
|
||||
border: 1px solid transparent;
|
||||
border-radius: 0; // Geen ronde hoeken
|
||||
}
|
||||
|
||||
.nav-tabs .nav-item.dropdown .nav-link:hover {
|
||||
background-color: rgba(0, 0, 0, 0.05); // Subtiel hover effect
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
/* Dropdown menu styling */
|
||||
.nav-tabs .dropdown-menu {
|
||||
margin-top: 0.25rem;
|
||||
border-radius: 0.375rem;
|
||||
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
||||
min-width: 200px;
|
||||
max-width: 300px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/* Dropdown items styling */
|
||||
.nav-tabs .dropdown-menu .dropdown-item {
|
||||
white-space: normal;
|
||||
padding: 0.5rem 1rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* Long text truncation for very long titles */
|
||||
.nav-tabs .dropdown-menu .dropdown-item {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 280px;
|
||||
}
|
||||
|
||||
/* Breadcrumb section */
|
||||
.breadcrumb-section {
|
||||
background-color: #f8f9fa;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Breadcrumb styling consistency */
|
||||
.breadcrumb-section .breadcrumb {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.breadcrumb-section .breadcrumb-item {
|
||||
color: #6c757d !important;
|
||||
}
|
||||
|
||||
.breadcrumb-section .breadcrumb-item a {
|
||||
color: #0d6efd !important;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.breadcrumb-section .breadcrumb-item a:hover {
|
||||
color: #0a58ca !important;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.breadcrumb-section .breadcrumb-item.active {
|
||||
color: #6c757d !important;
|
||||
}
|
||||
|
||||
/* Main content area */
|
||||
.main-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
/* Content specific styling */
|
||||
.markdown-content,
|
||||
.php-content,
|
||||
.html-content {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.markdown-content .content-body,
|
||||
.php-content .content-body,
|
||||
.html-content .content-body {
|
||||
padding: 2rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
footer {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Navigation dropdown styling */
|
||||
.navigation-section .btn {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.navigation-section .collapse .nav-link {
|
||||
color: #495057;
|
||||
padding: 0.375rem 0.75rem;
|
||||
border-radius: 0.25rem;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.navigation-section .collapse .nav-link:hover {
|
||||
background-color: #e9ecef;
|
||||
color: #212529;
|
||||
}
|
||||
|
||||
.navigation-section .collapse .nav-link.active {
|
||||
background-color: #0d6efd;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.navigation-section .collapse .nav-link i {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
/* File info styling */
|
||||
.file-info {
|
||||
font-size: 0.9rem;
|
||||
color: #6c757d;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.file-info i {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
color: #6c757d;
|
||||
max-width: 250px;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align: middle;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.page-title:hover {
|
||||
color: #495057;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.file-details {
|
||||
color: #6c757d;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.site-info a {
|
||||
color: #0d6efd;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.site-info a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.guide-link {
|
||||
color: #6c757d !important;
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.guide-link:hover {
|
||||
color: #0d6efd !important;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.guide-link i {
|
||||
font-size: 1rem;
|
||||
color: #6c757d !important;
|
||||
}
|
||||
|
||||
.guide-link:hover i {
|
||||
color: #0d6efd !important;
|
||||
}
|
||||
|
||||
.auto-link {
|
||||
color: #0d6efd;
|
||||
text-decoration: none;
|
||||
border-bottom: 2px dashed #0d6efd;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.auto-link:hover {
|
||||
color: #0a58ca;
|
||||
text-decoration: none;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-color: #0a58ca;
|
||||
}
|
||||
|
||||
/* Search form */
|
||||
.search-form {
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
/* Card styling */
|
||||
.card-title a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.card-title a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Dropdown submenu styling */
|
||||
.dropdown-menu .dropdown-menu {
|
||||
top: 0;
|
||||
left: 100%;
|
||||
margin-top: -1px;
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
/* Show nested dropdowns on hover */
|
||||
.dropdown-submenu {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dropdown-submenu .dropdown-menu {
|
||||
top: 0;
|
||||
left: 100%;
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
.dropdown-submenu:hover > .dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* For touch devices - click to open */
|
||||
.dropdown-submenu > .dropdown-toggle:active::after {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.main-content {
|
||||
padding-top: 120px; /* More space for mobile */
|
||||
}
|
||||
|
||||
.markdown-content .content-body,
|
||||
.php-content .content-body,
|
||||
.html-content .content-body {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.nav-tabs .dropdown-menu {
|
||||
min-width: 180px;
|
||||
max-width: 250px;
|
||||
}
|
||||
|
||||
.nav-tabs .dropdown-menu .dropdown-item {
|
||||
max-width: 230px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.markdown-content .content-body,
|
||||
.php-content .content-body,
|
||||
.html-content .content-body {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.nav-tabs .dropdown-menu {
|
||||
min-width: 160px;
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.nav-tabs .dropdown-menu .dropdown-item {
|
||||
max-width: 180px;
|
||||
font-size: 0.85rem;
|
||||
padding: 0.4rem 0.8rem;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user