Improve bookmark layout

First bookmark on the bookmarks page now has spacing added to the top

public/assets/app.css

@@ -32,22 +32,25 @@ body {
     #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; }
-  .h-feed img {
+  main .h-feed img {
     max-width: 100%; }
   @media screen and (min-width: 700px) {
-    .h-feed {
+    main .h-feed {
       max-width: 700px; }
-      .h-feed > .note,
-      .h-feed > .h-entry {
+      main .h-feed > .note,
+      main .h-feed > .h-entry {
         padding: 0 1rem; } }
-  @media screen and (max-width: 699px) {
-    .h-feed {
-      margin-left: 5px;
-      margin-right: 5px; } }
+  main .h-feed .h-entry:first-child > .bookmark-link {
+    padding-top: 2rem; }
 
 .note {
   display: flex;

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,WAAW;IACX,kBAAkB;EAP1B;IAWQ,aAAa;IACb,uBAAuB;IACvB,eAAe;IAbvB;MAgBY,gBAAgB;;AAK5B;EACI,aAAa;EACb,sBAAsB;EACtB,YAAY;EAHhB;IAMQ,eAAe;EAGnB;IATJ;MAUQ,gBAAgB;MAVxB;;QAcY,eAAe,IAClB;EAGL;IAlBJ;MAmBQ,gBAAgB;MAChB,iBAAiB,IAExB;;AAED;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;;ACpGD;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\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    @media screen and (max-width: 699px) {\n        margin-left: 5px;\n        margin-right: 5px;\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":""}
+{"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

@@ -24,7 +24,13 @@ body {
     }
 }
 
-.h-feed {
+main {
+    @media screen and (max-width: 699px) {
+        margin-left: 5px;
+        margin-right: 5px;
+    }
+
+    .h-feed {
         display: flex;
         flex-direction: column;
         margin: auto;
@@ -42,9 +48,11 @@ body {
             }
         }
 
-    @media screen and (max-width: 699px) {
-        margin-left: 5px;
-        margin-right: 5px;
+        .h-entry:first-child {
+            > .bookmark-link {
+                padding-top: 2rem;
+            }
+        }
     }
 }
 

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