Skip to content

Commit

Permalink
Style home page
Browse files Browse the repository at this point in the history
  • Loading branch information
@bobbysebolao
bobbysebolao committed Nov 6, 2021
1 parent 612c5bb commit d4825b6
Show file tree
Hide file tree
Showing 10 changed files with 494 additions and 129 deletions.
9 changes: 8 additions & 1 deletion src/app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,18 @@
box-sizing: border-box;
color: rgba(0, 0, 0, 0.84);

/* Global colour variables */
/* Primary colours */
/* Normal state */
--postit-green: #afec6a;
--postit-yellow: #faf557;
--postit-blue: #7fd9cf;
--postit-pink: #fe9bba;

/* Hover state */
--postit-green-hover: hsl(88, 77%, 77%);
--postit-yellow-hover: hsl(58, 94%, 76%);
--postit-blue-hover: hsl(173, 54%, 77%);
--postit-pink-hover: hsl(341, 98%, 90%);
}

body {
Expand Down
3 changes: 2 additions & 1 deletion src/lib/head/Head.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@
<!-- Global site tag (gtag.js) - Google Analytics -->
<script
async
src="https://www.googletagmanager.com/gtag/js?id=UA-100955415-3"></script>
src="https://www.googletagmanager.com/gtag/js?id=UA-100955415-3">
</script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
Expand Down
56 changes: 56 additions & 0 deletions src/lib/home/Aliens.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<script>
export let active_display_modes = "";
export let alienCount = 0;
export let alienType = "one";
</script>

<div class="aliens {active_display_modes}">
{#each Array(alienCount) as _}
<div class="aliens__{alienType}" />
{/each}
</div>

<style lang="scss">
.sprite {
&.aliens {
display: flex;
justify-content: space-around;
margin-top: 5em;
margin-bottom: 6.5em;
div {
width: 30px;
height: 30px;
background-repeat: no-repeat;
background-size: cover;
background-position: left center;
animation: alienAnim 2s steps(2) infinite;
}
.aliens__one {
background-image: url(/static/alien_1.svg);
}
.aliens__two {
background-image: url(/static/alien_2.svg);
}
.aliens__three {
background-image: url(/static/alien_3.svg);
}
.aliens__defense {
background-image: url(/static/defense.svg);
}
.aliens__player {
background-image: url(/static/player.svg);
}
@keyframes alienAnim {
100% {
background-position-x: 200%;
}
}
}
}
</style>
77 changes: 77 additions & 0 deletions src/lib/home/ContactForm.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
<form
class="contact-form"
action="/contact/send"
method="post"
enctype="multipart/form-data"
>
<input
type="text"
name="name"
placeholder="Ada Lovelace"
id="contact-form-name"
required
/>
<label for="contact-form-name">Name</label>
<input
type="text"
name="email"
placeholder="[email protected]"
id="contact-form-email"
required
/>
<label for="contact-form-email">Email</label>

<fieldset class="contact-form-about">
<legend>About</legend>
<div class="contact-form-checkboxes">
<div>
<input
class="contact-form-checkbox"
type="checkbox"
name="websiteCheckbox"
id="contact-form-checkbox-one"
/>
<label for="contact-form-checkbox-one">Website</label>
<div />
<div />
</div>
<div>
<input
class="contact-form-checkbox"
type="checkbox"
name="contentCheckbox"
id="contact-form-checkbox-two"
/>
<label for="contact-form-checkbox-two">Content</label>
<div />
<div />
</div>
<div>
<input
class="contact-form-checkbox"
type="checkbox"
name="seoCheckbox"
id="contact-form-checkbox-three"
/>
<label for="contact-form-checkbox-three">SEO</label>
<div />
<div />
</div>
<div>
<input
class="contact-form-checkbox"
type="checkbox"
name="otherCheckbox"
id="contact-form-checkbox-four"
/>
<label for="contact-form-checkbox-four">Other</label>
<div />
<div />
</div>
</div>
</fieldset>
<textarea id="contact-form-message" name="message" rows="8" required />
<label for="contact-form-message">Message</label>

<button type="submit" id="contact-form-button">Send</button>
</form>
137 changes: 137 additions & 0 deletions src/lib/home/ProjectSummary.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,137 @@
<script>
export let colour = "#cccccc";
export let projectType = "Distributed Cloud Platform";
export let projectName = "Rate My Barber";
export let projectDescription = `Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum
blanditiis quisquam odit laborum minus, veniam aliquid, laboriosam atque
a corrupti odio architecto.`;
export let projectTech = "Built with Node.js, React, and SQL.";
export let ctaUrl = "https://github.com/bobbysebolao";
export let ctaText = "GitHub";
</script>

<section class="portfolio-project">
<div class="project-image"><div /></div>
<div class="project-bg {colour}">
<div class="project-description">
<p class="project-type">{projectType}</p>
<h2 class="project-title">{projectName}</h2>
<p class="project-summary">{projectDescription}</p>
<p class="project-tech">{projectTech}</p>
</div>
</div>

<a href={ctaUrl} target="_blank" class="read-more-cta {colour}">{ctaText}</a>
</section>

<style lang="scss">
.portfolio-project {
margin-bottom: 10em;
position: relative;
z-index: 0;
.project-image {
width: 360px;
height: 448px;
margin-top: 0px;
background: #cccccc;
background-repeat: no-repeat;
background-position: center center;
z-index: 1;
border-radius: 5px;
}
.project-bg {
position: absolute;
top: -1.5em;
left: 1.5em;
width: calc(100% - 1.5em);
height: 448px;
z-index: -1;
border-radius: 5px;
&.green {
background: var(--postit-green);
}
&.yellow {
background: var(--postit-yellow);
}
&.blue {
background: var(--postit-blue);
}
&.pink {
background: var(--postit-pink);
}
}
.project-description {
display: flex;
flex-direction: column;
position: absolute;
top: 0em;
right: 0;
width: 280px;
z-index: 0;
padding: 2em 1.25em 0em 1.25em;
.project-type {
align-self: flex-end;
text-align: right;
width: 70%;
margin: 0 0 0 0;
}
.project-title {
margin-top: 24px;
margin-bottom: 8px;
text-align: left;
}
.project-summary {
font-family: "Lato", sans-serif;
text-align: left;
}
.project-tech {
font-family: "Lato", sans-serif;
text-align: left;
}
}
.read-more-cta {
position: absolute;
bottom: 0px;
right: 20px;
font-size: 1.25em;
padding: 12px 12px;
text-transform: uppercase;
background: black;
text-decoration: none;
color: white;
transition: all 0.25s ease;
border-radius: 5px;
&.green:hover {
background: var(--postit-green-hover);
color: black;
}
&.yellow:hover {
background: var(--postit-yellow-hover);
color: black;
}
&.blue:hover {
background: var(--postit-blue-hover);
color: black;
}
&.pink:hover {
background: var(--postit-pink-hover);
color: black;
}
}
}
</style>
30 changes: 22 additions & 8 deletions src/routes/__layout.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@
<script>
import { setContext, getContext } from "svelte";
import Head from "$lib/head/Head.svelte";
import Icons from "$lib/icons/Icons.svelte";
import Header from "$lib/header/Header.svelte";
import Footer from "$lib/footer/Footer.svelte";
import "../app.css";
const active_display_modes = "sprite";
setContext("active_display_modes", active_display_modes);
</script>

<Head />
Expand All @@ -12,21 +15,32 @@

<Header />

<main>
<main class={active_display_modes}>
<slot />
</main>

<Footer />

<style>
<style lang="scss">
main {
flex: 1;
background: #fdfdfd;
padding: 80px 80px 0em 80px;
box-shadow: 5px 10px 10px 0px #000000;
font-family: "Permanent Marker", cursive;
display: flex;
flex-direction: column;
padding: 1rem;
width: 100%;
max-width: 1024px;
margin: 0 auto;
box-sizing: border-box;
justify-content: space-between;
max-width: 840px;
z-index: 0;
position: relative;
&.sprite {
font-family: "VT323", monospace;
}
}
@media only screen and (min-device-width: 320px) and (max-device-width: 600px) {
main {
padding: 2.5em 2.5em 0em 2.5em;
}
}
</style>
Loading

0 comments on commit d4825b6

Please sign in to comment.