intervle - commit 1c44df4

diff --git a/resources/css/app.css b/resources/css/app.css index 3e6abea..32a8697 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -9,3 +9,43 @@ --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; } + +:root { + --font-size-standard: 20px; + --page-width: 1000px; + --event-container-width: 740px; + --border-radius-standard: 4px; + + --background-standard: #e0e0e0; + --background-backdrop: #bebebe; + + --background-event-card-idle: #ffffff; + --background-event-card-hover: #eeeeee; + --background-event-card-click: #dddddd; + --background-event-card-correct: #acecae; + --background-event-card-incorrect: #ecacae; + + --border-event-card-idle: 1px solid #969696; + --border-event-card-hover: 1px solid #797979; + --border-event-card-click: 1px solid #575757; + --border-event-card-correct: 1px solid #83d287; + --border-event-card-incorrect: 1px solid #d78486; +} + +html { + font-size: var(--font-size-standard); + background: var(--background-backdrop); +} + +body { + background: var(--background-standard); + max-width: var(--page-width); + text-align: center; + margin: 64px auto; + border-radius: var(--border-radius-standard); + +} + +header { + padding: 12px; +} diff --git a/resources/css/game.css b/resources/css/game.css new file mode 100644 index 0000000..d349590 --- /dev/null +++ b/resources/css/game.css @@ -0,0 +1,28 @@ +#events-container { + max-width: var(--event-container-width); + margin: auto; +} + +.event-container { + background: var(--background-event-card-idle); + outline: var(--border-event-card-idle); + border-radius: var(--border-radius-standard); + margin: 8px; + padding: 12px; + text-align: left; + + cursor: grab; + transition: 0.1s ease; +} +.event-container:hover { + background: var(--background-event-card-hover); + outline: var(--border-event-card-hover); +} +.event-container:active { + background: var(--background-event-card-click); + outline: var(--border-event-card-click); + + cursor: grabbing; + opacity: 40%; + scale: 110%; +} diff --git a/resources/views/game/show.blade.php b/resources/views/game/show.blade.php index cfc7593..30e97e3 100644 --- a/resources/views/game/show.blade.php +++ b/resources/views/game/show.blade.php @@ -5,10 +5,13 @@ @section('content') <div class="page-section"> - <p>Implement Game</p> - @foreach ($events as $event) - <p>{{ $event->description }}</p> - @endforeach + <div id="events-container"> + @foreach ($events as $event) + <div data-event="{{ $event->id }}" class="event-container"> + <span>{{ $event->description }}</span> + </div> + @endforeach + </div> </div> @endsection diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php index 2e29c18..5f53ca5 100644 --- a/resources/views/layouts/app.blade.php +++ b/resources/views/layouts/app.blade.php @@ -6,12 +6,13 @@ <title>{{ config('app.name', 'Intervle') }}</title> @if (file_exists(public_path('build/manifest.json')) || file_exists(public_path('hot'))) - @vite(['resources/css/app.css', 'resources/js/app.js']) + @vite(['resources/css/app.css', 'resources/js/app.js', 'resources/css/game.css']) @endif </head> <body> <header> - <a href="/"><img alt="{{ config('app.name', 'Intervle') }} Logo" src="{{ asset('storage/logo.png') }}"></a> + <!--<a href="/"><img alt="{{ config('app.name', 'Intervle') }} Logo" src="{{ asset('storage/logo.png') }}"></a>--> + <h1>{{ config('app.name', 'Intervle') }}</h1> </header> <main>