Merge pull request #150 from jonnybarnes/mobile-layout-v2

Fix mobile layout for latest redesign

public/assets/app.css

@@ -23,24 +23,34 @@ body {
   flex-direction: column;
   justify-content: center; }
   #top-header h1 {
-    display: flex;
+    width: 100%;
-    justify-content: center; }
+    text-align: center; }
   #top-header nav {
     display: flex;
-    justify-content: center; }
+    justify-content: center;
+    flex-wrap: wrap; }
     #top-header nav a {
       margin: 0 0.5rem; }
 
-.h-feed {
+@media screen and (max-width: 699px) {
+  main {
+    margin-left: 5px;
+    margin-right: 5px; } }
+
+main .h-feed {
   display: flex;
   flex-direction: column;
   margin: auto; }
+  main .h-feed img {
+    max-width: 100%; }
   @media screen and (min-width: 700px) {
-    .h-feed {
+    main .h-feed {
       max-width: 700px; }
-      .h-feed > .note,
+      main .h-feed > .note,
-      .h-feed > .h-entry {
+      main .h-feed > .h-entry {
         padding: 0 1rem; } }
+  main .h-feed .h-entry:first-child > .bookmark-link {
+    padding-top: 2rem; }
 
 .note {
   display: flex;
@@ -63,6 +73,15 @@ footer {
   flex-direction: column;
   align-items: center;
   margin-top: 1.5rem; }
+  @media screen and (max-width: 699px) {
+    footer input {
+      max-width: 95vw; } }
+  footer .iwc-logo {
+    max-width: 100%; }
+  @media screen and (max-width: 699px) {
+    footer {
+      margin-left: 5px;
+      margin-right: 5px; } }
 
 .post-info a {
   text-decoration: none; }

public/assets/app.css.map

@@ -1 +1 @@
-{"version":3,"sources":["webpack:///./resources/sass/_variables.scss","webpack:///./resources/sass/_base.scss","webpack:///./resources/sass/_layout-main.scss","webpack:///./resources/sass/_link-styles.scss","webpack:///./resources/sass/_posse.scss"],"names":[],"mappings":"AAAA;EACI,yCAAkB;EAClB,6CAAsB;;ACF1B;EACI,mCAAmC;EACnC,eAAe;;AAGnB;;;;;;EAMI,uCAAuC;;ACX3C;EACI,aAAa;EACb,sBAAsB;;AAG1B;EACI,aAAa;EACb,sBAAsB;EACtB,uBAAuB;EAH3B;IAMQ,aAAa;IACb,uBAAuB;EAP/B;IAWQ,aAAa;IACb,uBAAuB;IAZ/B;MAeY,gBAAgB;;AAK5B;EACI,aAAa;EACb,sBAAsB;EACtB,YAAY;EAEZ;IALJ;MAMQ,gBAAgB;MANxB;;QAUY,eAAe,IAClB;;AAIT;EACI,aAAa;EACb,sBAAsB;EAF1B;IAKQ,aAAa;IACb,mBAAmB;IACnB,8BAA8B;IAPtC;MAWgB,WAAW;MACX,UAAU;EAZ1B;IAoBgB,cAAc;;AAM9B;EACI,eAAe;;AAGnB;EACI,aAAa;EACb,sBAAsB;EACtB,mBAAmB;EACnB,kBAAkB;;AC1EtB;EAEQ,qBAAqB;;AAI7B;EAEQ,qBAAqB;;ACR7B;;EAEI,aAAa","file":"app.css","sourcesContent":[":root {\n    --font-stack-body: montserrat, sans-serif;\n    --font-stack-headings: bebas-neue, sans-serif;\n}\n","body {\n    font-family: var(--font-stack-body);\n    font-size: 2rem;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n    font-family: var(--font-stack-headings);\n}\n","body {\n    display: flex;\n    flex-direction: column;\n}\n\n#top-header {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    h1 {\n        display: flex;\n        justify-content: center;\n    }\n\n    nav {\n        display: flex;\n        justify-content: center;\n\n        a {\n            margin: 0 0.5rem;\n        }\n    }\n}\n\n.h-feed {\n    display: flex;\n    flex-direction: column;\n    margin: auto;\n\n    @media screen and (min-width: 700px) {\n        max-width: 700px;\n\n        > .note,\n        > .h-entry {\n            padding: 0 1rem;\n        }\n    }\n}\n\n.note {\n    display: flex;\n    flex-direction: column;\n\n    .note-metadata {\n        display: flex;\n        flex-direction: row;\n        justify-content: space-between;\n\n        .syndication-links {\n            svg {\n                height: 1em;\n                width: 1em;\n            }\n        }\n    }\n\n    > .e-content {\n        > .naked-link {\n            .u-photo {\n                margin: 2rem 0;\n            }\n        }\n    }\n}\n\n.personal-bio {\n    padding: 0 2rem;\n}\n\nfooter {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    margin-top: 1.5rem;\n}\n",".post-info {\n    a {\n        text-decoration: none;\n    }\n}\n\n.syndication-links {\n    .u-syndication {\n        text-decoration: none;\n    }\n}\n",".p-bridgy-facebook-content,\n.p-bridgy-twitter-content {\n    display: none;\n}\n"],"sourceRoot":""}
+{"version":3,"sources":["webpack:///./resources/sass/_variables.scss","webpack:///./resources/sass/_base.scss","webpack:///./resources/sass/_layout-main.scss","webpack:///./resources/sass/_link-styles.scss","webpack:///./resources/sass/_posse.scss"],"names":[],"mappings":"AAAA;EACI,yCAAkB;EAClB,6CAAsB;;ACF1B;EACI,mCAAmC;EACnC,eAAe;;AAGnB;;;;;;EAMI,uCAAuC;;ACX3C;EACI,aAAa;EACb,sBAAsB;;AAG1B;EACI,aAAa;EACb,sBAAsB;EACtB,uBAAuB;EAH3B;IAMQ,WAAW;IACX,kBAAkB;EAP1B;IAWQ,aAAa;IACb,uBAAuB;IACvB,eAAe;IAbvB;MAgBY,gBAAgB;;AAMxB;EADJ;IAEQ,gBAAgB;IAChB,iBAAiB,IA2BxB;;AA9BD;EAOQ,aAAa;EACb,sBAAsB;EACtB,YAAY;EATpB;IAYY,eAAe;EAGnB;IAfR;MAgBY,gBAAgB;MAhB5B;;QAoBgB,eAAe,IAClB;EArBb;IA0BgB,iBAAiB;;AAMjC;EACI,aAAa;EACb,sBAAsB;EAF1B;IAKQ,aAAa;IACb,mBAAmB;IACnB,8BAA8B;IAPtC;MAWgB,WAAW;MACX,UAAU;EAZ1B;IAoBgB,cAAc;;AAM9B;EACI,eAAe;;AAGnB;EACI,aAAa;EACb,sBAAsB;EACtB,mBAAmB;EACnB,kBAAkB;EAGd;IAPR;MAQY,eAAe,IAEtB;EAVL;IAaQ,eAAe;EAGnB;IAhBJ;MAiBQ,gBAAgB;MAChB,iBAAiB,IAExB;;AC5GD;EAEQ,qBAAqB;;AAI7B;EAEQ,qBAAqB;;ACR7B;;EAEI,aAAa","file":"app.css","sourcesContent":[":root {\n    --font-stack-body: montserrat, sans-serif;\n    --font-stack-headings: bebas-neue, sans-serif;\n}\n","body {\n    font-family: var(--font-stack-body);\n    font-size: 2rem;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n    font-family: var(--font-stack-headings);\n}\n","body {\n    display: flex;\n    flex-direction: column;\n}\n\n#top-header {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    h1 {\n        width: 100%;\n        text-align: center;\n    }\n\n    nav {\n        display: flex;\n        justify-content: center;\n        flex-wrap: wrap;\n\n        a {\n            margin: 0 0.5rem;\n        }\n    }\n}\n\nmain {\n    @media screen and (max-width: 699px) {\n        margin-left: 5px;\n        margin-right: 5px;\n    }\n\n    .h-feed {\n        display: flex;\n        flex-direction: column;\n        margin: auto;\n\n        img {\n            max-width: 100%;\n        }\n\n        @media screen and (min-width: 700px) {\n            max-width: 700px;\n\n            > .note,\n            > .h-entry {\n                padding: 0 1rem;\n            }\n        }\n\n        .h-entry:first-child {\n            > .bookmark-link {\n                padding-top: 2rem;\n            }\n        }\n    }\n}\n\n.note {\n    display: flex;\n    flex-direction: column;\n\n    .note-metadata {\n        display: flex;\n        flex-direction: row;\n        justify-content: space-between;\n\n        .syndication-links {\n            svg {\n                height: 1em;\n                width: 1em;\n            }\n        }\n    }\n\n    > .e-content {\n        > .naked-link {\n            .u-photo {\n                margin: 2rem 0;\n            }\n        }\n    }\n}\n\n.personal-bio {\n    padding: 0 2rem;\n}\n\nfooter {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    margin-top: 1.5rem;\n\n    input {\n        @media screen and (max-width: 699px) {\n            max-width: 95vw;\n        }\n    }\n\n    .iwc-logo {\n        max-width: 100%;\n    }\n\n    @media screen and (max-width: 699px) {\n        margin-left: 5px;\n        margin-right: 5px;\n    }\n}\n",".post-info {\n    a {\n        text-decoration: none;\n    }\n}\n\n.syndication-links {\n    .u-syndication {\n        text-decoration: none;\n    }\n}\n",".p-bridgy-facebook-content,\n.p-bridgy-twitter-content {\n    display: none;\n}\n"],"sourceRoot":""}

resources/sass/_layout-main.scss

@@ -9,13 +9,14 @@ body {
     justify-content: center;
 
     h1 {
-        display: flex;
+        width: 100%;
-        justify-content: center;
+        text-align: center;
     }
 
     nav {
         display: flex;
         justify-content: center;
+        flex-wrap: wrap;
 
         a {
             margin: 0 0.5rem;
@@ -23,11 +24,21 @@ body {
     }
 }
 
+main {
+    @media screen and (max-width: 699px) {
+        margin-left: 5px;
+        margin-right: 5px;
+    }
+
     .h-feed {
         display: flex;
         flex-direction: column;
         margin: auto;
 
+        img {
+            max-width: 100%;
+        }
+
         @media screen and (min-width: 700px) {
             max-width: 700px;
 
@@ -36,6 +47,13 @@ body {
                 padding: 0 1rem;
             }
         }
+
+        .h-entry:first-child {
+            > .bookmark-link {
+                padding-top: 2rem;
+            }
+        }
+    }
 }
 
 .note {
@@ -73,4 +91,19 @@ footer {
     flex-direction: column;
     align-items: center;
     margin-top: 1.5rem;
+
+    input {
+        @media screen and (max-width: 699px) {
+            max-width: 95vw;
+        }
+    }
+
+    .iwc-logo {
+        max-width: 100%;
+    }
+
+    @media screen and (max-width: 699px) {
+        margin-left: 5px;
+        margin-right: 5px;
+    }
 }

resources/views/bookmarks/index.blade.php

@@ -3,9 +3,10 @@
 @section('title')Bookmarks « @stop
 
 @section('content')
-    <div class="h-feed top-space">
+    <div class="h-feed">
         @foreach($bookmarks as $bookmark)
             <div class="h-entry">
+                <div class="bookmark-link">
                     <a class="u-bookmark-of<?php if ($bookmark->name !== null) { echo ' h-cite'; } ?>" href="{{ $bookmark->url }}">
                         @isset($bookmark->name)
                             {{ $bookmark->name }}
@@ -15,6 +16,7 @@
                             {{ $bookmark->url }}
                         @endempty
                     </a> &nbsp; <a href="{{ $bookmark->longurl }}">🔗</a>
+                </div>
                 @isset($bookmark->content)
                     <p>{{ $bookmark->content }}</p>
                 @endisset

resources/views/master.blade.php

@@ -24,9 +24,9 @@
     </head>
     <body>
         <header id="top-header">
-            <a rel="author" href="/">
+            <h1>
-                <h1>{{ config('app.display_name') }}</h1>
+                <a rel="author" href="/">{{ config('app.display_name') }}</a>
-            </a>
+            </h1>
             <nav>
                 <a href="/">All</a>
                 <a href="/notes">Notes</a>
@@ -48,9 +48,8 @@
             <form action="search" method="get">
                 <input type="text" name="terms" title="Search"><button type="submit">Search</button>
             </form>
-            <p>The code for <code>{{ config('app.longurl') }}</code> can be found on <a href="https://github.com/jonnybarnes/jonnybarnes.uk">GitHub</a>.</p>
             <p>Built with love: <a href="/colophon">Colophon</a></p>
-            <p><a href="https://indieweb.org"><img src="/assets/img/iwc.svg" alt="Indie Web Camp logo"></a></p>
+            <a href="https://indieweb.org"><img src="/assets/img/iwc.svg" alt="Indie Web Camp logo" class="iwc-logo"></a>
         </footer>
 
         <!--scripts go here when needed-->