Merge pull request #14040 from schlawg/blog-teaser-aaarmstark-layout

dont flow text around blog image in teaser
lichess-org · Nov 19, 2023 · 8dcb4ea · 8dcb4ea
2 parents f27de72 + 962d899
commit 8dcb4ea
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 17 deletions.
diff --git a/app/views/blog/index.scala b/app/views/blog/index.scala
@@ -76,16 +76,16 @@ object index:
  div(cls := "body")(
  doc.getStructuredText("blog.body").map { body =>
  raw(lila.blog.BlogApi.extract(body))
- },
-  p(cls := "more")(
-  a(
-  cls  := "button",
-  href := routes.Blog.show(doc.id, doc.slug, ref = prismic.maybeRef),
- dataIcon := licon.PlayTriangle
-  )(
-  " Continue reading this post"
-  )
- )
+ }
+ )
+ ),
+ p(cls := "more")(
+ a(
+ cls  := "button",
+ href := routes.Blog.show(doc.id, doc.slug, ref = prismic.maybeRef),
+ dataIcon := licon.PlayTriangle
+ )(
+ " Continue reading this post"
  )
  )
  )
diff --git a/ui/site/css/_blog.scss b/ui/site/css/_blog.scss
@@ -151,7 +151,7 @@
  text-align: center;
  }
 
- margin-bottom: 2em;
+ margin-bottom: 1em;
  }
 
  .meta {
@@ -160,13 +160,18 @@
 
  .parts {
  @extend %box-padding-horiz;
+ @extend %flex-center-nowrap;
+ margin: 3em 0 1em;
+ gap: 3em;
 
- margin-top: 3em;
+ @media (max-width: $mq-width-medium) {
+ flex-flow: column;
+ }
 
  .illustration {
- float: left;
- max-width: 40%;
- margin: 0 3em 2em 0;
+ flex: 1 0 40%;
+ max-width: 80%;
+ margin: 0;
 
  img {
  margin: 0;
@@ -176,11 +181,11 @@
  .body {
  font-size: 1.15em;
  line-height: 1.7;
+ margin: 0;
  }
  }
-
  .more {
- margin-top: 2em;
+ font-size: 1.3em;
  text-align: center;
  }
  }