Farbenbenennung

• Basisfarbe
• Hintergrund
• Button…..

Schriften in rem anlegen

ein Stylesheet für MNbodytextfontsize anlegen (kann aber auch ins MNstylesheet mit rein)

@media (max-width: 991px) {
  body p {
    font-size: 1.6rem;

    }
}

@media (max-width: 479px) {
  body p {
    font-size: 2rem;

    }
}

eigenes Stylesheet anlegen: Oxygen Einstellungen

Fontsize for rem: Manage > Stylesheets > MNstyleSheet

/* Base - Umrechnung FontPX:10 = REM  */
html { 
font-size: 62.5%;
}

>>> Nun ist eine Umrechnung von Schriftgröße in Pixel / 10 = REM möglich.

Fluid Website Calculator

REM & CLAMP anhaken!!!!

Range = Schriftgröße in REM // Hier 10 bis 15 PX

Viewport = Bildschirmbreite von 32 REM also 320 Pixel (für Smartphone) bis 128 REM (also normale Bildbreite) 1280 Pixel

Generiertes CSS ohne ; kopieren.

Allgemeine Schriftgrößen einstellen

Seitenbreite 1280 px

Global Fontsize >>> none 
und dann clamp-Formel eintragen:

clamp(1rem, calc(1rem + ((1vw - 0.32rem) * 0.5208)), 1.5rem)

H1 28-36px

clamp(2.8rem, calc(2.8rem + ((1vw - 0.32rem) * 0.8333)), 3.6rem)

H2  24-30px

clamp(2.4rem, calc(2.4rem + ((1vw - 0.32rem) * 0.625)), 3rem)

H3 20 – 28px

clamp(2rem, calc(2rem + ((1vw - 0.32rem) * 0.8333)), 2.8rem)

H4 18-24px

clamp(1.8rem, calc(1.8rem + ((1vw - 0.32rem) * 0.625)), 2.4rem)

Keine Farben in den Schriften angeben, da schwierig per Class zu überschreiben.

Ränder einstellen REM & CLAMP

Global Styles >> Sections&Columns

Section Container Padding: oben & unten in clamp // rechts und links in  rem anlegen

von 80 px also 8 rem bei kleinen Auflösungen bis 120 px also 12 rem bei hohen Auflösungen

clamp(8rem, calc(8rem + ((1vw - 0.32rem) * 4.1667)), 12rem)

(bei einer Seitenbreite von 320 px / 32 rem bis 1280 Pixel / 128 rem)

Die Seitenränder sollen 32 Pixel also 3.2 rem betragen. Dieser Wert ist fix.

Columns Padding: none

Sonstige Einstellungen

Template-Erstellung

InnerContent: Min-Height 85 VH

Übergroße Container eliminieren

https://youtube.com/watch?v=gCFzYM4aTwg%3Fstart%3D1349

…oder hoverify  / Rahmen um das übergroße Element zu finden

width 100% und max-with 768 PX für das übergroße Element setzen

Footer Datum / Jahr immer aktuell über PHP-Funktion

Insert Data > Advanced # PHP function > 

Function Name: date

Argument: Y

MNstylesheet

/* Base */
html { 
font-size: 62.5%;
}

/* Bodyfontsize */
@media (max-width: 991px) {
body p {
font-size: 1.6rem;

              }
}

@media (max-width: 479px) {
body p {
font-size: 2rem;

              }
}

/* Owl Spacing */

.ct-section.owl-spacing--s .ct-section-inner-wrap > * + *,
.owl-spacing--s:not(.ct-section) > * + * {
margin-top: .5vmax;
}

.ct-section.owl-spacing--m .ct-section-inner-wrap > * + *,
.owl-spacing--m:not(.ct-section) > * + * {
margin-top: 1vmax;
}

.ct-section.owl-spacing--l .ct-section-inner-wrap > * + *,
.owl-spacing--l:not(.ct-section) > * + * {
margin-top: 2vmax;
}

.ct-section.owl-spacing--xl .ct-section-inner-wrap > * + *,
.owl-spacing--xl:not(.ct-section) > * + * {
margin-top: 4vmax;
}




/* MAX WIDTH UTILITY CLASSES */

.max-w--320 {
width: 100%;
max-width: 32rem;
}

.max-w--480 {
width: 100%;
max-width: 48rem;
}

.max-w--640 {
width: 100%;
max-width: 64rem;
}

.max-w--720 {
width: 100%;
max-width: 72rem;
}

.max-w--960 {
width: 100%;
max-width: 96rem;
}

.max-w--1120 {
width: 100%;
max-width: 112rem;
}

.max-w--full {
width: 100%;
max-width: 100%;
}

/* Aspect Ratio - Advanced > Attribute >Name= “style”
Data= “--aspect-ratio:1/1;” */

[style*="--aspect-ratio"] > :first-child {
width: 100%;
}
[style*="--aspect-ratio"] > img { 
height: auto;
} 
@supports (--custom:property) {
[style*="--aspect-ratio"] {
position: relative;
}
[style*="--aspect-ratio"]::before {
content: "";
display: block;
padding-bottom: calc(100% / (var(--aspect-ratio)));
} 
[style*="--aspect-ratio"] > :first-child {
position: absolute;
top: 0;
left: 0;
height: 100%;
} 
}