devol/LinkStack
1
0
Fork 0
mirror of https://github.com/LinkStackOrg/LinkStack.git synced 2025-04-28 00:48:54 +02:00
Code Issues Packages Projects Releases Wiki Activity

Optimized home page logo

Browse Source 
Optimized home page logo for mobile devices and scalable resolutions. Replaced "ll" SVG with custom font for better centering.
This commit is contained in:
Julian Prieber 2022-05-14 16:03:33 +02:00
parent 4de0761e7c
commit 4243f99283
3 changed files with 20 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
littlelink/css/animate.css vendored
View File

@ -60,25 +60,20 @@
} }
} }
.parent { .logo-container {
margin: auto;
padding-top: 50px;
position: relative; position: relative;
left: 34px; text-align: center;
} color: white;
.image1 {
position: relative;
width: 150px !important;
min-width:150px;
} }
.image2 { .logo-centered {
position: relative; position: absolute;
bottom: 38px; top: 50%;
right: 107px; left: 50%;
width: 55px !important; font-family: ll;
min-width: 55px; font-size: 78px;
height: auto; font-weight: 100;
transform: translate(-50%, -50%);
} }
.parent-footer { .parent-footer {

BIN
littlelink/fonts/littlelink-custom.otf Normal file
View File

Binary file not shown.

11
resources/views/home.blade.php
View File

@ -17,6 +17,9 @@
<link rel="icon" type="image/svg+xml" href="{{ asset('littlelink/images/logo.svg') }}"> <link rel="icon" type="image/svg+xml" href="{{ asset('littlelink/images/logo.svg') }}">
@endif @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 <?php // override dark/light mode if override cookie is set
$color_scheme_override = isset($_COOKIE["color_scheme_override"]) ? $_COOKIE["color_scheme_override"] : false; ?> $color_scheme_override = isset($_COOKIE["color_scheme_override"]) ? $_COOKIE["color_scheme_override"] : false; ?>
@if ($color_scheme_override == 'dark') @if ($color_scheme_override == 'dark')
@ -54,14 +57,14 @@ foreach($pages as $page)
@endauth @endauth
@endif @endif
</div> </div>
<div class="column" style="margin-top: 10%"> <div class="column" style="margin-top: 15%">
<!-- Your Image Here --> <!-- Your Image Here -->
@if(file_exists(base_path("littlelink/images/avatar.png" ))) @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"> <img alt="avatar" src="{{ asset('littlelink/images/avatar.png') }}" srcset="{{ asset('littlelink/images/avatar@2x.png 2x') }}" width="128px" height="128px">
@else @else
<div class="parent fadein" > <div class="logo-container fadein">
<img alt="logo" class="image1 rotate" src="{{ asset('littlelink/images/just-gear.svg') }}" alt="Logo"></img> <img class="rotate" src="{{ asset('littlelink/images/just-gear.svg') }}" alt="Logo" style="width:150px; height:150px;">
<img alt="logo" class="image2" src="{{ asset('littlelink/images/just-ll.svg') }}" alt="Logo"></img> <div class="logo-centered">l</div>
</div> </div>
@endif @endif