all: move front into its own directory

1 files changed, 137 insertions, 0 deletions

diff --git a/front/src/pages/projects.css b/front/src/pages/projects.css
new file mode 100644
index 0000000..f9cc07f
--- /dev/null
+++ b/front/src/pages/projects.css
@@ -0,0 +1,137 @@
+.icon {
+  display: inline;
+  width: 32px;
+  height: 32px;
+  transition: 0.3s;
+  transform-origin: center;
+  filter: brightness(70%)
+}
+
+.icon:hover {
+  filter: brightness(80%);
+}
+
+.icon-row {
+  width: 240px;
+  height: 36px;
+}
+
+.icon-container {
+  height: 36px;
+  float: right;
+}
+
+.icon-text {
+  width: auto;
+  height: 36px;
+  line-height: 36px;
+  float: left;
+  vertical-align: middle;
+  margin-right: 8px;
+  color: #5c6370;
+}
+
+.projects-container {
+  width: 100%;
+  max-width: 1120px;
+  margin: auto;
+  margin-top: 24pt;
+  margin-bottom: 48pt;
+  align-items: center;
+  justify-content: center;
+  align-self: center;
+}
+
+.project {
+  display: table;
+  align-self: center;
+  clear: both;
+  margin-bottom: 24pt;
+}
+
+.project-info {
+  font-size: 14pt;
+}
+
+.project-description {
+  font-size: 16pt;
+  text-align: justify;
+}
+
+.project-image-gallery {
+  margin-left: 24px;
+  margin-right: 10px;
+}
+
+@media (max-width: 1150px) {
+  .project-title {
+    text-align: center;
+    font-size: 24pt;
+    margin-bottom: 8px;
+    text-decoration-line: underline;
+  }
+
+  .project-image-gallery {
+    margin: 60px auto;
+    width: 330px;
+    height: 220px;
+  }
+  
+  .project-info {
+    float: none;
+    width: 90%;
+    margin: auto;
+  }
+
+  .project-description {
+    font-size: 14pt;
+  }
+}
+
+@media (max-width: 1150px) and (min-width: 480px) {
+  .project-title {
+    text-align: center;
+    font-size: 24pt;
+    margin-bottom: 8px;
+    text-decoration-line: underline;
+  }
+  .project-image-gallery {
+    margin: 60px auto;
+    width: 480px;
+    height: 360px;
+  }
+
+  .project-info {
+    float: none;
+    width: 90%;
+    margin: auto;
+  }
+
+  .project-description {
+    font-size: 14pt;
+  }
+}
+
+@media (min-width: 1150px) {
+  .project-title {
+    text-align: left;
+    font-size: 32pt;
+    margin-bottom: 8px;
+    text-decoration-line: underline;
+  }
+  .project-image-gallery {
+    float: right;
+    width: 480px;
+    height: 360px;
+  }
+  .project-info {
+    float: left;
+    max-width: 600px;
+  }
+
+  .project-description {
+     font-size: 16pt;
+  }
+}
+
+