Anpassungen über die Variablen

Die wichtigste Anlaufstelle für Individualisierungen ist die variable.scss (themore/assets/scss/custom/variables.scss).

Videoanleitungen:

Nach Änderungen an einer SCSS-Datei muss der Script-Cache (Systemwartung) geleert oder das Frontend mit Shift + cmd / Strg + R neugeladen werden.

// BASIC SETTINGS
$grid-gap: 30px;
$container-size: 1200px;
$width-tablet: 1000px;
$width-smartphone: 800px;
$transition-duration: .3s;

Mit dem grid-gap wird die Grundbreite des Grid-Systems definiert. Diese kann durch den Gap-Factor individuell überschrieben werden. Mit der container-size wird die Breite der Box-Größe von Articeln definiert. Über die CSS-Klasse fullWidth kann ein Artikel auf 100% breite gestreckt weden. width-tablet und width-smartphone definieren die Breakpoints, die z.B. im Grid berücksichtigt werden. Mit der transition-duration wird die Animationsdauer zahlreicher Effekte definiert.

// COLOR
$main-color: #A167FF;
$second-color: black;
$lightgray-color: #f4f4f4;
$gray-color: #ccc;
$darkergray-color: #999;
$font-color: #111;

Die Farben, die im Theme an verschiedenen Stellen verwendet werden.

// COLOR » HEADER
$menu-color: #333;
$menu-color-active: $main-color;
$menu-bordercolor: #0003;
$menu-shadow: #0000;
$menu-font-weight: 400;
$mobile-bottom-background: #f4f4f4;
$mobile-menu-color: $menu-color;
$mobile-menu-color-selected: $main-color;
$mobile-menu-background-color: #f4f4f4;
$header-background: #fff;

Hauptmenü
Die Schriftfarbe (menu-color) im Menü und Hover- / Aktive-Farbe (menu-color-active). Wenn aktiv kann der Header eine Border (menu-bordercolor) und einen Schatte (menu-shadow) besitzen. Die Schriftdicke wird über menu-font-weight definiert.

Mobile Zeile unten
Hintergrund-Farbe für die Mobile Zeile unten: mobile-bottom-background.

Smartmenü
Die Schriftfarbe (mobile-menu-color) im Menü und Hover- / Aktive-Farbe (mobile-menu-color-active). Die Hintergrundfarbe des ausgeklappten mobilen Menüs ist: mobile-menu-background-color.

// COLOR » FOOTER
$footer-color: #efefef;

// BORDER RADIUS
$border-radius-xs: 5px;
$border-radius-s: 10px;
$border-radius-m: 20px;
$border-radius-l: 30px;
$border-radius-xl: 100%;

Die Einstellungen für die Border-Radius-Klassen. border-radius-xl ist für quadratische Bilder gedacht.

// FLOATING BUTTONS
$FB-border-radius: $border-radius-m;
$FB-bg: #000a;
$FB-color:white;
$FB-bg-hover: $main-color;
$FB-color-hover: white;

Floating Buttons sind die Kontaktbutton, die sich am rechten Bildschirmrand befinden.

// FONT
$body-font-family: 'Outfit', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';
$body-font-size: 18px;
$body-hyphens: auto;
$h1-size: 3em;
$h1-color: $main-color;
$h2-size: 1.75em;
$h2-color: $font-color;
$h3-size: 1.5em;
$h3-color: $font-color;
$h4-size: 1.25em;
$h4-color: $font-color;
$h5-size: 1.1em;
$h5-color: $font-color;
$h6-size: 1em;
$h6-color: $font-color;
$hl-hyphens: none;

Diese Einstellungen sind sowohl für die Überschriften HTML-Tags, als auch für die Klassen .h1, .h2 relevant, die Schriften wie die entsprechenden Überschriften aussehen lassen.

// HEADER
$header-overlapping: false; // true
$header-fixed-top: true; // true
$header-fixed-bottom: false; // false | overwrites $header-fixed-top

Möchtets du einen transparten Header einstellen, der auf dem Hintergrund liegt, aktive (true) header-overlapping.

Mit der Einstellung header-fixed-top, kannst du das Menü am oberen Rand fixieren, es folgt beim Scrollen. Ist header-fixed-top aktiv, header-overlapping jedoch nicht, wird ein Pseude-Element erstellt im #wrapper erstellt, damit der Header nicht aufliegt. Dieser wird nachgeladen und sorgt daher für einen "Ruckler".

Der Header kann alternativ mit header-fixed-bottom auch am unteren Bildschrimrand fixiert werden.

// HEADER » LOGO
$logo-width: 150px;
$logo-padding: 20px 0px;
$logo-nav-inline: true; // true

Definiere die Breite (logo-width) und den Abstand (logo-padding) des Logos.

Deaktivierst du logo-nav-inline, wird das Logo zentriert über dem Menü dargestellt.

// HEADER » NAVIGATION
$nav-last-element-button: true; // true
$nav-centered: false; // false
$nav-max-width: false; // false
$nav-separator: false; // false -> none
$nav-font-size: calc(#{$body-font-size} * .9);

Du kannst mittels nav-last-element-button das letzte Element im Menü als Button darstellen lassen.

Über nav-centered wir das Menü zentriert. nav-max-width kann dir helfen das Menü besser darzustellen, wenn es zentriert ist.

Über den nav-separator kannst du Elemente mit einem Zeichen trennen. Trage dazu z.B. $nav-separator: "|" ein.

Die Schriftgröße des Menüs: nav-font-size.

// IMAGES 
$image-link-effect: true; // true
$gallery-link-effect: true; // true

Deaktiviere die Hover-Animationen von Bildern, wenn sie einen Link besitzen.

// Vars to use in CSS
:root {
	--container-size: #{$container-size};
}

Wird benötigt, um SCSS Variablen, in einer CSS-Umgebung verfügbar zu machen.