first commit

Semester 1/Web Development and HCI/webdev/src/styles/contact.css

@@ -0,0 +1,71 @@
+@media ( prefers-color-scheme: dark ) {
+    input, textarea {
+        background-color: #2e3440;
+        color: #eceff4;
+        border: 2px solid #3b425266;
+        box-shadow: 0 2px 5px 0 #2e3440;
+    }
+    #submit:hover {
+        background-color: #4c566a;
+    }
+    .flex-divider {
+        background-color: #eceff4;
+    }
+}
+
+@media ( prefers-color-scheme: light ) {
+    input, textarea {
+        background-color: #d8dee9;
+        color: black;
+        border: 2px solid #7f899d;
+        box-shadow: 0 1px 2px 0 #545d6f;
+    }
+    #submit:hover {
+        background-color: #eeeeff;
+    }
+    .flex-divider {
+        background-color: black;
+    }
+}
+
+#contact-flex {
+    text-align: center;
+    padding: 0 10px 0 10px;
+    list-style-type: none;
+}
+
+#contact-flex li {
+    list-style-type: none;
+    text-decoration: none;
+}
+
+.flex-divider {
+    width: 60%;
+    height: 1px;
+    margin: 5% auto 5% auto;
+}
+
+.card-content input, .card-content textarea {
+    align-content: center;
+    max-width: 80%;
+    min-width: 80%;
+    margin: auto;
+    border-radius: 0.7em;
+    padding: 0 0.5em;
+    height: fit-content;
+}
+
+#submit {
+    width: fit-content !important;
+}
+
+#submit:hover {
+    transform: scale(1.05) !important;
+    transition: transform 0.75s cubic-bezier(0.1,-0.2,0.05,1.2);
+    transition-duration: 0.75s;
+}
+form {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5em;
+}

Semester 1/Web Development and HCI/webdev/src/styles/index.css

@@ -0,0 +1,352 @@
+:root {
+    color-scheme: light;
+    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+}
+
+html, body {
+    min-height: 100% !important;
+    width: 100%;
+    position: absolute;
+    margin: 0;
+}
+@media (prefers-color-scheme: dark) {
+    body {
+        background-color: #4c566a;
+        color:  #eceff4;
+    }
+    * :link {
+        color: #aab;
+    }
+    #toggle-navbar a, .card, .card-divider, .collapse-list label {
+        border: 2px solid #3b425266;
+        background-color: #434c5e;
+        box-shadow: 0 2px 5px 0 #2e3440;
+    }
+    #toggle-navbar a:hover {
+        background-color: #4c566a;
+    }
+    a, a:link, a:visited, a:focus {
+        color: #ddddff;
+    }
+    #toggle-navbar a:link, a:visited, a:focus {
+        color: white;
+    }
+    #toggle-navbar div {
+        background: #88c0d0;
+    }
+    ul a div {
+        background-color: #2e3440;
+    }
+    #toggle-navbar a ~ div {
+        box-shadow: 0 0 5px 5px #434c5e;
+    }
+    .collapse-list label:hover,
+    .collapse-list label:focus {
+        background: #4c566a;
+    }
+}
+
+@media (prefers-color-scheme: light) {
+    body {
+        background-color: #e5e9f0;
+        color: #2e3440;
+    }
+    * :link {
+        color: #5e81ac;
+    }
+    #toggle-navbar a, .card, .card-divider, .collapse-list label {
+        border: 2px solid #7f899d;
+        background-color: #d8dee9;
+        box-shadow: 0 1px 2px 0 #545d6f;
+    }
+    #toggle-navbar a:hover {
+        background-color: #eeeeff;
+    }
+    a, a:link, a:visited, a:focus {
+        color: #111133;
+    }
+    #toggle-navbar a:link, a:visited, a:focus {
+        color: black;
+    }
+    #toggle-navbar div {
+        background: #5e81ac;
+    }
+    #toggle-navbar a ~ div {
+        box-shadow: none !important;
+    }
+    .collapse-list label:hover,
+    .collapse-list label:focus {
+        background: #eeeeff;
+    }
+}
+
+footer {
+    height: 3em;
+    width: 100%;
+    font-size: 75%;
+    position: absolute;
+    bottom: 0px;
+    left: 0px;
+    display: flex;
+    gap: 2em;
+    margin: 3px 10px;
+}
+
+footer p {
+    display: inline;
+}
+
+.card {
+    border-radius: 1rem;
+    padding: 2%;
+    margin: 0.5em;
+    height: fit-content;
+}
+
+.card header {
+    display: inline-block;
+    margin: 1em auto;
+    width: 100%;
+}
+
+.card header h2 {
+    margin: auto;
+    width: fit-content;
+    text-align: center;
+}
+
+.card footer {
+    font-size: 1rem;
+}
+
+#main {
+    width: 100%;
+    margin: 0;
+    display: block;
+    height: 100%;
+}
+
+#top-bar {
+    display: block;
+    width: 100%;
+    margin: 10px auto;
+    position: relative;
+    top: 0px;
+    height: 25%
+}
+
+#content {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 10px;
+    column-gap: 2em;
+    justify-content: center;
+    height: 75%;
+    overflow: auto;
+    margin-top: 5vh;
+    padding-bottom: 40px;
+}
+
+#title-header {
+    display: block;
+    margin: auto;
+    margin-top: 6vh;
+}
+
+header {
+    text-align: center;
+}
+
+header h1 {
+    display: block;
+    margin: 0px;
+}
+
+#toggle-navbar {
+    display: block;
+    position: relative;
+    height: auto;
+    z-index: 1;
+    margin: auto;
+    margin-top: 5vw;
+    width: 90%;
+}
+
+#toggle-navbar a:hover > div {
+    transform: scaleX(2.5);
+    transform-origin: 0% 0%;
+    transition: transform 1s ease;
+    
+    transition-duration: 1s;
+}
+
+#toggle-navbar a:hover {
+    transform: scale(1.03) !important;
+    transition: transform 0.5s cubic-bezier(0.1,-0.2,0.05,1.2);
+    transition-duration: 0.5s;
+}
+
+#toggle-navbar li {
+    outline: none;
+    transition: color 0.3s ease;
+    display: flex;
+    flex-direction: column;
+    gap: 0px;
+    padding: 6px;
+    height: fit-content;
+    line-height: 2rem;
+    width: 75%;
+    margin-top: 5px;
+    text-align: center;
+    overflow: hidden;
+}
+
+#toggle-navbar input {
+    display: block;
+    width: 40px;
+    height: 32px;
+    position: absolute;
+    margin-bottom: 5px;
+    cursor: pointer;
+    opacity: 0;
+    z-index: 2;
+}
+
+#toggle-navbar div {
+    display: block;
+    width: 33px;
+    height: 4px;
+    margin-left: 5px;
+    position: relative;
+    border-radius: 3px;
+    z-index: 1;
+}
+
+.hamburger-division {
+    margin-bottom: 5px;
+}
+
+#toggle-navbar a ~ div {
+    max-width: 90% !important;
+    min-width: 10% !important;
+    bottom: 5px;
+    left: -1px;
+}
+
+#toggle-navbar ul {
+    display: flex;
+    flex-direction: row;
+    gap: 0.8em;
+    position: relative;
+    width: 100%;
+    margin: 10px auto;
+    padding: 0;
+    list-style-type: none;
+    transform-origin: 0% 0%;
+    transform: translate(0, -400%);
+    transition: transform 0.5s cubic-bezier(0.77,-0.2,0.02,1.2);
+}
+
+#toggle-navbar a
+{
+    width: 100%;
+    border-radius: 0.5em;
+    
+    text-decoration: none;
+}
+
+#toggle-navbar input:checked ~ ul
+{
+    transform: none;
+}
+
+#toggle-navbar a:active {
+    cursor: default;
+}
+
+.card-divider {
+    border-radius: 1rem;
+    display: block;
+    padding: 1% 1% 1% 5%;
+    max-width: 80vw;
+    margin: 0.5em;
+    min-width: 80%;
+    line-height: 2rem;
+    max-height: 10rem;
+}
+
+.card-content {
+    height: 65%;
+}
+
+.card-footer {
+    position: relative;
+    justify-content: space-between;
+    display: flex;
+    flex-direction: row;
+    bottom: 0px;
+    margin: auto;
+    min-height: 10%;
+}
+
+.card-footer ul {
+    margin: auto;
+    display: flex;
+    gap: 1em;
+    padding: 0;
+    list-style-type: none;
+}
+
+.card-footer li, .card-footer a {
+    text-decoration: none;
+}
+
+.card:hover {
+    transform: scale(1.01);
+    transition-duration: 0.2s;
+    transform-box: border-box;
+}
+
+/* Desktop */
+@media screen and (min-width: 1024px) {
+    .card {
+        min-width: 20vw;
+        max-width: 20vw;
+    }
+    #toggle-navbar li {
+        width: 10vw;
+    }
+}
+
+/* For Tablet View */
+@media screen and (min-width: 768px) and (max-width: 1024px) {
+    .card {
+        min-width: 50vw;
+        max-width: 50vw;
+    }
+}
+
+/* Mobile Portrait */
+@media screen and (max-width: 480px) and (orientation: portrait) {
+    .card {
+        min-width: 85vw;
+        max-width: 85vw;
+    }
+    #toggle-navbar a {
+        font-size: 3.5vw;
+    }
+}
+
+/* Mobile Landscape */
+@media screen and (max-width: 1024px) and (orientation: landscape) {
+    .card {
+        min-width: 50vw;
+        max-width: 50vw;
+    }
+    #top-bar {
+        height: 10%;
+    }
+    #content {
+        height: 90%;
+    }
+}

Semester 1/Web Development and HCI/webdev/src/styles/projects.css

@@ -0,0 +1,67 @@
+.card {
+    max-width: 40vw !important;
+}
+
+#card-content {
+    display: flex;
+    gap: 1em;
+}
+
+img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 1rem;
+    margin: auto;
+}
+
+figure {
+    width: 100%;
+    margin: auto;
+    margin-top: 1em;
+}
+
+figcaption {
+    margin: auto;
+    font-size: 0.75rem;
+    width: fit-content;
+}
+
+#vm-list {
+    text-decoration: none;
+    list-style-type: none;
+    padding: 0;
+}
+
+.collapse-list > input[type="checkbox"] {
+    position: absolute;
+    left: -100vw;
+}
+
+.collapse-list .collapse-list-content {
+    overflow-y: hidden;
+    height: 0;
+}
+
+.collapse-list > input[type="checkbox"]:checked ~ .collapse-list-content {
+    height: auto;
+    overflow: visible;
+}
+
+.collapse-list {
+    margin-bottom: 1em;
+}
+
+.collapse-list label {
+    cursor: pointer;
+    font-weight: normal;
+    padding: 15px;
+    margin: 0;
+    font-size: 1.125em;
+    line-height: 1.2em;
+    border-radius: 1rem;
+    display: block;
+}
+
+#container-list li {
+    padding-bottom: 1em;
+}