feat: improve global responsivity

This commit is contained in:
Alexis Fourmaux 2025-05-17 00:37:16 +02:00
parent 4a5ee3cd67
commit 9d15a6ebd6
7 changed files with 101 additions and 21 deletions

View file

@ -1,13 +1,26 @@
@use '../constants' as *;
@mixin callout-customization($type, $color, $text-icon) {
&[type="#{$type}"] {
&>.callout-content {
border-color: var(#{$color});
background-color: color-mix(in srgb, var(#{$color}), transparent 90%);
@media only screen and (max-width: $smartphone) {
&::before {
content: $text-icon;
color: var(#{$color});
float: left;
margin-right: .5rem;
}
}
}
&::before {
content: $text-icon;
color: var(#{$color});
@media only screen and (min-width: $smartphone) {
&::before {
content: $text-icon;
color: var(#{$color});
}
}
}
}
@ -33,9 +46,12 @@
text-align: initial;
vertical-align: middle;
display: inline-block;
width: 85%;
padding: 1.25rem;
@media only screen and (min-width: $smartphone) {
width: 85%;
}
&>p {
margin: 0;
}