Skip to content

Commit

Permalink
Adding social icons to footer of developer site (#728)
Browse files Browse the repository at this point in the history
* adding social icons

also fixing the header responsive layout on mobile

* fixes mastodon URL

* changing the id of social icons to prevent ad blocking

---------

Co-authored-by: Sebastian Hermida <sbastn@users.noreply.github.com>
  • Loading branch information
dperrymorrow and sbastn authored Dec 11, 2024
1 parent e32c83a commit efd4be0
Show file tree
Hide file tree
Showing 5 changed files with 87 additions and 6 deletions.
6 changes: 6 additions & 0 deletions content/assets/css/_colorscheme.scss
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
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
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
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
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>

0 comments on commit efd4be0

Please sign in to comment.