evan/ewpratten.com
1
Fork 0
Code Actions

ideas

Browse Source
This commit is contained in:
Evan Pratten 2023-07-06 16:02:19 -04:00
parent 70a41aec09
commit c24c145f86
6 changed files with 183 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
content/_index.md
View File

@ -2,7 +2,7 @@
title: Home
---
## About me
<!-- ## About me
By day I am a <strong>Pipeline Software Developer</strong> at Toronto-based animation studio
<a target="_blank" href="https://www.industrialbrothers.com">Industrial Brothers</a>
@ -22,10 +22,10 @@ I am currently working on a few projects, including:
<!-- I am also working on an Internet-Draft:
- [draft-evan-amateur-radio-ipv6](https://datatracker.ietf.org/doc/html/draft-evan-amateur-radio-ipv6) - Globally Unique IPv6 Addressing for Amateur Radio -->
<!--
## Previous work
Some of the more notable things I've worked on in the past are:
- The animated TV series [Daniel Spellbound](https://www.imdb.com/title/tt13983670/)
- A [fleet of robots at *Raider Robotics*](/robotics/5024)
- A [fleet of robots at *Raider Robotics*](/robotics/5024) -->

99
sass/styles/layout.scss
View File

@ -62,3 +62,102 @@
max-width: unset !important;
}
}
.home-page {
.hello {
margin-top: 7em;
text-align: center;
h1 {
font-size: 3em;
font-weight: bold;
}
}
.home-big-cards {
display: flex;
flex-direction: row;
justify-content: center;
padding: unset;
margin: unset;
li {
list-style: none;
max-width: 300px;
// max-height: ;
width: 100%;
margin: 2em;
}
.big-card {
height: 400px;
border: 1px solid grey;
border-radius: 5px;
transition: box-shadow 0.2s ease-in-out;
&:hover {
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
}
$title-height: 2em;
.card-image {
height: calc(400px - #{$title-height} - 2em);
background-color: grey;
}
.card-title {
display: flex;
flex-direction: column;
justify-content: center;
height: $title-height;
padding: 1em;
color:black;
font-weight: bold;
// background-color: black;
}
}
}
.home-small-cards {
display: flex;
flex-direction: row;
justify-content: center;
padding: unset;
margin: unset;
li {
list-style: none;
max-width: 200px;
width: 100%;
margin: 1.5em;
}
.small-card {
border: 1px solid grey;
border-radius: 5px;
transition: box-shadow 0.2s ease-in-out;
&:hover {
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
}
.card-title {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 1em;
color:black;
font-weight: bold;
}
}
}
}

5
sass/styles/typography.scss
View File

@ -15,6 +15,8 @@
// font-family: "Rubik", sans-serif;
// font-weight: normal;
// }
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,700;0,800;1,400;1,700;1,800&display=swap');
a {
text-decoration: none;
color: blue !important;
@ -30,7 +32,8 @@ a {
body {
margin: 0;
font-family: serif;
// font-family: serif;
font-family: 'Poppins', sans-serif;
text-align: justify;
}

38
templates/base.html
View File

@ -57,10 +57,10 @@
<div class="page">
{# Allow pages to override the content before the navbar #}
{% block page_start %}{% endblock page_start %}
{# {% block page_start %}{% endblock page_start %} #}
{# Navbar #}
<div class="container">
{# <div class="container">
{% include "components/navbar.html" %}
{% if announcement %}
@ -68,41 +68,19 @@
{% else %}
<br>
{% endif %}
</div>
</div> #}
{# Actual content #}
<div class="page-body">
<div class="left-side">
{% block left_side %}
{% endblock left_side %}
</div>
<div>
{% if redirect_target %}
<div class="container" style="text-align:center;">
<h2>Redirection Notice</h2>
<p>
You are being redirected to another page.<br>
Click <a href="{{redirect_target}}">here</a> if this does not happen automatically.
</p>
</div>
{% else %}
<article id="content" class="container markdown-body">
{% block content %}{% endblock content %}
</article>
{% endif %}
{% block content %}{% endblock content %}
{# Footer #}
{% include "components/footer.html" %}
{# Footer #}
{% include "components/footer.html" %}
</div>
</div>
</div>
{# External scripts #}
{#
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
crossorigin="anonymous"></script> #}
{# Brid.gy h-card #}
<a href="https://ewpratten.com" class="h-card" rel="me" hidden>Evan Pratten</a>

9
templates/components/footer.html
View File

@ -1,4 +1,4 @@
{% block component_styles %}
{# {% block component_styles %}
{{ super() }}
<link rel="stylesheet" href="/styles/components/footer.css">
{% endblock component_styles %}
@ -16,10 +16,5 @@
Copyright &copy; 2017 - {{ now() | date(format="%Y") }}
<strong>Evan Warren Pratten</strong>
</p>
{# <p>
<a href="/press">Press Kit</a>
&middot;
<a href="/contact">Contact</a>
</p> #}
<br>
</div>
</div> #}

69
templates/index.html
View File

@ -43,8 +43,73 @@
{# Page content #}
{% block page_start %}
{% include "components/about-card.html" %}
{# {% include "components/about-card.html" %} #}
{% endblock page_start %}
{% block content %}
{{ section.content | safe }}
{# {{ section.content | safe }} #}
<div class="home-page">
<div class="hello">
<h1>Hi, I'm Evan Pratten</h1>
</div>
<div class="home-cards">
<ul class="home-big-cards">
<li>
<a href="/software">
<div class="big-card">
<div class="card-image"></div>
<div class="card-title"><span>Software</span></div>
</div>
</a>
</li>
<li>
<a href="/blog">
<div class="big-card">
<div class="card-image"></div>
<div class="card-title"><span>Blog</span></div>
</div>
</a>
</li>
<li>
<a href="/music">
<div class="big-card">
<div class="card-image"></div>
<div class="card-title"><span>Music</span></div>
</div>
</a>
</li>
</ul>
<ul class="home-small-cards">
<li>
<a href="/radio">
<div class="small-card">
<div class="card-title">
<span>Radio</span>
</div>
</div>
</a>
</li>
<li>
<a href="/network">
<div class="small-card">
<div class="card-title">
<span>Network</span>
</div>
</div>
</a>
</li>
<li>
<a href="/photos">
<div class="small-card">
<div class="card-title">
<span>Photography</span>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
{% endblock content %}