davidbgk
/
media-larlet-fr
Watch 1
Star 0
Fork 0
Code Releases 0 Activity
Browse Source

Improve the style

master
Marien Fressinaud 6 years ago
parent
65431d0a9f
commit
abd6a0b13f
3 changed files with 223 additions and 19 deletions
Unified View Show Diff Stats
  1. 24
    7
      Herisson/gallery.html.j2
  2. 24
    9
      Herisson/index.html.j2
  3. 175
    3
      Herisson/style/main.css

+ 24
- 7
Herisson/gallery.html.j2 View File

<link rel="stylesheet" href="style/main.css"> <link rel="stylesheet" href="style/main.css">
<title>{{ gallery.name }} · {{ site_title }}</title> <title>{{ gallery.name }} · {{ site_title }}</title>
</head> </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> </body>
</html> </html>

+ 24
- 9
Herisson/index.html.j2 View File

<link rel="stylesheet" href="style/main.css"> <link rel="stylesheet" href="style/main.css">
<title>{{ site_title }}</title> <title>{{ site_title }}</title>
</head> </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> </div>
{% endfor %}
</main>
</body> </body>
</html> </html>

+ 175
- 3
Herisson/style/main.css View File

* {
box-sizing: border-box;
}

html,
body { 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 { 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;
} }

Write Preview
Loading…
Cancel
Save