jessebrault/jb-ssg-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Banner and contact styling.

Browse Source
This commit is contained in:
JesseBrault0709 2024-06-06 16:52:51 +02:00
parent 60cddb0981
commit e696b2ef0d
4 changed files with 37 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/resources/com/jessebrault/site/biography/BiographyBanner.txt
View File

@ -2,7 +2,7 @@
<div class="headshot-container">
<img src="/portrait.jpg" class="headshot" />
</div>
<div class="blurb-container">
<div class="banner-text blurb-container">
<p id="jesse-brault-name">Jesse Brault</p>
<p>American conductor, composer, and developer.</p>
<button type="button">Read More</button>

2
components/resources/com/jessebrault/site/contact/ContactBannerTemplate.wvc
View File

@ -7,7 +7,7 @@ import com.jessebrault.site.icon.*
<div class="headshot-container">
<img src="/portrait2.jpg" class="headshot" />
</div>
<article class="social-media-links">
<article class="banner-text social-media-links">
<h1>Social Media</h1>
<div class="social-media-links">
<a href={spotifyUrl}><SpotifyIcon /><span>Spotify Profile</span></a>

5
pages/resources/com/jessebrault/site/contact/ContactPageTemplate.wvc
View File

@ -11,25 +11,30 @@ import com.jessebrault.site.StandardPage
<div class="control">
<label for="name">Name</label>
<input id="name" name="name" type="text" />
<p class="message">&nbsp;</p>
</div>
<div class="control">
<label for="institution">Institution</label>
<input id="institution" name="institution" type="text" />
<p class="message">&nbsp;</p>
</div>
<div class="control">
<label for="email">Email</label>
<input id="email" name="email" type="email" />
<p class="message">&nbsp;</p>
</div>
<div class="control">
<label for="message">Message</label>
<textarea id="message" name="message"></textarea>
<p class="message">&nbsp;</p>
</div>
<div class="control">
<input type="submit" />
<p class="message">&nbsp;</p>
</div>
</form>
</article>

37
static/main.css
View File

@ -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;
}