integrate into git

styles/Home.module.css

@@ -1,5 +1,5 @@
 .container {
-  padding: 0 2rem;
+  padding: 0 0rem;
 }
 
 .main {
@@ -70,26 +70,85 @@
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
-  max-width: 800px;
+  max-width: 1000px;
 }
 
 .card {
+  --transition-time: 0.15s;
+  --hover-color: #0070f3;
+
+  background-color: var(--color-0);
+
   margin: 1rem;
-  padding: 1.5rem;
+  /* padding: 1.5rem; */
   text-align: left;
   color: inherit;
   text-decoration: none;
-  border: 1px solid #eaeaea;
+  border: 2px solid var(--color-0);
   border-radius: 10px;
-  transition: color 0.15s ease, border-color 0.15s ease;
-  max-width: 300px;
+  /* max-width: 300px; */
+  /* min-width: 150px; */
+  width: 30vw;
+  min-height: 500px;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  transition: var(--transition-time) color, var(--transition-time) border-color;
+}
+
+.card > * {
+  padding-bottom: 1.5rem;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
 }
 
 .card:hover,
 .card:focus,
 .card:active {
-  color: #0070f3;
-  border-color: #0070f3;
+  color: var(--hover-color);
+  border-color: var(--hover-color);
+  background-color: var(--color-black);
+}
+
+.card_gitea {
+  --hover-color: #609926;
+}
+
+.card_github {
+  --hover-color: #4078c0;
+}
+
+.card img {
+  max-width: 100px;
+  max-height: 100px;
+  width: 15vw;
+  padding: 0;
+  height: 15vw;
+  margin: 50px auto;
+  transition: var(--transition-time) filter;
+  flex-grow: 3;
+  filter: invert(98%) sepia(29%) saturate(491%) hue-rotate(301deg)
+    brightness(99%) contrast(98%);
+}
+
+.card_gitea:hover img {
+  filter: invert(53%) sepia(18%) saturate(1808%) hue-rotate(47deg)
+    brightness(96%) contrast(79%);
+  fill: var(--hover-color);
+  stroke: var(--hover-color);
+}
+
+.card img.card_mockup {
+  background-color: #f8f8f8;
+  width: calc(100% - 3rem);
+  min-height: 150px;
+  min-width: 150px;
+  max-width: 100%;
+  max-height: 100%;
+  margin: 0;
+  border-radius: 10px 10px 0px 0px;
 }
 
 .card h2 {
@@ -99,7 +158,7 @@
 
 .card p {
   margin: 0;
-  font-size: 1.25rem;
+  font-size: 1.1rem;
   line-height: 1.5;
 }
 

styles/globals.css

@@ -1,9 +1,22 @@
+:root {
+  --color-black: #192534;
+  --color-white: #fbf0e9;
+  --color-0: #355070;
+  --color-1: #6d597a;
+  --color-2: #b56576;
+  --color-3: #e56b6f;
+  --color-4: #eaac8b;
+}
+
 html,
 body {
   padding: 0;
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  font-family: Source Sans 3, -apple-system, BlinkMacSystemFont, Segoe UI,
+    Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
+    sans-serif;
+  background-color: var(--color-black);
+  color: var(--color-white);
 }
 
 a {

styles/test.module.sass

@@ -0,0 +1,2 @@
+.test
+  border: 5px solid red