added jobs, news, contact; added site.json backend; lazy loading images

src/assets/js/main.js

@@ -79,6 +79,7 @@ function openMenu(e) {
   gsap.to(openedMenuArray, { x: "0", opacity: 1, width: "auto" });
   gsap.to(closedMenuArray, { x: "3rem", opacity: 0, width: 0 });
   gsap.to("html", { overflow: "hidden" });
+  document.querySelector('html').classList.add("menu-is-open");
 }
 function closeMenu(e) {
   e.preventDefault();
@@ -87,6 +88,7 @@ function closeMenu(e) {
   gsap.to(closedMenuArray, { x: "0", opacity: 1, width: "auto" });
   gsap.to(openedMenuArray, { x: "3rem", opacity: 0, width: 0 });
   gsap.to("html", { overflow: "overlay" });
+  document.querySelector('html').classList.remove("menu-is-open");
 }
 
 //////////////////////////////////////////

src/assets/styles/community.scss

@@ -1,13 +1,22 @@
-#community {
+section#community {
   display: flex;
   flex-direction: column;
   align-items: center;
   //min-height: calc(100vh - 2 * var(--section-padding));
   margin-bottom: 12rem;
+  --width: calc(31ch - 5rem);
+
+  h1{
+    margin-bottom: 6rem;
+  }
+
+  form{
+    position: relative;
+  }
 
   input[type="email"] {
-    width: 31ch;
-    background: transparent;
+    width: var(--width);
+    background-color: transparent;
     border: 0;
     border-bottom: 1px dotted var(--c-line-primary);
     padding: 0.7em 1em;
@@ -15,13 +24,48 @@
     font-family: var(--f-button);
     font-weight: 100;
     color: var(--c-text-primary);
-    margin-top: 7rem;
+    transition: var(--t-simple);
+    &:focus{
+      background-color: rgba(255,255,255,.1);
+    }
+    &:focus-visible{
+      outline: none;
+    }
+    &:placeholder-shown, &:invalid{
+      &+button {
+        right: 0;
+        opacity: 0;
+      }
+    }
+  }
+  button[type='submit']{
+    transition: var(--t-simple);
+    height: 100%;
+    width: 5rem;
+    position: absolute;
+    border: 0;
+    background-color: var(--c-text-accent);
+    cursor: pointer;
+    right: -5rem;
+    opacity: 1;
+    svg{
+      transition: var(--t-simple);
+      width:70%;
+      path, line{
+        stroke: var(--c-line-primary);
+      }
+    }
+    &:hover{
+      svg{
+        transform: translateX(-0.4rem) rotate(45deg) scale(1.2);
+      }
+    }
   }
 
   .community__icons {
     display: flex;
     justify-content: space-between;
-    width: 31ch;
+    width: var(--width);
     font-size: 2rem;
     font-family: var(--f-button);
     align-items: center;

src/assets/styles/dev.scss

@@ -57,5 +57,6 @@
 }
   img {
     width: 20rem;
+    box-shadow: 0 3rem 2rem 0rem rgb(0 0 0 / 40%);
   }
 }

src/assets/styles/main.scss

@@ -73,6 +73,12 @@ html {
   ::-webkit-scrollbar-thumb:hover {
     background: var(--c-1);
   }
+
+  &.menu-is-open{
+    .header__logo{
+        opacity: 0 !important;
+    }
+  }
 }
 
 body{

src/assets/styles/peripheral.scss

@@ -1,9 +1,16 @@
+@use 'community';
+
 main {
   margin-top: 7rem;
   display: flex;
   flex-direction: column;
   align-items: center;
   overflow-x: clip;
+  background-color: #333;
+}
+
+#menu{
+  box-shadow: inset 0 -5rem 5rem -2rem rgb(0 0 0 / 40%);
 }
 
 .header__logo {
@@ -102,10 +109,26 @@ section#virtues {
     align-items: flex-start;
   }
 }
+  #logo{
+    margin-bottom: -6rem;
+    h1 { font-size: 5rem; }
+  }
 
 #hero-image img {
   margin-top: 0;
-  width: 28rem;
+  width: 25rem;
+
+}
+
+.hero--about{
+  #hero-image img {
+    margin-top: 0;
+    width: 28rem;
+  }
+  #logo{
+    margin-bottom: 0;
+    h1 { font-size: 4.2rem; }
+  }
 }
 
 h1 {
@@ -119,6 +142,7 @@ h2 {
   font-family: var(--f-hero);
   font-size: 3.7rem;
   text-align: center;
+  line-height: 1;
 }
 
 section#blurb h2 {
@@ -178,6 +202,12 @@ p {
 
 /* about */
 
+section#origin{
+  .section__image img{
+    transform: rotate(-3deg);
+  }
+}
+
 .members {
   display: flex;
   flex-wrap: wrap;
@@ -190,7 +220,7 @@ p {
       border-radius: 100%;
       width: 10rem;
       height: 10rem;
-      border: 1px solid var(--c-text-primary);
+      box-shadow: 0 3rem 2rem 0rem rgb(0 0 0 / 40%);
     }
     p {
       font-size: .8rem;
@@ -231,4 +261,44 @@ ol ol, ul ol {
   list-style-type: lower-latin;
   margin-left: 15px; 
 }
+}
+
+section#news{
+  ul{
+    display: flex;
+    flex-direction: column;
+    gap: 4rem;
+  }
+  li a{
+    display: flex;
+    flex-direction: column;
+    gap: .5rem;
+    align-items: flex-start;
+    outline: 1px solid rgb(255 255 255 / 0%);
+    outline-offset: .5rem;
+    transition: var(--t-simple);
+    &:hover{
+      outline: 1px solid rgb(255 255 255 / 100%);
+      outline-offset: 2rem;
+    }
+  }
+  h3{
+    text-transform: unset;
+    color: var(--c-text-primary);
+  }
+  .creator{
+    border-radius: 999px;
+    background-color: var(--c-text-accent);
+    color: var(--c-text-primary);
+    padding: .2em .5em;
+    font-size: .8rem;
+    font-weight: 500;
+    opacity: .6;
+  }
+  .twitter-text{
+    color: var(--c-text-primary);
+    font-size: 1.2rem;
+    line-height: 1.4;
+    margin: 0;
+  }
 }

src/assets/styles/powered-by.scss

@@ -73,6 +73,14 @@ section#powered-by {
       background-color: var(--c-text-accent);
       border-radius: 999px;
       padding: .15em .6em;
+      transition: var(--t-simple);
+    }
+    &:hover{
+      transform: scale(1.05);
+      span{
+        background-color: var(--c-text-primary);
+        color: var(--c-text-accent);
+      }
     }
   }
 }