diff --git a/assets/styles/main.scss b/assets/styles/main.scss index ecb17ef..6466fe0 100644 --- a/assets/styles/main.scss +++ b/assets/styles/main.scss @@ -38,8 +38,7 @@ --small-content-width: Min(100%, 60rem); --regular-icon-size: 2rem; --regular-icon-wrapper-size: calc(var(--regular-icon-size) + 1rem); - --small-icon-size: var(--text-font-height); - --small-icon-wrapper-size: var(--small-icon-size); + --button-icon-size: var(--text-font-height); --button-with-icon-gap: 0.5rem; @@ -205,16 +204,16 @@ button { gap: var(--button-with-icon-gap); span { - transform: translateX(calc((var(--button-with-icon-gap) + var(--small-icon-size)) / 2)); + transform: translateX(calc((var(--button-with-icon-gap) + var(--button-icon-size)) / 2)); transition: transform 200ms ease-in-out; } svg { flex-shrink: 0; opacity: 0; - width: var(--small-icon-size); - height: var(--small-icon-size); - transform: translateX(calc((var(--button-with-icon-gap) + var(--small-icon-size)) / 2)); + width: var(--button-icon-size); + height: var(--button-icon-size); + transform: translateX(calc((var(--button-with-icon-gap) + var(--button-icon-size)) / 2)); transition: opacity 200ms ease-in-out, transform 200ms ease-in-out; diff --git a/components/AppFooter.vue b/components/AppFooter.vue index 0078f55..97de135 100644 --- a/components/AppFooter.vue +++ b/components/AppFooter.vue @@ -67,7 +67,7 @@ &__logo { width: auto; - height: var(--small-icon-size); + height: var(--footnote-font-height); &-background { fill: var(--primary-color); diff --git a/components/ProjectData.vue b/components/ProjectData.vue index 6096984..6a7661a 100644 --- a/components/ProjectData.vue +++ b/components/ProjectData.vue @@ -64,8 +64,8 @@ gap: 1rem; a { - width: var(--small-icon-wrapper-size); - height: var(--small-icon-wrapper-size); + width: var(--text-font-height); + height: var(--text-font-height); svg { width: var(--h3-font-size);