jonny/jonnybarnes.uk
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases 5 Packages Wiki Activity Actions

Improve bookmark layout

Browse source 
First bookmark on the bookmarks page now has spacing added to the top
This commit is contained in:
Jonny Barnes 2020-02-21 19:38:33 +00:00
parent 980f2e14d7
commit 605ef1ef0b
4 changed files with 50 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
public/assets/app.css vendored
View file

@ -32,22 +32,25 @@ body {
#top-header nav a { #top-header nav a {
margin: 0 0.5rem; } margin: 0 0.5rem; }
.h-feed { @media screen and (max-width: 699px) {
main {
margin-left: 5px;
margin-right: 5px; } }
main .h-feed {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: auto; } margin: auto; }
.h-feed img { main .h-feed img {
max-width: 100%; } max-width: 100%; }
@media screen and (min-width: 700px) { @media screen and (min-width: 700px) {
.h-feed { main .h-feed {
max-width: 700px; } max-width: 700px; }
.h-feed > .note, main .h-feed > .note,
.h-feed > .h-entry { main .h-feed > .h-entry {
padding: 0 1rem; } } padding: 0 1rem; } }
@media screen and (max-width: 699px) { main .h-feed .h-entry:first-child > .bookmark-link {
.h-feed { padding-top: 2rem; }
margin-left: 5px;
margin-right: 5px; } }
.note { .note {
display: flex; display: flex;

2
public/assets/app.css.map
View file

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

44
resources/sass/_layout-main.scss vendored
View file

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

20
resources/views/bookmarks/index.blade.php
View file

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