Add (categories)
This commit is contained in:
3
resources/css/app-front.css
Normal file
3
resources/css/app-front.css
Normal file
@@ -0,0 +1,3 @@
|
||||
.abc {
|
||||
color: "#000";
|
||||
}
|
||||
1
resources/js/app-front.js
Normal file
1
resources/js/app-front.js
Normal file
@@ -0,0 +1 @@
|
||||
import * as bootstrap from "~bootstrap";
|
||||
@@ -1 +0,0 @@
|
||||
import './bootstrap';
|
||||
322
resources/sass/_variables.scss
Normal file
322
resources/sass/_variables.scss
Normal file
@@ -0,0 +1,322 @@
|
||||
// Variables
|
||||
//
|
||||
// Variables should follow the `$component-state-property-size` formula for
|
||||
// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
|
||||
|
||||
// Color system
|
||||
|
||||
// scss-docs-start gray-color-variables
|
||||
$white: #fff;
|
||||
$gray-100: #f8f9fa;
|
||||
$gray-200: #e9ecef;
|
||||
$gray-300: #dee2e6;
|
||||
$gray-400: #ced4da;
|
||||
$gray-500: #adb5bd;
|
||||
$gray-600: #6c757d;
|
||||
$gray-700: #495057;
|
||||
$gray-800: #343a40;
|
||||
$gray-900: #212529;
|
||||
$black: #000;
|
||||
// scss-docs-end gray-color-variables
|
||||
|
||||
// fusv-disable
|
||||
// scss-docs-start gray-colors-map
|
||||
$grays: (
|
||||
"100": $gray-100,
|
||||
"200": $gray-200,
|
||||
"300": $gray-300,
|
||||
"400": $gray-400,
|
||||
"500": $gray-500,
|
||||
"600": $gray-600,
|
||||
"700": $gray-700,
|
||||
"800": $gray-800,
|
||||
"900": $gray-900,
|
||||
);
|
||||
// scss-docs-end gray-colors-map
|
||||
// fusv-enable
|
||||
|
||||
// scss-docs-start color-variables
|
||||
$blue: #0d6efd;
|
||||
$indigo: #6610f2;
|
||||
$purple: #6f42c1;
|
||||
$pink: #d63384;
|
||||
$red: #dc3545;
|
||||
$orange: #fd7e14;
|
||||
$yellow: #ffc107;
|
||||
$green: #198754;
|
||||
$teal: #20c997;
|
||||
$cyan: #0dcaf0;
|
||||
// scss-docs-end color-variables
|
||||
|
||||
// scss-docs-start colors-map
|
||||
$colors: (
|
||||
"blue": $blue,
|
||||
"indigo": $indigo,
|
||||
"purple": $purple,
|
||||
"pink": $pink,
|
||||
"red": $red,
|
||||
"orange": $orange,
|
||||
"yellow": $yellow,
|
||||
"green": $green,
|
||||
"teal": $teal,
|
||||
"cyan": $cyan,
|
||||
"black": $black,
|
||||
"white": $white,
|
||||
"gray": $gray-600,
|
||||
"gray-dark": $gray-800,
|
||||
);
|
||||
// scss-docs-end colors-map
|
||||
|
||||
// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
|
||||
// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
|
||||
$min-contrast-ratio: 4.5;
|
||||
|
||||
// Customize the light and dark text colors for use in our color contrast function.
|
||||
$color-contrast-dark: $black;
|
||||
$color-contrast-light: $white;
|
||||
|
||||
// fusv-disable
|
||||
$blue-100: tint-color($blue, 80%);
|
||||
$blue-200: tint-color($blue, 60%);
|
||||
$blue-300: tint-color($blue, 40%);
|
||||
$blue-400: tint-color($blue, 20%);
|
||||
$blue-500: $blue;
|
||||
$blue-600: shade-color($blue, 20%);
|
||||
$blue-700: shade-color($blue, 40%);
|
||||
$blue-800: shade-color($blue, 60%);
|
||||
$blue-900: shade-color($blue, 80%);
|
||||
|
||||
$indigo-100: tint-color($indigo, 80%);
|
||||
$indigo-200: tint-color($indigo, 60%);
|
||||
$indigo-300: tint-color($indigo, 40%);
|
||||
$indigo-400: tint-color($indigo, 20%);
|
||||
$indigo-500: $indigo;
|
||||
$indigo-600: shade-color($indigo, 20%);
|
||||
$indigo-700: shade-color($indigo, 40%);
|
||||
$indigo-800: shade-color($indigo, 60%);
|
||||
$indigo-900: shade-color($indigo, 80%);
|
||||
|
||||
$purple-100: tint-color($purple, 80%);
|
||||
$purple-200: tint-color($purple, 60%);
|
||||
$purple-300: tint-color($purple, 40%);
|
||||
$purple-400: tint-color($purple, 20%);
|
||||
$purple-500: $purple;
|
||||
$purple-600: shade-color($purple, 20%);
|
||||
$purple-700: shade-color($purple, 40%);
|
||||
$purple-800: shade-color($purple, 60%);
|
||||
$purple-900: shade-color($purple, 80%);
|
||||
|
||||
$pink-100: tint-color($pink, 80%);
|
||||
$pink-200: tint-color($pink, 60%);
|
||||
$pink-300: tint-color($pink, 40%);
|
||||
$pink-400: tint-color($pink, 20%);
|
||||
$pink-500: $pink;
|
||||
$pink-600: shade-color($pink, 20%);
|
||||
$pink-700: shade-color($pink, 40%);
|
||||
$pink-800: shade-color($pink, 60%);
|
||||
$pink-900: shade-color($pink, 80%);
|
||||
|
||||
$red-100: tint-color($red, 80%);
|
||||
$red-200: tint-color($red, 60%);
|
||||
$red-300: tint-color($red, 40%);
|
||||
$red-400: tint-color($red, 20%);
|
||||
$red-500: $red;
|
||||
$red-600: shade-color($red, 20%);
|
||||
$red-700: shade-color($red, 40%);
|
||||
$red-800: shade-color($red, 60%);
|
||||
$red-900: shade-color($red, 80%);
|
||||
|
||||
$orange-100: tint-color($orange, 80%);
|
||||
$orange-200: tint-color($orange, 60%);
|
||||
$orange-300: tint-color($orange, 40%);
|
||||
$orange-400: tint-color($orange, 20%);
|
||||
$orange-500: $orange;
|
||||
$orange-600: shade-color($orange, 20%);
|
||||
$orange-700: shade-color($orange, 40%);
|
||||
$orange-800: shade-color($orange, 60%);
|
||||
$orange-900: shade-color($orange, 80%);
|
||||
|
||||
$yellow-100: tint-color($yellow, 80%);
|
||||
$yellow-200: tint-color($yellow, 60%);
|
||||
$yellow-300: tint-color($yellow, 40%);
|
||||
$yellow-400: tint-color($yellow, 20%);
|
||||
$yellow-500: $yellow;
|
||||
$yellow-600: shade-color($yellow, 20%);
|
||||
$yellow-700: shade-color($yellow, 40%);
|
||||
$yellow-800: shade-color($yellow, 60%);
|
||||
$yellow-900: shade-color($yellow, 80%);
|
||||
|
||||
$green-100: tint-color($green, 80%);
|
||||
$green-200: tint-color($green, 60%);
|
||||
$green-300: tint-color($green, 40%);
|
||||
$green-400: tint-color($green, 20%);
|
||||
$green-500: $green;
|
||||
$green-600: shade-color($green, 20%);
|
||||
$green-700: shade-color($green, 40%);
|
||||
$green-800: shade-color($green, 60%);
|
||||
$green-900: shade-color($green, 80%);
|
||||
|
||||
$teal-100: tint-color($teal, 80%);
|
||||
$teal-200: tint-color($teal, 60%);
|
||||
$teal-300: tint-color($teal, 40%);
|
||||
$teal-400: tint-color($teal, 20%);
|
||||
$teal-500: $teal;
|
||||
$teal-600: shade-color($teal, 20%);
|
||||
$teal-700: shade-color($teal, 40%);
|
||||
$teal-800: shade-color($teal, 60%);
|
||||
$teal-900: shade-color($teal, 80%);
|
||||
|
||||
$cyan-100: tint-color($cyan, 80%);
|
||||
$cyan-200: tint-color($cyan, 60%);
|
||||
$cyan-300: tint-color($cyan, 40%);
|
||||
$cyan-400: tint-color($cyan, 20%);
|
||||
$cyan-500: $cyan;
|
||||
$cyan-600: shade-color($cyan, 20%);
|
||||
$cyan-700: shade-color($cyan, 40%);
|
||||
$cyan-800: shade-color($cyan, 60%);
|
||||
$cyan-900: shade-color($cyan, 80%);
|
||||
|
||||
$blues: (
|
||||
"blue-100": $blue-100,
|
||||
"blue-200": $blue-200,
|
||||
"blue-300": $blue-300,
|
||||
"blue-400": $blue-400,
|
||||
"blue-500": $blue-500,
|
||||
"blue-600": $blue-600,
|
||||
"blue-700": $blue-700,
|
||||
"blue-800": $blue-800,
|
||||
"blue-900": $blue-900,
|
||||
);
|
||||
|
||||
$indigos: (
|
||||
"indigo-100": $indigo-100,
|
||||
"indigo-200": $indigo-200,
|
||||
"indigo-300": $indigo-300,
|
||||
"indigo-400": $indigo-400,
|
||||
"indigo-500": $indigo-500,
|
||||
"indigo-600": $indigo-600,
|
||||
"indigo-700": $indigo-700,
|
||||
"indigo-800": $indigo-800,
|
||||
"indigo-900": $indigo-900,
|
||||
);
|
||||
|
||||
$purples: (
|
||||
"purple-100": $purple-100,
|
||||
"purple-200": $purple-200,
|
||||
"purple-300": $purple-300,
|
||||
"purple-400": $purple-400,
|
||||
"purple-500": $purple-500,
|
||||
"purple-600": $purple-600,
|
||||
"purple-700": $purple-700,
|
||||
"purple-800": $purple-800,
|
||||
"purple-900": $purple-900,
|
||||
);
|
||||
|
||||
$pinks: (
|
||||
"pink-100": $pink-100,
|
||||
"pink-200": $pink-200,
|
||||
"pink-300": $pink-300,
|
||||
"pink-400": $pink-400,
|
||||
"pink-500": $pink-500,
|
||||
"pink-600": $pink-600,
|
||||
"pink-700": $pink-700,
|
||||
"pink-800": $pink-800,
|
||||
"pink-900": $pink-900,
|
||||
);
|
||||
|
||||
$reds: (
|
||||
"red-100": $red-100,
|
||||
"red-200": $red-200,
|
||||
"red-300": $red-300,
|
||||
"red-400": $red-400,
|
||||
"red-500": $red-500,
|
||||
"red-600": $red-600,
|
||||
"red-700": $red-700,
|
||||
"red-800": $red-800,
|
||||
"red-900": $red-900,
|
||||
);
|
||||
|
||||
$oranges: (
|
||||
"orange-100": $orange-100,
|
||||
"orange-200": $orange-200,
|
||||
"orange-300": $orange-300,
|
||||
"orange-400": $orange-400,
|
||||
"orange-500": $orange-500,
|
||||
"orange-600": $orange-600,
|
||||
"orange-700": $orange-700,
|
||||
"orange-800": $orange-800,
|
||||
"orange-900": $orange-900,
|
||||
);
|
||||
|
||||
$yellows: (
|
||||
"yellow-100": $yellow-100,
|
||||
"yellow-200": $yellow-200,
|
||||
"yellow-300": $yellow-300,
|
||||
"yellow-400": $yellow-400,
|
||||
"yellow-500": $yellow-500,
|
||||
"yellow-600": $yellow-600,
|
||||
"yellow-700": $yellow-700,
|
||||
"yellow-800": $yellow-800,
|
||||
"yellow-900": $yellow-900,
|
||||
);
|
||||
|
||||
$greens: (
|
||||
"green-100": $green-100,
|
||||
"green-200": $green-200,
|
||||
"green-300": $green-300,
|
||||
"green-400": $green-400,
|
||||
"green-500": $green-500,
|
||||
"green-600": $green-600,
|
||||
"green-700": $green-700,
|
||||
"green-800": $green-800,
|
||||
"green-900": $green-900,
|
||||
);
|
||||
|
||||
$teals: (
|
||||
"teal-100": $teal-100,
|
||||
"teal-200": $teal-200,
|
||||
"teal-300": $teal-300,
|
||||
"teal-400": $teal-400,
|
||||
"teal-500": $teal-500,
|
||||
"teal-600": $teal-600,
|
||||
"teal-700": $teal-700,
|
||||
"teal-800": $teal-800,
|
||||
"teal-900": $teal-900,
|
||||
);
|
||||
|
||||
$cyans: (
|
||||
"cyan-100": $cyan-100,
|
||||
"cyan-200": $cyan-200,
|
||||
"cyan-300": $cyan-300,
|
||||
"cyan-400": $cyan-400,
|
||||
"cyan-500": $cyan-500,
|
||||
"cyan-600": $cyan-600,
|
||||
"cyan-700": $cyan-700,
|
||||
"cyan-800": $cyan-800,
|
||||
"cyan-900": $cyan-900,
|
||||
);
|
||||
// fusv-enable
|
||||
|
||||
// scss-docs-start theme-color-variables
|
||||
$primary: $blue;
|
||||
$secondary: $gray-600;
|
||||
$success: $green;
|
||||
$info: $cyan;
|
||||
$warning: $yellow;
|
||||
$danger: $red;
|
||||
$light: $gray-100;
|
||||
$dark: $gray-900;
|
||||
// scss-docs-end theme-color-variables
|
||||
|
||||
// scss-docs-start theme-colors-map
|
||||
$theme-colors: (
|
||||
"primary": $primary,
|
||||
"secondary": $secondary,
|
||||
"success": $success,
|
||||
"info": $info,
|
||||
"warning": $warning,
|
||||
"danger": $danger,
|
||||
"light": $light,
|
||||
"dark": $dark,
|
||||
);
|
||||
// scss-docs-end theme-colors-map
|
||||
7
resources/sass/app-front.scss
Normal file
7
resources/sass/app-front.scss
Normal file
@@ -0,0 +1,7 @@
|
||||
@import "variables";
|
||||
|
||||
@import "~bootstrap/scss/bootstrap";
|
||||
|
||||
@import "~/bootstrap-icons/font/bootstrap-icons.css";
|
||||
|
||||
@import "../css/app-front.css";
|
||||
16
resources/views/front/layouts/app.blade.php
Normal file
16
resources/views/front/layouts/app.blade.php
Normal file
@@ -0,0 +1,16 @@
|
||||
<!DOCTYPE html>
|
||||
<html class="" lang="en">
|
||||
|
||||
@include('front.layouts.partials.head')
|
||||
|
||||
<body>
|
||||
@include('googletagmanager::body')
|
||||
<div id="app">
|
||||
@include('front.layouts.partials.nav')
|
||||
<main>
|
||||
@yield('content')
|
||||
</main>
|
||||
@include('front.layouts.partials.footer')
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
3
resources/views/front/layouts/partials/footer.blade.php
Normal file
3
resources/views/front/layouts/partials/footer.blade.php
Normal file
@@ -0,0 +1,3 @@
|
||||
<div class="container">
|
||||
<footer></footer>
|
||||
</div>
|
||||
20
resources/views/front/layouts/partials/head.blade.php
Normal file
20
resources/views/front/layouts/partials/head.blade.php
Normal file
@@ -0,0 +1,20 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
{!! SEOMeta::generate() !!}
|
||||
{!! OpenGraph::generate() !!}
|
||||
{!! Twitter::generate() !!}
|
||||
{!! JsonLdMulti::generate() !!}
|
||||
<meta property="fb:app_id" content="{{ config('seotools.fb_app_id') }}" />
|
||||
<meta name="csrf-token" content="{{ csrf_token() }}">
|
||||
|
||||
<link rel="dns-prefetch" href="//fonts.bunny.net">
|
||||
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
|
||||
<link rel="manifest" href="/site.webmanifest">
|
||||
|
||||
@vite(['resources/sass/app-front.scss', 'resources/js/app-front.js'])
|
||||
{{-- @laravelPWA --}}
|
||||
@include('googletagmanager::head')
|
||||
22
resources/views/front/layouts/partials/nav.blade.php
Normal file
22
resources/views/front/layouts/partials/nav.blade.php
Normal file
@@ -0,0 +1,22 @@
|
||||
<div class="container">
|
||||
<header class="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between py-3 mb-4 border-bottom">
|
||||
<a href="/" class="d-flex align-items-center col-md-3 mb-2 mb-md-0 text-dark text-decoration-none">
|
||||
<span class="fs-4 fw-bolder align-self-center">EchoScoop</span>
|
||||
</a>
|
||||
|
||||
<span>Breaking down news to bite-sized scoops.</span>
|
||||
|
||||
{{-- <ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
|
||||
<li><a href="#" class="nav-link px-2 link-secondary">Home</a></li>
|
||||
<li><a href="#" class="nav-link px-2 link-dark">Features</a></li>
|
||||
<li><a href="#" class="nav-link px-2 link-dark">Pricing</a></li>
|
||||
<li><a href="#" class="nav-link px-2 link-dark">FAQs</a></li>
|
||||
<li><a href="#" class="nav-link px-2 link-dark">About</a></li>
|
||||
</ul>
|
||||
|
||||
<div class="col-md-3 text-end">
|
||||
<button type="button" class="btn btn-outline-primary me-2">Login</button>
|
||||
<button type="button" class="btn btn-primary">Sign-up</button>
|
||||
</div> --}}
|
||||
</header>
|
||||
</div>
|
||||
4
resources/views/vendor/googletagmanager/body.blade.php
vendored
Normal file
4
resources/views/vendor/googletagmanager/body.blade.php
vendored
Normal file
@@ -0,0 +1,4 @@
|
||||
@if($enabled)
|
||||
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id={{ $id }}"
|
||||
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
|
||||
@endif
|
||||
16
resources/views/vendor/googletagmanager/head.blade.php
vendored
Normal file
16
resources/views/vendor/googletagmanager/head.blade.php
vendored
Normal file
@@ -0,0 +1,16 @@
|
||||
@if($enabled)
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
@unless(empty($dataLayer->toArray()))
|
||||
window.dataLayer.push({!! $dataLayer->toJson() !!});
|
||||
@endunless
|
||||
@foreach($pushData as $item)
|
||||
window.dataLayer.push({!! $item->toJson() !!});
|
||||
@endforeach
|
||||
</script>
|
||||
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
|
||||
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
|
||||
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
|
||||
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
|
||||
})(window,document,'script','dataLayer','{{ $id }}');</script>
|
||||
@endif
|
||||
2
resources/views/vendor/googletagmanager/script.blade.php
vendored
Normal file
2
resources/views/vendor/googletagmanager/script.blade.php
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
@include('googletagmanager::head')
|
||||
@include('googletagmanager::body')
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user