themes/kobel
themes/kobel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

FIX avatar image CHANGE class names

Browse source
This commit is contained in:
Hoernschen 2024-01-14 12:16:30 +01:00
parent 87d8c05eb2
commit ec90ac9b77
Signed by: hoernschen
GPG key ID: 37591FAF4E6D3462
3 changed files with 24 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
assets/scss/index.scss
View file

@ -321,7 +321,7 @@ a {
padding-block-end: 3rem; padding-block-end: 3rem;
} }
.content { main > .content {
padding-top: 9rem; padding-top: 9rem;
padding-bottom: 2rem; padding-bottom: 2rem;
padding-right: 1.5rem; padding-right: 1.5rem;
@ -344,56 +344,60 @@ a {
flex: 1 0 auto; flex: 1 0 auto;
} }
.section-even { .section.even {
// background-color: #eee; // background-color: #eee;
} }
.section-highlight { .section.highlight {
background-color: {{ .Site.Params.color.primary }}; background-color: {{ .Site.Params.color.primary }};
} }
.section-content { .section > .content {
width: 100%; width: 100%;
max-width: $width; max-width: $width;
margin: auto; margin: auto;
justify-content: center; justify-content: center;
} }
.hero .hero-content { .hero > .content {
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.hero .description { .hero > .content > .image {
max-width: 150px;
}
.hero > .description {
padding: 10px; padding: 10px;
position: relative; position: relative;
margin-block-start: 50px; margin-block-start: 50px;
border: none; border: none;
} }
.hero .description::before, .hero > .description::before,
.hero .description::after { .hero > .description::after {
position: absolute; position: absolute;
width: 33px; width: 33px;
height: 25px; height: 25px;
content: ""; content: "";
} }
.hero .description::before { .hero > .description::before {
left: 0; left: 0;
top: 0; top: 0;
border-left: 3px solid {{ .Site.Params.color.primary }}; border-left: 3px solid {{ .Site.Params.color.primary }};
border-top: 3px solid {{ .Site.Params.color.primary }}; border-top: 3px solid {{ .Site.Params.color.primary }};
} }
.hero .description::after { .hero > .description::after {
right: 0; right: 0;
bottom: 0; bottom: 0;
border-right: 3px solid {{ .Site.Params.color.primary }}; border-right: 3px solid {{ .Site.Params.color.primary }};
border-bottom: 3px solid {{ .Site.Params.color.primary }}; border-bottom: 3px solid {{ .Site.Params.color.primary }};
} }
.hero-content > div { .hero > .content > div {
flex-grow: 1; flex-grow: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -401,17 +405,17 @@ a {
padding-inline-start: 25px; padding-inline-start: 25px;
} }
.hero-content .social { .hero > .content .social {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
} }
.hero-content .social i { .hero > .content .social i {
font-size: x-large; font-size: x-large;
} }
.hero-content .social a { .hero > .content .social a {
padding-inline: 6px; padding-inline: 6px;
color: {{ .Site.Params.color.primary }}; color: {{ .Site.Params.color.primary }};
} }
@ -473,5 +477,4 @@ img {
border-radius: 50%; border-radius: 50%;
border: 3px solid {{ .Site.Params.color.primary }}; border: 3px solid {{ .Site.Params.color.primary }};
object-fit: cover; object-fit: cover;
width: 150px;
} }

3
layouts/partials/components/image.html
View file

@ -5,7 +5,6 @@ alt: string
width: int width: int
height: int height: int
--> -->
{{ $avatar := "avatar"}}
{{ $sizes := slice "320" "640" "960" "1280" }} {{ $sizes := slice "320" "640" "960" "1280" }}
{{ $ext := path.Ext .url }} {{ $ext := path.Ext .url }}
{{ $name := path.Base (replace .url $ext "") }} {{ $name := path.Base (replace .url $ext "") }}
@ -31,7 +30,7 @@ height: int
" "
/> />
<img <img
class="{{if eq .type $avatar}}avatar{{end}}" class="{{ .type }}"
width="{{ .width }}" width="{{ .width }}"
height="{{ .height }}" height="{{ .height }}"
srcset=" srcset="

8
layouts/partials/hero.html
View file

@ -10,11 +10,13 @@ hero:
content: string content: string
--> -->
<div id="{{ .id }}" class="section {{if eq .odd 0}} section-even {{end}} row"> <div id="{{ .id }}" class="section {{if eq .odd 0}} section-even {{end}} row">
<div class="section-content hero"> <div class="content hero">
{{ with .hero }} {{ with .hero }}
<div class="hero-content"> <div class="content">
{{ if .avatar }} {{ if .avatar }}
{{ partial "components/image.html" .avatar }} <div class="image">
{{ partial "components/image.html" .avatar }}
</div>
{{ end }} {{ end }}
<div> <div>
<h1>{{ .greeting }}</h1> <h1>{{ .greeting }}</h1>