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 */ }}