Add new logo to the site

_config.yml

@@ -1,4 +1,4 @@
-title: Httplug
+title: HTTPlug
 email: team@httplug.io
 description: Httplug, the HTTP client abstraction for PHP.
 baseurl: ""

_includes/favicon.html

@@ -0,0 +1,21 @@
+<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
+<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
+<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
+<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
+<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
+<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
+<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
+<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
+<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
+<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
+<link rel="icon" type="image/png" href="/favicon-194x194.png" sizes="194x194">
+<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
+<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
+<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
+<link rel="manifest" href="/manifest.json">
+<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#00345c">
+<meta name="apple-mobile-web-app-title" content="HTTPlug">
+<meta name="application-name" content="HTTPlug">
+<meta name="msapplication-TileColor" content="#00345c">
+<meta name="msapplication-TileImage" content="/mstile-144x144.png">
+<meta name="theme-color" content="#00345c">

_includes/head.html

@@ -9,4 +9,6 @@
     <link rel="stylesheet" href="{{ '/assets/css/main.css' | prepend: site.baseurl }}">
     <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
     <link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}">
+
+    {% include favicon.html %}
 </head>

_includes/header.html

@@ -1,7 +1,9 @@
 <header role="banner">
-    <nav class="navbar navbar-fixed-top navbar-dark bg-primary" role="navigation">
+    <nav class="navbar navbar-fixed-top navbar-light bg-faded" role="navigation">
         <div class="container">
-            <a class="navbar-brand" href="/">{{ site.title }}</a>
+            <a class="navbar-brand" href="/">
+                <img src="{{ '/assets/img/logo.png' | prepend: site.baseurl }}" alt="{{ site.title }}">
+            </a>
             <ul class="nav navbar-nav pull-right">
                 {% for item in site.data.navigation %}
                     <li class="nav-item{% if page.url == item.url %} active{% endif %}">

assets/_sass/_style.scss

@@ -7,6 +7,18 @@ body {
     padding-top: $header-height;
 }
 
+header[role="banner"] {
+    nav[role="navigation"] {
+        .navbar-brand > img {
+            height: $header-height - $navbar-padding-horizontal;
+        }
+
+        .nav-item {
+            color: $brand-primary;
+        }
+    }
+}
+
 footer[role="contentinfo"] {
     border-top: 1px solid #E5E5E5;
     color: $gray-light;
@@ -41,18 +53,9 @@ footer[role="contentinfo"] {
     text-align: center;
     color: #FFFFFF;
 
-    .templogo {
-        background-color: transparent;
-        border: 1px solid lighten($brand-info, 40%);
-        margin: 0 auto 30px;
-        width: 144px;
-        height: 144px;
-        font-size: 108px;
-        line-height: 140px;
-        display: block;
-        font-weight: 500;
-        cursor: default;
-        border-radius: 15%;
+    .silhouette {
+        width: 250px;
+        margin-bottom: 30px;
     }
 }
 

assets/_sass/_variables.scss

@@ -11,5 +11,10 @@ $brand-success: #84c341;
 $brand-warning: #fbbd12;
 $brand-danger: #f05223;
 
-$header-height: 54px;
-$footer-height: 200px;
+//$header-height: 54px;
+$header-height: 3.375rem;
+//$footer-height: 200px;
+$footer-height: 12.5rem;
+
+$navbar-light-color:                $brand-primary;
+$navbar-light-hover-color:          $brand-info;

browserconfig.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+  <msapplication>
+    <tile>
+      <square70x70logo src="/mstile-70x70.png"/>
+      <square150x150logo src="/mstile-150x150.png"/>
+      <square310x310logo src="/mstile-310x310.png"/>
+      <wide310x150logo src="/mstile-310x150.png"/>
+      <TileColor>#00345c</TileColor>
+    </tile>
+  </msapplication>
+</browserconfig>

index.html

@@ -3,7 +3,8 @@
 ---
 <div class="masthead">
     <div class="container">
-        <span class="templogo">H</span>
+        <!--<span class="templogo">H</span>-->
+        <img class="silhouette" src="{{ '/assets/img/plugefant_silhouette.png' | prepend: site.baseurl }}" alt="{{ site.title }}">
         <p class="lead">The HTTP client abstraction for PHP.</p>
     </div>
 </div>

manifest.json

@@ -0,0 +1,41 @@
+{
+	"name": "HTTPlug",
+	"icons": [
+		{
+			"src": "\/android-chrome-36x36.png",
+			"sizes": "36x36",
+			"type": "image\/png",
+			"density": "0.75"
+		},
+		{
+			"src": "\/android-chrome-48x48.png",
+			"sizes": "48x48",
+			"type": "image\/png",
+			"density": "1.0"
+		},
+		{
+			"src": "\/android-chrome-72x72.png",
+			"sizes": "72x72",
+			"type": "image\/png",
+			"density": "1.5"
+		},
+		{
+			"src": "\/android-chrome-96x96.png",
+			"sizes": "96x96",
+			"type": "image\/png",
+			"density": "2.0"
+		},
+		{
+			"src": "\/android-chrome-144x144.png",
+			"sizes": "144x144",
+			"type": "image\/png",
+			"density": "3.0"
+		},
+		{
+			"src": "\/android-chrome-192x192.png",
+			"sizes": "192x192",
+			"type": "image\/png",
+			"density": "4.0"
+		}
+	]
+}