mirror of
https://github.com/ceratic/MediaCollectorLibary.git
synced 2026-05-13 23:56:46 +02:00
dont know ?
This commit is contained in:
Lars Behrends
@@ -1,118 +1,71 @@
|
||||
.items,
|
||||
.item {
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
.items .item,
|
||||
.item .item {
|
||||
margin: 20px;
|
||||
width: 120px;
|
||||
height: 180px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 5px 10px rgba(0,0,0,0.8);
|
||||
transform-origin: center top;
|
||||
transform-style: preserve-3d;
|
||||
transform: translateZ(0);
|
||||
transition: 0.3s;
|
||||
}
|
||||
.items .item img,
|
||||
.item .item img {
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
}
|
||||
.items .item figcaption,
|
||||
.item .item figcaption {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 20px;
|
||||
padding-bottom: 10px;
|
||||
font-size: 20px;
|
||||
background: none;
|
||||
color: #fff;
|
||||
transform: translateY(100%);
|
||||
transition: 0.3s;
|
||||
}
|
||||
.items .item:after,
|
||||
.item .item:after {
|
||||
content: '';
|
||||
z-index: 10;
|
||||
width: 200%;
|
||||
height: 100%;
|
||||
top: -90%;
|
||||
left: -20px;
|
||||
opacity: 0.1;
|
||||
transform: rotate(45deg);
|
||||
background: linear-gradient(to top, transparent, #fff 15%, rgba(255,255,255,0.5));
|
||||
transition: 0.3s;
|
||||
}
|
||||
.items .item:hover,
|
||||
.item .item:hover,
|
||||
.items .item:focus,
|
||||
.item .item:focus,
|
||||
.items .item:active,
|
||||
.item .item:active {
|
||||
box-shadow: 0 8px 16px 3px rgba(0,0,0,0.6);
|
||||
transform: translateY(-3px) scale(1.05) rotateX(15deg);
|
||||
}
|
||||
.items .item:hover figcaption,
|
||||
.item .item:hover figcaption,
|
||||
.items .item:focus figcaption,
|
||||
.item .item:focus figcaption,
|
||||
.items .item:active figcaption,
|
||||
.item .item:active figcaption {
|
||||
transform: none;
|
||||
}
|
||||
.items .item:hover:after,
|
||||
.item .item:hover:after,
|
||||
.items .item:focus:after,
|
||||
.item .item:focus:after,
|
||||
.items .item:active:after,
|
||||
.item .item:active:after {
|
||||
transform: rotate(25deg);
|
||||
top: -40%;
|
||||
opacity: 0.15;
|
||||
}
|
||||
.item .article {
|
||||
overflow: hidden;
|
||||
width: 350px;
|
||||
height: 235px;
|
||||
margin: 20px;
|
||||
}
|
||||
.item .article img {
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
transition: 0.2s;
|
||||
}
|
||||
.item .article figcaption {
|
||||
font-size: 14px;
|
||||
text-shadow: 0 1px 0 rgba(51,51,51,0.3);
|
||||
color: #fff;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
padding: 40px;
|
||||
box-shadow: 0 0 2px rgba(0,0,0,0.2);
|
||||
background: rgba(6,18,53,0.6);
|
||||
opacity: 0;
|
||||
transform: scale(1.15);
|
||||
transition: 0.2s;
|
||||
}
|
||||
.item .article figcaption h3 {
|
||||
color: #3792e3;
|
||||
font-size: 16px;
|
||||
margin-bottom: 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
.item .article:hover img,
|
||||
.item .article:focus img,
|
||||
.item .article:active img {
|
||||
filter: blur(3px);
|
||||
transform: scale(0.97);
|
||||
}
|
||||
.item .article:hover figcaption,
|
||||
.item .article:focus figcaption,
|
||||
.item .article:active figcaption {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* Custom styles for media cards */
|
||||
.items {
|
||||
@apply flex flex-wrap;
|
||||
}
|
||||
|
||||
.item {
|
||||
@apply m-5 w-32 h-48 overflow-hidden shadow-lg transform-gpu transition-transform duration-300 origin-top;
|
||||
}
|
||||
|
||||
.item img {
|
||||
@apply w-full min-h-full;
|
||||
}
|
||||
|
||||
.item figcaption {
|
||||
@apply absolute bottom-0 left-0 right-0 p-5 pb-2.5 text-xl bg-transparent text-white transform translate-y-full transition-transform duration-300;
|
||||
}
|
||||
|
||||
.item::after {
|
||||
content: '';
|
||||
@apply absolute z-10 w-full h-full -top-9/10 -left-5 opacity-10 rotate-45 bg-gradient-to-t from-transparent via-white/15 to-white/50 transition-all duration-300;
|
||||
}
|
||||
|
||||
.item:hover,
|
||||
.item:focus,
|
||||
.item:active {
|
||||
@apply shadow-2xl -translate-y-1 scale-105 rotate-x-15;
|
||||
}
|
||||
|
||||
.item:hover figcaption,
|
||||
.item:focus figcaption,
|
||||
.item:active figcaption {
|
||||
@apply translate-y-0;
|
||||
}
|
||||
|
||||
.item:hover::after,
|
||||
.item:focus::after,
|
||||
.item:active::after {
|
||||
@apply rotate-25 -top-2/5 opacity-15;
|
||||
}
|
||||
|
||||
.article {
|
||||
@apply overflow-hidden w-80 h-56 m-5;
|
||||
}
|
||||
|
||||
.article img {
|
||||
@apply w-full min-h-full transition-all duration-200;
|
||||
}
|
||||
|
||||
.article figcaption {
|
||||
@apply absolute inset-0 p-10 text-sm text-white bg-blue-900/60 opacity-0 scale-115 transition-all duration-200 shadow-sm;
|
||||
}
|
||||
|
||||
.article figcaption h3 {
|
||||
@apply text-blue-300 text-base mb-0 font-bold;
|
||||
}
|
||||
|
||||
.article:hover img,
|
||||
.article:focus img,
|
||||
.article:active img {
|
||||
@apply blur-sm scale-95;
|
||||
}
|
||||
|
||||
.article:hover figcaption,
|
||||
.article:focus figcaption,
|
||||
.article:active figcaption {
|
||||
@apply opacity-100 scale-100;
|
||||
}
|
||||
|
||||
@@ -31,6 +31,7 @@ use Slim\Views\TwigMiddleware;
|
||||
use DI\Container;
|
||||
use Twig\TwigFunction;
|
||||
use Twig\TwigFilter;
|
||||
use \Twig\Extension\DebugExtension;
|
||||
|
||||
// Create DI Container
|
||||
$container = new Container();
|
||||
@@ -46,6 +47,7 @@ $container->set('view', function () use ($container) {
|
||||
'cache' => $_ENV['APP_ENV'] === 'production' ? __DIR__ . '/../storage/views' : false,
|
||||
'debug' => $_ENV['APP_DEBUG'] === 'true',
|
||||
]);
|
||||
$twig->addExtension(new \Twig\Extension\DebugExtension());
|
||||
|
||||
// Add custom functions
|
||||
$twig->getEnvironment()->addFunction(new TwigFunction('base_url', function () {
|
||||
@@ -69,6 +71,9 @@ $container->set('view', function () use ($container) {
|
||||
// Handle common route patterns
|
||||
switch ($name) {
|
||||
case 'home':
|
||||
$basePath = '/';
|
||||
break;
|
||||
case 'dashboard.index':
|
||||
$basePath = '/';
|
||||
break;
|
||||
case 'games.index':
|
||||
@@ -125,6 +130,9 @@ $container->set('view', function () use ($container) {
|
||||
case 'actors.show':
|
||||
$basePath = '/media/actors/' . ($data['id'] ?? '');
|
||||
break;
|
||||
case 'actors.edit':
|
||||
$basePath = '/media/actors/' . ($data['id'] ?? '') .'/edit';
|
||||
break;
|
||||
case 'search.index':
|
||||
$basePath = '/search';
|
||||
break;
|
||||
|
||||
Reference in New Issue
Block a user