diff --git a/assets/style.css b/assets/style.css index ef14ae4..98d28dc 100644 --- a/assets/style.css +++ b/assets/style.css @@ -39,7 +39,7 @@ h2 + p { margin-top: 5pt } .text-center { text-align: center } .align-self-center { align-self: center } -code { font-family: Kobata !important; font-weight: normal } +code { font-family: Kobata !important; font-weight: normal; word-break: break-word; hyphens: auto } .bg-white-white, .bg-white-pink, .bg-white-green, .bg-white-lila, .bg-white-orange, .bg-white-black { background-color: var(--white) } .bg-pink-white, .bg-pink-pink, .bg-pink-green, .bg-pink-lila, .bg-pink-orange, .bg-pink-black { background-color: var(--pink) } @@ -103,7 +103,7 @@ nav > div { margin-left: -2px } #lang-switch { position: absolute; top: -7px; right: 0 } #lang-switch a { line-height: 1rem !important } -#content { position: relative; padding-bottom: calc(22pt + 40pt + 22pt) } +#content { position: relative; padding-bottom: calc(22pt + 40pt + 22pt); overflow-wrap: break-word; hyphens: auto } footer { background: var(--white); padding: 22pt; position: fixed; left: 0; right: 0; bottom: 0; line-height: 1 !important; } footer a { line-height: 1 !important; text-align-last: justify; display: block; white-space: nowrap; letter-spacing: 2.8vw } @media (max-width: 1700px) { footer a { letter-spacing: 2vw } } @@ -131,6 +131,10 @@ footer a { line-height: 1 !important; text-align-last: justify; display: block; video { width: 100%; } } +@media (max-width: 450px) { + footer { font-size: 16pt !important } +} + .embed-btn { display:block; position:absolute !important; top:0; right:0; bottom:0; left:0; z-index:1; background-position:50%; background-size: 15.5% auto; background-repeat:no-repeat; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 8'%3E%3Crect fill='rgba(0,0,0,.65)' width='13' height='8' rx='1' ry='1'/%3E%3Cpolygon fill='%23fff' points='5 6 9 4 5 2'/%3E%3C/svg%3E") } .embed-btn:hover { cursor: pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 8'%3E%3Crect fill='%231AB7EA' width='13' height='8' rx='1' ry='1'/%3E%3Cpolygon fill='%23fff' points='5 6 9 4 5 2'/%3E%3C/svg%3E") } .embed-btn.yt { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 48'%3E%3Cpath fill='%23212121' fill-opacity='.8' d='M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z'/%3E%3Cpath fill='%23fff' d='m45 24-18-10v20'/%3E%3C/svg%3E") }