diff --git a/src/app/style.scss b/src/app/style.scss index 354aaba..0fc5c75 100644 --- a/src/app/style.scss +++ b/src/app/style.scss @@ -1,3 +1,11 @@ +@font-face { + font-family: 'Font Awesome 6 Free'; + font-style: normal; + font-weight: 900; + font-display: block; + src: url("../assets/webfonts/fa-solid-900.woff2") format("woff2"), url("../assets/webfonts/fa-solid-900.ttf") format("truetype"); +} + body { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; diff --git a/src/assets/webfonts/fa-solid-900.ttf b/src/assets/webfonts/fa-solid-900.ttf new file mode 100644 index 0000000..bb2a869 Binary files /dev/null and b/src/assets/webfonts/fa-solid-900.ttf differ diff --git a/src/assets/webfonts/fa-solid-900.woff2 b/src/assets/webfonts/fa-solid-900.woff2 new file mode 100644 index 0000000..758dd4f Binary files /dev/null and b/src/assets/webfonts/fa-solid-900.woff2 differ diff --git a/src/components/SlideContent/style.scss b/src/components/SlideContent/style.scss index 8fac034..eaa63f7 100644 --- a/src/components/SlideContent/style.scss +++ b/src/components/SlideContent/style.scss @@ -1,5 +1,5 @@ .slide-content { - border-radius: 15px; + border-radius: 10px; color: #000; margin: 0 auto; max-height: 100vh; @@ -18,68 +18,62 @@ } } .btn { - background: rgba(255,255,255,0.3); + background: #fff; + border: 1px solid #444; border-radius: 100%; - border: 2px solid rgba(0,0,0,0.3); - backdrop-filter: blur(5px); - box-shadow: 0 0 1px 1px rgba(255,255,255,0.5), 0 0 10px 2px rgba(0,0,0,0.2); + box-shadow: 0 0 0 2px rgba(#fff, .5), 0 0 10px 10px rgba(#000, .1); cursor: pointer; font-size: 0; font-weight: bold; - height: 60px; + height: 40px; outline: none; position: absolute; top: 50%; transform: translateY(-50%); - transition: 0.3s all; + transition: .3s all; user-select: none; - width: 60px; + width: 40px; z-index: 1; - &:before, &::after { - background: #000; - border-radius: 10px; - content: ""; - display: flex; - height: 50%; - width: 5px; - } &:hover { - background: rgba(0,0,0,0.3); + background: #444; + border: 1px solid #fff; + box-shadow: 0 0 10px 10px rgba(#fff, .5); color: #fff; - &:before, &::after { - background: #fff; - } - } - @media (max-width: 640px) { - height: 30px; - width: 30px; + transform: translateY(-50%) scale(1.2); &:before, &:after { - width: 3px; - height: 10px; + color: #fff; } } + &:before, + &:after { + font-family: 'Font Awesome 6 Free'; + background: transparent; + content: ""; + color: #444; + font-size: 1.5rem; + display: flex; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + transform: translateX(5px); + } } .prev { left: 10px; - &:active { transform: translateY(-50%) translateX(10px); } - &:before { transform: rotate(45deg) translate(17px, -10px); } - &:after { transform: rotate(-45deg) translate(18px, 10px); } - @media (max-width: 640px) { - &:active { transform: translateY(-50%) translateX(-10px); } - &:before { transform: rotate(45deg) translate(5px, -3px); } - &:after { transform: rotate(-45deg) translate(6px, 2px); } + &:before { + content: "\f053"; + } + &:active { + transform: translateX(-5px) translateY(-50%) scale(1.2); } } .next { right: 10px; - &:active { transform: translateY(-50%) translateX(-10px); } - &:before { transform: rotate(-45deg) translate(11px, 19px); } - &:after { transform: rotate(45deg) translate(11px, -19px); } - @media (max-width: 640px) { - &:active { transform: translateY(-50%) translateX(10px); } - &:before { transform: rotate(45deg) translate(11px, 1px); } - &:after { transform: rotate(-45deg) translate(10px, 0px); } + &:before { + content: "\f054"; + } + &:active { + transform: translateX(5px) translateY(-50%) scale(1.2); } } }