From 40d015a15bee7d0a51c28e20c29ff7045419b8f5 Mon Sep 17 00:00:00 2001
From: Rasmus Luha <rasmus.luha@gmail.com>
Date: Sat, 17 Sep 2022 01:02:22 +0300
Subject: mangud showcase

---
 rannak/mangud/perenaine/memori/style.css | 75 ++++++++++++++++++++++++++++++++
 1 file changed, 75 insertions(+)
 create mode 100644 rannak/mangud/perenaine/memori/style.css

(limited to 'rannak/mangud/perenaine/memori/style.css')

diff --git a/rannak/mangud/perenaine/memori/style.css b/rannak/mangud/perenaine/memori/style.css
new file mode 100644
index 0000000..600f91d
--- /dev/null
+++ b/rannak/mangud/perenaine/memori/style.css
@@ -0,0 +1,75 @@
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  display: flex;
+  background: #284F8F !important;
+}
+
+.memory-game {
+  width: 640px;
+  height: 640px;
+  margin: auto;
+  display: flex;
+  flex-wrap: wrap;
+  perspective: 1000px;
+}
+
+.memory-card {
+  width: calc(20% - 10px);
+  height: calc(25% - 10px);
+  margin: 5px;
+  position: relative;
+  transform: scale(1);
+  transform-style: preserve-3d;
+  transition: transform .5s;
+  box-shadow: 1px 1px 1px rgba(0,0,0,.3);
+}
+
+.memory-card:active {
+  transform: scale(0.97);
+  transition: transform .2s;
+}
+
+.memory-card.flip {
+  transform: rotateY(180deg);
+}
+
+.front-face,
+.back-face {
+  width: 100%;
+  height: 100%;
+  padding: 20px;
+  position: absolute;
+  border-radius: 5px;
+  background: #F1F5FF;
+  backface-visibility: hidden;
+}
+
+.front-face {
+  transform: rotateY(180deg);
+}
+
+/* Side stuff */
+
+.left, .right{
+	width: calc((100vw - 640px) / 2) !important;
+	position: relative;
+}
+
+.left-text{
+	text-align: center;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+}
+
+.left-text h1{
+	font-weight: bold;
+	padding-bottom: 5px;
+}
-- 
cgit v1.2.3