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

147
assets/css/scss/elements/_box.scss Normal file
View File

@@ -0,0 +1,147 @@
//
// Box Styles //
//
.box-shadow {
@include box-shadow(0 10px 36px 0 rgba(22,24,26,0.1));
@include transition(ease-out 0.16s);
&:hover {
@include box-shadow(0 10px 40px 0 rgba(22,24,26,0.15));
}
}
.hover-shadow {
@include transition(ease-out 0.16s);
&:hover {
@include box-shadow(0 10px 36px 0 rgba(22,24,26,0.1));
}
}
.hover-float {
@include transition(ease-out 0.16s);
&:hover {
@include transform(translateY(-4px));
}
}
.hover-scale {
@include transition(ease-out 0.16s);
&:hover {
@include transform(scale(1.015));
}
}
.hover-shrink {
@include transition(ease-out 0.16s);
&:hover {
@include transform(scale(0.985));
}
}
.box-backdrop {
overflow: hidden;
border-radius: 0.5em;
border: 2px solid get-color("dark");
@include box-shadow(4px 4px 0 0 get-color("dark"));
}
//
// Square box //
//
[class*="square-box"],
[class*="circle-box"] {
display: inline-block;
text-align: center;
* {
margin: 0;
vertical-align: middle;
}
}
.square-box-xs {
width: 40px;
height: 40px;
line-height: 40px;
* {
line-height: 40px;
}
}
.square-box-sm {
width: 50px;
height: 50px;
line-height: 50px;
* {
line-height: 50px;
}
}
.square-box, .square-box-md {
width: 60px;
height: 60px;
line-height: 60px;
* {
line-height: 60px;
}
}
.square-box-lg {
width: 70px;
height: 70px;
line-height: 70px;
* {
line-height: 70px;
}
}
.square-box-xl {
width: 80px;
height: 80px;
line-height: 80px;
* {
line-height: 80px;
}
}
//
// Circle Box //
//
[class*="circle-box"] {
border-radius: 50%;
}
.circle-box-xs {
width: 40px;
height: 40px;
line-height: 40px;
* {
line-height: 40px;
}
}
.circle-box-sm {
width: 50px;
height: 50px;
line-height: 50px;
* {
line-height: 50px;
}
}
.circle-box, .circle-box-md {
width: 60px;
height: 60px;
line-height: 60px;
* {
line-height: 60px;
}
}
.circle-box-lg {
width: 70px;
height: 70px;
line-height: 70px;
* {
line-height: 70px;
}
}
.circle-box-xl {
width: 80px;
height: 80px;
line-height: 80px;
* {
line-height: 80px;
}
}
//
// Box border radius //
//
.border-radius { border-radius: 0.5em; overflow: hidden; }
.border-radius-1 { border-radius: 1em; overflow: hidden; }
.border-radius-2 { border-radius: 2em; overflow: hidden; }