standardebooks/web
1
0
Fork 0
mirror of https://github.com/standardebooks/web.git synced 2025-07-09 16:20:27 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add X and Instagram links to site footer

Browse source
This commit is contained in:
Alex Cabal 2024-04-12 15:31:27 -05:00
parent 54f46254d8
commit 92c647f2b1
5 changed files with 71 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

53
www/css/core.css
View file

@ -1289,14 +1289,14 @@ body > footer{
padding: 2rem 0;
}
footer p:last-child a{
footer > p:last-child a{
font-size: 0;
display: inline-block;
margin: auto;
margin-top: 2rem;
}
footer p:last-child a::before{
footer > p:last-child a::before{
content: "";
background: url("/images/logo-small.svg");
background-size: contain;
@ -1307,25 +1307,25 @@ footer p:last-child a::before{
margin: auto;
}
footer ul{
footer ul.nav-links{
font-size: 0;
margin-bottom: 1rem;
}
footer ul li{
footer ul.nav-links li{
display: inline-block;
list-style: none;
text-transform: lowercase;
font-size: 0;
}
footer ul li a,
footer ul li::after{
footer ul.nav-links li a,
footer ul.nav-links li::after{
font-size: .9rem;
white-space: nowrap;
}
footer ul li:not(:last-child)::after{
footer ul.nav-links li:not(:last-child)::after{
content: "\b7";
margin: 0 10px;
}
@ -1338,7 +1338,7 @@ footer > p:first-child{
text-transform: lowercase;
}
footer ul ~ p{
footer ul.nav-links ~ p{
font-size: .6rem;
}
@ -1365,6 +1365,43 @@ footer > p:first-child::before{
font-size: .75rem;
}
footer ul.social-media{
display: flex;
gap: 1rem;
list-style: none;
justify-content: center;
margin-bottom: 1rem;
}
footer ul.social-media a{
font-size: 0;
display: block;
height: 1.5rem;
width: 1.5rem;
}
footer ul.social-media a::before{
content: "";
display: block;
height: 100%;
width: 100%;
background-size: cover;
filter: brightness(0) saturate(100%) invert(18%) sepia(33%) saturate(355%) hue-rotate(172deg) brightness(93%) contrast(89%); /* Change color of SVG to #303944 */
}
footer ul.social-media a[href^="https://twitter.com"]::before{
background-image: url("/images/x.svg");
}
footer ul.social-media a[href^="https://www.instagram.com"]::before{
background-image: url("/images/instagram.svg");
}
footer ul.social-media a:hover::before{
/* This filter changes a black background to #62bfa3, which is var(--button-highlight) */
filter: invert(69%) sepia(35%) saturate(459%) hue-rotate(111deg) brightness(92%) contrast(87%);
}
/* ebook list */
h1,
.masthead h2{

3
www/css/dark.css
View file

@ -32,7 +32,8 @@ article.ebook section#details ul li a[class]::before,
footer p:last-child a::before,
main.front-page > section > section figure.oss img + img,
main.front-page > section > h2::before,
main.front-page > section > h2::after{
main.front-page > section > h2::after,
footer ul.social-media a::before{
filter: invert() grayscale(100%) brightness(120%) drop-shadow(3px 3px 1px rgba(0, 0, 0, .25)); /* grayscale and brightness makes it hit about #eeeeee */
}