Skip to content

Commit 13702cb

Browse files
anacarlaquallioanacarlaquallio
authored
Redesign main blog's page (#424)
1 parent 25fff98 commit 13702cb

File tree

5 files changed

+326
-140
lines changed

5 files changed

+326
-140
lines changed

‎resources/views/layouts/wrapper.blade.php‎

Lines changed: 31 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,39 @@
1-
<!DOCTYPE html>
2-
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
1+
<!doctype html>
2+
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" data-bs-theme="auto">
3+
34
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7-
<title>{{ $title ?? 'Page Title' }}</title>
8-
9-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
10-
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
11-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
12-
<link rel="stylesheet" href="{{ asset('assets/css/app.css') }}">
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>{{ $title ?? 'Page Title' }}</title>
9+
10+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
11+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
12+
13+
<link href="https://fonts.googleapis.com/css?family=Playfair&#43;Display:700,900&amp;display=swap"
14+
rel="stylesheet">
15+
<link rel="stylesheet" href="{{ asset('assets/css/app.css') }}">
16+
17+
@stack('styles')
1318
</head>
14-
<body>
1519

16-
@include('layouts.wrapper._navbar')
20+
<body class="d-flex flex-column min-vh-100">
21+
22+
@include('layouts.wrapper._navbar')
1723

18-
@yield('content')
24+
<main>
25+
@yield('content')
26+
</main>
1927

20-
@include('layouts.wrapper._footer')
28+
@include('layouts.wrapper._footer')
2129

22-
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
23-
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
24-
crossorigin="anonymous"></script>
25-
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
26-
integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
27-
crossorigin="anonymous"></script>
30+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
31+
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
32+
crossorigin="anonymous"></script>
33+
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
34+
integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
35+
crossorigin="anonymous"></script>
2836

2937
</body>
30-
</html>
38+
39+
</html>

‎resources/views/layouts/wrapper/_footer.blade.php‎

Lines changed: 68 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,71 @@
1-
<div class="container mt-5">
2-
<footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
3-
<p class="col-md-4 mb-0 text-body-secondary">
4-
<strong>My Personal Blog</strong>
5-
</p>
1+
<div class="mt-5">
2+
<footer class="bg-dark-gradient py-5">
3+
<div class="container">
4+
<div class="row">
5+
<footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4">
6+
<span class="fs-3 fw-bold text-white" style="font-family: 'Playfair Display', serif;">
7+
<strong>My Personal Blog</strong>
8+
</span>
69

7-
<ul class="nav col-md-4 justify-content-end">
8-
<li class="nav-item">
9-
<a href="{{ route('main.index') }}" class="nav-link px-2 text-body-secondary">
10-
Home
11-
</a>
12-
</li>
13-
<li class="nav-item">
14-
<a href="{{ route('category.index') }}" class="nav-link px-2 text-body-secondary">
15-
Categories
16-
</a>
17-
</li>
18-
<li class="nav-item">
19-
<a href="{{ route('about.index') }}" class="nav-link px-2 text-body-secondary">
20-
About author
21-
</a>
22-
</li>
23-
<li class="nav-item">
24-
<a href="{{ route('contact.index') }}" class="nav-link px-2 text-body-secondary">
25-
Contacts
26-
</a>
27-
</li>
28-
</ul>
10+
<div class="col-6 col-md-2 mb-4">
11+
<h5 class="text-white mb-3">Navigation</h5>
12+
<ul class="nav flex-column">
13+
<li class="nav-item mb-2">
14+
<a href="{{ route('main.index') }}" class="nav-link p-0 link-light link-offset-2">
15+
Home
16+
</a>
17+
</li>
18+
<li class="nav-item mb-2">
19+
<a href="{{ route('about.index') }}" class="nav-link p-0 link-light link-offset-2">
20+
About
21+
</a>
22+
</li>
23+
<li class="nav-item mb-2">
24+
<a href="{{ route('contact.index') }}" class="nav-link p-0 link-light link-offset-2">
25+
Contact
26+
</a>
27+
</li>
28+
</ul>
29+
</div>
30+
31+
<div class="col-6 col-md-2 mb-4">
32+
<h5 class="text-white mb-3">Social</h5>
33+
<ul class="nav flex-column">
34+
<li class="nav-item mb-2">
35+
<a href="#" class="nav-link p-0 link-light link-offset-2">
36+
<i class="bi bi-github me-2"></i>GitHub
37+
</a>
38+
</li>
39+
<li class="nav-item mb-2">
40+
<a href="#" class="nav-link p-0 link-light link-offset-2">
41+
<i class="bi bi-linkedin me-2"></i>LinkedIn
42+
</a>
43+
</li>
44+
<li class="nav-item mb-2">
45+
<a href="#" class="nav-link p-0 link-light link-offset-2">
46+
<i class="bi bi-twitter-x me-2"></i>Twitter
47+
</a>
48+
</li>
49+
</ul>
50+
</div>
51+
52+
</footer>
53+
</div>
54+
55+
<div class="border-top border-dark pt-4 mt-4 text-center">
56+
<p class="text-secondary mb-0">
57+
© {{ date('Y') }} My Personal Blog.
58+
</p>
59+
</div>
60+
</div>
2961
</footer>
3062
</div>
63+
64+
<style>
65+
.bg-dark-gradient {
66+
background: linear-gradient(160deg, #1a1a1a 0%, #0d0d0d 100%);
67+
padding: 2rem 0;
68+
margin-top: 4rem !important;
69+
width: 100%;
70+
}
71+
</style>

‎resources/views/layouts/wrapper/_navbar.blade.php‎

Lines changed: 54 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,56 @@
1-
<nav class="navbar navbar-expand-lg" style="background-color: #e3f2fd;">
2-
<div class="container-md">
3-
<a class="navbar-brand" href="{{ route('main.index') }}">
4-
<strong>My Personal Blog</strong>
5-
</a>
6-
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
7-
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
8-
<span class="navbar-toggler-icon"></span>
9-
</button>
10-
<div class="collapse navbar-collapse" id="navbarSupportedContent">
11-
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
12-
<li class="nav-item">
13-
<a class="nav-link" href="{{ route('main.index') }}">Home</a>
14-
</li>
15-
<li class="nav-item">
16-
<a class="nav-link" href="{{ route('about.index') }}">About author</a>
17-
</li>
18-
<li class="nav-item">
19-
<a class="nav-link" href="{{ route('contact.index') }}">Contacts</a>
20-
</li>
21-
</ul>
22-
@auth()
23-
<a class="btn btn-outline-success" href="{{ route('personal.main.index') }}">Profile</a>
24-
@endauth
25-
@guest()
26-
<a class="btn btn-outline-success" href="{{ route('personal.main.index') }}">Log in</a>
27-
@endguest
1+
<div class="container">
2+
<header class="border-bottom lh-1 py-3">
3+
<div class="row flex-nowrap justify-content-between align-items-center">
4+
<div class="col-4"></div>
5+
<div class="col-4 text-center">
6+
<a class="blog-header-logo text-body-emphasis text-decoration-none" href="{{ route('main.index') }}"
7+
style="font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.95rem;">
8+
My Personal Blog
9+
</a>
10+
</div>
11+
<div class="col-4 d-flex justify-content-end align-items-center">
12+
@auth
13+
<div class="dropdown">
14+
<a class="btn btn-sm btn-outline-primary dropdown-toggle gap-2 rounded-pill px-4 d-flex align-items-center"
15+
href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
16+
<i class="bi bi-person-circle"></i>
17+
{{ Auth::user()->name }}
18+
</a>
19+
<ul class="dropdown-menu dropdown-menu-end shadow-lg rounded-3">
20+
<li>
21+
<a class="dropdown-item d-flex align-items-center gap-2"
22+
href="{{ route('personal.main.index') }}">
23+
<i class="bi bi-person"></i> Profile
24+
</a>
25+
</li>
26+
<li>
27+
<hr class="dropdown-divider">
28+
</li>
29+
<li>
30+
<form method="POST" action="{{ route('logout') }}">
31+
@csrf
32+
<button type="submit" class="dropdown-item d-flex align-items-center gap-2">
33+
<i class="bi bi-box-arrow-right"></i> Logout
34+
</button>
35+
</form>
36+
</li>
37+
</ul>
38+
</div>
39+
@else
40+
<a class="btn btn-sm bg-primary text-white gap-2 rounded-pill px-4 d-flex align-items-center"
41+
href="{{ route('login') }}">
42+
<i class="bi bi-box-arrow-in-right"></i> Log in
43+
</a>
44+
@endauth
45+
</div>
2846
</div>
47+
</header>
48+
49+
<div class="nav-scroller py-1 mb-3 border-bottom">
50+
<nav class="nav nav-underline justify-content-between">
51+
<a class="nav-item nav-link link-body-emphasis" href="{{ route('main.index') }}">Home</a>
52+
<a class="nav-item nav-link link-body-emphasis" href="{{ route('about.index') }}">About author</a>
53+
<a class="nav-item nav-link link-body-emphasis" href="{{ route('contact.index') }}">Contact</a>
54+
</nav>
2955
</div>
30-
</nav>
56+
</div>

0 commit comments

Comments
 (0)