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,37 @@
+.navbar {
+    border: none;
+}
+
+.bg-dark {
+    background-color: #4A245E;
+}
+
+.navbar-inverse .navbar-nav > li > a {
+    color: white;
+    transition: color 300ms;
+}
+
+.nav-item {
+    transition: background-color 300ms;
+}
+
+.nav-item:hover {
+    background-color: white;
+}
+
+.navbar-inverse .navbar-nav > li > a:focus, .navbar-inverse .navbar-nav > li > a:hover {
+    color: #4A245E;
+    background-color: transparent;
+}
+
+.navbar-inverse .navbar-nav > .active > a,
+    .navbar-inverse .navbar-nav > .active > a:hover,
+    .navbar-inverse .navbar-nav > .active > a:focus {
+
+    background-color: white;
+    color: #4A245E;
+}
+
+.card-text {
+    font-size: 2vw;
+}
@@ -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;
+  }
+}
@@ -0,0 +1,138 @@
+/* GENERAL */
+body {
+    margin:0;
+    height:100vh;
+}
+
+/* TEXT */
+* {
+    font-family: Lato, sans-serif;
+    color: white;
+}
+
+h1, h2 {
+    font-weight: bold;
+    margin: 0;
+}
+
+h1 {
+    margin: 5vw 0 5vw 0;
+    font-size: 8vw;
+}
+
+
+h2 {
+    font-size: 4vw;
+}
+
+h3 {
+    font-size: 3vw;
+}
+
+p {
+    font-size: 2vw;
+}
+
+.dark-text {
+    color: #4A245E;
+}
+
+.light-text {
+    color: white;
+}
+
+/* NAV-BAR */
+.bg-light {
+    background-color: white !important;
+    padding: 0;
+}
+
+.navbar-brand {
+    padding-left: .5vw;
+    color: #4A245E;
+    font-size: 2vw;
+    font-weight: bold;
+
+    animation: 500ms;
+}
+
+.navbar-toggler {
+    border: none;
+}
+
+.navbar-toggler:focus {
+    box-shadow: none;
+    border:none;
+}
+
+.navbar-light .navbar-toggler-icon {
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(74, 36, 94, 1)' stroke-width='3.5' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
+}
+
+.navbar-brand:hover {
+    color: #4A245E;
+}
+
+.nav-link {
+    padding: 1.5vw;
+}
+
+.nav-link, .nav-link > .nav-item {
+    color: #4A245E;
+    font-size: 1.3vw;
+
+    animation: 500ms;
+}
+
+.nav-link:hover, .nav-link:hover > .nav-item {
+    color: white;
+}
+
+.nav-link:hover {
+    background-color: #4A245E;
+}
+
+/* MISC */
+
+.custom-container {
+    float: right;
+
+    width: 40% !important;
+}
+
+.bar {
+    display: block;
+    width: 100%;
+    border-top: 5px #4A245E solid;
+    padding-bottom: 1vw;
+}
+
+.card-text {
+    font-size: 2vw;
+}
+
+@media (max-width: 991px) {
+    h1 {
+        font-size: 12vw;
+    }
+
+    h2 {
+        font-size: 8vw;
+    }
+
+    h3, .navbar-brand {
+        font-size: 6vw;
+    }
+
+    h4 {
+      font-size: 4vw;
+    }
+
+    p, .nav-link, .nav-link > .nav-item {
+        font-size: 3vw;
+    }
+
+    .nav-link > .nav-item {
+        font-weight: bold;
+    }
+}