v1.4.1-beta/website

website/styles/extrasmall.css

@@ -22,6 +22,7 @@
 * {
   margin: 0em;
   padding: 0em;
+  user-select: none;
 }
 
 html {
@@ -34,7 +35,7 @@ body {
 }
 
 .landing {
-  padding-top: 17.5rem;
+  padding-top: 12.5rem;
   padding-left: 10rem;
 }
 
@@ -70,7 +71,7 @@ body {
 }
 
 .works-title {
-  font-size: 2.4rem;
+  font-size: 3rem;
   color: var(--primary-text);
   letter-spacing: 0.75rem;
   margin: 3rem 0;
@@ -94,11 +95,11 @@ body {
 .link-button {
   display: table;
   text-decoration: none;
-  padding: 1rem 7.5rem;
+  padding: 3rem 7.5rem;
   color: var(--primary);
   background-color: var(--cta);
   font-size: 4rem;
-  border-radius: 4rem;
+  border-radius: 7.5rem;
 }
 
 .features {
@@ -108,22 +109,22 @@ body {
 
 .feature-card {
   background-color: var(--primary-light);
-  padding: 6rem 10rem;
+  padding: 6rem 7.5rem;
   margin: 10rem 0;
 }
 
 .feature-icon {
   padding: 5rem;
-  background-position: center !important;
+  background-position: left !important;
   background-size: contain !important;
   background-repeat: no-repeat !important;
-  margin: 2.5rem;
+  margin: 2.5rem 0;
 }
 
 .feature-text {
   color: var(--primary-text);
   font-size: 2.8rem;
-  text-align: center;
+  text-align: left;
 }
 
 footer {
@@ -133,7 +134,6 @@ footer {
 
 footer .works-title {
   width: 100%;
-  color: white;
 }
 
 .built-with {
@@ -142,8 +142,6 @@ footer .works-title {
 
 .built-with a {
   color: var(--cta);
-  text-decoration: underline;
-  text-underline-offset: 0.3rem;
 }
 
 footer .link-button {

website/styles/large.css

@@ -1,73 +1,4 @@
-.logo {
-  font-size: 10rem;
-  transition: all ease-in-out 0.3s;
-}
-.logo.stickied {
-  font-size: 2rem;
-  letter-spacing: 0.8rem;
-  position: fixed;
-  background-color: var(--primary);
-  width: 100%;
-  left: 0;
-  top: 0;
-  padding: 3rem 10rem;
-}
-
+.features,
 .supported {
-  max-width: 65%;
-}
-
-.features {
-  max-width: 65%;
-}
-.feature-card {
-  background-color: var(--primary-medium);
-  z-index: 1;
-  width: 30rem;
-  height: 30rem;
-  margin: -1px;
-  display: inline-block;
-  padding: 3rem;
-  transition: all ease-in-out 0.3s;
-}
-.feature-icon {
-  z-index: 1;
-  padding: 0;
-  margin: 0;
-  width: 100%;
-  height: 100%;
-  background-size: 30% !important;
-  transition: all ease-in-out 0.3s;
-}
-.feature-card .feature-text {
-  z-index: 1;
-  display: none;
-}
-.feature-card:hover {
-  background-color: var(--primary-light);
-  box-shadow: -5px 5px 100px #000000;
-  z-index: 100;
-  transform: scale(1.1);
-}
-.feature-card:hover .feature-icon {
-  height: 50%;
-}
-.feature-card:hover .feature-text {
-  display: table;
-}
-footer {
-  padding-right: 55%;
-}
-footer .works-title {
-  font-size: 2rem;
-}
-footer .built-with {
-  display: block;
-}
-footer .link-button {
-  max-width: fit-content;
-  display: inline-table;
-  margin-right: 3rem;
-  padding: 0.8rem 3.375rem;
-  font-size: 2.5rem;
+  max-width: none;
 }

website/styles/medium.css

@@ -5,7 +5,86 @@ html {
 body {
   font-size: 7.5px !important;
 }
-
+.features,
 .supported {
-  max-width: 85%;
+  max-width: 75%;
+}
+.logo {
+  font-size: 10rem;
+  transition: all ease-in-out 0.3s;
+}
+.logo.stickied {
+  font-size: 2rem;
+  letter-spacing: 0.8rem;
+  position: fixed;
+  background-color: var(--primary);
+  width: 100%;
+  left: 0;
+  top: 0;
+  padding: 3rem 10rem;
+  z-index: 999 !important;
+}
+.landing .link-button {
+  transition: all ease-in-out 0.3s;
+}
+.landing .link-button.stickied {
+  position: fixed;
+  right: 0rem;
+  top: 0;
+  border-radius: 0;
+  font-size: 2rem;
+  z-index: 1999 !important;
+}
+.feature-card {
+  background-color: var(--primary-medium);
+  z-index: 1;
+  width: 30rem;
+  height: 30rem;
+  margin: -1px;
+  display: inline-block;
+  padding: 3rem;
+  transition: all ease-in-out 0.3s;
+}
+.feature-icon {
+  z-index: 1;
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  background-size: 30% !important;
+  background-position: center !important;
+  transition: all ease-in-out 0.3s;
+}
+.feature-card .feature-text {
+  z-index: 1;
+  display: none;
+  text-align: center;
+}
+.feature-card:hover {
+  background-color: var(--primary-light);
+  box-shadow: -5px 5px 100px #000000;
+  z-index: 100;
+  transform: scale(1.1);
+}
+.feature-card:hover .feature-icon {
+  height: 50%;
+}
+.feature-card:hover .feature-text {
+  display: table;
+}
+footer {
+  padding-right: 45%;
+}
+footer .works-title {
+  font-size: 2rem;
+}
+footer .built-with {
+  display: block;
+}
+footer .link-button {
+  max-width: fit-content;
+  display: inline-table;
+  margin-right: 3rem;
+  padding: 0.8rem 3.375rem;
+  font-size: 2.5rem;
 }

website/styles/variables.css

@@ -1,6 +1,6 @@
 :root {
   --primary: white;
-  --primary-medium: #6f8d00;
+  --primary-medium: #c5c5c5;
   --primary-light: #c0f300;
   --cta: black;
   --primary-text: black;