4e22fbc948
Consolidates and optimizes CSS files for calendar v2 Reduces CSS files from 8 to 4, improving project structure Minimizes unused CSS rules and improves overall CSS efficiency Simplifies PurgeCSS configuration and content targeting
309 lines
No EOL
11 KiB
HTML
309 lines
No EOL
11 KiB
HTML
|
|
<!DOCTYPE html>
|
|
<html lang="da">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>CSS Analysis Report - Calendar Plantempus</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
line-height: 1.6;
|
|
color: #333;
|
|
background: #f5f5f5;
|
|
padding: 20px;
|
|
}
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
background: white;
|
|
padding: 40px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
}
|
|
h1 {
|
|
color: #2196f3;
|
|
margin-bottom: 10px;
|
|
font-size: 2.5em;
|
|
}
|
|
.subtitle {
|
|
color: #666;
|
|
margin-bottom: 30px;
|
|
font-size: 1.1em;
|
|
}
|
|
.summary {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 20px;
|
|
margin-bottom: 40px;
|
|
}
|
|
.stat-card {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
|
}
|
|
.stat-card.warning {
|
|
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
|
}
|
|
.stat-card.success {
|
|
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
|
}
|
|
.stat-value {
|
|
font-size: 2.5em;
|
|
font-weight: bold;
|
|
margin: 10px 0;
|
|
}
|
|
.stat-label {
|
|
font-size: 0.9em;
|
|
opacity: 0.9;
|
|
}
|
|
section {
|
|
margin-bottom: 40px;
|
|
}
|
|
h2 {
|
|
color: #333;
|
|
margin-bottom: 20px;
|
|
padding-bottom: 10px;
|
|
border-bottom: 2px solid #2196f3;
|
|
}
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-top: 20px;
|
|
}
|
|
th, td {
|
|
padding: 12px;
|
|
text-align: left;
|
|
border-bottom: 1px solid #ddd;
|
|
}
|
|
th {
|
|
background: #f8f9fa;
|
|
font-weight: 600;
|
|
color: #555;
|
|
}
|
|
tr:hover {
|
|
background: #f8f9fa;
|
|
}
|
|
.file-detail {
|
|
background: #f8f9fa;
|
|
padding: 15px;
|
|
border-radius: 4px;
|
|
margin-bottom: 15px;
|
|
}
|
|
.rejected-list {
|
|
max-height: 200px;
|
|
overflow-y: auto;
|
|
background: white;
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
margin-top: 10px;
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 0.9em;
|
|
}
|
|
.badge {
|
|
display: inline-block;
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
font-size: 0.85em;
|
|
font-weight: 600;
|
|
}
|
|
.badge-danger { background: #ffebee; color: #c62828; }
|
|
.badge-warning { background: #fff3e0; color: #ef6c00; }
|
|
.badge-success { background: #e8f5e9; color: #2e7d32; }
|
|
.timestamp {
|
|
color: #999;
|
|
font-size: 0.9em;
|
|
margin-top: 30px;
|
|
text-align: center;
|
|
}
|
|
.color-palette {
|
|
display: flex;
|
|
gap: 5px;
|
|
flex-wrap: wrap;
|
|
margin-top: 10px;
|
|
}
|
|
.color-swatch {
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 4px;
|
|
border: 1px solid #ddd;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>📊 CSS Analysis Report</h1>
|
|
<p class="subtitle">Calendar Plantempus - Production CSS Analysis</p>
|
|
|
|
<div class="summary">
|
|
<div class="stat-card">
|
|
<div class="stat-label">Total CSS Size</div>
|
|
<div class="stat-value">17.00 KB</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-label">CSS Files</div>
|
|
<div class="stat-value">4</div>
|
|
</div>
|
|
<div class="stat-card warning">
|
|
<div class="stat-label">Unused CSS Rules</div>
|
|
<div class="stat-value">23</div>
|
|
</div>
|
|
<div class="stat-card success">
|
|
<div class="stat-label">Potential Removal</div>
|
|
<div class="stat-value">0.15%</div>
|
|
</div>
|
|
</div>
|
|
|
|
<section>
|
|
<h2>📈 CSS Statistics by File</h2>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>File</th>
|
|
<th>Size</th>
|
|
<th>Lines</th>
|
|
<th>Rules</th>
|
|
<th>Selectors</th>
|
|
<th>Properties</th>
|
|
<th>Colors</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
<tr>
|
|
<td><strong>calendar-v2.css</strong></td>
|
|
<td>0.18 KB</td>
|
|
<td>7</td>
|
|
<td>0</td>
|
|
<td>0</td>
|
|
<td>1</td>
|
|
<td>0</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><strong>calendar-v2-base.css</strong></td>
|
|
<td>1.66 KB</td>
|
|
<td>67</td>
|
|
<td>3</td>
|
|
<td>3</td>
|
|
<td>47</td>
|
|
<td>32</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><strong>calendar-v2-layout.css</strong></td>
|
|
<td>6.39 KB</td>
|
|
<td>308</td>
|
|
<td>38</td>
|
|
<td>48</td>
|
|
<td>153</td>
|
|
<td>1</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><strong>calendar-v2-events.css</strong></td>
|
|
<td>8.77 KB</td>
|
|
<td>383</td>
|
|
<td>54</td>
|
|
<td>62</td>
|
|
<td>196</td>
|
|
<td>5</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>🗑️ Unused CSS by File</h2>
|
|
|
|
<div class="file-detail">
|
|
<h3>calendar-v2.css</h3>
|
|
<p>
|
|
<span class="badge badge-success">
|
|
0 unused rules
|
|
</span>
|
|
<span style="margin-left: 10px; color: #666;">
|
|
Original: 186 | After purge: 186
|
|
</span>
|
|
</p>
|
|
<p style="color: #2e7d32; margin-top: 10px;">✅ No unused CSS found!</p>
|
|
</div>
|
|
|
|
<div class="file-detail">
|
|
<h3>calendar-v2-layout.css</h3>
|
|
<p>
|
|
<span class="badge badge-success">
|
|
3 unused rules
|
|
</span>
|
|
<span style="margin-left: 10px; color: #666;">
|
|
Original: 6275 | After purge: 6203
|
|
</span>
|
|
</p>
|
|
|
|
<details>
|
|
<summary style="cursor: pointer; margin-top: 10px;">Show unused selectors</summary>
|
|
<div class="rejected-list">
|
|
&:hover<br>&[data-levels="resource date"]<br>&[data-levels="team resource date"]
|
|
|
|
</div>
|
|
</details>
|
|
|
|
</div>
|
|
|
|
<div class="file-detail">
|
|
<h3>calendar-v2-events.css</h3>
|
|
<p>
|
|
<span class="badge badge-success">
|
|
20 unused rules
|
|
</span>
|
|
<span style="margin-left: 10px; color: #666;">
|
|
Original: 7298 | After purge: 6810
|
|
</span>
|
|
</p>
|
|
|
|
<details>
|
|
<summary style="cursor: pointer; margin-top: 10px;">Show unused selectors</summary>
|
|
<div class="rejected-list">
|
|
&:hover<br>&[data-continues-before="true"]<br>&[data-continues-after="true"]<br>swp-events-layer[data-filter-active="true"] swp-event<br>swp-events-layer[data-filter-active="true"] swp-event[data-matches="true"]<br>swp-event[data-stack-link]:not([data-stack-link*='"stackLevel":0'])<br>
|
|
swp-event-group[data-stack-link]:not([data-stack-link*='"stackLevel":0']) swp-event<br>.is-pink<br>.is-magenta<br>.is-violet<br>.is-deep-purple<br>.is-indigo<br>.is-light-blue<br>.is-cyan<br>.is-teal<br>.is-light-green<br>.is-lime<br>.is-yellow<br>.is-orange<br>.is-deep-orange
|
|
|
|
</div>
|
|
</details>
|
|
|
|
</div>
|
|
|
|
<div class="file-detail">
|
|
<h3>calendar-v2-base.css</h3>
|
|
<p>
|
|
<span class="badge badge-success">
|
|
0 unused rules
|
|
</span>
|
|
<span style="margin-left: 10px; color: #666;">
|
|
Original: 1701 | After purge: 1701
|
|
</span>
|
|
</p>
|
|
<p style="color: #2e7d32; margin-top: 10px;">✅ No unused CSS found!</p>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<section>
|
|
<h2>💡 Recommendations</h2>
|
|
<ul style="line-height: 2;">
|
|
<li>✅ CSS usage is relatively clean.</li>
|
|
|
|
<li>📦 Consider consolidating similar styles to reduce duplication.</li>
|
|
<li>🎨 Review color palette - found 38 unique colors across all files.</li>
|
|
<li>🔄 Implement a build process to automatically remove unused CSS in production.</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<p class="timestamp">Report generated: 11.12.2025, 00.08.52</p>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
|