Damit im Menü die links, die nach außerhalb der site führen, mit einem Symbol versehen werden, habe ich den folgenden Code (CSS) in Publii unter Additional CSS eingefügt:
.external-link {
display: flex;
align-items: center; /* Zentriert die Items vertikal, falls nötig */
}
.external-link a {
flex: 0 1 auto; /* Erlaubt dem Link, zu schrumpfen und zu wachsen */
}
.external-link:after {
content: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1' stroke-linecap='round' stroke-linejoin='round' %3e%3cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3e%3c/path%3e%3cpolyline points='15 3 21 3 21 9'%3e%3c/polyline%3e%3cline x1='10' y1='14' x2='21' y2='3'%3e%3c/line%3e%3c/svg%3e");
flex: 0 0 auto;
/* Adjust scale as necessary */
transform: scale(0.6);
margin-left: 4px;
}
Da das mobile Menu anders gebaut ist, bekommt es ein egenes CSS:
@media (max-width: 600px) {
.mobile-menu li a {padding-right: 0px;}
.external-link:after {
margin-left: 4px; /* Reduziert den Abstand in der Mobile-Ansicht */
transform: scale(0.5); /* Macht das SVG kleiner auf Mobilgeräten */
}
}