From 4243f99283fd89138050410e01e4bfd501a86510 Mon Sep 17 00:00:00 2001
From: Julian Prieber <60265788+JulianPrieber@users.noreply.github.com>
Date: Sat, 14 May 2022 16:03:33 +0200
Subject: [PATCH] Optimized home page logo

Optimized home page logo for mobile devices and scalable resolutions. Replaced "ll" SVG with custom font for better centering.
---
 littlelink/css/animate.css             |  29 ++++++++++---------------
 littlelink/fonts/littlelink-custom.otf | Bin 0 -> 2584 bytes
 resources/views/home.blade.php         |  13 ++++++-----
 3 files changed, 20 insertions(+), 22 deletions(-)
 create mode 100644 littlelink/fonts/littlelink-custom.otf

diff --git a/littlelink/css/animate.css b/littlelink/css/animate.css
index 4a103df..89d1d06 100644
--- a/littlelink/css/animate.css
+++ b/littlelink/css/animate.css
@@ -60,25 +60,20 @@
   }
 }
 
-.parent {
-    margin: auto;
-    padding-top: 50px;
-    position: relative;
-    left: 34px;
-}
-.image1 {
-    position: relative;
-    width: 150px !important;
-    min-width:150px;
+.logo-container {
+  position: relative;
+  text-align: center;
+  color: white;
 }
 
-.image2 {
-    position: relative;
-    bottom: 38px;
-    right: 107px;
-    width: 55px !important;
-    min-width: 55px;
-    height: auto;
+.logo-centered {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  font-family: ll;
+  font-size: 78px;
+  font-weight: 100;
+  transform: translate(-50%, -50%);
 }
 
 .parent-footer {
diff --git a/littlelink/fonts/littlelink-custom.otf b/littlelink/fonts/littlelink-custom.otf
new file mode 100644
index 0000000000000000000000000000000000000000..cfca802980f6c3366361cf7e7aec84bf4e5eb4a4
GIT binary patch
literal 2584
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

literal 0
HcmV?d00001

diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php
index c912103..2107df5 100755
--- a/resources/views/home.blade.php
+++ b/resources/views/home.blade.php
@@ -17,6 +17,9 @@
   <link rel="icon" type="image/svg+xml" href="{{ asset('littlelink/images/logo.svg') }}">
   @endif
 
+                                                        {{-- custom font for logo text --}}
+  <style>@font-face{font-family:'ll';src:url({{ asset('littlelink/fonts/littlelink-custom.otf') }}) format("opentype")}</style>
+
   <?php // override dark/light mode if override cookie is set
   $color_scheme_override = isset($_COOKIE["color_scheme_override"]) ? $_COOKIE["color_scheme_override"] : false; ?>
   @if ($color_scheme_override == 'dark')
@@ -54,15 +57,15 @@ foreach($pages as $page)
                     @endauth
               @endif
     </div>
-      <div class="column" style="margin-top: 10%">
+      <div class="column" style="margin-top: 15%">
         <!-- Your Image Here -->
         @if(file_exists(base_path("littlelink/images/avatar.png" )))
         <img alt="avatar" src="{{ asset('littlelink/images/avatar.png') }}" srcset="{{ asset('littlelink/images/avatar@2x.png 2x') }}" width="128px" height="128px">
         @else
-		<div class="parent fadein" >
-			<img alt="logo" class="image1 rotate" src="{{ asset('littlelink/images/just-gear.svg') }}" alt="Logo"></img>
-			<img alt="logo" class="image2" src="{{ asset('littlelink/images/just-ll.svg') }}" alt="Logo"></img>
-		</div>
+        <div class="logo-container fadein">
+           <img class="rotate" src="{{ asset('littlelink/images/just-gear.svg') }}" alt="Logo" style="width:150px; height:150px;">
+           <div class="logo-centered">l</div>
+        </div>
         @endif
 
         <!-- Your Name -->