Last active
April 10, 2023 08:22
-
-
Save jeremypage/c5c54560c4472357f634c738122fee30 to your computer and use it in GitHub Desktop.
Jekyll note styling
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"scripts": [], | |
"styles": [ | |
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.7.5/css/foundation.css" | |
] | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>Document</title> | |
</head> | |
<body> | |
<article> | |
<h1>Lorem ipsum dolor sit amet</h1> | |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquet elementum sollicitudin. Sed | |
condimentum lectus non mauris pulvinar hendrerit. Curabitur porttitor nisi sed efficitur laoreet. Ut efficitur | |
dignissim nulla quis rutrum. Fusce sed fermentum nulla. Pellentesque arcu ante, sollicitudin sit amet | |
pellentesque quis, dignissim ut orci. Fusce nec dignissim nulla, ac viverra urna. Pellentesque habitant morbi | |
tristique senectus et netus et malesuada fames ac turpis egestas. Duis massa sem, vestibulum ut massa sed, | |
laoreet rhoncus nunc. Praesent non ante nec nulla ornare fermentum. Nunc euismod magna sit amet nunc facilisis, | |
non interdum sapien ullamcorper. Sed commodo luctus arcu at bibendum. Fusce venenatis nunc vitae auctor | |
ullamcorper. Cras malesuada posuere mi quis varius.</p> | |
<div class="note">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquet elementum | |
sollicitudin. Sed condimentum lectus non mauris pulvinar hendrerit.</div> | |
<p>Proin fermentum ullamcorper est eu posuere. Nulla facilisi. Quisque in ante neque. Fusce condimentum eros augue, | |
eu pretium ante vehicula vitae. Ut luctus, sapien et consectetur commodo, purus dolor varius ex, at euismod eros | |
eros ac lacus. Vestibulum fermentum tincidunt orci, sed cursus massa fringilla non. Morbi id scelerisque purus. | |
</p> | |
<p>Duis dignissim risus viverra nisl bibendum, vel eleifend libero fermentum. Sed feugiat metus at lacus feugiat | |
fringilla. Maecenas feugiat blandit porta. Mauris ultricies euismod accumsan. Suspendisse quis iaculis elit. | |
Integer ultrices diam vitae maximus tincidunt. Vestibulum sit amet odio vel enim pharetra blandit sit amet a | |
dui. Morbi facilisis molestie ex, ut gravida mauris accumsan sed. Fusce ut mi consectetur, rutrum odio a, rutrum | |
mi. In nec dapibus neque, eu facilisis tortor. Pellentesque sodales a purus euismod sollicitudin. Pellentesque | |
posuere orci odio, ut fringilla nisl maximus ut. In posuere diam tortor, quis dignissim ante dignissim a. Donec | |
imperdiet dignissim dolor non maximus.</p> | |
<p>Praesent eu placerat mauris. Fusce pulvinar lacinia tempus. Pellentesque mattis, neque eu suscipit ultricies, | |
felis est vestibulum erat, at sagittis dui dolor in mi. Etiam tristique eget diam sed aliquam. Class aptent | |
taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec convallis ac turpis vitae | |
luctus. Aliquam sed augue id elit rutrum pellentesque vel sit amet massa. Vivamus efficitur ex nisi, at maximus | |
enim laoreet sed. Nulla maximus neque iaculis elit porttitor volutpat. Fusce velit elit, ullamcorper at blandit | |
vitae, posuere in nunc. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. | |
</p> | |
<p>Donec commodo eget risus facilisis hendrerit. Nulla nibh magna, accumsan id iaculis in, vehicula non leo. | |
Vestibulum blandit, arcu nec imperdiet varius, augue orci finibus risus, in posuere lorem erat vitae augue. | |
Praesent odio lectus, iaculis in nisl at, laoreet convallis sapien. Pellentesque habitant morbi tristique | |
senectus et netus et malesuada fames ac turpis egestas. Vestibulum a orci eget purus lobortis ultrices. | |
Phasellus sit amet lorem euismod neque faucibus rhoncus in vitae sem. Proin egestas, nisi eu sollicitudin | |
ultricies, dolor massa aliquam est, cursus maximus lacus felis a lacus. Sed eget cursus sapien. Aenean porta | |
dignissim sagittis.</p> | |
</article> | |
</body> | |
</html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Note types */ | |
.note { | |
margin: 30px 0; | |
margin-left: -24px; | |
padding: 20px 20px 24px; | |
padding-left: 50px; | |
border-radius: 0 5px 5px 0; | |
position: relative; | |
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.3); | |
background-color: #7e6d42; | |
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdlNmQ0MiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM1YzRlMzUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); | |
background-image: -webkit-gradient(linear, left top, left bottom, from(#7e6d42), to(#5c4e35)); | |
background-image: -webkit-linear-gradient(top, #7e6d42 0%, #5c4e35 100%); | |
background-image: -moz-linear-gradient(top, #7e6d42 0%, #5c4e35 100%); | |
background-image: -o-linear-gradient(top, #7e6d42 0%, #5c4e35 100%); | |
background-image: linear-gradient(to bottom, #7e6d42 0%, #5c4e35 100%); | |
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7e6d42', endColorstr='#5c4e35', GradientType=0); | |
} | |
.note:before { | |
content: ""; | |
position: absolute; | |
top: -10px; | |
left: 0; | |
border-color: transparent #222 #222 transparent; | |
border-style: solid; | |
border-width: 5px; | |
width: 0; | |
height: 0; | |
} | |
.note h5, | |
.note p { | |
margin: 0; | |
color: #fff; | |
} | |
.note h5 { | |
line-height: 1.5em; | |
font-weight: 900; | |
font-style: normal; | |
} | |
.note p { | |
font-weight: 400; | |
font-size: 0.75em; | |
} | |
.note:after { | |
content: '\2605'; | |
color: #fc0; | |
position: absolute; | |
top: 14px; | |
left: 14px; | |
font-size: 28px; | |
font-weight: 700; | |
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5); | |
} | |
p.note { | |
color: #fff; | |
font-weight: 400; | |
font-size: 0.75em; | |
} | |
p.note:after { | |
line-height: 1.21; | |
} | |
.info { | |
background-color: #0389aa; | |
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAzODlhYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDYxN2YiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); | |
background-image: -webkit-gradient(linear, left top, left bottom, from(#0389aa), to(#00617f)); | |
background-image: -webkit-linear-gradient(top, #0389aa 0%, #00617f 100%); | |
background-image: -moz-linear-gradient(top, #0389aa 0%, #00617f 100%); | |
background-image: -o-linear-gradient(top, #0389aa 0%, #00617f 100%); | |
background-image: linear-gradient(to bottom, #0389aa 0%, #00617f 100%); | |
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0389aa', endColorstr='#00617f', GradientType=0); | |
} | |
.warning { | |
background-color: #9e2812; | |
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzllMjgxMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM2ZjBkMGQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); | |
background-image: -webkit-gradient(linear, left top, left bottom, from(#9e2812), to(#6f0d0d)); | |
background-image: -webkit-linear-gradient(top, #9e2812 0%, #6f0d0d 100%); | |
background-image: -moz-linear-gradient(top, #9e2812 0%, #6f0d0d 100%); | |
background-image: -o-linear-gradient(top, #9e2812 0%, #6f0d0d 100%); | |
background-image: linear-gradient(to bottom, #9e2812 0%, #6f0d0d 100%); | |
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e2812', endColorstr='#6f0d0d', GradientType=0); | |
} | |
.unreleased { | |
background-color: #cd9239; | |
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2NkOTIzOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNhMjc1MjgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); | |
background-image: -webkit-gradient(linear, left top, left bottom, from(#cd9239), to(#a27528)); | |
background-image: -webkit-linear-gradient(top, #cd9239 0%, #a27528 100%); | |
background-image: -moz-linear-gradient(top, #cd9239 0%, #a27528 100%); | |
background-image: -o-linear-gradient(top, #cd9239 0%, #a27528 100%); | |
background-image: linear-gradient(to bottom, #cd9239 0%, #a27528 100%); | |
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cd9239', endColorstr='#a27528', GradientType=0); | |
} | |
.info:before { | |
border-color: transparent #00617f #00617f transparent; | |
} | |
.warning:before { | |
border-color: transparent #6f0d0d #6f0d0d transparent; | |
} | |
.unreleased:before { | |
border-color: transparent #664719 #664719 transparent; | |
} | |
.info:after { | |
content: '\24D8'; | |
color: #fff; | |
position: absolute; | |
top: 15px; | |
left: 15px; | |
font-size: 28px; | |
font-weight: 700; | |
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5); | |
} | |
.warning:after { | |
content: '\203C'; | |
color: #fc0; | |
position: absolute; | |
top: 15px; | |
left: 15px; | |
font-size: 32px; | |
font-weight: 700; | |
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5); | |
} | |
.unreleased:after { | |
content: '\2692'; | |
color: #2b2a12; | |
position: absolute; | |
top: 8px; | |
left: 15px; | |
font-size: 38px; | |
font-weight: 700; | |
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); | |
} | |
article { | |
margin: 1em; | |
padding: 1em; | |
background: #f8f8f8; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment