You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
118 lines
3.1 KiB
118 lines
3.1 KiB
/*****************************************
|
|
|
|
CRUMBS HOME PAGE CSS
|
|
|
|
|
|
The colours used on the social media links are the same as defined for
|
|
the colour bar used as a divider between article bodies and the nav.
|
|
|
|
*****************************************/
|
|
|
|
|
|
/* Use different paddings for titles */
|
|
.title {
|
|
padding: 1em 0;
|
|
font-size: 2.5em;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.footer { padding: 1em 2em; }
|
|
|
|
/* Use a white navigation divider */
|
|
.nav { border-bottom: 1px solid white; }
|
|
|
|
/* Use a larger text on the front page */
|
|
p { font-size: 1.1em; }
|
|
|
|
|
|
/* Colour blocks are bigger on the front page */
|
|
.colour { height: calc((100vw - 2rem) / 15); }
|
|
|
|
/* Override link behaviour differently */
|
|
a, a:visited a:hover, a:active, a:link {
|
|
color: #BEBEBE;
|
|
text-decoration: none;
|
|
outline: 0;
|
|
}
|
|
|
|
.home-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/*** Social media definitions ***/
|
|
|
|
.icons {
|
|
max-width: 600px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-content: center;
|
|
align-self: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
|
|
.icons h1 {
|
|
font-family: Inconsolata;
|
|
font-size: 42px;
|
|
line-height: 42px;
|
|
font-style: normal;
|
|
font-variant: normal;
|
|
}
|
|
|
|
.icons > a {
|
|
display: block;
|
|
font-family: Inconsolata;
|
|
font-size: 2.5em;
|
|
line-height: 1em;
|
|
width: 1em;
|
|
height: 1em;
|
|
padding: .5em;
|
|
margin: .1em;
|
|
box-shadow: 15px 15px 1px #111111;
|
|
border: #999999 1px solid;
|
|
background-color: #363636;
|
|
}
|
|
|
|
.icons > a > img { max-width: 1em; }
|
|
|
|
#wiggle:hover > .filter-brown { filter: brightness(0) saturate(100%) invert(49%) sepia(81%) saturate(350%) hue-rotate(332deg) brightness(83%) contrast(90%); }
|
|
#wiggle:hover > .filter-lila { filter: brightness(0) saturate(100%) invert(90%) sepia(83%) saturate(5521%) hue-rotate(209deg) brightness(84%) contrast(84%); }
|
|
#wiggle:hover > .filter-yellow { filter: brightness(0) saturate(100%) invert(98%) sepia(40%) saturate(2156%) hue-rotate(325deg) brightness(92%) contrast(97%); }
|
|
|
|
.hblue:hover { color: #6997c8; }
|
|
.hbrown:hover { color: #be6b49; }
|
|
.hgreen:hover { color: #99cb9b; }
|
|
.hlila:hover { color: #ca98c9; }
|
|
.horange:hover { color: #f6915f; }
|
|
.hred:hover { color: #ef787b; }
|
|
.hteal:hover { color: #6ccaca; }
|
|
.hyellow:hover { color: #e7d853; }
|
|
|
|
#wiggle { font-family: 'spacekookie'; }
|
|
|
|
#wiggle:hover {
|
|
animation: .15s wiggle ease infinite;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Tone down the animation to avoid vestibular motion triggers like scaling or panning large objects. */
|
|
@media (prefers-reduced-motion) {
|
|
#wiggle:hover { animation: none; }
|
|
}
|
|
|
|
|
|
#email:hover, #email:focus { color: #6ccaca; }
|
|
|
|
@keyframes wiggle {
|
|
0% { transform: translate(0em, 0em); }
|
|
12.5% { transform: translate(.025em, -.0525em) rotateZ(2deg); }
|
|
25% { transform: translate(.125em, 0em) rotateZ(2deg); }
|
|
37.5% { transform: translate(.025em, .025em) rotateZ(-2deg); }
|
|
50% { transform: translate(0em, 0em) rotateZ(-2deg); }
|
|
62.5% { transform: translate(-.025em, -.0525em) rotateZ(-2deg); }
|
|
75% { transform: translate(-.125em, 0em) rotateZ(-2deg); }
|
|
87.5% { transform: translate(-.1em, .1em) rotateZ(2deg); }
|
|
100% { transform: translate(0em, 0em) rotateZ(2deg); }
|
|
}
|
|
|
|
|