Common.css
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/* ---- Feed block ---- */
.feed-block {
margin: 2em 0;
}
.feed-title, .feed-title a {
font-size: 1.4em;
margin-bottom: 0.5em;
color: inherit;
text-decoration: none;
}
.feed-title a:hover {
text-decoration: underline;
}
.feed-items {
display: flex;
flex-wrap: wrap;
gap: 1em;
}
/* Individual card */
.feed-item {
flex: 1 1 300px;
max-width: 32%;
box-sizing: border-box;
}
.feed-item-link {
display: block;
text-decoration: none;
color: inherit;
}
.feed-item-thumb {
height: 180px;
background-size: cover;
background-position: center;
position: relative;
border-radius: 6px;
overflow: hidden;
}
.feed-item-title {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0,0,0,0.75));
padding: 0.5em 0.75em;
}
.feed-item-title h3 {
color: #fff;
margin: 0;
font-size: 1.1em;
}
.feed-item-desc {
margin-top: 0.5em;
font-size: 0.9em;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.feed-item-more {
color: #0645ad;
font-weight: bold;
margin-left: 0.3em;
}
/* Preview mode (homepage): force max 3 per row on wide screens */
.feed-mode-preview .feed-item {
max-width: 32%;
}
/* Full mode (dedicated "view all" page) */
.feed-mode-full .feed-item {
max-width: 32%;
}
/* Optional single-column layout: wrap a feed in <div class="feed-single"> */
.feed-single .feed-item {
max-width: 100%;
flex: 1 1 100%;
}
/* ---- Responsive breakpoints ---- */
@media (max-width: 900px) {
.feed-item { max-width: 48%; }
}
@media (max-width: 600px) {
.feed-items { flex-direction: column; }
.feed-item { max-width: 100%; }
}