💄 style: add styling to infobox

2 years ago · 0494a54f57
parent fc591f549c
commit 0494a54f57
2 changed files with 15 additions and 38 deletions
--- a/sass/parts/_misc.scss
+++ b/sass/parts/_misc.scss
@ -166,3 +166,14 @@ table tbody tr:nth-child(even) {
    text-indent: -2.4rem;
    margin-left: 2.4rem;
 }
+
+.info-box {
+    border: 1px solid #087E96;
+    border-left-width: 0.3rem;
+    background-color: #d1f3f8;
+    padding: 1rem;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    border-radius: 10px;
+    text-align: center;
+}
--- a/static/feed_style.xsl
+++ b/static/feed_style.xsl
@ -16,46 +16,12 @@
      <body>
        <div class="content">
          <main>
-            <dk-alert-box type="info">
-              <strong>This is an Atom feed</strong>. Subscribe by copying the URL from the address bar into your newsreader. Visit <a                 href="https://aboutfeeds.com">About Feeds </a> to learn more and get started. It’s free.
-            </dk-alert-box>
+            <div class="info-box">
+              <strong>This is a web feed</strong>, also known as an Atom feed. <strong>Subscribe</strong> by copying the URL from the address bar into your newsreader. Visit <a href="https://aboutfeeds.com">About Feeds</a> to learn more and get started. It’s free.
+            </div>
            <section id="banner-home-subtitle">
-            <div class="padding-top article-title">
-                <!-- https://commons.wikimedia.org/wiki/File:Feed-icon.svg -->
-                  <svg
-                  xmlns="http://www.w3.org/2000/svg" version="1.1"
-                  style="flex-shrink: 0; width: 1.5rem; height: 1.5rem;"
-                  viewBox="0 0 256 256">
-                  <defs>
-                    <linearGradient x1="0.085" y1="0.085" x2="0.915" y2="0.915"
-                      id="RSSg">
-                      <stop offset="0.0" stop-color="#E3702D"/>
-                      <stop offset="0.1071" stop-color="#EA7D31"/>
-                      <stop offset="0.3503" stop-color="#F69537"/>
-                      <stop offset="0.5" stop-color="#FB9E3A"/>
-                      <stop offset="0.7016" stop-color="#EA7C31"/>
-                      <stop offset="0.8866" stop-color="#DE642B"/>
-                      <stop offset="1.0" stop-color="#D95B29"/>
-                    </linearGradient>
-                  </defs>
-                  <rect width="256" height="256" rx="55" ry="55" x="0" y="0"
-                    fill="#CC5D15"/>
-                  <rect width="246" height="246" rx="50" ry="50" x="5" y="5"
-                    fill="#F49C52"/>
-                  <rect width="236" height="236" rx="47" ry="47" x="10" y="10"
-                    fill="url(#RSSg)"/>
-                  <circle cx="68" cy="189" r="24" fill="#FFF"/>
-                  <path
-                    d="M160 213h-34a82 82 0 0 0 -82 -82v-34a116 116 0 0 1 116 116z"
-                    fill="#FFF"/>
-                  <path
-                    d="M184 213A140 140 0 0 0 44 73 V 38a175 175 0 0 1 175 175z"
-                    fill="#FFF"/>
-                </svg> Feed Preview</div>
-            <div class="padding-top">
-              <h3>
+            <div class="padding-top home-banner-header">
                <xsl:value-of select="/atom:feed/atom:title"/>
-              </h3>
            </div>
            <p>
              <xsl:value-of select="/atom:feed/atom:subtitle"/>