@extends('layouts.app')

@section('styles')
@media ( max-width: 397px ) {
	.btn-mobile-second {
		margin-top: 1rem;
	}
	.btn-lg {
		width: 100%;
	}
}
html {
	height: 100%;
}
.cover-heading {
	margin-top: 4rem;
}

@endsection

@section('content')

@if ( "index" == Request::route()->getName() )
<div class="text-center">
   <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">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">
      <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>

</div>
</div>
  @endif
@endsection