Start9/start9.com
2
0
Fork 0
mirror of https://github.com/Start9Labs/start9.com.git synced 2026-03-26 10:21:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Contact Form (#15)

Browse Source 
* WIP

* get contact form working and styled

* cleanup and adjust font size in form

---------

Co-authored-by: Lucy Cifferello <12953208+elvece@users.noreply.github.com>
This commit is contained in:
kn0wmad
2023-03-04 00:12:19 +00:00
committed by GitHub
parent ba95a176ed
commit 90173fc252
2 changed files with 106 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
src/assets/styles/peripheral.scss
View File

@@ -48,15 +48,18 @@ section {
z-index: -1;
}
}
.section__image {
display: flex;
flex-direction: column;
align-items: center;
margin: 2rem 0 4rem 0;
position: relative;
img {
width: 30%;
}
.img-shadow {
top: 3rem;
filter: blur(1rem) brightness(0);
@@ -90,6 +93,7 @@ section#hero {
section#mission {
--width: 38ch;
img {
width: 50%;
}
@@ -103,25 +107,30 @@ section#virtues {
.section__double-image {
position: relative;
.section__image {
position: absolute;
top: -140%;
width: 100%;
}
.section__image--left {
left: -105%;
align-items: flex-end;
}
.section__image--right {
right: -105%;
align-items: flex-start;
}
}
#logo {
transform: translateY(-5rem);
opacity: 0;
margin-bottom: -6rem;
h1 {
font-size: 5rem;
}
@@ -137,11 +146,14 @@ section#virtues {
margin-top: 0;
width: 28rem;
}
#logo {
margin-bottom: 0;
h1 {
font-size: 4.2rem;
}
svg {
width: 33rem; // force width for firefox
}
@@ -191,6 +203,7 @@ ul#sub-menu {
display: flex;
justify-content: space-between;
width: 33rem;
li a {
font-family: var(--f-hero);
font-size: 1.2rem;
@@ -199,6 +212,7 @@ ul#sub-menu {
font-weight: 900;
white-space: nowrap;
transition: var(--t-simple);
&:hover {
color: var(--c-text-accent);
}
@@ -230,6 +244,7 @@ section#origin {
display: flex;
flex-wrap: wrap;
gap: 2rem;
.member {
display: flex;
gap: 1rem;
@@ -240,6 +255,7 @@ section#origin {
height: 10rem;
box-shadow: var(--sh-2);
}
p {
font-size: 0.8rem;
line-height: 1.4;
@@ -251,9 +267,11 @@ section#jobs {
p {
line-height: 1.4;
}
.job {
list-style: none;
}
ul,
ol {
display: block;
@@ -261,22 +279,27 @@ section#jobs {
margin: 1em 0;
padding: 0 0 0 2rem;
}
ol {
list-style-type: decimal;
}
li {
display: list-item;
list-style: disc;
margin-bottom: 0.5rem;
&:last-child {
margin-bottom: 2rem;
}
}
ul ul,
ol ul {
list-style-type: circle;
margin-left: 15px;
}
ol ol,
ul ol {
list-style-type: lower-latin;
@@ -291,6 +314,7 @@ section#news {
flex-direction: column;
gap: 4rem;
}
li a {
display: flex;
flex-direction: column;
@@ -299,15 +323,18 @@ section#news {
outline: 1px solid rgb(255 255 255 / 0%);
outline-offset: 0.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);
@@ -317,6 +344,7 @@ section#news {
font-weight: 500;
opacity: 0.6;
}
.twitter-text {
color: var(--c-text-primary);
font-size: 1.2rem;
@@ -348,12 +376,14 @@ section#news {
gap: 2rem;
position: relative;
background: var(--c-glass);
.creator {
left: 1rem;
position: absolute;
top: -0.6rem;
opacity: 1;
}
img {
width: var(--width);
height: var(--width);
@@ -361,6 +391,7 @@ section#news {
object-fit: contain;
background-color: var(--c-gray1);
}
h3,
p,
time {
@@ -372,6 +403,7 @@ section#news {
h3 {
font-size: max(26px, 1.4rem);
}
p {
color: var(--c-gray5);
margin-top: -1.5rem;
@@ -393,13 +425,64 @@ section#news {
section#contact {
gap: 3rem;
p {
margin: 0;
}
.community__icons {
width: auto;
margin: 0;
}
.zammad-form {
font-size: 18px;
input {
line-height: 2;
}
label {
font-size: 26px;
font-variant: all-small-caps;
display: block;
padding-bottom: 4px;
}
.form-control {
&::placeholder {
font-size: 16px;
padding: 4px;
}
&:focus {
outline: none !important;
border: 1px solid var(--c-accent);
box-shadow: 0 0 10px var(--c-accent);
}
}
button {
padding: 0.5rem 1.2rem;
color: var(--c-text-bright);
background-color: var(--c-accent);
border: 0;
font-family: var(--f-accent);
font-weight: 300;
font-size: max(13px, 1rem);
text-decoration: none;
box-shadow: 0 1rem 1rem -0.5rem var(--c-shadow-3);
border-radius: 4px;
&:hover {
transform: scale(1.03);
filter: brightness(120%);
cursor: pointer;
}
}
}
}
#pro-tagline {
@@ -426,6 +509,7 @@ section#contact {
filter: brightness(120%);
}
}
p {
text-align: center;
margin: 0;
@@ -439,9 +523,10 @@ section#contact {
.video-wrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-bottom: 56.25%;
/* 16:9 */
height: 0;
iframe {
border: none;
position: absolute;
@@ -473,15 +558,19 @@ section#contact {
section#mission {
--width: 32ch;
img {
width: 36%;
}
.section__double-image .section__image--left {
left: -94%;
}
.section__double-image .section__image--right {
right: -91%;
}
.section__double-image .section__image {
top: -148%;
}
@@ -491,7 +580,7 @@ section#contact {
.btn {
font-size: 1.5rem;
}
p {
font-size: 1.7rem;
}

18
src/contact.njk
View File

@@ -16,10 +16,20 @@ layout: layouts/peripheral.njk
</section>
<section id="contact">
<p class="p--standalone center">Reach out anytime to<br/>
{% include 'components/encoded-email.njk' %},<br/>
or find us on social media.
</p>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div id="feedback-form">form will be placed in here</div>
<script id="zammad_form_script" src="https://support.start9.com/assets/form/form.js"></script>
<script>
$(function() {
$('#feedback-form').ZammadForm({
messageTitle: 'Feedback Form',
messageSubmit: 'Submit',
messageThankYou: 'Thank you for your inquiry (#%s)! We\'ll contact you as soon as possible.'
});
});
</script>
{% include "components/landing/social-media.njk" %}
</section>