update style, add div hyperlinks

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

public/style.css

@@ -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;
+}

static/style.css

@@ -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;
+}

templates/index.html

@@ -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>