Add nocoverlist theme

docs/quickstart/usage_example/basics/configure_sec_and_page.md

@@ -42,6 +42,7 @@ There are three possible options for `theme`:
  Documenter for navigation purpose. `template` option doesn't affect, neither.
 * `"grid"`: a grid like index page.
 * `"list"`: a list like index page.
+* `"nocover"`: a list like index page without cover images.
 
 You can check the "Theme Gallery" to see how different themes look like.
 

src/Themes/Themes.jl

@@ -25,7 +25,7 @@ using Mustache
 """
 A list of DemoCards theme presets
 """
-const themelists = ["bulmagrid", "bokehlist", "grid", "list"]
+const themelists = ["bulmagrid", "bokehlist", "grid", "list", "nocoverlist"]
 
 # TODO: don't hardcode this
 const max_coversize = (220, 200)
@@ -34,6 +34,7 @@ const max_coversize = (220, 200)
 include("bulmagrid/bulmagrid.jl")
 include("grid/grid.jl")
 include("list/list.jl")
+include("nocoverlist/nocoverlist.jl")
 include("bokehlist/bokehlist.jl")
 
 

src/Themes/nocoverlist/nocoverlist.jl

@@ -0,0 +1,42 @@
+const nocoverlist_section_template = mt"""
+{{{description}}}
+
+```@raw html
+<div class="list-card-section">
+```
+
+{{{cards}}}
+
+```@raw html
+</div>
+```
+"""
+
+const nocoverlist_card_template = mt"""
+```@raw html
+<div class="list-card">
+<table>
+ <td><div class="list-card-text">
+```
+[{{{title}}}](@ref {{id}})
+```@raw html
+</div>
+ <div class="list-card-description">
+```
+{{{description}}}
+```@raw html
+ </div>
+ </td>
+</tbody></table>
+</div>
+```
+
+"""
+
+function cardtheme(::Val{:nocoverlist})
+ templates = Dict(
+ "card" => nocoverlist_card_template,
+ "section" => nocoverlist_section_template
+ )
+ return templates, abspath(@__DIR__, "style.css")
+end

src/Themes/nocoverlist/style.css

@@ -0,0 +1,24 @@
+.list-card:hover{
+ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
+}
+
+.list-card {
+ width: 800px;
+ max-height: 250px;
+ margin: 25px 10px;
+ box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+ transition: 0.3s;
+ border-radius: 5px;
+}
+
+.list-card-text {
+ padding: 10px 5px;
+ font-style: oblique 40deg;
+ font-size: large;
+}
+
+.list-card-description {
+ width: 550px;
+ max-height: 250px;
+ line-height: 1.5;
+}