tweak design for mobile

routes/_components/AccountProfile.html

@@ -140,9 +140,22 @@
   .account-profile-note {
     grid-area: note;
     padding: 10px 0;
+    font-size: 0.9em;
+    word-wrap: break-word;
+    overflow: hidden;
+    white-space: pre-wrap;
   }
+
   :global(.account-profile-note p) {
-    font-size: 1em;
+    margin: 0 0 20px;
+  }
+
+  :global(.account-profile-note p:first-child) {
+    margin: 0 0 20px;
+  }
+
+  :global(.account-profile-note p:last-child) {
+    margin: 0;
   }
 
   @media (max-width: 767px) {
@@ -151,7 +164,7 @@
       height: 80px;
     }
     .account-profile-name {
-      font-size: 1.2em;
+      font-size: 1.3em;
     }
     .account-profile-grid {
       display: grid;
@@ -161,12 +174,13 @@
                            "note       note          note";
       grid-template-columns: min-content minmax(auto, 1fr) min-content;
       grid-template-rows: min-content min-content 1fr min-content;
+      padding: 10px;
     }
     .account-profile-note {
       padding: 5px 0;
     }
     .account-profile-username {
-      font-size: 0.9em;
+      font-size: 1.1em;
     }
     .account-profile-name, .account-profile-username {
       align-self: flex-start;

routes/_components/DynamicPageBanner.html

@@ -33,13 +33,13 @@
   }
   @media (max-width: 767px) {
     .dynamic-page-banner {
-      margin: 15px 15px 15px;
+      margin: 20px 10px 20px;
     }
     h1.dynamic-page-title {
-      font-size: 1.2em;
+      font-size: 1.3em;
     }
     button.dynamic-page-go-back {
-      font-size: 1.2em;
+      font-size: 1.3em;
     }
   }
 </style>

routes/_components/NavItem.html

@@ -64,7 +64,7 @@
       height: 25px;
     }
     .main-nav-link {
-      padding: 25px 0;
+      padding: 20px 0;
     }
   }
 </style>

routes/_components/status/Media.html

@@ -72,14 +72,15 @@
     background: var(--loading-bg);
   }
   .status-media {
-    max-width: calc(100vw - 40px);
     overflow: hidden;
   }
 
   .status-media video, .status-media img {
-    max-width: calc(100vw - 40px);
     object-fit: cover;
   }
+  .status-media, .status-media video, .status-media img {
+    max-width: calc(100vw - 40px);
+  }
   .play-video-button {
     margin: 0;
     padding: 0;
@@ -107,6 +108,11 @@
     border-radius: 100%;
     background: var(--mask-opaque-bg);
   }
+  @media (max-width: 767px) {
+    .status-media, .status-media video, .status-media img {
+      max-width: calc(100vw - 20px);
+    }
+  }
 </style>
 <script>
   const DEFAULT_MEDIA_WIDTH = 300

routes/_components/status/Status.html

@@ -304,6 +304,12 @@
     fill: var(--deemphasized-text-color);
     background: var(--mask-opaque-bg);
   }
+  @media (max-width: 767px) {
+    .status-article {
+      padding: 10px 10px;
+      max-width: calc(100vw - 20px);
+    }
+  }
 </style>
 <script>
   import Avatar from './Avatar.html'

scss/global.scss

@@ -22,6 +22,9 @@ body {
   left: 0;
   right: 0;
   bottom: 0;
+  @media (max-width: 767px) {
+    top: 62px;
+  }
 }
 
 main {

templates/2xx.html

@@ -11,7 +11,7 @@
 	<style>
 /* auto-generated w/ build-sass.js */
 body{--button-primary-bg:#6081e6;--button-primary-text:#fff;--button-primary-border:#132c76;--button-primary-bg-active:#456ce2;--button-primary-bg-hover:#6988e7;--button-bg:#e6e6e6;--button-text:#333;--button-border:#a7a7a7;--button-bg-active:#bfbfbf;--button-bg-hover:#f2f2f2;--input-border:#dadada;--anchor-text:#4169e1;--main-bg:#fff;--body-bg:#e8edfb;--body-text-color:#333;--main-border:#dadada;--svg-fill:#4169e1;--form-bg:#f7f7f7;--form-border:#c1c1c1;--nav-bg:#4169e1;--nav-border:#214cce;--nav-a-border:#4169e1;--nav-a-selected-border:#fff;--nav-a-selected-bg:#6d8ce8;--nav-svg-fill:#fff;--nav-text-color:#fff;--nav-a-selected-border-hover:#fff;--nav-a-selected-bg-hover:#839deb;--nav-a-bg-hover:#577ae4;--nav-a-border-hover:#4169e1;--nav-svg-fill-hover:#fff;--nav-text-color-hover:#fff;--action-button-fill-color:#90a8ee;--action-button-fill-color-hover:#a2b6f0;--action-button-fill-color-active:#577ae4;--action-button-fill-color-pressed:#2351dc;--action-button-fill-color-pressed-hover:#3862e0;--action-button-fill-color-pressed-active:#1d44b8;--settings-list-item-bg:#fff;--settings-list-item-text:#4169e1;--settings-list-item-text-hover:#4169e1;--settings-list-item-border:#dadada;--settings-list-item-bg-active:#e6e6e6;--settings-list-item-bg-hover:#fafafa;--toast-bg:#333;--toast-border:#fafafa;--toast-text:#fff;--mask-bg:#333;--mask-svg-fill:#fff;--mask-opaque-bg:rgba(51,51,51,0.8);--loading-bg:#ededed;--deemphasized-text-color:#666;--focus-outline:#c5d1f6;--status-direct-background:#d2dcf8}
-body{margin:0;font-family:system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue;font-size:14px;line-height:1.3;color:var(--body-text-color);background:var(--body-bg);position:fixed;left:0;right:0;bottom:0;top:0}.container{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;will-change:transform;position:absolute;top:72px;left:0;right:0;bottom:0}main{position:relative;width:602px;max-width:100vw;padding:0;box-sizing:border-box;margin:30px auto 15px;background:var(--main-bg);border:1px solid var(--main-border);border-radius:1px}@media (max-width: 767px){main{margin:5px auto 15px}}h1,h2,h3,h4,h5,h6{margin:0 0 0.5em 0;font-weight:400;line-height:1.2}h1{font-size:2em}a{color:var(--anchor-text);text-decoration:none}a:visited{color:var(--anchor-text)}a:hover{text-decoration:underline}input{border:1px solid var(--input-border);padding:5px}button{font-size:1.2em;background:var(--button-bg);border-radius:2px;padding:10px 15px;border:1px solid var(--button-border);cursor:pointer;color:var(--button-text)}button:hover{background:var(--button-bg-hover)}button:active{background:var(--button-bg-active)}button[disabled]{opacity:0.35;pointer-events:none;cursor:not-allowed}button.primary{border:1px solid var(--button-primary-border);background:var(--button-primary-bg);color:var(--button-primary-text)}button.primary:hover{background:var(--button-primary-bg-hover)}button.primary:active{background:var(--button-primary-bg-active)}p,label,input{font-size:1.3em}ul,li,p{padding:0;margin:0}.hidden{opacity:0}*:focus{outline:2px solid var(--focus-outline)}button::-moz-focus-inner{border:0}
+body{margin:0;font-family:system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue;font-size:14px;line-height:1.3;color:var(--body-text-color);background:var(--body-bg);position:fixed;left:0;right:0;bottom:0;top:0}.container{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;will-change:transform;position:absolute;top:72px;left:0;right:0;bottom:0}@media (max-width: 767px){.container{top:62px}}main{position:relative;width:602px;max-width:100vw;padding:0;box-sizing:border-box;margin:30px auto 15px;background:var(--main-bg);border:1px solid var(--main-border);border-radius:1px}@media (max-width: 767px){main{margin:5px auto 15px}}h1,h2,h3,h4,h5,h6{margin:0 0 0.5em 0;font-weight:400;line-height:1.2}h1{font-size:2em}a{color:var(--anchor-text);text-decoration:none}a:visited{color:var(--anchor-text)}a:hover{text-decoration:underline}input{border:1px solid var(--input-border);padding:5px}button{font-size:1.2em;background:var(--button-bg);border-radius:2px;padding:10px 15px;border:1px solid var(--button-border);cursor:pointer;color:var(--button-text)}button:hover{background:var(--button-bg-hover)}button:active{background:var(--button-bg-active)}button[disabled]{opacity:0.35;pointer-events:none;cursor:not-allowed}button.primary{border:1px solid var(--button-primary-border);background:var(--button-primary-bg);color:var(--button-primary-text)}button.primary:hover{background:var(--button-primary-bg-hover)}button.primary:active{background:var(--button-primary-bg-active)}p,label,input{font-size:1.3em}ul,li,p{padding:0;margin:0}.hidden{opacity:0}*:focus{outline:2px solid var(--focus-outline)}button::-moz-focus-inner{border:0}
 body.offline,body.theme-hotpants.offline,body.theme-majesty.offline,body.theme-oaken.offline,body.theme-scarlet.offline,body.theme-seafoam.offline,body.theme-gecko.offline{--button-primary-bg:#ababab;--button-primary-text:#fff;--button-primary-border:#4d4d4d;--button-primary-bg-active:#9c9c9c;--button-primary-bg-hover:#b0b0b0;--button-bg:#e6e6e6;--button-text:#333;--button-border:#a7a7a7;--button-bg-active:#bfbfbf;--button-bg-hover:#f2f2f2;--input-border:#dadada;--anchor-text:#999;--main-bg:#fff;--body-bg:#fafafa;--body-text-color:#333;--main-border:#dadada;--svg-fill:#999;--form-bg:#f7f7f7;--form-border:#c1c1c1;--nav-bg:#999;--nav-border:gray;--nav-a-border:#999;--nav-a-selected-border:#fff;--nav-a-selected-bg:#b3b3b3;--nav-svg-fill:#fff;--nav-text-color:#fff;--nav-a-selected-border-hover:#fff;--nav-a-selected-bg-hover:#bfbfbf;--nav-a-bg-hover:#a6a6a6;--nav-a-border-hover:#999;--nav-svg-fill-hover:#fff;--nav-text-color-hover:#fff;--action-button-fill-color:#c7c7c7;--action-button-fill-color-hover:#d1d1d1;--action-button-fill-color-active:#a6a6a6;--action-button-fill-color-pressed:#878787;--action-button-fill-color-pressed-hover:#949494;--action-button-fill-color-pressed-active:#737373;--settings-list-item-bg:#fff;--settings-list-item-text:#999;--settings-list-item-text-hover:#999;--settings-list-item-border:#dadada;--settings-list-item-bg-active:#e6e6e6;--settings-list-item-bg-hover:#fafafa;--toast-bg:#333;--toast-border:#fafafa;--toast-text:#fff;--mask-bg:#333;--mask-svg-fill:#fff;--mask-opaque-bg:rgba(51,51,51,0.8);--loading-bg:#ededed;--deemphasized-text-color:#666;--focus-outline:#bfbfbf;--status-direct-background:#ededed}
 
 </style>