devol
/
LinkStack
mirror of https://github.com/LinkStackOrg/LinkStack.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Optimized home page logo 

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

29
littlelink/css/animate.css vendored
View File

@ -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 {

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

Binary file not shown.

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

@ -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 -->