Pagwin/new_blog
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

socials in footer but icons aren't fixed up yet

Browse source 
Github icon is clipped unfortunately and linkedin icon should be changed
to have background with round corners and color corresponding to primary
color
This commit is contained in:
Pagwin 2024-12-22 18:02:46 -05:00
parent 9f018de170
commit afcb2740f4
No known key found for this signature in database
GPG key ID: 81137023740CA260
2 changed files with 34 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
static/css/layout.css
View file

@ -31,6 +31,25 @@ a:hover {
text-decoration: underline; text-decoration: underline;
} }
footer {
width: 100%;
/*using grid instead of flexbox due to greater flexibility in case I wanna add stuff to the layout for some reason*/
display: grid;
justify-content: center;
align-content: center;
grid-template-areas: "footer"
grid-template-columns: 1fr;
grid-template-rows: 1fr;
}
.socials {
display: flex;
flex-flow: row wrap;
gap: 1rem;
align-items: center;
justify-content: center;
}
.nav-link{ .nav-link{
font-size: 2rem; font-size: 2rem;
padding: 0em 0.25em; padding: 0em 0.25em;
@ -83,7 +102,6 @@ header#header {
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-flow: row nowrap; flex-flow: row nowrap;
gap: 0.5em;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
width: 100vw; width: 100vw;

17
templates/default.html
View file

@ -44,10 +44,23 @@
<main> <main>
{{{content}}} {{{content}}}
</main> </main>
<footer>
</footer>
</div> </div>
</div> </div>
<footer>
<div class="socials">
<a class="obj-wrapper" href="https://github.com/Pagwin-Fedora"><object aria-hidden="true" tabindex="-1"
class="icon svg small" data="/static/images/github.svg">
<a href="https://github.com/Pagwin-Fedora" class="nav-link" aria-hidden="true"
tabindex="-1">Github</a>
</object></a>
<a class="obj-wrapper" href="https://www.linkedin.com/in/spencer-powell-pagwin/"><object aria-hidden="true"
tabindex="-1" class="icon svg small" data="/static/images/linkedin.svg">
<a href="https://www.linkedin.com/in/spencer-powell-pagwin/" class="nav-link" aria-hidden="true"
tabindex="-1">Linkedin</a>
</object></a>
</div>
</footer>
</body> </body>
</html> </html>