diff --git a/public/style.css b/public/style.css index 2e6eba8..5f86b88 100644 --- a/public/style.css +++ b/public/style.css @@ -493,11 +493,11 @@ input[type="url"], * * * */ -.aspect-ratio { +.aspect-ratio, .timeline-item .timeline-content-box.embed { height: 0; position: relative; } -.aspect-ratio--16x9 { +.aspect-ratio--16x9, .timeline-item .timeline-content-box.embed { padding-bottom: 56.25%; } .aspect-ratio--9x16 { @@ -530,7 +530,7 @@ input[type="url"], .aspect-ratio--1x1 { padding-bottom: 100%; } -.aspect-ratio--object { +.aspect-ratio--object, .timeline-item .timeline-content-box.embed > iframe { position: absolute; top: 0; right: 0; @@ -9329,52 +9329,24 @@ span.icon-rss::before { .streams-container .twitch-embed-container.open { padding-bottom: 40.6%; } } -.timeline.no-forums .forums { - display: none; } - -.timeline.no-blogs .blogs { - display: none; } - -.timeline.no-library .library { - display: none; } - -.timeline.no-snippets .snippets { - display: none; } - -.timeline .timeline-item { +.timeline-item { background-color: #e8e8e8; background-color: var(--card-background); + --fade-color: #e8e8e8; + --fade-color: var(--card-background); color: black; color: var(--main-color); } - -.timeline-item { - /* - &:hover { - @include usevar(background-color, card-background-hover); - } - */ } .timeline-item .avatar-icon { border: 2px solid; border-color: #666; border-color: var(--theme-color); } .timeline-item .avatar-icon.big { - width: 62px; - height: 62px; } + width: 3.875rem; + height: 3.875rem; } .timeline-item .timeline-content-box > * { display: block; max-width: 100%; max-height: 80vh; } - .timeline-item .timeline-content-box.embed { - position: relative; - width: 100%; - height: 0; - padding-bottom: 56.25%; } - .timeline-item .timeline-content-box.embed > iframe { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; } .timeline-modal .container { max-height: 100vh; } diff --git a/src/rawdata/scss/_timeline.scss b/src/rawdata/scss/_timeline.scss index a7f8d79..21ca461 100644 --- a/src/rawdata/scss/_timeline.scss +++ b/src/rawdata/scss/_timeline.scss @@ -1,24 +1,15 @@ -.timeline { - .timeline-item { - @include usevar(background-color, card-background); - @include usevar(color, main-color); - } -} - .timeline-item { - /* - &:hover { - @include usevar(background-color, card-background-hover); - } - */ + @include usevar(background-color, card-background); + @include usevar(--fade-color, card-background); + @include usevar(color, main-color); .avatar-icon { border: 2px solid; @include usevar(border-color, theme-color); &.big { - width: 62px; - height: 62px; + width: px2rem(62px); + height: px2rem(62px); } } @@ -29,18 +20,10 @@ } .timeline-content-box.embed { - // NOTE(asaf): CSS trick to get an iframe to auto resize - position: relative; - width: 100%; - height: 0; - padding-bottom: 56.25%; // NOTE(asaf): As percentage of width. Ensures 16:9 aspect ratio. + @extend .aspect-ratio, .aspect-ratio--16x9; - & > iframe { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; + > iframe { + @extend .aspect-ratio--object; } } } diff --git a/src/templates/src/include/timeline_item.html b/src/templates/src/include/timeline_item.html index 988f6cd..bb557b9 100644 --- a/src/templates/src/include/timeline_item.html +++ b/src/templates/src/include/timeline_item.html @@ -1,39 +1,57 @@ -{{/* -TODO: The logic in here for how to present various types of timeline items needs to be more robust. -*/}} +{{ $small := or .Description .EmbedMedia }} -{{ if or .Description .EmbedMedia }} -