This is an automated email from the ASF dual-hosted git repository.
fanningpj pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-pekko-site.git
The following commit(s) were added to refs/heads/main by this push:
new 5fb2f72f improve website readability (#73)
5fb2f72f is described below
commit 5fb2f72fd7fce78a4669bd9283d43208739608d4
Author: AndyChen <[email protected]>
AuthorDate: Wed Jan 24 19:01:33 2024 +0800
improve website readability (#73)
* improve website readability
* improve for mobile device and build
* use secondary light background
* replace to crlf
---
content/assets/stylesheets/home.css | 53 +++++++++++++++++++---
.../paradox/_template/assets/stylesheets/home.css | 53 +++++++++++++++++++---
2 files changed, 92 insertions(+), 14 deletions(-)
diff --git a/content/assets/stylesheets/home.css
b/content/assets/stylesheets/home.css
index 45cce9c2..8b4cb981 100644
--- a/content/assets/stylesheets/home.css
+++ b/content/assets/stylesheets/home.css
@@ -16,6 +16,9 @@
specific language governing permissions and limitations
under the License.
*/
+:root{
+ background-color: #eef0f2;
+}
h1 {
display: none;
@@ -163,13 +166,13 @@ h1 {
/* Styling Modules sections */
.row > ul {
- gap: 20px;
+ gap: 24px 36px;
display: grid;
margin: 0 auto;
- max-width: 769px;
+ max-width: 960px;
text-align: center;
list-style-type: none;
- grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.row ul li {
@@ -179,16 +182,22 @@ h1 {
}
.row > ul > li {
- background-color: #f0f0f0;
+ border: 1px solid rgba(0,0,0,0.2);
+ font-weight: 500;
+ background-color: #fff;
border-radius: 8px;
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+ transition: 0.3s;
opacity: 1;
transition: opacity 0.3s ease-in-out;
cursor: default;
+ padding:24px;
+ color: #ff9100;
+ opacity: 0.8;
}
-.row > ul > li:hover {
- opacity: 0.8;
+.row > ul > li a{
+ text-decoration: underline;
}
@@ -200,3 +209,33 @@ h1 {
.md-header-nav__button.md-icon--menu {
display: none;
}
+
+
+@media (max-width: 768px) {
+ .row > ul {
+ gap: 12px 18px;
+ max-width: 700px;
+ }
+ .row ul li {
+ padding: 4px;
+ }
+
+ .row > ul > li {
+ padding: 16px 8px;
+ }
+}
+
+
+@media (max-width: 480px) {
+ .row > ul {
+ gap: 8px 12px;
+ max-width: 400px;
+ }
+ .row ul li {
+ padding: 4px;
+ }
+
+ .row > ul > li {
+ padding: 16px 8px;
+ }
+}
diff --git a/src/main/paradox/_template/assets/stylesheets/home.css
b/src/main/paradox/_template/assets/stylesheets/home.css
index 45cce9c2..8b4cb981 100644
--- a/src/main/paradox/_template/assets/stylesheets/home.css
+++ b/src/main/paradox/_template/assets/stylesheets/home.css
@@ -16,6 +16,9 @@
specific language governing permissions and limitations
under the License.
*/
+:root{
+ background-color: #eef0f2;
+}
h1 {
display: none;
@@ -163,13 +166,13 @@ h1 {
/* Styling Modules sections */
.row > ul {
- gap: 20px;
+ gap: 24px 36px;
display: grid;
margin: 0 auto;
- max-width: 769px;
+ max-width: 960px;
text-align: center;
list-style-type: none;
- grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.row ul li {
@@ -179,16 +182,22 @@ h1 {
}
.row > ul > li {
- background-color: #f0f0f0;
+ border: 1px solid rgba(0,0,0,0.2);
+ font-weight: 500;
+ background-color: #fff;
border-radius: 8px;
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+ transition: 0.3s;
opacity: 1;
transition: opacity 0.3s ease-in-out;
cursor: default;
+ padding:24px;
+ color: #ff9100;
+ opacity: 0.8;
}
-.row > ul > li:hover {
- opacity: 0.8;
+.row > ul > li a{
+ text-decoration: underline;
}
@@ -200,3 +209,33 @@ h1 {
.md-header-nav__button.md-icon--menu {
display: none;
}
+
+
+@media (max-width: 768px) {
+ .row > ul {
+ gap: 12px 18px;
+ max-width: 700px;
+ }
+ .row ul li {
+ padding: 4px;
+ }
+
+ .row > ul > li {
+ padding: 16px 8px;
+ }
+}
+
+
+@media (max-width: 480px) {
+ .row > ul {
+ gap: 8px 12px;
+ max-width: 400px;
+ }
+ .row ul li {
+ padding: 4px;
+ }
+
+ .row > ul > li {
+ padding: 16px 8px;
+ }
+}
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
