changes in design

8 files changed, 61 insertions, 15 deletions

diff --git a/public/css/app.css b/public/css/app.css
index 52f6f99..b287fab 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -10965,3 +10965,19 @@ hr {
   margin-top: 50px;
 }
 
+.hn {
+  display: inline-block;
+  font-size: inherit;
+  height: 1em;
+  overflow: visible;
+  vertical-align: -0.125em;
+  fill: #ff6600;
+}
+
+.mastodon {
+  display: inline-block;
+  font-size: inherit;
+  height: 1em;
+  overflow: visible;
+  vertical-align: -0.125em;
+}
diff --git a/public/img/mastodon.svg b/public/img/mastodon.svg
new file mode 100644
index 0000000..906d6ac
--- /dev/null
+++ b/public/img/mastodon.svg
@@ -0,0 +1,4 @@
+<svg class="mastodon" alt="Follow on Mastodon @MostDiscussed@mstdn.social" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216.4144 232.00976">
+  <path fill="#2b90d9" d="M211.80734 139.0875c-3.18125 16.36625-28.4925 34.2775-57.5625 37.74875-15.15875 1.80875-30.08375 3.47125-45.99875 2.74125-26.0275-1.1925-46.565-6.2125-46.565-6.2125 0 2.53375.15625 4.94625.46875 7.2025 3.38375 25.68625 25.47 27.225 46.39125 27.9425 21.11625.7225 39.91875-5.20625 39.91875-5.20625l.8675 19.09s-14.77 7.93125-41.08125 9.39c-14.50875.7975-32.52375-.365-53.50625-5.91875C9.23234 213.82 1.40609 165.31125.20859 116.09125c-.365-14.61375-.14-28.39375-.14-39.91875 0-50.33 32.97625-65.0825 32.97625-65.0825C49.67234 3.45375 78.20359.2425 107.86484 0h.72875c29.66125.2425 58.21125 3.45375 74.8375 11.09 0 0 32.975 14.7525 32.975 65.0825 0 0 .41375 37.13375-4.59875 62.915"/>
+  <path fill="#fff" d="M177.50984 80.077v60.94125h-24.14375v-59.15c0-12.46875-5.24625-18.7975-15.74-18.7975-11.6025 0-17.4175 7.5075-17.4175 22.3525v32.37625H96.20734V85.42325c0-14.845-5.81625-22.3525-17.41875-22.3525-10.49375 0-15.74 6.32875-15.74 18.7975v59.15H38.90484V80.077c0-12.455 3.17125-22.3525 9.54125-29.675 6.56875-7.3225 15.17125-11.07625 25.85-11.07625 12.355 0 21.71125 4.74875 27.8975 14.2475l6.01375 10.08125 6.015-10.08125c6.185-9.49875 15.54125-14.2475 27.8975-14.2475 10.6775 0 19.28 3.75375 25.85 11.07625 6.36875 7.3225 9.54 17.22 9.54 29.675"/>
+</svg>
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index f78c4bb..7111267 100644
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -10,3 +10,19 @@
 @import 'background';
 @import 'navbar';
 @import 'utility';
+
+.hn {
+  display: inline-block;
+  font-size: inherit;
+  height: 1em;
+  overflow: visible;
+  vertical-align: -.125em;
+  fill: #ff6600;
+}
+.mastodon {
+  display: inline-block;
+  font-size: inherit;
+  height: 1em;
+  overflow: visible;
+  vertical-align: -.125em;
+}
diff --git a/resources/views/about.blade.php b/resources/views/about.blade.php
index 14b62dc..b8547f2 100644
--- a/resources/views/about.blade.php
+++ b/resources/views/about.blade.php
@@ -4,15 +4,6 @@
 html {
 	height: 100%;
 }
-.hn {
-  display: inline-block;
-  font-size: inherit;
-  height: 1em;
-  overflow: visible;
-  vertical-align: -.125em;
-  fill: #ff6600;
-}
-
 @endsection
 
 @section('content')
@@ -48,7 +39,7 @@ If you have feedback, want to report a bug or just say hello, hit me up by e-mai
 
 <br>
 <br>
-You can now also follow on Mastodon <a href="https://mstdn.social/@MostDiscussed" target=_blank>@MostDiscussed</a>.
+You can now also follow on Mastodon <a title="Follow on Mastodon {{ env('MASTODON_HANDLE') }}" href="{{ env('MASTODON_URL') }}" target=_blank>{!! file_get_contents(public_path() . "/img/mastodon.svg") !!} @MostDiscussed</a> to stay up to date.
 
 <!--
 					I was curious what HN may find interesting, so I used upvoted or discussed articles from Wikipedia as a proxy and build this. All articles are <a href="{{ route('popular_topics') }}">structured and categorized</a> to get a better overview. Unsurprisingly <a href="{{ route('topic', 'computing') }}">computing</a> was on the top, but then it might get interesting.
diff --git a/resources/views/index.blade.php b/resources/views/index.blade.php
index c4e3402..712cc36 100644
--- a/resources/views/index.blade.php
+++ b/resources/views/index.blade.php
@@ -9,6 +9,13 @@
 		width: 100%;
 	}
 }
+html {
+	height: 100%;
+}
+.cover-heading {
+	margin-top: 4rem;
+}
+
 @endsection
 
 @section('content')
@@ -18,16 +25,21 @@
    <div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
 
   <div role="main" class="inner cover">
-    <h1 class="cover-heading">Top Discussed Wikipedia Articles</h1>
+    <h1 class="cover-heading">The Most Interesting Articles On Wikipedia</h1>
+<br>
     <p class="lead">
 	Best of Wikipedia, filtered, tagged and discussed. <br>For the curious reader.
     </p>
+<br>
     <p class="lead">
       <a href="{{ route('popular') }}" class="btn btn-lg btn-outline-primary">Most Popular</a>
       <a href="{{ route('popular_topics') }}" class="btn btn-lg btn-outline-primary btn-mobile-second">Popular Topics</a>
     </p>
     <p class="lead mt-50">
-      Find out more, why and how<br> <a href="{{ route('about') }}">About MostDiscussed.com</a>
+      <a href="{{ route('about') }}">What, why and how❔</a>
+	<br>
+	<br>
+	Follow on <a title="Follow on Mastodon {{ env('MASTODON_HANDLE') }}" href="{{ env('MASTODON_URL') }}" target="_blank">{!! file_get_contents(public_path() . "/img/mastodon.svg") !!} Mastodon</a>
     </p>
   </div>
 
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 64bc3dc..ca59000 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -8,6 +8,7 @@
     <meta name="csrf-token" content="{{ csrf_token() }}">
 
     <link rel="me" href="https://mstdn.social/@MostDiscussed">
+    <link rel="me" href="https://mastodon.social/@MostDiscussed">
 
     <title>{{ config('app.name', 'Laravel') }}@if( "index" != Request::route()->getName() ) - {{ ucwords(Request::route()->getName()) }} Articles @endif</title>
 
diff --git a/resources/views/layouts/footer.blade.php b/resources/views/layouts/footer.blade.php
index 1f56b8e..5a8c6e8 100644
--- a/resources/views/layouts/footer.blade.php
+++ b/resources/views/layouts/footer.blade.php
@@ -12,7 +12,7 @@
 		<strong>
 			<a href="{{ route('about') }}">About {{ env('APP_NAME') }}</a>
 			<br>
-			<a href="https://mstdn.social/@MostDiscussed">Follow on Mastodon</a>
+			<a target="_blank" title="Follow on Mastodon {{ env('MASTODON_HANDLE') }}" href="{{ env('MASTODON_URL') }}">Follow on {!! file_get_contents(public_path() . "/img/mastodon.svg") !!} Mastodon</a>
 		</strong>
 	</div>
 </footer>
diff --git a/resources/views/list.blade.php b/resources/views/list.blade.php
index 575af7c..344de46 100644
--- a/resources/views/list.blade.php
+++ b/resources/views/list.blade.php
@@ -96,6 +96,12 @@
 					<em>You are looking at the most popular articles. If you are interested in </em><strong>popular topics</strong><em> instead, <a href="{{ route('popular_topics') }}" title="popular topics">click here</a>.</em>
 				</p>
 			</div>
+		@elseif ( "new" == Request::route()->getName() )
+			<div class="card-body">
+				<p class="card-text">
+					To stay up to date you can also follow on <a title="Follow on Mastodon {{ env('MASTODON_HANDLE') }}" href="{{ env('MASTODON_URL') }}" target="_blank">{!! file_get_contents(public_path() . "/img/mastodon.svg") !!} Mastodon</a>.
+				</p>
+			</div>
 		@endif
 		
 	@endif
@@ -106,14 +112,14 @@
 		<div class="card">
 				<h1 class="card-header">
 					<a style="color:inherit;" href="{{ $article->url }}" title="{{ $article->title }}">
-						{{ $article->title }}
+						🔗 {{ $article->title }}
 					</a>
 				</h1>
 			<div class="card-body">
 				@if ( ! is_null($article->getCategories()) )
 					@foreach ( $article->getCategories()->get() as $cat )
 						<a class="badge badge-pill badge-primary" href="/topic/{{ $cat->name }}">
-						{{ $cat->name }}
+						🔗 {{ $cat->name }}
 						</a>
 					@endforeach
 				@endif