Take-away: Befunde aus der Prüfung behoben
- Restaurant-Karte sitzt rechts über dem Pin (Zentrierung wurde vom Reveal überschrieben), Spitze zeigt auf den Pin, Überschrift bleibt frei - Liefer-Karte rechts neben dem Zuhause-Symbol, der Weg kommt von oben aufs Haus statt hinter der Karte durch; keine Überschneidung mit dem Einleitungstext - Karte blendet an allen Kanten weich aus (keine geraden Schnittkanten mehr), Straßenname Merkurstraße östlich vom Pin, damit der Weg ihn nicht überdeckt - Weißer Weg-Schimmer wird mit aufgedeckt, Hahn kippt nicht mehr um und blendet am Anfang/Ende weich aus - OpenStreetMap-Hinweis sichtbar in der Bühne, dunkler, nach den Karten in der Lesereihenfolge - Untereinander-Ansicht schon bis 1000 px, Kartenausschnitt volle Breite; Neuaufbau nach Größenänderung verzögert Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
rootandClaude Opus 5.5 committed
1 parent
0364ddc793
commit
e791d0312d
4 files changed
+59
-45
No files matched your search
+37
-28
@@ -731,11 +731,11 @@ body.menu-open .menu-panel { transform: scale(1); opacity: 1; visibility: visibl
|
||||
|
||||
/* Bühne: Karte rechts (läuft aus dem Bild), roter Pin am Restaurant, Weg nach links zum Zuhause */
|
||||
.tstage {
|
||||
--mw: clamp(1050px, 88vw, 1650px); /* Breite der Karte; Restaurant liegt bei 40 % / 62 % */
|
||||
--mw: clamp(1050px, 88vw, 1500px); /* Breite der Karte; Restaurant liegt bei 40 % / 62 % */
|
||||
--pin-x: 70%; --pin-y: 50%; /* Restaurant auf der Bühne */
|
||||
--home-x: 8%; --home-y: 92%;
|
||||
--home-x: 6%; --home-y: 84%;
|
||||
/* Bühne zieht sich rechts neben die Überschrift hoch, links bleibt der Text frei */
|
||||
position: relative; height: clamp(600px, 50vw, 760px); margin-top: clamp(-320px, -21vw, -200px);
|
||||
position: relative; height: clamp(600px, 50vw, 760px); margin-top: clamp(-320px, calc(-40vw + 260px), -120px);
|
||||
}
|
||||
.tmap {
|
||||
position: absolute; z-index: 0; pointer-events: none;
|
||||
@@ -744,17 +744,20 @@ body.menu-open .menu-panel { transform: scale(1); opacity: 1; visibility: visibl
|
||||
}
|
||||
.tmap__img {
|
||||
width: 100%; height: 100%;
|
||||
-webkit-mask: radial-gradient(ellipse 58% 72% at 50% 56%, #000 45%, rgba(0, 0, 0, .6) 72%, transparent 100%);
|
||||
mask: radial-gradient(ellipse 58% 72% at 50% 56%, #000 45%, rgba(0, 0, 0, .6) 72%, transparent 100%);
|
||||
/* weich ausblenden: an allen vier Kanten auf 0, dazu ein runder Verlauf, damit es nicht nach Rechteck aussieht */
|
||||
-webkit-mask: radial-gradient(ellipse 62% 70% at 50% 58%, #000 40%, transparent 100%), linear-gradient(90deg, transparent, #000 24%, #000 88%, transparent), linear-gradient(transparent, #000 30%, #000 76%, transparent);
|
||||
-webkit-mask-composite: source-in, source-in;
|
||||
mask: radial-gradient(ellipse 62% 70% at 50% 58%, #000 40%, transparent 100%), linear-gradient(90deg, transparent, #000 24%, #000 88%, transparent), linear-gradient(transparent, #000 30%, #000 76%, transparent);
|
||||
mask-composite: intersect;
|
||||
}
|
||||
.tmap__credit { position: absolute; z-index: 2; right: 0; bottom: calc(-1 * clamp(3.5rem, 8vw, 7rem)); font-size: .7rem; color: rgba(23, 11, 9, .55); text-decoration: none; }
|
||||
.tmap__credit { position: absolute; z-index: 2; right: 0; bottom: 0; padding: .4rem .2rem; font-size: .72rem; color: rgba(23, 11, 9, .85); text-decoration: none; }
|
||||
.tmap__credit:hover { text-decoration: underline; }
|
||||
.troute { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
|
||||
.troute path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
|
||||
.troute__glow { stroke: rgba(255, 255, 255, .55); stroke-width: 14; }
|
||||
.troute__line { stroke: var(--red); stroke-width: 6; stroke-dasharray: .1 14; }
|
||||
.troute__reveal { stroke: #fff; stroke-width: 30; }
|
||||
.troute__rider { position: absolute; left: 0; top: 0; z-index: 2; width: clamp(42px, 3.6vw, 56px); pointer-events: none; will-change: transform; }
|
||||
.troute__rider { position: absolute; left: 0; top: 0; z-index: 3; visibility: hidden; width: clamp(42px, 3.6vw, 56px); pointer-events: none; will-change: transform; }
|
||||
|
||||
.tspot { position: absolute; z-index: 2; width: 0; height: 0; }
|
||||
.tspot--shop { left: var(--pin-x); top: var(--pin-y); }
|
||||
@@ -792,11 +795,11 @@ body.menu-open .menu-panel { transform: scale(1); opacity: 1; visibility: visibl
|
||||
padding: clamp(1.1rem, 2vw, 1.6rem);
|
||||
box-shadow: 8px 8px 0 var(--ink), 14px 24px 34px rgba(90, 50, 0, .3);
|
||||
}
|
||||
.tspot--shop .tcard { left: 0; translate: -50% 0; }
|
||||
.tspot--home .tcard { left: -44px; bottom: 74px; }
|
||||
.tspot--shop .tcard { left: -64px; } /* Karte rechts über dem Pin: links bleibt Platz für die Überschrift */
|
||||
.tspot--home .tcard { left: 62px; bottom: auto; top: -96px; } /* rechts neben dem Zuhause-Symbol */
|
||||
.tcard::after { content: ""; position: absolute; bottom: -14px; width: 22px; height: 22px; background: inherit; border: solid var(--ink); border-width: 0 3px 3px 0; transform: rotate(45deg); background-color: #fdf4e3; }
|
||||
.tspot--shop .tcard::after { left: calc(50% - 11px); }
|
||||
.tspot--home .tcard::after { left: 33px; }
|
||||
.tspot--shop .tcard::after { left: 53px; }
|
||||
.tspot--home .tcard::after { left: -14px; bottom: auto; top: 84px; transform: rotate(135deg); }
|
||||
.tcard__kicker { display: inline-flex; align-items: center; gap: .4em; font-family: var(--f-mono); font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; color: var(--red-deep); }
|
||||
.tcard__kicker svg { width: 1.1em; height: 1.1em; }
|
||||
.tcard h3 { font-family: var(--f-sticker); text-transform: uppercase; font-weight: 400; font-size: clamp(1.3rem, 1rem + 1vw, 1.8rem); line-height: 1; margin: .45rem 0 .5rem; }
|
||||
@@ -1187,6 +1190,29 @@ html.js.anim .juggle { visibility: hidden; }
|
||||
}
|
||||
|
||||
/* ============ Responsive ============ */
|
||||
/* Take-away: bis 1000 px untereinander (Kartenausschnitt mit Pin, darunter die beiden Karten) */
|
||||
@media (max-width: 1000px) {
|
||||
.tstage { height: auto; display: flex; flex-direction: column; gap: 2.4rem; margin-top: 1.5rem; }
|
||||
.tmap, .troute, .troute__rider { display: none; }
|
||||
.tspot { position: relative; left: auto; top: auto; width: auto; height: auto; }
|
||||
.tspot__minimap {
|
||||
display: block; position: relative; height: 300px; width: 100vw; margin-left: calc(50% - 50vw); overflow: hidden;
|
||||
-webkit-mask: radial-gradient(ellipse 70% 50% at 50% 50%, #000 40%, transparent 100%); mask: radial-gradient(ellipse 70% 50% at 50% 50%, #000 40%, transparent 100%);
|
||||
}
|
||||
.tspot__minimap img { position: absolute; width: 900px; max-width: none; left: calc(50% - 360px); top: calc(50% - 430px); }
|
||||
.tspot--shop .tpin { left: 50%; top: 150px; }
|
||||
.tcard, .tspot--shop .tcard, .tspot--home .tcard { position: relative; left: auto; bottom: auto; width: auto; translate: none; }
|
||||
.tspot--shop .tcard { margin-top: -2.2rem; }
|
||||
.tcard::after, .tspot--shop .tcard::after, .tspot--home .tcard::after { bottom: auto; top: -14px; left: calc(50% - 11px); transform: rotate(-135deg); }
|
||||
.tspot--home { display: flex; flex-direction: column; align-items: center; }
|
||||
.tspot--home::before { content: ""; height: 70px; border-left: 6px dotted var(--red); margin: -1rem 0 1.2rem; }
|
||||
.tapp { position: relative; left: auto; top: auto; }
|
||||
.tspot--home .tcard { margin-top: 1.6rem; align-self: stretch; top: auto; }
|
||||
.tspot--shop, .tspot--home { align-self: center; width: min(100%, 560px); }
|
||||
.tspot--shop .tcard { left: auto; }
|
||||
.tmap__credit { position: static; order: 9; align-self: flex-end; margin-top: -1rem; }
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.sauce-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 3.5rem; }
|
||||
.footer__grid { grid-template-columns: 1fr 1fr; }
|
||||
@@ -1228,23 +1254,6 @@ html.js.anim .juggle { visibility: hidden; }
|
||||
.classic-wings__prices { justify-content: flex-start; }
|
||||
.fight-card-row { grid-template-columns: 1fr; }
|
||||
.vs { justify-self: center; margin: -.5rem 0; }
|
||||
.tstage { height: auto; display: flex; flex-direction: column; gap: 2.4rem; margin-top: 1.5rem; }
|
||||
.tmap, .troute, .troute__rider { display: none; }
|
||||
.tmap__credit { position: static; order: 9; align-self: flex-end; margin-top: -1rem; }
|
||||
.tspot { position: relative; left: auto; top: auto; width: auto; height: auto; }
|
||||
.tspot__minimap {
|
||||
display: block; position: relative; height: 300px; margin: 0 calc(-1 * var(--gutter)); overflow: hidden;
|
||||
-webkit-mask: radial-gradient(ellipse 70% 50% at 50% 50%, #000 40%, transparent 100%); mask: radial-gradient(ellipse 70% 50% at 50% 50%, #000 40%, transparent 100%);
|
||||
}
|
||||
.tspot__minimap img { position: absolute; width: 900px; max-width: none; left: calc(50% - 360px); top: calc(50% - 430px); }
|
||||
.tspot--shop .tpin { left: 50%; top: 150px; }
|
||||
.tcard, .tspot--shop .tcard, .tspot--home .tcard { position: relative; left: auto; bottom: auto; width: auto; translate: none; }
|
||||
.tspot--shop .tcard { margin-top: -2.2rem; }
|
||||
.tcard::after, .tspot--shop .tcard::after, .tspot--home .tcard::after { bottom: auto; top: -14px; left: calc(50% - 11px); transform: rotate(-135deg); }
|
||||
.tspot--home { display: flex; flex-direction: column; align-items: center; }
|
||||
.tspot--home::before { content: ""; height: 70px; border-left: 6px dotted var(--red); margin: -1rem 0 1.2rem; }
|
||||
.tapp { position: relative; left: auto; top: auto; }
|
||||
.tspot--home .tcard { margin-top: 1.6rem; align-self: stretch; }
|
||||
.orderbar { display: flex; }
|
||||
.cta__rooster { width: 46vw; margin-top: -.5rem; }
|
||||
.footer { padding-bottom: 5.5rem; }
|
||||
|
||||
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 1080" fill="none" stroke-linecap="round" stroke-linejoin="round"><defs><path id="s0" d="M141 745L499 674 533 666 555 658 576 646 595 632 737 496 746 491"/><path id="s2" d="M1119 892L1162 987 1167 991 1175 991 1241 980 1297 965"/><path id="s5" d="M832 928L900 916 909 924 928 926 1109 896 1119 892"/></defs><path fill="#ffd654" stroke="none" d="M118 167L112 168 102 182 107 190 141 191 177 149 142 122 118 167Z M737 787L759 839 730 852 763 923 768 922 769 925 745 928 635 910 585 905 574 901 565 894 505 893 505 901 377 892 327 891 327 887 260 886 261 880 307 870 307 859 424 847 550 830 605 808 731 765 741 783 737 787Z M371 466L334 509 338 527 384 518 382 508 543 476 535 449 442 436 405 449 371 466Z M1406 486L1485 446 1516 501 1433 545 1406 486Z M932 185L876 218 868 226 932 225 932 185Z M1026 254L933 252 934 184 1011 141 1011 171 1015 171 1029 171 1026 254Z M1423 635L1394 643 1391 650 1407 701 1414 705 1445 695 1448 686 1430 639 1423 635Z M1214 91L1177 118 1190 139 1226 106 1214 91Z M782 1162L787 1164 785 1171 741 1178 719 1179 703 1182 690 1187 506 1215 505 1210 522 1208 537 1202 782 1162Z M803 1169L881 1156 922 1144 1030 1124 1054 1114 1007 1104 1003 1114 994 1118 935 1129 905 1123 885 1136 858 1141 845 1149 815 1155 798 1153 797 1159 803 1169Z M492 1212L493 1218 283 1250 282 1245 492 1212Z M1046 1133L1104 1108 1118 1105 1136 1105 1146 1108 1096 1123 1046 1133Z M821 1154L824 1130 856 1125 857 1112 905 1123 885 1136 858 1141 845 1149 821 1154Z M940 709L994 684 1031 762 977 787 940 709Z M992 797L1043 774 1082 861 1031 884 992 797Z M940 773L985 867 931 893 886 798 940 773Z M385 1214L395 1201 401 1204 403 1216 385 1219 385 1214Z M734 1059L768 1054 771 1069 737 1075 734 1072 732 1063 734 1059Z M776 1106L780 1132 791 1130 796 1091 759 1097 761 1107 776 1106Z M476 1187L403 1199 400 1176 471 1083 529 1034 571 1002 581 1014 568 1025 579 1042 559 1054 562 1057 557 1060 564 1076 562 1076 567 1085 565 1086 567 1090 557 1095 507 1134 468 1141 476 1187Z M709 1035L746 1027 774 1024 758 991 770 988 761 974 754 969 717 963 686 964 683 967 690 1006 643 1021 636 965 593 985 602 1001 590 1007 603 1036 584 1045 577 1055 577 1068 583 1084 629 1059 709 1035Z M1069 1099L1064 1070 1062 1069 995 1079 998 1069 983 1064 982 1066 973 1063 974 1061 934 1049 931 1058 915 1054 917 1049 900 1045 900 1047 837 1034 841 1007 871 1014 879 982 921 994 1040 1035 1149 1083 1069 1099Z M857 1112L935 1129 943 1105 922 1100 920 1109 886 1101 889 1091 861 1085 857 1112Z M279 1219L298 1194 400 1176 471 1083 529 1034 571 1002 581 1014 584 1010 602 1001 593 985 636 965 636 945 577 959 579 982 528 1018 482 1059 435 1105 410 1138 388 1159 365 1168 340 1173 335 1157 272 1169 279 1219Z M649 1003L645 989 674 979 679 993 649 1003Z M636 965L643 1021 690 1006 683 967 636 965Z M1048 1010L1113 1001 1113 995 1133 995 1130 1030 1156 1032 1176 1076 1049 1019 1048 1010Z M852 951L892 945 891 940 923 935 927 957 954 953 956 962 1018 951 1016 941 1087 929 1093 968 1100 967 1102 983 1112 982 1113 1001 1048 1010 1049 1019 974 989 917 969 852 951Z M1052 1011L1100 1005 1100 1029 1052 1016 1052 1011Z M1321 964L1326 978 1380 958 1377 951 1418 935 1428 926 1321 964Z M793 349L781 349 781 353 779 353 778 381 758 387 729 387 731 376 744 358 864 228 886 228 886 242 873 242 873 247 871 247 871 274 851 280 838 280 838 287 836 287 838 311 836 311 835 350 793 349Z M1097 119L1073 101 1106 72 1117 74 1111 103 1116 117 1157 125 1168 117 1175 75 1199 79 1204 53 1198 52 1206 8 1224 11 1221 27 1263 35 1251 92 1226 106 1190 139 1172 158 1096 157 1097 119Z M1306 115L1327 128 1338 119 1348 108 1350 114 1348 125 1341 134 1331 141 1302 119 1306 115Z M1296 279L1284 271 1269 287 1250 302 1261 315 1296 279Z M1340 508L1375 493 1380 508 1362 507 1342 511 1340 508Z M1085 634L1023 663 1020 668 1043 717 1110 683 1085 634Z M833 908L840 906 843 916 836 918 833 908Z M879 918L833 925 814 907 813 886 804 876 782 826 788 824 773 788 804 775 836 754 853 786 805 810 808 823 804 825 820 876 834 873 839 886 835 887 839 905 843 903 847 918 864 914 861 906 871 903 879 918Z M798 1084L727 1095 717 1087 714 1077 652 1095 613 1114 576 1137 534 1170 522 1190 544 1186 544 1175 615 1164 612 1125 631 1121 639 1165 659 1161 653 1118 671 1115 679 1163 700 1159 693 1111 713 1109 720 1159 732 1157 732 1151 740 1149 733 1104 750 1101 761 1158 790 1154 798 1084Z M808 1074L861 1082 926 1100 924 1119 852 1103 847 1096 807 1105 808 1074Z M912 929L899 919 832 931 819 916 801 917 793 922 773 926 850 948 889 943 889 939 913 935 912 929Z M924 922L905 910 885 912 915 904 924 922Z M698 945L787 963 798 984 785 999 763 969 703 953 698 945Z M773 1067L779 1067 782 1063 783 1049 770 1049 729 1055 730 1059 771 1053 773 1067Z M1152 642L1172 684 1188 676 1170 635 1152 642Z M-963 3113L-1005 3135 -921 3127 -846 3117 -797 3107 -750 3090 -635 3032 -446 2928 -361 2899 -282 2882 -246 2867 -225 2856 53 2582 131 2511 227 2461 416 2384 557 2320 591 2301 642 2265 664 2246 788 2102 830 2066 892 2027 991 Line truncated
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 1080" fill="none" stroke-linecap="round" stroke-linejoin="round"><defs><path id="s0" d="M580 644L595 632 737 496 746 491"/><path id="s2" d="M1119 892L1162 987 1167 991 1175 991 1241 980 1297 965"/><path id="s5" d="M832 928L900 916 909 924 928 926 1109 896 1119 892"/></defs><path fill="#ffd654" stroke="none" d="M118 167L112 168 102 182 107 190 141 191 177 149 142 122 118 167Z M737 787L759 839 730 852 763 923 768 922 769 925 745 928 635 910 585 905 574 901 565 894 505 893 505 901 377 892 327 891 327 887 260 886 261 880 307 870 307 859 424 847 550 830 605 808 731 765 741 783 737 787Z M371 466L334 509 338 527 384 518 382 508 543 476 535 449 442 436 405 449 371 466Z M1406 486L1485 446 1516 501 1433 545 1406 486Z M932 185L876 218 868 226 932 225 932 185Z M1026 254L933 252 934 184 1011 141 1011 171 1015 171 1029 171 1026 254Z M1423 635L1394 643 1391 650 1407 701 1414 705 1445 695 1448 686 1430 639 1423 635Z M1214 91L1177 118 1190 139 1226 106 1214 91Z M782 1162L787 1164 785 1171 741 1178 719 1179 703 1182 690 1187 506 1215 505 1210 522 1208 537 1202 782 1162Z M803 1169L881 1156 922 1144 1030 1124 1054 1114 1007 1104 1003 1114 994 1118 935 1129 905 1123 885 1136 858 1141 845 1149 815 1155 798 1153 797 1159 803 1169Z M492 1212L493 1218 283 1250 282 1245 492 1212Z M1046 1133L1104 1108 1118 1105 1136 1105 1146 1108 1096 1123 1046 1133Z M821 1154L824 1130 856 1125 857 1112 905 1123 885 1136 858 1141 845 1149 821 1154Z M940 709L994 684 1031 762 977 787 940 709Z M992 797L1043 774 1082 861 1031 884 992 797Z M940 773L985 867 931 893 886 798 940 773Z M385 1214L395 1201 401 1204 403 1216 385 1219 385 1214Z M734 1059L768 1054 771 1069 737 1075 734 1072 732 1063 734 1059Z M776 1106L780 1132 791 1130 796 1091 759 1097 761 1107 776 1106Z M476 1187L403 1199 400 1176 471 1083 529 1034 571 1002 581 1014 568 1025 579 1042 559 1054 562 1057 557 1060 564 1076 562 1076 567 1085 565 1086 567 1090 557 1095 507 1134 468 1141 476 1187Z M709 1035L746 1027 774 1024 758 991 770 988 761 974 754 969 717 963 686 964 683 967 690 1006 643 1021 636 965 593 985 602 1001 590 1007 603 1036 584 1045 577 1055 577 1068 583 1084 629 1059 709 1035Z M1069 1099L1064 1070 1062 1069 995 1079 998 1069 983 1064 982 1066 973 1063 974 1061 934 1049 931 1058 915 1054 917 1049 900 1045 900 1047 837 1034 841 1007 871 1014 879 982 921 994 1040 1035 1149 1083 1069 1099Z M857 1112L935 1129 943 1105 922 1100 920 1109 886 1101 889 1091 861 1085 857 1112Z M279 1219L298 1194 400 1176 471 1083 529 1034 571 1002 581 1014 584 1010 602 1001 593 985 636 965 636 945 577 959 579 982 528 1018 482 1059 435 1105 410 1138 388 1159 365 1168 340 1173 335 1157 272 1169 279 1219Z M649 1003L645 989 674 979 679 993 649 1003Z M636 965L643 1021 690 1006 683 967 636 965Z M1048 1010L1113 1001 1113 995 1133 995 1130 1030 1156 1032 1176 1076 1049 1019 1048 1010Z M852 951L892 945 891 940 923 935 927 957 954 953 956 962 1018 951 1016 941 1087 929 1093 968 1100 967 1102 983 1112 982 1113 1001 1048 1010 1049 1019 974 989 917 969 852 951Z M1052 1011L1100 1005 1100 1029 1052 1016 1052 1011Z M1321 964L1326 978 1380 958 1377 951 1418 935 1428 926 1321 964Z M793 349L781 349 781 353 779 353 778 381 758 387 729 387 731 376 744 358 864 228 886 228 886 242 873 242 873 247 871 247 871 274 851 280 838 280 838 287 836 287 838 311 836 311 835 350 793 349Z M1097 119L1073 101 1106 72 1117 74 1111 103 1116 117 1157 125 1168 117 1175 75 1199 79 1204 53 1198 52 1206 8 1224 11 1221 27 1263 35 1251 92 1226 106 1190 139 1172 158 1096 157 1097 119Z M1306 115L1327 128 1338 119 1348 108 1350 114 1348 125 1341 134 1331 141 1302 119 1306 115Z M1296 279L1284 271 1269 287 1250 302 1261 315 1296 279Z M1340 508L1375 493 1380 508 1362 507 1342 511 1340 508Z M1085 634L1023 663 1020 668 1043 717 1110 683 1085 634Z M833 908L840 906 843 916 836 918 833 908Z M879 918L833 925 814 907 813 886 804 876 782 826 788 824 773 788 804 775 836 754 853 786 805 810 808 823 804 825 820 876 834 873 839 886 835 887 839 905 843 903 847 918 864 914 861 906 871 903 879 918Z M798 1084L727 1095 717 1087 714 1077 652 1095 613 1114 576 1137 534 1170 522 1190 544 1186 544 1175 615 1164 612 1125 631 1121 639 1165 659 1161 653 1118 671 1115 679 1163 700 1159 693 1111 713 1109 720 1159 732 1157 732 1151 740 1149 733 1104 750 1101 761 1158 790 1154 798 1084Z M808 1074L861 1082 926 1100 924 1119 852 1103 847 1096 807 1105 808 1074Z M912 929L899 919 832 931 819 916 801 917 793 922 773 926 850 948 889 943 889 939 913 935 912 929Z M924 922L905 910 885 912 915 904 924 922Z M698 945L787 963 798 984 785 999 763 969 703 953 698 945Z M773 1067L779 1067 782 1063 783 1049 770 1049 729 1055 730 1059 771 1053 773 1067Z M1152 642L1172 684 1188 676 1170 635 1152 642Z M-963 3113L-1005 3135 -921 3127 -846 3117 -797 3107 -750 3090 -635 3032 -446 2928 -361 2899 -282 2882 -246 2867 -225 2856 53 2582 131 2511 227 2461 416 2384 557 2320 591 2301 642 2265 664 2246 788 2102 830 2066 892 2027 991 1984 1019 1969 1096 1916 1342 17Line truncated
|
||||
|
Before Width: | Height: | Size: 117 KiB After Width: | Height: | Size: 117 KiB |
+19
-14
@@ -404,11 +404,14 @@
|
||||
if (!map || window.getComputedStyle(map).display === 'none') return null;
|
||||
var mx = map.offsetLeft, my = map.offsetTop, mw = map.offsetWidth, mh = map.offsetHeight;
|
||||
var pts = STREET.map(function (p) { return [mx + p[0] / 100 * mw, my + p[1] / 100 * mh]; });
|
||||
var end = [home.offsetLeft, home.offsetTop], last = pts[pts.length - 1];
|
||||
// Ziel: Oberkante des Zuhause-Symbols; die Liefer-Karte sitzt rechts daneben, der Weg kommt von oben
|
||||
var end = [home.offsetLeft, home.offsetTop - 46], last = pts[pts.length - 1];
|
||||
var d = 'M' + pts.map(function (p) { return p[0].toFixed(1) + ' ' + p[1].toFixed(1); }).join(' L');
|
||||
// Bogen nach unten-links, unter der Liefer-Karte hindurch, und von rechts zum Zuhause
|
||||
d += ' C' + (last[0] - 40).toFixed(1) + ' ' + (last[1] + 160).toFixed(1) + ' ' +
|
||||
(end[0] + 220).toFixed(1) + ' ' + (end[1] + 10).toFixed(1) + ' ' + end[0].toFixed(1) + ' ' + end[1].toFixed(1);
|
||||
// Bogen nach links über der Liefer-Karte, dann von oben auf das Zuhause
|
||||
var card = $('.tcard', home), cardTop = home.offsetTop + card.offsetTop;
|
||||
var c1y = Math.min(last[1] + 20, cardTop - 60);
|
||||
d += ' C' + (last[0] - (last[0] - end[0]) * .5).toFixed(1) + ' ' + c1y.toFixed(1) + ' ' +
|
||||
end[0].toFixed(1) + ' ' + Math.min(c1y, end[1] - 120).toFixed(1) + ' ' + end[0].toFixed(1) + ' ' + end[1].toFixed(1);
|
||||
$$('path', svg).forEach(function (p) { p.setAttribute('d', d); });
|
||||
var line = $('.troute__line', svg), reveal = $('.troute__reveal', svg);
|
||||
var len = line.getTotalLength();
|
||||
@@ -422,17 +425,20 @@
|
||||
var pt = routeState.path.getPointAtLength(routeState.len * at);
|
||||
var ahead = routeState.path.getPointAtLength(Math.min(routeState.len, routeState.len * at + 4));
|
||||
var angle = Math.atan2(ahead.y - pt.y, ahead.x - pt.x) * 180 / Math.PI;
|
||||
if (angle < 0) angle += 360; // nach links = 180°, ohne Sprung bei ±180°
|
||||
var tilt = Math.max(-25, Math.min(25, (angle - 180) * -.25));
|
||||
var w = routeState.rider.offsetWidth, h = routeState.rider.offsetHeight;
|
||||
// Hahn schaut in Fahrtrichtung (nach links), leicht geneigt
|
||||
routeState.rider.style.transform = 'translate(' + (pt.x - w / 2) + 'px,' + (pt.y - h * .85) + 'px) scaleX(-1) rotate(' + ((angle - 180) * -.2) + 'deg)';
|
||||
// Hahn schaut in Fahrtrichtung (nach links), am Start und kurz vor dem Ziel blendet er weich ein und aus
|
||||
routeState.rider.style.transform = 'translate(' + (pt.x - w / 2) + 'px,' + (pt.y - h * .85) + 'px) scaleX(-1) rotate(' + tilt + 'deg)';
|
||||
routeState.rider.style.opacity = Math.max(0, Math.min(1, (progress - .03) / .06, (.94 - progress) / .06));
|
||||
routeState.rider.style.visibility = 'visible';
|
||||
}
|
||||
|
||||
/* ---------- Ohne GSAP: fertig ---------- */
|
||||
if (!hasGsap) {
|
||||
routeState = buildRoute();
|
||||
placeRider(1);
|
||||
if (routeState) routeState.rider.style.visibility = 'hidden';
|
||||
window.addEventListener('resize', function () { routeState = buildRoute(); placeRider(1); });
|
||||
var rebuildStatic = function () { routeState = buildRoute(); placeRider(1); if (routeState) routeState.rider.style.visibility = 'hidden'; };
|
||||
rebuildStatic();
|
||||
var rt; window.addEventListener('resize', function () { clearTimeout(rt); rt = setTimeout(rebuildStatic, 250); });
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -467,10 +473,9 @@
|
||||
}
|
||||
|
||||
if (reduce) {
|
||||
routeState = buildRoute();
|
||||
placeRider(1);
|
||||
if (routeState) routeState.rider.style.visibility = 'hidden';
|
||||
window.addEventListener('resize', function () { routeState = buildRoute(); placeRider(1); });
|
||||
var rebuildStatic = function () { routeState = buildRoute(); placeRider(1); if (routeState) routeState.rider.style.visibility = 'hidden'; };
|
||||
rebuildStatic();
|
||||
var rt; window.addEventListener('resize', function () { clearTimeout(rt); rt = setTimeout(rebuildStatic, 250); });
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
+2
-2
@@ -316,8 +316,7 @@
|
||||
<div class="tmap" aria-hidden="true">
|
||||
<img class="tmap__img" src="assets/img/map-kaiserslautern.svg" width="1400" height="1080" alt="" loading="lazy" decoding="async">
|
||||
</div>
|
||||
<a class="tmap__credit" href="https://www.openstreetmap.org/copyright" target="_blank" rel="noopener">Kartendaten © OpenStreetMap-Mitwirkende</a>
|
||||
<svg class="troute" aria-hidden="true"><defs><mask id="troute-mask" maskUnits="userSpaceOnUse"><path class="troute__reveal"/></mask></defs><path class="troute__glow"/><path class="troute__line" mask="url(#troute-mask)"/></svg>
|
||||
<svg class="troute" aria-hidden="true"><defs><mask id="troute-mask" maskUnits="userSpaceOnUse"><path class="troute__reveal"/></mask></defs><g mask="url(#troute-mask)"><path class="troute__glow"/><path class="troute__line"/></g></svg>
|
||||
<img class="troute__rider die-cut" src="assets/img/rooster.svg" alt="" aria-hidden="true" width="179" height="264">
|
||||
<div class="tspot tspot--shop">
|
||||
<div class="tspot__minimap" aria-hidden="true"><img src="assets/img/map-kaiserslautern.svg" width="1400" height="1080" alt="" loading="lazy" decoding="async"></div>
|
||||
@@ -347,6 +346,7 @@
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<a class="tmap__credit" href="https://www.openstreetmap.org/copyright" target="_blank" rel="noopener">Kartendaten © OpenStreetMap-Mitwirkende</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in new issue
Block a user