트론트 홈페이지와 포트폴리오 초기 구성

icons.css

@@ -0,0 +1,38 @@
+/* The shared inline symbol uses the supplied arrow_right_alt.svg path.
+   Inline references also work when a page is opened directly from disk. */
+.icon-definitions { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
+.arrow-icon {
+  display: inline-block;
+  width: 1.2em;
+  height: 1.2em;
+  flex: none;
+  fill: currentColor;
+  vertical-align: middle;
+  pointer-events: none;
+  transform: rotate(var(--arrow-angle, 0deg));
+  transform-origin: center;
+}
+.arrow-icon--left { --arrow-angle: 180deg; }
+.arrow-icon--up { --arrow-angle: -90deg; }
+.arrow-icon--down { --arrow-angle: 90deg; }
+.arrow-icon--up-right { --arrow-angle: -45deg; }
+.arrow-icon--down-right { --arrow-angle: 45deg; }
+.arrow-icon--up-left { --arrow-angle: -135deg; }
+.arrow-icon--down-left { --arrow-angle: 135deg; }
+:where(.arrow-slot) { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
+.arrow-slot > .arrow-icon { display: block; }
+.scene-view b, .case-next-arrow, .viewer-direction, .back-top { padding: 0; }
+.scene-view b > .arrow-icon, .case-next-arrow > .arrow-icon,
+.viewer-direction .arrow-icon, .back-top > .arrow-icon { width: 75%; height: 75%; }
+.viewer-direction > .arrow-slot { display: grid; place-items: center; width: 100%; height: 100%; }
+.mobile-menu a > .arrow-icon { margin-left: auto; width: 24px; height: 24px; }
+.project-scope > span, .footer-bottom > a, .case-footer > a:last-child {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+@media (max-width: 600px) {
+
+  .project-scope > span { display: inline-flex; }
+}