yuzu/yuzu-emu.github.io
1
0
Fork 0
mirror of https://github.com/yuzu-emu/yuzu-emu.github.io.git synced 2025-07-23 20:39:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse source
This commit is contained in:
James 2018-01-05 20:23:16 +11:00
parent 723b51a6f2
commit c89934a45b
11 changed files with 172 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
site/config.toml
View file

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

0
site/content/temp.txt → site/content/.gitkeep
View file

18
site/content/entry/test-post-please-ignore-2.md Normal file
View file

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

18
site/content/entry/test-post-please-ignore.md Normal file
View file

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

51
site/layouts/partials/header_homepage.html
View file

@ -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 is-fullheight">
<div class="hero-head">
<nav class="navbar is-fixed-top">
{{ 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>

41
site/layouts/partials/nav_contents.html Normal file
View file

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

6
site/layouts/partials/sidebar.html
View file

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

BIN
site/static/images/menu.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.6 KiB

After

Width:  |  Height:  |  Size: 10 KiB

59
src/scss/shared.scss
View file

@ -1,7 +1,54 @@
$navbar-height: 64px;
$body-background-color: #e5e5e5;
$footer-background-color: $body-background-color;
// Override/configure the default color palette
$white: white;
$black: black;
$info: $primary-color;
$link: $dark-primary-color;
$danger: $accent-color;
#homepage-hero {
background-image: url(../images/rays.svg);
}
$navbar-height: 64px;
$body-background-color: darken($white, 10%);
$footer-background-color: $white;
$content-background-color: $white;
$navbar-background-color: $dark-primary-color;
$navbar-item-color: $content-background-color;
$navbar-item-hover-color: $navbar-item-color;
// ~10% darker then .is-info
$navbar-item-hover-background-color: lighten($navbar-background-color, 10%) !important;
$navbar-item-active-background-color: $navbar-item-hover-background-color;
$navbar-tab-hover-background-color: $navbar-item-hover-background-color;
$navbar-dropdown-item-hover-background-color: $body-background-color !important;
$navbar-dropdown-item-hover-color: $black !important;
$navbar-item-img-max-height: 2.75rem;
.navbar {
// Normally, the navbar in a .hero doesn't have a background, however,
// it is fixed and needs something. We force it here.
background: $navbar-background-color !important;
}
.navbar-dropdown .navbar-item {
// The colors need to be inverted from the normal navbar colors
color: $navbar-dropdown-item-hover-color;
}
.navbar-item.has-dropdown {
// Navbar dropdowns normally get a different color. Force it, as we use icons instead.
color: $navbar-item-color !important;
}
.middle {
align-items: center;
vertical-align: middle;
height: 100%;
display: flex !important;
justify-content: center;
}
.content {
background: $content-background-color;
}

2
src/scss/style.scss
View file

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

6
src/scss/yuzu.scss
View file

@ -1,2 +1,6 @@
$dark-primary-color: #1976d2;
$light-primary-color: #bbdefb;
$primary-color: #2196f3;
$accent-color: #ff4081;
$primary: #696969;
$navbar-item-hover-color: purple;