Minor layout changes

This commit is contained in:
2022-09-04 22:12:35 +02:00
parent d5c5c93fcd
commit 8b3232f349
3 changed files with 17 additions and 10 deletions

View File

@ -1,4 +1,4 @@
<div {{ $attributes->merge(['class' => "flex lg:flex-row flex-col m-auto max-w-5xl py-8 gap-x-10"]) }}>
<div {{ $attributes->merge(['class' => "flex md:flex-row flex-col m-auto max-w-5xl py-8 gap-x-10"]) }}>
<div class="lg:w-1/2 w-full flex p-4 align-middle items-center">
<div class="flex flex-col">
@isset ($title)
@ -7,6 +7,6 @@
<p class="text-lg">{{ $slot }}</p>
</div>
</div>
<div class="lg:w-1/2 w-full items-center align-middle rounded-lg" style='background-color: #EEE; background-position: {{ $yPosition ?? 'center' }} center; background-image: url("{{ $imgSrc ?? '' }}"); background-repeat: no-repeat; background-size: cover; min-height: 250px;'>
<div class="lg:w-1/2 w-full items-center align-middle rounded-lg shadow-lg" style='background-color: #EEE; background-position: {{ $yPosition ?? 'center' }} center; background-image: url("{{ $imgSrc ?? '' }}"); background-repeat: no-repeat; background-size: cover; min-height: 250px;'>
</div>
</div>

View File

@ -25,8 +25,12 @@
<meta name="theme-color" content="#ffffff">
{{-- Vite --}}
@vite('resources/css/app.css')
{{-- Web Fonts --}}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
<body class="font-sans">
<div>
<div class="bg-blue-50 flex">
<header class="flex flex-col m-auto max-w-xl py-5 md:py-8 lg:py-10 p-4">
@ -35,11 +39,11 @@
<h1 class="text-5xl font-bold mb-3 text-blue-800">
Monitor and manage<br/>your PHP installations<br/> <span class="text-black">with ease</span>.
</h1>
<p class="text-2xl leading-8 mt-8"><b>PHP Monitor</b> (”phpmon”) is a lightweight, native Mac menu bar app that interacts with <a href="https://github.com/laravel/valet" class="text-blue-800 underline">Laravel Valet</a>.</p>
<div class="flex justify-center space-x-3 mt-6">
<a href="https://nicoverbruggen.be/sponsor" class="mt-4 text-lg px-3 py-2 inline-block bg-blue-900 hover:bg-blue-800 text-white rounded-lg">Sponsor</a>
<a href="https://github.com/nicoverbruggen/phpmon" class="mt-4 text-lg px-3 py-2 inline-block bg-blue-900 hover:bg-blue-800 text-white rounded-lg">GitHub</a>
<a href="https://github.com/nicoverbruggen/phpmon/releases" class="mt-4 text-lg px-3 py-2 inline-block bg-green-800 hover:bg-blue-800 text-white rounded-lg">Download</a>
<p class="text-2xl leading-8 mt-8"><b>PHP Monitor</b> (”phpmon”) is a lightweight, native Mac menu bar app that interacts with <a href="https://github.com/laravel/valet" class="text-blue-800 underline">Valet</a>.</p>
<div class="flex space-x-3 mt-6">
<a href="https://nicoverbruggen.be/sponsor" class="mt-4 text-lg px-3 py-2 inline-block bg-blue-900 hover:bg-blue-800 text-white rounded-lg shadow-md">Sponsor</a>
<a href="https://github.com/nicoverbruggen/phpmon" class="mt-4 text-lg px-3 py-2 inline-block bg-blue-900 hover:bg-blue-800 text-white rounded-lg shadow-md">GitHub</a>
<a href="https://github.com/nicoverbruggen/phpmon/releases" class="mt-4 text-lg px-3 py-2 inline-block bg-green-800 hover:bg-blue-800 text-white rounded-lg shadow-md">Download</a>
</div>
</div>
</header>
@ -47,7 +51,7 @@
<div class="px-4">
<div class="flex flex-col m-auto max-w-3xl py-10">
<div class="max-w-3xl m-auto">
<img src="/images/phpmon.jpg" alt="PHP Monitor" class="m-auto max-w-3xl max-w-full bg-gray-100">
<img src="{{ url('/images/phpmon.jpg') }}" alt="PHP Monitor" class="m-auto max-w-3xl max-w-full bg-gray-100 rounded-xl shadow-lg">
</div>
<div class="max-w-2xl m-auto mt-12">
<p class="text-2xl leading-9 mb-6"><b>PHP Monitor</b> helps you set up and develop <span class="text-blue-800">Laravel</span> and <span class="text-blue-800">Symfony</span> projects. It's also great for <span class="text-blue-800">WordPress</span> or <span class="text-blue-800">Drupal</span> sites. In fact, it's a great companion for all kinds of projects.</p>
@ -55,7 +59,7 @@
</div>
</div>
<x-feature title="A solid foundation." img-src="/images/valet.png">
PHP Monitor builds upon the excellent <b>Laravel Valet</b>. That means that PHP Monitor builds upon a solid and trusted foundation. If you've already got that installed, it's easy to get started.
PHP Monitor interacts with your local <b>Laravel Valet</b> installation. That means that PHP Monitor builds upon a solid and trusted foundation. If you've already got that installed, it's very easy to get started.
</x-feature>
<x-feature title="Information at a glance." img-src="/images/menu-bar.png" y-position="top" class="lg:flex-row-reverse">
PHP Monitor lives in your menu bar. From here, you can use the bulk of PHP Monitor's functionality, including the <b>global version switcher</b> as well as <b>services status</b> section.

View File

@ -6,6 +6,9 @@ module.exports = {
"./resources/**/*.vue",
],
theme: {
fontFamily: {
'sans': ['Inter', 'sans-serif']
},
extend: {},
},
plugins: [],