basic project card and projects page setup

2023-05-10 22:40:04 -06:00
parent 1e7af0b94b
commit 6d1099590e
108 changed files with 673 additions and 154 deletions
@@ -0,0 +1,62 @@
+html {
+  font-size: 20px;
+  font-weight: 200;
+}
+
+.panels {
+  overflow: hidden;
+  float: right;
+
+  width: 40% !important;
+}
+
+.panel {
+  background: #6B0F9C;
+  box-shadow: inset 0 0 0 5px rgba(255,255,255,0.1);
+  color: white;
+  transition:
+    font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
+    flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
+    background 0.2s;
+  font-size: 20px;
+  background-size: cover;
+  background-position: center;
+  display: flex;
+  flex-direction: column;
+}
+
+.panel > * {
+  margin: 0;
+  width: 100%;
+  transition: transform 250ms;
+  flex: 1 0 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.panel > *:nth-child(2) { transform: translateX(100%);}
+.panel.open-active > *:nth-child(2) { transform: translateX(0);}
+.panel > *:last-child { transform: translateX(100%); }
+.panel.open-active > *:last-child { transform: translateX(0); }
+
+.panel p {
+  font-family: Lato, sans-serif;
+  color: white;
+  font-size: 0.8em;
+}
+
+.panel p:nth-child(1) {
+  font-size: 1em;
+}
+
+.panel.open {
+  flex: 5;
+  font-size: 2em;
+}
+
+@media only screen and (max-width: 600px) {
+  .panel p {
+    font-size: 0.8em;
+  }
+}