footer { .top, .bottom { display: grid; max-width: 72rem; margin: 0 auto; } .top { grid-template-columns: 4fr 2.2fr 2.3fr 2fr; padding: 4rem 4rem 2rem 4rem; .links, .message { list-style-type: none; white-space:nowrap; padding: 0; } .message { margin: 0; .logo { width: 8rem; height: 2.25rem; img { max-width: 100%; } } .social { padding: 1.5rem .15rem; .icon { display: inline-block; margin: 0 .5rem; /* border: .1rem solid var(--br-color); */ /* border-radius: var(--radius); */ a { display: block; /* width: 1.95rem; height: 1.95rem; */ padding: 0; margin: 0 .15rem; /* border-radius: var(--radius); */ span { font-size: 1.25rem; } &:hover span { color: var(--s-color); /* background: var(--brh-color); */ } } } } } .links { margin: 0; h4 { color: var(--f-color); font-size: 1rem; font-weight: 500; padding: 0; margin: .2rem 0 1rem 0; } li { margin: .5rem 0; &:first-of-type { margin: 0 } a { color: var(--ft-color); font-size: 1.1rem; font-weight: 600; &:hover { color: var(--f-color) } } } } } .bottom { grid-template-columns: 2fr 1fr; padding: 2rem 4rem 4rem 4.5rem; p { color: var(--f-color); } .pitch { grid-row: 1; font-size: 1.25rem; font-weight: 600; margin: 0 0 .5rem 0; } .copy, .tagline { grid-row: 2; font-size: .85rem; font-weight: 500; margin: 0; } .copy { text-align: right; .icon-copyright { font-size: .7rem; } } } } /* footer { .top { .message { .social { padding: .75rem .3rem; .icon { display: inline-block; a { display: block; width: 2.25rem; height: 2.25rem; padding: .8rem .6rem; margin: 0 .25rem; border: .1rem solid var(--br-color); border-radius: var(--radius-full); span { font-size: 1.1rem; } &:hover { background: var(--brh-color); } } } .gab a { padding: .4rem .325rem; } .minds a { padding: .4rem .525rem; } .twitter, .dribbble, .rss { a { padding: .45rem .375rem; } } @-moz-document url-prefix() { .icon a { padding: .55rem .55rem; margin: 0 .25rem; } .gab a { padding: .5rem .45rem; } .minds a { padding: .5rem .675rem; } .dribbble a { padding: .55rem .525rem; } .discuss a { top: .05rem; span { font-size: 1.2rem; } } } } } } } */