Skip to content

Adding social icons to footer of developer site #728

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

Merged
merged 3 commits into from
Dec 11, 2024
Merged

Adding social icons to footer of developer site #728

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1c9bbc0
adding social icons
dperrymorrow Dec 10, 2024
f1f367c
fixes mastodon URL
sbastn Dec 10, 2024
5e827bc
changing the id of social icons to prevent ad blocking
dperrymorrow Dec 10, 2024
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
6 changes: 6 additions & 0 deletions content/assets/css/_colorscheme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@
--green: hsl(100, 100%, 30%);;
--gray: hsl(50, 0%, 50%);;
--orange: hsl(30, 100%, 50%);;
--icon-color: hsl(0deg 0% 70%);
}

/* Dark Mode */
Expand All @@ -46,6 +47,7 @@
--green: hsl(100, 100%, 40%);;
--gray: hsl(50, 0%, 70%);;
--orange: hsl(30, 100%, 60%);;
--icon-color: hsl(248deg 31% 40%);
}

body {
Expand Down Expand Up @@ -187,3 +189,7 @@ input {
content: url("/assets/images/vendors/linux-foundation-color.png");
}
}

footer .social-media path {
fill: var(--icon-color);
}
1 change: 0 additions & 1 deletion content/assets/css/_dual_cta.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
.dual-cta-container {
--border-radius: 1.2em;
margin-left: 0.5em;
display: inline-flex;

a {
Expand Down
3 changes: 3 additions & 0 deletions layouts/footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,9 @@
<h2 class="ma0 pt2 pb3 b">Get Help From Developers</h2>
<p class="measure">Everyone at DNSimple enjoys writing developer docs.<br>We love answering your emails, too.</p>
<a href="https://dnsimple.com/campaign/support?utm_source=developer&utm_medium=web&utm_content=cta-footer" class="cta-button link grow br2 ph4 pv3 mb2 dib b">Try us free for 30 days</a>

<%= render "social_icons" %>

</div>
<div class="w-100 w-30-ns tc tl-ns">
<nav>
Expand Down
10 changes: 5 additions & 5 deletions layouts/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,16 +14,16 @@
<body>
<header>
<div class="mw8 center ph2">
<div class="flex justify-between pv3">
<div class="self-center w-80-ns w-100">
<div class="flex flex-wrap justify-between pv3">
<div class="self-center w-60-l w-100">
<div class="flex-ns">
<a href="/" title="DNSimple Help" class="self-center">
<svg class="logo v-mid" width="200px" viewBox="0 0 201 25" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"><path style="fill:none" d="M1413 9h820v348h-820z" transform="matrix(.2439 0 0 .06897 -343.95 .307)"/><path d="M11.934 2.603c-.475 0-.95.025-1.4.125v4.65c-.65-.25-1.4-.375-2.4-.375-3.55 0-6.45 2.425-6.45 6.325 0 4 2.65 6.2 6.55 6.2 1.925 0 3.9-.525 5.125-1.175V2.728a7.017 7.017 0 0 0-1.425-.125Zm-3.75 14.45c-2.15 0-3.625-1.45-3.625-3.775 0-2.3 1.575-3.775 3.675-3.775.85 0 1.625.1 2.3.525v6.65c-.75.275-1.525.4-2.35.375Zm13.974-10.1c-2.55 0-4.625 1-5.675 1.875v10.325c.475.1.95.125 1.4.125.475 0 .975-.025 1.425-.125v-8.95c.55-.325 1.525-.65 2.625-.65 1.825 0 2.875.825 2.875 3v6.6c.5.1.95.125 1.425.125.45 0 .95-.025 1.425-.125v-7.275c0-2.725-1.675-4.925-5.5-4.925Zm12.675 12.6c3.25 0 5.15-1.5 5.15-3.975 0-2.35-1.875-3.225-4.45-3.625-2.025-.325-2.55-.7-2.55-1.475 0-.75.65-1.225 2.15-1.225 1.425 0 2.65.425 3.475.9.575-.45.95-1.15 1.075-2.025-.775-.55-2.3-1.15-4.45-1.15-3 0-4.975 1.5-4.975 3.7 0 2.5 2 3.275 4.1 3.6 2.125.325 2.8.775 2.8 1.575 0 .8-.6 1.425-2.275 1.425-1.875 0-2.925-.65-3.65-1.175-.6.375-1.075 1.05-1.3 1.95.675.575 2.25 1.5 4.9 1.5Zm9.1-14.025c.975 0 1.8-.8 1.8-1.8s-.825-1.8-1.8-1.8c-1.025 0-1.85.8-1.85 1.8s.825 1.8 1.85 1.8Zm0 13.75c.475 0 .95-.025 1.4-.125V7.328c-.45-.1-.95-.125-1.4-.125-.475 0-.95.025-1.425.125v11.825c.475.1.975.125 1.425.125ZM62.008 6.953c-1.6 0-3.05.625-4.025 1.375-.875-.85-2.175-1.375-3.875-1.375-2.475 0-4.625 1.05-5.575 1.875v10.325c.475.1.95.125 1.4.125.475 0 .975-.025 1.425-.125v-8.95c.625-.375 1.5-.65 2.425-.65 1.925 0 2.65 1.225 2.65 2.925v6.675c.475.1.95.125 1.45.125.45 0 .95-.025 1.4-.125v-7.525c0-.375-.05-.75-.125-1.1.575-.475 1.375-.975 2.525-.975 1.925 0 2.675 1.225 2.675 2.925v6.675c.45.1.925.125 1.425.125.45 0 .95-.025 1.4-.125v-7.525c0-2.575-1.75-4.675-5.175-4.675Zm13.5.025c-2.25 0-4.125.875-5.275 1.825v14.975c.5.1.95.125 1.425.125.475 0 .95-.025 1.4-.125v-4.6c.75.25 1.55.35 2.55.35 3.3 0 6.275-2.325 6.275-6.325 0-4.1-2.75-6.225-6.375-6.225Zm-.1 10.025c-.925 0-1.675-.15-2.35-.475v-6.375c.725-.4 1.5-.575 2.325-.575 2.175 0 3.65 1.375 3.65 3.65 0 2.35-1.475 3.775-3.625 3.775Zm10.475 2.275c.475 0 .975-.025 1.425-.125v-16.4a7.105 7.105 0 0 0-1.45-.125c-.475 0-.95.025-1.4.125v16.4c.5.1.975.125 1.425.125Zm15.375-6.95c0-3.175-2.25-5.35-5.425-5.35-3.375 0-5.95 2.65-5.95 6.325 0 3.875 2.55 6.225 6.1 6.225 2.375 0 3.925-.875 4.925-1.675-.1-.725-.6-1.525-1.225-1.925-.775.55-1.775 1.225-3.5 1.225-1.975 0-3.175-1.2-3.4-3.15h8.375c.075-.65.1-1.05.1-1.675Zm-8.45-.2c.2-1.625 1.275-2.85 3.025-2.85 1.925.025 2.65 1.45 2.65 2.85h-5.675Z"/><path d="M1521.16 66v-9.172h2.37c.59 0 1.11.113 1.54.339.43.226.77.545 1.01.955.23.411.35.896.35 1.458v3.656c0 .561-.12 1.049-.35 1.464-.24.414-.58.735-1.01.961-.43.226-.95.339-1.54.339h-2.37Zm1.13-1.005h1.24c.55 0 .99-.155 1.3-.465.31-.31.47-.741.47-1.294V59.58c0-.545-.16-.972-.47-1.282-.31-.31-.75-.465-1.3-.465h-1.24v7.162ZM1528.8 66v-9.172h5.27v1.03h-4.16v2.84h3.72v1.005h-3.72v3.267h4.16V66h-5.27ZM1538.07 66l-2.36-9.172h1.15l1.57 6.244c.11.436.2.838.27 1.207.07.368.13.649.16.841.03-.192.09-.475.17-.848.08-.372.17-.777.28-1.212l1.51-6.232h1.17L1539.61 66h-1.54ZM1543.87 66v-9.172h5.28v1.03h-4.16v2.84h3.72v1.005h-3.72v3.267h4.16V66h-5.28ZM1551.79 66v-9.172h1.13v8.142h4.15V66h-5.28ZM1561.46 66.126c-.82 0-1.47-.235-1.94-.704-.48-.469-.72-1.114-.72-1.935v-4.146c0-.821.24-1.466.72-1.935.47-.469 1.12-.704 1.94-.704.82 0 1.47.233 1.95.698.48.465.72 1.107.72 1.928v4.159c0 .821-.24 1.466-.72 1.935-.48.469-1.13.704-1.95.704Zm0-1.018c.5 0 .88-.14 1.14-.421.26-.281.4-.681.4-1.2v-4.146c0-.519-.14-.919-.4-1.2-.26-.281-.64-.421-1.14-.421-.48 0-.86.14-1.13.421-.27.281-.4.681-.4 1.2v4.146c0 .519.13.919.4 1.2.27.281.65.421 1.13.421ZM1566.39 66v-9.172h2.95c.85 0 1.54.245 2.04.735.51.49.76 1.145.76 1.966s-.25 1.477-.76 1.967c-.5.49-1.19.735-2.04.735h-1.82V66h-1.13Zm1.13-4.787h1.82c.5 0 .89-.153 1.19-.459.3-.305.44-.714.44-1.225 0-.519-.14-.929-.44-1.231-.3-.302-.69-.452-1.19-.452h-1.82v3.367ZM1574.03 66v-9.172h5.27v1.03h-4.16v2.84h3.72v1.005h-3.72v3.267h4.16V66h-5.27ZM1581.47 66v-9.172h2.84c.54 0 1.02.111 1.43.333.41.222.73.53.95.923.23.394.34.855.34 1.383 0 .619-.16 1.151-.48 1.595-.32.444-.76.75-1.32.917l1.93 4.021h-1.33l-1.76-3.895h-1.47V66h-1.13Zm1.13-4.913h1.71c.46 0 .84-.148 1.12-.446.29-.297.43-.689.43-1.174 0-.495-.14-.888-.43-1.182-.28-.293-.66-.439-1.12-.439h-1.71v3.241Z" style="fill-rule:nonzero" transform="matrix(1.34846 0 0 1.34847 -1944.313 -69.9)"/></svg>
</a>
<input type="search" name="q" value="" id="input-search" class="input-search input-reset outline-0 w-100 w-50-ns br-pill pv2 ph3 mt3 mt0-ns ml2-ns" placeholder="Search..." autocomplete="off">
<input type="search" name="q" value="" id="input-search" class="input-search input-reset outline-0 w-100 w-50-l br-pill pv2 ph3 mt3 mt0-ns ml2-ns" placeholder="Search..." autocomplete="off">
</div>
</div>
<div class="inline-flex">
<div class="inline-flex flex-row-reverse flex-row-l mt3 mt0-l">
<!--- Light mode button --->
<button class="pointer bg-transparent outline-0 bn color-mode__btn light--hidden" aria-label="Toggle light mode">
<svg
Expand Down Expand Up @@ -56,7 +56,7 @@
<path d="M10.235 2.93a7.076 7.076 0 0 0 6.364 10.6 7.08 7.08 0 0 1-6.128 3.54 7.076 7.076 0 0 1-7.072-7.072 7.074 7.074 0 0 1 6.836-7.068Z" />
</svg>
</button>
<div class="dual-cta-container">
<div class="dual-cta-container ml2-l">
<a href="https://dnsimple.com/signup?utm_source=developer&utm_medium=web&utm_content=cta-header" class="primary">Get Started</a>
<a href="https://dnsimple.com/enterprises?utm_source=developer&utm_medium=web&utm_content=cta-header#contact-sales" class="secondary"
>Contact Sales</a
Expand Down
73 changes: 73 additions & 0 deletions layouts/social_icons.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
<div class="social-media flex justify-start-ns justify-center items-center pv4">
<!-- twitter / x -->
<a href="https://twitter.com/dnsimple" rel="noopener noreferrer" aria-label="Visit us on X" target="_blank" class="grow mr4">
<svg xmlns="http://www.w3.org/2000/svg" height="32" width="32" viewBox="0 0 512 512">
<!--!Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<path
fill="#999999"
d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"
/>
</svg>
</a>

<!-- youtube -->
<a
href="https://www.youtube.com/channel/UC_BHoTHFiZ1GTo3-rkfjHkA"
aria-label="Visit us on YouTube"
rel="noopener noreferrer"
target="_blank"
class="grow mr4"
>
<svg xmlns="http://www.w3.org/2000/svg" height="32" width="36" viewBox="0 0 576 512">
<!--!Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<path
fill="#999999"
d="M549.7 124.1c-6.3-23.7-24.8-42.3-48.3-48.6C458.8 64 288 64 288 64S117.2 64 74.6 75.5c-23.5 6.3-42 24.9-48.3 48.6-11.4 42.9-11.4 132.3-11.4 132.3s0 89.4 11.4 132.3c6.3 23.7 24.8 41.5 48.3 47.8C117.2 448 288 448 288 448s170.8 0 213.4-11.5c23.5-6.3 42-24.2 48.3-47.8 11.4-42.9 11.4-132.3 11.4-132.3s0-89.4-11.4-132.3zm-317.5 213.5V175.2l142.7 81.2-142.7 81.2z"
/>
</svg>
</a>

<!-- linkedin -->
<a href="https://www.linkedin.com/company/dnsimple/" target="_blank" rel="noopener noreferrer" class="grow mr4">
<svg xmlns="http://www.w3.org/2000/svg" height="32" width="28" viewBox="0 0 448 512">
<!--!Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<path
fill="#999999"
d="M100.3 448H7.4V148.9h92.9zM53.8 108.1C24.1 108.1 0 83.5 0 53.8a53.8 53.8 0 0 1 107.6 0c0 29.7-24.1 54.3-53.8 54.3zM447.9 448h-92.7V302.4c0-34.7-.7-79.2-48.3-79.2-48.3 0-55.7 37.7-55.7 76.7V448h-92.8V148.9h89.1v40.8h1.3c12.4-23.5 42.7-48.3 87.9-48.3 94 0 111.3 61.9 111.3 142.3V448z"
/>
</svg>
</a>

<!-- bluesky -->
<a href="https://bsky.app/profile/dnsimple.bsky.social" aria-label="Visit us on Blue Sky Social" rel="noopener noreferrer" target="_blank" class="grow mr4">
<svg xmlns="http://www.w3.org/2000/svg" height="32" width="32" viewBox="0 0 512 512">
<!--!Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<path
fill="#999999"
d="M111.8 62.2C170.2 105.9 233 194.7 256 242.4c23-47.6 85.8-136.4 144.2-180.2c42.1-31.6 110.3-56 110.3 21.8c0 15.5-8.9 130.5-14.1 149.2C478.2 298 412 314.6 353.1 304.5c102.9 17.5 129.1 75.5 72.5 133.5c-107.4 110.2-154.3-27.6-166.3-62.9l0 0c-1.7-4.9-2.6-7.8-3.3-7.8s-1.6 3-3.3 7.8l0 0c-12 35.3-59 173.1-166.3 62.9c-56.5-58-30.4-116 72.5-133.5C100 314.6 33.8 298 15.7 233.1C10.4 214.4 1.5 99.4 1.5 83.9c0-77.8 68.2-53.4 110.3-21.8z"
/>
</svg>
</a>

<!-- facebook -->
<a href="https://www.facebook.com/dnsimple" aria-label="Visit us on Facebook" rel="noopener noreferrer" target="_blank" class="grow mr4">
<svg xmlns="http://www.w3.org/2000/svg" height="32" width="20" viewBox="0 0 320 512">
<!--!Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<path
fill="#999999"
d="M80 299.3V512H196V299.3h86.5l18-97.8H196V166.9c0-51.7 20.3-71.5 72.7-71.5c16.3 0 29.4 .4 37 1.2V7.9C291.4 4 256.4 0 236.2 0C129.3 0 80 50.5 80 159.4v42.1H14v97.8H80z"
/>
</svg>
</a>

<!-- mastodon -->
<a href="https://dnsimple.social/@trusty" aria-label="Visit us on Mastodon" rel="noopener noreferrer" target="_blank" class="grow mr4">
<svg xmlns="http://www.w3.org/2000/svg" height="32" width="28" viewBox="0 0 448 512">
<!--!Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<path
fill="#999999"
d="M433 179.1c0-97.2-63.7-125.7-63.7-125.7-62.5-28.7-228.6-28.4-290.5 0 0 0-63.7 28.5-63.7 125.7 0 115.7-6.6 259.4 105.6 289.1 40.5 10.7 75.3 13 103.3 11.4 50.8-2.8 79.3-18.1 79.3-18.1l-1.7-36.9s-36.3 11.4-77.1 10.1c-40.4-1.4-83-4.4-89.6-54a102.5 102.5 0 0 1 -.9-13.9c85.6 20.9 158.7 9.1 178.8 6.7 56.1-6.7 105-41.3 111.2-72.9 9.8-49.8 9-121.5 9-121.5zm-75.1 125.2h-46.6v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.3V197c0-58.5-64-56.6-64-6.9v114.2H90.2c0-122.1-5.2-147.9 18.4-175 25.9-28.9 79.8-30.8 103.8 6.1l11.6 19.5 11.6-19.5c24.1-37.1 78.1-34.8 103.8-6.1 23.7 27.3 18.4 53 18.4 175z"
/>
</svg>
</a>
</div>
Loading