forked from rolsf/rolsf.xyz
140 lines
2.6 KiB
CSS
140 lines
2.6 KiB
CSS
@font-face {
|
|
font-family: "Manrope";
|
|
src: url("Manrope[wght].woff2") format('woff2');
|
|
font-weight: 125 950;
|
|
font-stretch: 75% 125%;
|
|
font-style: normal;
|
|
}
|
|
:root {
|
|
--bg-1: #dad4c9;
|
|
--bg: #eeeeee;
|
|
--fg-1: hsl(154, 0%, 40%);
|
|
--fg: #1c2420;
|
|
|
|
--space-unit: 1rem;
|
|
--space-xxs: calc(0.25 * var(--space-unit));
|
|
--space-xs: calc(0.5 * var(--space-unit));
|
|
--space-sm: calc(0.75 * var(--space-unit));
|
|
--space-md: calc(1.25 * var(--space-unit));
|
|
--space-lg: calc(2 * var(--space-unit));
|
|
--space-xl: calc(3.25 * var(--space-unit));
|
|
--space-xxl: calc(5.25 * var(--space-unit));
|
|
|
|
--h1: 3.052rem;
|
|
--h2: 2.441rem;
|
|
--h3: 1.953rem;
|
|
--h4: 1.563rem;
|
|
--h5: 1.25rem;
|
|
--small: 0.8rem;
|
|
}
|
|
|
|
body, html {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-size: 100%;
|
|
background-color: var(--bg);
|
|
color: var(--fg);
|
|
font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
|
}
|
|
|
|
main {
|
|
margin: 30px auto;
|
|
padding-left: 28px;
|
|
padding-right: 28px;
|
|
width: clamp(200px, 100%, 800px);
|
|
}
|
|
|
|
/* text */
|
|
|
|
.h1 { font-size: var(--h1); }
|
|
.h2 { font-size: var(--h2); }
|
|
.h3 { font-size: var(--h3); }
|
|
.h4 { font-size: var(--h4); }
|
|
.h5 { font-size: var(--h5); }
|
|
.small { font-size: var(--small); }
|
|
|
|
/* card */
|
|
|
|
.card-accent {
|
|
padding: var(--space-md);
|
|
margin: var(--space-md);
|
|
margin-top: 0;
|
|
background-color: var(--bg-1);
|
|
border-radius: var(--space-md);
|
|
}
|
|
|
|
/* post */
|
|
|
|
.post-link {
|
|
display: block;
|
|
text-decoration: none;
|
|
color: currentColor;
|
|
margin-bottom: var(--space-lg);
|
|
}
|
|
|
|
.post-link .user {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.post-link .date {
|
|
font-weight: normal;
|
|
color: var(--fg-1);
|
|
}
|
|
|
|
.post-link .title {
|
|
display: block;
|
|
font-size: var(--h4);
|
|
line-height: 0.9;
|
|
}
|
|
|
|
.post-link .title::after {
|
|
display: inline;
|
|
content: " ->";
|
|
color: var(--fg-1);
|
|
}
|
|
|
|
/* fortune */
|
|
|
|
@keyframes fortune-drop {
|
|
from {
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transform: translateY(-12px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.fortune {
|
|
animation: fortune-drop 0.3s cubic-bezier(0.46,0.03,0.52,0.96) forwards;
|
|
display: block;
|
|
margin-bottom: var(--space-lg);
|
|
font-size: var(--h5);
|
|
}
|
|
|
|
#fortune-name {
|
|
color: var(--fg-1);
|
|
}
|
|
|
|
/* all */
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
p {margin-bottom: 1rem;}
|
|
|
|
h1, h2, h3, h4, h5 {
|
|
margin: var(--space-sm) 0 var(--space-xs);
|
|
font-family: 'Manrope', sans-serif;
|
|
font-weight: 400;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
h1 {
|
|
margin-top: 0;
|
|
font-size: var(--h1);
|
|
}
|