KSS Style Guide

1.1 #permalink HOME GALLERY - sekcja galerii

.section: Element o klasie "section" ma maksymalną szerokość 1200px, jest wyśrodkowany na stronie (margin: 0 auto).

.photoFirst img, .photoSecond img: Wszystkie obrazy w sekcjach "photoFirst" i "photoSecond" mają ustawione szerokości i wysokości na 300px.

label.button: Stylizuje etykiety typu button, nadaje im rozmiar czcionki, pogrubienie, podkreślenie, kolor i efekt przejścia po najechaniu kursorem.

label.button:hover, .promo-text a:hover: Definiuje styl etykiet typu button i linków, zmieniając kolor, rozmiar i kursor po najechaniu kursorem.

.photoFirst: Stylizuje sekcję "photoFirst", ustawiając marginesy, wykorzystując grid do rozmieszczenia elementów i zarządzania odstępami.

.buttonFoto: Stylizuje przycisk "LOAD MORE PHOTO", nadając mu kursor, tło, kolor tekstu, padding, marginesy, zaokrąglenie i efekt przejścia.

#toggleImages: Ukrywa elementy typu checkbox.

#toggleImages:checked ~ #showMoreButton: Po zaznaczeniu checkboxa ukrywa przycisk "LOAD MORE PHOTO".

#toggleImages:checked ~ #showLessButton: Po zaznaczeniu checkboxa wyświetla przycisk "LOAD LESS PHOTO".

#toggleImages:checked ~ .photoSecond: Po zaznaczeniu checkboxa wyświetla sekcję "photoSecond".

.photoSecond: Stylizuje sekcję "photoSecond", ustawiając marginesy, wykorzystując grid do rozmieszczenia elementów i zarządzania odstępami.

#showLessButton: Ukrywa przycisk "LOAD LESS PHOTO" na początku.

Animacje: Są definiowane animacje dla obrazów o id "photos1", "photos2", "photos3" oraz dla obrazków o klasie "photosX". Animacje te określają nazwę animacji, czas trwania, liczbę iteracji, funkcję czasu i tryb wypełnienia animacji.

.logoCat: Stylizuje obrazy o klasie "logoCat", nadając im szerokość, wysokość, pozycję i animację.

.animation: Stylizuje kontenery o klasie "animation", ustawiając pozycję, flexbox i zarządzanie odstępami.

.glasses: Stylizuje obrazy o klasie "glasses", określając pozycję, transformację i efekt przejścia po najechaniu kursorem.

Media queries: To reguły CSS dostosowujące stylizację dla różnych szerokości ekranu. Są zdefiniowane trzy punkty przerwania: dla ekranów o szerokości co najmniej 1000px, między 769px a 999px oraz poniżej 769px. W każdym z tych punktów przerwania dostosowywane są marginesy i układ elementów w sekcjach galerii w zależności od szerokości ekranu.

Example

LOAD MORE PHOTO

LOAD LESS PHOTO

Markup

      <section class="photoFirst">
            <h2 style="display:none;">.</h2>
            <img id="photos1" src="img/mainPage4.webp" alt="Lorem ipsum 1" loading="lazy" width="300" height="300">
            <img id="photos2" src="img/mainPage5.webp" alt="Lorem ipsum 2" loading="lazy" width="300" height="300">
            <img id="photos3" src="img/mainPage6.webp" alt="Lorem ipsum 3" loading="lazy" width="300" height="300">
        </section>
        <input type="checkbox" id="toggleImages">
        <label for="toggleImages" id="showMoreButton" class="buttonFoto">LOAD MORE PHOTO</label>
        <div class="photoSecond">
            <div class="animation">
                <img class="glasses" src="https://kibbles.klausapp.com/assets/img/loader/glasses-regular.svg" alt="oksy1" width="140" height="140">
                <img class="logoCat" src="https://kibbles.klausapp.com/assets/img/loader/main.svg" alt="cot1" width="140" height="140">
            </div>
            <div class="animation">
                <img class="glasses" src="https://kibbles.klausapp.com/assets/img/loader/glasses-deal-with-it.svg" alt="oksy2" width="140" height="140">
                <img class="logoCat" src="https://kibbles.klausapp.com/assets/img/loader/main.svg" alt="cot2" width="140" height="140">
            </div>
            <div class="animation">
                <img class="glasses" src="https://kibbles.klausapp.com/assets/img/loader/glasses-hearts.svg" alt="oksy3" width="140" height="140">
                <img class="logoCat" src="https://kibbles.klausapp.com/assets/img/loader/main.svg" alt="cot3" width="140" height="140">
            </div>
        </div>
        <section class="photoSecond">
            <h2 style="display:none;">.</h2>
            <img class="photosX" src="img/mainPage1.webp" alt="Lorem ipsum 4" loading="lazy" width="300" height="300">
            <img class="photosX" src="img/mainPage2.webp" alt="Lorem ipsum 5" loading="lazy" width="300" height="300">
            <img class="photosX" src="img/mainPage3.webp" alt="Lorem ipsum 6" loading="lazy" width="300" height="300">
        </section>
        <label for="toggleImages" id="showLessButton" class="buttonFoto">LOAD LESS PHOTO</label>

Source: styleIndex.css, line 1193