Merge pull request #1 from m5stack/en

En

docs/assets/css/main.css

@@ -2,6 +2,10 @@
     --theme-color: hsl(204, 90%, 45%);
 }
 
+.markdown-section {
+    max-width: 60rem;
+}
+
 .markdown-section a {
     color: var(--theme-color, #42b983);
 }
@@ -19,6 +23,7 @@ body[data-page="index.md"] article.markdown-section .item {
     width: 150px;
     margin-right: 10px;
     display: inline-block;
+    position:relative;
 }
 
 body[data-page="index.md"] article.markdown-section p.item-title {
@@ -34,6 +39,7 @@ body[data-page="zh_CN/README.md"] article.markdown-section .item {
     width: 150px;
     margin-right: 10px;
     display: inline-block;
+    position:relative;
 }
 
 body[data-page="zh_CN/README.md"] article.markdown-section p.item-title {
@@ -191,7 +197,9 @@ body[data-page="ja/README.md"] #faces-kit {
 #lego_plus,
 #encoder,
 #joystick-1,
-#fan {
+#fan ,
+#faces-rfid,
+#faces-finger{
     width: 0;
     height: 0;
     overflow: hidden;
@@ -262,7 +270,15 @@ body[data-page="ja/README.md"] #faces-kit {
 #butterfly,
 #pahub,
 #pbhub,
-#m5-bit {
+#m5-bit,
+#vibrator-motor,
+#unit-fan,
+#op90,
+#op180,
+#accel,
+#laser-rx,
+#laser-tx,
+#mini-proto {
     width: 0;
     height: 0;
     overflow: hidden;
@@ -321,7 +337,13 @@ body[data-page="ja/README.md"] #application {
 #hat,
 #hat-env,
 #hat-pir,
-#hat-spk {
+#hat-spk,
+#hat-proto,
+#hat-ncir,
+#hat-thermal,
+#hat-adc,
+#hat-dac,
+#hat-rs485 {
     width: 0;
     height: 0;
     overflow: hidden;
@@ -350,3 +372,22 @@ body[data-page="ja/README.md"] #application {
     margin: 0;
     padding: 0;
 }
+
+
+.mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 150px;
+    height: 150px;
+    background: rgba(0, 0, 0, 0.7);
+    color: #ffffff;
+    opacity: 0;
+}
+.mask h3 {
+    text-align: center;
+}
+
+.item a:hover .mask {
+    opacity: 1;           
+}