kbe/hugo-mistergeek
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add a breadcrumb

Browse Source
This commit is contained in:
kbe
2025-08-19 09:54:49 +02:00
parent 90340d03aa
commit 686ece4479
55 changed files with 24172 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
assets/css/scss/helpers/_custom.scss Normal file
View File

@@ -0,0 +1,3 @@
//
// Your Custom Styles //
//

97
assets/css/scss/helpers/_mixins.scss Normal file
View File

@@ -0,0 +1,97 @@
//
// Mixins //
//
@mixin display-flex {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
@mixin background-size($background-size) {
-webkit-background-size: $background-size;
-moz-background-size: $background-size;
background-size: $background-size;
}
@mixin box-shadow($box-shadow) {
-webkit-box-shadow: $box-shadow;
box-shadow: $box-shadow;
}
@mixin text-shadow($text-shadow) {
-webkit-text-shadow: $text-shadow;
text-shadow: $text-shadow;
}
@mixin filter($filter) {
-webkit-filter: $filter;
filter: $filter;
}
@mixin transition($transition) {
-webkit-transition: $transition;
transition: $transition;
}
@mixin transition-delay($transition-delay) {
-webkit-transition-delay: $transition-delay;
transition-delay: $transition-delay;
}
@mixin transition-duration($transition-duration) {
-webkit-transition-duration: $transition-duration;
transition-duration: $transition-duration;
}
@mixin transform($transform) {
-webkit-transform: $transform;
transform: $transform;
}
@mixin transform-origin($transform-origin) {
-webkit-transform-origin: $transform-origin;
transform-origin: $transform-origin;
}
@mixin animation($animation) {
-webkit-animation: $animation;
animation: $animation;
}
@mixin animation-delay($animation-delay) {
-webkit-animation-delay: $animation-delay;
animation-delay: $animation-delay;
}
@mixin animation-fill-mode($animation-fill-mode) {
-webkit-animation-fill-mode: $animation-fill-mode;
animation-fill-mode: $animation-fill-mode;
}
@mixin breakpoint-above($class) {
@if $class == xs {
@media (min-width: 0) { @content; }
}
@else if $class == sm {
@media (min-width: 576px) { @content; }
}
@else if $class == md {
@media (min-width: 768px) { @content; }
}
@else if $class == lg {
@media (min-width: 992px) { @content; }
}
@else if $class == xl {
@media (min-width: 1200px) { @content; }
}
}
@mixin breakpoint-less($class) {
@if $class == xs {
@media (max-width: 575.98px) { @content; }
}
@else if $class == sm {
@media (max-width: 767.98px) { @content; }
}
@else if $class == md {
@media (max-width: 991.98px) { @content; }
}
@else if $class == lg {
@media (max-width: 1199.98px) { @content; }
}
}

464
assets/css/scss/helpers/_utilities.scss Normal file
View File

@@ -0,0 +1,464 @@
:root {
--bs-dark-rgb: 24, 28, 32;
--bs-border-color: get-color("dark", 0.1);
}
//
// Background colors //
//
@each $name, $rgb in $colors {
@for $i from 1 through 9 {
.bg-#{$name}-0#{$i} {
background: rgba(nth($rgb, 1), nth($rgb, 2), nth($rgb, 3), $i * 0.1);
}
}
}
@each $name, $rgb in $colors {
@for $i from 1 through 9 {
.bg-color-#{$name}-0#{$i} {
background: rgba(nth($rgb, 1), nth($rgb, 2), nth($rgb, 3), $i * 0.1);
}
}
}
.bg-dark-lighter { background: $bg-dark-lighter; }
.bg-dark-lightest { background: $bg-dark-lightest; }
.bg-dark { background: get-color("dark"); }
.bg-gray { background: $bg-gray; }
.bg-gray-lighter { background: $bg-gray-lighter; }
.bg-gray-lightest { background: $bg-gray-lightest; }
//
// Light Backgrounds //
//
.bg-light-blue { background: $bg-light-blue; }
.bg-light-purple { background: $bg-light-purple; }
.bg-light-pink-edge { background: $bg-light-pink-edge; }
.bg-light-golden-yellow { background: $bg-light-golden-yellow; }
.bg-light-very-peri { background: $bg-light-very-peri; }
.bg-light-turquoise { background: $bg-light-turquoise; }
.bg-light-spring-red { background: $bg-light-spring-red; }
.bg-light-tan { background: $bg-light-tan; }
.bg-light-aqua { background: $bg-light-aqua; }
//
// Color Backgrounds //
//
.bg-color-blue { background: get-color("blue"); }
.bg-color-purple { background: get-color("purple"); }
.bg-color-golden-yellow { background: get-color("golden-yellow"); }
.bg-color-pink-edge { background: get-color("pink-edge"); }
.bg-color-very-peri { background: get-color("very-peri"); }
.bg-color-turquoise { background: get-color("turquoise"); }
.bg-color-spring-red { background: get-color("spring-red"); }
.bg-color-tan { background: get-color("tan"); }
.bg-color-aqua { background: get-color("aqua"); }
//
// Gradient Backgrounds //
//
.bg-gradient-1 { background-image: $gradient-1; }
.bg-gradient-2 { background-image: $gradient-2; }
.bg-gradient-3 { background-image: $gradient-3; }
.bg-gradient-4 { background-image: $gradient-4; }
.bg-gradient-5 { background-image: $gradient-5; }
.bg-gradient-6 { background-image: $gradient-6; }
.bg-gradient-7 { background-image: $gradient-7; }
.bg-white-content {
color: $color-primary;
h1,h2,h3,h4,h5,h6 { color: get-color("dark"); }
a {
&:not([class^='button']) {
color: get-color("dark", 0.9);
&:hover, &:focus { color: get-color("dark"); }
}
}
}
.bg-dark-content {
color: get-color("white", 0.7);
h1,h2,h3,h4,h5,h6 { color: white; }
a {
&:not([class^='button']) {
color: get-color("white", 0.9);
&:hover, &:focus { color: white; }
}
}
}
[class*='bg-white'] {
@extend .bg-white-content;
}
.bg-black,
[class*='bg-dark'],
[class*='bg-gradient-'],
[class*='bg-color-'] {
@extend .bg-dark-content;
[class*='bg-white'] {
@extend .bg-white-content;
}
}
//
// Font Families //
//
.font-family-primary { font-family: $font-family-primary }
.font-family-playfair { font-family: $font-family-playfair }
.font-family-poppins { font-family: $font-family-poppins }
.font-family-nunito { font-family: $font-family-nunito }
.font-family-outfit { font-family: $font-family-outfit }
//
// Font Weights //
//
.fw-thin { font-weight: $font-weight-thin; }
.fw-medium { font-weight: $font-weight-medium; }
.fw-semi-bold { font-weight: $font-weight-semi-bold; }
.fw-black { font-weight: $font-weight-black; }
//
// Text Colors //
//
@for $i from 1 through 9 {
*.text-white-0#{$i} {
color: rgba(nth($color-white, 1), nth($color-white, 2), nth($color-white, 3), $i * 0.1);
}
}
@for $i from 1 through 9 {
*.text-dark-0#{$i} {
color: rgba(nth($color-dark, 1), nth($color-dark, 2), nth($color-dark, 3), $i * 0.1);
}
}
*.text-dark { color: get-color("dark"); }
*.text-red { color: $color-red-lighter; }
*.text-green { color: $color-green-lighter; }
*.text-blue { color: get-color("blue"); }
*.text-purple { color: get-color("purple"); }
*.text-golden-yellow { color: get-color("golden-yellow"); }
*.text-pink-edge { color: get-color("pink-edge"); }
*.text-very-peri { color: get-color("very-peri"); }
*.text-turquoise { color: get-color("turquoise"); }
*.text-spring-red { color: get-color("spring-red"); }
*.text-tan { color: get-color("tan"); }
*.text-aqua { color: get-color("aqua"); }
[class*='text-gradient'] {
display: inline-block;
}
.text-gradient-1 {
background-image: $gradient-1;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.text-gradient-2 {
background-image: $gradient-2;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.text-gradient-3 {
background-image: $gradient-3;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.text-gradient-4 {
background-image: $gradient-4;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.text-gradient-5 {
background-image: $gradient-5;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.text-gradient-6 {
background-image: $gradient-6;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.text-gradient-7 {
background-image: $gradient-7;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
//
// Text Highlight //
//
[class*='text-highlight'] {
position: relative;
display: inline-block;
&:before {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 4px;
border-radius: 2px;
}
}
.text-highlight {
&:before { background: get-color("dark", 0.2); }
}
.text-highlight-gradient {
&:before { background-image: $gradient-1; }
}
.text-highlight-gradient-2 {
&:before { background-image: $gradient-2; }
}
.text-highlight-gradient-3 {
&:before { background-image: $gradient-3; }
}
.text-highlight-gradient-4 {
&:before { background-image: $gradient-4; }
}
.text-highlight-gradient-5 {
&:before { background-image: $gradient-5; }
}
.text-highlight-gradient-6 {
&:before { background-image: $gradient-6; }
}
.text-highlight-gradient-7 {
&:before { background-image: $gradient-7; }
}
h1,h2 {
&[class*='text-highlight'] {
&:before {
bottom: -2px;
height: 6px;
border-radius: 3px;
}
}
}
h3 {
&[class*='text-highlight'] {
&:before {
bottom: -2px;
height: 5px;
border-radius: 3px;
}
}
}
h1 {
&.display-1 {
&[class*='text-highlight'] {
&:before {
bottom: -8px;
height: 10px;
border-radius: 5px;
}
}
}
&.display-2 {
&[class*='text-highlight'] {
&:before {
bottom: -6px;
height: 8px;
border-radius: 4px;
}
}
}
&.display-3 {
&[class*='text-highlight'] {
&:before {
bottom: -6px;
height: 8px;
border-radius: 4px;
}
}
}
&.display-4 {
&[class*='text-highlight'] {
&:before {
bottom: -6px;
height: 7px;
border-radius: 4px;
}
}
}
}
.bg-black,
[class*='bg-dark'],
[class*='bg-gradient-'],
[class*='bg-color-'] {
.text-highlight {
&:before {
background: get-color("white", 0.3);
}
}
}
//
// Stroke Text //
//
.stroke-text {
color: get-color("dark");
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 1.0px;
-webkit-text-stroke-color: get-color("dark");
@include breakpoint-above(md) {
-webkit-text-stroke-width: 1.2px;
}
@include breakpoint-above(lg) {
-webkit-text-stroke-width: 1.4px;
}
}
.bg-black,
[class*='bg-dark'],
[class*='bg-gradient-'],
[class*='bg-color-'] {
.stroke-text {
color: white;
-webkit-text-stroke-color: white;
}
.bg-white,
[class*='bg-white'] {
.stroke-text {
color: get-color("dark");
-webkit-text-stroke-color: get-color("dark");
}
}
}
//
// Fancy Text //
//
.fancy-text {
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 1.0px;
-webkit-text-stroke-color: get-color("dark");
@include text-shadow(3px 3px 0 rgb(219, 221, 223));
@include breakpoint-above(md) { -webkit-text-stroke-width: 1.2px; }
@include breakpoint-above(lg) { -webkit-text-stroke-width: 1.4px; }
&.display-1, &.display-2, &.display-3 {
@include text-shadow(4px 4px 0 rgb(219, 221, 223));
}
@include breakpoint-above(md) {
&.display-1, &.display-2, &.display-3 {
@include text-shadow(5px 5px 0 rgb(219, 221, 223));
}
&.display-4 {
@include text-shadow(4px 4px 0 rgb(219, 221, 223));
}
}
}
.bg-black,
[class*='bg-dark'],
[class*='bg-gradient-'],
[class*='bg-color-'] {
.fancy-text {
color: white;
-webkit-text-stroke-color: white;
@include text-shadow(3px 3px 0 rgb(46, 48, 50));
&.display-1, &.display-2, &.display-3 {
@include text-shadow(4px 4px 0 rgb(46, 48, 50));
}
@include breakpoint-above(md) {
&.display-1, &.display-2, &.display-3 {
@include text-shadow(5px 5px 0 rgb(46, 48, 50));
}
&.display-4 {
@include text-shadow(4px 4px 0 rgb(46, 48, 50));
}
}
}
[class*='bg-white'] {
.fancy-text {
color: get-color("dark");
-webkit-text-stroke-color: get-color("dark");
@include text-shadow(3px 3px 0 rgb(219, 221, 223));
&.display-1, &.display-2, &.display-3 {
@include text-shadow(4px 4px 0 rgb(219, 221, 223));
}
@include breakpoint-above(md) {
&.display-1, &.display-2, &.display-3 {
@include text-shadow(5px 5px 0 rgb(219, 221, 223));
}
&.display-4 {
@include text-shadow(4px 4px 0 rgb(219, 221, 223));
}
}
}
}
}
//
// Borders //
//
.border-top,
.border-right,
.border-bottom,
.border-left {
border-width: 0;
border-style: solid;
border-color: get-color("dark", 0.1);
}
.border-top { border-top-width: 1px; }
.border-right { border-right-width: 1px; }
.border-bottom { border-bottom-width: 1px; }
.border-left { border-left-width: 1px; }
.bg-black,
[class*='bg-dark'],
[class*='bg-gradient-'],
[class*='bg-color-'] {
.border, .border-top, .border-right, .border-bottom, .border-left {
border-color: get-color("white", 0.2) !important;
}
}
//
// Border Styles //
//
.border-style-dotted { border-style: dotted; }
.border-style-dashed { border-style: dashed; }
//
// Negative Margin //
//
.n-margin-1 {
margin-top: -1rem;
}
.n-margin-2 {
margin-top: -2rem;
}
.n-margin-3 {
margin-top: -3rem;
}
.n-margin-4 {
margin-top: -4rem;
}
.n-margin-5 {
margin-top: -5rem;
}
.n-margin-6 {
margin-top: -6rem;
}
//
// Backdrop Filter //
//
.backdrop-filter-blur {
backdrop-filter: blur(5px);
}
//
// Opacity //
//
.opacity-10 {
opacity: 0.1;
}
.opacity-15 {
opacity: 0.15;
}
.opacity-20 {
opacity: 0.2;
}

126
assets/css/scss/helpers/_variables.scss Normal file
View File

@@ -0,0 +1,126 @@
//
// Font //
//
$font-family-primary: 'Open Sans', sans-serif;
$font-family-playfair: 'Playfair Display', serif;
$font-family-poppins: 'Poppins', sans-serif;
$font-family-nunito: 'Nunito', sans-serif;
$font-family-outfit: 'Outfit', sans-serif;
$font-weight-black: 900;
$font-weight-extra-bold: 800;
$font-weight-bold: 700;
$font-weight-semi-bold: 600;
$font-weight-medium: 500;
$font-weight-regular: 400;
$font-weight-light: 300;
$font-weight-extra-light: 200;
$font-weight-thin: 100;
//
// Colors //
//
$colors: (
"white": (255, 255, 255),
"dark": (18, 21, 24),
"blue": (0, 147, 233),
"purple": (183, 33, 255),
"golden-yellow": (255, 182, 87),
"pink-edge": (254, 154, 182),
"very-peri": (102, 103, 171),
"turquoise": (76, 191, 166),
"spring-red": (190, 31, 53),
"tan": (210, 180, 140),
"aqua": (3, 212, 216)
);
@function get-color($color-name, $opacity: null) {
@if not map-has-key($colors, $color-name) {
@warn "Color `#{$color-name}` not found in $colors map.";
@return null;
}
$color: map-get($colors, $color-name);
@if $opacity == null {
@return rgb(nth($color, 1), nth($color, 2), nth($color, 3));
} @else {
@return rgba(nth($color, 1), nth($color, 2), nth($color, 3), $opacity);
}
}
$color-white: map-get($colors, "white");
$color-dark: map-get($colors, "dark");
$color-dark-lighter: rgb(25, 28, 31);
$color-primary: #7C7C7C;
$color-primary-lighter: #AAAAAA;
$color-green: #24963e;
$color-green-lighter: #28a745;
$color-red: #c62f3e;
$color-red-lighter: #dc3545;
//
// Social Colors //
//
$color-facebook: #1877F2;
$color-twitter: #1DA1F2;
$color-instagram: #E4405F;
$color-linkedin: #0A66C2;
$color-youtube: #CD201F;
$color-pinterest: #BD081C;
$color-skype: #00AFF0;
$color-dribbble: #EA4C89;
$color-snapchat: #FFFC00;
$color-whatsapp: #25D366;
//
// Gradient Colors //
//
$gradient-1: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
$gradient-2: linear-gradient(45deg, #A9C9FF 0%, #FFBBEC 100%);
$gradient-3: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
$gradient-4: linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%);
$gradient-5: linear-gradient(45deg, #FBDA61 0%, #FF5ACD 100%);
$gradient-6: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
$gradient-7: linear-gradient(90deg, #007990 0%, #6CE5C0 100%);
//
// Background colors //
//
$bg-dark: rgb(24, 28, 32);
$bg-dark-lighter: rgb(32, 36, 40);
$bg-dark-lightest: rgb(40, 44, 48);
$bg-gray: rgb(238, 242, 246);
$bg-gray-lighter: rgb(241, 245, 249);
$bg-gray-lightest: rgb(244, 248, 252);
$bg-light-blue: #e2f2fb;
$bg-light-purple: #F5E4FF;
$bg-light-pink-edge: #FEE6ED;
$bg-light-golden-yellow: #FFEFDB;
$bg-light-very-peri: #EDEDF5;
$bg-light-turquoise: #E2F4F0;
$bg-light-spring-red: #F7E5E7;
$bg-light-tan: #f6f0e8;
$bg-light-aqua: #CEF6F7;
$bg-color-blue: #0093E9;
$bg-color-purple: #B721FF;
$bg-color-pink-edge: #FE9AB6;
$bg-color-golden-yellow: #FFB657;
$bg-color-very-peri: #6667AB;
$bg-color-turquoise: #4cbfa6;
$bg-color-spring-red: #BE1F35;
$bg-color-tan: #d2b48c;
$bg-color-aqua: #03D4D8;
//
// Border colors //
//
$border-gray: rgb(226, 230, 234);
//
// Button colors //
//
$button-dark: rgb(24, 28, 32);
$button-dark-lighter: rgb(32, 36, 40);
$button-gray: rgb(228, 232, 236);
$button-gray-lighter: rgb(238, 242, 246);
$button-gray-darker: rgb(220, 224, 228);