Animations + pill fix

konceptosociala · Jul 11, 2023 · dab0d34 · dab0d34
1 parent 47a84c3
commit dab0d34
Show file tree

Hide file tree

Showing 20 changed files with 100 additions and 5 deletions.
diff --git a/config.toml b/config.toml
@@ -13,6 +13,7 @@ highlight_theme = "base16-ocean-dark"
 socio_title = "Socio Theme Demo"
 socio_favicon = "/img/socio_favicon.svg"
 socio_logo = "/img/socio.svg"
+socio_animations = true
 
 # Navbar links
 socio_navbar_links = [
@@ -36,6 +37,7 @@ socio_languages = [
 socio_banner_display = true
 socio_banner_logo = "/img/socio_favicon_variant.svg"
 socio_banner_logo_width = 144
+socio_banner_animation = "bounceIn"
 
 # Social (comment to hide)
 socio_github = "https://github.com/konceptosociala/socio"

diff --git a/content/blog/configuration.md b/content/blog/configuration.md
@@ -10,6 +10,7 @@ Socio is a pretty much configurable theme, so you can tweak many website paramet
 * `socio_title` - main website title, which is visible in title bar along with page title like: `My page | My site title`
 * `socio_favicon` - website favicon path. It can be either relative or absolute (eg. https://...)
 * `socio_logo` - website logo path. It is located on the navbar. If not set, website title is displayed instead
+* `socio_animations` - enable animations with [animate.css](https://animate.style/)
 
 ## Navbar links
 
@@ -56,6 +57,7 @@ Socio is a pretty much configurable theme, so you can tweak many website paramet
 * `socio_banner_display` - defines whether homepage banner is displayed
 * `socio_banner_logo` - path to logo, which must be displayed on the banner
 * `socio_banner_logo_width` - width of the logo
+* `socio_banner_animation` - banner fade in animation like `bounce`, `flash` etc. For a full list look at [https://animate.style/](https://animate.style/)
 
 ## Social
 

diff --git a/docs/.nojekyll b/docs/.nojekyll
diff --git a/docs/blog/configuration/index.html b/docs/blog/configuration/index.html
@@ -65,6 +65,9 @@
         https://konceptosociala.eu.org/socio/img/socio_favicon.svg
     
 " type="image/x-icon">
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
+
     <title>Configuration | Socio Theme Demo
 </title>
 </head>
@@ -217,6 +220,7 @@ <h2 id="general">General</h2>
 <li><code>socio_title</code> - main website title, which is visible in title bar along with page title like: <code>My page | My site title</code></li>
 <li><code>socio_favicon</code> - website favicon path. It can be either relative or absolute (eg. https://...)</li>
 <li><code>socio_logo</code> - website logo path. It is located on the navbar. If not set, website title is displayed instead</li>
+<li><code>socio_animations</code> - enable animations with <a href="https://animate.style/">animate.css</a></li>
 </ul>
 <h2 id="navbar-links">Navbar links</h2>
 <ul>
@@ -270,6 +274,7 @@ <h2 id="homepage-banner">Homepage banner</h2>
 <li><code>socio_banner_display</code> - defines whether homepage banner is displayed</li>
 <li><code>socio_banner_logo</code> - path to logo, which must be displayed on the banner</li>
 <li><code>socio_banner_logo_width</code> - width of the logo</li>
+<li><code>socio_banner_animation</code> - banner fade in animation like <code>bounce</code>, <code>flash</code> etc. For a full list look at <a href="https://animate.style/">https://animate.style/</a></li>
 </ul>
 <h2 id="social">Social</h2>
 <p>You can put your social network profile links in footer with <strong>Social</strong> section. Just uncomment lines, that are needed, and put URLs:</p>

diff --git a/docs/blog/index.html b/docs/blog/index.html
@@ -56,6 +56,9 @@
         https://konceptosociala.eu.org/socio/img/socio_favicon.svg
     
 " type="image/x-icon">
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
+
     <title>Blog | Socio Theme Demo
 </title>
 </head>

diff --git a/docs/blog/shortcodes/index.html b/docs/blog/shortcodes/index.html
@@ -56,6 +56,9 @@
         https://konceptosociala.eu.org/socio/img/socio_favicon.svg
     
 " type="image/x-icon">
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
+
     <title>Shortcodes | Socio Theme Demo
 </title>
 </head>

diff --git a/docs/index.html b/docs/index.html
@@ -125,6 +125,9 @@
         https://konceptosociala.eu.org/socio/img/socio_favicon.svg
     
 " type="image/x-icon">
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
+
     <title>Homepage | Socio Theme Demo
 </title>
 </head>
@@ -266,7 +269,7 @@
 
 
 <section class="section pt-5" style="background: #423E3B;">
-    <div class="container content d-flex justify-content-center flex-column align-items-center">
+    <div class="container content d-flex justify-content-center flex-column align-items-center animate__animated animate__bounceIn">
         <img class="m-3" src="
     
         https://konceptosociala.eu.org/socio/img/socio_favicon_variant.svg
@@ -351,55 +354,69 @@ <h1 id="technologies">Technologies</h1>
         <img class="img-fluid rounded-circle" src="https:&#x2F;&#x2F;dummyimage.com&#x2F;1024x1024&#x2F;fff&#x2F;333.gif" width=512>
         <h1 class="card-title text-center mt-3">Title</h1>
         <p class="card-text mx-4 mt-2 ">Lorem ipsum dolor sit amet consecteur</p>
+
         <p class="text-center"><a href="#" class="btn btn-primary mx-4 mb-5">Read more</a></p>
+
     </div>
 </div>
     <div class="card rounded-pill text-bg-dark mx-auto mb-4" style="max-width: 18rem;">
     <div class="card-body">
         <img class="img-fluid rounded-circle" src="https:&#x2F;&#x2F;dummyimage.com&#x2F;512x512&#x2F;fff&#x2F;333.gif" width=512>
         <h1 class="card-title text-center mt-3">Title</h1>
         <p class="card-text mx-4 mt-2 ">Lorem ipsum dolor sit amet consecteur</p>
+
         <p class="text-center"><a href="#" class="btn btn-primary mx-4 mb-5">Read more</a></p>
+
     </div>
 </div>
     <div class="card rounded-pill text-bg-dark mx-auto mb-4" style="max-width: 18rem;">
     <div class="card-body">
         <img class="img-fluid rounded-circle" src="https:&#x2F;&#x2F;dummyimage.com&#x2F;128x128&#x2F;fff&#x2F;333.gif" width=512>
         <h1 class="card-title text-center mt-3">Title</h1>
         <p class="card-text mx-4 mt-2 ">Lorem ipsum dolor sit amet consecteur</p>
+
         <p class="text-center"><a href="#" class="btn btn-primary mx-4 mb-5">Read more</a></p>
+
     </div>
 </div>
     <div class="card rounded-pill text-bg-dark mx-auto mb-4" style="max-width: 18rem;">
     <div class="card-body">
         <img class="img-fluid rounded-circle" src="https:&#x2F;&#x2F;dummyimage.com&#x2F;512x512&#x2F;fff&#x2F;333.gif" width=512>
         <h1 class="card-title text-center mt-3">Title</h1>
         <p class="card-text mx-4 mt-2 ">Lorem ipsum dolor sit amet consecteur</p>
+
         <p class="text-center"><a href="#" class="btn btn-primary mx-4 mb-5">Read more</a></p>
+
     </div>
 </div>
     <div class="card rounded-pill text-bg-dark mx-auto mb-4" style="max-width: 18rem;">
     <div class="card-body">
         <img class="img-fluid rounded-circle" src="https:&#x2F;&#x2F;dummyimage.com&#x2F;512x512&#x2F;fff&#x2F;333.gif" width=512>
         <h1 class="card-title text-center mt-3">Title</h1>
         <p class="card-text mx-4 mt-2 ">Lorem ipsum dolor sit amet consecteur</p>
+
         <p class="text-center"><a href="#" class="btn btn-primary mx-4 mb-5">Read more</a></p>
+
     </div>
 </div>
     <div class="card rounded-pill text-bg-dark mx-auto mb-4" style="max-width: 18rem;">
     <div class="card-body">
         <img class="img-fluid rounded-circle" src="https:&#x2F;&#x2F;dummyimage.com&#x2F;512x512&#x2F;fff&#x2F;333.gif" width=512>
         <h1 class="card-title text-center mt-3">Title</h1>
         <p class="card-text mx-4 mt-2 ">Lorem ipsum dolor sit amet consecteur</p>
+
         <p class="text-center"><a href="#" class="btn btn-primary mx-4 mb-5">Read more</a></p>
+
     </div>
 </div>
     <div class="card rounded-pill text-bg-dark mx-auto mb-4" style="max-width: 18rem;">
     <div class="card-body">
         <img class="img-fluid rounded-circle" src="https:&#x2F;&#x2F;dummyimage.com&#x2F;512x512&#x2F;fff&#x2F;333.gif" width=512>
         <h1 class="card-title text-center mt-3">Title</h1>
         <p class="card-text mx-4 mt-2 ">Lorem ipsum dolor sit amet consecteur</p>
+
         <p class="text-center"><a href="#" class="btn btn-primary mx-4 mb-5">Read more</a></p>
+
     </div>
 </div>
 </div>

diff --git a/docs/info/index.html b/docs/info/index.html
@@ -56,6 +56,9 @@
         https://konceptosociala.eu.org/socio/img/socio_favicon.svg
     
 " type="image/x-icon">
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
+
     <title>Info | Socio Theme Demo
 </title>
 </head>

diff --git a/docs/sr/blog/index.html b/docs/sr/blog/index.html
@@ -56,6 +56,9 @@
         https://konceptosociala.eu.org/socio/img/socio_favicon.svg
     
 " type="image/x-icon">
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
+
     <title>Blog | Socio Theme Demo
 </title>
 </head>

diff --git a/docs/sr/index.html b/docs/sr/index.html
@@ -125,6 +125,9 @@
         https://konceptosociala.eu.org/socio/img/socio_favicon.svg
     
 " type="image/x-icon">
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
+
     <title>Početna | Socio Theme Demo
 </title>
 </head>
@@ -266,7 +269,7 @@
 
 
 <section class="section pt-5" style="background: #423E3B;">
-    <div class="container content d-flex justify-content-center flex-column align-items-center">
+    <div class="container content d-flex justify-content-center flex-column align-items-center animate__animated animate__bounceIn">
         <img class="m-3" src="
     
         https://konceptosociala.eu.org/socio/img/socio_favicon_variant.svg
@@ -351,55 +354,69 @@ <h1 id="tehnologije">Tehnologije</h1>
         <img class="img-fluid rounded-circle" src="https:&#x2F;&#x2F;dummyimage.com&#x2F;512x512&#x2F;fff&#x2F;333.gif" width=512>
         <h1 class="card-title text-center mt-3">Title</h1>
         <p class="card-text mx-4 mt-2 ">Lorem ipsum dolor sit amet consecteur</p>
+
         <p class="text-center"><a href="#" class="btn btn-primary mx-4 mb-5">Opširnije</a></p>
+
     </div>
 </div>
     <div class="card rounded-pill text-bg-dark mx-auto mb-4" style="max-width: 18rem;">
     <div class="card-body">
         <img class="img-fluid rounded-circle" src="https:&#x2F;&#x2F;dummyimage.com&#x2F;512x512&#x2F;fff&#x2F;333.gif" width=512>
         <h1 class="card-title text-center mt-3">Title</h1>
         <p class="card-text mx-4 mt-2 ">Lorem ipsum dolor sit amet consecteur</p>
+
         <p class="text-center"><a href="#" class="btn btn-primary mx-4 mb-5">Opširnije</a></p>
+
     </div>
 </div>
     <div class="card rounded-pill text-bg-dark mx-auto mb-4" style="max-width: 18rem;">
     <div class="card-body">
         <img class="img-fluid rounded-circle" src="https:&#x2F;&#x2F;dummyimage.com&#x2F;512x512&#x2F;fff&#x2F;333.gif" width=512>
         <h1 class="card-title text-center mt-3">Title</h1>
         <p class="card-text mx-4 mt-2 ">Lorem ipsum dolor sit amet consecteur</p>
+
         <p class="text-center"><a href="#" class="btn btn-primary mx-4 mb-5">Opširnije</a></p>
+
     </div>
 </div>
     <div class="card rounded-pill text-bg-dark mx-auto mb-4" style="max-width: 18rem;">
     <div class="card-body">
         <img class="img-fluid rounded-circle" src="https:&#x2F;&#x2F;dummyimage.com&#x2F;512x512&#x2F;fff&#x2F;333.gif" width=512>
         <h1 class="card-title text-center mt-3">Title</h1>
         <p class="card-text mx-4 mt-2 ">Lorem ipsum dolor sit amet consecteur</p>
+
         <p class="text-center"><a href="#" class="btn btn-primary mx-4 mb-5">Opširnije</a></p>
+
     </div>
 </div>
     <div class="card rounded-pill text-bg-dark mx-auto mb-4" style="max-width: 18rem;">
     <div class="card-body">
         <img class="img-fluid rounded-circle" src="https:&#x2F;&#x2F;dummyimage.com&#x2F;512x512&#x2F;fff&#x2F;333.gif" width=512>
         <h1 class="card-title text-center mt-3">Title</h1>
         <p class="card-text mx-4 mt-2 ">Lorem ipsum dolor sit amet consecteur</p>
+
         <p class="text-center"><a href="#" class="btn btn-primary mx-4 mb-5">Opširnije</a></p>
+
     </div>
 </div>
     <div class="card rounded-pill text-bg-dark mx-auto mb-4" style="max-width: 18rem;">
     <div class="card-body">
         <img class="img-fluid rounded-circle" src="https:&#x2F;&#x2F;dummyimage.com&#x2F;512x512&#x2F;fff&#x2F;333.gif" width=512>
         <h1 class="card-title text-center mt-3">Title</h1>
         <p class="card-text mx-4 mt-2 ">Lorem ipsum dolor sit amet consecteur</p>
+
         <p class="text-center"><a href="#" class="btn btn-primary mx-4 mb-5">Opširnije</a></p>
+
     </div>
 </div>
     <div class="card rounded-pill text-bg-dark mx-auto mb-4" style="max-width: 18rem;">
     <div class="card-body">
         <img class="img-fluid rounded-circle" src="https:&#x2F;&#x2F;dummyimage.com&#x2F;512x512&#x2F;fff&#x2F;333.gif" width=512>
         <h1 class="card-title text-center mt-3">Title</h1>
         <p class="card-text mx-4 mt-2 ">Lorem ipsum dolor sit amet consecteur</p>
+
         <p class="text-center"><a href="#" class="btn btn-primary mx-4 mb-5">Opširnije</a></p>
+
     </div>
 </div>
 </div>

diff --git a/docs/sr/info/index.html b/docs/sr/info/index.html
@@ -56,6 +56,9 @@
         https://konceptosociala.eu.org/socio/img/socio_favicon.svg
     
 " type="image/x-icon">
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
+
     <title>Informacije | Socio Theme Demo
 </title>
 </head>

diff --git a/docs/theme.css b/docs/theme.css
diff --git a/docs/ua/blog/index.html b/docs/ua/blog/index.html
@@ -56,6 +56,9 @@
         https://konceptosociala.eu.org/socio/img/socio_favicon.svg
     
 " type="image/x-icon">
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
+
     <title>Блог | Socio Theme Demo
 </title>
 </head>