Skip to content

Commit 2d739d1

Browse files
Copilotpethers
Copilot
and
pethers
committed
Move article CSS from embedded styles to styles.css
Co-authored-by: pethers <1726836+pethers@users.noreply.github.com>
1 parent 5a7cf15 commit 2d739d1

File tree

2 files changed

+338
-2
lines changed

2 files changed

+338
-2
lines changed

‎scripts/article-template.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -196,6 +196,7 @@ ${ALL_LANG_CODES.map(l => ` <link rel="alternate" hreflang="${l === 'no' ? 'nb'
196196
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
197197
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Orbitron:wght@400;500;600;700&family=Share+Tech+Mono&display=swap" rel="stylesheet">
198198
199+
<!-- Main stylesheet - contains all article styles -->
199200
<link rel="stylesheet" href="../styles.css">
200201
201202
<!-- Schema.org NewsArticle structured data -->
@@ -316,10 +317,10 @@ ${ALL_LANG_CODES.map(l => ` <link rel="alternate" hreflang="${l === 'no' ? 'nb'
316317
}
317318
}
318319
</script>
319-
320-
${generateArticleCSS()}
321320
</head>
322321
<body>
322+
<!-- Article styles are now in styles.css under .news-article namespace.
323+
No embedded CSS needed - promotes consistency and maintainability. -->
323324
<article class="news-article">
324325
<header class="article-header">
325326
<h1>${title}</h1>

‎styles.css‎

Lines changed: 335 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8700,3 +8700,338 @@ body.news-page {
87008700
min-width: 100%;
87018701
}
87028702
}
8703+
8704+
/* ==================================================
8705+
NEWS ARTICLE STYLES (Individual Article Pages)
8706+
================================================== */
8707+
/* These styles are for individual news article pages generated by article-template.js.
8708+
* Maintains The Economist-style professional journalism appearance with:
8709+
* - Clean, readable typography
8710+
* - Professional color scheme
8711+
* - Responsive design
8712+
* - WCAG 2.1 AA accessibility
8713+
* - Support for RTL languages (Arabic, Hebrew)
8714+
*/
8715+
8716+
.news-article {
8717+
max-width: 800px;
8718+
margin: 2rem auto;
8719+
padding: 0 1.5rem;
8720+
}
8721+
8722+
.news-article .article-header {
8723+
border-bottom: 3px solid var(--primary-color, #006633);
8724+
padding-bottom: 1.5rem;
8725+
margin-bottom: 2rem;
8726+
}
8727+
8728+
.news-article .article-header h1 {
8729+
font-size: 2.25rem;
8730+
line-height: 1.2;
8731+
margin: 0 0 0.75rem 0;
8732+
color: var(--header-color, #006633);
8733+
font-weight: 700;
8734+
}
8735+
8736+
.news-article .article-meta {
8737+
display: flex;
8738+
flex-wrap: wrap;
8739+
gap: 1rem;
8740+
font-size: 0.9rem;
8741+
color: var(--text-secondary, #4a4a4a);
8742+
align-items: center;
8743+
}
8744+
8745+
.news-article .article-meta time {
8746+
font-weight: 600;
8747+
}
8748+
8749+
.news-article .article-meta .separator {
8750+
color: var(--border-color, #ccc);
8751+
}
8752+
8753+
/* Event Calendar */
8754+
.news-article .event-calendar {
8755+
background: linear-gradient(135deg, var(--primary-color, #006633) 0%, var(--primary-light, #007744) 100%);
8756+
color: white;
8757+
border-radius: var(--border-radius-lg, 12px);
8758+
padding: 2rem;
8759+
margin: 2rem 0;
8760+
box-shadow: 0 4px 6px var(--card-shadow, rgba(0, 102, 51, 0.08));
8761+
}
8762+
8763+
.news-article .event-calendar h2 {
8764+
font-size: 1.5rem;
8765+
margin: 0 0 1.5rem 0;
8766+
font-weight: 700;
8767+
text-align: center;
8768+
}
8769+
8770+
.news-article .calendar-grid {
8771+
display: grid;
8772+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
8773+
gap: 1rem;
8774+
margin-top: 1rem;
8775+
}
8776+
8777+
.news-article .calendar-day {
8778+
background: rgba(255, 255, 255, 0.15);
8779+
backdrop-filter: blur(10px);
8780+
-webkit-backdrop-filter: blur(10px);
8781+
border-radius: var(--border-radius, 8px);
8782+
padding: 1.25rem;
8783+
border: 1px solid rgba(255, 255, 255, 0.2);
8784+
transition: transform 0.2s ease, background 0.2s ease;
8785+
}
8786+
8787+
.news-article .calendar-day:hover {
8788+
background: rgba(255, 255, 255, 0.25);
8789+
transform: translateY(-2px);
8790+
}
8791+
8792+
.news-article .calendar-day.today {
8793+
background: rgba(255, 255, 255, 0.3);
8794+
border: 2px solid rgba(255, 255, 255, 0.9);
8795+
box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
8796+
}
8797+
8798+
.news-article .day-header {
8799+
font-size: 0.75rem;
8800+
text-transform: uppercase;
8801+
letter-spacing: 0.05em;
8802+
opacity: 0.9;
8803+
margin-bottom: 0.25rem;
8804+
font-weight: 600;
8805+
}
8806+
8807+
.news-article .day-date {
8808+
font-size: 1.75rem;
8809+
font-weight: 700;
8810+
margin-bottom: 0.75rem;
8811+
display: block;
8812+
}
8813+
8814+
.news-article .event-list {
8815+
list-style: none;
8816+
padding: 0;
8817+
margin: 0;
8818+
}
8819+
8820+
.news-article .event-item {
8821+
margin-bottom: 0.75rem;
8822+
padding-bottom: 0.75rem;
8823+
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
8824+
}
8825+
8826+
.news-article .event-item:last-child {
8827+
border-bottom: none;
8828+
margin-bottom: 0;
8829+
padding-bottom: 0;
8830+
}
8831+
8832+
.news-article .event-time {
8833+
display: block;
8834+
font-size: 0.75rem;
8835+
opacity: 0.8;
8836+
margin-bottom: 0.25rem;
8837+
font-weight: 600;
8838+
}
8839+
8840+
.news-article .event-title {
8841+
display: block;
8842+
font-size: 0.9rem;
8843+
line-height: 1.4;
8844+
}
8845+
8846+
/* Article Content - The Economist Style */
8847+
.news-article .article-content {
8848+
font-size: 1.05rem;
8849+
line-height: 1.8;
8850+
}
8851+
8852+
.news-article .lede {
8853+
font-size: 1.15rem;
8854+
line-height: 1.7;
8855+
font-weight: 500;
8856+
color: var(--text-color, #1a1a1a);
8857+
margin-bottom: 2rem;
8858+
padding-left: 1rem;
8859+
border-left: 4px solid var(--primary-color, #006633);
8860+
}
8861+
8862+
.news-article .article-content h2 {
8863+
font-size: 1.75rem;
8864+
color: var(--header-color, #006633);
8865+
margin: 2.5rem 0 1rem 0;
8866+
font-weight: 700;
8867+
}
8868+
8869+
.news-article .article-content h3 {
8870+
font-size: 1.35rem;
8871+
color: var(--primary-color, #006633);
8872+
margin: 2rem 0 0.75rem 0;
8873+
font-weight: 600;
8874+
}
8875+
8876+
.news-article .article-content p {
8877+
margin-bottom: 1.25rem;
8878+
}
8879+
8880+
.news-article .article-content ul,
8881+
.news-article .article-content ol {
8882+
margin: 1.25rem 0;
8883+
padding-left: 2rem;
8884+
}
8885+
8886+
.news-article .article-content li {
8887+
margin-bottom: 0.75rem;
8888+
}
8889+
8890+
.news-article .article-content a {
8891+
color: var(--link-color, #007744);
8892+
text-decoration: underline;
8893+
text-decoration-color: rgba(0, 119, 68, 0.3);
8894+
text-underline-offset: 2px;
8895+
transition: all 0.2s ease;
8896+
}
8897+
8898+
.news-article .article-content a:hover {
8899+
color: var(--link-hover, #006633);
8900+
text-decoration-color: var(--link-hover, #006633);
8901+
}
8902+
8903+
.news-article .context-box {
8904+
background: var(--badge-bg, #f8f9fa);
8905+
border-left: 4px solid var(--primary-color, #006633);
8906+
padding: 1.5rem;
8907+
margin: 2rem 0;
8908+
border-radius: var(--border-radius-sm, 4px);
8909+
}
8910+
8911+
.news-article .context-box h3 {
8912+
margin-top: 0;
8913+
font-size: 1.2rem;
8914+
color: var(--primary-color, #006633);
8915+
}
8916+
8917+
/* Watch Section */
8918+
.news-article .watch-section {
8919+
background: linear-gradient(135deg, var(--primary-color, #006633) 0%, var(--primary-light, #007744) 100%);
8920+
color: white;
8921+
border-radius: var(--border-radius-lg, 12px);
8922+
padding: 2rem;
8923+
margin: 2rem 0;
8924+
}
8925+
8926+
.news-article .watch-section h2 {
8927+
font-size: 1.5rem;
8928+
margin: 0 0 1.5rem 0;
8929+
font-weight: 700;
8930+
text-align: center;
8931+
}
8932+
8933+
.news-article .watch-list {
8934+
list-style: none;
8935+
padding: 0;
8936+
margin: 0;
8937+
}
8938+
8939+
.news-article .watch-list li {
8940+
margin-bottom: 1.5rem;
8941+
padding-bottom: 1.5rem;
8942+
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
8943+
line-height: 1.6;
8944+
}
8945+
8946+
.news-article .watch-list li:last-child {
8947+
border-bottom: none;
8948+
margin-bottom: 0;
8949+
padding-bottom: 0;
8950+
}
8951+
8952+
.news-article .watch-list strong {
8953+
display: block;
8954+
margin-bottom: 0.5rem;
8955+
font-size: 1.05rem;
8956+
}
8957+
8958+
/* Article Footer */
8959+
.news-article .article-footer {
8960+
border-top: 2px solid var(--section-border, #e9ecef);
8961+
margin-top: 3rem;
8962+
padding-top: 2rem;
8963+
}
8964+
8965+
.news-article .article-sources {
8966+
background: var(--badge-bg, #f8f9fa);
8967+
padding: 1.5rem;
8968+
border-radius: var(--border-radius, 8px);
8969+
margin-bottom: 1.5rem;
8970+
}
8971+
8972+
.news-article .article-sources h3 {
8973+
margin-top: 0;
8974+
color: var(--primary-color, #006633);
8975+
font-size: 1.2rem;
8976+
}
8977+
8978+
.news-article .article-sources p {
8979+
margin: 0.75rem 0;
8980+
font-size: 0.95rem;
8981+
color: var(--text-secondary, #4a4a4a);
8982+
}
8983+
8984+
.news-article .article-nav {
8985+
text-align: center;
8986+
}
8987+
8988+
.news-article .back-to-news {
8989+
display: inline-block;
8990+
color: var(--link-color, #007744);
8991+
text-decoration: none;
8992+
font-weight: 600;
8993+
padding: 0.75rem 1.5rem;
8994+
border: 2px solid var(--link-color, #007744);
8995+
border-radius: var(--border-radius, 8px);
8996+
transition: all 0.3s ease;
8997+
}
8998+
8999+
.news-article .back-to-news:hover {
9000+
background: var(--link-color, #007744);
9001+
color: white;
9002+
transform: translateY(-2px);
9003+
box-shadow: 0 4px 12px rgba(0, 119, 68, 0.2);
9004+
}
9005+
9006+
/* Responsive Design for News Articles */
9007+
@media (max-width: 768px) {
9008+
.news-article {
9009+
padding: 0 1rem;
9010+
}
9011+
9012+
.news-article .article-header h1 {
9013+
font-size: 1.75rem;
9014+
}
9015+
9016+
.news-article .article-content {
9017+
font-size: 1rem;
9018+
}
9019+
9020+
.news-article .calendar-grid {
9021+
grid-template-columns: 1fr;
9022+
}
9023+
}
9024+
9025+
/* Print Styles for News Articles */
9026+
@media print {
9027+
.news-article .event-calendar,
9028+
.news-article .watch-section {
9029+
background: white !important;
9030+
color: black !important;
9031+
border: 2px solid #006633 !important;
9032+
}
9033+
9034+
.news-article .back-to-news {
9035+
display: none;
9036+
}
9037+
}

0 commit comments

Comments
 (0)