Reduce the file size of the landing page (#1105)

* Update suggestions.md

* Add announcement of the paper book release

* Fix size of svg

* Update contrib rocks image

* Optimize HTML of the landing page

* Fix the line breaks

overrides/main.html

@@ -0,0 +1,17 @@
+{% extends "base.html" %}
+
+{% block announce %}
+{% if config.theme.language == 'zh' %}
+    {% set announcements = "纸质书将于近期发布，敬请关注！" %}
+{% elif config.theme.language == 'en' %}
+    {% set announcements = "The paper book (Chinese edition) will be published soon. Stay tuned!" %}
+{% endif %}
+<div class="banner-svg">
+    <svg xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+        <path
+            d="M480 32c0-12.9-7.8-24.6-19.8-29.6s-25.7-2.2-34.9 6.9L381.7 53c-48 48-113.1 75-181 75H192 160 64c-35.3 0-64 28.7-64 64v96c0 35.3 28.7 64 64 64l0 128c0 17.7 14.3 32 32 32h64c17.7 0 32-14.3 32-32V352l8.7 0c67.9 0 133 27 181 75l43.6 43.6c9.2 9.2 22.9 11.9 34.9 6.9s19.8-16.6 19.8-29.6V300.4c18.6-8.8 32-32.5 32-60.4s-13.4-51.6-32-60.4V32zm-64 76.7V240 371.3C357.2 317.8 280.5 288 200.7 288H192V192h8.7c79.8 0 156.5-29.8 215.3-83.3z" />
+    </svg>
+    <span>{{ announcements }}</span>
+</div>
+{% endblock %}

overrides/stylesheets/extra.css

@@ -207,6 +207,19 @@ body {
   width: 1.25em;
 }
 
+/* header banner */
+.md-banner {
+  background-color: var(--md-code-bg-color);
+  color: var(--md-default-fg-color);
+  font-size: 0.75rem;
+}
+
+.md-banner .banner-svg svg {
+  margin-right: 0.3rem;
+  height: 0.63rem;
+  fill: var(--md-default-fg-color);
+}
+
 .pythontutor-iframe {
   width: 125%;
   height: 125%;
@@ -321,7 +334,7 @@ a:hover .text-button span {
 }
 
 /* hero image */
-.hero-image-div {
+.hero-div {
   height: min(84vh, 75vw);
   width: min(112vh, 100vw);
   margin: 0 auto;
@@ -340,13 +353,13 @@ a:hover .text-button span {
 }
 
 /* hover on the planets */
-.hero-on-hover {
+.hero-div > a > img {
   width: auto;
   position: absolute;
   transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
 }
 
-.hero-caption {
+.hero-div > a > span {
   margin: 0;
   position: absolute;
   transform: translateX(-50%) translateY(-50%);
@@ -354,17 +367,27 @@ a:hover .text-button span {
   color: white;
 }
 
-a:hover .hero-on-hover {
+.hero-div > a:hover > img {
   filter: brightness(1.15) saturate(1.1)
     drop-shadow(0 0 0.5rem rgba(255, 255, 255, 0.2));
   transform: scale(1.03);
 }
 
-a:hover .hero-caption {
+.hero-div > a:hover > span {
   text-decoration: underline;
   color: var(--md-typeset-btn-color);
 }
 
+.heading-div {
+  width: 100%;
+  position: absolute;
+  transform: translateX(-50%);
+  left: 50%;
+  bottom: min(2vh, 3vw);
+  pointer-events: none;
+  color: #fff;
+}
+
 /* code badge */
 .code-badge {
   width: 100%;