Skip to content

Commit

Permalink
im(docs) prove copy text on smaller screens
Browse files Browse the repository at this point in the history
  • Loading branch information
jcubic committed Nov 15, 2024
1 parent e0c6ca1 commit d60a253
Show file tree
Hide file tree
Showing 2 changed files with 28 additions and 2 deletions.
20 changes: 20 additions & 0 deletions docs/src/pages/index.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,14 @@
letter-spacing: 3px;
}

.hero_intro {
display: none;
}

.hero_second:nth-child(2) {
display: none;
}

.hero_text h1 span:last-child {
display: none;
}
Expand Down Expand Up @@ -54,4 +62,16 @@
.hero_text h1 span:last-child {
display: block;
}
.hero_intro {
display: inline;
}
.hero_prefix {
text-transform: lowercase;
}
.hero_second:first-child {
display: none;
}
.hero_second:nth-child(2) {
display: inline;
}
}
10 changes: 8 additions & 2 deletions docs/src/pages/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,15 @@ function HomepageHeader() {
<span>jQuery Terminal</span>
<span>Summary</span>
</h1>
<p>An open-source, feature-rich JavaScript library that adds a terminal interface to your
<p>
<span className={styles.hero_intro}>jQuery Terminal is </span>
<span className={styles.hero_prefix}>An </span>
open-source, feature-rich JavaScript library that adds a terminal interface to your
website.</p>
<p>jQuery Terminal uses jQuery only as a dependency, and you can think of it as a
<p>
<span className={styles.hero_second}>jQuery Terminal </span>
<span className={styles.hero_second}>It </span>
uses jQuery only as a dependency, and you can think of it as a
framework.</p>
<p>It's perfect for adding advanced functionality for power users, serving as
a debugging tool, or creating cool websites that resemble a terminal from
Expand Down

0 comments on commit d60a253

Please sign in to comment.