Skip to content

Commit 12a83ed

Browse files
BreadMotionBreadMotion
committed
Merge branch 'develop'
2 parents b941450 + dd16d19 commit 12a83ed

22 files changed

Lines changed: 1372 additions & 669 deletions

‎WebSite/assets/css/layout.css‎

Lines changed: 315 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -626,9 +626,323 @@ body.no-scroll .site-header {
626626
border-top: 1px solid var(--color-border-soft);
627627
width: 100%;
628628
}
629-
629+
630630
.lang-option {
631631
font-size: 1rem;
632632
padding: 0.5rem 1rem;
633633
}
634634
}
635+
636+
/* ==========================================================================
637+
9. Bread Pet Character
638+
========================================================================== */
639+
.bread-pet {
640+
position: absolute;
641+
top: 0;
642+
left: 0;
643+
width: 40px;
644+
height: 40px;
645+
z-index: 10000;
646+
pointer-events: none;
647+
will-change: transform;
648+
opacity: 0;
649+
transition: opacity 0.3s;
650+
margin-left: -20px;
651+
image-rendering: pixelated;
652+
}
653+
654+
.bread-pet.is-visible {
655+
opacity: 1;
656+
}
657+
658+
.bread-pet__scale {
659+
position: absolute;
660+
bottom: 0;
661+
left: 50%;
662+
transform: translateX(-50%) scale(3);
663+
transform-origin: bottom center;
664+
}
665+
666+
.bread-pet__body {
667+
position: relative;
668+
width: 14px;
669+
height: 12px;
670+
background: #f4d03f;
671+
box-shadow:
672+
inset 1px 1px 0 rgba(255, 255, 255, 0.5),
673+
inset -1px -1px 0 rgba(0, 0, 0, 0.1),
674+
0 0 0 1px #8d6e63; /* Pixel border */
675+
display: flex;
676+
justify-content: center;
677+
transform-origin: bottom center;
678+
}
679+
680+
/* Inner white part of bread */
681+
.bread-pet__body::after {
682+
content: "";
683+
position: absolute;
684+
top: 2px;
685+
left: 2px;
686+
right: 2px;
687+
bottom: 2px;
688+
background: #fff8dc;
689+
}
690+
691+
.bread-pet__face {
692+
position: absolute;
693+
top: 0;
694+
left: 0;
695+
width: 100%;
696+
height: 100%;
697+
z-index: 2;
698+
}
699+
700+
.bread-pet__eye {
701+
position: absolute;
702+
top: 4px;
703+
width: 2px;
704+
height: 2px;
705+
background: #3e2723;
706+
animation: blink 4s infinite;
707+
}
708+
709+
.bread-pet__eye.left {
710+
left: 3px;
711+
}
712+
.bread-pet__eye.right {
713+
right: 3px;
714+
}
715+
716+
.bread-pet__mouth {
717+
position: absolute;
718+
top: 7px;
719+
left: 50%;
720+
transform: translateX(-50%);
721+
width: 2px;
722+
height: 1px;
723+
background: #3e2723;
724+
}
725+
726+
.bread-pet.mouth-open .bread-pet__mouth {
727+
height: 3px;
728+
top: 6px;
729+
background: #d84315;
730+
}
731+
732+
.bread-pet__cheek {
733+
position: absolute;
734+
top: 5px;
735+
width: 2px;
736+
height: 1px;
737+
background: #ffab91;
738+
}
739+
.bread-pet__cheek.left {
740+
left: 1px;
741+
}
742+
.bread-pet__cheek.right {
743+
right: 1px;
744+
}
745+
746+
.bread-pet__leg {
747+
position: absolute;
748+
bottom: -2px;
749+
width: 2px;
750+
height: 3px;
751+
background: #d4ac0d;
752+
z-index: 0;
753+
box-shadow: 0 0 0 1px #8d6e63;
754+
}
755+
.bread-pet__leg.left {
756+
left: 3px;
757+
}
758+
.bread-pet__leg.right {
759+
right: 3px;
760+
}
761+
762+
.bread-pet__shadow {
763+
position: absolute;
764+
bottom: -6px;
765+
left: 50%;
766+
transform: translateX(-50%);
767+
width: 14px;
768+
height: 4px;
769+
background: rgba(0, 0, 0, 0.15);
770+
box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.5);
771+
z-index: -1;
772+
}
773+
774+
/* ==========================================================================
775+
Bread Pet Directions (Isometric Pixel Art)
776+
========================================================================== */
777+
778+
/* --- Front-Left (Down-Left) --- */
779+
.bread-pet[data-facing="front-left"] .bread-pet__eye.right {
780+
right: 4px;
781+
}
782+
.bread-pet[data-facing="front-left"] .bread-pet__eye.left {
783+
left: 2px;
784+
}
785+
.bread-pet[data-facing="front-left"]
786+
.bread-pet__cheek.right {
787+
right: 2px;
788+
}
789+
.bread-pet[data-facing="front-left"]
790+
.bread-pet__cheek.left {
791+
left: 0;
792+
}
793+
.bread-pet[data-facing="front-left"] .bread-pet__mouth {
794+
transform: translateX(-3px);
795+
}
796+
797+
/* --- Front-Right (Down-Right) --- */
798+
.bread-pet[data-facing="front-right"] .bread-pet__eye.left {
799+
left: 4px;
800+
}
801+
.bread-pet[data-facing="front-right"]
802+
.bread-pet__eye.right {
803+
right: 2px;
804+
}
805+
.bread-pet[data-facing="front-right"]
806+
.bread-pet__cheek.left {
807+
left: 2px;
808+
}
809+
.bread-pet[data-facing="front-right"]
810+
.bread-pet__cheek.right {
811+
right: 0;
812+
}
813+
.bread-pet[data-facing="front-right"] .bread-pet__mouth {
814+
transform: translateX(1px);
815+
}
816+
817+
/* --- Back-Left (Up-Left) --- */
818+
.bread-pet[data-facing="back-left"] .bread-pet__face {
819+
display: none;
820+
}
821+
.bread-pet[data-facing="back-left"] .bread-pet__body {
822+
background: #d4ac0d;
823+
}
824+
.bread-pet[data-facing="back-left"]
825+
.bread-pet__body::after {
826+
display: none;
827+
}
828+
829+
/* --- Back-Right (Up-Right) --- */
830+
.bread-pet[data-facing="back-right"] .bread-pet__face {
831+
display: none;
832+
}
833+
.bread-pet[data-facing="back-right"] .bread-pet__body {
834+
background: #d4ac0d;
835+
}
836+
.bread-pet[data-facing="back-right"]
837+
.bread-pet__body::after {
838+
display: none;
839+
}
840+
841+
/* Animations */
842+
@keyframes blink {
843+
0%,
844+
96%,
845+
100% {
846+
transform: scaleY(1);
847+
}
848+
98% {
849+
transform: scaleY(0.1);
850+
}
851+
}
852+
853+
/* Walking Animation */
854+
.bread-pet.is-walking .bread-pet__body {
855+
animation: bounce 0.2s infinite alternate steps(2);
856+
}
857+
858+
.bread-pet.is-walking .bread-pet__leg.left {
859+
animation: walk 0.2s infinite alternate steps(2);
860+
}
861+
.bread-pet.is-walking .bread-pet__leg.right {
862+
animation: walk 0.2s infinite alternate-reverse steps(2);
863+
}
864+
865+
.bread-pet[data-facing="front-right"].is-walking
866+
.bread-pet__leg.left {
867+
left: 1px;
868+
}
869+
870+
.bread-pet[data-facing="front-right"].is-walking
871+
.bread-pet__leg.right {
872+
right: 4px;
873+
}
874+
875+
.bread-[data-facing="front-left"].is-walking
876+
.bread-pet__leg.left {
877+
left: 4px;
878+
}
879+
.bread-pet[data-facing="front-left"].is-walking
880+
.bread-pet__leg.right {
881+
right: 1px;
882+
}
883+
884+
.bread-pet[data-facing="back-right"].is-walking
885+
.bread-pet__leg.left {
886+
left: 1px;
887+
}
888+
889+
.bread-pet[data-facing="back-right"].is-walking
890+
.bread-pet__leg.right {
891+
right: 4px;
892+
}
893+
894+
.bread-[data-facing="back-left"].is-walking
895+
.bread-pet__leg.left {
896+
left: 4px;
897+
}
898+
.bread-pet[data-facing="back-left"].is-walking
899+
.bread-pet__leg.right {
900+
right: 1px;
901+
}
902+
@keyframes bounce {
903+
0% {
904+
transform: translateY(0);
905+
}
906+
100% {
907+
transform: translateY(-1px);
908+
}
909+
}
910+
911+
@keyframes walk {
912+
0% {
913+
transform: translateY(0);
914+
}
915+
100% {
916+
transform: translateY(-2px);
917+
}
918+
}
919+
920+
/* Spawn Animation */
921+
@keyframes bread-pop {
922+
0% {
923+
transform: scale(0) translateY(20px);
924+
opacity: 0;
925+
}
926+
40% {
927+
transform: scale(1.25, 0.75) translateY(-10px);
928+
opacity: 1;
929+
}
930+
50% {
931+
transform: scale(0.85, 1.15) translateY(-15px);
932+
}
933+
65% {
934+
transform: scale(1.05, 0.95) translateY(5px);
935+
}
936+
80% {
937+
transform: scale(0.98, 1.02) translateY(-2px);
938+
}
939+
100% {
940+
transform: scale(1) translateY(0);
941+
opacity: 1;
942+
}
943+
}
944+
945+
.bread-pet.is-spawning .bread-pet__body {
946+
animation: bread-pop 0.6s cubic-bezier(0.5, 0, 0.5, 1)
947+
forwards;
948+
}

0 commit comments

Comments
 (0)