variants page

app/controllers/Page.scala

@@ -27,7 +27,11 @@ object Page extends LilaController {
 
   def privacy = bookmark("privacy")
 
-  def variantHome = bookmark("variant")
+  def variantHome = Open { implicit ctx =>
+    OptionOk(Prismic getBookmark "variant") {
+      case (doc, resolver) => views.html.site.variantHome(doc, resolver)
+    }
+  }
 
   def variant(key: String) = Open { implicit ctx =>
     (for {

app/views/site/variant.scala.html

@@ -1,21 +1,7 @@
 @(doc: io.prismic.Document, resolver: io.prismic.DocumentLinkResolver, variant: chess.variant.Variant, perfType: lila.rating.PerfType)(implicit ctx: Context)
 
-@menu = {
-@lila.rating.PerfType.variants.map { pt =>
-<a class="@perfType.key.active(pt.key) text" href="@routes.Page.variant(pt.key)" data-icon="@pt.iconChar">
-  @pt.name
-</a>
-}
-}
-
-@moreCss = {
-@cssTag("doc.css")
-@cssTag("variant.css")
-}
-
-@base.layout(
-moreCss = moreCss,
-menu = menu.some,
+@variantLayout(
+active = perfType.some,
 title = s"${variant.name} • ${variant.title}") {
 
 <div class="content_box small_box doc_box">

app/views/site/variantHome.scala.html

@@ -0,0 +1,26 @@
+@(doc: io.prismic.Document, resolver: io.prismic.DocumentLinkResolver)(implicit ctx: Context)
+
+@variantLayout(
+active = none,
+title = "Lichess variants") {
+
+<div class="content_box small_box doc_box no_padding">
+
+  <h1 class="lichess_title text" data-icon="">Lichess variants</h1>
+
+  <div class="body content_box_content">
+    @Html(~doc.getHtml("doc.content", resolver))
+  </div>
+
+  <div class="variants">
+    @lila.rating.PerfType.variants.map { pt =>
+    @defining(lila.rating.PerfType.variantOf(pt)) { variant =>
+    <a class="variant text" href="@routes.Page.variant(pt.key)" data-icon="@pt.iconChar">
+      <h2>@variant.name</h2>
+      <h3 class="headline">@variant.title</h3>
+    </a>
+    }
+    }
+  </div>
+</div>
+}

app/views/site/variantLayout.scala.html

@@ -0,0 +1,20 @@
+@(title: String, active: Option[lila.rating.PerfType] = None, openGraph: Option[lila.app.ui.OpenGraph] = None)(body: Html)(implicit ctx: Context)
+
+@menu = {
+@lila.rating.PerfType.variants.map { pt =>
+<a class="@active.map(_.key.active(pt.key)) text" href="@routes.Page.variant(pt.key)" data-icon="@pt.iconChar">
+  @pt.name
+</a>
+}
+}
+
+@moreCss = {
+@cssTag("doc.css")
+@cssTag("variant.css")
+}
+
+@base.layout(
+title = title,
+menu = menu.some,
+moreCss = moreCss,
+openGraph = openGraph)(body)

conf/base.conf

@@ -9,7 +9,7 @@ net {
   ip = "5.196.91.160"
   asset {
     domain = ${net.domain}
-    version = 822
+    version = 824
   }
 }
 play {

public/stylesheets/dark.css

@@ -234,6 +234,7 @@ body.dark #now_playing > a {
 body.dark #hooks_wrap .table_wrap tr.cancel td {
   background: rgba(0, 80, 0, 0.7);
 }
+body.dark div.doc_box a.variant:hover,
 body.dark #hooks_wrap .table_wrap tr.join:hover td,
 body.dark #now_playing > a:hover,
 body.dark .lichess_ground .replay move.current,

public/stylesheets/variant.css

@@ -3,39 +3,40 @@ div.doc_box h2.headline {
   font-style: italic;
   margin-bottom: 30px;
 }
-div.doc_box .body {
-  font-size: 1.2em;
+div.doc_box .body.content_box_content {
+  padding-top: 0;
 }
-div.doc_box .body h3 {
-  font-size: 1.3em;
+div.doc_box .variants {
+  margin-top: 0px;
+}
+div.doc_box a.variant {
+  text-decoration: none!important;
+  display: block;
+  height: 50px;
+  padding: 10px 20px;
+  transition: background 0.13s;
+}
+div.doc_box a.variant:hover {
+  background: rgba(191, 231, 255, 0.5);
+}
+div.doc_box a.variant::before {
+  float: left;
+  font-size: 40px;
+  line-height: 50px;
+  margin-right: 20px;
+  opacity: 0.7;
+  transition: opacity 0.13s;
+}
+div.doc_box a.variant:hover::before {
+  opacity: 1;
+}
+div.doc_box a.variant h2 {
+  font-size: 1.5em;
   font-family: 'Roboto';
   font-weight: 300;
+  text-transform: uppercase;
+  letter-spacing: 3px;
 }
-div.doc_box .body em {
-  font-style: italic;
-}
-div.doc_box .body h3 em {
-  font-family: 'Roboto';
-  font-weight: 300;
-}
-div.doc_box .body h2 {
-  font-size: 1.3em;
-  margin-top: 1.5em;
-  border-bottom: 1px solid #eee;
-}
-div.doc_box .body p {
-  margin: 1em 0;
-}
-div.doc_box .body ul li {
-  list-style: disc inside;
-}
-div.doc_box .body li {
-  margin-left: 2em;
-}
-div.doc_box .body a:not(.user_link) {
-  text-decoration: underline;
-}
-div.doc_box .body a {
-div.doc_box .body a:hover {
-  text-decoration: none;
+div.doc_box a.variant h3 {
+  margin: 0;
 }