liquidex/treehouse
liquidex/treehouse
1
Fork 0
Code Issues 39 Activity

fix weird padding in footer

Browse source
This commit is contained in:
liquidex 2024-09-29 00:14:11 +02:00
parent 43bf0a7c3c
commit 38e5f8f06d
2 changed files with 18 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
static/css/main.css
View file

@ -544,11 +544,11 @@ footer {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
&>section:first-child { & #version-info {
flex-grow: 1; flex-grow: 1;
} }
&>section:last-child { & #footer-icon {
flex-shrink: 0; flex-shrink: 0;
} }
@ -557,6 +557,7 @@ footer {
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: end; justify-content: end;
opacity: 50%; opacity: 50%;
padding-left: 1.75rem; padding-left: 1.75rem;
transition: var(--transition-duration) opacity; transition: var(--transition-duration) opacity;
@ -575,6 +576,7 @@ footer {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
list-style: none; list-style: none;
margin: 0;
padding-left: 0; padding-left: 0;
opacity: 0%; opacity: 0%;
transition: var(--transition-duration) opacity; transition: var(--transition-duration) opacity;
@ -599,10 +601,20 @@ footer {
} }
& #footer-icon { & #footer-icon {
color: var(--text-color); display: flex;
padding-right: 1.75rem; padding-right: 1.75rem;
&>a {
display: flex;
flex-direction: row;
}
&>a>svg {
display: flex;
color: var(--text-color);
opacity: 40%; opacity: 40%;
} }
}
} }
/* Style emojis to be readable */ /* Style emojis to be readable */

4
template/components/_footer.hbs
View file

@ -13,9 +13,9 @@
{{/if}} {{/if}}
</section> </section>
<section> <section id="footer-icon">
<a href="{{ config.site }}/treehouse"> <a href="{{ config.site }}/treehouse">
<svg id="footer-icon" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="all"> <g id="all">
<mask id="mask"> <mask id="mask">
<rect width="32" height="32" fill="black" /> <rect width="32" height="32" fill="black" />