Browse Source

adjustments on home template incl heart icon and other minor layout details

master
JoBCB 3 years ago
parent
commit
6555c22111
  1. 1
      static/css/Icons/heart-regular.svg
  2. 1
      static/css/Icons/heart-solid.svg
  3. 32
      static/css/style.css
  4. 2
      templates/home.html
  5. 9
      templates/layout.html

1
static/css/Icons/heart-regular.svg

@ -0,0 +1 @@
<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="heart" class="svg-inline--fa fa-heart fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M458.4 64.3C400.6 15.7 311.3 23 256 79.3 200.7 23 111.4 15.6 53.6 64.3-21.6 127.6-10.6 230.8 43 285.5l175.4 178.7c10 10.2 23.4 15.9 37.6 15.9 14.3 0 27.6-5.6 37.6-15.8L469 285.6c53.5-54.7 64.7-157.9-10.6-221.3zm-23.6 187.5L259.4 430.5c-2.4 2.4-4.4 2.4-6.8 0L77.2 251.8c-36.5-37.2-43.9-107.6 7.3-150.7 38.9-32.7 98.9-27.8 136.5 10.5l35 35.7 35-35.7c37.8-38.5 97.8-43.2 136.5-10.6 51.1 43.1 43.5 113.9 7.3 150.8z"></path></svg>

After

Width:  |  Height:  |  Size: 640 B

1
static/css/Icons/heart-solid.svg

@ -0,0 +1 @@
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="heart" class="svg-inline--fa fa-heart fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z"></path></svg>

After

Width:  |  Height:  |  Size: 437 B

32
static/css/style.css

@ -386,6 +386,30 @@ div#navigation a:active {
text-decoration: none;
}
a#link-search{
text-decoration: none;
}
a#nav-heart {
display: flex;
align-self: baseline;
}
a#nav-heart > img {
height: 24px;
width: 24px;
}
a#nav-heart > img {
filter: invert(23%) sepia(99%) saturate(2460%) hue-rotate(225deg) brightness(82%) contrast(108%);
}
a#nav-heart > img:hover {
filter: none;
}
/*#home-top-div:after {
content:"";
position: absolute;
@ -1126,6 +1150,7 @@ div#home-recent-grid, div#browsethearchive-grid, div#selfpublishedindex-grid, di
div.home-show-wrapper{
width: 100%;
margin: 0px auto 60px auto;
padding: 0px 8vw 0px 8vw;
display: flex;
align-items: center;
justify-content: center;
@ -2099,6 +2124,9 @@ div#tutorials-intro h3, div#tutorials-intro p {
color: var(--black);
}
#nav-support a {
}
div#animatedlogo img {
width: 8.5vw;
min-width: 32px;
@ -2278,5 +2306,9 @@ div#tutorials-intro h3, div#tutorials-intro p {
#home-recent-grid, #browsethearchive-grid, #selfpublishedindex-grid, #zinesindex-grid { grid-template-columns: repeat(6, 1fr); }
.artwork-relatedwrapper,.artwork-copieswrapper, .artwork-lists { grid-template-columns: repeat(6, 1fr); }
#footer-contact-form {
width: 100%;
max-width: 420px;
}
}

2
templates/home.html

@ -23,7 +23,7 @@
<!-- END LOOPS IMAGES -->
<p class="heading_A">The Digital Archive of Artists Publishing is an interactive, user-driven, searchable database of Artist's Books and publications</p>
<p class="heading_A">The Digital Archive of Artists' Publishing is an interactive, user-driven, searchable database of artists' books and publications.</p>
<div id="wrapper-bt">

9
templates/layout.html

@ -18,6 +18,8 @@
<div id="nav-search"><a href="{{ url_for('searchtools') }}">Search tools</a></div>
<div id="nav-tutorials"><a href="{{ url_for('tutorials') }}">Tutorials</a></div>
<div id="nav-upload"><a href="{{ url_for('upload') }}">Upload</a></div>
<div id="nav-support"><a href="https://daap.network/support">Support our work</a></div>
<div id="nav-login"><a href="https://daap.bannerrepeater.org/w/index.php?title=Special:UserLogin&returnto=Main+Page">To log-in, please view on desktop</a></div>
</div>
</div>
@ -64,6 +66,13 @@
<div id="nav-tutorials"><a href="{{ url_for('tutorials') }}">Tutorials</a></div>
<div id="nav-upload"><a href="{{ url_for('upload') }}">Upload</a></div>
<div id="nav-login"><a href="https://daap.bannerrepeater.org/w/index.php?title=Special:UserLogin&returnto=Main+Page">Log in</a></div>
<a id="nav-heart" href="https://daap.network/support">
<img
src="css/Icons/heart-solid.svg"
alt="heart icon and link to donation page"
title="Support our work"
/>
</a>
</div>
</div>
</div>

Loading…
Cancel
Save