Various Changes
- Implemented contact-me form - Added social icons using font-awesome - Changed font - Added favicon - Changed site logo from png to svg
This commit is contained in:
JayWll
parent
e4d86628aa
commit
cc791c8e20
|
|
@ -1,9 +1,20 @@
|
|||
:root {
|
||||
--main-bg-color: #E7D9D1; /*#F0E4D1; #E8D5B5; #e7d9d1;*/
|
||||
--main-accent-color: #302b44;
|
||||
--light-accent-color: #686283;
|
||||
--alt-accent-color: #B05C71; /*#990F3D;*/
|
||||
--dark-alt-accent-color: #913A50;
|
||||
--title-font: 'Cinzel', serif;
|
||||
--body-font: 'Raleway', sans-serif;
|
||||
}
|
||||
|
||||
html, body { height: 100%; }
|
||||
|
||||
body {
|
||||
background-color: #ccfff3;
|
||||
font-family: roboto,sans-serif;
|
||||
color: #302b44;
|
||||
background-color: var(--main-bg-color);
|
||||
font-family: var(--body-font);
|
||||
font-weight: 500;
|
||||
color: var(--main-accent-color);
|
||||
}
|
||||
|
||||
#page-content {
|
||||
|
|
@ -12,11 +23,11 @@ body {
|
|||
|
||||
footer {
|
||||
flex-shrink: 0;
|
||||
background-color: #302b44;
|
||||
background-color: var(--main-accent-color);
|
||||
}
|
||||
|
||||
footer p, footer ul li {
|
||||
color: #686283;
|
||||
color: var(--light-accent-color);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
|
|
@ -25,6 +36,10 @@ footer ul {
|
|||
padding-left: 20px;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.container-fluid {
|
||||
padding-left: 5%;
|
||||
padding-right: 5%;
|
||||
|
|
@ -38,9 +53,52 @@ footer ul {
|
|||
.navbar-brand {
|
||||
height: 75px;
|
||||
padding-left: 100px;
|
||||
font-family: cinzel,serif;
|
||||
font-family: var(--title-font);
|
||||
font-size: 2.5rem;
|
||||
background-image: url('../images/jwlogo.png');
|
||||
background-image: url('../images/jwlogo.svg');
|
||||
background-repeat: no-repeat;
|
||||
color: #302b44;
|
||||
}
|
||||
color: var(--main-accent-color);
|
||||
}
|
||||
|
||||
.navbar-light .navbar-nav .nav-link {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.navbar-light .navbar-nav .nav-link:hover {
|
||||
color: var(--alt-accent-color);
|
||||
}
|
||||
|
||||
.social-icons {
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.social-icons a {
|
||||
display: inline-block;
|
||||
height: 3.5rem;
|
||||
width: 3.5rem;
|
||||
background-color: var(--main-accent-color);
|
||||
color: var(--main-bg-color);
|
||||
text-align: center;
|
||||
font-size: 1.5rem;
|
||||
line-height: 3.5rem;
|
||||
margin-right: 0.25rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.social-icons a:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.social-icons a:hover {
|
||||
background-color: var(--dark-alt-accent-color);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--alt-accent-color);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--dark-alt-accent-color);
|
||||
text-decoration: none;
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 371 B |
Binary file not shown.
|
After Width: | Height: | Size: 976 B |
Binary file not shown.
|
Before Width: | Height: | Size: 3.0 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 7.7 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
$(() => {
|
||||
$('[data-toggle="tooltip"]').tooltip()
|
||||
});
|
||||
|
|
@ -12,9 +12,11 @@ description = "Default Layout"
|
|||
<!-- Bootstrap CSS -->
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
|
||||
<link href='//fonts.googleapis.com/css?family=Cinzel|Roboto:300,400,500' rel='stylesheet' type='text/css'>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Cinzel&family=Raleway:wght@500;600&display=swap" rel="stylesheet">
|
||||
<link href="{{ 'assets/css/theme.css'|theme }}" rel="stylesheet">
|
||||
<title>Hello, world!</title>
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="{{ 'assets/images/favicon-32x32.png'|theme }}">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="{{ 'assets/images/favicon-16x16.png'|theme }}">
|
||||
<title>{{ this.page.title }} - Ja.son-Williams.ca</title>
|
||||
</head>
|
||||
<body class="d-flex flex-column">
|
||||
<div id="page-content">
|
||||
|
|
@ -44,7 +46,7 @@ description = "Default Layout"
|
|||
<li><a href="/contact">Contact Me</a></li>
|
||||
</ul>
|
||||
{% component 'CurrentInfo' %}
|
||||
<p>Made with 💖 in #YYC<br><a href="https://www.madeinyyc.com/"><img src="{{ 'assets/images/madeinyyc.png'|theme }}"></a></p>
|
||||
<p>Made with <i class="fas fa-heart"></i> in #YYC<br><a href="https://www.madeinyyc.com/"><img src="{{ 'assets/images/madeinyyc.png'|theme }}"></a></p>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<p>Recent Projects</p>
|
||||
|
|
@ -58,6 +60,7 @@ description = "Default Layout"
|
|||
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
|
||||
<script src="https://kit.fontawesome.com/e0459f3cc9.js" crossorigin="anonymous"></script>
|
||||
{% framework extras %}
|
||||
{% scripts %}
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -2,5 +2,44 @@ title = "Contact Me"
|
|||
url = "/contact"
|
||||
layout = "default"
|
||||
is_hidden = 0
|
||||
|
||||
[emptyForm contactform]
|
||||
group = "Contact Me"
|
||||
rules[name] = "required"
|
||||
rules[email] = "required|email"
|
||||
rules[message] = "required"
|
||||
messages_success = "Your form was successfully submitted"
|
||||
messages_errors = "There were errors with your submission"
|
||||
mail_enabled = 1
|
||||
mail_subject = "Contact Me"
|
||||
mail_recipients[] = "j@son-williams.ca"
|
||||
mail_replyto = "email"
|
||||
inline_errors = "disabled"
|
||||
sanitize_data = "disabled"
|
||||
anonymize_ip = "disabled"
|
||||
recaptcha_enabled = 1
|
||||
recaptcha_theme = "light"
|
||||
recaptcha_type = "image"
|
||||
recaptcha_size = "invisible"
|
||||
emails_date_format = "Y-m-d"
|
||||
==
|
||||
<p>Contact Me</p>
|
||||
<div class="row">
|
||||
<div class="col-lg-7">
|
||||
<h1>Contact Me</h1>
|
||||
<p>The simplest and quickest way to contact me is by completing the form below.</p>
|
||||
{% component 'contactform' %}
|
||||
</div>
|
||||
<div class="col-lg-5">
|
||||
<h2>Old School</h2>
|
||||
<p>Sometimes the more traditional ways of getting in touch are just better...</p>
|
||||
<p>IMG</p>
|
||||
<p>4th Floor, 1207 11 Ave SW,<br>
|
||||
Calgary, AB, T3C 0M5<br>
|
||||
Canada</p>
|
||||
<p><a href="tel:+15872888242">(587) 288-8242</a></p>
|
||||
|
||||
<h2>New Cool</h2>
|
||||
<p>...and sometimes it's better to keep up with the times.</p>
|
||||
{% partial 'social' nocode = true nocontact = true %}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -7,8 +7,11 @@ is_hidden = 0
|
|||
<div class="col-lg-5 order-lg-2">
|
||||
<h1>Welcome</h1>
|
||||
<p>Welcome to Ja.son-Williams.ca, the little home on the web of – surprise, surprise – Jason Williams.</p>
|
||||
<p>Jay is a caucasian male originally from Swansea, UK but last spotted in Calgary, Canada. By day he's a mild-mannered bank employee and by night he's... uh... asleep, mostly.</p>
|
||||
<p>He doesn't kepp very much stuff here, but to browse around please make a selection from the menu at the top right of the page.</p>
|
||||
<p>Jay is a caucasian male originally from <a href="https://en.wikipedia.org/wiki/Swansea">Swansea, UK</a> but last spotted in <a href="https://en.wikipedia.org/wiki/Calgary">Calgary, Canada</a>. By day he's a mild-mannered bank employee and by night he's... uh... asleep, mostly.</p>
|
||||
<p>He doesn't keep very much stuff here, but to browse around please make a selection from the menu at the top right of the page.</p>
|
||||
|
||||
<h2>Available Everywhere</h2>
|
||||
{% partial 'social' %}
|
||||
</div>
|
||||
<div class="col-lg-7 order-lg-1">
|
||||
<h1>Feed</h1>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,38 @@
|
|||
description = "Contact Me Form"
|
||||
==
|
||||
<form data-request="{{ __SELF__ }}::onFormSubmit">
|
||||
|
||||
{{ form_token() }}
|
||||
|
||||
<div id="{{ __SELF__ }}_forms_flash"></div>
|
||||
|
||||
<div class="form-group">
|
||||
<!--<label for="name">Name:</label>
|
||||
<input type="text" id="name" name="name" class="form-control">-->
|
||||
<input type="text" id="name" name="name" class="form-control" placeholder="Your Name" required autofocus>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<!--<label for="email">Email:</label>
|
||||
<input type="text" id="email" name="email" class="form-control">-->
|
||||
<input type="email" id="email" name="email" class="form-control" placeholder="Email Address" required>
|
||||
</div>
|
||||
|
||||
<!--<div class="form-group">
|
||||
<label for="subject">Subject:</label>
|
||||
<input type="text" id="subject" name="subject" class="form-control">
|
||||
</div>-->
|
||||
|
||||
<div class="form-group">
|
||||
<!--<label for="message">Message:</label>-->
|
||||
<textarea id="message" name="message" rows="8" class="form-control" placeholder="Message"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
{% partial '@recaptcha' %}
|
||||
</div>
|
||||
|
||||
<button id="simpleContactSubmitButton" type="submit" class="btn btn-outline-primary">Send</button>
|
||||
<button type="reset" class="btn btn-outline-danger">Cancel</button>
|
||||
|
||||
</form>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
description = "Social Media Links"
|
||||
==
|
||||
<?php
|
||||
function onStart()
|
||||
{
|
||||
$this->addJs('assets/javascript/tooltips.js');
|
||||
}
|
||||
?>
|
||||
==
|
||||
<div class="social-icons">
|
||||
{% if not nosocial %}
|
||||
<a href="https://www.linkedin.com/in/jaywll/" data-toggle="tooltip" title="LinkedIn">
|
||||
<i class="fab fa-linkedin-in"></i>
|
||||
</a>
|
||||
<a href="https://twitter.com/jaywll" data-toggle="tooltip" title="Twitter">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
<a href="https://www.instagram.com/jaywll/" data-toggle="tooltip" title="Instagram">
|
||||
<i class="fab fa-instagram"></i>
|
||||
</a>
|
||||
<a href="https://www.facebook.com/jaywll/" data-toggle="tooltip" title="Facebook">
|
||||
<i class="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
<a href="https://jaywll.wordpress.com/category/blog/" data-toggle="tooltip" title="Wordpress">
|
||||
<i class="fab fa-wordpress-simple"></i>
|
||||
</a>
|
||||
<a href="https://foursquare.com/jaywll" data-toggle="tooltip" title="Foursquare">
|
||||
<i class="fab fa-foursquare"></i>
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if not nocode %}
|
||||
<a href="https://glitch.com/@JayWll" data-toggle="tooltip" title="Glitch">
|
||||
<i class="fab fa-node-js"></i>
|
||||
</a>
|
||||
<a href="https://github.com/JayWll" data-toggle="tooltip" title="GitHub">
|
||||
<i class="fab fa-github"></i>
|
||||
</a>
|
||||
<a href="https://gitlab.com/jaywll" data-toggle="tooltip" title="GitLab">
|
||||
<i class="fab fa-gitlab"></i>
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if not nocontact %}
|
||||
<a href="/contact" data-toggle="tooltip" title="Contact Me">
|
||||
<i class="fas fa-envelope"></i>
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
Loading…
Reference in New Issue