1
0
Fork 0
blog/src/components/templates/Post/Actions.module.css

60 lines
1.1 KiB
CSS

.actions {
composes: breakout from '../../Layout.module.css';
margin-top: calc(var(--spacer) * 2);
margin-bottom: calc(var(--spacer) * 2);
background: var(--box-background-color);
padding: var(--spacer);
border-radius: var(--border-radius);
display: grid;
}
@media (min-width: 40rem) {
.actions {
grid-template-columns: repeat(3, 1fr);
}
}
.link {
transition: 0.2s ease-out;
color: var(--link-color);
}
.actionTitle {
font-size: var(--font-size-base);
color: var(--text-color);
margin: 0;
transition: 0.2s ease-out;
}
.actionText {
font-size: var(--font-size-small);
color: var(--text-color-light);
margin-bottom: 0;
transition: color 0.2s ease-out;
}
.action {
display: block;
margin: 0;
padding-top: var(--spacer);
padding-bottom: var(--spacer);
padding-left: calc(var(--spacer) * 1.5);
padding-right: calc(var(--spacer) / 2);
position: relative;
text-align: left;
}
.action:hover,
.action:focus {
cursor: pointer;
}
.action svg {
width: 20px;
height: 20px;
position: absolute;
left: calc(var(--spacer) / 1.5);
top: calc(var(--spacer) / 1.05);
stroke: var(--text-color-light);
}