diff --git a/public/style.css b/public/style.css index a8d4a9e..499c71a 100644 --- a/public/style.css +++ b/public/style.css @@ -8726,8 +8726,22 @@ header .hmn-logo { justify-content: center; color: white !important; } @media screen and (min-width: 30em) { - header .hmn-logo { + header .hmn-logo.big { width: 11.25rem; } } + @media screen and (min-width: 30em) { + header .hmn-logo.small { + width: 3.75rem; + padding: 0.8rem; + text-align: justify; + text-justify: inter-character; + flex-direction: column; + font-size: 1rem; + line-height: 1em; + align-items: stretch; } + header .hmn-logo.small div::after { + content: ''; + display: inline-block; + width: 100%; } } header .items { position: relative; } @@ -9324,51 +9338,54 @@ span.icon-rss::before { width: auto; max-height: calc(100vh - 2rem); } } -.carousel-container { - width: 50rem; } - .carousel-container .carousel { - box-sizing: content-box; - position: relative; } - .carousel-container .carousel-item { - position: absolute; - top: 0; - left: 0; } - .carousel-container .carousel-item:not(.active) { - display: none; } - .carousel-container .carousel-item br { - line-height: 0.6em; } - .carousel-container .carousel-description { - max-height: 14rem; - overflow: hidden; } - .carousel-container .carousel-fade { - position: absolute; - left: 0; - right: 0; - bottom: 0; - height: 30px; - background: linear-gradient( rgba(240, 240, 240, 0) , #f0f0f0 ); - background: linear-gradient( var(--dim-background-transparent) , var(--dim-background) ); } - .carousel-container .carousel-item-small { - position: absolute; - top: 0; - left: 0; } - .carousel-container .carousel-item-small:not(.active) { - display: none; } - .carousel-container .carousel-button { - border: 1px solid; - border-color: #999; - border-color: var(--dimmer-color); - cursor: pointer; - transition: all 100ms ease-in-out; } - .carousel-container .carousel-button:hover { - background-color: #bbb; - background-color: var(--dimmest-color); } - .carousel-container .carousel-button.active { - border-color: #666; - border-color: var(--theme-color); } - .carousel-container .carousel-button.active:hover { - background-color: #ccc; - background-color: var(--theme-color-dimmest); } +.carousel-container .carousel { + box-sizing: content-box; + position: relative; } + +.carousel-container .carousel-item { + position: absolute; + top: 0; + left: 0; } + .carousel-container .carousel-item:not(.active) { + display: none; } + .carousel-container .carousel-item br { + line-height: 0.6em; } + +.carousel-container .carousel-description { + max-height: 14rem; + overflow: hidden; } + +.carousel-container .carousel-fade { + position: absolute; + left: 0; + right: 0; + bottom: 0; + height: 30px; + background: linear-gradient( rgba(240, 240, 240, 0) , #f0f0f0 ); + background: linear-gradient( var(--dim-background-transparent) , var(--dim-background) ); } + +.carousel-container .carousel-item-small { + position: absolute; + top: 0; + left: 0; } + .carousel-container .carousel-item-small:not(.active) { + display: none; } + +.carousel-container .carousel-button { + border: 1px solid; + border-color: #999; + border-color: var(--dimmer-color); + cursor: pointer; + transition: all 100ms ease-in-out; } + .carousel-container .carousel-button:hover { + background-color: #bbb; + background-color: var(--dimmest-color); } + .carousel-container .carousel-button.active { + border-color: #666; + border-color: var(--theme-color); } + .carousel-container .carousel-button.active:hover { + background-color: #ccc; + background-color: var(--theme-color-dimmest); } .notice { color: #fff; diff --git a/src/rawdata/scss/_carousel.scss b/src/rawdata/scss/_carousel.scss index ca1eacd..c4ee964 100644 --- a/src/rawdata/scss/_carousel.scss +++ b/src/rawdata/scss/_carousel.scss @@ -1,6 +1,4 @@ .carousel-container { - width: 50rem; - .carousel { box-sizing: content-box; position: relative; diff --git a/src/rawdata/scss/_header.scss b/src/rawdata/scss/_header.scss index 15dd3d9..36cf540 100644 --- a/src/rawdata/scss/_header.scss +++ b/src/rawdata/scss/_header.scss @@ -12,9 +12,30 @@ header { align-items: center; justify-content: center; color: white !important; - - @media #{$breakpoint-not-small} { - width: px2rem(180px); + + &.big { + @media #{$breakpoint-not-small} { + width: px2rem(180px); + } + } + + &.small { + @media #{$breakpoint-not-small} { + width: $logo-height; + padding: 0.8rem; + text-align: justify; + text-justify: inter-character; + flex-direction: column; + font-size: 1rem; + line-height: 1em; + align-items: stretch; + + div::after { + content: ''; + display: inline-block; + width: 100%; + } + } } } diff --git a/src/templates/src/include/header.html b/src/templates/src/include/header.html index 549b7ce..e57b63b 100644 --- a/src/templates/src/include/header.html +++ b/src/templates/src/include/header.html @@ -26,35 +26,65 @@ {{ end }}