From d950e064ed9e8d5a16abfb8121acd8188493cb2c Mon Sep 17 00:00:00 2001
From: Lordmau5 <mail@lordmau5.com>
Date: Sun, 10 Jun 2018 20:20:54 +0200
Subject: [PATCH] Deprecate News page, implement link to Blog, modify colors

---
 src/App.vue              |  34 ++++++++----
 src/components/Build.vue |   4 +-
 src/components/Home.vue  |  22 ++++----
 src/components/News.vue  | 110 ---------------------------------------
 src/main.js              |   7 ++-
 src/router/index.js      |   6 ---
 6 files changed, 44 insertions(+), 139 deletions(-)
 delete mode 100644 src/components/News.vue

diff --git a/src/App.vue b/src/App.vue
index 974da5f..96811f0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -17,11 +17,11 @@
 			<v-btn flat exact :to="{ name: 'Home' }">
 				<v-icon>fas fa-home</v-icon>
 			</v-btn>
-			<v-btn flat exact :to="{ name: 'News' }">
+			<v-btn flat href="https://blog.ryujinx.org/">
 				<v-icon>fas fa-newspaper</v-icon>
 			</v-btn>
 			<v-btn flat href="https://github.com/gdkchan/Ryujinx/wiki">
-				<v-icon>fas fa-lemon</v-icon>
+				<v-icon>fas fa-globe</v-icon>
 			</v-btn>
 			<v-btn flat exact :to="{ name: 'Build' }">
 				<v-icon>fas fa-database</v-icon>
@@ -34,20 +34,22 @@
 			</v-btn>
 
 			<v-btn flat color="green" href="https://github.com/gdkchan/Ryujinx"><v-icon>fab fa-github</v-icon></v-btn>
+			<v-btn flat color="red" href="https://yt.ryujinx.org/"><v-icon>fab fa-youtube</v-icon></v-btn>
 			<v-btn flat color="blue" href="https://discord.gg/VkQYXAZ"><v-icon>fab fa-discord</v-icon></v-btn>
 			<v-btn flat color="red" href="https://www.reddit.com/r/Ryujinx"><v-icon>fab fa-reddit</v-icon></v-btn>
 		</v-toolbar-items>
 		<v-toolbar-items class="hidden-md-and-down">
 			<v-btn flat exact :to="{ name: 'Home' }">Home</v-btn>
-			<v-btn flat exact :to="{ name: 'News' }">News</v-btn>
+			<v-btn flat href="https://blog.ryujinx.org/">Blog</v-btn>
 			<v-btn flat href="https://github.com/gdkchan/Ryujinx/wiki">Wiki</v-btn>
 			<v-btn flat exact :to="{ name: 'Build' }">Build</v-btn>
 			<v-btn flat exact :to="{ name: 'Contribute' }">Contribute</v-btn>
 			<v-btn flat exact :to="{ name: 'Compatibility' }">Compatibility</v-btn>
 
-			<v-btn flat color="green" href="https://github.com/gdkchan/Ryujinx"><v-icon left>fab fa-github</v-icon>GitHub</v-btn>
-			<v-btn flat color="blue" href="https://discord.gg/VkQYXAZ"><v-icon left>fab fa-discord</v-icon>Discord</v-btn>
-			<v-btn flat color="red" href="https://www.reddit.com/r/Ryujinx"><v-icon left>fab fa-reddit</v-icon>Reddit</v-btn>
+			<v-btn flat color="green" href="https://github.com/gdkchan/Ryujinx"><v-icon>fab fa-github</v-icon></v-btn>
+			<v-btn flat color="red" href="https://yt.ryujinx.org/"><v-icon>fab fa-youtube</v-icon></v-btn>
+			<v-btn flat color="blue" href="https://discord.gg/VkQYXAZ"><v-icon>fab fa-discord</v-icon></v-btn>
+			<v-btn flat color="red" href="https://www.reddit.com/r/Ryujinx"><v-icon>fab fa-reddit</v-icon></v-btn>
 		</v-toolbar-items>
 		<v-toolbar-items class="ml-0 mr-2">
 			<v-btn flat @click.stop="toggleDarkMode()">
@@ -74,17 +76,17 @@
         </v-list-tile>
 
         <!-- News -->
-        <v-list-tile exact :to="{ name: 'News' }">
+        <v-list-tile href="https://blog.ryujinx.org/">
           <v-list-tile-action>
             <v-icon>fas fa-newspaper</v-icon>
           </v-list-tile-action>
-          <v-list-tile-title>News</v-list-tile-title>
+          <v-list-tile-title>Blog</v-list-tile-title>
         </v-list-tile>
 
         <!-- Wiki -->
         <v-list-tile href="https://github.com/gdkchan/Ryujinx/wiki">
           <v-list-tile-action>
-            <v-icon>fas fa-lemon</v-icon>
+            <v-icon>fas fa-globe</v-icon>
           </v-list-tile-action>
           <v-list-tile-title>Wiki</v-list-tile-title>
         </v-list-tile>
@@ -123,6 +125,14 @@
           <v-list-tile-title>GitHub</v-list-tile-title>
         </v-list-tile>
 
+        <!-- YouTube -->
+        <v-list-tile color="red" href="https://yt.ryujinx.org/">
+          <v-list-tile-action>
+            <v-icon color="red">fab fa-youtube</v-icon>
+          </v-list-tile-action>
+          <v-list-tile-title>YouTube</v-list-tile-title>
+        </v-list-tile>
+
         <!-- Discord -->
         <v-list-tile color="blue" href="https://discord.gg/VkQYXAZ">
           <v-list-tile-action>
@@ -154,6 +164,12 @@
 	}
 </style>
 
+<style>
+	a {
+		color: #00C4E1;
+	}
+</style>
+
 
 <script>
 export default {
diff --git a/src/components/Build.vue b/src/components/Build.vue
index d387c85..bb7ba55 100644
--- a/src/components/Build.vue
+++ b/src/components/Build.vue
@@ -17,14 +17,14 @@
 									<v-layout row wrap align-start justify-center>
 										<v-flex xs12 md6>
 											<p class="mt-4 title">Building methods</p>
-											<v-btn dark color="blue" :to="{ name: 'BuildNetCore' }">
+											<v-btn dark color="ryu_blue" :to="{ name: 'BuildNetCore' }">
 												<v-icon left>fas fa-code</v-icon>
 												.NET Core
 											</v-btn>
 										</v-flex>
 										<v-flex xs12 md6>
 											<p class="mt-4 title">Automatically compiled builds</p>
-											<v-btn dark color="red" target="_blank" :href="downloadURL">
+											<v-btn dark color="ryu_orange" target="_blank" :href="downloadURL">
 												<v-icon left>fas fa-download</v-icon>
 												Download for <v-icon class="mx-1">fab fa-windows</v-icon> ({{ version }})
 											</v-btn>
diff --git a/src/components/Home.vue b/src/components/Home.vue
index 7c49294..f9425c2 100644
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@@ -41,11 +41,11 @@
 									Please consider reporting it via our Discord server. 
 									</p>
 
-									<v-btn dark color="blue" :to="{ name: 'Compatibility' }">
+									<v-btn dark color="ryu_blue" :to="{ name: 'Compatibility' }">
 										<v-icon left>fas fa-gamepad</v-icon>
 										Game compatibility list
 									</v-btn>
-									<v-btn dark color="red" :to="{ name: 'Build' }">
+									<v-btn dark color="ryu_orange" :to="{ name: 'Build' }">
 										<v-icon left>fas fa-download</v-icon>
 										Download the latest build
 									</v-btn>
@@ -65,7 +65,7 @@
 						<v-flex xs12 md4>
 							<v-card class="elevation-0 transparent">
 								<v-card-text class="text-xs-center">
-									<v-icon x-large class="blue--text text--lighten-2">fab fa-github</v-icon>
+									<v-icon x-large class="ryu_blue--text text--lighten-2">fab fa-github</v-icon>
 								</v-card-text>
 								<v-card-title primary-title class="layout justify-center">
 									<div class="display-1 text-xs-center">Where can I grab it?</div>
@@ -80,7 +80,7 @@
 						<v-flex xs12 md4>
 							<v-card class="elevation-0 transparent">
 								<v-card-text class="text-xs-center">
-									<v-icon x-large class="blue--text text--lighten-2">fas fa-code</v-icon>
+									<v-icon x-large class="ryu_blue--text text--lighten-2">fas fa-code</v-icon>
 								</v-card-text>
 								<v-card-title primary-title class="layout justify-center">
 									<div class="display-1 text-xs-center">How can I contribute?</div>
@@ -93,7 +93,7 @@
 						<v-flex xs12 md4>
 							<v-card class="elevation-0 transparent">
 								<v-card-text class="text-xs-center">
-									<v-icon x-large class="blue--text text--lighten-2">fas fa-gamepad</v-icon>
+									<v-icon x-large class="ryu_blue--text text--lighten-2">fas fa-gamepad</v-icon>
 								</v-card-text>
 								<v-card-title primary-title class="layout justify-center">
 									<div class="display-1 text-xs-center">Gaming?</div>
@@ -118,9 +118,9 @@
 						<v-flex xs12 md4>
 							<v-card class="elevation-0 transparent">
 								<v-card-text class="text-xs-center">
-									<v-icon x-large class="blue--text text--lighten-2 mr-4">fab fa-windows</v-icon>
-									<v-icon x-large class="blue--text text--lighten-2 mr-4">fab fa-apple</v-icon>
-									<v-icon x-large class="blue--text text--lighten-2">fab fa-linux</v-icon>
+									<v-icon x-large class="ryu_blue--text text--lighten-2 mr-4">fab fa-windows</v-icon>
+									<v-icon x-large class="ryu_blue--text text--lighten-2 mr-4">fab fa-apple</v-icon>
+									<v-icon x-large class="ryu_blue--text text--lighten-2">fab fa-linux</v-icon>
 								</v-card-text>
 								<v-card-title primary-title class="layout justify-center">
 									<div class="display-1 text-xs-center">Platforms</div>
@@ -135,7 +135,7 @@
 						<v-flex xs12 md4>
 							<v-card class="elevation-0 transparent">
 								<v-card-text class="text-xs-center">
-									<v-icon x-large class="blue--text text--lighten-2">fab fa-discord</v-icon>
+									<v-icon x-large class="ryu_blue--text text--lighten-2">fab fa-discord</v-icon>
 								</v-card-text>
 								<v-card-title primary-title class="layout justify-center">
 									<div class="display-1 text-xs-center">Discord</div>
@@ -150,7 +150,7 @@
 						<v-flex xs12 md4>
 							<v-card class="elevation-0 transparent">
 								<v-card-text class="text-xs-center">
-									<v-icon x-large class="blue--text text--lighten-2">fab fa-nintendo-switch</v-icon>
+									<v-icon x-large class="ryu_blue--text text--lighten-2">fab fa-nintendo-switch</v-icon>
 								</v-card-text>
 								<v-card-title primary-title class="layout justify-center">
 									<div class="display-1 text-xs-center">Why the name?</div>
@@ -179,7 +179,7 @@
 						<v-flex xs12>
 							<v-card class="elevation-0 transparent">
 								<v-card-text class="text-xs-center">
-									<v-icon x-large class="blue--text text--lighten-2">fas fa-users</v-icon>
+									<v-icon x-large class="ryu_blue--text text--lighten-2">fas fa-users</v-icon>
 								</v-card-text>
 								<v-card-title primary-title class="layout justify-center">
 									<div class="display-1 text-xs-center">Our Team</div>
diff --git a/src/components/News.vue b/src/components/News.vue
deleted file mode 100644
index d5a2abc..0000000
--- a/src/components/News.vue
+++ /dev/null
@@ -1,110 +0,0 @@
-<template>
-	<div>
-		<section>
-			<v-layout
-				column
-				wrap
-				class="my-5"
-				align-center
-				justify-center
-			>
-				<v-container grid-list-xl fluid>
-					<v-layout
-						v-if="loading"
-						row
-						wrap
-						align-center
-						justify-center
-					>
-						<v-flex
-							xs12
-							class="text-xs-center"
-						>
-							<v-progress-circular :size="100" indeterminate color="primary"></v-progress-circular>
-						</v-flex>
-					</v-layout>
-					<v-layout row wrap align-start>
-						<v-flex
-							v-for="article in articles"
-							xs12 md6 lg4
-							:key="article.title"
-						>
-							<v-card hover @click.native.stop="openArticle(article)">
-								<v-card-media :src="article.image" height="300px"></v-card-media>
-								<v-card-title primary-title>
-									<div>
-										<h3 class="headline mb-0">{{ article.title }}</h3>
-										<span class="grey--text">{{ article.created }} by {{ article.author }}</span>
-										<vue-markdown class="mt-3" v-if="article.short">{{ article.short }}</vue-markdown>
-									</div>
-								</v-card-title>
-								<v-card-actions v-if="article.text">
-									<v-spacer></v-spacer>
-									<v-btn color="green darken-1" flat="flat" @click.native.stop="openArticle(article)">Learn More</v-btn>
-								</v-card-actions>
-							</v-card>
-						</v-flex>
-					</v-layout>
-				</v-container>
-			</v-layout>
-		</section>
-
-		<v-dialog v-model="dialog" max-width="1000" scrollable lazy>
-			<v-card>
-				<v-card-title primary-title>
-					<div>
-						<h3 class="headline mb-0">{{ currentArticle.title }}</h3>
-						<span class="grey--text">{{ currentArticle.created }} by {{ currentArticle.author }}</span>
-					</div>
-				</v-card-title>
-				<v-card-media v-if="currentArticle" :src="currentArticle.image" height="300px"></v-card-media>
-				<v-card-text>
-					<vue-markdown :source="currentArticle.text"></vue-markdown>
-				</v-card-text>
-				<v-card-actions>
-					<v-spacer></v-spacer>
-					<v-btn color="green darken-1" flat="flat" @click.native="dialog = false">Close</v-btn>
-				</v-card-actions>
-			</v-card>
-		</v-dialog>
-	</div>
-</template>
-
-<script>
-import VueMarkdown from 'vue-markdown';
-
-export default {
-	components: {
-		VueMarkdown
-	},
-
-	data () {
-		return {
-			currentArticle: false,
-			dialog: false,
-			loading: true,
-			articles: []
-		};
-	},
-
-	methods: {
-		async fetchArticles () {
-			let _a = await fetch('https://ryujinx.org/public/articles.json');
-			this.articles = await _a.json();
-
-			this.loading = false;
-		},
-
-		openArticle (article) {
-			if (!article.text) return;
-
-			this.dialog = true;
-			this.currentArticle = article;
-		}
-	},
-
-	mounted () {
-		this.fetchArticles();
-	}
-};
-</script>
diff --git a/src/main.js b/src/main.js
index 6be88e8..0a60ca7 100644
--- a/src/main.js
+++ b/src/main.js
@@ -6,7 +6,12 @@ import router from './router';
 import Vuetify from 'vuetify';
 import 'vuetify/dist/vuetify.min.css';
 
-Vue.use(Vuetify);
+Vue.use(Vuetify, {
+	theme: {
+		ryu_blue: '#00C4E1',
+		ryu_orange: '#FF5E5B'
+	}
+});
 
 Vue.config.productionTip = false;
 
diff --git a/src/router/index.js b/src/router/index.js
index f58a57b..b7e7d96 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,7 +1,6 @@
 import Vue from 'vue';
 import Router from 'vue-router';
 import Home from '@/components/Home';
-import News from '@/components/News';
 import Contribute from '@/components/Contribute';
 import Build from '@/components/Build';
 import BuildNetCore from '@/components/Build.Net_Core';
@@ -16,11 +15,6 @@ export default new Router({
 			name: 'Home',
 			component: Home
 		},
-		{
-			path: '/news',
-			name: 'News',
-			component: News
-		},
 		{
 			path: '/contribute',
 			name: 'Contribute',