J'ai besoin d'intimité. Non pas parce que mes actions sont douteuses, mais parce que votre jugement et vos intentions le sont.
5107 links
.hover-menu {
position: relative;
overflow: hidden;
margin: 8px;
min-width: 340px;
max-width: 480px;
max-height: 290px;
width: 100%;
background: #000;
text-align: center;
box-sizing: border-box;
}
.hover-menu * {
box-sizing: border-box;
}
.hover-menu img {
position: relative;
max-width: 100%;
top: 0;
right: 0;
opacity: 1;
transition: 0.3s ease-in-out;
}
.hover-menu div {
position: absolute;
top: 0;
left: -120px;
width: 120px;
height: 100%;
padding: 8px 4px;
background: #000;
transition: 0.3s ease-in-out;
display: flex;
flex-direction: column;
justify-content: center;
}
.hover-menu div a {
display: block;
line-height: 2;
color: #fff;
text-decoration: none;
opacity: 0.8;
padding: 5px 15px;
position: relative;
transition: 0.3s ease-in-out;
}
.hover-menu div a:hover {
text-decoration: underline;
}
.hover-menu:hover img {
opacity: 0.5;
right: -120px;
}
.hover-menu:hover div {
left: 0;
opacity: 1;
}
C'est trop bien les ifounes ! Rien que 8 media queries différents pour juste les cibler. Et si on ajoute l'orientation, on double la mise...
Je pense que le nombre de chauves dans la population des designers doit être élevé tellement ils doivent s'arracher les cheveux...
/*For iPhone 12, iPhone 12 Pro, iPhone 13, iPhone 13 Pro, and iPhone 14:*/
/* 1170×2532 pixels at 460ppi */
@media only screen
and (width: 390px)
and (height: 844px)
and (-webkit-device-pixel-ratio: 3) {
}
/*For iPhone 12 Pro Max, iPhone 13 Pro Max, and iPhone 14 Plus:*/
/* 1284×2778 pixels at 458ppi */
@media only screen
and (width: 428px)
and (height: 926px)
and (-webkit-device-pixel-ratio: 3) {
}
/*Unique to iPhone 14 Pro:*/
/* 1179×2556 pixels at 460ppi */
@media only screen
and (width: 393px)
and (height: 852px)
and (-webkit-device-pixel-ratio: 3) { }
/*Unique to iPhone 14 Pro Max:*/
/* 1284×2778 pixels at 460ppi */
@media only screen
and (width: 430px)
and (height: 932px)
and (-webkit-device-pixel-ratio: 3) {
}
/*For iPhone X, iPhone Xs, iPhone 11 Pro, iPhone 12 Mini, and iPhone 13 Mini:*/
/* 1080×2340 pixels at 476ppi */
@media only screen
and (width: 375px)
and (height: 812px)
and (-webkit-device-pixel-ratio: 3) { }
/*For iPhone XR, and iPhone 11:*/
/* 828×1792 pixels at 326ppi */
@media only screen
and (width: 414px)
and (height: 896px)
and (-webkit-device-pixel-ratio: 2) { }
/*For iPhone Xs Max, and iPhone 11 Pro Max:*/
/* 1242×2688 pixels at 458ppi */
@media only screen
and (width: 414px)
and (height: 896px)
and (-webkit-device-pixel-ratio: 3) { }
/*For iPhone 7 (2016), iPhone 8 (2017), and iPhone SE (1st to 3rd gen):*/
/* 750×1334 pixels at 326ppi */
@media only screen
and (width: 375px)
and (height: 667px)
and (-webkit-device-pixel-ratio: 2) { }
Device orientation
Use the following code to add landscape or portrait orientation:
For portrait:and (orientation: portrait)
For landscape:
and (orientation: landscape)
<table class=”events-table” >
<caption>Évènements</caption>
<thead>
<tr>
<th class=”event-date”>Date</th>
<th class=”event-time”>Horaire</th>
<th class=”event-description”>Evènement</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label=”Date”> Le #_EVENTDATES</td>
<td data-label=”Horaire”>#_EVENTTIMES</td>
<td data-label=”Evènement”>#_EVENTLINK</td>
</tr>
</tbody>
</table>
Je pense à ajouter un “data-label” à chacun de mes “td”.
Et voici le CSS :
table caption {
display: none;
}
@media all and (max-width:500px){
table{
width:100%;
}
table caption {
display: block;
background-color: #484d55;
color:white;
}
.table thead {
display: none;
}
.table tr{
display: block;
margin-bottom: 40px;
}
.table td {
display: block;
text-align: right;
}
.table td:before {
content: attr(data-label);
float: left;
font-weight: bold;
}
}
Palettes de couleurs pastelles.
Encoder une page dans l'url en base64, à la manière de zerobin.
Framework css minimaliste. J'aime bien.
L'article qui va avec...
Excellent ! Choisir son favicon parmi une liste d'émoji. Et faire de son favicon un emoji svg.
Sur une idée de la géniale Léa Verrou.
html {
font-size: 1.2em;
}
body, .post {
font-family:"DejaVu Serif", "Times New Roman", Times, serif;
background:none!important;
}
* {
color: black!important;
background: white!important;
text-shadow: none!important;
box-shadow: none!important;
}
div, h1, h2, h3, h4, h5, h6 {
border: none !important;
}
#header, #sidenav, #subnav, body > footer, #commentaires, #links-prev-next, .entry-illustration {
display: none !important;
}
article.blogentry > .entry-footer,
article.blogentry > header > .entry-meta {
display: none !important;
}
h2 a, h3 a {
text-decoration: none;
}
article.blogentry > .entry-content a {
text-decoration: none;
}
article.blogentry > .entry-content a:after {
content:" (" attr(href) ")";
font-style: italic;
color: #0000ff;
text-decoration: none;
}
article.blogentry > .entry-content a:not([href^="http"]):after {
content:" (<a href="https://couleur-science.eu/"">https://couleur-science.eu/"</a>; attr(href) ")";
}
pre, blockquote {
border: 1px solid gray;
}
img, pre, blockquote, figure, video {
break-inside: avoid;
}
h2, h3, h4 {
break-after:avoid;
}
Des onglets en css pur.
D'autres solutions ici : https://github.com/you-dont-need/You-Dont-Need-JavaScript
Via SebSauvage
Pour styliser les tiddlers d'un tiddlywiki.
Je pense que c'est text-overflow qui n'est pas défini et qu'il faut utiliser simplement overflow...