Skip to content

Redesign main blog's page #424

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Feb 15, 2025
Merged

Redesign main blog's page #424

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 31 additions & 22 deletions resources/views/layouts/wrapper.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,39 @@
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" data-bs-theme="auto">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>{{ $title ?? 'Page Title' }}</title>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="{{ asset('assets/css/app.css') }}">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>{{ $title ?? 'Page Title' }}</title>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

<link href="https://fonts.googleapis.com/css?family=Playfair&#43;Display:700,900&amp;display=swap"
rel="stylesheet">
<link rel="stylesheet" href="{{ asset('assets/css/app.css') }}">

@stack('styles')
</head>
<body>

@include('layouts.wrapper._navbar')
<body class="d-flex flex-column min-vh-100">

@include('layouts.wrapper._navbar')

@yield('content')
<main>
@yield('content')
</main>

@include('layouts.wrapper._footer')
@include('layouts.wrapper._footer')

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
crossorigin="anonymous"></script>

</body>
</html>

</html>
95 changes: 68 additions & 27 deletions resources/views/layouts/wrapper/_footer.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,71 @@
<div class="container mt-5">
<footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
<p class="col-md-4 mb-0 text-body-secondary">
<strong>My Personal Blog</strong>
</p>
<div class="mt-5">
<footer class="bg-dark-gradient py-5">
<div class="container">
<div class="row">
<footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4">
<span class="fs-3 fw-bold text-white" style="font-family: 'Playfair Display', serif;">
<strong>My Personal Blog</strong>
</span>

<ul class="nav col-md-4 justify-content-end">
<li class="nav-item">
<a href="{{ route('main.index') }}" class="nav-link px-2 text-body-secondary">
Home
</a>
</li>
<li class="nav-item">
<a href="{{ route('category.index') }}" class="nav-link px-2 text-body-secondary">
Categories
</a>
</li>
<li class="nav-item">
<a href="{{ route('about.index') }}" class="nav-link px-2 text-body-secondary">
About author
</a>
</li>
<li class="nav-item">
<a href="{{ route('contact.index') }}" class="nav-link px-2 text-body-secondary">
Contacts
</a>
</li>
</ul>
<div class="col-6 col-md-2 mb-4">
<h5 class="text-white mb-3">Navigation</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2">
<a href="{{ route('main.index') }}" class="nav-link p-0 link-light link-offset-2">
Home
</a>
</li>
<li class="nav-item mb-2">
<a href="{{ route('about.index') }}" class="nav-link p-0 link-light link-offset-2">
About
</a>
</li>
<li class="nav-item mb-2">
<a href="{{ route('contact.index') }}" class="nav-link p-0 link-light link-offset-2">
Contact
</a>
</li>
</ul>
</div>

<div class="col-6 col-md-2 mb-4">
<h5 class="text-white mb-3">Social</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2">
<a href="#" class="nav-link p-0 link-light link-offset-2">
<i class="bi bi-github me-2"></i>GitHub
</a>
</li>
<li class="nav-item mb-2">
<a href="#" class="nav-link p-0 link-light link-offset-2">
<i class="bi bi-linkedin me-2"></i>LinkedIn
</a>
</li>
<li class="nav-item mb-2">
<a href="#" class="nav-link p-0 link-light link-offset-2">
<i class="bi bi-twitter-x me-2"></i>Twitter
</a>
</li>
</ul>
</div>

</footer>
</div>

<div class="border-top border-dark pt-4 mt-4 text-center">
<p class="text-secondary mb-0">
© {{ date('Y') }} My Personal Blog.
</p>
</div>
</div>
</footer>
</div>

<style>
.bg-dark-gradient {
background: linear-gradient(160deg, #1a1a1a 0%, #0d0d0d 100%);
padding: 2rem 0;
margin-top: 4rem !important;
width: 100%;
}
</style>
82 changes: 54 additions & 28 deletions resources/views/layouts/wrapper/_navbar.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,56 @@
<nav class="navbar navbar-expand-lg" style="background-color: #e3f2fd;">
<div class="container-md">
<a class="navbar-brand" href="{{ route('main.index') }}">
<strong>My Personal Blog</strong>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="{{ route('main.index') }}">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ route('about.index') }}">About author</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ route('contact.index') }}">Contacts</a>
</li>
</ul>
@auth()
<a class="btn btn-outline-success" href="{{ route('personal.main.index') }}">Profile</a>
@endauth
@guest()
<a class="btn btn-outline-success" href="{{ route('personal.main.index') }}">Log in</a>
@endguest
<div class="container">
<header class="border-bottom lh-1 py-3">
<div class="row flex-nowrap justify-content-between align-items-center">
<div class="col-4"></div>
<div class="col-4 text-center">
<a class="blog-header-logo text-body-emphasis text-decoration-none" href="{{ route('main.index') }}"
style="font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.95rem;">
My Personal Blog
</a>
</div>
<div class="col-4 d-flex justify-content-end align-items-center">
@auth
<div class="dropdown">
<a class="btn btn-sm btn-outline-primary dropdown-toggle gap-2 rounded-pill px-4 d-flex align-items-center"
href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-person-circle"></i>
{{ Auth::user()->name }}
</a>
<ul class="dropdown-menu dropdown-menu-end shadow-lg rounded-3">
<li>
<a class="dropdown-item d-flex align-items-center gap-2"
href="{{ route('personal.main.index') }}">
<i class="bi bi-person"></i> Profile
</a>
</li>
<li>
<hr class="dropdown-divider">
</li>
<li>
<form method="POST" action="{{ route('logout') }}">
@csrf
<button type="submit" class="dropdown-item d-flex align-items-center gap-2">
<i class="bi bi-box-arrow-right"></i> Logout
</button>
</form>
</li>
</ul>
</div>
@else
<a class="btn btn-sm bg-primary text-white gap-2 rounded-pill px-4 d-flex align-items-center"
href="{{ route('login') }}">
<i class="bi bi-box-arrow-in-right"></i> Log in
</a>
@endauth
</div>
</div>
</header>

<div class="nav-scroller py-1 mb-3 border-bottom">
<nav class="nav nav-underline justify-content-between">
<a class="nav-item nav-link link-body-emphasis" href="{{ route('main.index') }}">Home</a>
<a class="nav-item nav-link link-body-emphasis" href="{{ route('about.index') }}">About author</a>
<a class="nav-item nav-link link-body-emphasis" href="{{ route('contact.index') }}">Contact</a>
</nav>
</div>
</nav>
</div>
Loading