ryan-portfolio/_base.html at master · ryanbmarx/ryan-portfolio · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
{% macro squares() %}
	<div class='squares'>
		{% set colors = [
				{"name":"black", "hex": " #0a090c"},
				{"name":"black-rich", "hex": "#07393c"},
				{"name":"apricot-light", "hex": " #fcd7ad"},
				{"name":"isabelline", "hex": "#f0edee"},
				{"name":"blue-baby", "hex": " #90ddf0"},
				{"name":"green", "hex": " #2c666e"},
				{"name":"purple", "hex": "#7f7caf"}
		] %}
		{% for color in colors %}
			<div class='square--{{ color.name }}' style="width: 150px; height: 150px; background: {{ color.hex }}"></div>
		{%endfor%}
	</div>
{% endmacro %}

{% macro rating(r, label) %}
	<dl class='rating'>
		<dt class='rating__label'>{{ label }}</dt>
		<dd class='rating__dots'>
			{% for number in range(0,r) %}
				<span class='rating__dot--rated'></span>
			{% endfor %}
			{% for number in range(0,10-r) %}
				<span class='rating__dot--unrated'></span>
			{% endfor %}
		</dd>
	</dl>
{% endmacro %}

{% macro rating_bar(r, label) %}
	<dl class='rating'>
		<dt class='rating__label'>{{ label }}</dt>
		<dd class='rating__bar-wrapper'>
			<div class='rating__bar' style='width: {{ r * 10 }}%'></div>
		</dd>
	</dl>
{% endmacro %}

{% set url_canonical = "http://www.ryanbmarx.com/index.html" %}
{% set description = "Ryan Marx tells stories and creates experiences online" %}
{% set thumbnail = "http://ryanbmarx.com/img/header-background--tablet.jpg" %}
{% set dimensions = "img/header-background--tablet.jpg"|get_thumbnail_info %}
{% set thumbnail_alt = "Ryan Marx at work" %}

<!DOCTYPE html>
<html>
<head>
	{# Google analytics #}
	{% include 'subtemplates/_google-analytics.html' %}
	<title>DataViz and Front-End | Ryan B. Marx</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="canonical" type="text/css" href="{{ url_canonical }}">

	{# structured data #}
	{# social #}

	{# Prefetch/preload assets #}
	{% block preloads %}
	<link rel="prefetch" href="/fonts/BreulGroteskB-Light.woff" as="font">
	<link rel="prefetch" href="/fonts/BreulGroteskB-Bold.woff" as="font">
	<link rel="prefetch" href="/fonts/BreulGroteskB-Black.woff" as="font">
	<link rel="prefetch" href="/fonts/BreulGroteskB-Black.woff" as="font">
    <link rel="preload" href="/img/header-background--desktop.jpg" as="image">
	{% endblock preloads %}

	{% block js_library %}
	<script type="text/javascript" src='/js/vendor.min.js'></script>
	{% endblock js_library %}

	{% block stylesheets %}
	<link rel="stylesheet" type="text/css" href="/css/base.css">
	{% endblock stylesheets %}

	{% block twitter scoped%}
	    <meta name="twitter:card" content="summary_large_image">
	    <meta name="twitter:site" content="@ryanmarx" />
	    <meta name="twitter:title" content="{{ page_title }}" />
	    <meta name="twitter:description" content="{{ description }}" />
		<meta name="twitter:image" content="{{ thumbnail }}" />
	    <meta name="twitter:image:alt" content="{{ thumbnail_alt }}" />
	    <meta name="twitter:creator" content="@ryanmarx" />
	{% endblock twitter %}

	{% block opengraph scoped %}
	    <meta property="og:url" content="{{ url_canonical }}" />
	    <meta property="og:type" content="article" />
	    <meta property="og:title" content="{{ page_title }}" />
	    <meta property="og:description" content="{{ shareline }}" />
	    <meta property="og:image" content="{{ thumbnail }}" />
	    <meta name="og:image:alt" content="{{ thumbnail_alt }}" />
	    <meta name="og:image:height" content="{{ dimensions.height }}px" />
	    <meta name="og:image:width" content="{{ dimensions.width }}px" />
	{% endblock opengraph %}

	{% block structured_data_meta scoped %}
	    {# METS/STRUCTURED DATA #}
	    <meta name="description" content="{{ description }}" />
	    <meta name="keywords" content="TK" />
	    <meta name="author" content="Ryan Marx" />
	{% endblock structured_data_meta %}


</head>
<body data-short-header="{% block short_header_attr %}false{% endblock short_header_attr %}">
	{% include 'subtemplates/_header.html' %}
	{% block content scoped %}{% endblock content %}
	<footer class='section section--footer footer'>
		{% include 'subtemplates/_contact.html' %}
		<p class='footer__copyright'>© 2018 Ryan B. Marx. All rights reserved.</p>
	</footer>
	{% block scripts %}
	<script type="text/javascript" src="/js/app.min.js"></script>
	{% endblock scripts %}
</body>
</html>