~bfiedler/website

c21ff891ba6f0707d23283cea167c8e061971e78 — Ben Fiedler 3 months ago 2915f7b
Fix styling on ultra-narrow (<360px) screens

* do not show dates for blog posts
* forcefully break words if they would overflow the page
1 files changed, 10 insertions(+), 1 deletions(-)

M assets/style.scss
M assets/style.scss => assets/style.scss +10 -1
@@ 15,6 15,8 @@ html {
    font-size: 18px;
    background-color: var(--main-bg-color);
    color: var(--main-fg-color);

    word-break: break-word;
}

body {


@@ 47,8 49,8 @@ ul.nav {
}

time.post-time {
    display: none;
    color: var(--aside-fg-color);
    white-space: nowrap;
    font-family: 'Fira Code', monospace;
}



@@ 375,6 377,13 @@ section.webring {
    }
}

@media (min-width: 360px) {
    time.post-time {
        word-break: normal;
        display: initial;
    }
}

@media (min-width: 640px) {
    .blogpost figure.resizable img {
        width: 616px; // 640 - 1em (= 16px) - 2 * 4px