Redesign hero section and avoid text overflow.

Author: MrWillCom

.changeset/shy-carrots-train.md

@@ -0,0 +1,5 @@
+---
+'hexo-theme-cupertino': minor
+---
+
+Redesign hero section and avoid text overflow.

_config.yml

@@ -1,6 +1,12 @@
 # path to your blog's icon
 favicon: /favicon.png
 
+# hero area content
+hero:
+  title: Welcome to Theme Cupertino
+  description: |
+    Aliquip voluptate ea velit consequat deserunt officia do aliqua est do consequat aute.
+
 # path to manifest.json
 manifest: /manifest.json
 

layout/index.ejs

@@ -1,8 +1,8 @@
 <div class="container">
   <% if (page.path == "index.html") { %>
   <div class="hero<% if (theme.hero_exit_while_scrolling.enabled) { %> exit-while-scroll<% if (theme.hero_exit_while_scrolling.blur_filter) { %> with-blur<% } %><% } %>">
-    <h2 class="sub"><%- config.subtitle %></h2>
-    <h2 class="large"><%- config.description %></h2>
+    <h2 class="title"><%- theme.hero.title %></h2>
+    <h2 class="description"><%- theme.hero.description %></h2>
   </div>
 
   <h2 class="section-title"><%- __('latest_posts') %></h2>

source/css/index.scss

@@ -1,8 +1,12 @@
 .hero {
-  height: calc(100vh - 56px);
   display: flex;
   flex-direction: column;
   justify-content: center;
+  gap: 6px;
+  $paddingY: 160px;
+  padding-top: $paddingY;
+  padding-bottom: $paddingY;
+  white-space: pre-wrap;
 
   @supports (animation-timeline: scroll()) {
     &.exit-while-scroll {
@@ -48,26 +52,18 @@
     }
   }
 
-  .sub {
-    text-transform: uppercase;
-    font-size: 24px;
+  .title {
+    font-size: 22px;
     color: var(--color-text-secondary);
-    font-weight: 100;
+    font-weight: 200;
     margin: 0;
     transition: font-size 0.5s;
-
-    @media (max-width: 800px) {
-      font-size: 16px;
-    }
   }
 
-  .large {
-    font-size: 128px;
+  .description {
+    font-size: 20px;
+    font-weight: normal;
     margin: 0;
     transition: font-size 0.5s;
-
-    @media (max-width: 800px) {
-      font-size: 84px;
-    }
   }
 }