evan/ewpratten.com
1
Fork 0
Code Actions

page heading

Browse Source
This commit is contained in:
Evan Pratten 2022-11-25 14:36:06 -05:00
parent bdc32a55ee
commit cb2ceb0c0d
9 changed files with 179 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
sass/styles/components/about-card.scss Normal file
View File

@ -0,0 +1,57 @@
.about-card {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-around;
width: max-content;
max-width: 95vw;
margin-left: auto;
margin-right: auto;
margin-top: 2em;
margin-bottom: 2em;
.profile-photo-container {
max-width: 150px;
height: max-content;
margin: 0;
padding: 0;
& > img {
width: 100%;
}
}
.text-container {
margin-left: 1em;
height: max-content;
.intro-text {
margin-bottom: 1em;
h1,
p {
margin: 0;
line-height: 1em;
}
}
.quick-links {
height: max-content;
ul {
margin: 0;
padding: 0;
li {
list-style-type: none;
line-height: 1.25em;
margin: 0;
padding: 0;
}
padding: 0;
}
}
}
}

32
sass/styles/components/heading-card.scss Normal file
View File

@ -0,0 +1,32 @@
.heading-card {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
width: max-content;
max-width: 95vw;
margin-left: auto;
margin-right: auto;
margin-top: 2em;
margin-bottom: 2em;
.profile-photo-container {
width: 50px;
img {
width: 100%;
}
}
.text-container {
margin-left: 1em;
height: max-content;
h1,
p {
margin: 0;
line-height: 1em;
}
}
}

6
templates/base.html
View File

@ -13,6 +13,7 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/jpg" href="{{config.extra.profile_photo}}" />
{% include "components/metadata/advertise-rss.html" %}
{% include "components/metadata/opengraph.html" %}
@ -54,6 +55,9 @@
{# The whole page #}
<div class="page">
{# Allow pages to override the content before the navbar #}
{% block page_start %}{% endblock page_start %}
{# Navbar #}
<div class="container">
{% include "components/navbar.html" %}
@ -74,6 +78,8 @@
<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>
{% include "components/metadata/analytics.html" %}
</body>
</html>

46
templates/components/about-card.html Normal file
View File

@ -0,0 +1,46 @@
{% block component_styles %}
{{ super() }}
<link rel="stylesheet" href="/styles/components/about-card.css">
{% endblock component_styles %}
<div class="about-card">
<div class="profile-photo-container">
<img src="{{config.extra.profile_photo}}" alt="Profile Photo">
</div>
<div class="text-container">
<div class="intro-text">
<h1>{{config.extra.name}}</h1>
<p>{{config.extra.profession}}</p>
</div>
<div class="quick-links">
<ul>
<li>
<a href="mailto:{{config.extra.email}}" rel="me">
<i class="las la-envelope"></i>
{{config.extra.email}}
</a>
</li>
<li>
<a href="https://github.com/{{config.extra.github}}" rel="me">
<i class="lab la-github"></i>
{{config.extra.github}}
</a>
</li>
<li>
<a href="https://linkedin.com/in/{{config.extra.linkedin}}" rel="me">
<i class="lab la-linkedin"></i>
{{config.extra.linkedin}}
</a>
</li>
<li>
<a href="/contact">
...&nbsp;&nbsp;more
</a>
</li>
</ul>
</div>
</div>
</div>
{# Mastodon requires this to exist somewhere, so why not here #}
<a rel="me" href="https://social.ewpratten.com/@evan" style="display:none;"></a>

14
templates/components/heading-card.html Normal file
View File

@ -0,0 +1,14 @@
{% block component_styles %}
{{ super() }}
<link rel="stylesheet" href="/styles/components/heading-card.css">
{% endblock component_styles %}
<div class="heading-card">
<div class="profile-photo-container">
<img src="{{config.extra.profile_photo}}" alt="Profile Photo">
</div>
<div class="text-container">
<h1>{{config.extra.name}}</h1>
<p>{{config.extra.profession}}</p>
</div>
</div>

9
templates/components/metadata/analytics.html Normal file
View File

@ -0,0 +1,9 @@
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-5912H4H03P"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-5912H4H03P');
</script>

5
templates/index.html
View File

@ -8,6 +8,9 @@
{% endblock variable_wormhole %}
{# Page content #}
{% block page_start %}
{% include "components/about-card.html" %}
{% endblock page_start %}
{% block content %}
{{ section.content | safe }}
{{ section.content | safe }}
{% endblock content %}

9
templates/page.html
View File

@ -9,6 +9,13 @@
{% endblock variable_wormhole %}
{# Page content #}
{% block page_start %}
{% include "components/heading-card.html" %}
{% endblock page_start %}
{% block content %}
{{ page.content | safe }}
<h1 style="margin-bottom:0;padding-bottom:0;">{{page.title}}</h1>
<em>{{page.description}}</em>
<br><br>
{{ page.content | safe }}
{% endblock content %}

3
templates/section.html
View File

@ -8,6 +8,9 @@
{% endblock variable_wormhole %}
{# Page content #}
{% block page_start %}
{% include "components/heading-card.html" %}
{% endblock page_start %}
{% block content %}
{{ section.content | safe }}
{% endblock content %}