Add CSS classes
This commit is contained in:
parent
3cbde0db03
commit
97eb397a8e
2 changed files with 27 additions and 6 deletions
|
@ -38,6 +38,11 @@ details h2 {
|
|||
* Layout
|
||||
*/
|
||||
|
||||
.page-header {
|
||||
background-color: #a4ecfc;
|
||||
border-bottom: 5px solid black;
|
||||
}
|
||||
|
||||
.other-links {
|
||||
display: block;
|
||||
margin: auto;
|
||||
|
@ -86,16 +91,29 @@ details h2 {
|
|||
grid-column-end: 3;
|
||||
}
|
||||
|
||||
details {
|
||||
.checkin {
|
||||
border-top: 1px solid black;
|
||||
padding: 1em 0;
|
||||
}
|
||||
|
||||
details[open] summary {
|
||||
.checkin__summary {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.checkin[open] .checkin__summary {
|
||||
margin-bottom: 1em;
|
||||
border-bottom: 1px solid gray;
|
||||
}
|
||||
|
||||
.checkin__meta {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.checkin[open] .checkin__meta {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
#checkinList li:first-child details {
|
||||
#checkinList li:first-child .checkin {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
|
|
|
@ -17,7 +17,7 @@
|
|||
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<header class="page-header">
|
||||
<h1 class="page-title">Where in the World is Ben?</h1>
|
||||
<nav class="other-links">
|
||||
<ul>
|
||||
|
@ -44,8 +44,11 @@
|
|||
<ol start="{{ count($trip->checkins) }}" reversed>
|
||||
@foreach(array_slice(array_reverse($trip->checkins), 0, 15) as $checkin)
|
||||
<li>
|
||||
<details id="{{ $checkin->id }}" ontoggle="toggleCheckin(this.open, this.id)">
|
||||
<summary><h2>{{ $checkin->title ?? "[No title]" }}</h2> <span>{{ date('j M Y (G:H)', strtotime($checkin->date)) }}</span></summary>
|
||||
<details class="checkin" id="{{ $checkin->id }}" ontoggle="toggleCheckin(this.open, this.id)">
|
||||
<summary class="checkin__summary">
|
||||
<h2 class="checkin__title">{{ $checkin->title ?? "[No title]" }}</h2>
|
||||
<p class="checkin__meta">{{ date('j M Y (G:H)', strtotime($checkin->date)) }}</p>
|
||||
</summary>
|
||||
{{ $checkin->note ?? "[No note]" }}
|
||||
@if($checkin->image_url)
|
||||
<img class="popup__image" loading="lazy" src="{{ $checkin->image_url }}">
|
||||
|
|
Loading…
Reference in a new issue