From 8c4646ca5b4d3b03fffb94c43085536ef6f6c11f Mon Sep 17 00:00:00 2001
From: 0x1eef <0x1eef@protonmail.com>
Date: Mon, 31 Oct 2022 15:31:06 -0300
Subject: [PATCH] src/: add src/css

---
 src/css/_fonts.scss      | 17 ++++++++
 src/css/surah.scss       | 94 ++++++++++++++++++++++++++++++++++++++++
 src/css/themes/leaf.scss | 28 ++++++++++++
 src/css/themes/moon.scss | 35 +++++++++++++++
 4 files changed, 174 insertions(+)
 create mode 100644 src/css/_fonts.scss
 create mode 100644 src/css/surah.scss
 create mode 100644 src/css/themes/leaf.scss
 create mode 100644 src/css/themes/moon.scss

diff --git a/src/css/_fonts.scss b/src/css/_fonts.scss
new file mode 100644
index 000000000..cac7dcb4f
--- /dev/null
+++ b/src/css/_fonts.scss
@@ -0,0 +1,17 @@
+@font-face {
+  font-family: "Vazirmatn Regular";
+  src: url('/quran/fonts/vazirmatn-regular.ttf') format('truetype');
+  font-display: block;
+}
+
+@font-face {
+  font-family: "Kanit Regular";
+  src: url('/quran/fonts/kanit-regular.ttf') format('truetype');
+  font-display: block;
+}
+
+@font-face {
+  font-family: "Roboto Mono Regular";
+  src: url('/quran/fonts/roboto-mono-regular.ttf') format('truetype');
+  font-display: block;
+}
diff --git a/src/css/surah.scss b/src/css/surah.scss
new file mode 100644
index 000000000..edede50d9
--- /dev/null
+++ b/src/css/surah.scss
@@ -0,0 +1,94 @@
+@import "fonts";
+
+body {
+  font-family: "Kanit Regular";
+}
+
+.surah .theme {
+  margin: 0 auto;
+  width: 450px;
+
+  .flex-row {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
+    span {
+      width: 30px;
+    }
+
+    select {
+      padding: 3px;
+      border-radius: 10px;
+      outline: none;
+      text-align: center;
+    }
+  }
+
+  .timer {
+    margin: 0 auto;
+    font-size: 75%;
+    font-family: "Roboto Mono Regular";
+    text-align: center;
+    width: 30px;
+    font-weight: bold;
+    border-radius: 10px;
+    padding: 3px;
+  }
+
+  .flex-image {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 25px 0 25px 0;
+
+    .image {
+      height: 78px;
+      width: 78px;
+    }
+  }
+
+  .about-surah {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  ul.stream {
+    clear: both;
+    list-style-type: none;
+    height: 400px;
+    padding: 0;
+    overflow: hidden;
+
+    li.ayah {
+      span:first-child {
+        display: block;
+        font-weight: bold;
+      }
+      p {
+        margin: 3px 0 10px 0
+      }
+    }
+  }
+
+  ul.stream.scroll-y {
+    overflow-y: auto;
+  }
+}
+
+@keyframes FadeIn {
+  0% { opacity: 0;}
+  25% { opacity: 0.25; }
+  50% { opacity: 0.5; }
+  75% { opacity: 0.75 }
+  100% { opacity: 1; }
+}
+
+.fade {
+  animation: FadeIn 1s;
+}
+
+@import "themes/moon";
+@import "themes/leaf";
diff --git a/src/css/themes/leaf.scss b/src/css/themes/leaf.scss
new file mode 100644
index 000000000..1e237acc7
--- /dev/null
+++ b/src/css/themes/leaf.scss
@@ -0,0 +1,28 @@
+.surah .leaf.theme {
+  --green: #606850;
+  --black: #333333;
+  --white: #FFF;
+
+  color: var(--black);
+
+  .flex-image {
+    .image {
+      background-image: url("/images/leaf.svg");
+      background-size: cover;
+    }
+  }
+
+  li.ayah {
+    span:first-child {
+      color: var(--green);
+      background-color: var(--white);
+    }
+    p {
+    }
+  }
+
+  .timer {
+    background-color: var(--green);
+    color: var(--white);
+  }
+}
diff --git a/src/css/themes/moon.scss b/src/css/themes/moon.scss
new file mode 100644
index 000000000..92348bb6c
--- /dev/null
+++ b/src/css/themes/moon.scss
@@ -0,0 +1,35 @@
+.surah .moon.theme {
+  --blue: #C4DCF0;
+  --heavy-yellow: #ECB200;
+  --light-red: #FFAF7A
+  --black: #333333;
+
+  color: var(--black);
+
+  .flex-image {
+    .image {
+      background-image: url("/images/moon.svg");
+      background-size: cover;
+    }
+  }
+
+  li.ayah {
+    span:first-child {
+      color: var(--heavy-yellow);
+      -webkit-text-stroke: 1px var(--black);
+    }
+    p {
+    }
+  }
+
+  .timer {
+    color: #FFF;
+    font-weight: bold;
+    background-color: var(--heavy-yellow);
+  }
+
+  .about-surah {
+    color: var(--heavy-yellow);
+    font-weight: bold;
+  }
+}