Commit 169af56d authored by Martin Leblanc's avatar Martin Leblanc Committed by Kevin Paxman
Browse files

ISTWCMS-5062: css for the global footer font sizing, also flex adjustments to...

ISTWCMS-5062: css for the global footer font sizing, also flex adjustments to allow social icon to align in smaller viewports
parent 1862fe4c
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -3,68 +3,85 @@
.uw-footer {
background-color: #000;
margin-top: 0;
min-height: 3rem;
padding: 0;
width: 100%;
&__wrapper {
@include uw-contained-width;
display: grid;
grid-template-columns: 100%;
padding: gesso-spacing(sm);
padding-top: gesso-spacing(sm);
text-size-adjust: none;
@include xs {
grid-template-columns:50% 50%;
}
@include medium {
grid-template-columns: 28% auto 35%;
grid-template-columns:200px auto 14rem;
}
@include large {
grid-template-columns: 25% auto 30%;
grid-template-columns:246px auto 16rem;
}
}
&__address {
font-family: gesso-font-family(systemmedium);
font-size: gesso-font-size(-2);
grid-column: 1 / 2;
font-family: gesso-font-family(system);
font-size: gesso-font-size(-1);
grid-column: 1 / 3;
grid-row: 1 / 2;
margin-left: auto;
margin-right: auto;
padding-bottom: gesso-spacing(sm);
padding: gesso-spacing(sm) 0 gesso-spacing(md);
text-align:center;
@include medium {
grid-column: 1 / 3;
font-size: gesso-font-size(-2);
grid-column: 1 / 2;
grid-row: 1 / 2;
margin:0;
padding:0;
text-align:left;
}
@include large {
grid-column: 1 / 2;
grid-row: 1 / 2;
font-size: gesso-font-size(-1);
}
}
&__menu {
grid-column: 1 / 2;
grid-row: 2 / 3;
@include medium {
grid-column: 2 / 3;
grid-row: 1 / 2;
-webkit-font-smoothing: antialiased;
grid-column: 1 / 3;
padding-bottom: gesso-spacing(sm);
@include xs {
grid-column: 1 / 2;
grid-row: 2 / 3;
}
@include large {
@include medium {
grid-column: 2 / 3;
grid-row: 1 / 2;
}
}
&__social {
grid-column: 1 / 2;
//background:$test-color-2;
grid-column: 1 / 3;
grid-row: 3 / 4;
margin:0 auto;
margin-top:1rem;
max-width:16rem;
text-align: center;
width:100%;
@include xs {
grid-column: 2 / 3;
grid-row: 2 / 3;
}
@include medium {
grid-column: 3 / 4;
grid-row: 1 / 2;
margin:0;
padding-left:gesso-spacing(sm);
text-align: left;
}
......@@ -81,7 +98,7 @@
}
a {
font-family: gesso-font-family(systemmedium);
font-family: gesso-font-family(system);
font-size: gesso-font-size(-2);
text-decoration: none;
}
......
......@@ -6,15 +6,12 @@
display:flex;
flex-direction:row;
flex-wrap:wrap;
font-family: gesso-font-family(condensedbook);
font-size: rem(gesso-font-size(-3));
font-weight:300;
justify-content: flex-start;
letter-spacing: 0.045rem;
list-style-type: none;
padding-bottom: 1rem;
text-align: center;
text-transform: uppercase;
li {
border-color:gesso-grayscale(gray-6);
border-style: solid;
......@@ -24,89 +21,102 @@
margin: 0;
padding: 1rem;
text-align: center;
&:nth-child(1) {
border-width: 1px 0 0 1px;
}
&:nth-child(2) {
border-width: 1px 0 0 1px;
order: 2;
border-width:1px 1px 0;
//order: 2;
}
&:nth-child(3) {
border-width: 1px 0 0 1px;
order: 3;
//order: 3;
}
&:nth-child(4) {
border-width: 1px 0 0 1px;
order: 4;
border-width:1px 1px 0;
//order: 4;
}
&:nth-child(5) {
border-width: 1px;
order:5;
border-width: 1px 0 0 1px;
//order:5;
}
&:nth-child(6) {
border-width: 1px 1px 0;
order: 1;
//order: 1;
}
&:nth-child(7) {
border-width: 1px 1px 0;
order: 2;
border-width: 1px 0 0 1px;
//order: 2;
}
&:nth-child(8) {
border-width: 1px 1px 0;
order: 3;
//order: 3;
}
&:nth-child(9) {
border-width: 1px 1px 0;
order: 4;
border-width: 1px;
//order: 4;
}
@include xs {
padding: 0.25rem 0 0.25rem 1rem;
padding: 0 0 0 1rem;
text-align:left;
&:nth-child(1) {
border-width: 0 1px 0 0;
order:1;
//order:1;
}
&:nth-child(2) {
border-width: 0 1px 0 0;
order:2;
//order:2;
}
&:nth-child(3) {
border-width: 0 1px 0 0;
order:3;
//order:3;
}
&:nth-child(4) {
border-width: 0 1px 0 0;
order:4;
//order:4;
}
&:nth-child(5) {
border-width: 0;
order:5;
border-width: 0 1px 0 0;
//order:5;
}
&:nth-child(6) {
border-width: 0 1px 0 0;
order:1;
//order:1;
}
&:nth-child(7) {
border-width: 0 1px 0 0;
order:2;
//order:2;
}
&:nth-child(8) {
border-width: 0 1px 0 0;
order:3;
//order:3;
}
&:nth-child(9) {
border-width: 0 1px 0 0;
order:4;
//order:4;
}
}
@include medium {
flex: 1 0 33%;
padding: 0 0 0 1rem;
flex: 1 0 33%;
padding: 0 0.25rem 0 1rem;
&:nth-child(1),
&:nth-child(4),
&:nth-child(7){
border-width: 0 1px;
}
}
a {
display:block;
font-family: gesso-font-family(condensedbook);
font-size: rem(gesso-font-size(-1));
font-weight:300;
line-height:1.50;
outline:none;
text-decoration: none;
}
......
......@@ -4,13 +4,18 @@
flex-wrap: wrap;
justify-content: flex-start;
list-style-type: none;
margin: 0;
margin: 0 auto;
padding:0;
padding-bottom: gesso-spacing(sm);
@include xs {
margin: 0;
max-width: inherit;
}
li {
flex: 1;
padding-left:0;
padding-top: 0;
}
}
......
......@@ -8,7 +8,7 @@
text-align:center;
p{
color:gesso-brand(org-default,uw-white,lvl1);
font-family: gesso-font-family(systemmedium);
font-family: gesso-font-family(system);
font-size: rem(gesso-font-size(-2));
font-weight:200;
letter-spacing:0.5px;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment