The page about the project has been revived.
This commit is contained in:
72
app/application/resources/home/scss/app.scss
Normal file
72
app/application/resources/home/scss/app.scss
Normal file
@@ -0,0 +1,72 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
|
||||
@import "reset";
|
||||
|
||||
body {
|
||||
margin: 0 20px;
|
||||
font-family: "Roboto", sans-serif;
|
||||
}
|
||||
|
||||
.projects-list {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover .projects-list__title {
|
||||
box-shadow: 0px -1px 4px rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
li {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
}
|
||||
.projects-list__img {
|
||||
display: block;
|
||||
background: #ddd;
|
||||
height: 150px;
|
||||
img {
|
||||
object-fit: contain;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
.projects-list__title {
|
||||
background: #ccc;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
padding: 10px;
|
||||
box-shadow: 0px -1px 4px rgba(0, 0, 0, 0.3);
|
||||
transition: box-shadow 0.3s ease-out;
|
||||
}
|
||||
|
||||
@media (min-width: 600px) {
|
||||
.projects-list {
|
||||
display: grid;
|
||||
margin-left: -20px;
|
||||
li {
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 600px) and (max-width: 899px) {
|
||||
.projects-list {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
@media (min-width: 900px) and (max-width: 1100px) {
|
||||
.projects-list {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1001px) {
|
||||
body {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.projects-list {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
}
|
||||
73
app/application/resources/home/scss/reset.scss
Normal file
73
app/application/resources/home/scss/reset.scss
Normal file
@@ -0,0 +1,73 @@
|
||||
/* Box sizing rules */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Prevent font size inflation */
|
||||
html {
|
||||
-moz-text-size-adjust: none;
|
||||
-webkit-text-size-adjust: none;
|
||||
text-size-adjust: none;
|
||||
}
|
||||
|
||||
/* Remove default margin in favour of better control in authored CSS */
|
||||
body, h1, h2, h3, h4, p,
|
||||
figure, blockquote, dl, dd {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
|
||||
ul[role='list'],
|
||||
ol[role='list'] {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* Set core body defaults */
|
||||
body {
|
||||
min-height: 100vh;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Set shorter line heights on headings and interactive elements */
|
||||
h1, h2, h3, h4,
|
||||
button, input, label {
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
/* Balance text wrapping on headings */
|
||||
h1, h2,
|
||||
h3, h4 {
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
/* A elements that don't have a class get default styles */
|
||||
a:not([class]) {
|
||||
text-decoration-skip-ink: auto;
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
/* Make images easier to work with */
|
||||
img,
|
||||
picture {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Inherit fonts for inputs and buttons */
|
||||
input, button,
|
||||
textarea, select {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
/* Make sure textareas without a rows attribute are not tiny */
|
||||
textarea:not([rows]) {
|
||||
min-height: 10em;
|
||||
}
|
||||
|
||||
/* Anything that has been anchored to should have extra scroll margin */
|
||||
:target {
|
||||
scroll-margin-block: 5ex;
|
||||
}
|
||||
8
app/application/resources/site/js/_choose-language.js
Normal file
8
app/application/resources/site/js/_choose-language.js
Normal file
@@ -0,0 +1,8 @@
|
||||
let blockLanguage = document.querySelector('#language');
|
||||
blockLanguage.querySelector('.language__button').addEventListener('click', (e) => {
|
||||
if (blockLanguage.classList.contains('active')) {
|
||||
blockLanguage.classList.remove('active');
|
||||
} else {
|
||||
blockLanguage.classList.add('active');
|
||||
}
|
||||
});
|
||||
8
app/application/resources/site/js/_menu.js
Normal file
8
app/application/resources/site/js/_menu.js
Normal file
@@ -0,0 +1,8 @@
|
||||
let body = document.querySelector('body');
|
||||
document.querySelector('#mobile-menu').addEventListener('click', (e) => {
|
||||
if (body.classList.contains('mobile-menu-open')) {
|
||||
body.classList.remove('mobile-menu-open');
|
||||
} else {
|
||||
body.classList.add('mobile-menu-open');
|
||||
}
|
||||
});
|
||||
2
app/application/resources/site/js/app.js
Normal file
2
app/application/resources/site/js/app.js
Normal file
@@ -0,0 +1,2 @@
|
||||
import './_menu.js';
|
||||
import './_choose-language.js';
|
||||
252
app/application/resources/site/scss/app.scss
Normal file
252
app/application/resources/site/scss/app.scss
Normal file
@@ -0,0 +1,252 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap');
|
||||
@import "reset";
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Roboto", sans-serif;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100%;
|
||||
|
||||
.main-container {
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
.section-container {
|
||||
display: flex;
|
||||
flex: 1 0 auto;
|
||||
min-height: 100%;
|
||||
flex-direction: column;
|
||||
|
||||
.content {
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
.footer {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-areas:
|
||||
"logo menu"
|
||||
"language language";
|
||||
padding: 8px;
|
||||
box-shadow: 0 3px 9px rgba(0,0,0,0.48);
|
||||
background: #eee;
|
||||
}
|
||||
.header_logo {
|
||||
grid-area: logo;
|
||||
max-height: 50px;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
img {
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: #0a0e17;
|
||||
font-size: 20px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
padding: 5px 10px;
|
||||
border: 1px solid #0a0e17;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
#mobile-menu {
|
||||
grid-area: menu;
|
||||
border: 0;
|
||||
background: none;
|
||||
color: #FF2D20;
|
||||
margin-left: auto;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
|
||||
.open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.close {
|
||||
display: none;
|
||||
margin-top: -5px;
|
||||
}
|
||||
}
|
||||
#menu {
|
||||
display: none;
|
||||
|
||||
ul {
|
||||
padding: 10px 0 0 20px;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
font-size: 16px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
color: #0a0e17;
|
||||
}
|
||||
|
||||
a.active {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.menu__title {
|
||||
background: #ccc;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
padding: 12px 0 12px 20px;
|
||||
box-shadow: 0 3px 9px rgba(0,0,0,0.48);
|
||||
}
|
||||
body.mobile-menu-open {
|
||||
#mobile-menu {
|
||||
.open {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.close {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
#menu {
|
||||
background: #ddd;
|
||||
display: block;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
#language {
|
||||
grid-area: language;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.language__block {
|
||||
position: relative;
|
||||
}
|
||||
.language__button {
|
||||
border: 0;
|
||||
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.48);
|
||||
background: #ccc;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
color: #000;
|
||||
}
|
||||
.language__button__str {
|
||||
position: absolute;
|
||||
top: calc(50% - 8px);
|
||||
right: 10px;
|
||||
}
|
||||
.language__list {
|
||||
background: #ddd;
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
list-style: none;
|
||||
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.48);
|
||||
padding: 10px 0;
|
||||
margin: 0;
|
||||
border-radius: 0 0 5px 5px;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
font-size: 16px;
|
||||
display: block;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
}
|
||||
#language.active {
|
||||
.language__list {
|
||||
display: block;
|
||||
}
|
||||
.language__button {
|
||||
border-radius: 5px 5px 0 0;
|
||||
}
|
||||
}
|
||||
.main-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.content {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
h1 {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 10px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
background-color: #eee;
|
||||
padding: 15px 0 15px 15px;
|
||||
box-shadow: 5px 0px 5px rgba(0,0,0,0.48);
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #0a0e17;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1000px) {
|
||||
body {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.header {
|
||||
grid-template-areas: "logo language";
|
||||
grid-template-columns: 1fr 200px;
|
||||
}
|
||||
#mobile-menu {
|
||||
display: none;
|
||||
}
|
||||
.main-container {
|
||||
flex-direction: row;
|
||||
}
|
||||
.language__button {
|
||||
padding: 7px 10px 7px 0;
|
||||
}
|
||||
#menu {
|
||||
background: #eee;
|
||||
display: block;
|
||||
width: 175px;
|
||||
box-shadow: 0px 7px 8px rgba(0,0,0,0.48);
|
||||
}
|
||||
.menu__title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
73
app/application/resources/site/scss/reset.scss
Normal file
73
app/application/resources/site/scss/reset.scss
Normal file
@@ -0,0 +1,73 @@
|
||||
/* Box sizing rules */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Prevent font size inflation */
|
||||
html {
|
||||
-moz-text-size-adjust: none;
|
||||
-webkit-text-size-adjust: none;
|
||||
text-size-adjust: none;
|
||||
}
|
||||
|
||||
/* Remove default margin in favour of better control in authored CSS */
|
||||
body, h1, h2, h3, h4, p,
|
||||
figure, blockquote, dl, dd {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
|
||||
ul[role='list'],
|
||||
ol[role='list'] {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* Set core body defaults */
|
||||
body {
|
||||
min-height: 100vh;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Set shorter line heights on headings and interactive elements */
|
||||
h1, h2, h3, h4,
|
||||
button, input, label {
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
/* Balance text wrapping on headings */
|
||||
h1, h2,
|
||||
h3, h4 {
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
/* A elements that don't have a class get default styles */
|
||||
a:not([class]) {
|
||||
text-decoration-skip-ink: auto;
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
/* Make images easier to work with */
|
||||
img,
|
||||
picture {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Inherit fonts for inputs and buttons */
|
||||
input, button,
|
||||
textarea, select {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
/* Make sure textareas without a rows attribute are not tiny */
|
||||
textarea:not([rows]) {
|
||||
min-height: 10em;
|
||||
}
|
||||
|
||||
/* Anything that has been anchored to should have extra scroll margin */
|
||||
:target {
|
||||
scroll-margin-block: 5ex;
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
<div id="language">
|
||||
<div class="language__block">
|
||||
<button class="language__button" type="button" aria-label="{{ __('site.Choose language') }}">
|
||||
<svg width="16" height="16" data-slot="icon" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m10.5 21 5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 0 1 6-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 0 1-3.827-5.802"></path>
|
||||
</svg>
|
||||
{{ $language->title }}
|
||||
<svg width="16" height="16" class="language__button__str" data-slot="icon" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<ul class="language__list">
|
||||
@foreach($languages as $lang)
|
||||
@php
|
||||
$code = '';
|
||||
if ($lang->is_default !== true) {
|
||||
$code = '/language/' . $lang->code;
|
||||
} else if($link === '') {
|
||||
$code = '/';
|
||||
}
|
||||
@endphp
|
||||
<li><a href="{{ $link . $code }}">{{ $lang->title }}</a></li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
16
app/application/resources/views/layout/home.blade.php
Normal file
16
app/application/resources/views/layout/home.blade.php
Normal file
@@ -0,0 +1,16 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
|
||||
<title>@yield('meta_title', '')</title>
|
||||
<meta name="keywords" content="@yield('meta_keywords', '')" />
|
||||
<meta name="description" content="@yield('meta_description', '')" />
|
||||
|
||||
@vite('resources/home/scss/app.scss')
|
||||
</head>
|
||||
<body>
|
||||
{{ $slot }}
|
||||
</body>
|
||||
</html>
|
||||
55
app/application/resources/views/layout/site.blade.php
Normal file
55
app/application/resources/views/layout/site.blade.php
Normal file
@@ -0,0 +1,55 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ $language->code }}">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
|
||||
<title>@yield('meta_title', '')</title>
|
||||
<meta name="keywords" content="@yield('meta_keywords', '')" />
|
||||
<meta name="description" content="@yield('meta_description', '')" />
|
||||
|
||||
@vite('resources/site/scss/app.scss')
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<header class="header">
|
||||
<div class="header_logo">
|
||||
<a href="{{ \App\Enums\Site\ProjectSection::Home->url($project, $language) }}">
|
||||
@if($logo)
|
||||
<img src="{{ $logo->url }}" alt="{{ $project->name }}">
|
||||
@else
|
||||
<strong>{{ $project->name }}</strong>
|
||||
@endif
|
||||
</a>
|
||||
</div>
|
||||
<button id="mobile-menu" type="button" aria-label="{{ __('site.Menu') }}">
|
||||
<svg class="open" width="45" height="45" data-slot="icon" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"></path>
|
||||
</svg>
|
||||
<svg class="close" width="45" height="45" data-slot="icon" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<x-site.choose-language :language="$language" :languages="$project->languages" />
|
||||
</header>
|
||||
<div class="main-container">
|
||||
<nav id="menu">
|
||||
<div class="menu__title">{{ __('site.Menu') }}</div>
|
||||
<ul>
|
||||
<li><a href="{{ \App\Enums\Site\ProjectSection::Home->url($project, $language) }}" @class(['active' => request()->route()->named(['home', 'language.home'])])>{{ __('site.About project') }}</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="section-container">
|
||||
<div class="content">
|
||||
<h1>@yield('h1', '')</h1>
|
||||
{{ $slot }}
|
||||
</div>
|
||||
<footer class="footer">
|
||||
<a href="https://git.kor-elf.net/kor-elf/my-projects-website" target="_blank">{{ __('site.Powered by service') }}</a>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@vite('resources/site/js/app.js')
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,5 @@
|
||||
@section('h1', __('site.Page without translation'))
|
||||
|
||||
<x-site.layout :project="$project" :language="$language">
|
||||
|
||||
</x-site.layout>
|
||||
@@ -0,0 +1,6 @@
|
||||
@section('meta_title', __('site.Project') . ': ' . $content->title)
|
||||
@section('h1', $content->title)
|
||||
|
||||
<x-site.layout :project="$project" :language="$language">
|
||||
{!! $content->description !!}
|
||||
</x-site.layout>
|
||||
@@ -0,0 +1,18 @@
|
||||
@section('meta_title', __('site.Projects'))
|
||||
|
||||
<x-home-layout>
|
||||
<h1>{{ __('site.Projects') }}</h1>
|
||||
<ul class="projects-list">
|
||||
@foreach($projects as $project)
|
||||
@php
|
||||
$logo = $project->getStorageOne(\App\Enums\StorageType::Logo);
|
||||
@endphp
|
||||
<li>
|
||||
<a href="{{ \App\Enums\Site\ProjectSection::Home->url($project) }}">
|
||||
<span class="projects-list__img">@if($logo)<img src="{{ $logo->url }}" alt="{{ $project->name }}">@endif</span>
|
||||
<span class="projects-list__title">{{ $project->name }}</span>
|
||||
</a>
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</x-home-layout>
|
||||
Reference in New Issue
Block a user