diff --git a/app/assets/css/tailwind.css b/app/assets/css/tailwind.css index c712fa9..528cbb7 100644 --- a/app/assets/css/tailwind.css +++ b/app/assets/css/tailwind.css @@ -94,3 +94,7 @@ h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { height: 100%; border-radius: 8px; } + +.squircle { + clip-path: url(#squircleClip); +} diff --git a/app/templates/posts/show.html.slim b/app/templates/posts/show.html.slim index 33bb517..ba8661b 100644 --- a/app/templates/posts/show.html.slim +++ b/app/templates/posts/show.html.slim @@ -47,15 +47,15 @@ article class="h-entry" div class="mt-12" h3 #{post.webmentions.count} Comment#{post.webmentions.count != 1 ? "s" : ""} - post.webmentions.each do |mention| - div class="prose-p:m-1 mb-6 p-4 bg-gray-100 border border-gray-200 dark:bg-gray-900 dark:border-gray-800 rounded" + div class="prose-p:m-1 mb-6 p-8 bg-orange-100 dark:bg-indigo-900 squircle" div class="flex h-8" img class="w-8 rounded-full m-0 mr-2" src=mention.author_photo - a class="block text-blue-400 dark:text-blue-600 no-underline hover:underline" href=mention.author_url + a class="block text-orange-700 dark:text-violet-300 no-underline hover:underline" href=mention.author_url = mention.author_name - div class="prose dark:prose-invert prose-a:text-blue-400 dark:prose-a:text-blue-600 prose-a:no-underline hover:prose-a:underline" + div class="prose dark:prose-invert dark:text-indigo-250 prose-a:text-orange-700 dark:prose-a:text-violet-300 prose-a:no-underline hover:prose-a:underline" == mention.content_html div class="text-sm" - a class="no-underline hover:underline text-blue-400 dark:text-blue-600" href=mention.source_url + a class="no-underline hover:underline text-orange-900 dark:text-violet-400" href=mention.source_url = mention.published_at.strftime("%e %B, %Y") div class="mb-12" - if trip @@ -128,3 +128,7 @@ article class="h-entry" - next if loc[:location] == "" a rel="syndication" class="u-syndication" href=loc[:url] == render "shared/#{loc[:location]}" + +svg width="10" height="10" viewBox="0 0 10 10" + clipPath id="squircleClip" clipPathUnits="objectBoundingBox" + path fill="red" stroke="none" d="M 0,0.5 C 0,0 0,0 0.5,0 S 1,0 1,0.5 1,1 0.5,1 0,1 0,0.5"