update style, add div hyperlinks
This commit is contained in:
parent
dfa924a58b
commit
75cc059556
5 changed files with 116 additions and 7 deletions
0
1
Normal file
0
1
Normal file
19
config.toml
19
config.toml
|
|
@ -9,6 +9,7 @@ highlight_code = true
|
|||
[extra]
|
||||
|
||||
name = "Kasiandra Richmond"
|
||||
description = "Cyber Witch"
|
||||
|
||||
# Links will be set here. Enter the Title which should be shown on the site
|
||||
# icon is the svg filename (icon.svg) which are stored in static/img/
|
||||
|
|
@ -19,6 +20,22 @@ social = [
|
|||
{title = 'Forgejo', icon = 'git', link = '#git'},
|
||||
{title = 'Mastodon', icon = 'fediverse', link = '#fediverse'},
|
||||
{title = 'gitea', icon = 'git', link = 'https://example.com'},
|
||||
{title = 'gitea', icon = 'git', link = 'https://example.com'},
|
||||
{title = 'gitea', icon = 'git', link = 'https://example.com'},
|
||||
{title = 'gitea', icon = 'git', link = 'https://example.com'},
|
||||
{title = 'gitea', icon = 'git', link = 'https://example.com'},
|
||||
{title = 'gitea', icon = 'git', link = 'https://example.com'},
|
||||
{title = 'gitea', icon = 'git', link = 'https://example.com'},
|
||||
{title = 'gitea', icon = 'git', link = 'https://example.com'},
|
||||
{title = 'gitea', icon = 'git', link = 'https://example.com'},
|
||||
{title = 'gitea', icon = 'git', link = 'https://example.com'},
|
||||
{title = 'gitea', icon = 'git', link = 'https://example.com'},
|
||||
{title = 'gitea', icon = 'git', link = 'https://example.com'},
|
||||
{title = 'gitea', icon = 'git', link = 'https://example.com'},
|
||||
{title = 'gitea', icon = 'git', link = 'https://example.com'},
|
||||
{title = 'gitea', icon = 'git', link = 'https://example.com'},
|
||||
{title = 'gitea', icon = 'git', link = 'https://example.com'},
|
||||
{title = 'gitea', icon = 'git', link = 'https://example.com'},
|
||||
]
|
||||
|
||||
# Background Configurations
|
||||
|
|
@ -29,7 +46,7 @@ social = [
|
|||
|
||||
backgroundcolor = "#acab00"
|
||||
backgroundimage = "img/background-sonic.svg" # [background-sonic|background-chess_small|background-chess_big|background-intro]
|
||||
backgroundrepeat = "yes" # [yes|no]
|
||||
backgroundrepeat = "no" # [yes|no]
|
||||
backgroundvignette = "yes" # [yes|no]
|
||||
|
||||
# if you want to use a header, set the header option to yes
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ body {
|
|||
|
||||
.container {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
height: 100vw;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
|
|
@ -27,6 +27,27 @@ body {
|
|||
border-style: solid;
|
||||
border-color: black;
|
||||
box-shadow: 8px 8px 0px black;
|
||||
max-width: 400px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.content-social-name {
|
||||
font-weight: bold;
|
||||
font-family: sans;
|
||||
font-size: xx-large;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.content-social-desc {
|
||||
font-weight: bold;
|
||||
font-family: sans;
|
||||
font-size: large;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
[class*="-txt"] {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.content-social-profile img {
|
||||
|
|
@ -38,11 +59,28 @@ body {
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.div-link {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.div-link a {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
text-decoration: none;
|
||||
z-index: 10;
|
||||
background-color: #FFF;
|
||||
opacity: 0;
|
||||
filter: alpha(opacity=1);
|
||||
}
|
||||
|
||||
.footer {
|
||||
width: 100%;
|
||||
background: white;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
position: fixed;
|
||||
height: 28px;
|
||||
bottom: 0;
|
||||
}
|
||||
|
|
@ -74,3 +112,8 @@ body {
|
|||
width: 20%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 10px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ body {
|
|||
|
||||
.container {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
height: 100vw;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
|
|
@ -27,6 +27,27 @@ body {
|
|||
border-style: solid;
|
||||
border-color: black;
|
||||
box-shadow: 8px 8px 0px black;
|
||||
max-width: 400px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.content-social-name {
|
||||
font-weight: bold;
|
||||
font-family: sans;
|
||||
font-size: xx-large;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.content-social-desc {
|
||||
font-weight: bold;
|
||||
font-family: sans;
|
||||
font-size: large;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
[class*="-txt"] {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.content-social-profile img {
|
||||
|
|
@ -38,11 +59,28 @@ body {
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.div-link {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.div-link a {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
text-decoration: none;
|
||||
z-index: 10;
|
||||
background-color: #FFF;
|
||||
opacity: 0;
|
||||
filter: alpha(opacity=1);
|
||||
}
|
||||
|
||||
.footer {
|
||||
width: 100%;
|
||||
background: white;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
position: fixed;
|
||||
height: 28px;
|
||||
bottom: 0;
|
||||
}
|
||||
|
|
@ -74,3 +112,8 @@ body {
|
|||
width: 20%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 10px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,9 +7,9 @@
|
|||
</head>
|
||||
|
||||
{% if config.extra.backgroundrepeat == "yes" %}
|
||||
<body style="background-image: url({{ config.extra.backgroundimage }}); background-repeat: {{config.extra.backgroundrepeat }};">
|
||||
<body style="background-image: url({{ config.extra.backgroundimage }}); background-repeat: repeat;">
|
||||
{% else %}
|
||||
<body style="background-image: url({{ config.extra.backgroundimage }}); background-repeat: {{config.extra.backgroundrepeat }}; background-size: cover;">
|
||||
<body style="background-image: url({{ config.extra.backgroundimage }}); background-repeat: no-repeat; background-size: cover;">
|
||||
{% endif %}
|
||||
{% if config.extra.backgroundvignette == "yes" %}
|
||||
<div class="container" style="background: {{ config.extra.backgroundcolor}}40; box-shadow: inset 0 0 2000px">
|
||||
|
|
@ -29,9 +29,15 @@
|
|||
<div class="content-social-name">
|
||||
<p>{{ config.extra.name }}</p>
|
||||
</div>
|
||||
<div class="content-social-desc">
|
||||
<p>{{ config.extra.description }}</p>
|
||||
</div>
|
||||
{% if config.extra.social %}
|
||||
{% for links in config.extra.social %}
|
||||
<div class="content-social-link-{{ links.title }}">
|
||||
<div class="div-link">
|
||||
<a href="{{ links.link }}"></a>
|
||||
</div>
|
||||
<div class="{{ links.title }}-img">
|
||||
<a class="linkimg" href="{{ links.link }}"><img src="/img/{{ links.icon }}.svg"alt="Socialmedia Icon for {{links.icon}}" style="width: 25px; filter: invert(75%)"</img></a>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue