Template:EnglishArticle/styles.css: Difference between revisions
From AbhiprayaVedi
mNo edit summary |
mNo edit summary |
||
| Line 46: | Line 46: | ||
.article-sidebar { | .article-sidebar { | ||
float: right; | float: right; | ||
width: | width: 310px; | ||
margin: 0 0 30px | margin: 0 0 30px 25px; /* Reduced left margin */ | ||
padding: 18px; | padding: 16px 14px 18px 14px; /* Reduced top padding */ | ||
background: #f9f9f9; | background: #f9f9f9; | ||
border: 1px solid #e5e5e5; | border: 1px solid #e5e5e5; | ||
border-radius: 8px; | border-radius: 8px; | ||
} | |||
/* Better alignment for thumbnail caption */ | |||
.article-sidebar .thumbcaption, | |||
.article-sidebar figcaption { | |||
text-align: center !important; | |||
font-weight: bold; | |||
font-size: 0.98em; | |||
color: #333; | |||
margin-top: 8px; | |||
} | |||
/* Reduce gap between content and sidebar on smaller screens */ | |||
@media (max-width: 1024px) { | |||
.article-sidebar { | |||
margin-left: 20px; | |||
width: 290px; | |||
} | |||
} | |||
@media (max-width: 720px) { | |||
.article-sidebar { | |||
float: none; | |||
width: 100%; | |||
margin: 20px 0 25px 0; | |||
} | |||
} | } | ||
Revision as of 17:14, 28 May 2026
.article-header {
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #f0f0f0;
}
.article-byline {
color: #333;
font-size: 1.16em;
}
.author-name {
font-weight: bold;
font-size: 1.48em;
}
.meta-separator {
margin: 0 10px;
color: #888;
}
.article-date {
font-size: 1.18em;
color: #555;
}
.article-meta-category {
color: #2c5282;
font-weight: 600;
}
.intro-box {
margin: 20px 0 32px 0;
padding: 22px 26px;
background: #f0f8ff;
border-left: 6px solid #4682b4;
border-top: 1px solid #b0d0e8; /* Thin top border as requested */
font-size: 1.18em;
line-height: 1.68;
}
.intro-box p {
margin: 0 0 0 0 !important; /* Remove default paragraph margins */
}
.article-sidebar {
float: right;
width: 310px;
margin: 0 0 30px 25px; /* Reduced left margin */
padding: 16px 14px 18px 14px; /* Reduced top padding */
background: #f9f9f9;
border: 1px solid #e5e5e5;
border-radius: 8px;
}
/* Better alignment for thumbnail caption */
.article-sidebar .thumbcaption,
.article-sidebar figcaption {
text-align: center !important;
font-weight: bold;
font-size: 0.98em;
color: #333;
margin-top: 8px;
}
/* Reduce gap between content and sidebar on smaller screens */
@media (max-width: 1024px) {
.article-sidebar {
margin-left: 20px;
width: 290px;
}
}
@media (max-width: 720px) {
.article-sidebar {
float: none;
width: 100%;
margin: 20px 0 25px 0;
}
}
.highlight-box {
margin: 14px 0;
padding: 16px;
background: #fff9e6;
border-left: 5px solid #f4a261;
color: #333;
line-height: 1.6;
}
.article-image1 {
margin: 12px 26px 26px 0;
float: left;
max-width: 320px;
}
.image-caption {
font-size: 1.04em !important;
color: #444;
margin-top: 10px;
line-height: 1.5;
}
.article-content {
line-height: 1.85;
font-size: 1.04em;
}