Template:ArticleCard/styles.css: Difference between revisions
From AbhiprayaVedi
Created page with ".article-card { display: flex; gap: 1rem; border: 1px solid #ddd; border-radius: 6px; padding: 0.75rem; margin-bottom: 1rem; background-color: #fafafa; } .article-thumbnail img { max-width: 150px; border-radius: 4px; } .article-info { flex: 1; } .article-title { font-size: 1.1em; font-weight: bold; margin: 0; } .article-author { font-size: 0.95em; color: #555; margin: 0.25em 0; } .article-date { font-size: 0.85em; color: #777; m..." |
mNo edit summary |
||
| (2 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
/* ================ ARTICLE CARD STANDARDISED STYLES ================ */ | |||
.article-card { | .article-card { | ||
display: flex; | display: flex; | ||
flex-direction: column; | |||
border: 1px solid # | border: 1px solid #e2e8f0; | ||
border-radius: | border-radius: 8px; | ||
margin-bottom: 1.5rem; | |||
background-color: #ffffff; | |||
background-color: # | overflow: hidden; | ||
box-shadow: 0 1px 3px rgba(0,0,0,0.05); | |||
height: 100%; | |||
} | |||
/* Image container styling at the top */ | |||
.article-thumbnail { | |||
width: 100%; | |||
max-height: 180px; | |||
overflow: hidden; | |||
background-color: #f7fafc; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
} | } | ||
.article-thumbnail img { | .article-thumbnail img { | ||
width: auto; | |||
height: 100%; | |||
object-fit: cover; | |||
display: block; | |||
} | } | ||
/* Informational text wrapper below the image */ | |||
.article-info { | .article-info { | ||
flex: 1; | padding: 1rem; | ||
display: flex; | |||
flex-direction: column; | |||
flex-grow: 1; | |||
} | } | ||
/* Title / Displayname section with enforced font styling */ | |||
.article-title { | .article-title { | ||
font-size: 1. | font-family: 'Manjari', 'Meera', 'Rachana', 'Noto Sans Malayalam', sans-serif !important; | ||
font-weight: | font-size: 1.25em; | ||
margin: 0; | font-weight: 700; | ||
line-height: 1.4; | |||
margin: 0 0 0.5rem 0; | |||
} | |||
.article-title a { | |||
color: #1a202c; | |||
text-decoration: none; | |||
} | |||
.article-title a:hover { | |||
color: #3182ce; | |||
} | |||
/* Standard compliant text containment replacing non-standard webkit-clamping */ | |||
.article-intro-wrapper { | |||
position: relative; | |||
max-height: 6.4em; /* 4 വരികൾക്കായി കൃത്യമായി ക്രമീകരിച്ചത് (1.6em line-height * 4) */ | |||
overflow: hidden; | |||
margin-bottom: 6px !important; /* മുൻപുണ്ടായിരുന്ന 16px-ൽ നിന്നും 6px ആയി കുറച്ചു */ | |||
} | } | ||
.article- | .article-intro { | ||
font-family: 'Manjari', 'Meera', 'Rachana', 'Noto Sans Malayalam', sans-serif !important; | |||
font-size: 0.95em; | font-size: 0.95em; | ||
color: # | line-height: 1.6em; | ||
margin: 0. | color: #4a5568; | ||
margin: 0 !important; /* മീഡിയവിക്കി P ടാഗിന്റെ ഡിഫോൾട്ട് മാർജിൻ പൂർണ്ണമായി ഒഴിവാക്കി */ | |||
padding: 0 !important; | |||
} | |||
/* ഓതർ, ഡേറ്റ് എന്നിവ അടങ്ങുന്ന മെറ്റാ റോ */ | |||
.article-meta-row { | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
margin-top: auto !important; /* കുറവ് വിവരങ്ങളുള്ള കാർഡുകളിലെ അധിക സ്ഥലം ഇതിന് മുകളിലേക്ക് മാറ്റും */ | |||
margin-bottom: 0 !important; | |||
padding-top: 6px !important; /* പാഡിങ് 8px-ൽ നിന്നും 6px ആയി കുറച്ചു */ | |||
border-top: 1px solid #edf2f7; | |||
font-family: 'Manjari', 'Meera', 'Rachana', 'Noto Sans Malayalam', sans-serif !important; | |||
} | } | ||
.article- | /* മീഡിയവിക്കി ജനറേറ്റ് ചെയ്യാൻ സാധ്യതയുള്ള അനാവശ്യ മാർജിനുകളെ തടയാൻ */ | ||
.article-meta-row p, | |||
.article-info p { | |||
margin: 0 !important; | |||
padding: 0 !important; | |||
} | |||
.article-author { | |||
font-size: 0.85em; | font-size: 0.85em; | ||
color: # | font-weight: bold; | ||
margin | color: #4a5568; | ||
margin: 0 !important; | |||
} | } | ||
.article- | .article-date { | ||
font-size: 0. | font-size: 0.8em; | ||
color: #718096; | |||
margin: 0 !important; | |||
} | |||
/* Optional placeholder class for hidden internal metadata layout */ | |||
.author-photo-hidden { | |||
display: none; | |||
} | } | ||
Latest revision as of 22:09, 9 June 2026
/* ================ ARTICLE CARD STANDARDISED STYLES ================ */
.article-card {
display: flex;
flex-direction: column;
border: 1px solid #e2e8f0;
border-radius: 8px;
margin-bottom: 1.5rem;
background-color: #ffffff;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
height: 100%;
}
/* Image container styling at the top */
.article-thumbnail {
width: 100%;
max-height: 180px;
overflow: hidden;
background-color: #f7fafc;
display: flex;
justify-content: center;
align-items: center;
}
.article-thumbnail img {
width: auto;
height: 100%;
object-fit: cover;
display: block;
}
/* Informational text wrapper below the image */
.article-info {
padding: 1rem;
display: flex;
flex-direction: column;
flex-grow: 1;
}
/* Title / Displayname section with enforced font styling */
.article-title {
font-family: 'Manjari', 'Meera', 'Rachana', 'Noto Sans Malayalam', sans-serif !important;
font-size: 1.25em;
font-weight: 700;
line-height: 1.4;
margin: 0 0 0.5rem 0;
}
.article-title a {
color: #1a202c;
text-decoration: none;
}
.article-title a:hover {
color: #3182ce;
}
/* Standard compliant text containment replacing non-standard webkit-clamping */
.article-intro-wrapper {
position: relative;
max-height: 6.4em; /* 4 വരികൾക്കായി കൃത്യമായി ക്രമീകരിച്ചത് (1.6em line-height * 4) */
overflow: hidden;
margin-bottom: 6px !important; /* മുൻപുണ്ടായിരുന്ന 16px-ൽ നിന്നും 6px ആയി കുറച്ചു */
}
.article-intro {
font-family: 'Manjari', 'Meera', 'Rachana', 'Noto Sans Malayalam', sans-serif !important;
font-size: 0.95em;
line-height: 1.6em;
color: #4a5568;
margin: 0 !important; /* മീഡിയവിക്കി P ടാഗിന്റെ ഡിഫോൾട്ട് മാർജിൻ പൂർണ്ണമായി ഒഴിവാക്കി */
padding: 0 !important;
}
/* ഓതർ, ഡേറ്റ് എന്നിവ അടങ്ങുന്ന മെറ്റാ റോ */
.article-meta-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: auto !important; /* കുറവ് വിവരങ്ങളുള്ള കാർഡുകളിലെ അധിക സ്ഥലം ഇതിന് മുകളിലേക്ക് മാറ്റും */
margin-bottom: 0 !important;
padding-top: 6px !important; /* പാഡിങ് 8px-ൽ നിന്നും 6px ആയി കുറച്ചു */
border-top: 1px solid #edf2f7;
font-family: 'Manjari', 'Meera', 'Rachana', 'Noto Sans Malayalam', sans-serif !important;
}
/* മീഡിയവിക്കി ജനറേറ്റ് ചെയ്യാൻ സാധ്യതയുള്ള അനാവശ്യ മാർജിനുകളെ തടയാൻ */
.article-meta-row p,
.article-info p {
margin: 0 !important;
padding: 0 !important;
}
.article-author {
font-size: 0.85em;
font-weight: bold;
color: #4a5568;
margin: 0 !important;
}
.article-date {
font-size: 0.8em;
color: #718096;
margin: 0 !important;
}
/* Optional placeholder class for hidden internal metadata layout */
.author-photo-hidden {
display: none;
}