Improve bookmark layout

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

View file

@ -24,28 +24,36 @@ body {
}
}
.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;
}
}
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;
> .note,
> .h-entry {
padding: 0 1rem;
}
}
.h-entry:first-child {
> .bookmark-link {
padding-top: 2rem;
}
}
}
}
.note {

View file

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