Skip to content
GitLab
Commit 5b788001 authored by Michael Iseard's avatar Michael Iseard
Browse files

Update logo to include new animation

parent 2ab27e6a
Show whitespace changes
Inline Side-by-side
app/Controllers/App.php
View file @ 5b788001
......@@ -32,7 +32,7 @@ class App extends Controller {
public function navbar() {
return [
'class' => 'navbar-dark',
'logoStyle' => get_logo('white'),
'logoStyle' => get_logo('white', true),
'logoSize' => '30px',
'btnClass' => 'btn-outline-light'
];
......
app/Controllers/FrontPage.php
View file @ 5b788001
......@@ -29,7 +29,7 @@ class FrontPage extends Controller {
public function navbar() {
return [
'class' => 'navbar-light',
'logoStyle' => get_logo('color'),
'logoStyle' => get_logo('color', true),
'logoSize' => '40px',
'btnClass' => 'btn-outline-secondary'
];
......
app/helpers.php
View file @ 5b788001
......@@ -168,17 +168,25 @@ function filter_handlebar( $string ) {
* Gets the logo path for the style specified
*
* @param $style
* @param $content
*
* @return false|string
*/
function get_logo( $style ) {
function get_logo( $style, $content=false ) {
switch ( $style ) {
case 'color':
return asset_path( 'images/logo-color.svg' );
$path = asset_path( 'images/logo-color.svg' );
break;
case 'full':
return asset_path( 'images/logo-light-full.svg' );
$path = asset_path( 'images/logo-light-full.svg' );
break;
case 'white':
return asset_path( 'images/logo-white.svg' );
$path = asset_path( 'images/logo-white.svg' );
break;
}
if(isset($path)) {
return $content ? file_get_contents($path) : $path;
}
return false;
......
resources/assets/images/logo-black.svg
View file @ 5b788001
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 555 449" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(1,0,0,1,-555.044,-949.822)">
<g transform="matrix(1,0,0,1,65.846,-80.2309)">
<g transform="matrix(0.493087,0,0,0.493087,348.386,386.091)">
<g transform="matrix(1.83443,0,0,1.12707,-264.155,-165.956)">
<rect x="299.673" y="1305.98" width="144.226" height="806.766"/>
</g>
<g transform="matrix(6.15451e-17,0.985509,-0.985509,6.15451e-17,2725.15,672.414)">
<path d="M1104.21,1467.33C1201.33,1305.98 1395.58,1305.98 1492.7,1386.66C1589.82,1467.33 1589.82,1628.69 1492.7,1790.04C1424.71,1911.06 1249.89,2032.07 1104.21,2112.75C958.528,2032.07 783.71,1911.06 715.724,1790.04C618.602,1628.69 618.602,1467.33 715.724,1386.66C812.846,1305.98 1007.09,1305.98 1104.21,1467.33Z"/>
</g>
</g>
</g>
</g>
<svg class="kd-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 555 449">
<path class="kd-logo-line" fill="#000" d="M0-.003h130.458v448.355H.001z"/>
<path class="kd-logo-heart" fill="#000" d="M489.887 224.178c78.407 47.195 78.407 141.59 39.201 188.784-39.2 47.194-117.612 47.194-196.019 0-58.809-33.04-117.612-117.992-156.818-188.784 39.206-70.793 98.01-155.744 156.818-188.781 78.407-47.196 156.818-47.196 196.02 0 39.205 47.195 39.205 141.587-39.202 188.781z"/>
</svg>
resources/assets/images/logo-color.svg
View file @ 5b788001
<svg xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd" viewBox="0 0 555 449">
<defs/>
<path fill="#2ec4b6" d="M0-.003h130.458v448.355H.001z"/>
<path fill="#ff9f1c" d="M489.887 224.178c78.407 47.195 78.407 141.59 39.201 188.784-39.2 47.194-117.612 47.194-196.019 0-58.809-33.04-117.612-117.992-156.818-188.784 39.206-70.793 98.01-155.744 156.818-188.781 78.407-47.196 156.818-47.196 196.02 0 39.205 47.195 39.205 141.587-39.202 188.781z"/>
<svg class="kd-logo"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 555 449">
<path class="kd-logo-line" fill="#2ec4b6" d="M0-.003h130.458v448.355H.001z"/>
<path class="kd-logo-heart" fill="#ff9f1c"
d="M489.887 224.178c78.407 47.195 78.407 141.59 39.201 188.784-39.2 47.194-117.612 47.194-196.019 0-58.809-33.04-117.612-117.992-156.818-188.784 39.206-70.793 98.01-155.744 156.818-188.781 78.407-47.196 156.818-47.196 196.02 0 39.205 47.195 39.205 141.587-39.202 188.781z"/>
</svg>
resources/assets/images/logo-white.svg
View file @ 5b788001
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 555 449" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(1,0,0,1,-555.044,-949.822)">
<g transform="matrix(1,0,0,1,65.846,-80.2309)">
<g transform="matrix(0.493087,0,0,0.493087,348.386,386.091)">
<g transform="matrix(1.83443,0,0,1.12707,-264.155,-165.956)">
<rect x="299.673" y="1305.98" width="144.226" height="806.766" style="fill:white;"/>
</g>
<g transform="matrix(6.15451e-17,0.985509,-0.985509,6.15451e-17,2725.15,672.414)">
<path d="M1104.21,1467.33C1201.33,1305.98 1395.58,1305.98 1492.7,1386.66C1589.82,1467.33 1589.82,1628.69 1492.7,1790.04C1424.71,1911.06 1249.89,2032.07 1104.21,2112.75C958.528,2032.07 783.71,1911.06 715.724,1790.04C618.602,1628.69 618.602,1467.33 715.724,1386.66C812.846,1305.98 1007.09,1305.98 1104.21,1467.33Z" style="fill:white;"/>
</g>
</g>
</g>
</g>
<svg class="kd-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 555 449">
<path class="kd-logo-line" fill="#fff" d="M0-.003h130.458v448.355H.001z"/>
<path class="kd-logo-heart" fill="#fff" d="M489.887 224.178c78.407 47.195 78.407 141.59 39.201 188.784-39.2 47.194-117.612 47.194-196.019 0-58.809-33.04-117.612-117.992-156.818-188.784 39.206-70.793 98.01-155.744 156.818-188.781 78.407-47.196 156.818-47.196 196.02 0 39.205 47.195 39.205 141.587-39.202 188.781z"/>
</svg>
resources/assets/styles/layouts/_header.scss
View file @ 5b788001
......@@ -18,8 +18,24 @@ header.banner {
transition: transform 0.6s ease;
}
&:hover img {
.kd-logo {
transform-origin: center;
transform: rotate(0);
transition: transform 0.5s ease-in-out;
.kd-logo-heart {
transform-origin: center;
transform: rotate(0);
transition: transform 0.5s ease-in-out;
}
}
&:hover .kd-logo {
transform: rotate(-90deg);
.kd-logo-heart {
transform: rotateX(180deg);
}
}
}
}
resources/views/partials/header.blade.php
View file @ 5b788001
......@@ -11,7 +11,10 @@
<div class="container">
<nav id="nav_primary" class="navbar navbar-expand-lg nav-primary alignwide p-0 {{ $navbar['class'] }}">
<a class="navbar-brand d-flex align-items-center mr-5" href="{{ home_url('/') }}">
<img alt="Kudos Logo" width="{{ $navbar['logoSize'] }}" src="{{ $navbar['logoStyle'] }}"/>
<span style="width:{{$navbar['logoSize']}}">
{!! $navbar['logoStyle'] !!}
</span>
{{-- <img alt="Kudos Logo" width="{{ $navbar['logoSize'] }}" src="{{ $navbar['logoStyle'] }}"/>--}}
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMobileMenu" aria-controls="navbarMobileMenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment