blog.trnck.dev
stable "style" site variable
+94
-65
-3
_config.yml
-3
_config.yml
+1
-1
_includes/header.html
+1
-1
_includes/header.html
+9
_includes/interests.html
+9
_includes/interests.html
···
1
+
<h2 {% if site.style == 'dark' %}class="text-white"{% endif %}>My Interests</h2>
2
+
<p class="f4 mb-4 {% if site.style == 'dark' %}text-white{% else %}text-gray{% endif %}">Topics that I want to learn more about.</p>
3
+
<div class="d-flex flex-wrap gutter-condensed mb-4">
4
+
{% for topic in site.topics limit: 4 %}
5
+
<div class="col-6 col-md-12 col-lg-6 col-xl-4 mb-3">
6
+
{% include topic-card.html %}
7
+
</div>
8
+
{% endfor %}
9
+
</div>
+3
-3
_includes/projects.html
+3
-3
_includes/projects.html
···
1
-
<h2>My Projects</h2>
2
-
<p class="f4 mb-4 text-gray">GitHub repositories that I've built.</p>
3
-
<div class="d-flex flex-wrap gutter-condensed mb-4">
1
+
<h2 {% if site.style == 'dark' %}class="text-white"{% endif %}>My Projects</h2>
2
+
<p class="f4 mb-4 {% if site.style == 'dark' %}text-white{% else %}text-gray{% endif %}">GitHub repositories that I've built.</p>
3
+
<div class="d-sm-flex flex-wrap gutter-condensed mb-4">
4
4
{% for repository in site.github.public_repositories limit: 4 %}
5
5
<div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
6
6
{% include repo-card.html %}
+1
-1
_includes/repo-card.html
+1
-1
_includes/repo-card.html
···
1
-
<div class="github-component height-full text-left border border-gray-light bg-white rounded-1 p-3">
1
+
<div class="github-component height-full text-left {% if site.style == 'dark' %}box-shadow{% else %}border border-gray-light{% endif %} bg-white rounded-1 p-3">
2
2
<div class="d-flex flex-justify-between flex-items-start mb-1">
3
3
<h1 class="f4 lh-condensed mb-1">
4
4
<a href="{{ repository.html_url }}">
+27
-7
_layouts/stacked.html
+27
-7
_layouts/stacked.html
···
1
1
{% include header.html %}
2
2
3
+
{% if site.style == 'dark' %}
4
+
{% assign icon_color = "#ffffff" %}
5
+
{% else %}
6
+
{% assign icon_color = "#24292e" %}
7
+
{% endif %}
8
+
3
9
{% assign user = site.github.owner %}
4
10
5
11
<div class="container-lg py-6 p-responsive text-center">
6
12
<img src="{{ user.avatar_url }}" class="circle mb-3" style="max-width: 150px;">
7
-
<h1 class="mb-2 lh-condensed">{% if user.name %}{{ user.name }}{% else %}{{ user.login }}{% endif %}</h1>
8
-
<p class="col-lg-8 mx-auto mb-3 f3 text-gray">
13
+
<h1 class="{% if site.style == 'dark' %}text-white{% endif %} mb-2 lh-condensed">{% if user.name %}{{ user.name }}{% else %}{{ user.login }}{% endif %}</h1>
14
+
<p class="col-lg-8 mx-auto mb-3 f3 {% if site.style == 'dark' %}text-white{% else %}text-gray{% endif %}">
9
15
{{ user.bio }}
10
16
</p>
11
17
<div class="f4 mb-6">
12
18
{% if user.name %}
13
19
<div class="d-md-inline-block mr-3">
14
-
{% octicon mark-github height:20 class:"mr-1 v-align-middle" aria-label:GitHub %}
15
-
<a href="https://github.com/{{ user.login }}">
20
+
{% octicon mark-github height:20 class:"mr-1 v-align-middle" fill:{{ icon_color }} aria-label:GitHub %}
21
+
<a href="https://github.com/{{ user.login }}" {% if site.style == 'dark' %}class="text-white"{% endif %}>
16
22
@{{ user.login }}
17
23
</a>
18
24
</div>
19
25
{% endif %}
26
+
{% if user.email %}
27
+
<div class="d-md-inline-block mr-3">
28
+
{% octicon mail height:20 class:"mr-2 v-align-middle" fill:{{ icon_color }} aria-label:email %}
29
+
<a href="mailto:{{ user.email }}" {% if site.style == 'dark' %}class="text-white"{% endif %}>
30
+
{{ user.email }}
31
+
</a>
32
+
</div>
33
+
{% endif %}
20
34
{% if user.location %}
21
-
<div class="d-md-inline-block">
22
-
{% octicon location height:20 class:"mr-1 v-align-middle" aria-label:Location %}
35
+
<div class="d-md-inline-block {% if site.style == 'dark' %}text-white{% endif %}">
36
+
{% octicon location height:20 class:"mr-1 v-align-middle" fill:{{ icon_color }} aria-label:Location %}
23
37
{{ user.location }}
24
38
</div>
25
39
{% endif %}
26
40
</div>
27
41
28
-
{{ content }}
42
+
<div {% if site.style == 'dark' %}class="text-white"{% endif %}>
43
+
{{ content }}
44
+
</div>
29
45
30
46
<div class="my-6">
31
47
{% include projects.html %}
48
+
</div>
49
+
50
+
<div class="my-6">
51
+
{% include interests.html %}
32
52
</div>
33
53
34
54
</div>
_sass/light.scss
_sass/light.scss
This is a binary file and will not be displayed.
-2
_site/assets/styles.css
-2
_site/assets/styles.css
···
3769
3769
.pb-xl-12 { padding-bottom: 128px !important; }
3770
3770
/* Set a 128px padding to the top & bottom at the xl breakpoint */
3771
3771
.py-xl-12 { padding-top: 128px !important; padding-bottom: 128px !important; } }
3772
-
body { color: #ffffff; }
3773
-
3774
3772
body { font-family: 'Rubik', sans-serif; }
3775
3773
3776
3774
.github-component { font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol; }
+32
-25
_site/index.html
+32
-25
_site/index.html
···
5
5
<title>Sophie Shepherd</title>
6
6
<link href="/assets/styles.css" rel="stylesheet" type="text/css">
7
7
</head>
8
-
<body class="bg-gray-light">
8
+
<body class="bg-gray-light" >
9
+
10
+
9
11
10
12
11
13
···
13
15
<div class="d-md-flex" style="height: 100vh">
14
16
<div class="flex-self-stretch border-bottom border-md-none border-md-right border-gray-light bg-white col-md-5 col-lg-4 col-xl-3 px-4 px-md-6 px-lg-7 py-6">
15
17
<img src="https://avatars3.githubusercontent.com/u/527589?v=4" class="circle mb-3" style="max-width: 150px;">
16
-
<h1 class="mb-2 lh-condensed">Sophie Shepherd</h1>
18
+
<h1 class=" mb-2 lh-condensed">Sophie Shepherd</h1>
17
19
<p class="mb-3 f4 text-gray">
18
20
✏ Design manager at @github
19
21
</p>
20
22
<div class="f4 mb-6">
21
23
22
24
<div class="d-flex flex-items-center mb-3">
23
-
<svg height="20" class="octicon octicon-mark-github mr-2 v-align-middle" aria-label="GitHub" viewBox="0 0 16 16" version="1.1" width="20" role="img"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
24
-
<a href="https://github.com/sophshep">
25
+
<svg height="20" class="octicon octicon-mark-github mr-2 v-align-middle" fill="#24292e" aria-label="GitHub" viewBox="0 0 16 16" version="1.1" width="20" role="img"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
26
+
<a href="https://github.com/sophshep" >
25
27
@sophshep
26
28
</a>
27
29
</div>
28
30
29
31
30
32
31
-
<div class="d-flex flex-items-center mb-3">
32
-
<svg height="20" class="octicon octicon-location mr-2 v-align-middle" aria-label="Location" viewBox="0 0 12 16" version="1.1" width="15" role="img"><path fill-rule="evenodd" d="M6 0C2.69 0 0 2.5 0 5.5 0 10.02 6 16 6 16s6-5.98 6-10.5C12 2.5 9.31 0 6 0zm0 14.55C4.14 12.52 1 8.44 1 5.5 1 3.02 3.25 1 6 1c1.34 0 2.61.48 3.56 1.36.92.86 1.44 1.97 1.44 3.14 0 2.94-3.14 7.02-5 9.05zM8 5.5c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"/></svg>
33
+
<div class="d-flex flex-items-center mb-3">
34
+
<svg height="20" class="octicon octicon-location mr-2 v-align-middle" fill="#24292e" aria-label="Location" viewBox="0 0 12 16" version="1.1" width="15" role="img"><path fill-rule="evenodd" d="M6 0C2.69 0 0 2.5 0 5.5 0 10.02 6 16 6 16s6-5.98 6-10.5C12 2.5 9.31 0 6 0zm0 14.55C4.14 12.52 1 8.44 1 5.5 1 3.02 3.25 1 6 1c1.34 0 2.61.48 3.56 1.36.92.86 1.44 1.97 1.44 3.14 0 2.94-3.14 7.02-5 9.05zM8 5.5c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"/></svg>
33
35
Austin TX
34
36
</div>
35
37
···
39
41
40
42
<div class="col-md-7 col-lg-8 col-xl-9 px-4 py-6 px-lg-7">
41
43
<div class="mx-auto" style="max-width: 900px;">
42
-
<h2>My Projects</h2>
44
+
<div class=" mb-6">
45
+
I have stuff to say here.
46
+
47
+
</div>
48
+
49
+
<h2 >My Projects</h2>
43
50
<p class="f4 mb-4 text-gray">GitHub repositories that I've built.</p>
44
-
<div class="d-flex flex-wrap gutter-condensed mb-4">
51
+
<div class="d-sm-flex flex-wrap gutter-condensed mb-4">
45
52
46
53
<div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
47
54
<div class="github-component height-full text-left border border-gray-light bg-white rounded-1 p-3">
···
158
165
</div>
159
166
160
167
161
-
<h2>My Interests</h2>
162
-
<p class="f4 mb-4 text-gray">Topics that I want to learn more about.</p>
163
-
<div class="d-flex flex-wrap gutter-condensed mb-4">
164
-
165
-
<div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
166
-
168
+
<h2 >My Interests</h2>
169
+
<p class="f4 mb-4 text-gray">Topics that I want to learn more about.</p>
170
+
<div class="d-flex flex-wrap gutter-condensed mb-4">
171
+
172
+
<div class="col-6 col-md-12 col-lg-6 col-xl-4 mb-3">
173
+
167
174
<div class="github-component position-relative height-full text-center border border-gray-light rounded-1 bg-white p-5">
168
175
169
176
<div
···
178
185
</div>
179
186
180
187
181
-
</div>
182
-
183
-
<div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
184
-
188
+
</div>
189
+
190
+
<div class="col-6 col-md-12 col-lg-6 col-xl-4 mb-3">
191
+
185
192
<a href="https://github.com/topics/css" class="github-component position-relative hover-grow height-full no-underline d-flex flex-column flex-justify-center text-center border border-gray-light rounded-1 bg-white p-5">
186
193
187
194
<img src="https://raw.githubusercontent.com/github/explore/6c6508f34230f0ac0d49e847a326429eefbfc030/topics/css/css.png" width="64" height="64" class="mx-auto rounded-1 mb-3" alt="CSS">
···
191
198
</a>
192
199
193
200
194
-
</div>
195
-
196
-
<div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
197
-
201
+
</div>
202
+
203
+
<div class="col-6 col-md-12 col-lg-6 col-xl-4 mb-3">
204
+
198
205
<a href="https://github.com/topics/sass" class="github-component position-relative hover-grow height-full no-underline d-flex flex-column flex-justify-center text-center border border-gray-light rounded-1 bg-white p-5">
199
206
200
207
<img src="https://raw.githubusercontent.com/github/explore/6c6508f34230f0ac0d49e847a326429eefbfc030/topics/sass/sass.png" width="64" height="64" class="mx-auto rounded-1 mb-3" alt="Sass">
···
204
211
</a>
205
212
206
213
207
-
</div>
208
-
209
-
</div>
214
+
</div>
215
+
216
+
</div>
210
217
211
218
</div>
212
219
</div>
-1
assets/styles.scss
-1
assets/styles.scss