Website: Made screenshots expandable and added GitHub to nav

bjorn · Oct 26, 2023 · 495b965 · 495b965
1 parent 74ee932
commit 495b965
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 8 deletions.
diff --git a/_includes/header.html b/_includes/header.html
@@ -23,6 +23,7 @@
               <a class="page-link" href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a>
               {%- endif -%}
             {%- endfor -%}
+            <a class="page-link" href="https://github.com/bjorn/raccoin"><svg class="svg-icon"><use xlink:href="{{ '/assets/minima-social-icons.svg#github' | relative_url }}"></use></svg> GitHub</a>
           </div>
         </nav>
       {%- endif -%}

diff --git a/assets/main.scss b/assets/main.scss
@@ -47,7 +47,43 @@ h1, h1.post-title {
         width: 22%;
         border-radius: 5px;
         margin: 1%;
+        transition: transform .1s ease-out, border-color .1s ease-out;
+        border: 2px solid $grey-color-light;
+        cursor: pointer;
     }
+
+    .thumbnail:hover {
+        transform: scale(1.05);
+        border: 2px solid $grey-color;
+    }
+}
+
+#fullpage {
+    display: none;
+    position: absolute;
+    z-index: 9999;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    background-color: rgba(92,92,92,0.5);
+}
+
+#fullpage-image {
+    display: block;
+    border-radius: 10px;
+    border: 2px solid $grey-color;
+}
+
+#fullpage-caption {
+    background-color: $grey-color-light;
+    border: 2px solid $grey-color;
+    border-radius: 10px;
+    padding: 8px 16px;
+    margin-top: 10px;
 }
 
 .post-content {
@@ -72,11 +108,16 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 .trigger {
+    .svg-icon {
+        fill: $text-color;
+    }
+
     .page-link {
         background-color: $grey-color-light;
         padding: 10px 20px;
         border-radius: 5px;
         line-height: 1;
+        transition: background-color .1s ease-out, border-color .1s ease-out;
     }
     .page-link:hover {
         background-color: $grey-color;

diff --git a/getting-started.md b/getting-started.md
@@ -6,7 +6,7 @@ permalink: /getting-started/
 
 ## Create a Portfolio
 
-When launching Raccoin, we are created with the welcome screen.
+When launching Raccoin, we are greeted with the welcome screen.
 
 ![Raccoin Welcome](/screenshots/raccoin-welcome.png)
 

diff --git a/index.md b/index.md
@@ -10,12 +10,33 @@ list_title: Blog
 
 Raccoin makes it easy to see the current state and the history of your crypto
 portfolio and to generate relevant reports for declaring capital gain income
-tax. It currently works in EUR using the FIFO method, but since it is open
-source anyone can extend it to suit their needs.
+tax. It currently works in EUR using the FIFO method, but since it is [open
+source](https://github.com/bjorn/raccoin) anyone can extend it to suit their
+needs.
 
 <div class="thumbnails">
-<img class="thumbnail" src="/screenshots/raccoin-welcome.png" alt="Raccoin Welcome">
-<img class="thumbnail" src="/screenshots/raccoin-wallets.png" alt="Wallets Page">
-<img class="thumbnail" src="/screenshots/raccoin-transactions.png" alt="Transactions Page">
-<img class="thumbnail" src="/screenshots/raccoin-reports.png" alt="Reports Page">
-</div>
+<img class="thumbnail" src="/screenshots/raccoin-welcome.png" alt="Welcome screen">
+<img class="thumbnail" src="/screenshots/raccoin-wallets.png" alt="The wallets page shows the transaction sources">
+<img class="thumbnail" src="/screenshots/raccoin-transactions.png" alt="The transactions page provides a detailed view of events">
+<img class="thumbnail" src="/screenshots/raccoin-reports.png" alt="Reports can be exported as CSV files">
+</div>
+
+<div id="fullpage" onclick="this.style.display='none';">
+    <img id="fullpage-image">
+    <div id="fullpage-caption"></div>
+</div>
+
+<script>
+const thumbnails = document.querySelectorAll('.thumbnail');
+const fullPage = document.querySelector('#fullpage');
+const fullPageImg = document.querySelector('#fullpage-image');
+const fullPageCaption = document.querySelector('#fullpage-caption');
+
+thumbnails.forEach(thumbnail => {
+  thumbnail.addEventListener('click', function() {
+    fullPageImg.src = thumbnail.src;
+    fullPageCaption.innerHTML = thumbnail.alt;
+    fullPage.style.display = 'flex';
+  });
+});
+</script>