diff --git a/src/components/Home/Socials/Socials.scss b/src/components/Home/Socials/Socials.scss new file mode 100644 index 0000000..c0223eb --- /dev/null +++ b/src/components/Home/Socials/Socials.scss @@ -0,0 +1,50 @@ +@import "/src/styles/mixins.scss"; +@import "/src/styles/vars.scss"; + +#socials { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 3em; + margin: 12em 7.5% 8em; + + div { + display: flex; + align-items: center; + gap: 2.5em; + } + + h2 { + @include fluid-font-size(1.5625rem); + font-weight: 700; + line-height: 100%; + text-transform: uppercase; + color: $color-aquamarine; + } + + a { + padding: 0.5em; + color: $color-alto; + + &:hover { + color: $color-white; + } + } + + .github-logo svg { + @include fluid-width(3.5rem); + } + + .git-logo svg { + @include fluid-width(3.5rem); + } + + .discord-logo svg { + @include fluid-width(3.5rem); + } + + .twitter-logo svg { + @include fluid-width(3.5rem); + } +} diff --git a/src/styles/global.scss b/src/styles/global.scss index 7b753cb..84f08ef 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -25,6 +25,14 @@ src: url("/fonts/JetBrainsMono-Bold.woff2") format('woff2'); } +@font-face { + font-family: 'IBM Plex Sans Devanagari'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url("/fonts/ibm-plex-sans-devanagari.woff2") format('woff2'); +} + @tailwind base; @tailwind components; @tailwind utilities; diff --git a/src/styles/vars.scss b/src/styles/vars.scss index f5d4741..40f7fd8 100644 --- a/src/styles/vars.scss +++ b/src/styles/vars.scss @@ -6,6 +6,7 @@ $color-aquamarine: #7afcbb; $color-cloud: #c7c7c7; $color-alto: #d9d9d9; +$font-family-ibm-plex-sans-devanagari: "IBM Plex Sans Devanagari", sans-serif; $font-family-jaldi: "Jaldi", sans-serif; $font-family-jetbrains-mono: "JetBrains Mono", monospace;