Add hero full page implementation, implement own color set, misc. changes (#1)

* Add hero full page implementation, implement own color set, misc. changes

* Cleanup scss, fix coloring of navbar in different scenarios

* Update submodule

site/config.toml

@@ -9,7 +9,7 @@ paginate = 10
 
 [params]
   GithubURL = "https://github.com/yuzu-emu/yuzu"
-  ProjectName = "yuzu emulator project"
+  ProjectName = "yuzu Emulator Project"
 
 [Languages]
   [Languages.en]

site/content/entry/test-post-please-ignore-2.md

@@ -0,0 +1,18 @@
++++
+date = "2016-02-22T22:18:00-05:00"
+title = "Placeholder"
+author = "flamesage"
+forum = 8
++++
+
+This is just a placeholder blog post.
+
+New line.
+
+Test line.
+
+Test *italics*.
+
+Test **bold**.
+
+Test [link](//google.com).

site/content/entry/test-post-please-ignore.md

@@ -0,0 +1,18 @@
++++
+date = "2016-02-22T22:18:00-05:00"
+title = "Placeholder"
+author = "flamesage"
+forum = 8
++++
+
+This is just a placeholder blog post.
+
+New line.
+
+Test line.
+
+Test *italics*.
+
+Test **bold**.
+
+Test [link](//google.com).

site/layouts/partials/header_homepage.html

@@ -1,24 +1,35 @@
-<section id="homepage-hero" class="hero container is-primary">
-    <div class="hero-body">
-        <div class="columns">
-            <!-- Left panel -->
-            <div class="column is-5">
-                <h1 class="title">{{ .Site.Title }}</h1>
-                <h2 class="subtitle">{{ .Site.Params.Tagline }}</h2>
-                <a class="button is-medium is-inverted" href="{{ .Site.Params.GithubURL }}">
-                    <span class="icon">
-                        <i class="fab fa-github"></i>
-                    </span>
-                    <span>Source Code</span>
-                </a>
-            </div>
+<section id="homepage-hero" class="hero is-medium is-info is-bold">
+    <div class="hero-head">
+        <nav class="navbar is-fixed-top" id="hero-navbar">
+            {{ partial "nav_contents" . }}
+        </nav>
+    </div>
 
-            <!-- Right panel -->
-            <div class="column is-7">
-                <figure class="image is-16by9">
-                    <img src="{{ .Site.BaseURL}}/images/jumbotron.png" />
-                </figure>
+    <div class="hero-body">
+        <div class="container">
+            <div class="columns">
+                <!-- Left panel -->
+                <div class="column is-5">
+                    <div class="middle">
+                        <div>
+                            <h2 class="title">{{ .Site.Params.Tagline }}</h2>
+                            <a class="button is-medium is-light" href="{{ .Site.Params.GithubURL }}">
+                                <span class="icon">
+                                    <i class="fab fa-github"></i>
+                                </span>
+                                <span>Source Code</span>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Right panel -->
+                <div class="column is-7">
+                    <figure class="image is-16by9">
+                        <img src="{{ .Site.BaseURL}}/images/jumbotron.png" />
+                    </figure>
+                </div>
             </div>
         </div>
     </div>
-</section>
+</section>

site/layouts/partials/nav_contents.html

@@ -0,0 +1,41 @@
+<div class="container">
+    <div class="navbar-brand">
+        <a class="navbar-item" href="{{ .Site.BaseURL }}">
+            <img src="{{ .Site.BaseURL }}/images/menu.png" alt="{{ .Site.Title }} {{ .Site.Params.Tagline }}">
+        </a>
+    </div>
+    <div class="navbar-menu">
+        <div class="navbar-end">
+            <!-- TODO: Navbar goes here -->
+            <a class="navbar-item{{- if .IsHome }} is-active{{- end }}">
+                Home
+            </a>
+            <a class="navbar-item">
+                FAQ
+            </a>
+            <a class="navbar-item">
+                Wiki
+            </a>
+            <div class="navbar-item has-dropdown is-hoverable">
+                <a class="navbar-item">
+                    Social
+
+                    <span class="icon">
+                        <i class="fas fa-caret-down"></i>
+                    </span>
+                </a>
+                <div class="navbar-dropdown">
+                    <a class="navbar-item">
+                        Discord
+                    </a>
+                    <a class="navbar-item">
+                        IRC
+                    </a>
+                </div>
+            </div>
+            <a href="https://github.com/yuzu-emu/yuzu" class="navbar-item">
+                GitHub
+            </a>
+        </div>
+    </div>
+</div>

site/layouts/partials/sidebar.html

@@ -1,2 +1,4 @@
-<h4 class="is-size-4">Twitter Feed</h4>
-<p>No tweets yet, check back soon!</p>
+<div class="box">
+    <h4 class="is-size-4">Twitter Feed</h4>
+    <p>No tweets yet, check back soon!</p>
+</div>

site/themes/shared-bulma-theme

@@ -1 +1 @@
-Subproject commit d4433a4244538e0a72c3c359e7d2db7bed564274
+Subproject commit b0192b2ec2a9cbdd5480936f034b41888fe23956

src/js/hero.js

@@ -0,0 +1,11 @@
+let navbar = document.getElementById("hero-navbar");
+
+if (navbar) {
+    window.addEventListener('scroll', function (e) {
+        if (window.scrollY > 0) {
+            navbar.classList.add("is-freestanding");
+        } else {
+            navbar.classList.remove("is-freestanding");
+        }
+    });
+}

src/scss/shared.scss

@@ -1,7 +1,44 @@
-$navbar-height: 64px;
-$body-background-color: #e5e5e5;
-$footer-background-color: $body-background-color;
+// Override/configure the default color palette
+$info: $primary-color;
 
-#homepage-hero {
-    background-image: url(../images/rays.svg);
-}
+$navbar-height: 64px;
+$body-background-color: darken(white, 10%);
+
+// Allows for larger icons with less padding
+$navbar-item-img-max-height: 2.75rem;
+
+// Used to smoothly change background colors
+#hero-navbar {
+    transition: background-color 0.2s ease;
+}
+
+// Used to distinguish the hero navbar when the page has been scrolled
+.is-freestanding {
+    background: $info !important;
+}
+
+// Used as helper
+.middle {
+    align-items: center;
+    vertical-align: middle;
+    height: 100%;
+    display: flex !important;
+    justify-content: center;
+}
+
+// https://github.com/jgthms/bulma/issues/935
+.navbar-dropdown {
+    a.navbar-item {
+        color: #4a4a4a !important;
+    }
+
+    a.navbar-item:hover {
+        background-color: #f5f5f5 !important;
+        color: #0a0a0a !important;
+    }
+}
+
+// Works around incorrect coloring on navbar dropdown, related to above
+.is-info div {
+  color: inherit !important;
+}

src/scss/style.scss

@@ -1,3 +1,3 @@
-@import "./shared.scss";
 @import "./yuzu.scss";
+@import "./shared.scss";
 @import "./node_modules/bulma/bulma.sass";

src/scss/yuzu.scss

@@ -1,2 +1,5 @@
-$primary: #696969;
-$navbar-item-hover-color: purple;
+$dark-primary-color: #102027;
+$light-primary-color: #62727b;
+$primary-color: #37474f;
+
+//$primary: #696969;