1
+ .of-footer-main {
2
+ background : var (--of--color-brand--300 );
3
+ color : var (--of--color-white--100 );
4
+ position : relative ;
5
+ width : 100% ;
6
+ @media (min-width : $ov--breakpoint--lg ) {
7
+ display : grid ;
8
+ grid-template-columns : minmax (50% , 600px ) 1fr ;
9
+ grid-gap : var (--of--spacer--xl );
10
+ grid-template-areas :
11
+ " meta social"
12
+ " copy copy "
13
+ ;
14
+
15
+ }
16
+ & :before {
17
+ content :' ' ;
18
+ height : 5px ;
19
+ width : 100% ;
20
+ position : absolute ;
21
+ top : 0 ;
22
+ left : 0 ;
23
+ background : linear-gradient (to right , var (--of--color-brand--50 ) 25% , var (--of--color-brand--100 ) 25% , var (--of--color-brand--100 ) 50% , var (--of--color-brand--100 ) 50% , var (--of--color-brand--200 ) 50% , var (--of--color-brand--200 ) 75% , var (--of--color-brand--300 ) 75% );
24
+ }
25
+ padding-top : var (--of--spacer--2xl );
26
+ .of-heading {
27
+ margin-bottom : var (--of--spacer--sm );
28
+ }
29
+ & __meta {
30
+ grid-area : meta;
31
+ padding : 0 var (--of--spacer--lg ) var (--of--spacer--lg ) var (--of--spacer--lg );
32
+ & > * :not (:last-child ){
33
+ margin-bottom : var (--of--spacer--sm );
34
+ }
35
+ .of-link-list {
36
+ flex-direction : column ;
37
+ @media (min-width : $ov--breakpoint--lg ) {
38
+ flex-direction : row ;
39
+ }
40
+ }
41
+ @media (min-width : $ov--breakpoint--lg ) {
42
+ flex-direction : row ;
43
+ padding : 0 0 0 var (--of--spacer--2xl );
44
+ .of-link-list__li {
45
+
46
+ & :not (:last-of-type ) {
47
+ margin-right : var (--of--spacer--sm );
48
+ border-right : 1px solid var (--of--color-brand--100 );
49
+ padding-right : var (--of--spacer--sm );
50
+ }
51
+ }
52
+ .of-link-list__a {
53
+ text-decoration : underline ;
54
+ }
55
+ }
56
+ img {
57
+ max-width : 200px ;
58
+ }
59
+ }
60
+ & __social {
61
+ grid-area : social;
62
+ padding :var (--of--spacer--lg );
63
+ @media (min-width : $ov--breakpoint--lg ){
64
+ padding :0 ;
65
+ }
66
+ .of-link-list {
67
+ & __li {
68
+ margin-right : var (--of--spacer--md );
69
+ display : flex ;
70
+ }
71
+ & __a {
72
+ display : flex ;
73
+ align-items : center ;
74
+ font-size : 2rem ;
75
+ & :hover , & :active , & :focus {
76
+ text-decoration : none ;
77
+ opacity : .8 ;
78
+ }
79
+ }
80
+ }
81
+ input {
82
+ margin-bottom : var (--of--spacer--lg );
83
+ border-radius : var (--of--BorderRadius--lg );
84
+ border : none ;
85
+ text-indent : 1ch ;
86
+ min-width : 250px ;
87
+ }
88
+ }
89
+ & __copyright {
90
+ grid-area : copy ;
91
+ display : flex ;
92
+ color : var (--of--color-white--100 );
93
+ padding : var (--of--spacer--xl );
94
+ background : var (--of--color-black--300 );
95
+ .of-link-list__li {
96
+ margin-left : var (--of--spacer--sm );
97
+ }
98
+ }
99
+ .of-link-list {
100
+ display : flex ;
101
+ flex-wrap : wrap ;
102
+ }
103
+ }
0 commit comments