Home Pricing About

.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;
}

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

Le github de Nord

Encoder une page dans l'url en base64, à la manière de zerobin.

L'article qui va avec...

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/&quot">https://couleur-science.eu/&quot</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.

Pour styliser les tiddlers d'un tiddlywiki.