Kasiandra/Zola-Socialcard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add style and images

Browse source
This commit is contained in:
kasiandra 2025-04-05 07:42:36 +02:00
parent 595c75a9fb
commit 7869889bb1
12 changed files with 169 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

5
config.toml
View file

@ -8,6 +8,8 @@ highlight_code = true
[extra]
name = "Foo Bar"
social = [
{title = 'Mail', icon = 'mail', link = 'mailto:foo@bar.de'},
{title = 'Git', icon = 'git', link = '#git'},
@ -15,6 +17,9 @@ social = [
{title = 'Web', icon = 'web', link = 'https://example.com'},
]
backgroundcolor = "#10A1EE40"
backgroundimage = "img/background.svg"
[[extra.footer]]
copyleft = 'Kasia-Marysia'
zola = 'Created With Rust'

53
public/img/background.svg Normal file
View file

@ -0,0 +1,53 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="1920"
height="1080"
viewBox="0 0 507.99999 285.75"
version="1.1"
id="svg1"
xml:space="preserve"
sodipodi:docname="background.svg"
inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
id="namedview1"
pagecolor="#505050"
bordercolor="#ffffff"
borderopacity="1"
inkscape:showpageshadow="0"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="1"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
inkscape:zoom="0.37800566"
inkscape:cx="95.236669"
inkscape:cy="666.65668"
inkscape:current-layer="layer1"
showgrid="false" /><defs
id="defs1" /><g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"><rect
style="fill:#ffffff;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4.2;paint-order:stroke markers fill"
id="rect4"
width="508"
height="285.75"
x="0"
y="0" /><path
id="rect1"
style="fill:#666666;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4.2;paint-order:stroke markers fill"
d="M 0 0 L 0 285.75 L 50.976733 285.75 L 265.49749 285.75 L 158.23737 142.875 L 265.49749 0 L 50.976733 0 L 0 0 z " /><path
id="rect6"
style="mix-blend-mode:screen;fill:#1a1a1a;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4.2;paint-order:stroke markers fill"
d="m 0,0 v 285.75 l 52.640198,0 L 157.38109,142.9243 51.960136,0 Z"
sodipodi:nodetypes="cccccc" /><path
id="path7"
style="display:inline;mix-blend-mode:exclusion;fill:#4d4d4d;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4.2;paint-order:stroke markers fill"
d="M 181.10212,0 0,78.329069 V 110.5023 L 105.18428,135.77001 254,0 Z M 105.18428,149.97999 0,175.2477 v 32.17323 L 181.10212,285.75 H 254 Z" /><path
id="rect5"
style="display:inline;opacity:1;mix-blend-mode:screen;fill:#1a1a1a;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4.2;paint-order:stroke markers fill"
d="M 0,17.874878 V 267.87512 L 125.00012,142.875 Z" /></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 2.6 KiB

1
public/img/fediverse.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M433 179.11c0-97.2-63.71-125.7-63.71-125.7-62.52-28.7-228.56-28.4-290.48 0 0 0-63.72 28.5-63.72 125.7 0 115.7-6.6 259.4 105.63 289.1 40.51 10.7 75.32 13 103.33 11.4 50.81-2.8 79.32-18.1 79.32-18.1l-1.7-36.9s-36.31 11.4-77.12 10.1c-40.41-1.4-83-4.4-89.63-54a102.54 102.54 0 0 1-.9-13.9c85.63 20.9 158.65 9.1 178.75 6.7 56.12-6.7 105-41.3 111.23-72.9 9.8-49.8 9-121.5 9-121.5zm-75.12 125.2h-46.63v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.33V197c0-58.5-64-56.6-64-6.9v114.2H90.19c0-122.1-5.2-147.9 18.41-175 25.9-28.9 79.82-30.8 103.83 6.1l11.6 19.5 11.6-19.5c24.11-37.1 78.12-34.8 103.83-6.1 23.71 27.3 18.4 53 18.4 175z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 864 B

1
public/img/git.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M433 179.11c0-97.2-63.71-125.7-63.71-125.7-62.52-28.7-228.56-28.4-290.48 0 0 0-63.72 28.5-63.72 125.7 0 115.7-6.6 259.4 105.63 289.1 40.51 10.7 75.32 13 103.33 11.4 50.81-2.8 79.32-18.1 79.32-18.1l-1.7-36.9s-36.31 11.4-77.12 10.1c-40.41-1.4-83-4.4-89.63-54a102.54 102.54 0 0 1-.9-13.9c85.63 20.9 158.65 9.1 178.75 6.7 56.12-6.7 105-41.3 111.23-72.9 9.8-49.8 9-121.5 9-121.5zm-75.12 125.2h-46.63v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.33V197c0-58.5-64-56.6-64-6.9v114.2H90.19c0-122.1-5.2-147.9 18.41-175 25.9-28.9 79.82-30.8 103.83 6.1l11.6 19.5 11.6-19.5c24.11-37.1 78.12-34.8 103.83-6.1 23.71 27.3 18.4 53 18.4 175z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 864 B

1
public/img/mail.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

BIN
public/img/profile.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 120 KiB

1
public/img/web.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M433 179.11c0-97.2-63.71-125.7-63.71-125.7-62.52-28.7-228.56-28.4-290.48 0 0 0-63.72 28.5-63.72 125.7 0 115.7-6.6 259.4 105.63 289.1 40.51 10.7 75.32 13 103.33 11.4 50.81-2.8 79.32-18.1 79.32-18.1l-1.7-36.9s-36.31 11.4-77.12 10.1c-40.41-1.4-83-4.4-89.63-54a102.54 102.54 0 0 1-.9-13.9c85.63 20.9 158.65 9.1 178.75 6.7 56.12-6.7 105-41.3 111.23-72.9 9.8-49.8 9-121.5 9-121.5zm-75.12 125.2h-46.63v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.33V197c0-58.5-64-56.6-64-6.9v114.2H90.19c0-122.1-5.2-147.9 18.41-175 25.9-28.9 79.82-30.8 103.83 6.1l11.6 19.5 11.6-19.5c24.11-37.1 78.12-34.8 103.83-6.1 23.71 27.3 18.4 53 18.4 175z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 864 B

22
public/style.css Normal file
View file

@ -0,0 +1,22 @@
body {
margin: 0px;
width: 100%;
height: 100%;
display: flex;
background-repeat: repeat-y;
}
.container {
width: 100vw;
height: 100vh;
margin: 0px;
}
.content-social-profile img {
max-width: 200px;
max-height: 200px;
border-radius: 50%;
}

53
static/img/background.svg Normal file
View file

@ -0,0 +1,53 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="1920"
height="1080"
viewBox="0 0 507.99999 285.75"
version="1.1"
id="svg1"
xml:space="preserve"
sodipodi:docname="background.svg"
inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
id="namedview1"
pagecolor="#505050"
bordercolor="#ffffff"
borderopacity="1"
inkscape:showpageshadow="0"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="1"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
inkscape:zoom="0.37800566"
inkscape:cx="95.236669"
inkscape:cy="666.65668"
inkscape:current-layer="layer1"
showgrid="false" /><defs
id="defs1" /><g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"><rect
style="fill:#ffffff;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4.2;paint-order:stroke markers fill"
id="rect4"
width="508"
height="285.75"
x="0"
y="0" /><path
id="rect1"
style="fill:#666666;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4.2;paint-order:stroke markers fill"
d="M 0 0 L 0 285.75 L 50.976733 285.75 L 265.49749 285.75 L 158.23737 142.875 L 265.49749 0 L 50.976733 0 L 0 0 z " /><path
id="rect6"
style="mix-blend-mode:screen;fill:#1a1a1a;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4.2;paint-order:stroke markers fill"
d="m 0,0 v 285.75 l 52.640198,0 L 157.38109,142.9243 51.960136,0 Z"
sodipodi:nodetypes="cccccc" /><path
id="path7"
style="display:inline;mix-blend-mode:exclusion;fill:#4d4d4d;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4.2;paint-order:stroke markers fill"
d="M 181.10212,0 0,78.329069 V 110.5023 L 105.18428,135.77001 254,0 Z M 105.18428,149.97999 0,175.2477 v 32.17323 L 181.10212,285.75 H 254 Z" /><path
id="rect5"
style="display:inline;opacity:1;mix-blend-mode:screen;fill:#1a1a1a;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4.2;paint-order:stroke markers fill"
d="M 0,17.874878 V 267.87512 L 125.00012,142.875 Z" /></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
static/img/profile.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 120 KiB

22
static/style.css Normal file
View file

@ -0,0 +1,22 @@
body {
margin: 0px;
width: 100%;
height: 100%;
display: flex;
background-repeat: repeat-y;
}
.container {
width: 100vw;
height: 100vh;
margin: 0px;
}
.content-social-profile img {
max-width: 200px;
max-height: 200px;
border-radius: 50%;
}

12
templates/index.html
View file

@ -5,16 +5,24 @@
<title>{% block title %}{{ config.title }}{% endblock title %}</title>
<link rel='stylesheet' href='/style.css' type='text/css' >
</head>
<body>
<div class="container">
<body style="background-image: url({{ config.extra.backgroundimage }})">
<div class="container" style="background: {{ config.extra.backgroundcolor}}; box-shadow: inset 0 0 2000px {{ config.extra.backgroundcolor }}">
<div class="header">
<p>Here comes the banner</p>
</div>
<div class="content">
<div class="content-social">
<div class="content-social-profile">
<img src="/img/profile.png">
</div>
<div class="content-social-name">
<p>{{ config.extra.name }}</p>
</div>
{% if config.extra.social %}
{% for links in config.extra.social %}
<div class="content-social-{{ links.title }}">
<a href="{{ links.link }}"><img src="/img/{{ links.icon }}.svg"alt="Socialmedia Icon for {{links.icon}}" style="width: 25px; filter: invert(75%)"</img></a><a> {{ links.title }}<br>
</div>
{% endfor %}
{% endif %}
</div>