diff -r f30a3e465836 -r fe846f058e41 example/src/extras.scalatex
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/example/src/extras.scalatex	Sun Dec 27 22:54:33 2020 +0100
@@ -0,0 +1,289 @@
+@val img200 = src:="http://placehold.it/200x200"
+@val img250 = img(src:="http://placehold.it/250x250")
+@val sasquatch = img(src:="http://dribbble.s3.amazonaws.com/users/4467/screenshots/661196/sasquatch-troop-full.jpg")
+
+@div
+  @h1
+    Pure Extras
+  @h2
+    CSS styles for images, thumbnails, badges, contextual menus and alerts.
+    Depends on Pure CSS.
+  @p
+    Pure-Scala 1:1 reimplementation of
+    @a(href:="http://github.com/tilomitra/cssextras", "pure-extras").
+
+  @h2
+    Images
+  @p
+    Styling of three different types are available for images, eliptical,
+    rounded, bordered. To use them, just add one of these classes to the
+    @code(raw("<img>")) tag.
+
+  @div(pure.g)
+    @div(pure.u_1_3)
+      @img(Extras.pure_img_elliptical, width:="200", height:="150",
+        src:="http://dribbble.s3.amazonaws.com/users/9418/screenshots/928345/suhio_shoot.png")
+    @div(pure.u_1_3)
+      @img(Extras.pure_img_rounded, width:="200", height:="150",
+        src:="http://dribbble.s3.amazonaws.com/users/9418/screenshots/928345/suhio_shoot.png")
+    @div(pure.u_1_3)
+      @img(Extras.pure_img_bordered, width:="200", height:="150",
+        src:="http://dribbble.s3.amazonaws.com/users/9418/screenshots/928345/suhio_shoot.png")
+
+  @p
+    When using class @code("Extras.pure_img_elliptical"), if the width and
+    height of the image are equal, it will appear as a circle. Otherwise, it
+    will appear as an ellipse.
+  @img(Extras.pure_img_elliptical, width:="200", height:="200", img200)
+
+  @h2
+    Thumbnails
+  @p
+    Add the class @code("Extras.pure_thumbnails") to the container
+    @code(raw("<ul>")). Then add one of the classes,
+    @code("Extras.pure_thumb_elliptical"), @code("Extras.pure_thumb_rounded"),
+    or @code("Extras.pure_thumb_bordered"), to the @code(raw("<a>")).
+
+  @ul(Extras.pure_thumbnails, pure.g)
+    @li(pure.u_1_4)
+      @a(Extras.pure_thumb, Extras.pure_thumb_elliptical, href:="#")
+        @img250
+    @li(pure.u_1_4)
+      @a(Extras.pure_thumb, Extras.pure_thumb_rounded, href:="#")
+        @img250
+    @li(pure.u_1_4)
+      @a(Extras.pure_thumb, Extras.pure_thumb_bordered, href:="#")
+        @img250
+    @li(pure.u_1_4)
+      @a(Extras.pure_thumb, Extras.pure_thumb_bordered, href:="#")
+        @img250
+        @div(Extras.caption_)
+          @h3(Extras.caption_head)
+            Rocket – game concept
+          @p
+            This is a great shot from Jozef Mak from Dribbble.
+
+  @p
+    Adding a @code("div(Extras.caption_)") allows you to customize the
+    thumbnail with additional content.
+
+  @p
+    If you have YUI grids on the page, add @code("pure_u_*") for multi-column
+    thumbnails that scale to fit the columns.
+
+  @ul(Extras.pure_thumbnails, pure.g)
+    @li(pure.u_1_4)
+      @a(Extras.pure_thumb, Extras.pure_thumb_elliptical, href:="#")
+        @sasquatch
+    @li(pure.u_1_4)
+      @a(Extras.pure_thumb, Extras.pure_thumb_rounded, href:="#")
+        @sasquatch
+    @li(pure.u_1_4)
+      @a(Extras.pure_thumb, href:="#")
+        @sasquatch
+    @li(pure.u_1_4)
+      @a(Extras.pure_thumb, Extras.pure_thumb_bordered, href:="#")
+        @sasquatch
+        @div(Extras.caption_)
+          @h3(Extras.caption_head)
+            Thumbnail label
+          @p
+            Curabitur et sapien ac diam pharetra lacinia quis ac tortor.
+            Suspendisse dictum fermentum dui at mollis. Nunc pulvinar blandit
+            diam in vehicula.
+
+  @h2
+    Badges
+  @p
+    To create a badge, use a @code("span") tag, and add one of the badge
+    classes as shown below.
+
+  @span(Extras.pure_badge)
+    A badge
+  @span(Extras.pure_badge_success)
+    Success badge
+  @span(Extras.pure_badge_warning)
+    Warning badge
+  @span(Extras.pure_badge_error)
+    Badges can have a bunch of content
+  @span(Extras.pure_badge_info)
+    Info badge
+  @span(Extras.pure_badge_inverse)
+    or not much at all.
+
+  @h2
+    Alerts
+  @p
+    Create alerts by adding a class to it's @code("div").
+
+  @h3
+    Default Alert
+  @p
+    The default alert can be set by adding the @code("Extras.pure_alert") class name.
+  @div(Extras.pure_alert)
+    @label
+      Welcome back, Tilo.
+
+  @h3
+    Error Alert
+  @p
+    Alerts in red have the connotation of something going wrong. The error
+    alert can be set by appending the @code("Extras.pure_alert_error") class name
+    in addition to the @code("Extras.pure_alert").
+  @div(Extras.pure_alert, Extras.pure_alert_error)
+    @label(strong("Breaking News"))
+    'Most' of Atlanic City Underwater. Atlantic City Boardwalk Destroyed by Sandy.
+
+  @h3
+    Warning Alert
+  @p
+    If you want to send a warning notification, use the warning alert. It can
+    be set by appending the @code("Extras.pure_alert_warning") class name in
+    addition to the @code("Extras.pure_alert").
+  @div(Extras.pure_alert, Extras.pure_alert_warning)
+    @label(strong("Update"))
+    Looks like you like the Green Bay Packers so we added the team to your Sports App!
+
+  @h3
+    Success Alert
+  @p
+    Mission successful? Use the Success Alert! It can be set by appending the
+    @code("Extras.pure_alert_success") in addition to the
+    @code("Extras.pure_alert").
+  @div(Extras.pure_alert, Extras.pure_alert_success)
+    @label(strong("New Badge Unlocked!"))
+    You unlocked the "Paradise" badge!
+
+  @h2
+    Contextual Modals
+
+  @div(pure.g)
+    @div(pure.u_1_2)
+      @h3
+        Bottom Arrow
+      @div(Extras.pure_popover, Extras.pure_popover_bottom)
+        @div
+          @p
+            You have no new notifications.
+          @p
+            Receive notifications when you comment or discuss content with
+            friends on Yahoo!
+          @p
+            @a(pure.button, Extras.pure_button_block, href:="#")
+              Learn More
+        @div(Extras.pure_arrow_border)
+        @div(Extras.pure_arrow)
+    @div(pure.u_1_2)
+      @h3
+        Left Arrow
+      @div(Extras.pure_popover, Extras.pure_popover_left)
+        @div
+          @p
+            You have no new notifications.
+          @p
+            Receive notifications when you comment or discuss content with
+            friends on Yahoo!
+          @p
+            @a(pure.button, Extras.pure_button_block, href:="#")
+              Learn More
+        @div(Extras.pure_arrow_border)
+        @div(Extras.pure_arrow)
+
+  @div(pure.g)
+    @div(pure.u_1_2)
+      @h3
+        Top Arrow
+      @div(Extras.pure_popover, Extras.pure_popover_top)
+        @div
+          @p
+            You have no new notifications.
+          @p
+            Receive notifications when you comment or discuss content with
+            friends on Yahoo!
+          @p
+            @a(pure.button, Extras.pure_button_block, href:="#")
+              Learn More
+        @div(Extras.pure_arrow_border)
+        @div(Extras.pure_arrow)
+    @div(pure.u_1_2)
+      @h3
+        Right Arrow
+      @div(Extras.pure_popover, Extras.pure_popover_right)
+        @div
+          @p
+            You have no new notifications.
+          @p
+            Receive notifications when you comment or discuss content with
+            friends on Yahoo!
+          @p
+            @a(pure.button, Extras.pure_button_block, href:="#")
+              Learn More
+        @div(Extras.pure_arrow_border)
+        @div(Extras.pure_arrow)
+
+  @h2
+    Contextual Modals with Grids
+  @p
+    You can use grids within these contextual menus for interesting effects.
+  @div(pure.g)
+    @div(pure.u_1)
+      @h4
+        You have mail.
+      @div(Extras.pure_popover, Extras.pure_popover_bottom, width:="70%")
+        @div(pure.g)
+          @div(pure.u_1_5)
+            @strong
+              Yahoo! Mail
+          @div(pure.u_3_5)
+            You have 3 new messages.
+          @div(pure.u_1_5, cls:="text-right")
+            @a(pure.button, Extras.pure_button_small, href:="#")
+              Read
+        @div(Extras.pure_arrow_border)
+        @div(Extras.pure_arrow)
+
+  @h2
+    Buttons
+  @h3
+    Button Types
+  @p
+    @a(pure.button)
+      A regular button
+    @a(pure.button, Extras.pure_button_selected)
+      Selected
+  @p
+    @a(pure.button, Extras.pure_button_secondary)
+      Secondary
+    @a(pure.button, Extras.pure_button_error)
+      Error
+    @a(pure.button, Extras.pure_button_success)
+      Success
+    @a(pure.button, Extras.pure_button_warning)
+      Warning
+  @p
+    @a(pure.button, Extras.pure_button_block)
+      Block
+
+  @h3
+    Button Sizes
+  @p
+    Large buttons have twice the padding of regular buttons. Apply the
+    @code("Extras.pure_button_large").
+  @a(pure.button, Extras.pure_button_large)
+    Big click target
+  @a(pure.button, Extras.pure_button_success, Extras.pure_button_large)
+    Big Success
+
+  @p
+    Small buttons have half the padding of regular buttons. Apply the
+    @code("Extras.pure_button_small").
+  @a(pure.button, Extras.pure_button_small)
+    Smaller target
+  @a(pure.button, Extras.pure_button_secondary, Extras.pure_button_small)
+    Smaller Secondary Button
+  @a(pure.button, Extras.pure_button_warning, Extras.pure_button_small)
+    Smaller Warning Button
+  @a(pure.button, Extras.pure_button_error, Extras.pure_button_small)
+    Smaller Error Button
+
+// vim: et ts=2 sw=2 syn=scala