Commit 885e1a55 authored by berumuron's avatar berumuron
Browse files

Design the events structure

parent 0f45f187
......@@ -256,6 +256,68 @@ form button[type="submit"]:focus {
margin-bottom: 10rem;
}
/* Events structure */
.events-by-year {
margin-bottom: 3rem;
}
.events-by-month {
margin-bottom: 1.5rem;
padding-left: 1rem;
}
.events {
margin-top: 0;
margin-bottom: 0;
padding-left: 1rem;
border-left: .25rem solid var(--secondary-color);
list-style: none;
}
.events .event {
position: relative;
padding-top: .5rem;
padding-bottom: .5rem;
}
.events .event .event-date {
display: inline-block;
width: 5rem;
padding-left: .5rem;
padding-right: .5rem;
color: var(--main-color-muted);
text-align: left;
}
.events .event .event-description {
max-width: 35rem;
margin-left: 5.25rem;
padding-top: 1rem;
padding-bottom: 1rem;
}
.events .event.event-private::before {
position: absolute;
left: -1.88rem;
display: inline-block;
width: 1.5rem;
height: 1.5rem;
text-align: center;
line-height: 1.25rem;
background-color: var(--contrast-color);
box-shadow: 0 0 0 3px var(--secondary-color);
border-radius: 1rem;
content: "🔒";
}
/* Folder system */
.folder.folder-folded .folder-container {
display: none;
......@@ -264,6 +326,7 @@ form button[type="submit"]:focus {
.folder .folder-toggle {
padding: 0;
color: inherit;
font: inherit;
background: none;
......
......@@ -33,19 +33,17 @@
<ul class="events folder-container">
{% for event in group_by_month.list|sort(attribute='date', reverse=True) %}
<li class="event {{ 'folder folder-folded' if event.description }}">
{% if event.is_private %}
<span>🔒</span>
{% endif %}
{{ event.date.strftime('%d %b') }}&nbsp;:
<li class="event {{ 'event-private' if event.is_private }} {{ 'folder folder-folded' if event.description }}">
<span class="event-date">
{{ event.date.strftime('%d %b') }}
</span>
{% if event.description %}
<button class="folder-toggle">
{{ event.title }}
</button>
<p class="folder-container">
<p class="event-description folder-container">
{{ event.description|replace('\n', '<br />'|safe) }}
</p>
{% else %}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment