Marien Fressinaud
5 years ago
3 changed files with 223 additions and 19 deletions
+ 24
- 7
Herisson/gallery.html.j2
View File
| @@ -6,13 +6,30 @@ | |||
| <link rel="stylesheet" href="style/main.css"> | |||
| <title>{{ gallery.name }} · {{ site_title }}</title> | |||
| </head> | |||
| <body> | |||
| <h1><a href="index.html">{{ site_title }}</a></h1> | |||
| <h2>{{ gallery.name }}</h2> | |||
| <body class="app-page app-page-gallery"> | |||
| <header class="app-page-header"> | |||
| <div class="container"> | |||
| <h1 class="app-page-header-title"> | |||
| <a href="index.html">{{ site_title }}</a> | |||
| </h1> | |||
| </div> | |||
| </header> | |||
| {% for photo in gallery.photos %} | |||
| <img src="{{ photo.url }}" alt="" /> | |||
| <p>{{ photo.name }}</p> | |||
| {% endfor %} | |||
| <main class="app-page-content"> | |||
| <div class="container"> | |||
| <h2>{{ gallery.name }}</h2> | |||
| <a class="link-back" href="index.html">Retour aux albums</a> | |||
| <div class="gallery-photos"> | |||
| {% for photo in gallery.photos %} | |||
| <div class="photo"> | |||
| <a href="{{ photo.url }}" target="_blank" rel="noreferrer"> | |||
| <img src="{{ photo.url }}" alt="" /> | |||
| </a> | |||
| </div> | |||
| {% endfor %} | |||
| </div> | |||
| </div> | |||
| </main> | |||
| </body> | |||
| </html> | |||
+ 24
- 9
Herisson/index.html.j2
View File
| @@ -6,16 +6,31 @@ | |||
| <link rel="stylesheet" href="style/main.css"> | |||
| <title>{{ site_title }}</title> | |||
| </head> | |||
| <body> | |||
| <h1><a href="">{{ site_title }}</a></h1> | |||
| <body class="app-page app-page-index"> | |||
| <header class="app-page-header"> | |||
| <div class="container"> | |||
| <h1 class="app-page-header-title"> | |||
| <a href="index.html">{{ site_title }}</a> | |||
| </h1> | |||
| </div> | |||
| </header> | |||
| {% for gallery in galleries -%} | |||
| <div class="gallery"> | |||
| <a href="{{ gallery.url }}.html"> | |||
| <img src="{{ gallery.cover_photo.url }}" alt="" /> | |||
| {{ gallery.name }} | |||
| </a> | |||
| <main class="app-page-content"> | |||
| <div class="container"> | |||
| <h2>Albums</h2> | |||
| <div class="galleries"> | |||
| {% for gallery in galleries -%} | |||
| <div class="gallery-cover"> | |||
| <a href="{{ gallery.url }}.html"> | |||
| <img src="{{ gallery.cover_photo.url }}" alt="" /> | |||
| <span class="gallery-cover-name"> | |||
| {{ gallery.name }} | |||
| </span> | |||
| </a> | |||
| </div> | |||
| {% endfor %} | |||
| </div> | |||
| </div> | |||
| {% endfor %} | |||
| </main> | |||
| </body> | |||
| </html> | |||
+ 175
- 3
Herisson/style/main.css
View File
| @@ -1,9 +1,181 @@ | |||
| * { | |||
| box-sizing: border-box; | |||
| } | |||
| html, | |||
| body { | |||
| color: #fff; | |||
| margin: 0; | |||
| padding: 0; | |||
| } | |||
| background-color: #222; | |||
| html { | |||
| color: #313131; | |||
| font-family: "Open Sans"; | |||
| font-size: 22px; | |||
| line-height: 1.5rem; | |||
| } | |||
| @media(max-width: 70rem) { | |||
| html { | |||
| font-size: 18px; | |||
| } | |||
| } | |||
| body { | |||
| background-color: #f5f5f5; | |||
| } | |||
| a { | |||
| color: #fff; | |||
| color: #404c9e; | |||
| transition: color .2s ease-in-out; | |||
| } | |||
| a:hover { | |||
| color: #7586f0; | |||
| text-decoration: none; | |||
| } | |||
| h1, h2, h3 { | |||
| margin-top: 0; | |||
| margin-bottom: 0.5rem; | |||
| word-wrap: break-word; | |||
| } | |||
| h1 { | |||
| margin-bottom: 1.75rem; | |||
| } | |||
| h1 { font-size: 2rem; line-height: 2.5rem; } | |||
| h2 { font-size: 1.5rem; line-height: 2rem; } | |||
| h3 { font-size: 1rem; line-height: 1.5rem; } | |||
| * + h1, | |||
| * + h2, | |||
| * + h3 { | |||
| margin-top: 1.5rem; | |||
| } | |||
| p { | |||
| margin-top: 0; | |||
| margin-bottom: 1rem; | |||
| } | |||
| p:last-child { | |||
| margin-bottom: 0; | |||
| } | |||
| ul, ol, dl { | |||
| margin-top: 0; | |||
| margin-bottom: 1rem; | |||
| } | |||
| ul:last-child, | |||
| ol:last-child, | |||
| dl:last-child { | |||
| margin-bottom: 0; | |||
| } | |||
| p + ul, | |||
| p + ol, | |||
| p + dl { | |||
| margin-top: -.5rem; | |||
| } | |||
| small { | |||
| font-size: .8em; | |||
| line-height: 1em; | |||
| } | |||
| strong { | |||
| font-weight: bold; | |||
| } | |||
| img { | |||
| max-width: 100%; | |||
| height: auto; | |||
| } | |||
| .app-page-header { | |||
| padding-top: .5rem; | |||
| padding-bottom: .5rem; | |||
| margin-bottom: 2rem; | |||
| box-shadow: 0 0 1px #313131; | |||
| } | |||
| .app-page-header a { | |||
| color: #313131; | |||
| text-decoration: none; | |||
| } | |||
| .app-page-header .app-page-header-title { | |||
| margin-bottom: 0; | |||
| font-size: 1.5rem; | |||
| line-height: 2rem; | |||
| } | |||
| .app-page { | |||
| padding-bottom: 10rem; | |||
| } | |||
| @media(max-width: 70rem) { | |||
| .app-page { | |||
| padding-bottom: 5rem; | |||
| } | |||
| } | |||
| .container { | |||
| max-width: 70rem; | |||
| margin-left: auto; | |||
| margin-right: auto; | |||
| padding-left: .5rem; | |||
| padding-right: .5rem; | |||
| } | |||
| .galleries { | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| justify-content: space-evenly; | |||
| } | |||
| .gallery-cover { | |||
| width: 20rem; | |||
| max-width: 100%; | |||
| margin-bottom: 2rem; | |||
| margin-right: .5rem; | |||
| } | |||
| .gallery-cover a { | |||
| text-decoration: none; | |||
| } | |||
| .gallery-cover img { | |||
| width: 100%; | |||
| height: 12rem; | |||
| border-radius: 0.25rem; | |||
| } | |||
| .gallery-cover .gallery-cover-name { | |||
| display: block; | |||
| font-size: 1rem; | |||
| font-weight: bold; | |||
| overflow: hidden; | |||
| text-overflow: ellipsis; | |||
| } | |||
| .gallery-photos { | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| justify-content: space-evenly; | |||
| margin-top: 2rem; | |||
| } | |||
| .photo { | |||
| width: 20rem; | |||
| max-width: 100%; | |||
| margin-right: .5rem; | |||
| margin-bottom: 2rem; | |||
| } | |||
| .photo img { | |||
| width: 100%; | |||
| height: 12rem; | |||
| } | |||
Loading…