Browse Source

Update stuff for v3.0 and added eff 2019 member badge

master
tcelestin-profideo 10 months ago
parent
commit
52048a477a
No known key found for this signature in database GPG Key ID: F4AD33C1C0DEB170
5 changed files with 72 additions and 1 deletions
  1. +1
    -1
      default.hbs
  2. +47
    -0
      partials/header-background.hbs
  3. BIN
      partials/icons/2019-membership-badge-2.png
  4. +5
    -0
      partials/site-header.hbs
  5. +19
    -0
      partials/subscribe-form.hbs

+ 1
- 1
default.hbs View File

@@ -46,7 +46,7 @@
<span>Merci d'avoir scrollé jusqu'en bas !</span>
</nav>
<nav class="site-footer-nav">
<a href="https://von.zone/partials/icons/eff-member-badge-2018-2.png"><img src="https://von.zone/partials/icons/eff-member-badge-2018-2.png" width="30%"></a>
<a href="https://von.zone/partials/icons/2019-membership-badge-2.png"><img src="https://von.zone/partials/icons/2019-membership-badge-2.png" width="30%"></a>
</nav>
</div>
</footer>


+ 47
- 0
partials/header-background.hbs View File

@@ -0,0 +1,47 @@
{{!--
Wow what the hell is going on in here even?

Ok so, several templates use this big header with a giant BG image. Nice idea, but big images
have a heavy impact on performance, so it's a good idea to make them responsive. Because we
can only get the image dynamically using Handlebars, and we can only set the image to properly
be a background image using CSS, we end up with a handful of inline styles.

If the template in question has a background image, then we render responsive image styles
for it, and apply those styles to the <header> tag. Else, we just output a <header> tag
with a `no-image` class so we can style it accordingly.
--}}

{{#if background}}

<style type="text/css">
.responsive-header-img {
background-image: url({{img_url background}});
}

@media(max-width: 1000px) {
.responsive-header-img {
background-image: url({{img_url background size='l'}});
background-image: -webkit-image-set(url({{img_url background size='l'}}) 1x,
url({{img_url background size='xl'}}) 2x);
background-image: image-set(url({{img_url background size='l'}}) 1x,
url({{img_url background size='xl'}}) 2x);
}
}

@media(max-width: 600px) {
.responsive-header-img {
background-image: url({{img_url background size='m'}});
background-image: -webkit-image-set(url({{img_url background size='m'}}) 1x,
url({{img_url background size='l'}}) 2x);
background-image: image-set(url({{img_url background size='m'}}) 1x,
url({{img_url background size='l'}}) 2x);
}
}
</style>
<div class="outer site-header-background responsive-header-img">

{{else}}

<div class="outer site-header-background no-image">

{{/if}}

BIN
partials/icons/2019-membership-badge-2.png View File

Before After
Width: 200  |  Height: 200  |  Size: 4.3 KiB

+ 5
- 0
partials/site-header.hbs View File

@@ -0,0 +1,5 @@
<div class="outer site-nav-main">
<div class="inner">
{{> "site-nav"}}
</div>
</div>

+ 19
- 0
partials/subscribe-form.hbs View File

@@ -0,0 +1,19 @@
<section class="subscribe-form">
<h3 class="subscribe-form-title">Subscribe to {{@site.title}}</h3>
<p class="subscribe-form-description">Get the latest posts delivered right to your inbox</p>
<form data-members-form="subscribe">
<div class="form-group">
<input class="subscribe-email" data-members-email placeholder="youremail@example.com" autocomplete="false" />
<button class="button primary" type="submit">
<span class="button-content">Subscribe</span>
<span class="button-loader">{{> "icons/loader"}}</span>
</button>
</div>
<div class="message-success">
<strong>Great!</strong> Check your inbox and click the link to confirm your subscription.
</div>
<div class="message-error">
Please enter a valid email address!
</div>
</form>
</section>

Loading…
Cancel
Save