Thème Mobile ?

Tout ça parce que j'avais décidé de ne pas prendre de carnet-geek pour la patrouille de St-Valentin, mais que ma fée avait besoin que je l'attende (sans avoir besoin de son smartphone). Du coup j'ai découvert que '?m=1' passait sur le "thème mobile" de blogger. Un thème à l'ergonomie acceptable, mais perfectible (en ce qui concerne les tags, notamment).

Par contre, pour ce qui est du look ... euh ... y'aura un peu de travail, là. 

If you want to customize your Mobile template styles, you need to set the Mobile Template to Custom.

By then any additions to your Theme "Edit HTML CSS" section will be rendered.

Using Blogger built in functionality use the .mobile classname to target the styles for mobile views. Example

.mobile .post-title {
  font-size: 21px;
}

Will change the post title size to 21px on mobile device but does not effect the post title web view style.

Et moi, il faut que je m'adapte à un truc comme

<div class="mobile-date-outer date-outer">
  <div class="date-header">
    <span>Monday, February 17, 2020</span>
  </div>
  <div class="mobile-post-outer">
    <a href="http://sylvainhb.blogspot.com/2020/02/theme-mobile.html?m=1">
    <h3 class="mobile-index-title entry-title" itemprop="name">
Thème Mobile ?
    </h3>
    <div class="mobile-index-arrow">›</div>
    <div class="mobile-index-contents">
      <div class="mobile-index-thumbnail">
        <div class="Image">
          <img src="https://1.bp.blogspot.com/-7w5i6XE-rQg/Xkp_FEWuuCI/AAAAAAAAI_E/b4RuPqzNa2U8w-glm-OsOIgAwT3b7XaowCLcBGAsYHQ/s72-c/Screenshot_2020-02-17%2BBlogger%2BBilou%2BHomeBrew%2527s%2BBlog%2B-%2BTheme.png">
        </div>
      </div>
      <div class="post-body">
Tout ça parce que j'avais décidé de ne pas prendre de carnet-geek pour la patrouille de St-Valentin, mais que ma fée avait besoin que je...
      </div>
    </div>
    <div style="clear: both;"></div>
    </a>
    <div class="mobile-index-comment">
    </div>
  </div>
</div>

• la partie "bannière" est bien trop haute. Il faudra changer la valeur height dans #header-wrapper (80px) et ajuster le padding du #header (top: 10px)
• le titre du blog doit arrêter de se faire compresser sauvagement (padding droit de #header).
  
• la petite "flèche" à droite de chaque entrée n'est plus à droite. Il faut lui rendre son thème.
• la ligne d'aide à la navigation doit se faire une place plus normale. (disons avec position: absolute, top: 100px, right:20px)
• il faut remettre une ligne entre les items
• il faut que les thumbs soient flottants (float et padding sur #mobile-index-thumbnail)
• il ajuster les pixels de bordure sur la gauche.
• il faut réparer la largeur de la page (widthde #content-wrapper, #header-wrapper)

Bon, ce qui tient lieu d'éditeur de thème pour blogger est assez peu ergonomique, et la technique du  .mobile ne marche pas pour tout. Donc, pardon mais il est possible que le look du site soit tout cassé pendant quelques jours parce que je ne vais quand-même pas prendre congé pour ça :-P