More page style tweaks
timw4mail/HummingBirdAnimeClient/develop This commit looks good Details

This commit is contained in:
Timothy Warren 2018-10-30 13:05:49 -04:00
parent fa27abb954
commit 3244db3438
3 changed files with 24 additions and 7 deletions

View File

@ -4,7 +4,7 @@ use Aviat\AnimeClient\API\Kitsu;
?> ?>
<main class="details fixed"> <main class="details fixed">
<section class="flex flex-no-wrap"> <section class="flex flex-no-wrap">
<aside class="info cover"> <div>
<picture> <picture>
<source srcset="<?= $urlGenerator->assetUrl("images/characters/{$data[0]['id']}-original.webp") ?>" type="image/webp"> <source srcset="<?= $urlGenerator->assetUrl("images/characters/{$data[0]['id']}-original.webp") ?>" type="image/webp">
<source srcset="<?= $urlGenerator->assetUrl("images/characters/{$data[0]['id']}-original.jpg") ?>" type="image/jpeg"> <source srcset="<?= $urlGenerator->assetUrl("images/characters/{$data[0]['id']}-original.jpg") ?>" type="image/jpeg">
@ -16,8 +16,8 @@ use Aviat\AnimeClient\API\Kitsu;
<h4><?= $name ?></h4> <h4><?= $name ?></h4>
<?php endforeach ?> <?php endforeach ?>
<?php endif ?> <?php endif ?>
</aside> </div>
<article class="text"> <div>
<h2><?= $data['name'] ?></h2> <h2><?= $data['name'] ?></h2>
<?php foreach ($data['names'] as $name): ?> <?php foreach ($data['names'] as $name): ?>
<h3><?= $name ?></h3> <h3><?= $name ?></h3>
@ -26,7 +26,7 @@ use Aviat\AnimeClient\API\Kitsu;
<hr /> <hr />
<p class="description"><?= $data[0]['attributes']['description'] ?></p> <p class="description"><?= $data[0]['attributes']['description'] ?></p>
</article> </div>
</section> </section>
<?php if (array_key_exists('anime', $data['included']) || array_key_exists('manga', $data['included'])): ?> <?php if (array_key_exists('anime', $data['included']) || array_key_exists('manga', $data['included'])): ?>
@ -147,7 +147,7 @@ use Aviat\AnimeClient\API\Kitsu;
</article> </article>
</td> </td>
<td> <td>
<section class="align_left media-wrap"> <section class="align_left media-wrap-flex">
<?php foreach ($c['series'] as $series): ?> <?php foreach ($c['series'] as $series): ?>
<article class="media"> <article class="media">
<?php <?php

File diff suppressed because one or more lines are too long

View File

@ -111,6 +111,10 @@ a:hover, a:active {
justify-content: space-around justify-content: space-around
} }
.flex-center {
justify-content: center;
}
.flex-self-center { .flex-self-center {
align-self: center align-self: center
} }
@ -152,11 +156,23 @@ a:hover, a:active {
} }
.media-wrap { .media-wrap {
text-align: center; text-align: left;
margin: 0 auto; margin: 0 auto;
position: relative; position: relative;
} }
.media-wrap-flex {
display: flex;
flex-wrap: wrap;
align-content: space-evenly;
justify-content: space-between;
position:relative;
}
td .media-wrap-flex {
justify-content: center;
}
.danger { .danger {
background-color: #ff4136; background-color: #ff4136;
border-color: #924949; border-color: #924949;
@ -453,6 +469,7 @@ picture.cover {
} }
.media > .name a { .media > .name a {
display: inline-block;
transition: none; transition: none;
} }