Skip to content

Commit

Permalink
Minor - Follow us: replacing Twitter with X and adding 'x-social' opt…
Browse files Browse the repository at this point in the history 
…ions (#2318)
  • Loading branch information
@Garneauma
Garneauma authored May 14, 2024
1 parent a2753ca commit 262c208
Show file tree
Hide file tree
Showing 8 changed files with 307 additions and 28 deletions.
27 changes: 24 additions & 3 deletions _data/components.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -703,7 +703,7 @@
"en": "Follow us",
"fr": "Suivez-nous"
},
"status": "deprecated",
"status": "demoted",
"description": {
"en": "The social media channels pattern provides links to official Government of Canada (GC) social media accounts.",
"fr": "La configuration de conception des chaînes de médias sociaux fournit des liens vers les comptes de médias sociaux officiels du gouvernement du Canada (GC)."
Expand Down Expand Up @@ -773,7 +773,7 @@
},
{
"@id": "_:implement_follow",
"iteration": "_:iteration_follow_1",
"iteration": "_:iteration_follow_2",
"name": {
"en": "Standard",
"fr": "Standard"
Expand Down Expand Up @@ -838,6 +838,27 @@
"date": "2021-08",
"detectableBy": ".gc-followus"
},
{
"@id": "_:iteration_follow_2",
"name": "Follow us - Iteration 2",
"date": "2024-02",
"detectableBy": ".followus",
"additions": [
"New Base64 image for X logo (formerly known as Twitter).",
"Added logic to dynamically replace \"Twitter\" with \"X\" in hidden text."
],
"assets": [
{
"@type": "source-code",
"@language": "en",
"description": "Code sample",
"code": {
"@type": [ "rdf:HTML", "@id" ],
"@value": "includes/follow.html"
}
}
]
},
{
"@id": "_:iteration_follow_1",
"name": "Follow us - Iteration 1",
Expand Down Expand Up @@ -898,7 +919,7 @@
{
"@id": "_:cs_follow",
"name": "Follow us",
"status": "deprecated",
"status": "demoted",
"deprecatedOn": "2024-02-02",
"baseOnIteration": "_:iteration_follow_1",
"detectableBy": ".followus",
Expand Down
24 changes: 19 additions & 5 deletions components/gc-follow-us/_base.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAbCAYAAAAQ2f3dAAAACXBIWXMAAAsTAAALEwEAmpwYAAAKT2lDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVNnVFPpFj333vRCS4iAlEtvUhUIIFJCi4AUkSYqIQkQSoghodkVUcERRUUEG8igiAOOjoCMFVEsDIoK2AfkIaKOg6OIisr74Xuja9a89+bN/rXXPues852zzwfACAyWSDNRNYAMqUIeEeCDx8TG4eQuQIEKJHAAEAizZCFz/SMBAPh+PDwrIsAHvgABeNMLCADATZvAMByH/w/qQplcAYCEAcB0kThLCIAUAEB6jkKmAEBGAYCdmCZTAKAEAGDLY2LjAFAtAGAnf+bTAICd+Jl7AQBblCEVAaCRACATZYhEAGg7AKzPVopFAFgwABRmS8Q5ANgtADBJV2ZIALC3AMDOEAuyAAgMADBRiIUpAAR7AGDIIyN4AISZABRG8lc88SuuEOcqAAB4mbI8uSQ5RYFbCC1xB1dXLh4ozkkXKxQ2YQJhmkAuwnmZGTKBNA/g88wAAKCRFRHgg/P9eM4Ors7ONo62Dl8t6r8G/yJiYuP+5c+rcEAAAOF0ftH+LC+zGoA7BoBt/qIl7gRoXgugdfeLZrIPQLUAoOnaV/Nw+H48PEWhkLnZ2eXk5NhKxEJbYcpXff5nwl/AV/1s+X48/Pf14L7iJIEyXYFHBPjgwsz0TKUcz5IJhGLc5o9H/LcL//wd0yLESWK5WCoU41EScY5EmozzMqUiiUKSKcUl0v9k4t8s+wM+3zUAsGo+AXuRLahdYwP2SycQWHTA4vcAAPK7b8HUKAgDgGiD4c93/+8//UegJQCAZkmScQAAXkQkLlTKsz/HCAAARKCBKrBBG/TBGCzABhzBBdzBC/xgNoRCJMTCQhBCCmSAHHJgKayCQiiGzbAdKmAv1EAdNMBRaIaTcA4uwlW4Dj1wD/phCJ7BKLyBCQRByAgTYSHaiAFiilgjjggXmYX4IcFIBBKLJCDJiBRRIkuRNUgxUopUIFVIHfI9cgI5h1xGupE7yAAygvyGvEcxlIGyUT3UDLVDuag3GoRGogvQZHQxmo8WoJvQcrQaPYw2oefQq2gP2o8+Q8cwwOgYBzPEbDAuxsNCsTgsCZNjy7EirAyrxhqwVqwDu4n1Y8+xdwQSgUXACTYEd0IgYR5BSFhMWE7YSKggHCQ0EdoJNwkDhFHCJyKTqEu0JroR+cQYYjIxh1hILCPWEo8TLxB7iEPENyQSiUMyJ7mQAkmxpFTSEtJG0m5SI+ksqZs0SBojk8naZGuyBzmULCAryIXkneTD5DPkG+Qh8lsKnWJAcaT4U+IoUspqShnlEOU05QZlmDJBVaOaUt2ooVQRNY9aQq2htlKvUYeoEzR1mjnNgxZJS6WtopXTGmgXaPdpr+h0uhHdlR5Ol9BX0svpR+iX6AP0dwwNhhWDx4hnKBmbGAcYZxl3GK+YTKYZ04sZx1QwNzHrmOeZD5lvVVgqtip8FZHKCpVKlSaVGyovVKmqpqreqgtV81XLVI+pXlN9rkZVM1PjqQnUlqtVqp1Q61MbU2epO6iHqmeob1Q/pH5Z/YkGWcNMw09DpFGgsV/jvMYgC2MZs3gsIWsNq4Z1gTXEJrHN2Xx2KruY/R27iz2qqaE5QzNKM1ezUvOUZj8H45hx+Jx0TgnnKKeX836K3hTvKeIpG6Y0TLkxZVxrqpaXllirSKtRq0frvTau7aedpr1Fu1n7gQ5Bx0onXCdHZ4/OBZ3nU9lT3acKpxZNPTr1ri6qa6UbobtEd79up+6Ynr5egJ5Mb6feeb3n+hx9L/1U/W36p/VHDFgGswwkBtsMzhg8xTVxbzwdL8fb8VFDXcNAQ6VhlWGX4YSRudE8o9VGjUYPjGnGXOMk423GbcajJgYmISZLTepN7ppSTbmmKaY7TDtMx83MzaLN1pk1mz0x1zLnm+eb15vft2BaeFostqi2uGVJsuRaplnutrxuhVo5WaVYVVpds0atna0l1rutu6cRp7lOk06rntZnw7Dxtsm2qbcZsOXYBtuutm22fWFnYhdnt8Wuw+6TvZN9un2N/T0HDYfZDqsdWh1+c7RyFDpWOt6azpzuP33F9JbpL2dYzxDP2DPjthPLKcRpnVOb00dnF2e5c4PziIuJS4LLLpc+Lpsbxt3IveRKdPVxXeF60vWdm7Obwu2o26/uNu5p7ofcn8w0nymeWTNz0MPIQ+BR5dE/C5+VMGvfrH5PQ0+BZ7XnIy9jL5FXrdewt6V3qvdh7xc+9j5yn+M+4zw33jLeWV/MN8C3yLfLT8Nvnl+F30N/I/9k/3r/0QCngCUBZwOJgUGBWwL7+Hp8Ib+OPzrbZfay2e1BjKC5QRVBj4KtguXBrSFoyOyQrSH355jOkc5pDoVQfujW0Adh5mGLw34MJ4WHhVeGP45wiFga0TGXNXfR3ENz30T6RJZE3ptnMU85ry1KNSo+qi5qPNo3ujS6P8YuZlnM1VidWElsSxw5LiquNm5svt/87fOH4p3iC+N7F5gvyF1weaHOwvSFpxapLhIsOpZATIhOOJTwQRAqqBaMJfITdyWOCnnCHcJnIi/RNtGI2ENcKh5O8kgqTXqS7JG8NXkkxTOlLOW5hCepkLxMDUzdmzqeFpp2IG0yPTq9MYOSkZBxQqohTZO2Z+pn5mZ2y6xlhbL+xW6Lty8elQfJa7OQrAVZLQq2QqboVFoo1yoHsmdlV2a/zYnKOZarnivN7cyzytuQN5zvn//tEsIS4ZK2pYZLVy0dWOa9rGo5sjxxedsK4xUFK4ZWBqw8uIq2Km3VT6vtV5eufr0mek1rgV7ByoLBtQFr6wtVCuWFfevc1+1dT1gvWd+1YfqGnRs+FYmKrhTbF5cVf9go3HjlG4dvyr+Z3JS0qavEuWTPZtJm6ebeLZ5bDpaql+aXDm4N2dq0Dd9WtO319kXbL5fNKNu7g7ZDuaO/PLi8ZafJzs07P1SkVPRU+lQ27tLdtWHX+G7R7ht7vPY07NXbW7z3/T7JvttVAVVN1WbVZftJ+7P3P66Jqun4lvttXa1ObXHtxwPSA/0HIw6217nU1R3SPVRSj9Yr60cOxx++/p3vdy0NNg1VjZzG4iNwRHnk6fcJ3/ceDTradox7rOEH0x92HWcdL2pCmvKaRptTmvtbYlu6T8w+0dbq3nr8R9sfD5w0PFl5SvNUyWna6YLTk2fyz4ydlZ19fi753GDborZ752PO32oPb++6EHTh0kX/i+c7vDvOXPK4dPKy2+UTV7hXmq86X23qdOo8/pPTT8e7nLuarrlca7nuer21e2b36RueN87d9L158Rb/1tWeOT3dvfN6b/fF9/XfFt1+cif9zsu72Xcn7q28T7xf9EDtQdlD3YfVP1v+3Njv3H9qwHeg89HcR/cGhYPP/pH1jw9DBY+Zj8uGDYbrnjg+OTniP3L96fynQ89kzyaeF/6i/suuFxYvfvjV69fO0ZjRoZfyl5O/bXyl/erA6xmv28bCxh6+yXgzMV70VvvtwXfcdx3vo98PT+R8IH8o/2j5sfVT0Kf7kxmTk/8EA5jz/GMzLdsAAAAgY0hSTQAAeiUAAICDAAD5/wAAgOkAAHUwAADqYAAAOpgAABdvkl/FRgAAA5dJREFUeNrMl81vFWUUxn9n5p373RZjMVK1IRrKwmJciPG6YMOalS6UuPAv8M9xaWLcCInCmrZAbGuAGK0m0LgRi6XVFunt7e297dze93Exc+lHotxpL4aTnEwyycx55nnPeeY8tvDmGAaYWcXgbaCK8RowCJTSzAO5PenSDIEgTSMJAT7NDrCTZhuIge00W0ATqAN/ALclfpS0ofTlAC+CPhVcBEbwFIAoLdwF0C181FAKuJttoIXxF/A18AWw4oCC4BPEZ8Aozz5sD+PdGEK8DAwrYfdzJxgDPtT/A+pp8QrwAXDdSZxNbzwvcQJ4z0kaB4YyN4oEXhAYFgQg9QvYMWDceTECFDMD80I7OyBhYYiFIVhf5qMIjDgvHUsloFeqwItwcBArl+nU1ug8fkyQz4Nz/QAXAYNOopLKQQ/zZNDpoDgmGh5m6OOLKIqoXb5E/MvPsFHHCiUsF+0Kw+GmtuwklbL2ljodFIbkx05TrFaJXn+D+nc3ad64QfvePNbYJCgWIZ9PymTvv4LziapnUkcBvr2Dj2PMjEq1Sm58nMY779KYmqT1/Sw7v93HajXI5bBCAYIgC4U5J+0Tup5aTNpfwoD8wAC58+cpvnWGevV9NicmaM/9hF9dRe028h7rvf9Cp4w0S9rNAwwYUDr+ErkLFyidO0djdpbmlStsz86gZhMyTK7zyqpfu/lvJ+OAytAQOnWKrZER5CLU8SgIe65zaGD/9Vz84AH1a9eoTU7Smp9HjQZyUcJpj/WOeJT7EW//fp/16zepT03RnJuj8+gRGFihmDR/hlpOopOdMaEwhDCZm3hxkfr0NOuTUzRu3yFeeggSYamM5XJJL2b7/o7zydKWTS4s+fp46SG1iSnWrl6lPjPD9sICmBGUy1gUPWH2EBE7Sc1MdJlBFBGvrbF66TLtlRVa9+axICAYGEj1CuT9UX5LW05iI90kw57/GC4iXv2b7cUlhBKGggBlaO6nHMqm81It3cWLWUdTqS7JggRPf1afNlB3EsuCreyrT8Lck92sb+sYLYNlJ3FXsA68kJ30/qHZE+vAXeelO8ASxsnnYrEWfwpuOcGvgm9MjAKvij4atSztnsQy8K3BvCPpr68kAuAjJWagtMfYhgcMbT9g+H2+UmxB4ivN+BLYtOkTo4loiorgDOgs4iRwHKikQ5FPV153wIV3QXevB5243+PED7rxXSduLAK3DH4ws3UD/hkAxN++zimLNSwAAAAASUVORK5CYII=");
}

%social-media-icons-logo-twitter {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAbCAYAAACN1PRVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RjEwNzlCNEI2Mjc3MTFFMzgzNjNDMkIzMzRCNjAwMUMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RjEwNzlCNEM2Mjc3MTFFMzgzNjNDMkIzMzRCNjAwMUMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGMTA3OUI0OTYyNzcxMUUzODM2M0MyQjMzNEI2MDAxQyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGMTA3OUI0QTYyNzcxMUUzODM2M0MyQjMzNEI2MDAxQyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PiBBaDwAAAJWSURBVHja3JZLbExhGIZnqihCoqTVhroUC9Rlo5IGISFYWIiVxNLGhogNO4nEylqwkEiQ7qQblxAWhLjEJK4LhBKKShtUW4zxvPJWTkb/c07NZBbe5MlMp2fOe77L/32TLRQKmUqpKlNBVdSsuvV8Zynfb4XdsB5q4RmchFN+r2DmQyPkqmUIk/2PdyMwmg3rYIWNpDmwGl7DGKiHJfAEvsloEmzyE5yBBymMpsIe2AFjI59nYS3MhTswHX7Cfr0qmgnQBnvhALQ42pBGwQbYVmQUVRNsgZlw3691VU7fOIetC47AVpgSuFEDbHTqk1QHS+ELdCuCAXgVuaDN4a+EsyosfIZBKDjt9U5ZknrdLJdlKLNPcB0ewQJfpLB3wirn/p6LrNadBn2Qd0rj9BRO2ON3bfrhGrTDrkhnSYvMZkff64I3pYhKWXgRPctD3bjGN+gsMhtSbeDzJH2NRi/XiS74drd0uaRUd8OPqFkPXIAPboxyqQtuOro/ZvrjIhyFj2U008Pfhu/Fg1jn4JgNu9xppUqT6H1o6iu/t+BhNPR/lIZwh+ZhyEzva2AxjC/R7IrPbj5kptzehUspDmuccl4zPX/ts2HC3wePPb3VnTNiBm6xdPAPuxyJm1qn/iUc8lrIjWCbayAc9DwdHHZTB6ZFs5eg9tLoFEbP/YDt7uxMyGyWh2uDp/kyb995XjtxUl1uwHEPhv7Y3yCwEJZ7ITZ7mdYErh/wDftc19Nwzscm8WzK7KoL2mHTFps2Rpoj75roDL719freG2+BVMr+tz9SfwkwAFjOiZEdguqDAAAAAElFTkSuQmCC");
%social-media-icons-logo-x {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAbCAMAAAC6CgRnAAAAZlBMVEUAAACpqalRUVFra2sWFhbS0tIODg6enp4ICAgEBATX19dFRUV5eXni4uIdHR01NTUkJCSEhIQ9PT2MjIzBwcHExMSgoKDOzs65ubleXl4sLCyTk5P19fWYmJguLi6zs7Pa2trIyMjWijNVAAAA+ElEQVQoz7VSSYKEIAwEQQiIbKLY7v7/k0P3jMuo1+YUklCpKoLQd04xNpw3mdju4tV3W2zDgHmUZu/NOd37fE7Ax/kv4euRHqBCRYNepfqgdnVrzxP1jCn00qeQ8txf6EQibD1rRPtYXKgmVI+yRTFXZjcdFLcalORSwV2kWSvQeKjYkwNEZqhYKniqMR4sUg/jPlzLESgO9qFE+VASNMX+jircQvia7JE3VCBJfVdzxsZ1urxKbiasTBLUrc1/HSbit/fgkpmpQZxKU4v1r+mhpcJFc/qGUNtdiAMbMDvY57v34ErM80FtqKY6dgXp6r08in1pN38AoggMXei8ngUAAAAASUVORK5CYII=");
}

%social-media-icons-logo-flickr {
Expand Down Expand Up @@ -64,7 +64,7 @@
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAWCAYAAABOm/V6AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gQVECMqfCsMgwAAAshJREFUSMfF1s9P02AYwPFvyxwbHRuMrYOVVgS2BRNBDfHqxXDxz/Bq4sH/QA+e/B8MR+9e/QcUMk0IMBRho4R1g7LRbmPA6mFuqLAxfj9Jk6bv276fPHnep6+QnJ3xAq+Bl0CEm41PwBsX8AJ4y+3Ec2DYBbwCCClj7O1k6Q3KRO5OXNuqlVKRjVQSr6+PXSMDMCUCIwCylkCJTWHt5smuLV4LYL9ssZFK4g9GUMYnm8/Fvyd5fX1Exx7UIetXC6mWbTLLc/gHBpG1+D9jIuDUb51jyPgklpknu750NYBKifTSVwKhKOHhGCCcQJwIry+AEptizzQw0suXByx+oS+sEFLGEQThxByx1cseyc9w/BHFnSy5zAqO41wYEAgrDERHTwW0RQB4enpRE48pbG+S13/iOLVz1UADEIqOIoitlxLP+li314eWmKaQ09nWV3FqZ0P2Sxbp5TkC4SghZawtoCMEgNsroU1Ms5vTyW+uts1IpVQkk5rHHxxsWQMXQgC4PXVIIaeT11dPrZGKXUBPJekNRpC1eEeAcyGqlRJGOoUUCFHI6+QyKWpHh81xu7CNvvKd7h4fFbuImc10XD+uzgA2RjqFRwoQUkbZL9ts/vjG4UGVbq+PWu0Qy8zROxBBVuNU7CJGJgVAf0S9fCb+B9SLVUK7/wTXHTd2cYdq2SasxpDVeHN7y2qcPdNo/B8unoljgL8JaERXlwtZS9Cuz8hqrN5jgH5ZPX8mGjXgkfwMREcv1C09kp+wGsPaaZ8R8biRH1fywX4ZI71cBwzd67jKW2ZES7BnGpgtICJQBZpN6KBaIbu+hEfyExwaObPRdBLdPT5kLYFlGqfuGhGYB9haW+Do8ICtXwt1wKCGIAg4Tu1KLrenh7AaxzKzZNcWsXZzDUNJSM7OPPtz1nPf0hHvowv4DDwF3gEPAekGFnaADPABeP8bNrJaPIc3C6EAAAAASUVORK5CYII=")
}

$social-media-li-margin-bottom: 23px;
$social-media-li-margin-bottom: 15px;
$social-media-icons-vertical-offset: 6px;
$social-media-icons-size: 38px;

Expand Down Expand Up @@ -163,6 +163,11 @@ $social-media-icons-size: 38px;
background-image: url("../assets/gc-follow-us/x.svg");
}

.x-social::before {
@extend %social-media-icons-gc-followus-logo-properties;
background-image: url("../assets/gc-follow-us/x.svg");
}

.youtube::before {
@extend %social-media-icons-gc-followus-logo-properties;
background-image: url("../assets/gc-follow-us/youtube.svg");
Expand Down Expand Up @@ -235,7 +240,12 @@ $social-media-icons-size: 38px;

.twitter {
@extend %social-media-icons-followus-logo-properties;
@extend %social-media-icons-logo-twitter;
@extend %social-media-icons-logo-x;
}

.x-social {
@extend %social-media-icons-followus-logo-properties;
@extend %social-media-icons-logo-x;
}

.flickr {
Expand Down Expand Up @@ -310,7 +320,11 @@ $social-media-icons-size: 38px;
}

&.twitter {
@extend %social-media-icons-logo-twitter;
@extend %social-media-icons-logo-x;
}

&.x-social {
@extend %social-media-icons-logo-x;
}

&.flickr {
Expand Down
88 changes: 82 additions & 6 deletions components/gc-follow-us/deprecated/follow-us-en.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,92 @@
"language": "en",
"title": "Follow us",
"breadcrumbs": [
{ "title": "GC Follow us", "link": "components/gc-follow-us/gc-follow-us-doc-en.html" }
{ "title": "Social media channels", "link": "components/gc-follow-us/gc-follow-us-doc-en.html" }
]
}
---

<div class="wb-prettify all-pre hide"></div>

{%- include gc-follow-us/follow.html -%}

<h3>Code</h3>
{% highlight html %}
<section>
<h2>Follow us component example</h2>
{%- include gc-follow-us/follow.html -%}
{% endhighlight %}

<details>
<summary>Code</summary>
{% highlight html %}
{%- include gc-follow-us/follow.html -%}
{% endhighlight %}
</details>
</section>

<section>
<h2>Individual social media icons example</h2>
<h3 class="icon twitter">Twitter:</h3>
<ul>
<li><a href="#" rel="external">Environment Canada’s Twitter</a> <span class="wb-inv">presence</span></li>
<li><a href="#" rel="external">Fisheries and Oceans Canada’s Twitter</a> <span class="wb-inv">presence</span></li>
<li><a href="#" rel="external">Parks Canada’s Twitter</a> <span class="wb-inv">presence</span></li>
</ul>
<h3 class="icon facebook">Facebook:</h3>
<ul>
<li><a href="#" rel="external">Environment Canada’s Facebook</a> <span class="wb-inv">presence</span></li>
<li><a href="#" rel="external">Parks Canada’s Facebook</a> <span class="wb-inv">presence</span></li>
</ul>
<h3 class="icon flickr">Flickr:</h3>
<ul>
<li><a href="#" rel="external">Environment Canada’s Flickr</a> <span class="wb-inv">presence</span></li>
</ul>
<h3 class="icon youtube">YouTube:</h3>
<ul>
<li><a href="#" rel="external">Parks Canada’s YouTube</a> <span class="wb-inv">presence</span></li>
<li><a href="#" rel="external">Department of Fisheries and Oceans’ YouTube</a> <span class="wb-inv">presence</span></li>
</ul>
<h3 class="icon pinterest">Pinterest:</h3>
<ul>
<li><a href="#" rel="external">Healthy Canadians</a> <span class="wb-inv">presence</span></li>
</ul>
<details>
<summary>Code</summary>
{% highlight html %}
<h3 class="icon twitter">Twitter:</h3>
<ul>
<li><a href="#" rel="external">Environment Canada’s Twitter</a> <span class="wb-inv">presence</span></li>
<li><a href="#" rel="external">Fisheries and Oceans Canada’s Twitter</a> <span class="wb-inv">presence</span></li>
<li><a href="#" rel="external">Parks Canada’s Twitter</a> <span class="wb-inv">presence</span></li>
</ul>
<h3 class="icon facebook">Facebook:</h3>
<ul>
<li><a href="#" rel="external">Environment Canada’s Facebook</a> <span class="wb-inv">presence</span></li>
<li><a href="#" rel="external">Parks Canada’s Facebook</a> <span class="wb-inv">presence</span></li>
</ul>
<h3 class="icon flickr">Flickr:</h3>
<ul>
<li><a href="#" rel="external">Environment Canada’s Flickr</a> <span class="wb-inv">presence</span></li>
</ul>
<h3 class="icon youtube">YouTube:</h3>
<ul>
<li><a href="#" rel="external">Parks Canada’s YouTube</a> <span class="wb-inv">presence</span></li>
<li><a href="#" rel="external">Department of Fisheries and Oceans’ YouTube</a> <span class="wb-inv">presence</span></li>
</ul>
<h3 class="icon pinterest">Pinterest:</h3>
<ul>
<li><a href="#" rel="external">Healthy Canadians</a> <span class="wb-inv">presence</span></li>
</ul>
{% endhighlight %}
</details>

<h3>Available icons</h3>
<ul>
<li><span class="icon foursquare">Foursquare icon</span></li>
<li><span class="icon youtube">Youtube icon</span></li>
<li><span class="icon x-social">X-social icon</span></li>
<li><span class="icon flickr">Flickr icon</span></li>
<li><span class="icon facebook">Facebook icon</span></li>
<li><span class="icon pinterest">Pinterest icon</span></li>
<li><span class="icon linkedin">LinkedIn icon</span></li>
<li><span class="icon instagram">Instagram icon</span></li>
<li><span class="icon reddit">Reddit icon</span></li>
<li><span class="icon rss">RSS icon</span></li>
</ul>
</section>
Loading

0 comments on commit 262c208

Please sign in to comment.