From bbe5788cdcfbb26358566bfc74426ec38029cc73 Mon Sep 17 00:00:00 2001
From: Joris
Date: Sat, 25 Feb 2017 22:25:03 +0100
Subject: Add detailed book page instead of a modal.

---
 .../reading/component/index/style/BookDetail.scala | 65 +++++++++++++++-------
 1 file changed, 45 insertions(+), 20 deletions(-)

(limited to 'src/main/scala/reading/component/index/style/BookDetail.scala')

diff --git a/src/main/scala/reading/component/index/style/BookDetail.scala b/src/main/scala/reading/component/index/style/BookDetail.scala
index f432fda..2488a8f 100644
--- a/src/main/scala/reading/component/index/style/BookDetail.scala
+++ b/src/main/scala/reading/component/index/style/BookDetail.scala
@@ -2,15 +2,25 @@ package reading.component.index.style
 
 import scalacss.Defaults._
 
-import reading.component.style.{ Color => C }
+import reading.component.style.{ Color => C, Button }
+import reading.Media
 
 object BookDetail extends StyleSheet.Inline {
   import dsl._
 
   val detail = style(
+    position.fixed,
+    height(100.%%),
+    top(0.px),
+    right(0.px),
+    padding(30.px, 30.px, 0.px, 30.px),
+    overflowY.scroll,
     display.flex,
     flexWrap.wrap,
-    justifyContent.spaceAround
+    justifyContent.spaceAround,
+    Media.desktop(width :=! "calc(100% - 280px)"),
+    Media.mobile(width(100.%%)),
+    opacity(0)
   )
 
   val cover = style(
@@ -18,32 +28,47 @@ object BookDetail extends StyleSheet.Inline {
     marginBottom(30.px)
   )
 
-  val items = style(
-    marginBottom(25.px)
+  val presentation = style(
+    Media.desktop(width(50.%%))
   )
 
-  val item = style(
-    lineHeight(25.px),
-    margin(0.px, 15.px, 15.px),
-    &.lastChild(marginBottom(0.px))
+  val title = style(
+    color(C.congoBrown.value),
+    fontSize(26.px),
+    fontWeight.bold,
+    marginBottom(1.em),
+    lineHeight(1.4.em)
+  )
+
+  val author = style(
+    fontSize(20.px),
+    marginBottom(1.em)
+  )
+
+  val resume = style(
+    textAlign.justify,
+    lineHeight(1.4.em),
+    marginBottom(2.em)
+  )
+
+  val definitions = style(
+    marginBottom(2.5.em)
   )
 
-  val itemName = style(
+  val definitionTerm = style(
     fontWeight.bold,
-    textTransform.uppercase,
-    marginBottom(10.px)
+    float.left,
+    marginRight(5.px),
+    lineHeight(1.4.em)
   )
 
-  val itemValues = style(
-    marginLeft(15.px)
+  val definitionDescription = style(
+    marginBottom(1.em),
+    lineHeight(1.4.em)
   )
 
-  val itemValue = style(
-    marginBottom(5.px),
-    &.before(
-      content := "\"•\"",
-      color(C.stiletto.value),
-      marginRight(10.px)
-    )
+  val close = style(
+    Button.simple,
+    marginBottom(1.em)
   )
 }
-- 
cgit v1.2.3