Merge branch 'main' of https://git.achilletoupin.com/gribse/blog
merge mobile
This commit is contained in:
commit
92afd1215e
5 changed files with 142 additions and 24 deletions
|
|
@ -57,19 +57,48 @@
|
|||
.title-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 10px;
|
||||
justify-content: space-between;
|
||||
gap: 30px;
|
||||
justify-content: flex-start; /* Change from space-between to flex-start */
|
||||
align-items: center; /* Ensure vertical alignment */
|
||||
}
|
||||
.site-title {
|
||||
flex-grow: 1;
|
||||
margin: 0; /* Remove default margin */
|
||||
font-size: 3rem; /* Adjust font size as needed */
|
||||
flex-grow: 0; /* Prevent automatic growth */
|
||||
flex-shrink: 1; /* Allow shrinking if needed */
|
||||
margin: 0;
|
||||
font-size: 2.5rem; /* Reduce from 3rem to 2.5rem */
|
||||
max-width: 75%; /* Limit the width to prevent overflow */
|
||||
word-break: normal; /* Ensure proper word breaking */
|
||||
}
|
||||
.site-logo {
|
||||
flex-grow: 0; /* Change from 1 to 0 */
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
line-height: 0;
|
||||
width: 75px;
|
||||
height: auto;
|
||||
}
|
||||
.site-logo img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
.light-logo {
|
||||
display: block;
|
||||
}
|
||||
.dark-logo {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.dark .light-logo {
|
||||
display: none;
|
||||
}
|
||||
.logo {
|
||||
width: 50px; /* Adjust logo size */
|
||||
height: auto; /* Maintain aspect ratio */
|
||||
body.dark .dark-logo {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.navigation {
|
||||
flex-grow: 3;
|
||||
display: flex;
|
||||
|
|
@ -130,6 +159,30 @@
|
|||
flex: none; /* Reset flex property */
|
||||
width: 100%; /* Make them take full width */
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 10px 0; /* Reduce padding on mobile */
|
||||
}
|
||||
|
||||
.title-wrapper {
|
||||
width: 100%;
|
||||
justify-content: flex-start; /* Change from space-between to flex-start */
|
||||
flex-wrap: wrap; /* Allow wrapping if needed */
|
||||
}
|
||||
|
||||
.site-title {
|
||||
font-size: 2.5rem; /* Reduce title size on mobile */
|
||||
max-width: 65%; /* Further limit width on mobile */
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.site-logo {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
flex-shrink: 1;
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -183,11 +236,18 @@
|
|||
<div class="main-content">
|
||||
<div class="header">
|
||||
<div class="title-wrapper">
|
||||
<h1 class="site-title">Achille Toupin</h1>
|
||||
<h1 class="site-title">Achille<br/>Toupin</h1>
|
||||
<div class="site-logo">
|
||||
<img src="favicon.svg" alt="Logo de macghine à écrire" class="logo"></img>
|
||||
<img src="favicon.svg" alt="Logo de machine à écrire" class="logo light-logo">
|
||||
<img src="favicon-dark.svg" alt="Logo de machine à écrire" class="logo dark-logo">
|
||||
</div>
|
||||
{{- if (not site.Params.disableThemeToggle) }}
|
||||
</div>
|
||||
|
||||
<nav class="navigation">
|
||||
{{ partial "menu.html" }}
|
||||
</nav>
|
||||
|
||||
{{- if (not site.Params.disableThemeToggle) }}
|
||||
<button id="theme-toggle" accesskey="t" title="(Alt + T)" aria-label="Toggle theme">
|
||||
<svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
|
||||
fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"
|
||||
|
|
@ -208,13 +268,7 @@
|
|||
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
|
||||
</svg>
|
||||
</button>
|
||||
{{- end }}
|
||||
</div>
|
||||
|
||||
|
||||
<nav class="navigation">
|
||||
{{ partial "menu.html" }}
|
||||
</nav>
|
||||
{{- end }}
|
||||
</div>
|
||||
|
||||
<div class="center-content">
|
||||
|
|
|
|||
|
|
@ -18,10 +18,23 @@
|
|||
{{- partial "donnees-chargement.html" -}}
|
||||
|
||||
{{- print " · "}}
|
||||
<!-- Lord forgive me for I have sinned -->
|
||||
<style>
|
||||
.rss-icon path {
|
||||
stroke: var(--primary);
|
||||
}
|
||||
|
||||
<a href="/feed.xml">
|
||||
<svg width="16px" height="16px" stroke-width="2" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" color="#000000"><path d="M12 19C12 14.8 9.2 12 5 12" stroke="#000000" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M19 19C19 10.6 13.4 5 5 5" stroke="#000000" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M5 19.01L5.01 18.9989" stroke="#000000" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
|
||||
<span>Flux RSS</span>
|
||||
.rss-link {
|
||||
color: var(--primary);
|
||||
}
|
||||
</style>
|
||||
<a href="/feed.xml" class="rss-link">
|
||||
<svg width="16px" height="16px" stroke-width="2" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="rss-icon">
|
||||
<path d="M12 19C12 14.8 9.2 12 5 12" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
<path d="M19 19C19 10.6 13.4 5 5 5" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
<path d="M5 19.01L5.01 18.9989" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
</svg>
|
||||
<span>Flux RSS</span>
|
||||
</a>
|
||||
|
||||
{{- print " · "}}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
## Page d'accueil
|
||||
- [x] Lien flux rss en bas de page
|
||||
- [x] Resize scrolling posts pour écrans fullhd x1.25
|
||||
- [ ] mettre la favicon à coté de mon nom sur la page d'accueil
|
||||
- [x] mettre la favicon à coté de mon nom sur la page d'accueil
|
||||
|
||||
## Galleries / figures
|
||||
- [x] ajouter une optimisation qui traite automatiquement les images dans les galleries en les resizant à la largeur de la page et en les transformant en .webp
|
||||
|
|
@ -38,6 +38,7 @@
|
|||
- [ ] Mettre "une machine au pif" avec du javascript qui en tire une au hazard
|
||||
- [ ] si pas d'image de cover dans un article, la box doit réagir (ajdh elle ne s'affiche pas du tout)
|
||||
|
||||
|
||||
### Scrolling posts
|
||||
- [x] add a blur to backgound images of scrolling posts
|
||||
- [x] Optimiser les images de la page d'accueil
|
||||
|
|
@ -97,4 +98,8 @@
|
|||
- [ ] "merl1-19.fr" redirige vers le meme site, mais avec un thème "trad's" : zagot's, chaines autour du div central, etc
|
||||
- [ ] Les projets ont des tags "en cours", "abandonné", "fini"
|
||||
- [ ] Commencer un article par une lettrine. Ajouter une option dans le frontmatter pour l'activer ou pas. Cf https://continuum.codeberg.page/2025-05-20-augsburg.html Pour le style
|
||||
- [ ] Rendre responsive au thème l'icone RSS
|
||||
- [x] Rendre responsive au thème l'icone RSS
|
||||
|
||||
# Prio 3
|
||||
|
||||
- [ ] rendre la favicon svg du titre responsive par code avec les variables, pas manuellement avec une copie
|
||||
46
static/favicon-dark.svg
Normal file
46
static/favicon-dark.svg
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg fill="#DADADB" height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
viewBox="0 0 512 512" xml:space="preserve">
|
||||
<g>
|
||||
<g>
|
||||
<circle cx="122.435" cy="361.739" r="16.696"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<circle cx="189.217" cy="361.739" r="16.696"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<circle cx="256" cy="361.739" r="16.696"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<circle cx="322.783" cy="361.739" r="16.696"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<circle cx="389.565" cy="361.739" r="16.696"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path d="M503.943,416.496l-30.899-123.594v-64.729c0-27.618-22.469-50.087-50.087-50.087h-16.696v-33.391h50.087
|
||||
c9.22,0,16.696-7.475,16.696-16.696V94.609c0-9.22-7.475-16.696-16.696-16.696s-16.696,7.475-16.696,16.696v16.696h-33.391V50.087
|
||||
C406.261,22.469,383.792,0,356.174,0H155.826c-27.618,0-50.087,22.469-50.087,50.087v61.217H72.348V94.609
|
||||
c0-9.22-7.475-16.696-16.696-16.696c-9.22,0-16.696,7.475-16.696,16.696V128c0,9.22,7.475,16.696,16.696,16.696h50.087v33.391
|
||||
H89.044c-27.618,0-50.087,22.469-50.087,50.087v64.729l-30.9,123.595c-1.674,6.703-2.491,13.596-2.491,20.246v25.169
|
||||
C5.565,489.531,28.034,512,55.652,512h400.696c27.618,0,50.087-22.469,50.087-50.087v-25.169
|
||||
C506.435,430.237,505.655,423.344,503.943,416.496z M139.13,50.087c0-9.206,7.49-16.696,16.696-16.696h200.348
|
||||
c9.206,0,16.696,7.49,16.696,16.696v61.217H139.13V50.087z M139.13,144.696H372.87v66.783H139.13V144.696z M72.348,228.174
|
||||
c0-9.206,7.49-16.696,16.696-16.696h16.696v16.696c0,9.22,7.475,16.696,16.696,16.696h267.13c9.22,0,16.696-7.475,16.696-16.696
|
||||
v-16.696h16.696c9.206,0,16.696,7.49,16.696,16.696v50.087H72.348V228.174z M68.688,311.652h374.624l25.044,100.174H43.644
|
||||
L68.688,311.652z M473.043,461.913c0,9.206-7.49,16.696-16.696,16.696H55.652c-9.206,0-16.696-7.49-16.696-16.696v-16.696h434.087
|
||||
V461.913z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2 KiB |
|
|
@ -1,6 +1,6 @@
|
|||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg fill="#000000" height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
<svg fill="#1E1E1E" height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
viewBox="0 0 512 512" xml:space="preserve">
|
||||
<g>
|
||||
<g>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 2 KiB After Width: | Height: | Size: 2 KiB |
Loading…
Add table
Add a link
Reference in a new issue