chore: homepage style

4 files changed, 53 insertions, 11 deletions

diff --git a/src/components/Home.module.scss b/src/components/Home.module.scss
index f6c1614..deee456 100644
--- a/src/components/Home.module.scss
+++ b/src/components/Home.module.scss
@@ -7,5 +7,9 @@
   }
 }
 .chart {
-  margin-top: 20px;
+  margin-top: 25px;
+  display: grid;
+  grid-gap: 20px;
+  grid-template-columns: 100%;
+  justify-content: space-around;
 }
diff --git a/src/components/MemoryChart.tsx b/src/components/MemoryChart.tsx
index 9f6febb..6d750e4 100644
--- a/src/components/MemoryChart.tsx
+++ b/src/components/MemoryChart.tsx
@@ -18,9 +18,18 @@ const { useMemo } = React;
 
 const chartWrapperStyle = {
   // make chartjs chart responsive
+  justifySelf: 'center',
   position: 'relative',
-  maxWidth: 1000,
-  marginTop: '1em',
+  width: '100%',
+  height: '200px',
+  borderTop: '2px solid #424242',
+};
+
+const canvasWrapperStyle = {
+  width: '100%',
+  height: '100%',
+  padding: '10px',
+  backgroundColor: 'rgb(26 26 26)',
 };
 
 const mapState = (s: State) => ({
@@ -55,7 +64,7 @@ function MemoryChart({ apiConfig, selectedChartStyleIndex }) {
   return (
     // @ts-expect-error ts-migrate(2322) FIXME: Type '{ position: string; maxWidth: number; }' is ... Remove this comment to see the full error message
     <div style={chartWrapperStyle}>
-      <canvas id="MemoryChart" />
+      <canvas id="MemoryChart" style={canvasWrapperStyle} />
     </div>
   );
 }
diff --git a/src/components/TrafficChart.tsx b/src/components/TrafficChart.tsx
index bd44ade..2b97905 100644
--- a/src/components/TrafficChart.tsx
+++ b/src/components/TrafficChart.tsx
@@ -13,8 +13,18 @@ const { useMemo } = React;
 
 const chartWrapperStyle: React.CSSProperties = {
   // make chartjs chart responsive
+  justifySelf: 'center',
   position: 'relative',
-  maxWidth: 1000,
+  width: '100%',
+  height: '200px',
+  borderTop: '2px solid #424242',
+};
+
+const canvasWrapperStyle = {
+  width: '100%',
+  height: '100%',
+  padding: '10px',
+  backgroundColor: 'rgb(26 26 26)',
 };
 
 const mapState = (s: State) => ({
@@ -53,7 +63,7 @@ function TrafficChart({ apiConfig, selectedChartStyleIndex }) {
 
   return (
     <div style={chartWrapperStyle}>
-      <canvas id="trafficChart" />
+      <canvas id="trafficChart" style={canvasWrapperStyle} />
     </div>
   );
 }
diff --git a/src/components/TrafficNow.module.scss b/src/components/TrafficNow.module.scss
index 0fca7ef..5ae96ac 100644
--- a/src/components/TrafficNow.module.scss
+++ b/src/components/TrafficNow.module.scss
@@ -4,10 +4,26 @@
   flex-wrap: wrap;
 
   display: grid;
-  grid-template-columns: repeat(auto-fill, 160px);
-  grid-gap: 15px;
-  justify-content: center;
-  // max-width: 1000px;
+  grid-gap: 10px;
+  grid-template-columns: 90%;
+  /* 当屏幕宽度大于300像素时，设置为一行两列 */
+  @media only screen and (min-width: 300px) {
+    grid-template-columns: 49% 49%;
+  }
+
+  /* 当屏幕宽度大于600像素时，设置为一行三列 */
+  @media only screen and (min-width: 600px) {
+    grid-template-columns: repeat(auto-fill, 32%);
+  }
+  /* 当屏幕宽度大于1000像素时，设置为一行四列 */
+  @media only screen and (min-width: 1000px) {
+    grid-template-columns: repeat(auto-fill, 24%);
+  }
+  /* 当屏幕宽度大于1000像素时，设置为一行四列 */
+  @media only screen and (min-width: 1200px) {
+    grid-template-columns: repeat(auto-fill, 15%);
+  }
+  justify-content: space-between;
 
   .sec {
     padding: 10px;
@@ -20,7 +36,10 @@
     }
     div:nth-child(2) {
       padding: 10px 0 0;
-      font-size: 1.3em;
+      font-size: 1.2em;
+      @media only screen and (min-width: 720px) {
+        font-size: 1.1em;
+      }
     }
   }
 }