media-larlet-fr/theme/style/main.css

/* Section polices */

/* Fonts definition, a different font is in use between light and dark mode
in order to improve the readability of the text. */
@font-face {
  font-family: 'triplicate_t4p';
  src: url('fonts/triplicate_t4_poly_regular.woff2') format('woff2'),
       url('fonts/triplicate_t4_poly_regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'triplicate_t4p';
  src: url('fonts/triplicate_t4_poly_bold.woff2') format('woff2'),
       url('fonts/triplicate_t4_poly_bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'triplicate_t4p';
  src: url('fonts/triplicate_t4_poly_italic.woff2') format('woff2'),
       url('fonts/triplicate_t4_poly_italic.woff') format('woff');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'triplicate_t3';
  src: url('fonts/triplicate_t3_regular.woff2') format('woff2'),
       url('fonts/triplicate_t3_regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'triplicate_t3';
  src: url('fonts/triplicate_t3_bold.woff2') format('woff2'),
       url('fonts/triplicate_t3_bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'triplicate_t3';
  src: url('fonts/triplicate_t3_italic.woff2') format('woff2'),
       url('fonts/triplicate_t3_italic.woff') format('woff');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

* {
    box-sizing: border-box;
}

:root:not(.forced-dark),
.forced-light {
  /* This tells the browser which color themes my app supports
  See https://web.dev/prefers-color-scheme/#stylesheet-architecture */
  color-scheme: light dark;

  /* For a smooth transition between light/dark modes
  See https://web.dev/prefers-color-scheme/#smooth-transitions-between-modes */
  --duration: 0.5s;
  --timing: ease;

  --font-family: 'triplicate_t4p', Courier, Menlo, Monaco, 'DejaVu Sans Mono', Consolas, monospace;
  --background-color: #f7f7f7;
  --text-color: #07486c;
  --remarkdown-color: SteelBlue;
  --link-color: RoyalBlue;
  --link-visited-color: RebeccaPurple;
  --link-hover-color: var(--background-color);
  --link-hover-background-color: var(--link-color);
  --image-filter: none;
  --target-after-color: #07486c;
  --mark-background: LightGoldenRodYellow;
}
@media (prefers-color-scheme: dark) {
  :root:not(.forced-light),
  .forced-dark {
    --font-family: 'triplicate_t3', 'Courier New', Menlo, Monaco, 'DejaVu Sans Mono', Consolas, monospace;
    --background-color: #272727;
    --text-color: Linen;
    --remarkdown-color: Orange;
    --link-color: #ffff2b;
    --link-visited-color: Khaki;
    --link-hover-color: var(--background-color);
    --link-hover-background-color: var(--link-visited-color);
    --image-filter: grayscale(.5) brightness(.8) contrast(1.2);
    --target-after-color: DarkOrange;
    --mark-background: Orange;
  }
}

html {
  /* Applying it to the html element will provide smooth scrolling to anchors
  https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior */
  scroll-behavior: smooth;
  /* Only supported by Firefox, how fun? */
  scrollbar-color: var(--background-color) var(--target-after-color);
}

/* General stuff. */
body {
  margin: 0 auto;
  padding: 0 .5rem;
  font-family: var(--font-family);
  background-color: var(--background-color);
  color: var(--text-color);
  transition:
    color var(--duration) var(--timing),
    background-color var(--duration) var(--timing);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

a {
    color: var(--text-color);
}

h1 {
    margin-top: 0;
    text-align: center;
    word-wrap: break-word;
    margin-bottom: 1.75rem;
    font-size: 2rem;
    line-height: 2.5rem;
}

img {
    max-width: 100%;
    max-height: 100%;
    max-inline-size: 100%;
    block-size: auto;
}
figcaption {
    text-align: center;
}

hr {
  height: 1.5em;
  line-height: 1.5em;
  margin: 1.5em 0 1.5em;
  border: none;
  color: inherit;
  text-align: center;
}

 hr::before {
  content: "* * * *";
}

.container {
    max-width: 70rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: .5rem;
    padding-right: .5rem;
}

.galleries {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin-top: 1rem;
}

.gallery-cover {
    width: 330px;
    max-width: 100%;
    margin-bottom: 2rem;
    margin-right: .5rem;
}

.gallery-cover img {
    border-radius: 0.25rem;
}

.photo {
    width: 20rem;
    max-width: 100%;
    margin-right: .5rem;
    margin-bottom: 2rem;
}

.hero img {
    max-height: 100vh;
    width: auto;
}
.u-center {
    text-align: center;
}



/* See https://www.benmarshall.me/responsive-iframes/ */
.iframe-container {
  overflow: hidden;
  /* 16:9 aspect ratio */
  padding-top: 56.25%;
  position: relative;
}

.iframe-container iframe {
   border: 0;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}
@media only screen and (max-width: 600px) {
    nav a {
        display: block;
    }
}

/* See https://sylvaindurand.org/masonry-photo-grid-in-pure-css/ */
@media only screen and (min-width: 600px) {
    .gallery {
        display: flex;
        width: 100%;
        flex-flow: row wrap;
        margin-left: -4px;
    }

    .gallery div {
        overflow: hidden;
        margin: 0 0 8px 8px;
        flex: auto;
        height: 250px;
        min-width: 150px;
    }

    .gallery div:nth-child(8n+1) {
        width: 310px;
    }

    .gallery div:nth-child(8n+2) {
        width: 270px;
    }

    .gallery div:nth-child(8n+3) {
        width: 260px;
    }

    .gallery div:nth-child(8n+4) {
        width: 310px;
    }

    .gallery div:nth-child(8n+5) {
        width: 240px;
    }

    .gallery div:nth-child(8n+6) {
        width: 190px;
    }

    .gallery div:nth-child(8n+7) {
        width: 210px;
    }

    .gallery div:nth-child(8n+8) {
        width: 170px;
    }

    .gallery div.wide {
        width: 650px;
    }

    .gallery div.tall {
        width: 650px;
        height: 450px;
    }

    .gallery div.narrow {
        width: 120px;
    }

    .gallery img {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }
}