1
0

fix for long words breaking layout

This commit is contained in:
Philip Wagner
2024-10-13 22:14:15 +02:00
parent 2fef7e9e62
commit b0db09492d

View File

@@ -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") }