Browse Source

footer

master
rdrew 2 years ago
parent
commit
09f280e91a
  1. 137
      css/global-style.css
  2. 2
      css/global-style.css.map
  3. 93
      css/sass/components/_footer.scss
  4. BIN
      images/shieldfooter.png
  5. BIN
      images/upei_facebook.png
  6. BIN
      images/upei_flickr.png
  7. BIN
      images/upei_twitter.png
  8. BIN
      images/upei_youtube.png
  9. 149
      templates/components/footer_content.html.twig
  10. 27
      templates/components/region--footer.html.twig
  11. 53
      templates/components/region--subfooter.html.twig

137
css/global-style.css

@ -7466,7 +7466,7 @@ ul.tabs {
.region-footer {
background: #333;
border-bottom: 4px solid #8C2004;
border-bottom: 4px solid #8c2004;
}
.region-subfooter {
@ -7475,6 +7475,141 @@ ul.tabs {
padding-bottom: 1rem;
}
footer {
margin: 1rem;
}
footer .footer-links {
border-left: 1px solid #676767;
padding-left: 0.5rem;
}
footer .menu {
flex-wrap: nowrap;
flex-direction: column;
margin: 0;
}
footer .container {
padding-right: 0.625rem;
padding-left: 0.625rem;
max-width: 75rem;
margin-left: auto;
margin-right: auto;
display: flex;
flex-flow: row wrap;
}
@media print, screen and (min-width: 40em) {
footer .container {
padding-right: 0.9375rem;
padding-left: 0.9375rem;
}
}
footer .title {
color: #fefefe;
font-size: 1.125rem;
font-weight: 600;
margin-top: 1rem;
}
footer .menu a {
color: #ccc;
font-size: 0.75rem;
padding: 0.3125rem 0;
}
.region-footer .container {
padding-right: 0.625rem;
padding-left: 0.625rem;
max-width: 75rem;
margin-left: auto;
margin-right: auto;
display: flex;
flex-flow: row wrap;
}
@media print, screen and (min-width: 40em) {
.region-footer .container {
padding-right: 0.9375rem;
padding-left: 0.9375rem;
}
}
.region-footer .container .block {
flex: 1 1 0;
width: auto;
margin-left: 0.625rem;
margin-right: 0.625rem;
}
.region-subfooter .container {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
}
@media print, screen and (min-width: 40em) {
.region-subfooter .container {
justify-content: space-between;
}
}
.footeraddress .address {
color: white;
font-size: 0.8em;
padding-bottom: 5px;
}
@media print, screen and (max-width: 39.99875em) {
.footeraddress .address {
margin-bottom: 1rem;
}
}
.footeraddress .links-last {
display: none;
}
@media print, screen and (min-width: 40em) {
.footeraddress .links-last {
display: flex;
color: #a8a9a7;
}
}
.footeraddress .links-last a {
color: #ccc;
font-size: 0.8em;
line-height: 2;
padding: 0 4px;
}
.footeraddress .links-last a:first-child {
color: #ccc;
font-size: 0.8em;
padding-left: 0px;
}
.socialmedia ul {
padding: 0;
margin: 0;
list-style: none;
position: relative;
display: flex;
flex-wrap: wrap;
}
[data-whatinput=mouse] .socialmedia ul li {
outline: 0;
}
.socialmedia ul a,
.socialmedia ul .button {
line-height: 1;
text-decoration: none;
display: block;
padding: 0.7rem 1rem;
}
.socialmedia ul input,
.socialmedia ul select,
.socialmedia ul a,
.socialmedia ul button {
margin-bottom: 0;
}
.socialmedia ul input {
display: inline-block;
}
.socialmedia ul a {
padding: 0;
padding-right: 0.5rem;
}
.region-header {
display: flex;
flex-wrap: nowrap;

2
css/global-style.css.map

File diff suppressed because one or more lines are too long

93
css/sass/components/_footer.scss

@ -1,9 +1,100 @@
.region-footer {
background: $black;
border-bottom: 4px solid #8C2004;
border-bottom: 4px solid #8c2004;
}
.region-subfooter {
background: darken($black, 10%);
padding-top: $global-padding;
padding-bottom: $global-padding;
}
footer {
margin: $global-margin;
.footer-links {
border-left: 1px solid #676767;
padding-left: 0.5rem;
}
.menu {
@include menu-direction(vertical);
margin:0;
}
.container {
@include xy-grid-container;
@include xy-grid;
.block {
//@include xy-cell(auto);
}
}
.title {
color: #fefefe;
font-size: 1.125rem;
font-weight: 600;
margin-top: 1rem;
}
.menu a {
color: #ccc;
font-size: 0.75rem;
padding: 0.3125rem 0;
}
}
.region-footer .container {
@include xy-grid-container;
@include xy-grid;
.block {
@include xy-cell(auto);
}
}
.region-subfooter .container {
@include xy-grid;
justify-content:space-around;
@include breakpoint(medium) {
justify-content: space-between;
}
}
.footeraddress {
.address {
color: white;
font-size: .8em;
padding-bottom: 5px;
@include breakpoint(small only) {
margin-bottom:$global-margin;
}
}
.links-last {
display:none;
@include breakpoint(medium) {
display:flex;
color: #a8a9a7;
}
a {
//display:block !important;
}
//display: flex;
}
.links-last a {
color: #ccc;
font-size: .8em;
line-height: 2;
padding: 0 4px;
}
.links-last a:first-child {
color: #ccc;
font-size: .8em;
padding-left: 0px;
}
}
.socialmedia ul {
@include menu-base();
a {
padding: 0;
padding-right:.5rem;
}
}

BIN
images/shieldfooter.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.6 KiB

BIN
images/upei_facebook.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
images/upei_flickr.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
images/upei_twitter.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
images/upei_youtube.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

149
templates/components/footer_content.html.twig

@ -0,0 +1,149 @@
<div class="container">
<div id="block-block-5" class="block block--block block-block-5 block--block-5">
<div class="block__content">
<div class="footer-links bottom-links menu-01 bl-first">
<h2 class="title">About the Library</h2>
<ul class="menu">
<li class="leaf first"><a href="/site-index" title="All basic pages on the site">Site Index</a></li>
<li class="leaf"><a href="/libraryhistory">Library Mission/History</a></li>
<li class="leaf"><a href="/contact">Contact</a></li>
<li class="leaf"><a href="/people">Library Staff</a></li>
<li class="leaf"><a href="/event-type/news">News</a></li>
<li class="leaf"><a href="/gift">Donations</a></li>
<li class="leaf"><a href="/policies">Policies</a></li>
<li class="leaf"><a href="/visiting">Visitors</a></li>
<li class="leaf"><a href="/units">Organization</a></li>
<li class="leaf"><a href="/floorplans">Floor Plans</a></li>
<li class="leaf"><a href="/hours">Hours</a></li>
<li class="leaf"><a href="/feedback">Feedback</a></li>
</ul>
<h2 class="title">Students</h2>
<ul class="menu">
<li class="leaf"><a href="https://portal.upei.ca">MyUPEI</a></li>
<li class="leaf"><a href="https://outlook.office.com/">Student Email</a></li>
<li class="leaf"><a href="http://moodle.upei.ca">Moodle</a></li>
</ul>
</div>
</div>
</div>
<div id="block-block-7" class="block block--block block-block-7 block--block-7">
<div class="block__content">
<div class="footer-links bottom-links menu-02">
<h2 class="title">Using the Library</h2>
<ul class="menu">
<li class="leaf"><a href="/printing">Printing</a></li>
<li class="leaf"><a href="/study_rooms">Study Rooms</a> | <a href="/quiet">Quiet Areas</a> | <a href="/study_zones">Zones Map</a></li>
<li class="leaf"><a href="https://rooms.library.upei.ca/room_reservations">Book a Study Room</a></li>
<li class="leaf"><a href="/reserves">Reserves</a></li>
<li class="leaf"><a href="/wireless">Wireless Access</a></li>
<li class="leaf"><a href="/scan">Scanning</a>/<a href="/printing/copylaminate">Copying</a></li>
<li class="leaf"><a href="/forms">Forms</a></li>
<li class="leaf"><a href="/loaning">Borrow/Renew/Return</a></li>
<li class="leaf"><a href="/offcampus">Residence/Off-Campus Access</a></li>
<li class="leaf"><a href="/computers">Computers&nbsp;</a> | <a href="/laptop/borrow">Laptops</a></li>
<li class="leaf"><a href="https://library.upei.ca/equipment">Equipment for Checkout</a></li>
<li class="leaf"><a href="/collaboratory">Multimedia/ Collaboratory</a></li>
<li class="leaf"><a href="/languagelab">Language Lab</a></li>
<li class="leaf"><a href="https://library.upei.ca/graduate">Graduate Student Services</a></li>
<li class="leaf"><a href="/faculty">Faculty&nbsp;Services</a></li>
<li class="leaf"><a href="/alumni">Alumni Services</a></li>
<li class="leaf"><a href="/alumni/community">Community Services</a></li>
<li class="leaf"><a href="/accessibility">Accessibility</a></li>
</ul>
</div>
</div>
</div>
<div id="block-block-9" class="block block--block block-block-9 block--block-9">
<div class="block__content">
<div class="footer-links bottom-links menu-03">
<h2 class="title">Research Help</h2>
<ul class="menu">
<li class="leaf"><a href="/onesearch_about">OneSearch</a></li>
<li class="leaf"><a href="/refworks">RefWorks</a></li>
<li class="leaf"><a href="http://search.ebscohost.com/login.aspx?authtype=ip,guest&amp;direct=true&amp;custid=uprince&amp;db=edspub&amp;groupid=main&amp;profile=eds&amp;plp=1">Journal Titles</a></li>
<li class="leaf"><a href="/ill">Interlibrary Loan</a></li>
<li class="leaf"><a href="http://islandpines.roblib.upei.ca/">Catalogue</a></li>
<li class="leaf first"><a href="/books">Find Books</a></li>
<li class="leaf"><a href="/articles">Find Articles</a></li>
<li class="leaf"><a href="/databases">Databases</a></li>
<li class="leaf"><a href="/sg">Subject Guides</a></li>
<li class="leaf"><a href="/subjectlibrarians">Subject Librarians</a></li>
<li class="leaf"><a href="https://library.upei.ca/systematic-review">Systematic, Scoping, and Other Reviews</a></li>
<li class="leaf"><a href="/askus">Ask Us Live Help</a></li>
<li class="leaf"><a href="/tours">Tours, Tutorials, Quizzes</a></li>
<li class="leaf"><a href="/citing_sources">Citing Sources</a></li>
<li class="leaf"><a href="/copyright">Copyright Info</a></li>
<li class="leaf"><a href="/peitips">PEI Collection</a></li>
</ul>
</div>
</div>
</div>
<div id="block-block-11" class="block block--block block-block-11 block--block-11">
<div class="block__content">
<div class="footer-links bottom-links menu-04">
<h2 class="title">PEI Collections</h2>
<ul class="menu">
<li class="leaf first"><a href="http://library.upei.ca/peicollection/archives">PEI Collection</a></li>
<li class="leaf first"><a href="http://library.upei.ca/peicollection/archives#archives">University Archives</a></li>
<li class="leaf"><a href="http://www.refworks.com/refshare2?site=035181146456000000/190-95-8SKCK711133224/PEIPAD">PEI Periodical Articles Database (PEI PAD)</a></li>
</ul>
<h2 class="title">Digital Collections</h2>
<ul class="menu">
<li class="leaf first"><a href="http://booklives.ca">BookLives</a></li>
<li class="leaf first"><a href="http://bowingdownhome.ca/">Bowing Down Home</a></li>
<li class="leaf first"><a href="http://islandscholar.ca/">IslandScholar</a></li>
<li class="leaf"><a href="http://islandarchives.ca">Island Archives</a></li>
<li class="leaf"><a href="http://islandlives.ca" title="PEI's local histories and related publications">Island Lives</a></li>
<li class="leaf"><a href="http://islandvoices.ca">IslandVoices</a></li>
<li class="leaf"><a href="http://islandimagined.ca" title="Digitized historical maps of PEI">IslandImagined</a></li>
<li class="leaf"><a href="http://vre2.upei.ca/cap/">IslandNarratives</a></li>
<li class="leaf"><a href="http://islandnewspapers.ca">IslandNewspapers</a></li>
<li class="leaf"><a href="http://kindredspaces.ca">Kindred Spaces</a></li>
<li class="leaf"><a href="http://www.peildo.ca/">PEI Documents Online</a></li>
<li class="leaf"><a href="http://islandstories.ca/">Telling Island Stories</a></li>
<li class="leaf"><a href="http://upei.cairnrepo.org/islandora/object/islandora%3A552">PEI Postcards</a></li>
</ul>
</div>
</div>
</div>
<div id="block-block-13" class="block block--block block-block-13 block--block-13">
<div class="block__content">
<div class="footer-links bottom-links menu-05">
<h2 class="title">Projects and Institutes</h2>
<ul class="menu">
<li class="leaf first"><a href="/vre">Virtual Research Environments</a></li>
<li class="leaf first"><a href="https://data.upei.ca/">Research Data Management</a></li>
<li class="leaf"><a href="http://islandora.ca/">Islandora</a></li>
<li class="leaf"><a href="http://www.lmmontgomery.ca/">LMMI</a></li>
<li class="leaf"><a href="http://library.upei.ca/ebm">Digitization Services and Facility</a></li>
<li class="leaf"><a href="http://pressbooks.library.upei.ca/">Pressbooks&nbsp;- publishing platform</a></li>
</ul>
<h2 class="title">Connect with the Library</h2>
<ul class="menu social-media">
<li><a href="https://www.facebook.com/RobertsonLibrary"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href="https://twitter.com/UPEILibrary"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href="https://instagram.com/robertsonlibrary"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
</ul>
<a class="staff-tasks button success expanded" href="/staff_tasks">Staff Tasks</a></div>
</div>
</div>
</div>

27
templates/components/region--footer.html.twig

@ -0,0 +1,27 @@
{#
/**
* @file
* Theme override to display a region.
*
* Available variables:
* - content: The content for this region, typically blocks.
* - attributes: HTML attributes for the region <div>.
* - region: The name of the region variable as defined in the theme's
* .info.yml file.
*
* @see template_preprocess_region()
*/
#}
{%
set classes = [
'region',
'region-' ~ region|clean_class,
]
%}
{% if content %}
<div{{ attributes.addClass(classes) }}>
{% include '@roblib_2023/templates/components/footer_content.html.twig' %}
{{ content }}
</div>
{% endif %}

53
templates/components/region--subfooter.html.twig

@ -0,0 +1,53 @@
{%
set classes = [
'region',
'region-' ~ region|clean_class,
]
%}
{% if content %}
<div{{ attributes.addClass(classes) }}>
{{ content }}
{#copied from old footer#}
<div class="container">
<div id="block-block-17" class="block block--block block-block-17 block--block-17">
<div class="block__content">
<div class="footeraddress">
<div class="addressleft">
<div class="address">550 University Avenue, Charlottetown<br>
Prince Edward Island, Canada C1A 4P3</div>
<div style="color:white;font-size: .8em;padding-bottom:5px;">On traditional and unceded Mi'kmaq territory</div>
<div class="links-last"><a href="http://www.upei.ca/emergency/">Emergency Preparedness</a> | <a href="http://home.upei.ca/about-upei/publications">Publications</a> | <a href="http://www.upei.ca/policy/gov/brd/gnl/0017">Privacy Policy</a> | <a href="http://home.upei.ca/disclaimer">Disclaimer</a> | <a href="http://home.upei.ca/about-website">About this Website</a> | <a href="http://home.upei.ca/directory">Contact UPEI</a>&nbsp;&nbsp;&nbsp;</div>
</div>
</div>
</div>
</div>
<div id="block-block-19" class="block block--block block-block-19 block--block-19">
<div class="block__content">
<div id="address_right">
<div class="socialmedia">
<ul>
<li><a class="noicon facebook" href="http://facebook.com/UniversityofPEI"><img src="//files.upei.ca/misc/social/upei_facebook.png" style="width: 20px; height: 20px;"></a></li>
<li><a class="noicon twitter" href="http://twitter.com/upei"><img src="//files.upei.ca/misc/social/upei_twitter.png" style="width: 20px; height: 20px;"></a></li>
<li><a class="noicon youtube" href="http://youtube.com/UofPEI"><img src="//files.upei.ca/misc/social/upei_youtube.png" style="width: 20px; height: 20px;"></a></li>
<li><a class="noicon flickr" href="http://flickr.com/groups/upei"><img src="//files.upei.ca/misc/social/upei_flickr.png" style="width: 30px; height: 30px;"></a>
<ul>
</ul>
</li>
</ul>
</div>
<div class="footerlogo"><a href="http://www.upei.ca"><img src="//files.upei.ca/misc/shieldfooter.png" style="width: 142px; height: 56px;"></a></div>
</div>
</div>
</div>
</div>
{#end paste#}
</div>
{% endif %}
Loading…
Cancel
Save