first working prototype

2023-06-19 20:38:45 +02:00
parent 89612f02b6
commit 120781a57a
287 changed files with 863 additions and 268 deletions
--- a/src/lib/components/card.css
+++ b/src/lib/components/card.css
@@ -0,0 +1,136 @@
+.card{
+	text-decoration: none;
+	position: relative;
+	box-sizing: border-box;
+	font-family: sans-serif;
+	cursor: pointer;
+	width: 300px;
+	aspect-ratio: 4/7;
+	border-radius: 20px;
+	background-size: contain;
+	display: flex;
+	flex-direction: column;
+	justify-content: end;
+	transition: 200ms;
+	background-color:  #5E81AC;
+}
+.card .icon:hover{
+	transform: scale(1.2,1.2);
+}
+.card:hover,
+.card:focus-visible{
+	transform: scale(1.02,1.02)
+}
+
+.card img{
+	height: 50%;
+	object-fit: cover;
+	border-top-left-radius: inherit;
+	border-top-right-radius: inherit;
+	/* background-color:  #5E81AC; */
+}
+.card .title {
+	position: relative;
+	box-sizing: border-box;
+	padding-top: 0.5em;
+	height: 50%;
+	width: 100% ;
+	/* padding-inline: 1em; */
+	border-bottom-left-radius: inherit;
+	border-bottom-right-radius: inherit;
+	/* background-color: #5E81AC; */
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	transition: 100ms;
+}
+.card:hover{
+	background-color:#BF616A;
+}
+.card .name{
+	font-size: 2em;
+	color: white;
+	padding: 0.5em;
+	padding-top: 0.2em;
+}
+
+.card .tags{
+	box-sizing: border-box;
+	display: flex;
+	flex-wrap: wrap;
+	overflow: hidden;
+	column-gap: 0.25em;
+	padding-inline: 0.5em;
+	margin-bottom:0.5em;
+	flex-grow: 0;
+}
+.card .tag{
+	cursor: pointer;
+	text-decoration: unset;
+	background-color: #D8DEE9;
+	color: #2E3440;
+	border-radius: 100px;
+	padding-inline: 1em;
+	line-height: 1.5em;
+	margin-bottom: 0.5em;
+	transition: 100ms;
+}
+.card .tag:hover{
+	transform: scale(1.04, 1.04);
+	background-color: #D08770;
+}
+
+.card .icon{
+	text-decoration: unset;
+	position: absolute;
+	font-size: 1.5rem;
+	top:-0.5em;
+	right:-0.5em;
+	padding: 0.25em;
+	background-color: #ECEFF4;
+	border-radius:1000px;
+	transition: 100ms;
+}
+.card .title .category{
+	position: absolute;
+	text-decoration: none;
+	color: #ECEFF4;
+	font-size: 1.5rem;
+	top: -0.8em;
+	left: -0.5em;
+	background-color: #2E3440;
+	padding-inline: 1em;
+	border-radius: 1000px;
+	transition: 100ms;
+}
+.card .title .category:hover{
+	background-color: #434C5E;
+	transform: scale(1.05, 1.05)
+}
+.card:hover .icon{
+	animation:  shake 0.6s
+}
+
+  @keyframes shake{
+    0%{
+      transform: rotate(0)
+		scale(1,1);
+    }
+    25%{
+      transform: rotate(30deg)
+      		scale(1.2,1.2)
+      ;
+    }
+    50%{
+      transform: rotate(-30deg)
+      		scale(1.2,1.2);
+    }
+    74%{
+  transform: rotate(30deg)
+  		scale(1.2, 1.2);
+	}
+	100%{
+      transform: rotate(0)
+      	scale(1,1);
+    }
+  }