<div>
<section role="complementary">
<details open>
<summary class="time-row">
<span class="time-row__title">Chisai is a static site generator written in python</span>
<span class="time-row__second"> Time spent
<span aria-hidden="true">→</span>
10 hours
</span>
</summary>
<dl class="time-row-more">
<dt>
Total time
<span aria-hidden="true">→</span>
</dt>
<dd>55 hours</dd>
<dt>
Started
<span aria-hidden="true">→</span>
</dt>
<dd>Week 3 of 2021</dd>
<dt>
Last update
<span aria-hidden="true">→</span>
</dt>
<dd>Week 25 of 2021</dd>
</dl>
<table>
<caption>All times entries for this page</caption>
<thead>
<tr>
<th>Year</th>
<th>Week</th>
<th>Hours</th>
</tr>
</thead>
<tbody>
<tr>
<td>2021</td>
<td>3</td>
<td>10</td>
</tr>
<tr>
<td>2021</td>
<td>4</td>
<td>6</td>
</tr>
<tr>
<td>2021</td>
<td>4</td>
<td>3</td>
</tr>
<tr>
<td>2021</td>
<td>7</td>
<td>2</td>
</tr>
<tr>
<td>2021</td>
<td>8</td>
<td>4</td>
</tr>
<tr>
<td>2021</td>
<td>9</td>
<td>5</td>
</tr>
<tr>
<td>2021</td>
<td>20</td>
<td>5</td>
</tr>
<tr>
<td>2021</td>
<td>21</td>
<td>15</td>
</tr>
</tbody>
</table>
</details>
</section>
</div>
<style>
div {
padding: 10px 0;
}
</style>
<div>
<section role="complementary">
<details open>
<summary class="time-row">
<span class="time-row__title">Chisai is a static site generator written in python</span>
<span class="time-row__second"> Time spent
<span aria-hidden="true">→</span>
10 hours
</span>
</summary>
<dl class="time-row-more">
<dt>
Total time
<span aria-hidden="true">→</span>
</dt>
<dd>55 hours</dd>
<dt>
Started
<span aria-hidden="true">→</span>
</dt>
<dd>Week 3 of 2021</dd>
<dt>
Last update
<span aria-hidden="true">→</span>
</dt>
<dd>Week 25 of 2021</dd>
</dl>
<table>
<caption>All times entries for this page</caption>
<thead>
<tr>
<th>Year</th>
<th>Week</th>
<th>Hours</th>
</tr>
</thead>
<tbody>
<tr>
<td>2021</td>
<td>3</td>
<td>10</td>
</tr>
<tr>
<td>2021</td>
<td>4</td>
<td>6</td>
</tr>
<tr>
<td>2021</td>
<td>4</td>
<td>3</td>
</tr>
<tr>
<td>2021</td>
<td>7</td>
<td>2</td>
</tr>
<tr>
<td>2021</td>
<td>8</td>
<td>4</td>
</tr>
<tr>
<td>2021</td>
<td>9</td>
<td>5</td>
</tr>
<tr>
<td>2021</td>
<td>20</td>
<td>5</td>
</tr>
<tr>
<td>2021</td>
<td>21</td>
<td>15</td>
</tr>
</tbody>
</table>
</details>
</section>
</div>
<style>
div {
padding: 10px 0;
}
</style>
/* No context defined. */
section[role="complementary"] {
background-color: white;
background-color: var(--accent);
width: 100%;
padding: 0.5em var(--margin-l);
min-width: 100%;
position: sticky;
bottom: 0;
z-index: 2;
}
section[role="complementary"] details {
min-width: 100%;
display:flex;
flex-flow: row wrap;
justify-content: space-between;
gap: var(--margin-l);
cursor: pointer;
justify-items:end;
}
section[role="complementary"] summary::-webkit-details-marker {
display:none;
}
.time-row {
min-width: 100%;
display:grid;
grid-template-columns: 1fr auto;
gap:0.6em;
}
section[role="complementary"] details > *+* {
margin-top: 20px;
margin-top: var(--margin-l);
}
.time-row__title {
font-family: "Editorial New Regular", serif;
}
details[open] .time-row__second {
display: none;
}
dl.time-row-more {
min-width: 100%;
display:grid;
grid-template-columns: auto 1fr;
text-align: left;
justify-items: start;
gap:0.6em;
background-color: var(--accent);
border-left: 5px solid var(--text);
}
.time-row-more dt,
.time-row-more dd {
margin:0;
padding:0;
}
.time-row-more dt {
display: flex;
width:100%;
justify-content: space-between;
}
.time-row-more dt span {
margin-left: var(--margin-s);
}
@media screen and (max-width:640px) {
section[role="complementary"] {
position: static;
}
.time-row {
grid-template-columns: 1fr;
}
.time-row {
justify-items:start;
}
}
[theme="dark"] section[role="complementary"] {
color:var(--background);
}
No notes defined.