CSS stilius

Kaip „Amazon“ partneris uždirbu iš atitinkamų pirkinių.





Palyginus su originaliu „Volume“, kuriam reikėjo daugiau nei 350 CSS eilučių, „Volume remastered“ naudoja mažiau nei 50. Bet kodėl mums reikia CSS, kai visa tai atlieka „Blocks“? Girdžiu, kad klausiate. Na, yra dalykų, kuriuos aš tiesiog mėgstu koreguoti ir kartais reikia šiek tiek CSS.

Svetainėje pridėtą CSS galite rasti tinkinimo priemonėje > Papildomas CSS. Pažvelkime atidžiau, ką kiekvienas iš jų daro

Įrašo navigacija

numatytasis Post Navigation Block Elemento elgesys yra rodyti 50/50 eilutę, rodančią ankstesnį ir kitą įrašą. Šis CSS pašalina tuščią vietą, kai vartotojas yra pirmame arba paskutiniame įraše, todėl blokas apima visą plotį.



/* Custom Post Navigation remove empty classes */
.featured-navigation .gb-grid-column:empty {
    flex: 0 1;
}
@media(min-width: 769px) {
    .featured-navigation .gb-grid-column:not(:empty) {
        flex: 1 0;
    }
}

Single Post Teminiai vaizdai

Šis CSS koreguoja planšetinio kompiuterio siūlomo vaizdo fono dydį ir pašalina jį iš mobiliojo telefono

/* Single Post Hero image responsive controls */
@media(max-width: 1024px) and (min-width: 769px) {
    .page-hero-block:before {
        background-size: cover;
    }
    .featured-column,
    .featured-column img.wp-post-image {
        width: 100% !important;
    }
}
@media(max-width: 768px) {
    .page-hero-block:before {
        background: none;
    }
}

Įrašų archyvai sulygiuoja meta su įrašo apačia

Paprastas lankstus langelis CSS, skirtas nustumti paskutinį post-suvestinės elementą (post meta), kad įrašo apačioje būtų lygiuojamas vertikaliai.

/* Post Archives - force post meta to vertically align bottom */
.generate-columns-container .post>.gb-container,
.generate-columns-container .post>.gb-container>.gb-inside-container,
.post-summary>.gb-inside-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.post-summary {
    flex: 1;
}
.post-summary>.gb-inside-container>*:last-child {
    margin-top: auto;
}

Įrašų archyvo vaizdų kraštinės spindulys

/* Add border radius to post archive images */
.generate-columns-container .dynamic-featured-image {
    border-radius: 4px;
}

Amazon ir Amazon logotipas yra Amazon.com, Inc arba jos filialų prekių ženklai.