Hidden until hover or focus
Hidden until hover or focus
Hidden until hover or focus
Hidden until hover or focus
*/
.hide-child .child {
opacity: 0;
transition: opacity .15s ease-in;
}
.hide-child:hover .child,
.hide-child:focus .child,
.hide-child:active .child {
opacity: 1;
transition: opacity .15s ease-in;
}
.underline-hover:hover,
.underline-hover:focus {
text-decoration: underline;
}
/* Can combine this with overflow-hidden to make background images grow on hover
* even if you are using background-size: cover */
.grow {
-moz-osx-font-smoothing: grayscale;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0);
transition: -webkit-transform 0.25s ease-out;
transition: transform 0.25s ease-out;
transition: transform 0.25s ease-out, -webkit-transform 0.25s ease-out;
}
.grow:hover,
.grow:focus {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
.grow:active {
-webkit-transform: scale(.90);
transform: scale(.90);
}
.grow-large {
-moz-osx-font-smoothing: grayscale;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0);
transition: -webkit-transform .25s ease-in-out;
transition: transform .25s ease-in-out;
transition: transform .25s ease-in-out, -webkit-transform .25s ease-in-out;
}
.grow-large:hover,
.grow-large:focus {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
.grow-large:active {
-webkit-transform: scale(.95);
transform: scale(.95);
}
/* Add pointer on hover */
.pointer:hover {
cursor: pointer;
}
/*
Add shadow on hover.
Performant box-shadow animation pattern from
http://tobiasahlin.com/blog/how-to-animate-box-shadow/
*/
.shadow-hover {
cursor: pointer;
position: relative;
transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.shadow-hover::after {
content: '';
box-shadow: 0px 0px 16px 2px rgba(0, 0, 0, .2);
border-radius: inherit;
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.shadow-hover:hover::after,
.shadow-hover:focus::after {
opacity: 1;
}
/* Combine with classes in skins and skins-pseudo for
* many different transition possibilities. */
.bg-animate,
.bg-animate:hover,
.bg-animate:focus {
transition: background-color .15s ease-in-out;
}
/*
Z-INDEX
Base
z = z-index
Modifiers
-0 = literal value 0
-1 = literal value 1
-2 = literal value 2
-3 = literal value 3
-4 = literal value 4
-5 = literal value 5
-999 = literal value 999
-9999 = literal value 9999
-max = largest accepted z-index value as integer
-inherit = string value inherit
-initial = string value initial
-unset = string value unset
MDN: https://developer.mozilla.org/en/docs/Web/CSS/z-index
Spec: http://www.w3.org/TR/CSS2/zindex.html
Articles:
https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
Tips on extending:
There might be a time worth using negative z-index values.
Or if you are using tachyons with another project, you might need to
adjust these values to suit your needs.
*/
.z-0 { z-index: 0; }
.z-1 { z-index: 1; }
.z-2 { z-index: 2; }
.z-3 { z-index: 3; }
.z-4 { z-index: 4; }
.z-5 { z-index: 5; }
.z-999 { z-index: 999; }
.z-9999 { z-index: 9999; }
.z-max {
z-index: 2147483647;
}
.z-inherit { z-index: inherit; }
.z-initial { z-index: auto; z-index: initial; }
.z-unset { z-index: unset; }
/*
NESTED
Tachyons module for styling nested elements
that are generated by a cms.
*/
.nested-copy-line-height p,
.nested-copy-line-height ul,
.nested-copy-line-height ol {
line-height: 1.5;
}
.nested-headline-line-height h1,
.nested-headline-line-height h2,
.nested-headline-line-height h3,
.nested-headline-line-height h4,
.nested-headline-line-height h5,
.nested-headline-line-height h6 {
line-height: 1.25;
}
.nested-list-reset ul,
.nested-list-reset ol {
padding-left: 0;
margin-left: 0;
list-style-type: none;
}
.nested-copy-indent p+p {
text-indent: 1em;
margin-top: 0;
margin-bottom: 0;
}
.nested-copy-separator p+p {
margin-top: 1.5em;
}
.nested-img img {
width: 100%;
max-width: 100%;
display: block;
}
.nested-links a {
color: #357edd;
transition: color .15s ease-in;
}
.nested-links a:hover,
.nested-links a:focus {
color: #96ccff;
transition: color .15s ease-in;
}
/*
STYLES
Add custom styles here.
*/
/* Variables */
/* Importing here will allow you to override any variables in the modules */
/*
Tachyons
COLOR VARIABLES
Grayscale
- Solids
- Transparencies
Colors
*/
/*
CUSTOM MEDIA QUERIES
Media query values can be changed to fit your own content.
There are no magic bullets when it comes to media query width values.
They should be declared in em units - and they should be set to meet
the needs of your content. You can also add additional media queries,
or remove some of the existing ones.
These media queries can be referenced like so:
@media (--breakpoint-not-small) {
.medium-and-larger-specific-style {
background-color: red;
}
}
@media (--breakpoint-medium) {
.medium-screen-specific-style {
background-color: red;
}
}
@media (--breakpoint-large) {
.large-and-larger-screen-specific-style {
background-color: red;
}
}
*/
/* Media Queries */
/* Debugging */
/* @import 'tachyons/src/_debug-children';
@import 'tachyons/src/_debug-grid'; */
/* Uncomment out the line below to help debug layout issues */
/* @import 'tachyons/src/_debug'; */
pre, .pre {
overflow-x: auto;
overflow-y: hidden;
overflow: scroll;
}
pre code {
display: block;
padding: 1.5em 1.5em;
white-space: pre;
font-size: .875rem;
line-height: 2;
}
pre {
background-color: #222;
color: #ddd;
white-space: pre;
-webkit-hyphens: none;
-ms-hyphens: none;
hyphens: none;
position: relative;
}
/* pagination.html: https://github.com/spf13/hugo/blob/master/tpl/tplimpl/template_embedded.go#L117 */
.pagination {
margin: 3rem 0;
}
.pagination li {
display: inline-block;
margin-right: .375rem;
font-size: .875rem;
margin-bottom: 2.5em;
}
.pagination li a {
padding: .5rem .625rem;
background-color: white;
color: #333;
border: 1px solid #ddd;
border-radius: 3px;
text-decoration: none;
}
.pagination li.disabled {
display: none;
}
.pagination li.active a:link,
.pagination li.active a:active,
.pagination li.active a:visited {
background-color: #ddd;
}
#TableOfContents ul li {
margin-bottom: 1em;
}
.facebook, .twitter, .instagram, .youtube, .github, .gitlab, .keybase, .linkedin, .medium, .mastodon, .slack, .stackoverflow {
fill: #BABABA;
}
.new-window {
opacity: 0;
display: inline-block;
vertical-align: top;
}
.link-transition:hover .new-window{
opacity: 1;
}
.facebook:hover {
fill: #3b5998;
}
.twitter:hover {
fill: #1da1f2;
}
.instagram:hover {
fill: #e1306c;
}
.youtube:hover {
fill: #cd201f;
}
.github:hover {
fill: #6cc644;
}
.gitlab:hover {
fill: #FC6D26;
}
.keybase:hover {
fill: #3d76ff;
}
.linkedin:hover {
fill: #0077b5
}
.medium:hover {
fill: #0077b5
}
.mastodon:hover {
fill: #3088d4;
}
.slack:hover {
fill: #E01E5A;
}
.stackoverflow:hover {
fill: #f48024;
}
/* Put your custom styles here and run `npm start` from the "src" directory on */
#TableOfContents ul li {
margin-bottom: 1em;
}
.lh-copy blockquote {
display: block;
font-size: .875em;
margin-left: 2rem;
margin-top: 2rem;
margin-bottom: 2rem;
border-left: 4px solid #ccc;
padding-left: 1rem;
}
a{
word-wrap: break-word;
}