blog.trnck.dev

stable "style" site variable

+94 -65
-3
_config.yml
··· 1 1 repository: sophshep/manager-resources 2 2 3 - style: dark 4 - 5 3 sass: 6 4 load_paths: 7 - - _sass 8 5 - node_modules 9 6 10 7 plugins:
+1 -1
_includes/header.html
··· 5 5 <title>{{ site.github.owner.name }}</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" {% if site.style == 'dark' %}style="background-color: #2f363d !important"{% endif %}>
+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
··· 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 - <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 }}">
+20 -19
_layouts/sidebar.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="d-md-flex" style="height: 100vh"> 6 - <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"> 12 + <div class="flex-self-stretch {% if site.style == 'dark' %}bg-gray-dark{% else %}border-bottom border-md-none border-md-right border-gray-light bg-white{% endif %} col-md-5 col-lg-4 col-xl-3 px-4 px-md-6 px-lg-7 py-6"> 7 13 <img src="{{ user.avatar_url }}" class="circle mb-3" style="max-width: 150px;"> 8 - <h1 class="mb-2 lh-condensed">{% if user.name %}{{ user.name }}{% else %}{{ user.login }}{% endif %}</h1> 9 - <p class="mb-3 f4 text-gray"> 14 + <h1 class="{% if site.style == 'dark' %}text-white{% endif %} mb-2 lh-condensed">{% if user.name %}{{ user.name }}{% else %}{{ user.login }}{% endif %}</h1> 15 + <p class="mb-3 f4 {% if site.style == 'dark' %}text-white{% else %}text-gray{% endif %}"> 10 16 {{ user.bio }} 11 17 </p> 12 18 <div class="f4 mb-6"> 13 19 {% if user.name %} 14 20 <div class="d-flex flex-items-center mb-3"> 15 - {% octicon mark-github height:20 class:"mr-2 v-align-middle" aria-label:GitHub %} 16 - <a href="https://github.com/{{ user.login }}"> 21 + {% octicon mark-github height:20 class:"mr-2 v-align-middle" fill:{{ icon_color }} aria-label:GitHub %} 22 + <a href="https://github.com/{{ user.login }}" {% if site.style == 'dark' %}class="text-white"{% endif %}> 17 23 @{{ user.login }} 18 24 </a> 19 25 </div> 20 26 {% endif %} 21 27 {% if user.email %} 22 28 <div class="d-flex flex-items-center mb-3"> 23 - {% octicon mail height:20 class:"mr-2 v-align-middle" aria-label:email %} 24 - <a href="mailto:{{ user.email }}"> 29 + {% octicon mail height:20 class:"mr-2 v-align-middle" fill:{{ icon_color }} aria-label:email %} 30 + <a href="mailto:{{ user.email }}" {% if site.style == 'dark' %}class="text-white"{% endif %}> 25 31 {{ user.email }} 26 32 </a> 27 33 </div> 28 34 {% endif %} 29 35 {% if user.location %} 30 - <div class="d-flex flex-items-center mb-3"> 31 - {% octicon location height:20 class:"mr-2 v-align-middle" aria-label:Location %} 36 + <div class="d-flex flex-items-center {% if site.style == 'dark' %}text-white{% endif %} mb-3"> 37 + {% octicon location height:20 class:"mr-2 v-align-middle" fill:{{ icon_color }} aria-label:Location %} 32 38 {{ user.location }} 33 39 </div> 34 40 {% endif %} ··· 40 46 41 47 <div class="col-md-7 col-lg-8 col-xl-9 px-4 py-6 px-lg-7"> 42 48 <div class="mx-auto" style="max-width: 900px;"> 49 + <div class="{% if site.style == 'dark' %}text-white{% endif %} mb-6"> 50 + {{ content }} 51 + </div> 52 + 43 53 {% include projects.html %} 44 54 45 - <h2>My Interests</h2> 46 - <p class="f4 mb-4 text-gray">Topics that I want to learn more about.</p> 47 - <div class="d-flex flex-wrap gutter-condensed mb-4"> 48 - {% for topic in site.topics limit: 4 %} 49 - <div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3"> 50 - {% include topic-card.html %} 51 - </div> 52 - {% endfor %} 53 - </div> 54 - 55 + {% include interests.html %} 55 56 </div> 56 57 </div> 57 58 </div>
+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>
-3
_sass/dark.scss
··· 1 - body { 2 - color: #ffffff; 3 - }
_sass/light.scss

This is a binary file and will not be displayed.

-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
··· 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
··· 3 3 @import "primer-core/index"; 4 4 @import "primer-marketing/index"; 5 5 @import url('https://fonts.googleapis.com/css?family=Rubik:400,500,700,900'); 6 - @import "{{ site.style }}"; 7 6 8 7 body { 9 8 font-family: 'Rubik', sans-serif;
+1
index.html
··· 1 1 --- 2 2 layout: sidebar 3 3 --- 4 + I have stuff to say here.