Backend for songs.zachdecook.com
- Performance: Lighten CSS using MVP instead of bootstrap
| -rw-r--r-- | laravel/resources/css/mvp.css | 415 | ||||
| -rw-r--r-- | laravel/resources/css/song.css | 11 | ||||
| -rw-r--r-- | laravel/resources/sass/app.scss | 11 | ||||
| -rw-r--r-- | laravel/resources/views/layouts/app.blade.php | 19 | ||||
| -rw-r--r-- | laravel/resources/views/song.blade.php | 16 | ||||
| -rw-r--r-- | laravel/webpack.mix.js | 2 |
6 files changed, 427 insertions, 47 deletions
diff --git a/laravel/resources/css/mvp.css b/laravel/resources/css/mvp.css new file mode 100644 index 0000000..44ac702 --- /dev/null +++ b/laravel/resources/css/mvp.css @@ -0,0 +1,415 @@ +/* MVP.css v1.6 - https://github.com/andybrewer/mvp */ + +:root { + --border-radius: 5px; + --box-shadow: 2px 2px 10px; + --color: #480e6e; + --color-accent: #118bee15; + --color-bg: #000; + --color-bg-secondary: #e9e9e9; + --color-secondary: #920de9; + --color-secondary-accent: #920de90b; + --color-shadow: #f4f4f4; + --color-text: #fff; + --color-text-secondary: #999; + --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + --hover-brightness: 1.2; + --justify-important: center; + --justify-normal: left; + --line-height: 1.5; + --width-card: 285px; + --width-card-medium: 460px; + --width-card-wide: 800px; + --width-content: 1080px; +} + +/* +@media (prefers-color-scheme: dark) { + :root { + --color: #0097fc; + --color-accent: #0097fc4f; + --color-bg: #333; + --color-bg-secondary: #555; + --color-secondary: #e20de9; + --color-secondary-accent: #e20de94f; + --color-shadow: #bbbbbb20; + --color-text: #f7f7f7; + --color-text-secondary: #aaa; + } +} +*/ + +/* Layout */ +article aside { + background: var(--color-secondary-accent); + border-left: 4px solid var(--color-secondary); + padding: 0.01rem 0.8rem; +} + +body { + background: var(--color-bg); + color: var(--color-text); + font-family: var(--font-family); + line-height: var(--line-height); + margin: 0; + overflow-x: hidden; +} + +footer, +header, +main { + margin: 0 auto; + max-width: var(--width-content); + padding: 1rem; +} + +hr { + background-color: var(--color-bg-secondary); + border: none; + height: 1px; + margin: 4rem 0; +} + +section { + display: flex; + flex-wrap: wrap; + justify-content: var(--justify-important); +} + +section aside { + border: 1px solid var(--color-bg-secondary); + border-radius: var(--border-radius); + box-shadow: var(--box-shadow) var(--color-shadow); + margin: 1rem; + padding: 1.25rem; + width: var(--width-card); +} + +section aside:hover { + box-shadow: var(--box-shadow) var(--color-bg-secondary); +} + +section aside img { + max-width: 100%; +} + +[hidden] { + display: none; +} + +/* Headers */ +article header, +div header, +nav ~ main, +main header { + padding-top: 0; +} + +header { + text-align: var(--justify-important); +} + +header a b, +header a em, +header a i, +header a strong { + margin-left: 0.5rem; + margin-right: 0.5rem; +} + +header nav img { + margin: 1rem 0; +} + +section header { + padding-top: 0; + width: 100%; +} + +/* Nav */ +nav { + align-items: center; + display: flex; + font-weight: bold; + justify-content: space-between; +} + +nav ul { + list-style: none; + padding: 0; +} + +nav ul li { + display: inline-block; + margin: 0 0.5rem; + position: relative; + text-align: left; +} + +/* Nav Dropdown */ +nav ul li:hover ul { + display: block; +} + +nav ul li ul { + background: var(--color-bg); + border: 1px solid var(--color-bg-secondary); + border-radius: var(--border-radius); + box-shadow: var(--box-shadow) var(--color-shadow); + display: none; + height: auto; + padding: .5rem 1rem; + position: absolute; + left: -2px; + top: 1.7rem; + width: auto; +} + +nav ul li ul li, +nav ul li ul li a { + display: block; +} + +/* Typography */ +code, +samp { + background-color: var(--color-accent); + border-radius: var(--border-radius); + color: var(--color-text); + display: inline-block; + margin: 0 0.1rem; + padding: 0rem 0.5rem; +} + +details { + margin: 1.3rem 0; +} + +details summary { + font-weight: bold; + cursor: pointer; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + line-height: var(--line-height); + margin: 0; +} + +mark { + padding: 0.1rem; +} + +ol li, +ul li { + padding: 0.2rem 0; +} + +p { + margin: 0.75rem 0; + padding: 0; +} + +pre code, +pre samp { + display: block; + max-width: var(--width-card-wide); + padding: 0.5rem 2rem; + white-space: pre-wrap; +} + +small { + color: var(--color-text-secondary); +} + +sup { + background-color: var(--color-secondary); + border-radius: var(--border-radius); + color: var(--color-bg); + font-size: xx-small; + font-weight: bold; + margin: 0.2rem; + padding: 0.2rem 0.3rem; + position: relative; + top: -2px; +} + +/* Links */ +a { + color: var(--color-secondary); + display: inline-block; + font-weight: bold; + text-decoration: none; +} + + +a b, +a em, +a i, +a strong, +button { + border-radius: var(--border-radius); + display: inline-block; + font-size: medium; + font-weight: bold; + line-height: var(--line-height); + margin: 0.5rem 0; + padding: .5rem; +} + +button { + font-family: var(--font-family); +} + +button:hover { + cursor: pointer; + filter: brightness(var(--hover-brightness)); +} + +a b, +a strong, +button { + background-color: var(--color); + border: 2px solid var(--color); + color: var(--color-bg); +} + +a em, +a i { + border: 2px solid var(--color); + border-radius: var(--border-radius); + color: var(--color); + display: inline-block; +} + +/* Images */ +figure { + margin: 0; + padding: 0; +} + +figure img { + max-width: 100%; +} + +figure figcaption { + color: var(--color-text-secondary); +} + +/* Forms */ + +button:disabled, +input:disabled { + background: var(--color-bg-secondary); + border-color: var(--color-bg-secondary); + color: var(--color-text-secondary); + cursor: not-allowed; +} + +button[disabled]:hover { + filter: none; +} + +form header { + margin: 1.5rem 0; + padding: 1.5rem 0; +} + +input[type="checkbox"], +input[type="radio"] { + display: inline-block; +} + +input[type="checkbox"]+label, +input[type="radio"]+label { + display: inline-block; + font-weight: normal; + position: relative; + top: 1px; +} + +input, +select, +textarea { + border: 1px solid var(--color-bg-secondary); + border-radius: var(--border-radius); + margin-bottom: 1rem; + padding: 0.4rem 0.8rem; +} + +input[readonly], +textarea[readonly] { + background-color: var(--color-bg-secondary); +} + +label { + font-weight: bold; + margin-bottom: 0.2rem; +} + +/* Tables */ +table { + border: 1px solid var(--color-bg-secondary); + border-radius: var(--border-radius); + border-spacing: 0; + display: block; + padding: 0; +} + +table td, +table th, +table tr { + padding: 0.4rem 0.8rem; + text-align: var(--justify-important); +} + +table thead { + background-color: var(--color); + border-collapse: collapse; + border-radius: var(--border-radius); + color: var(--color-bg); + margin: 0; + padding: 0; +} + +table thead th:first-child { + border-top-left-radius: var(--border-radius); +} + +table thead th:last-child { + border-top-right-radius: var(--border-radius); +} + +table thead th:first-child, +table tr td:first-child { + text-align: var(--justify-normal); +} + +table tr:nth-child(even) { + background-color: var(--color-accent); +} + +/* Quotes */ +blockquote { + display: block; + font-size: x-large; + line-height: var(--line-height); + margin: 1rem auto; + max-width: var(--width-card-medium); + padding: 1.5rem 1rem; + text-align: var(--justify-important); +} + +blockquote footer { + color: var(--color-text-secondary); + display: block; + font-size: small; + line-height: var(--line-height); + padding: 1.5rem 0; +} + +/* Custom styles */ diff --git a/laravel/resources/css/song.css b/laravel/resources/css/song.css index eba414a..743dd37 100644 --- a/laravel/resources/css/song.css +++ b/laravel/resources/css/song.css @@ -2,17 +2,6 @@ div.controlArea{ display: flex; justify-content: space-between; } -a.back, a.home, a.next, a.but{ - border: 2px solid var(--gray); - color: var(--dark); - padding: 3px; - margin: 3px; - text-decoration: none; -} -a.back:hover, a.home:hover, a.next:hover, a.but:hover{ - color: var(--light); - background-color: var(--secondary); -} div, .container, .navbar-brand{ background-color:var(--light); color:var(--dark);} body{--light: black; --dark: white; color: var(--dark);} diff --git a/laravel/resources/sass/app.scss b/laravel/resources/sass/app.scss deleted file mode 100644 index 3ca36da..0000000 --- a/laravel/resources/sass/app.scss +++ /dev/null @@ -1,11 +0,0 @@ - -// Variables -@import 'variables'; - -// Bootstrap -@import '~bootstrap/scss/bootstrap'; - -.navbar-laravel { - background-color: #fff; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04); -} diff --git a/laravel/resources/views/layouts/app.blade.php b/laravel/resources/views/layouts/app.blade.php index e6a2d0c..65b9003 100644 --- a/laravel/resources/views/layouts/app.blade.php +++ b/laravel/resources/views/layouts/app.blade.php @@ -17,25 +17,14 @@ </head> <body> <div id="app"> - <nav class="navbar navbar-expand-md navbar-dark navbar-laravel"> - <div class="container"> + <nav> + <ul> <a class="navbar-brand" href="{{ url('/') }}"> {{ config('app.name', 'Laravel') }} </a> - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}"> - <span class="navbar-toggler-icon"></span> - </button> - - <div class="collapse navbar-collapse" id="navbarSupportedContent"> - <!-- Left Side Of Navbar --> - <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link" href="{{route('playlist.show','new')}}">Add new songs!</a> </li> - </ul> - - <!-- Right Side Of Navbar --> - <ul class="navbar-nav ml-auto"> <!-- Authentication Links --> @guest <li class="nav-item"> @@ -65,9 +54,7 @@ </div> </li> @endguest - </ul> - </div> - </div> + </ul> </nav> <main class="py-4"> diff --git a/laravel/resources/views/song.blade.php b/laravel/resources/views/song.blade.php index 6871a91..5fdc847 100644 --- a/laravel/resources/views/song.blade.php +++ b/laravel/resources/views/song.blade.php @@ -6,21 +6,21 @@ <div class='controlArea'> @if( isset( $back ) ) <a class='back' href='{{route('song.show', ['song' => $back, 'playlist' => $playlist ?? ''])}}'> - {{$back->name}} + <b>{{$back->name}}</b> </a> @endif @if( $playlist ?? FALSE) <a class='home' href='{{route('playlist.show',['playlist' => $playlist->name])}}'> - Back to {{$playlist->name}} + <i>Back to {{$playlist->name}}</i> </a> @else <a class='home' href='{{route('song.list')}}'> - Go home + <i>Go home</i> </a> @endif @if( isset( $next ) ) <a class='next' href='{{route('song.show', ['song' => $next, 'playlist' => $playlist ?? ''])}}'> - {{$next->name}} + <b>{{$next->name}}</b> </a> @endif </div> @@ -61,10 +61,10 @@ </select> <button>Transpose</button> </form> - @foreach (['G','D','C'] as $possibleKey) + @foreach (['G','D','C','A'] as $possibleKey) @if($possibleKey != ($_GET['transp'] ?? $song->key)) <form style="display: inline-block;"> - <button>Transpose to {{$possibleKey}}</button> + <button>to {{$possibleKey}}</button> <input type='hidden' name='transp' value='{{$possibleKey}}'> </form> @endif @@ -78,10 +78,10 @@ @foreach ($suggestions as $sug) <div class='controlArea'> - <a class='but' href='{{route('song.suggested', ['song' => $sug, 'from' => $song, 'playlist' => $playlist ?? ''])}}'>{{$sug->name}}</a> + <a class='but' href='{{route('song.suggested', ['song' => $sug, 'from' => $song, 'playlist' => $playlist ?? ''])}}'><b>{{$sug->name}}</b></a> @if ($key && $sug->key) <a class='but' data-words='transposed to ' data-key='{{$key}}' href='{{route('song.suggested', ['song' => $sug, 'from' => $song, 'key' => $key, 'playlist' => $playlist ?? ''])}}'> - transposed to {{$key}} + <i>transposed to {{$key}}</i> </a> @endif </div> diff --git a/laravel/webpack.mix.js b/laravel/webpack.mix.js index d41ef9e..162f138 100644 --- a/laravel/webpack.mix.js +++ b/laravel/webpack.mix.js @@ -12,6 +12,6 @@ const mix = require('laravel-mix'); */ mix - .sass('resources/sass/app.scss', 'public/css') .copy('node_modules/ccharter/scripts/ccharter.js', 'public/js/ccharter.js') + .copy('resources/css/mvp.css', 'public/css/app.css') .copy('resources/css/song.css', 'public/css/song.css'); |