From 39c981862047df2d01a293edf34c9c5bf36d123e Mon Sep 17 00:00:00 2001
From: ebremner <ebremner@uwaterloo.ca>
Date: Thu, 19 Dec 2019 15:36:12 -0500
Subject: [PATCH] ISTWCMS-3506: adding skeleton footer
---
source/_patterns/00-config/_breakpoints.scss | 67 +++++++++++++++++++
.../_patterns/03-layouts/footer/_footer.scss | 30 ++++++++-
.../_patterns/03-layouts/footer/footer.twig | 17 +++--
.../site-container/_site-container.scss | 10 +++
.../contact-info/_contact-info.scss | 15 +++++
.../contact-info/contact-info.twig | 24 +++++++
6 files changed, 153 insertions(+), 10 deletions(-)
create mode 100644 source/_patterns/00-config/_breakpoints.scss
create mode 100644 source/_patterns/03-layouts/site-container/_site-container.scss
create mode 100644 source/_patterns/04-components/contact-info/_contact-info.scss
create mode 100644 source/_patterns/04-components/contact-info/contact-info.twig
diff --git a/source/_patterns/00-config/_breakpoints.scss b/source/_patterns/00-config/_breakpoints.scss
new file mode 100644
index 00000000..76c5bb7d
--- /dev/null
+++ b/source/_patterns/00-config/_breakpoints.scss
@@ -0,0 +1,67 @@
+/**
+ * Breakpoint Configuration
+ * @see https://github.com/Team-Sass/breakpoint/wiki
+ *
+ */
+
+/////////
+// Singularity variables
+//
+@include breakpoint-set('to ems', true);
+
+// Breakpoints variables
+$main-menu-medium: 43em;
+$xs: 15em;
+$small: 25em;
+$medium: 30em;
+$large: 49.81em;
+$xl: 63.19em;
+$max-width: $xl;
+
+/// Mixin - xs Breakpoint
+/// Allows easier @include xs {} syntax
+@mixin xs {
+ @include breakpoint($xs) {
+ @content;
+ }
+}
+
+/// Mixin - small Breakpoint
+/// Allows easier @include small {} syntax
+@mixin small {
+ @include breakpoint($small) {
+ @content;
+ }
+}
+
+/// Mixin - medium Breakpoint
+/// Allows easier @include medium {} syntax
+@mixin medium {
+ @include breakpoint($medium) {
+ @content;
+ }
+}
+
+/// Mixin - large Breakpoint
+/// Allows easier @include large {} syntax
+@mixin large {
+ @include breakpoint($large) {
+ @content;
+ }
+}
+
+/// Mixin - xl Breakpoint
+/// Allows easier @include xl {} syntax
+@mixin xl {
+ @include breakpoint($xl) {
+ @content;
+ }
+}
+
+/// Mixin - max-width Breakpoint
+/// Allows easier @include max-width {} syntax
+@mixin max-width {
+ @include breakpoint($max-width) {
+ @content;
+ }
+}
diff --git a/source/_patterns/03-layouts/footer/_footer.scss b/source/_patterns/03-layouts/footer/_footer.scss
index 0d64cd00..a21e2148 100644
--- a/source/_patterns/03-layouts/footer/_footer.scss
+++ b/source/_patterns/03-layouts/footer/_footer.scss
@@ -1,4 +1,32 @@
// @file
// Styles for Footer Layout.
-// .l-footer {}
+.uw-footer {
+ background-color: #000;
+ margin-top: 0;
+ padding: 0;
+ width: 100%;
+
+ &__wrapper {
+ display: grid;
+ grid-template-columns: 100%;
+ grid-template-rows: auto auto auto;
+ margin-left: auto;
+ margin-right: auto;
+ max-width: 63rem;
+ padding: 1rem;
+
+ @include large {
+ grid-template-columns: 25% auto 30%;
+ grid-template-rows: auto;
+ }
+
+ .uw-footer-address {
+ grid-column: 1 / 2;
+ grid-row: 1 / 2;
+ margin-left: auto;
+ margin-right: auto;
+ padding-bottom: 1rem;
+ }
+ }
+}
diff --git a/source/_patterns/03-layouts/footer/footer.twig b/source/_patterns/03-layouts/footer/footer.twig
index 46755d02..f848ba82 100644
--- a/source/_patterns/03-layouts/footer/footer.twig
+++ b/source/_patterns/03-layouts/footer/footer.twig
@@ -1,11 +1,10 @@
-<footer class="l-footer" role="contentinfo">
- {% if has_constrain %}
- <div class="l-constrain {{ constrain_modifier_classes }}">
- {% endif %}
- {% block content %}
- Footer Content
- {% endblock %}
- {% if has_constrain %}
+<footer class="uw-footer" role="contentinfo">
+ <div class="uw-footer__wrapper">
+ <div class="uw-footer__address">
+ {% include "@components/contact-info/contact-info.twig" %}
+ </div>
+ {% block content %}
+ I AM THE FOOTER
+ {% endblock %}
</div>
- {% endif %}
</footer>
\ No newline at end of file
diff --git a/source/_patterns/03-layouts/site-container/_site-container.scss b/source/_patterns/03-layouts/site-container/_site-container.scss
new file mode 100644
index 00000000..1c8dc25e
--- /dev/null
+++ b/source/_patterns/03-layouts/site-container/_site-container.scss
@@ -0,0 +1,10 @@
+.uw-site-container {
+ display: grid;
+ grid-template-columns: 100%;
+
+ .uw-header {
+ grid-column: 1 / 2;
+ grid-row: 1 / 2;
+ }
+
+}
\ No newline at end of file
diff --git a/source/_patterns/04-components/contact-info/_contact-info.scss b/source/_patterns/04-components/contact-info/_contact-info.scss
new file mode 100644
index 00000000..726729bb
--- /dev/null
+++ b/source/_patterns/04-components/contact-info/_contact-info.scss
@@ -0,0 +1,15 @@
+.uw-footer-address {
+ background-color: #000;
+ color: #fff;
+
+ .uw-footer-phone {
+ a {
+ color: #fdd54f;
+ text-decoration: none;
+ }
+
+ a:hover {
+ text-decoration: underline;
+ }
+ }
+}
diff --git a/source/_patterns/04-components/contact-info/contact-info.twig b/source/_patterns/04-components/contact-info/contact-info.twig
new file mode 100644
index 00000000..dcee5406
--- /dev/null
+++ b/source/_patterns/04-components/contact-info/contact-info.twig
@@ -0,0 +1,24 @@
+<div class="uw-footer-address" about="//uwaterloo.ca/" typeof="v:VCard">
+ <div class="hidden">
+ <div property="v:fn">University of Waterloo</div>
+ <div rel="v:org">
+ <div property="v:organisation-name">University of Waterloo</div>
+ </div>
+ <div rel="v:geo">
+ <div property="v:latitude">43.471468</div>
+ <div property="v:longitude">-80.544205</div>
+ </div>
+ </div>
+ <div rel="v:adr">
+ <div property="v:street-address">200 University Avenue West</div>
+ <div>
+ <span property="v:locality">Waterloo</span>,
+ <span property="v:region">ON</span>,
+ <span property="v:country-name">Canada</span>
+ <span property="v:postal-code">N2L 3G1</span>
+ </div>
+ </div>
+ <div class="uw-footer-phone" rel="v:tel">
+ <a href="tel:+1-519-888-4567" property="rdf:value">+1 519 888 4567</a>
+ </div>
+</div>
\ No newline at end of file
--
GitLab