Skip to content

Instantly share code, notes, and snippets.

View markcaron's full-sized avatar

Mark Caron markcaron

21 followers · 25 following
  • Red Hat
  • Raleigh
View GitHub Profile
@markcaron
markcaron / ies-24clock.css
Created October 12, 2020 18:17
.clockNoteRow {
width: 100%;
border-bottom: solid 2px #ededed;
padding: 1em 0;
font-size: 12px;
color: #8c8c8c;
}
.clock-icon {
width: 21px;
@markcaron
markcaron / ies-24clock.html
Created October 12, 2020 18:17
<div class="clockNoteRow">
<svg class="clock-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><title>clock icon</title><path d="M26.44,17.39a.76.76,0,0,0-1,.41.72.72,0,0,0-.06.29.75.75,0,0,0,.22.53.78.78,0,0,0,.24.16.75.75,0,0,0,1-.69.72.72,0,0,0-.06-.29.63.63,0,0,0-.16-.24A.81.81,0,0,0,26.44,17.39Z"></path><path d="M23.48,13a.87.87,0,0,0,.28.05.75.75,0,0,0,.54-.22.74.74,0,0,0,.21-.53.87.87,0,0,0-.05-.28.89.89,0,0,0-.16-.25.79.79,0,0,0-1.07,0,.72.72,0,0,0-.16.25.71.71,0,0,0-.06.28.75.75,0,0,0,.22.53A.85.85,0,0,0,23.48,13Z"></path><path d="M23.23,24.38a.77.77,0,0,0,.54.22.74.74,0,0,0,.52-.22.73.73,0,0,0,0-1.06.67.67,0,0,0-.24-.16.77.77,0,0,0-.82.16.75.75,0,0,0,0,1.06Z"></path><path d="M17.71,25.55a.78.78,0,0,0-.24.16.63.63,0,0,0-.16.24.73.73,0,0,0,0,.58.63.63,0,0,0,.16.24.75.75,0,0,0,1.06,0,.78.78,0,0,0,.16-.24.72.72,0,0,0,.06-.29.75.75,0,0,0-1-.69Z"></path><path d="M12.52,23.16a.77.77,0,0,0-.81.16.73.73,0,0,0,0,1.06.75.75,0,0,0,.53.22.79.79,0,0,0,.53-.22.75.75,0,0,0,0-1.06A.72.72,0,0,0,12.52,2
@markcaron
markcaron / hamburger-menu-morph.html
Created March 14, 2019 18:47
HTML for a pure CSS morphing hamburger menu button
<button id="menu-btn" class="menu menu-white x" type="button" aria-label="Toggle Navigation" aria-expanded="false">
<span class="lines"></span>
</button>
@markcaron
markcaron / hamburger-menu-morph.scss
Created March 14, 2019 18:46
SASS for a pure CSS morphing hamburger menu button
$width: 30px;
$lineWidth: 18px;
$lineHeight: 2px;
$arrowWidth: 12px;
$leftArrowLeftPos: 7px;
$arrowTopPos: 4px;
$transitionSpeed: 200ms;
$defaultLineColor: black;
$whiteLineColor: white;
@markcaron
markcaron / hamburger-menu-final.css
Last active May 24, 2021 14:08
CSS for a responsive hamburger menu built with pure CSS - Full CSS
/* Screen reader only */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
@markcaron
markcaron / hamburger-menu3.css
Last active January 21, 2019 16:40
CSS for a responsive hamburger menu built with pure CSS - Step 3
/*
Larger screen styling
Horizontal menu
*/
@media (min-width: 768px) {
.menu-toggle,
.main-menu .menu-close {
display: none;
}
@markcaron
markcaron / hamburger-menu2.css
Last active April 21, 2021 22:00
CSS for a responsive hamburger menu built with pure CSS - Step 2
/*
On small devices, allow it to toggle...
*/
/*
:target for non-JavaScript
[aria-expanded] will be used if/when JavaScript is added to improve interaction, though it's completely optional.
*/
.main-menu:target,
.main-menu[aria-expanded="true"] {
display: block;
@markcaron
markcaron / hamburger-menu.css
Last active April 21, 2021 21:58
CSS for a responsive hamburger menu built with pure CSS - Step 1
/* Screen reader only */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
@markcaron
markcaron / hamburger-menu2.html
Last active June 13, 2022 20:24
HTML for a responsive hamburger menu built with pure CSS - Step 2
<header>
<a href="#main-menu"
id="main-menu-toggle"
class="menu-toggle"
aria-label="Open main menu">
<span class="sr-only">Open main menu</span>
<span class="fa fa-bars" aria-hidden="true"></span>
</a>
<h1 class="logo">hamburgers</h1>
@markcaron
markcaron / hamburger-menu.html
Last active August 7, 2017 19:31
HTML for a responsive hamburger menu built with pure CSS - Step 1
<header>
<a href="#main-menu" class="menu-toggle">
<span class="fa fa-bars"></span>
</a>
<h1 class="logo">hamburgers</h1>
<nav id="main-menu" class="main-menu">
<a href="#main-menu-toggle" class="menu-close">
<span class="fa fa-close"></span>