Change how items are displayed on /help/ for desktop and mobile (#192)

* Ignore folder 'theme_eject'

* Enhanced hover effects for /help/

* Prevent hover effect for mobile

* Change hover effects

* Fix mobile hover border radius

src/.vuepress/components/Help.vue

@@ -22,7 +22,7 @@
 							:href="helpItem.link"
 							tabindex="1"
 						>
-							<div class="card">
+							<div class="card" :class="'card__' + helpItem.title">
 								<header v-if="helpItem.faqApp">
 									<CellphoneAndroidIcon />
 									<h3>{{ helpItem.title }}</h3>
@@ -60,18 +60,27 @@
 							rel="noreferrer"
 							tabindex="1"
 						>
-							<div class="card">
+							<div class="card" :class="'card__' + helpItem.title">
 								<header v-if="helpItem.discord">
 									<DiscordIcon />
-									<h3>{{ helpItem.title }}</h3>
+									<span>
+										<h3>{{ helpItem.title }}</h3>
+										<OutboundLink />
+									</span>
 								</header>
 								<header v-else-if="helpItem.reddit">
 									<RedditIcon />
-									<h3>{{ helpItem.title }}</h3>
+									<span>
+										<h3>{{ helpItem.title }}</h3>
+										<OutboundLink />
+									</span>
 								</header>
 								<header v-else-if="helpItem.github">
 									<GithubIcon />
-									<h3>{{ helpItem.title }}</h3>
+									<span>
+										<h3>{{ helpItem.title }}</h3>
+										<OutboundLink />
+									</span>
 								</header>
 								<header v-else-if="helpItem.icon">
 									<MaterialIcon
@@ -194,10 +203,22 @@ export default {
 			white-space nowrap
 			.material-icons,
 			.material-design-icon
+				display contents
 				font-size 2.5em
 				color $accentColorSecondary
 			.material-design-icon > .material-design-icon__svg
 				position relative
+			span
+				display block
+				.icon.outbound
+					display inline-block
+					visibility hidden
+					vertical-align baseline
+					right 10px
+				h3
+					display inline-block
+					margin-left 1.8rem
+					margin-bottom 0px
 			h3
 				margin 10px
 		p
@@ -205,8 +226,33 @@ export default {
 			font-weight 400
 			font-size 0.95rem
 		&:hover
+			border-bottom 2px solid $accentColor
+			border-bottom-left-radius 0px
+			border-bottom-right-radius 0px
 			position relative
-			top -5px
+			.material-design-icon
+				color $accentColor
+				&.discord-icon
+					color $discordAccentColor
+				&.reddit-icon
+					color $redditAccentColor
+				&.github-icon
+					color $githubAccentColor
+			.icon.outbound
+				visibility visible
+		&__Discord:hover
+			border-bottom 2px solid $discordAccentColor
+			h3
+				color $discordAccentColor
+		&__Reddit:hover
+			border-bottom 2px solid $redditAccentColor
+			h3
+				color $redditAccentColor
+		&__GitHub:hover
+			border-bottom 2px solid $githubAccentColor
+			h3
+				color $githubAccentColor
+
 	.column
 		float left
 		padding 0.5rem
@@ -217,6 +263,7 @@ export default {
 			.card
 				box-shadow 0 0 30px #b1aeae52, 0 0 0 1px #fff, 0 0 0 3px rgba(50, 100, 150, 0.4)
 				outline none
+
 	.row
 		margin 0 -5px
 		&:after
@@ -256,6 +303,21 @@ export default {
 				.material-icons,
 				.material-design-icon
 					font-size 1.6em
+					&.discord-icon
+						color $discordAccentColor
+					&.reddit-icon
+						color $redditAccentColor
+					&.github-icon
+						color $githubAccentColor
+				span
+					display inline-block
+					.icon.outbound
+						visibility visible
+						right 0
+						top -4px
+					h3
+						margin-left 0px
+						margin-bottom 0px
 				h3
 					font-size 1.5rem
 					display inline-block
@@ -263,6 +325,20 @@ export default {
 			p
 				font-size 1rem
 			&:hover
+				border-bottom 1px solid #cfd4db
+				border-bottom-left-radius 6px
+				border-bottom-right-radius 6px
 				position inherit
 				top unset
+				.material-design-icon
+					color $accentColorSecondary
+			&__Discord
+				h3
+					color $discordAccentColor
+			&__Reddit
+				h3
+					color $redditAccentColor
+			&__GitHub
+				h3
+					color $githubAccentColor
 </style>

src/.vuepress/styles/palette.styl

@@ -30,3 +30,7 @@ $nekoAccentColor = #3DDA83
 $j2kAccentColor = $accentColor
 $azAccentColor = #FFCC4D
 $ehAccentColor = $accentColor
+// Links
+$discordAccentColor = #7289DA
+$redditAccentColor = #FF5700
+$githubAccentColor = #333333