Added slideshow for blog

1 files changed, 91 insertions, 37 deletions

diff --git a/assets/css/main.css b/assets/css/main.css
index 22772dc..e118162 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -500,13 +500,16 @@ body {
     }
     #blogitem {
     }
-    #blogitem div {
+    #blogitem .content {
         margin: 25px;
     }
-    #blogitem div ul {
+    #blogitem .content video {
+        width: 100%;
+    }
+    #blogitem .content ul {
         font-size: var(--shortdescription-font-size);
     }
-    #blogitem div ul li code {
+    #blogitem .content ul li code {
         color: white;
         background-color: rgba(34, 37, 38);
         margin: 5px;
@@ -516,10 +519,10 @@ body {
         padding-bottom: 5px;
         border-radius: var(--code-border-radius);
     }
-    #blogitem div h1 {
+    #blogitem .content h1 {
         font-size: var(--title-font-size);
     }
-    #blogitem div h1 code {
+    #blogitem .content h1 code {
         color: white;
         background-color: rgba(34, 37, 38);
         margin: 5px;
@@ -529,11 +532,11 @@ body {
         padding-bottom: 5px;
         border-radius: var(--code-border-radius);
     }
-    #blogitem div h2 {
+    #blogitem .content h2 {
         color: rgba(45, 124, 234);
         font-size: var(--body-font-size);
     }
-    #blogitem div h2 code {
+    #blogitem .content h2 code {
         color: white;
         background-color: rgba(34, 37, 38);
         margin: 5px;
@@ -543,10 +546,10 @@ body {
         padding-bottom: 5px;
         border-radius: var(--code-border-radius);
     }
-    #blogitem div h3 {
+    #blogitem .content h3 {
         font-size: calc(var(--body-font-size) - 0.25rem);
     }
-    #blogitem div h3 code {
+    #blogitem .content h3 code {
         color: white;
         background-color: rgba(34, 37, 38);
         margin: 5px;
@@ -556,20 +559,20 @@ body {
         padding-bottom: 5px;
         border-radius: var(--code-border-radius);
     }
-    #blogitem div p {
+    #blogitem .content p {
         font-size: var(--shortdescription-font-size);
     }
-    #blogitem div p img {
+    #blogitem .content p img {
         max-width: 100%;
     }
-    #blogitem div figure img {
+    #blogitem .content figure img {
         max-width: 100%;
     }
-    #blogitem div h4 {
+    #blogitem .content h4 {
         color: rgba(229, 181, 103);
         font-size: calc(var(--body-font-size) - 0.5rem);
     }
-    #blogitem div h4 code {
+    #blogitem .content h4 code {
         color: white;
         background-color: rgba(34, 37, 38);
         margin: 5px;
@@ -579,11 +582,11 @@ body {
         padding-bottom: 5px;
         border-radius: var(--code-border-radius);
     }
-    #blogitem div h5 {
+    #blogitem .content h5 {
         color: rgba(227, 62, 62);
         font-size: calc(var(--body-font-size) - 0.75rem);
     }
-    #blogitem div h5 code {
+    #blogitem .content h5 code {
         color: white;
         background-color: rgba(34, 37, 38);
         margin: 5px;
@@ -593,7 +596,7 @@ body {
         padding-bottom: 5px;
         border-radius: var(--code-border-radius);
     }
-    #blogitem div p code {
+    #blogitem .content p code {
         font-size: var(--shortdescription-font-size);
         color: white;
         background-color: rgba(34, 37, 38);
@@ -604,10 +607,14 @@ body {
         padding-bottom: 5px;
         border-radius: var(--code-border-radius);
     }
-    #blogitem div .code-toolbar pre {
+    #blogitem .content .code-toolbar pre {
         border-radius: 5px 5px 5px;
         background-color: rgba(34, 37, 38);
     }
+
+    #blogitem .fullscreenImg {
+        display: none;
+    }
 }
 
 /* Desktop */
@@ -937,16 +944,61 @@ body {
     /* Blog Item */
     :root {
         --code-border-radius: 5px 5px 5px;
+        --full-screen-button-width: 40px;
+        --full-screen-button-height: var(--full-screen-button-width);
+        --full-screen-image-width: 80%;
+        --full-screen-image-height: auto;
+        --full-screen-image-radius: 10px 10px 10px;
+    }
+    
+    #blogitem .fullscreenImg {
+        display: flex;
+        justify-content: center;
+        position: fixed;
+        width: var(--full-screen-image-width);
+        height: var(--full-screen-image-height);
+        top: calc((100% - var(--full-screen-image-height)) / 2);
+        left: calc((100% - var(--full-screen-image-width)) / 2);
+        background-color: var(--bg-color);
+        border-radius: var(--full-screen-image-radius);
+        transition: opacity 1s;
     }
-    #blogitem div {
+    #blogitem .fullscreenImg img {
+        width: 90%;
+    }
+    #blogitem .fullscreenImg div {
+        position: absolute;
+        width: var(--full-screen-button-width);
+        height: var(--full-screen-button-height);
+        background-color: var(--main-color);
+        font-size: 2rem;
+        font-weight: bold;
+        cursor: pointer;
+        text-align: center;
+    }
+    #blogitem .fullscreenImg .closeFullscreenImage {
+        right: 0;
+        top: 0;
+        text-align: center;
+    }
+    #blogitem .fullscreenImg .navleft {
+        top: 50%;
+        left: 0;
+    }
+    #blogitem .fullscreenImg .navright {
+        top: 50%;
+        right: 0;
+    }
+
+    #blogitem .content {
         width: 1000px;
         margin-left: auto;
         margin-right: auto;
     }
-    #blogitem div h1 {
+    #blogitem .content h1 {
         font-size: var(--title-font-size);
     }
-    #blogitem div h1 code {
+    #blogitem .content h1 code {
         color: white;
         background-color: rgba(34, 37, 38);
         margin: 5px;
@@ -956,11 +1008,11 @@ body {
         padding-bottom: 5px;
         border-radius: var(--code-border-radius);
     }
-    #blogitem div h2 {
+    #blogitem .content h2 {
         color: rgba(45, 124, 234);
         font-size: var(--body-font-size);
     }
-    #blogitem div h2 code {
+    #blogitem .content h2 code {
         color: white;
         background-color: rgba(34, 37, 38);
         margin: 5px;
@@ -970,10 +1022,10 @@ body {
         padding-bottom: 5px;
         border-radius: var(--code-border-radius);
     }
-    #blogitem div h3 {
+    #blogitem .content h3 {
         font-size: calc(var(--body-font-size) - 0.25rem);
     }
-    #blogitem div h3 code {
+    #blogitem .content h3 code {
         color: white;
         background-color: rgba(34, 37, 38);
         margin: 5px;
@@ -983,20 +1035,22 @@ body {
         padding-bottom: 5px;
         border-radius: var(--code-border-radius);
     }
-    #blogitem div p {
+    #blogitem .content p {
         font-size: var(--shortdescription-font-size);
     }
-    #blogitem div p img {
+    #blogitem .content p img {
         max-width: 100%;
+        cursor: pointer;
     }
-    #blogitem div figure img {
+    #blogitem .content figure img {
         max-width: 100%;
+        cursor: pointer;
     }
-    #blogitem div h4 {
+    #blogitem .content h4 {
         color: rgba(229, 181, 103);
         font-size: calc(var(--body-font-size) - 0.5rem);
     }
-    #blogitem div h4 code {
+    #blogitem .content h4 code {
         color: white;
         background-color: rgba(34, 37, 38);
         margin: 5px;
@@ -1006,11 +1060,11 @@ body {
         padding-bottom: 5px;
         border-radius: var(--code-border-radius);
     }
-    #blogitem div h5 {
+    #blogitem .content h5 {
         color: rgba(227, 62, 62);
         font-size: calc(var(--body-font-size) - 0.75rem);
     }
-    #blogitem div h5 code {
+    #blogitem .content h5 code {
         color: white;
         background-color: rgba(34, 37, 38);
         margin: 5px;
@@ -1020,10 +1074,10 @@ body {
         padding-bottom: 5px;
         border-radius: var(--code-border-radius);
     }
-    #blogitem div ul {
+    #blogitem .content ul {
         font-size: var(--shortdescription-font-size);
     }
-    #blogitem div ul li code {
+    #blogitem .content ul li code {
         font-size: var(--shortdescription-font-size);
         color: white;
         background-color: rgba(34, 37, 38);
@@ -1034,7 +1088,7 @@ body {
         padding-bottom: 5px;
         border-radius: var(--code-border-radius);
     }
-    #blogitem div p code {
+    #blogitem .content p code {
         font-size: var(--shortdescription-font-size);
         color: white;
         background-color: rgba(34, 37, 38);
@@ -1045,11 +1099,11 @@ body {
         padding-bottom: 5px;
         border-radius: var(--code-border-radius);
     }
-    #blogitem div .code-toolbar pre {
+    #blogitem .content .code-toolbar pre {
         border-radius: 5px 5px 5px;
         background-color: rgba(34, 37, 38);
     }
-    #blogitem div .code-toolbar .toolbar .toolbar-item {
+    #blogitem .content .code-toolbar .toolbar .toolbar-item {
         text-align: right;
     }
 }