first commit

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

@@ -0,0 +1,73 @@
+@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: #2e3440;
+        color: #eceff4;
+        border: 2px solid #3b425266;
+        box-shadow: 0 2px 5px 0 #2e3440;
+    }
+    #submit:hover {
+        background-color: #4c566a;
+    }
+    .flex-divider {
+        background-color: #2e3440;
+    }
+}
+
+#contact-flex {
+    text-align: center;
+    padding: 0 10px 0 10px;
+}
+
+#contact-flex a {
+    text-decoration: none;
+    list-style-type: none;
+}
+
+.flex-divider {
+    width: 60%;
+    height: 1px;
+    margin: 5% auto 5% auto;
+}
+
+input, textarea {
+    align-content: center;
+    width: 80%;
+    max-width: 80%;
+    min-width: 80%;
+    margin: auto;
+    border-radius: 0.7em;
+    padding: 0 0.5em;
+    height: fit-content;
+}
+
+#submit {
+    width: fit-content !important;
+    min-width: none;
+    max-width: none;
+}
+
+#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/Assignment 1/src/styles/index.css

@@ -0,0 +1,324 @@
+:root {
+    color-scheme: light;
+    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+}
+
+@media (prefers-color-scheme: dark) {
+    body {
+        background-color: #4c566a;
+        color:  #eceff4;
+    }
+    * :link {
+        color: #aab;
+    }
+    #toggle-navbar li, .card, .card-divider, .collapse-list label {
+        border: 2px solid #3b425266;
+        background-color: #434c5e;
+        box-shadow: 0 2px 5px 0 #2e3440;
+    }
+    #toggle-navbar li:hover {
+        background-color: #4c566a;
+    }
+    #toggle-navbar a:link, a:visited, a:focus {
+        color: white;
+    }
+    #toggle-navbar div {
+        background: #88c0d0;
+    }
+    ul li div {
+        background-color: #2e3440;
+    }
+    #toggle-navbar li ~ 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 li, .card, .card-divider, .collapse-list label {
+        border: 2px solid #4c566a;
+        background-color: #d8dee9;
+        box-shadow: 0 2px 5px 0 #434c5e;
+    }
+    #toggle-navbar li:hover {
+        background-color: #eeeeff;
+    }
+    #toggle-navbar a:link, a:visited, a:focus {
+        color: black;
+    }
+    #toggle-navbar div {
+        background: #5e81ac;
+    }
+    #toggle-navbar li ~ div {
+        box-shadow: none !important;
+    }
+    .collapse-list label:hover,
+    .collapse-list label:focus {
+        background: #eeeeff;
+    }
+}
+
+body {
+    width: 100%;
+    height: auto;
+    overflow: scroll;
+    margin: 0;
+}
+
+#main {
+    width: 100%;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    row-gap: 10vh;
+    height: 100%;
+    margin-top: 5vh;
+}
+
+#top-bar {
+    height: fit-content;
+    max-height: 20%;
+    align-items: center;
+    display: flex;
+    gap: 2vw;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    width: 100%;
+    margin: auto;
+    position: relative;
+    top: 0px;
+    min-height: 15vh;
+    max-height: 25vh;
+}
+
+#title-header {
+    display: inline;
+    margin: auto;
+}
+
+header {
+    text-align: center;
+}
+
+header h1 {
+    display: block;
+    font-size: 4vh;
+    margin: 0px;
+}
+
+#top-content {
+    display: flex;
+    flex-wrap: wrap;
+    gap: -1em;
+    padding: 0;
+    margin: 0;
+}
+
+#toggle-navbar {
+    display: inline;
+    position: relative;
+    height: auto;
+    z-index: 1;
+    margin-right: auto;
+    margin-left: 5vw;
+    width: fit-content;
+}
+
+#toggle-navbar li:hover ~ div {
+    transform: scaleX(250%);
+    transform-origin: 0% 0%;
+    transition: transform 1s cubic-bezier(0.1,-0.1,0.02,1.8);
+    
+    transition-duration: 1s;
+}
+
+#toggle-navbar li: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 a {
+    outline: none;
+    transition: color 0.3s ease;
+    display: flex;
+    flex-direction: column;
+    gap: 0px;
+    padding: 4px;
+    height: fit-content;
+    line-height: 3rem;
+    text-decoration: none;
+    width: fit-content;
+    margin: 15px 0 15px 0;
+    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-bottom: 5px;
+    margin-left: 5px;
+    position: relative;
+    border-radius: 3px;
+    z-index: 1;
+}
+
+#toggle-navbar li ~ div {
+    max-width: 90% !important;
+    min-width: 10% !important;
+    bottom: 5px;
+    left: -1px;
+}
+
+#toggle-navbar ul {
+    display: flex;
+    flex-direction: row;
+    gap: 1.1em;
+    position: relative;
+    margin-top: 1.5em;
+    padding: 0;
+    list-style-type: none;
+    transform-origin: 0% 0%;
+    transform: translate(0, -600%);
+    transition: transform 0.5s cubic-bezier(0.77,-0.2,0.02,1.2);
+}
+
+#toggle-navbar li
+{
+    padding: 10px 0;
+    font-size: 2.25vh;
+    width: 10vh;
+    border-radius: 0.5em;
+    padding: 0.4vh 1.1vw 0.4vh 1.1vw;
+}
+
+#toggle-navbar input:checked ~ ul
+{
+    transform: none;
+}
+
+#toggle-navbar a:active {
+    cursor: default;
+}
+
+footer {
+    height: 3em;
+    width: 100%;
+    font-size: 75%;
+    width: 100%;
+    position: fixed;
+    bottom: 0px;
+    left: 0px;
+    display: flex;
+    gap: 2em;
+    margin: 3px 10px;
+}
+
+footer p {
+    display: inline;
+}
+
+#content {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 10px;
+    column-gap: 2em;
+    justify-content: center;
+    height: fit-content;
+}
+
+#content h2 {
+    text-align: start;
+}
+
+.card-divider {
+    border-radius: 1rem;
+    display: block;
+    padding: 1% 1% 1% 1%;
+    max-width: 80%;
+    margin: 0.5em;
+    min-width: 80%;
+    line-height: 1rem;
+}
+
+.card {
+    border-radius: 1rem;
+    display: block;
+    padding: 2% 2% 2% 2%;
+    max-width: 15vw;
+    flex-basis: 50%;
+    margin: 0.5em;
+    min-width: 15em;
+    height: fit-content;
+}
+
+.card > * {
+    flex: 1 1 auto;
+}
+
+.card header {
+    display: inline-block;
+    margin: 1em auto;
+    width: 100%;
+}
+
+.card header h2 {
+    margin: auto;
+    width: fit-content;
+    text-align: center;
+}
+
+.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;
+}

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

@@ -0,0 +1,71 @@
+.card {
+    max-width: 40vw !important;
+}
+
+#card-content {
+    display: flex;
+    gap: 1em;
+}
+
+img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 1rem;
+}
+
+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;
+    transition: height 0.3s ease;
+}
+
+.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;
+}
+
+.collapse-list p:last-child {
+    margin-bottom: 0;
+}
+
+#container-list li {
+    padding-bottom: 1em;
+}