Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bring across the improved footer from the redesign #751

Merged
merged 1 commit into from
Apr 5, 2024
Merged

Bring across the improved footer from the redesign #751

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 53 additions & 34 deletions src/_includes/footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,47 +1,66 @@
<footer>
<div id="footer_inner">
<div id="footer_text">
<p>
By Alex Chan.
If you like what I do, perhaps <a href="/say-thanks/">say&nbsp;thanks</a><span aria-hidden="true">?</span>
</p>
<p>
By Alex Chan.
If you like what I do, perhaps <a href="/contact/">say thanks</a>?
<br/>
Non-code content licensed under CC&nbsp;BY&nbsp;4.0; code under MIT.
<a href="/privacy/">Privacy&nbsp;policy</a>.
</p>

<p>
Except where otherwise noted, this site is dual-licensed as <a href="https://github.com/alexwlchan/alexwlchan.net#license" id="footer__licence">CC&nbsp;BY&nbsp;4.0 and MIT</a><span aria-hidden="true">.</span>
<a href="/privacy/">Privacy&nbsp;policy</a>.
</p>

</div>
<div id="footer_social">
<ul id="footer_social_links" class="plain_list">
{% comment %}
Be careful about tweaking the whitespace here; the included SVGs
are quite sensitive to linebreaks and the like.

In particular, if you push the closing </a> down to a new line,
the underlines start appearing between icons.
{% endcomment %}
<a class="footer_link" id="footer_link--email" href="mailto:[email protected]">
<span class="visually-hidden">email</span>
<span aria-hidden="true">{% include footer/email.svg %}</span></a>
<a class="footer_link" id="footer_link--rss" href="https://alexwlchan.net/atom.xml">
<span class="visually-hidden">RSS feed</span>
<span aria-hidden="true">{% include footer/rss.svg %}</span></a>
<li>
<a href="mailto:[email protected]">
<span class="visually-hidden">email</span>
<span aria-hidden="true">{%- include footer/email.svg -%}</span></a>
</li>

<li>
<a id="footer_link--rss" href="https://alexwlchan.net/atom.xml">
<span class="visually-hidden">RSS feed</span>
<span aria-hidden="true">{%- include footer/rss.svg -%}</span></a>
</li>

{% comment %}
<a class="footer_link" id="footer_link--twitter" href="https://twitter.com/alexwlchan">
<span class="visually-hidden">Twitter</span>
<span aria-hidden="true">{% include footer/twitter.svg %}</span></a>
<li>
<a href="https://twitter.com/alexwlchan">
<span class="visually-hidden">Twitter</span>
<span aria-hidden="true">{% include footer/twitter.svg %}</span></a>
</li>
{% endcomment %}
<a rel="me" class="footer_link" id="footer_link--mastodon" href="https://social.alexwlchan.net/@alex">
<span class="visually-hidden">Mastodon</span>
<span>{% include footer/mastodon.svg %}</span></a>

<li>
<a rel="me" href="https://social.alexwlchan.net/@alex">
<span class="visually-hidden">Mastodon</span>
<span>{% include footer/mastodon.svg %}</span></a>
</li>

{% comment %}
<a class="footer_link" id="footer_link--github" href="https://github.com/alexwlchan/">
<span class="visually-hidden">GitHub</span>
<span aria-hidden="true">{% include footer/github.svg %}</span></a>
<a class="footer_link" id="footer_link--linkedin" href="https://www.linkedin.com/in/alexwlchan/">
<span class="visually-hidden">LinkedIn</span>
<span>{% include footer/linkedin.svg %}</span></a>
<li>
<a href="https://github.com/alexwlchan/">
<span class="visually-hidden">GitHub</span>
<span aria-hidden="true">{% include footer/github.svg %}</span></a>
</li>

<li>
<a href="https://www.linkedin.com/in/alexwlchan/">
<span class="visually-hidden">LinkedIn</span>
<span>{% include footer/linkedin.svg %}</span></a>
</li>
{% endcomment %}
<a class="footer_link" id="footer_link--kofi" href="https://ko-fi.com/alexwlchan">
<span class="visually-hidden">Kofi</span>
<span>{% include footer/kofi.svg %}</span></a>
</div>

<li>
<a href="https://ko-fi.com/alexwlchan">
<span class="visually-hidden">Kofi</span>
<span>{% include footer/kofi.svg %}</span></a>
</li>
</ul>
</div>
</footer>
73 changes: 0 additions & 73 deletions src/_scss/base/footer.scss
View file
Open in desktop

This file was deleted.

25 changes: 0 additions & 25 deletions src/_scss/base/layout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,31 +60,6 @@ article, main {
padding-bottom: 2em;
}

/* A dot_list is a <ul> that displays all the items in a horizontal line,
* separated by dots, e.g.
*
* apple · banana · cherry
*
* as opposed to the more traditional
*
* · apple
* · banana
* · cherry
*
*/
.dot_list {
list-style-type: none;
padding-left: 0px !important;

// Ensure they all display in a line
li {
display: inline;
&:not(:first-child)::before {
content: " · ";
}
}
}

img.screenshot {
border-color: var(--border-width) var(--border-style) var(--screenshot-border-color);
}
Expand Down
107 changes: 107 additions & 0 deletions src/_scss/components/footer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
footer {
padding-top: 15px;
padding-bottom: calc(15px + env(safe-area-inset-bottom));

font-size: calc(var(--meta-scaling-factor) * var(--font-size));
line-height: calc(var(--meta-scaling-factor) * var(--line-height) * 1.6);

/* The footer gets the primary accent colour as background, with white text.
*
* It looks the same in light/dark mode.
*/
background: var(--primary-color-light);
color: white;

a, a:visited {
@include link_styles(white, 0.5);
}

/* There are two lines of text in the footer, then a row of icons.
*
* On wide displays, I want the icons to float to the right. On narrow
* displays, I want the icons below the text. I also make the icons
* bigger, because it's probably a mobile display and I want nice big
* touch targets.
*/
div {
display: grid;

@media screen and (min-width: 720px) {
grid-template-columns: auto auto;

p {
margin-top: auto;
margin-bottom: auto;
}

svg {
width: 35px;
height: 35px;
}

/* Add a bit of horizontal spacing between the icons. */
ul#footer_social_links li:not(:last-child) {
margin-right: 5px;
}
}

@media screen and (max-width: 720px) {
p { margin-bottom: 0; }

svg {
width: 44px;
height: 44px;
}

/* Add a bit of horizontal spacing between the icons. */
ul#footer_social_links li:not(:first-child) {
margin-left: 5px;
}
}
}

/* Colour the icons correctly.
*
* Each icon contains two shapes:
*
* - the `background` (the circle)
* - the `accent` (the cutout for the icon)
*
* In the default state, the background is white and the accent is
* transparent, letting through the default footer colour.
*
* When you hover, we make the accent white and replace the background
* with the brand colours, as a visual cue that it's the site you expect.
*/
ul#footer_social_links a {
.background { fill: white; }
.accent { fill: none; }

&:hover {
.accent { fill: white; }

/* Disable the default link hover styles */
background: none;
}

&[href="mailto:[email protected]"]:hover .background { fill: #0067B9; }
&[href="https://alexwlchan.net/atom.xml"]:hover .background { fill: #F99000; }
&[href="https://twitter.com/alexwlchan"]:hover .background { fill: #1DA1F2; }
&[href="https://social.alexwlchan.net/@alex"]:hover .background { fill: #563ACC; }
&[href="https://github.com/alexwlchan/"]:hover .background { fill: #24292f; }
&[href="https://www.linkedin.com/in/alexwlchan/"]:hover .background { fill: #007EBB; }

&[href="https://ko-fi.com/alexwlchan"]:hover #kofi_heart { fill: #f14255; };
&[href="https://ko-fi.com/alexwlchan"]:hover #kofi_circle { fill: #50aee4; };
}

/* When you print the nav, remove the background and replace the white
* with the same black as the body text. */
@media print {
background: none;
border-top: var(--border-width) solid var(--primary-color-light);

color: var(--body-text-light);
a, a:visited { color: var(--body-text-light); }
}
}
33 changes: 33 additions & 0 deletions src/_scss/utility_classes.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
/* ===============
* Utility classes
* ===============
*
* This is a collection of styles that are used across the site, but aren't
* tied to a particular page or template.
*/

/* A plain_list is a <ul> that displays all the items in a horizontal line,
* not separated by anything, e.g.
*
* apple banana cherry
*
* A dot_list is a <ul> that displays all the items in a horizontal line,
* separated by dots, e.g.
*
* apple · banana · cherry
*
*/
ul.plain_list,
ul.dot_list {
list-style-type: none;
padding: 0;
}

ul.plain_list li,
ul.dot_list li {
display: inline-block;
}

ul.dot_list li:not(:first-child)::before {
content: " · ";
}
3 changes: 2 additions & 1 deletion src/_scss/variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,8 @@ $accent-grey-light: #999;
$accent-grey-dark: #999;

:root {
--body-text: #202020;
--body-text: #202020;
--body-text-light: #202020;

--accent-grey: #{$accent-grey-light};
--accent-grey-link-hover: #{rgba($accent-grey-light, 0.2)};
Expand Down
4 changes: 3 additions & 1 deletion src/static/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,19 @@
@import "variables.scss";
@import "mixins.scss";

@import "utility_classes.scss";

@import "_main.scss";

@import "base/layout.scss";
@import "base/text.scss";

@import "base/code.scss";
@import "base/footer.scss";
@import "base/images_wide.scss";
@import "base/latex.scss";
@import "base/post_cards.scss";

@import "components/footer.scss";
@import "components/nav.scss";
@import "components/pretty_hr.scss";
@import "components/syntax_highlighting.scss";
Expand Down
Loading