Social Media
+
+
+
+
+
diff --git a/static/main.css b/static/main.css
index 3d8da14..4900175 100644
--- a/static/main.css
+++ b/static/main.css
@@ -24,7 +24,6 @@ body {
.header-banner-container {
background-color: var(--petrol);
font-family: var(--gothic);
- letter-spacing: 0.2em;
}
header {
@@ -45,8 +44,13 @@ header .titles * {
margin: 0;
}
+header .titles h1 {
+ letter-spacing: 0.175em;
+}
+
header .titles h2 {
font-size: 18px;
+ letter-spacing: 0.15em;
}
nav ul {
@@ -79,6 +83,10 @@ nav a:hover {
padding: 15px 50px 30px;
}
+.banner-text {
+ letter-spacing: 0.15em;
+}
+
main {
background-color: var(--off-white);
display: flex;
@@ -90,7 +98,7 @@ article {
font-family: var(--garamond);
letter-spacing: 0.05em;
padding: 50px 25px;
- max-width: 700px;
+ max-width: 70ch;
text-align: justify;
}
@@ -117,6 +125,12 @@ footer svg:hover {
fill: var(--off-white);
}
+input,
+textarea,
+button {
+ border-radius: 3px;
+}
+
.headshot-container {
display: flex;
flex-direction: column;
@@ -142,17 +156,24 @@ footer svg:hover {
}
.biography-banner .blurb-container p#jesse-brault-name {
+ letter-spacing: 0.15em;
font-size: 54px;
}
.biography-banner .blurb-container button {
- border: 1px solid var(--light-gray);
+ border: 1px solid var(--charcoal);
+ background-color: var(--light-gray);
width: 150px;
height: 40px;
font-family: var(--gothic);
font-size: 18px;
}
+.biography-banner .blurb-container button:hover {
+ background-color: var(--off-white);
+ cursor: pointer;
+}
+
.contact-banner article.social-media-links {
font-family: var(--gothic);
}
@@ -160,7 +181,6 @@ footer svg:hover {
.contact-banner article.social-media-links h1 {
font-size: 36px;
color: var(--light-gray);
- text-align: center;
}
.contact-banner div.social-media-links {
@@ -215,13 +235,13 @@ form.contact {
width: 100%;
display: flex;
flex-direction: column;
- row-gap: 15px;
+ row-gap: 10px;
}
.contact .control {
display: flex;
flex-direction: column;
- row-gap: 10px;
+ row-gap: 5px;
}
.contact .control * {
@@ -235,7 +255,6 @@ form.contact {
font-size: 18px;
padding: 5px;
border: 1px solid var(--charcoal);
- border-radius: 3px;
}
.contact .control textarea {
@@ -252,3 +271,7 @@ form.contact {
background-color: rgba(from var(--petrol) r g b / 0.5);
cursor: pointer;
}
+
+.contact .control .message {
+ margin: 0;
+}