diff options
| author | A Farzat <a@farzat.xyz> | 2024-11-23 21:51:48 +0900 |
|---|---|---|
| committer | A Farzat <a@farzat.xyz> | 2024-11-23 21:51:48 +0900 |
| commit | 0426290c48ec8a7f2c979a1d2a4b471480dcae3a (patch) | |
| tree | 1e362ee3bdda6a6c69edaf2e69bd2c2c691d9a5a | |
| parent | 90b21fb9c36b99a3dd2b9ec97d6a3264efd236b0 (diff) | |
| download | farzat.xyz-0426290c48ec8a7f2c979a1d2a4b471480dcae3a.tar.gz farzat.xyz-0426290c48ec8a7f2c979a1d2a4b471480dcae3a.zip | |
Add the footer
| -rw-r--r-- | sass/_footer.scss | 35 | ||||
| -rw-r--r-- | sass/style.scss | 1 | ||||
| -rw-r--r-- | templates/base.html | 44 |
3 files changed, 79 insertions, 1 deletions
diff --git a/sass/_footer.scss b/sass/_footer.scss new file mode 100644 index 0000000..cf944e1 --- /dev/null +++ b/sass/_footer.scss @@ -0,0 +1,35 @@ +footer { + margin-top: 200*$px; +} +.footer { + margin: 100*$px auto; + text-align: center; +} +.social-icons { + & a { + cursor: pointer; + outline: none; + &:link, &:visited { + color: inherit; + text-decoration: none; + transition: transform .2s; + } + &:hover, &:active { + color: var(--color-primary); + transform: scale(1.05); + } + &:focus { + color: var(--color-accent); + transform: scale(1.05); + } + } + & svg { + max-width: 30*$px; + max-height: 30*$px; + fill: currentColor; + } + margin-top: 20*$px; + display: flex; + gap: 40*$px; + justify-content: center; +} diff --git a/sass/style.scss b/sass/style.scss index e9938ec..fb6a659 100644 --- a/sass/style.scss +++ b/sass/style.scss @@ -1,4 +1,5 @@ @import "variables"; +@import "footer"; @import "header"; @import "main"; @import "mixins"; diff --git a/templates/base.html b/templates/base.html index 2506540..889026c 100644 --- a/templates/base.html +++ b/templates/base.html @@ -6,7 +6,7 @@ <link rel="stylesheet" href="/style.css"> <title>{% block title %} Farzat's website {% endblock %}</title> <!-- <script defer src="/js/dark_theme.js"></script> --> - <link rel="icon" type="image/x-icon" href="/img/svgo/kaaba.svg"> + <link rel="icon" type="image/x-icon" href="/img/svgo/kaaba-coloured.svg"> </head> <body> <header class="header"> @@ -20,6 +20,48 @@ <section class="main"> {% block content %} {% endblock %} </section> + <footer> + <div class="footer"> + <h3> Connect with me, @farzat on </h3> + <div class="social-icons"> + <a href="https://www.linkedin.com/in/farzat/"> + <abbr title="LinkedIn"> + <svg> + <use href="/img/svg-bundle.svg#logo-linkedin"></use> + </svg> + </abbr> + </a> + <a href="https://sr.ht/~farzat/"> + <abbr title="Sourcehut"> + <svg> + <use href="/img/svg-bundle.svg#sourcehut"></use> + </svg> + </abbr> + </a> + <a href="https://github.com/Farzat07"> + <abbr title="GitHub"> + <svg> + <use href="/img/svg-bundle.svg#logo-github"></use> + </svg> + </abbr> + </a> + <a href="https://gitlab.com/Farzat07"> + <abbr title="GitLab"> + <svg> + <use href="/img/svg-bundle.svg#logo-gitlab"></use> + </svg> + </abbr> + </a> + <a href="mailto:a@farzat.xyz"> + <abbr title="Email"> + <svg> + <use href="/img/svg-bundle.svg#mail-outline"></use> + </svg> + </abbr> + </a> + </div> + </div> + </footer> </body> </html> <!-- vim: set ft=htmldjango --> |