@extends('layouts.app')

@section('styles')
@media ( max-width: 397px ) {
	.btn-mobile-second {
		margin-top: 1rem;
	}
	.btn-lg {
		width: 100%;
	}
}
@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">Top Discussed Wikipedia Articles</h1>
    <p class="lead">
	Best of Wikipedia, filtered, tagged and discussed. <br>For the curious reader.
    </p>
    <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>
    </p>
  </div>

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