diff --git a/static/css/perso.css b/static/css/perso.css index a2419ed..42b9c85 100644 --- a/static/css/perso.css +++ b/static/css/perso.css @@ -1,4 +1,6 @@ -/* Sous-menu */ +/***********************************************/ +/* Sous-menu */ +/***********************************************/ #header nav ul.left { position: absolute; @@ -20,9 +22,10 @@ #header nav ul li { display: block; position: relative; - width: intrinsic; + width: max-content; width: -moz-max-content; width: -webkit-max-content; + width: -ms-max-content; } #header nav ul li ul { @@ -77,8 +80,9 @@ - -/* Couleur non transparentes */ +/***********************************************/ +/* Couleur non transparentes */ +/***********************************************/ #header nav ul { background-color: rgba(27, 31, 34, 0.85); @@ -90,8 +94,9 @@ - -/* Soutien */ +/***********************************************/ +/* Soutien */ +/***********************************************/ #header .soutien { background-color: rgba(27, 31, 34, 0.85); @@ -164,7 +169,111 @@ } -/* Ajustement vertical */ + + +/***********************************************/ +/* Ajustement vertical */ +/***********************************************/ + body:not(.is-article-visible) #wrapper { padding: 0; } + + + + +/***********************************************/ +/* Events */ +/***********************************************/ + +.event { + margin: 2rem; + position: relative; + border: 1px solid #ffffff; + border-radius: 4px; + display: block; +} + + .event:hover { + background-color: rgba(255, 255, 255, 0.075); + border-bottom-color: #ffffff; + } + + .event::before { + content: ''; + display: block; + position: absolute; + top: calc(-2rem - 1px); + left: calc(50% - 1px); + width: 1px; + height: calc(2rem + 1px); + background: #ffffff; + } + + .event .date, .event .title { + position: absolute; + top: 0.5rem; + font-size: 1.1rem; + color: #ffffff; + font-weight: 600; + letter-spacing: 0.1rem; + } + + .event .date { + right: 1rem; + } + + .event .title { + left: 1rem; + } + + .event .description { + max-height: 20rem; + overflow: hidden; + border-top: 1px solid #ffffff; + margin-top: 3rem; + padding: 15px; + } + +#main article .major .date { + position: absolute; + right: 2rem; + top: 4.5rem; +} + +#main article .previous { + display: block; + position: absolute; + top: 0; + left: 0; + width: 4rem; + height: 4rem; + cursor: pointer; + text-indent: 4rem; + overflow: hidden; + white-space: nowrap; + border: 0; +} + + #main article .previous::before { + -moz-transition: background-color 0.2s ease-in-out; + -webkit-transition: background-color 0.2s ease-in-out; + -ms-transition: background-color 0.2s ease-in-out; + transition: background-color 0.2s ease-in-out; + content: ''; + display: block; + position: absolute; + top: 0.75rem; + left: 0.75rem; + width: 2.5rem; + height: 2.5rem; + border-radius: 100%; + background-position: center; + background-image: url("../images/baseline_arrow_back_white_24dp.png"); + background-size: 20px 20px; + background-repeat: no-repeat; + } + + #main article .previous:hover::before { + background-color: rgba(255, 255, 255, 0.075); + } \ No newline at end of file diff --git a/static/images/baseline_arrow_back_white_24dp.png b/static/images/baseline_arrow_back_white_24dp.png new file mode 100644 index 0000000..04b0391 Binary files /dev/null and b/static/images/baseline_arrow_back_white_24dp.png differ diff --git a/templates/events.html b/templates/events.html index 7efff5a..c838489 100644 --- a/templates/events.html +++ b/templates/events.html @@ -17,6 +17,11 @@ {% if mds %} {% for md in mds %}
+ +

+ {{ md[1] }} +
{{ md[0].strftime('%a %d %b %Y') }}
+

{{ md[3] | safe }}
{% endfor %}