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%;
}
/* Give a full feed page a single-column option by adding class feed-single to the wrapping div manually if desired */
.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%; }
}
/* =====================================================================
FEED SYSTEM — LAYOUT ADDITIONS (columns control + new card styles)
Everything below is additive; it does not alter the original
.feed-item / .feed-block / .feed-title rules added previously.
===================================================================== */
/* ---- Optional column-count override (cols= parameter on {{Feed}}) ----
Only takes effect on a feed where cols= was actually set; otherwise
feeds keep using the original flexible 3-per-row layout untouched. */
.feed-items.feed-grid {
display: grid;
grid-template-columns: repeat(var(--feed-cols, 3), 1fr);
gap: 1em;
}
.feed-items.feed-grid .feed-item,
.feed-items.feed-grid .feed-item-side,
.feed-items.feed-grid .feed-item-overlaytop {
max-width: 100%;
}
@media (max-width: 900px) {
.feed-items.feed-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.feed-items.feed-grid { grid-template-columns: 1fr; }
}
/* ---- style=overlaytop: title on TOP of the photo, description on the
BOTTOM of the photo, both layered over the image ---- */
.feed-item-overlaytop .feed-item-thumb {
height: 220px;
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
border-radius: 6px;
overflow: hidden;
background-size: cover;
background-position: center;
}
.feed-item-overlaytop .feed-item-title-top {
background: linear-gradient(rgba(0,0,0,0.65), transparent);
padding: 0.5em 0.75em;
}
.feed-item-overlaytop .feed-item-title-top h3 {
color: #fff;
margin: 0;
font-size: 1.1em;
}
.feed-item-overlaytop .feed-item-desc-overlay {
background: linear-gradient(transparent, rgba(0,0,0,0.8));
color: #fff;
padding: 0.5em 0.75em;
font-size: 0.85em;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ---- style=side: photo alone on the left, title + description stacked
on the right, nothing written over the image ---- */
.feed-item-side {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 1em;
max-width: 100%;
flex: 1 1 100%;
}
.feed-item-side .feed-item-link {
display: flex;
flex-direction: row;
gap: 1em;
width: 100%;
text-decoration: none;
color: inherit;
}
.feed-item-side .feed-item-thumb {
flex: 0 0 240px;
height: 160px;
border-radius: 6px;
background-size: cover;
background-position: center;
}
.feed-item-side .feed-item-body {
flex: 1 1 auto;
}
.feed-item-side .feed-item-body h3 {
margin: 0 0 0.3em;
font-size: 1.2em;
}
.feed-item-side .feed-item-desc {
margin-top: 0;
font-size: 0.9em;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
@media (max-width: 600px) {
.feed-item-side .feed-item-link { flex-direction: column; }
.feed-item-side .feed-item-thumb { flex: none; width: 100%; }
}
/* ---- Optional call-to-action button (cta= / ctalabel=) ----
Appears inline below the description in "side" style, or pinned to
the bottom-right corner of the photo in "overlaytop" style. */
.feed-item-cta {
display: inline-block;
margin-top: 0.6em;
padding: 0.4em 0.9em;
background: #0645ad;
color: #fff !important;
border-radius: 4px;
font-size: 0.85em;
text-decoration: none;
}
.feed-item-cta:hover {
background: #03318c;
}
.feed-item-overlaytop .feed-item-thumb .feed-item-cta {
position: absolute;
bottom: 0.5em;
right: 0.5em;
margin-top: 0;
}
/* ---- Optional like/share icon row (actions=1) ----
Visual placeholders only — wire up real click behavior later once
the action (favoriting, sharing, etc.) is decided. */
.feed-item-actions {
display: flex;
gap: 0.5em;
margin-top: 0.5em;
}
.feed-item-actions button {
background: rgba(255,255,255,0.9);
border: 1px solid rgba(0,0,0,0.15);
border-radius: 50%;
width: 2em;
height: 2em;
cursor: pointer;
font-size: 0.9em;
line-height: 1;
}
.feed-item-overlaytop .feed-item-thumb .feed-item-actions {
position: absolute;
top: 0.5em;
right: 0.5em;
margin-top: 0;
}
/* =====================================================================
FEED SYSTEM — LAYOUT ADDITIONS (columns control + new card styles)
Everything below is additive; it does not alter the original
.feed-item / .feed-block / .feed-title rules added previously.
===================================================================== */
/* ---- Optional column-count override (cols= parameter on {{Feed}}) ----
Only takes effect on a feed where cols= was actually set; otherwise
feeds keep using the original flexible 3-per-row layout untouched. */
.feed-items.feed-grid {
display: grid;
grid-template-columns: repeat(var(--feed-cols, 3), 1fr);
gap: 1em;
}
.feed-items.feed-grid .feed-item,
.feed-items.feed-grid .feed-item-side,
.feed-items.feed-grid .feed-item-overlaytop {
max-width: 100%;
}
@media (max-width: 900px) {
.feed-items.feed-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.feed-items.feed-grid { grid-template-columns: 1fr; }
}
/* ---- style=overlaytop: title on TOP of the photo, description on the
BOTTOM of the photo, both layered over the image ---- */
.feed-item-overlaytop .feed-item-thumb {
height: 220px;
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
border-radius: 6px;
overflow: hidden;
background-size: cover;
background-position: center;
}
.feed-item-overlaytop .feed-item-title-top {
background: linear-gradient(rgba(0,0,0,0.65), transparent);
padding: 0.5em 0.75em;
}
.feed-item-overlaytop .feed-item-title-top h3 {
color: #fff;
margin: 0;
font-size: 1.1em;
}
.feed-item-overlaytop .feed-item-desc-overlay {
background: linear-gradient(transparent, rgba(0,0,0,0.8));
color: #fff;
padding: 0.5em 0.75em;
font-size: 0.85em;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ---- style=side: photo alone on the left, title + description stacked
on the right, nothing written over the image ---- */
.feed-item-side {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 1em;
max-width: 100%;
flex: 1 1 100%;
}
.feed-item-side .feed-item-link {
display: flex;
flex-direction: row;
gap: 1em;
width: 100%;
text-decoration: none;
color: inherit;
}
.feed-item-side .feed-item-thumb {
flex: 0 0 240px;
height: 160px;
border-radius: 6px;
background-size: cover;
background-position: center;
}
.feed-item-side .feed-item-body {
flex: 1 1 auto;
}
.feed-item-side .feed-item-body h3 {
margin: 0 0 0.3em;
font-size: 1.2em;
}
.feed-item-side .feed-item-desc {
margin-top: 0;
font-size: 0.9em;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
@media (max-width: 600px) {
.feed-item-side .feed-item-link { flex-direction: column; }
.feed-item-side .feed-item-thumb { flex: none; width: 100%; }
}
/* ---- Optional call-to-action button (cta= / ctalabel=) ----
Appears inline below the description in "side" style, or pinned to
the bottom-right corner of the photo in "overlaytop" style. */
.feed-item-cta {
display: inline-block;
margin-top: 0.6em;
padding: 0.4em 0.9em;
background: #0645ad;
color: #fff !important;
border-radius: 4px;
font-size: 0.85em;
text-decoration: none;
}
.feed-item-cta:hover {
background: #03318c;
}
.feed-item-overlaytop .feed-item-thumb .feed-item-cta {
position: absolute;
bottom: 0.5em;
right: 0.5em;
margin-top: 0;
}
/* ---- Optional like/share icon row (actions=1) ----
Visual placeholders only — wire up real click behavior later once
the action (favoriting, sharing, etc.) is decided. */
.feed-item-actions {
display: flex;
gap: 0.5em;
margin-top: 0.5em;
}
.feed-item-actions button {
background: rgba(255,255,255,0.9);
border: 1px solid rgba(0,0,0,0.15);
border-radius: 50%;
width: 2em;
height: 2em;
cursor: pointer;
font-size: 0.9em;
line-height: 1;
}
.feed-item-overlaytop .feed-item-thumb .feed-item-actions {
position: absolute;
top: 0.5em;
right: 0.5em;
margin-top: 0;
}