Work on styling, homepage layout
This commit is contained in:
Niisse
parent
aa37d762b6
commit
c46236d08f
18
package-lock.json
generated
18
package-lock.json
generated
@ -4,6 +4,9 @@
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"dependencies": {
|
||||
"bootstrap-icons": "^1.11.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@popperjs/core": "^2.11.6",
|
||||
"axios": "^1.6.4",
|
||||
@ -624,6 +627,21 @@
|
||||
"@popperjs/core": "^2.11.8"
|
||||
}
|
||||
},
|
||||
"node_modules/bootstrap-icons": {
|
||||
"version": "1.11.3",
|
||||
"resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.11.3.tgz",
|
||||
"integrity": "sha512-+3lpHrCw/it2/7lBL15VR0HEumaBss0+f/Lb6ZvHISn1mlK83jjFpooTLsMWbIjJMDjDjOExMsTxnXSIT4k4ww==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/twbs"
|
||||
},
|
||||
{
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/bootstrap"
|
||||
}
|
||||
]
|
||||
},
|
||||
"node_modules/braces": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
|
||||
|
||||
@ -12,5 +12,8 @@
|
||||
"laravel-vite-plugin": "^1.0.0",
|
||||
"sass": "^1.56.1",
|
||||
"vite": "^5.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"bootstrap-icons": "^1.11.3"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
// Body
|
||||
$body-bg: #f8fafc;
|
||||
$body-bg: #ffffff;
|
||||
|
||||
// Typography
|
||||
$font-family-sans-serif: 'Nunito', sans-serif;
|
||||
$font-family-sans-serif: 'nunito', sans-serif;
|
||||
$font-size-base: 0.9rem;
|
||||
$line-height-base: 1.6;
|
||||
|
||||
@ -1,8 +1,23 @@
|
||||
// Fonts
|
||||
@import url('https://fonts.bunny.net/css?family=Nunito');
|
||||
@import url('/node_modules/bootstrap-icons/font/bootstrap-icons.css');
|
||||
|
||||
// Variables
|
||||
@import 'variables';
|
||||
|
||||
$font-size-base: 1rem;
|
||||
|
||||
// Navbar overrides
|
||||
$navbar-light-color: var(--bs-blue);
|
||||
$nav-link-font-size: 1.1rem;
|
||||
|
||||
// Bootstrap
|
||||
@import 'bootstrap/scss/bootstrap';
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
||||
@ -1,23 +1,88 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('content')
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-8">
|
||||
<div class="card">
|
||||
<div class="card-header">{{ __('Dashboard') }}</div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-9 px-4">
|
||||
|
||||
<div class="card-body">
|
||||
@if (session('status'))
|
||||
<div class="alert alert-success" role="alert">
|
||||
{{ session('status') }}
|
||||
<div class="px-2">
|
||||
<h2 class="mt-3">A Blog Entry</h2>
|
||||
|
||||
<div class="mt-3 pr-2">
|
||||
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
|
||||
the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
|
||||
of type and scrambled it to make a type specimen book. It has survived not only five centuries,
|
||||
but also the leap into electronic typesetting, remaining essentially unchanged. It was
|
||||
popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
|
||||
and more recently with desktop publishing software like Aldus PageMaker including versions of
|
||||
Lorem Ipsum.
|
||||
</div>
|
||||
<div>
|
||||
<br>
|
||||
<a href="/">Continue reading...</a>
|
||||
</div>
|
||||
|
||||
<div class="text-secondary mt-3">
|
||||
<div class="d-inline-flex flex-row gap-3">
|
||||
<div>
|
||||
<i class="bi bi-person-fill"></i> Nisse
|
||||
</div>
|
||||
<div>
|
||||
<i class="bi bi-calendar-week"></i> 2024-02-02
|
||||
</div>
|
||||
<div>
|
||||
<i class="bi bi-tags-fill"></i>
|
||||
<a href="/">Tag 1</a>,
|
||||
<a href="/">Tag 2</a>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{{ __('You are logged in!') }}
|
||||
<div class="py-2">
|
||||
<hr>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="px-2">
|
||||
<h2 class="mt-3">Another Blog Entry</h2>
|
||||
|
||||
<div class="mt-3 pr-2">
|
||||
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
|
||||
the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
|
||||
of type and scrambled it to make a type specimen book. It has survived not only five centuries,
|
||||
but also the leap into electronic typesetting, remaining essentially unchanged. It was
|
||||
popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
|
||||
and more recently with desktop publishing software like Aldus PageMaker including versions of
|
||||
Lorem Ipsum.
|
||||
</div>
|
||||
|
||||
<div class="text-secondary mt-3">
|
||||
<div class="d-inline-flex flex-row gap-3">
|
||||
<div>
|
||||
<i class="bi bi-person-fill"></i> Nisse
|
||||
</div>
|
||||
<div>
|
||||
<i class="bi bi-calendar-week"></i> 2024-01-29
|
||||
</div>
|
||||
<div>
|
||||
<i class="bi bi-tags-fill"></i>
|
||||
<a href="/">Tag 2</a>,
|
||||
<a href="/">Tag 3</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="py-2">
|
||||
<hr>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<h5>Categories</h5>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
|
||||
<nav class="navbar navbar-expand-md navbar-light bg-white py-4 ">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="{{ url('/') }}">
|
||||
{{ config('app.name', 'Laravel') }}
|
||||
@ -35,38 +35,59 @@
|
||||
|
||||
<!-- Right Side Of Navbar -->
|
||||
<ul class="navbar-nav ms-auto">
|
||||
|
||||
<li class="nav-item">
|
||||
<a href="" class="nav-link active">Home</a>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a href="" class="nav-link">Blog</a>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a href="" class="nav-link">Photography</a>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a href="" class="nav-link disabled">Music</a>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a href="" class="nav-link">About</a>
|
||||
</li>
|
||||
<!-- Authentication Links -->
|
||||
@guest
|
||||
@if (Route::has('login'))
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
|
||||
</li>
|
||||
@endif
|
||||
{{-- @guest--}}
|
||||
{{-- @if (Route::has('login'))--}}
|
||||
{{-- <li class="nav-item">--}}
|
||||
{{-- <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>--}}
|
||||
{{-- </li>--}}
|
||||
{{-- @endif--}}
|
||||
|
||||
@if (Route::has('register'))
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
|
||||
</li>
|
||||
@endif
|
||||
@else
|
||||
<li class="nav-item dropdown">
|
||||
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
|
||||
{{ Auth::user()->name }}
|
||||
</a>
|
||||
{{-- @if (Route::has('register'))--}}
|
||||
{{-- <li class="nav-item">--}}
|
||||
{{-- <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>--}}
|
||||
{{-- </li>--}}
|
||||
|
||||
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
|
||||
<a class="dropdown-item" href="{{ route('logout') }}"
|
||||
onclick="event.preventDefault();
|
||||
document.getElementById('logout-form').submit();">
|
||||
{{ __('Logout') }}
|
||||
</a>
|
||||
{{-- @endif--}}
|
||||
{{-- @else--}}
|
||||
{{-- <li class="nav-item dropdown">--}}
|
||||
{{-- <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>--}}
|
||||
{{-- {{ Auth::user()->name }}--}}
|
||||
{{-- </a>--}}
|
||||
|
||||
<form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
|
||||
@csrf
|
||||
</form>
|
||||
</div>
|
||||
</li>
|
||||
@endguest
|
||||
{{-- <div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">--}}
|
||||
{{-- <a class="dropdown-item" href="{{ route('logout') }}"--}}
|
||||
{{-- onclick="event.preventDefault();--}}
|
||||
{{-- document.getElementById('logout-form').submit();">--}}
|
||||
{{-- {{ __('Logout') }}--}}
|
||||
{{-- </a>--}}
|
||||
|
||||
{{-- <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">--}}
|
||||
{{-- @csrf--}}
|
||||
{{-- </form>--}}
|
||||
{{-- </div>--}}
|
||||
{{-- </li>--}}
|
||||
{{-- @endguest--}}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
*/
|
||||
|
||||
Route::get('/', function () {
|
||||
return view('welcome');
|
||||
return view('home');
|
||||
});
|
||||
|
||||
Auth::routes();
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user