|
|
| Line 2: |
Line 2: |
| {{DISPLAYTITLE:{{{DisplayTitle|{{{Title|}}}}}}}} | | {{DISPLAYTITLE:{{{DisplayTitle|{{{Title|}}}}}}}} |
|
| |
|
| <!-- Custom CSS for Modern Design -->
| |
| <style>
| |
| .article-container {
| |
| max-width: 1200px;
| |
| margin: 0 auto;
| |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
| |
| }
| |
|
| |
| .article-header {
| |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
| |
| color: white;
| |
| padding: 40px;
| |
| border-radius: 12px;
| |
| margin-bottom: 30px;
| |
| box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
| |
| }
| |
|
| |
| .article-meta-box {
| |
| background: linear-gradient(135deg, #e0e7ff 0%, #cfd9ff 100%);
| |
| border-left: 5px solid #4c51bf;
| |
| padding: 20px;
| |
| margin: 25px 0;
| |
| border-radius: 8px;
| |
| box-shadow: 0 2px 8px rgba(0,0,0,0.08);
| |
| }
| |
|
| |
| .introduction-box {
| |
| background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
| |
| border-left: 5px solid #f59e0b;
| |
| padding: 25px;
| |
| margin: 25px 0;
| |
| border-radius: 8px;
| |
| font-size: 1.15em;
| |
| line-height: 1.9;
| |
| color: #78350f;
| |
| font-weight: 500;
| |
| box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
| |
| }
| |
|
| |
| .left-sidebar {
| |
| background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
| |
| border: 2px solid #fbbf24;
| |
| border-radius: 10px;
| |
| padding: 20px;
| |
| box-shadow: 0 4px 12px rgba(251, 191, 36, 0.2);
| |
| }
| |
|
| |
| .right-sidebar {
| |
| background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
| |
| border: 2px solid #34d399;
| |
| border-radius: 10px;
| |
| padding: 20px;
| |
| box-shadow: 0 4px 12px rgba(52, 211, 153, 0.2);
| |
| }
| |
|
| |
| .sidebar-title {
| |
| font-weight: bold;
| |
| margin-bottom: 15px;
| |
| font-size: 1.1em;
| |
| padding-bottom: 10px;
| |
| border-bottom: 2px solid rgba(0,0,0,0.1);
| |
| }
| |
|
| |
| .highlight-box {
| |
| background: white;
| |
| padding: 12px;
| |
| margin-bottom: 12px;
| |
| border-radius: 6px;
| |
| border-left: 4px solid #10b981;
| |
| box-shadow: 0 2px 4px rgba(0,0,0,0.05);
| |
| }
| |
|
| |
| .keypoint-list {
| |
| list-style: none;
| |
| padding: 0;
| |
| margin: 0;
| |
| }
| |
|
| |
| .keypoint-list li {
| |
| padding: 10px;
| |
| margin-bottom: 8px;
| |
| background: white;
| |
| border-radius: 6px;
| |
| border-left: 4px solid #f59e0b;
| |
| box-shadow: 0 2px 4px rgba(0,0,0,0.05);
| |
| }
| |
|
| |
| .keypoint-list li:before {
| |
| content: "▸ ";
| |
| color: #f59e0b;
| |
| font-weight: bold;
| |
| margin-right: 8px;
| |
| }
| |
|
| |
| .source-box {
| |
| background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
| |
| border: 2px solid #fbbf24;
| |
| border-radius: 8px;
| |
| padding: 18px;
| |
| margin: 30px 0;
| |
| box-shadow: 0 4px 12px rgba(251, 191, 36, 0.15);
| |
| }
| |
|
| |
| .author-bio-box {
| |
| background: linear-gradient(135deg, #e0e7ff 0%, #cfd9ff 100%);
| |
| padding: 25px;
| |
| margin: 35px 0 25px 0;
| |
| border-top: 4px solid #667eea;
| |
| border-radius: 8px;
| |
| box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
| |
| }
| |
|
| |
| .article-content {
| |
| font-size: 1.08em;
| |
| line-height: 1.9;
| |
| color: #1f2937;
| |
| text-align: justify;
| |
| }
| |
|
| |
| .article-content p {
| |
| margin-bottom: 1.2em;
| |
| }
| |
|
| |
| @media (max-width: 768px) {
| |
| .article-layout {
| |
| flex-direction: column !important;
| |
| }
| |
|
| |
| .left-sidebar, .right-sidebar {
| |
| flex: 1 1 auto !important;
| |
| margin-bottom: 20px;
| |
| }
| |
| }
| |
| </style>
| |
|
| |
|
| <div class="article-container"> | | <div class="article-container"> |
Article Template Documentation
This template creates a modern, beautifully formatted article page with gradient hues and improved mobile responsiveness.
New Features
- Modern gradient color scheme with purple, yellow, and green hues
- Improved mobile responsiveness
- Enhanced typography and spacing
- Shadow effects for depth
- Better visual hierarchy
- Smooth hover effects
Usage
Same parameters as before, but with enhanced visual presentation.
