better forms

malte-j · Sep 25, 2020 · 1ce46a4 · 1ce46a4
1 parent 408a3cc
commit 1ce46a4
Show file tree

Hide file tree

Showing 8 changed files with 65 additions and 63 deletions.
diff --git a/themes/argo/js/contact-form.js b/themes/argo/js/contact-form.js
@@ -0,0 +1,10 @@
+let form = document.querySelector(".contact-form");
+
+form.onsubmit = event => {
+  // append hidden timeStamp element to form
+  let ts = document.createElement("input");
+	ts.setAttribute("type", "hidden");
+	ts.setAttribute("name", "timestamp");
+	ts.value = Math.floor(event.timeStamp);
+	event.target.appendChild(ts);
+}
diff --git a/themes/argo/js/entry.js b/themes/argo/js/entry.js
@@ -1,5 +1,6 @@
 import "./navigation"
 import "./lottie-animations"
 import "./scroll-fade-in"
+import "./contact-form"
 import "./console-easteregg"
 import "../scss/main-style.scss"
diff --git a/themes/argo/page-kontakt.php b/themes/argo/page-kontakt.php
@@ -6,7 +6,7 @@
     <h1>Jetzt mit uns durchstarten:</h1>
   </header>
 
-  <form action="https://receive-forms.glitch.me/api/upload" method="post" class="contact-form">
+  <form action="https://rc2tbozyi3.execute-api.eu-central-1.amazonaws.com/default/contactFormSlackbot" method="post" class="contact-form">
 		<p class="label">Art des Projekts</p>
 		<div class="select-column">
 			<div class="option">
@@ -53,11 +53,13 @@
 			</div>
 		</div>
 
+		<label for="company" class="label">Ihre Firma</label>
+		<input type="text" name="company" id="company" required placeholder="Musterfirma GmbH">
+
 
 		<label for="name" class="label">Ihr Name</label>
 		<input type="text" name="name" id="name" required placeholder="Max Mustermann">
 
-
 		<label for="phonenumber" class="label">Ihre Telefonnummer</label>
 		<input type="tel" name="phonenumber" id="phonenumber" placeholder="+49151701723">
 

diff --git a/themes/argo/scss/main-style.scss b/themes/argo/scss/main-style.scss
@@ -12,10 +12,6 @@ body {
 }
 
 
-h1, h2, h3, h4, h5, h6 {
-  font-family: "Inter", "Helvetica", sans-serif;
-  font-weight: bold;
-}
 
 @import "./main-header.scss";
 @import "./footer.scss";
@@ -26,4 +22,4 @@ h1, h2, h3, h4, h5, h6 {
 @import "./temp.scss";
 @import "./portfolio.scss";
 @import "./contact-form.scss";
-
+@import "./scrollbar.scss"
diff --git a/themes/argo/scss/old-style.scss b/themes/argo/scss/old-style.scss
@@ -1,47 +1,4 @@
-/*--------------------------------------------------------------
->>> TABLE OF CONTENTS:
-----------------------------------------------------------------
-# Generic
-	- Normalize
-	- Box sizing
-# Base
-	- Typography
-	- Elements
-	- Links
-	- Forms
-## Layouts
-# Components
-	- Navigation
-	- Posts and pages
-	- Comments
-	- Widgets
-	- Media
-	- Captions
-	- Galleries
-# plugins
-	- Jetpack infinite scroll
-# Utilities
-	- Accessibility
-	- Alignments
-
---------------------------------------------------------------*/
-
-/*--------------------------------------------------------------
-# Generic
---------------------------------------------------------------*/
-
-/* Normalize
---------------------------------------------- */
 
-/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
-
-/* Document
-	 ========================================================================== */
-
-/**
- * 1. Correct the line height in all browsers.
- * 2. Prevent adjustments of font size after orientation changes in iOS.
- */
 html {
   line-height: 1.15;
   -webkit-text-size-adjust: 100%;
@@ -64,15 +21,6 @@ main {
   display: block;
 }
 
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
 /* Grouping content
 	 ========================================================================== */
 

diff --git a/themes/argo/scss/scrollbar.scss b/themes/argo/scss/scrollbar.scss
@@ -0,0 +1,18 @@
+html {
+  --scrollbarBG: #ffffff;
+  --thumbBG: #000000;
+}
+body::-webkit-scrollbar {
+  width: 10px;
+}
+body {
+  scrollbar-width: thin;
+  scrollbar-color: var(--thumbBG) var(--scrollbarBG);
+}
+body::-webkit-scrollbar-track {
+  background: var(--scrollbarBG);
+}
+body::-webkit-scrollbar-thumb {
+  background-color: var(--thumbBG) ;
+  border-radius: 6px;
+}
diff --git a/themes/argo/scss/testimonials.scss b/themes/argo/scss/testimonials.scss
@@ -37,13 +37,12 @@
 
       // title
       h3 {
-        font-size: 1.5rem;
         position: relative;
 
         &::before {
           content: "\“";
           position: absolute;
-          left: -.7rem;
+          left: -.6ch;
           top: 0;
 
         }
@@ -59,7 +58,7 @@
 
       // text
       >p {
-        font-size: 0.8rem;
+        // font-size: 0.8rem;
       }
 
       a, svg {

diff --git a/themes/argo/scss/typography.scss b/themes/argo/scss/typography.scss
@@ -25,13 +25,41 @@
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
+
+
 main {
   max-width: 880px;
   margin: 0 auto;
   padding: 80px 40px 0 40px;
 
 }
 
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: "Inter", "Helvetica", sans-serif;
+  font-weight: bold;
+}
+
+html {
+  font-size: 16px;
+}
+
+h1 {
+  font-size: 2.25rem;
+}
+
 h2 {
-  font-size: 2.2rem;
+  font-size: 1.875rem;
+}
+
+h3 {
+  font-size: 1.5rem;
+}
+
+h4 {
+  font-size: 1.25rem;
+}
+
+p {
+  font-size: 1rem;
 }