142 lines
No EOL
2.2 KiB
CSS
142 lines
No EOL
2.2 KiB
CSS
:root {
|
|
--c-primary: #ff5500; /* Replace #yourColor with your desired color */
|
|
}
|
|
|
|
/* https://coolors.co/palette/5f0f40-9a031e-fb8b24-e36414-0f4c5c */
|
|
|
|
[class*='--food'] {
|
|
--color: #136f63;
|
|
}
|
|
[class*='--poop'] {
|
|
--color: #78290f;
|
|
}
|
|
[class*='--asleep'] {
|
|
--color: #032b43;
|
|
}
|
|
[class*='--awake'] {
|
|
--color: #ffba08;
|
|
}
|
|
[class*='--diaper'] {
|
|
--color: #3f88c5;
|
|
}
|
|
[class*='--spitup'] {
|
|
--color: #7f8b96;
|
|
}
|
|
/* d00000 ff7d00 */
|
|
|
|
body {
|
|
background-color: var(--c-bkg);
|
|
}
|
|
|
|
html[data-theme='light'] body {
|
|
--c-border: #e9e9e9;
|
|
--c-toggle: #00464b;
|
|
--c-zebra: #ececec;
|
|
--c-bkg: #f2f0ef;
|
|
}
|
|
|
|
html[data-theme='dark'] body {
|
|
--c-border: #2b2b2b;
|
|
--c-toggle: #ffe600;
|
|
--c-zebra: #ececec11;
|
|
--c-bkg: #181818;
|
|
}
|
|
|
|
|
|
a,
|
|
input[type='text']:focus,
|
|
input[type='email']:focus,
|
|
input[type='password']:focus,
|
|
select:focus,
|
|
textarea:focus {
|
|
color: var(--c-primary);
|
|
}
|
|
|
|
button,
|
|
input[type='submit'] {
|
|
--color: var(--c-primary);
|
|
}
|
|
|
|
button,
|
|
input[type='submit'],
|
|
button:focus,
|
|
input[type='submit']:focus {
|
|
background-color: var(--color);
|
|
border-color: var(--color);
|
|
transition: all .2s ease-in-out;
|
|
}
|
|
|
|
a {
|
|
transition: all .2s ease-in-out;
|
|
}
|
|
|
|
svg path {
|
|
transition: all .2s ease-in-out;
|
|
}
|
|
|
|
nav ul {
|
|
list-style: circle inside;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
list-style: none;
|
|
gap: 1em;
|
|
justify-content: end;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
nav ul li {
|
|
font-size: 2rem;
|
|
display: flex;
|
|
list-style: none;
|
|
}
|
|
|
|
header {
|
|
|
|
position: sticky;
|
|
top: 0;
|
|
background: var(--c-bkg);
|
|
z-index: 1;
|
|
margin: 0 -2rem;
|
|
padding: 2rem 2rem 0 2rem;
|
|
}
|
|
|
|
/* aside {
|
|
position: relative;
|
|
padding-top: 1rem;
|
|
display: block;
|
|
} */
|
|
|
|
/* aside::after {
|
|
content: "";
|
|
width: 100vw;
|
|
height: 50px;
|
|
position: fixed;
|
|
left: 0;
|
|
outline: 1px solid #ccc;
|
|
background-color: #eee;
|
|
z-index: -1;
|
|
} */
|
|
|
|
aside button {
|
|
margin-top: 1rem;
|
|
border-radius: 999px;
|
|
}
|
|
|
|
section {
|
|
margin-top: 4rem;
|
|
position: relative;
|
|
}
|
|
|
|
.badge {
|
|
background-color: var(--color);
|
|
display: inline-block;
|
|
padding: 0.35em .75em .25em .75em;
|
|
color: rgba(255, 255, 255, 0.75);
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
border-radius: 0.25rem;
|
|
font-size: 1rem;
|
|
line-height: 1;
|
|
min-width: 10ch;
|
|
text-align: center;
|
|
} |