Browse Source

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

tcelestin-profideo 1 year ago
No known key found for this signature in database GPG Key ID: F4AD33C1C0DEB170
5 changed files with 72 additions and 1 deletions
  1. +1
  2. +47
  3. BIN
  4. +5
  5. +19

+ 1
- 1
default.hbs View File

@ -46,7 +46,7 @@
<span>Merci d'avoir scrollé jusqu'en bas !</span>
<nav class="site-footer-nav">
<a href=""><img src="" width="30%"></a>
<a href=""><img src="" width="30%"></a>

+ 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);
<div class="outer site-header-background responsive-header-img">
<div class="outer site-header-background no-image">

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"}}

+ 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="" autocomplete="false" />
<button class="button primary" type="submit">
<span class="button-content">Subscribe</span>
<span class="button-loader">{{> "icons/loader"}}</span>
<div class="message-success">
<strong>Great!</strong> Check your inbox and click the link to confirm your subscription.
<div class="message-error">
Please enter a valid email address!