jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2026-09-14 06:05:31 -04:00
Code Issues Activity

scss ➡️ vanilla css (#727)

Browse Source 
* scss isn't worth the technical/mental overhead anymore

* try to translate my old Hugo pygments themes

* update lockfile

* consolidate .hljs classes
This commit is contained in:
jake
2022-01-07 16:17:14 -05:00
committed by GitHub
parent b13923b3b7
commit 41d2b8c64b
43 changed files with 697 additions and 726 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/contact/ContactForm.module.css
+90
View File
@@ -0,0 +1,90 @@
.input {
width: 100%;
padding: 0.8em;
margin: 0.6em 0;
border: 2px solid;
border-radius: 0.3em;
color: var(--text);
background-color: var(--super-duper-light);
border-color: var(--light);
}
textarea.input {
height: 12em;
min-height: 6em;
margin-bottom: 0;
line-height: 1.5;
resize: vertical;
}
.input:focus {
outline: none;
border-color: var(--link);
}
.input.missing {
border-color: var(--error);
}
.markdown_tip {
font-size: 0.825em;
line-height: 1.75;
}
.markdown_tip a {
background: none;
padding-bottom: 0;
}
.markdown_tip a:first-of-type {
font-weight: 500;
}
.hcaptcha {
margin: 1em 0;
}
.action_row {
display: flex;
align-items: center;
min-height: 3.75em;
}
.btn_submit {
flex-shrink: 0;
height: 3.25em;
padding: 1em 1.25em;
margin-right: 1.5em;
border: 0;
border-radius: 0.3em;
cursor: pointer;
user-select: none;
color: var(--text);
background-color: var(--kinda-light);
}
.btn_submit:hover {
color: var(--super-duper-light);
background-color: var(--link);
}
.btn_submit .send_icon {
margin-right: 0.4em;
}
.result_success,
.result_error {
font-weight: 600;
}
.result_success {
color: var(--success);
}
.result_error {
color: var(--error);
}
.hidden {
display: none !important;
}
components/contact/ContactForm.module.scss
-97
View File
@@ -1,97 +0,0 @@
.form {
input[type="text"],
input[type="email"],
select,
textarea {
width: 100%;
padding: 0.8em;
margin: 0.6em 0;
border: 2px solid;
border-radius: 0.3em;
color: var(--text);
background-color: var(--super-duper-light);
border-color: var(--light);
&:focus {
outline: none; // disable browsers' outer border
border-color: var(--link);
}
&.missing {
border-color: var(--error);
}
}
textarea {
height: 12em;
min-height: 6em;
margin-bottom: 0;
line-height: 1.5;
// allow vertical resizing & disable horizontal
resize: vertical;
}
}
.markdown_tip {
font-size: 0.825em;
line-height: 1.75;
a {
background: none;
padding-bottom: 0;
&:first-of-type {
font-weight: 500;
}
}
}
.hcaptcha {
margin: 1em 0;
}
.action_row {
display: flex;
align-items: center;
min-height: 3.75em;
}
.btn_submit {
flex-shrink: 0;
height: 3.25em;
padding: 1em 1.25em;
margin-right: 1.5em;
border: 0;
border-radius: 0.3em;
cursor: pointer;
user-select: none;
color: var(--text);
background-color: var(--kinda-light);
&:hover {
color: var(--super-duper-light);
background-color: var(--link);
}
.send_icon {
margin-right: 0.4em;
}
}
.result_success,
.result_error {
font-weight: 600;
}
.result_success {
color: var(--success);
}
.result_error {
color: var(--error);
}
.hidden {
display: none !important;
}
components/contact/ContactForm.tsx
+4 -4
View File
@@ -9,7 +9,7 @@ import { CheckOcticon, XOcticon } from "../icons/octicons";
import type { FormikHelpers } from "formik";
import styles from "./ContactForm.module.scss";
import styles from "./ContactForm.module.css";
const cx = classNames.bind(styles);
type Values = {
@@ -100,14 +100,14 @@ const ContactForm = () => {
{({ setFieldValue, isSubmitting, touched, errors }) => (
<Form className={styles.form} name="contact">
<Field
className={cx({ missing: errors.name && touched.name })}
className={cx({ input: true, missing: errors.name && touched.name })}
name="name"
type="text"
placeholder="Name"
disabled={success}
/>
<Field
className={cx({ missing: errors.email && touched.email })}
className={cx({ input: true, missing: errors.email && touched.email })}
name="email"
type="email"
inputmode="email"
@@ -115,7 +115,7 @@ const ContactForm = () => {
disabled={success}
/>
<Field
className={cx({ missing: errors.message && touched.message })}
className={cx({ input: true, missing: errors.message && touched.message })}
name="message"
component="textarea"
placeholder="Write something..."