|
Β |
| (2 intermediate revisions by the same user not shown) |
| Line 3: |
Line 3: |
| font-size: 4em; | | font-size: 4em; |
| } | | } |
| .lore-spotlight-widget { | | .emoji-trigger-wrap { margin-bottom: .5rem; } |
| Β Β background: #001933;
| | #emoji-trigger { margin-right: .5rem; } |
| Β Β border: 1px solid #FF6300;
| |
| Β Β padding: 0.75em;
| |
| Β Β margin: 1em 0;
| |
| Β Β font-style: italic;
| |
| Β Β border-radius: 4px;
| |
| }
| |
| Β | |
| #blog-page-right {
| |
| background-color: var(--color-accent-navy);
| |
| }
| |
| /* Layout */
| |
| #blog-page-container {
| |
| Β display: flex;
| |
| Β align-items: flex-start;
| |
| Β gap: 1.25rem; Β Β Β Β Β /* space between columns */
| |
| } | |
| Β | |
| /* Reset any old floats from legacy CSS */
| |
| #blog-page-left,
| |
| #blog-page-middle, | |
| #blog-page-right {
| |
| Β float: none !important;
| |
| }
| |
| Β | |
| /* Column sizing + order */
| |
| #blog-page-leftΒ { flex: 0 0 260px; order: 1; }
| |
| #blog-page-middle{ flex: 1 1 auto;Β min-width: 0; order: 2; }
| |
| #blog-page-right { flex: 0 0 300px; order: 3; }
| |
| Β | |
| /* Make sure the clear div doesn't nuke the layout */
| |
| #blog-page-container .visualClear { display: none; }
| |
| Β | |
| /* Responsive stack on narrow screens */
| |
| @media (max-width: 1000px) {
| |
| Β #blog-page-container { flex-direction: column; }
| |
| Β #blog-page-left,
| |
| Β #blog-page-right,
| |
| Β #blog-page-middle { flex: 1 1 auto; order: initial; }
| |
| } | |