Przeglądaj źródła

responsive styling - overlay title, embedded button adjust

tags/0.9.0
Alej 4 lat temu
rodzic
commit
47b6a69137
1 zmienionych plików z 20 dodań i 8 usunięć
  1. 20
    8
      vue-theme/src/components/hero.vue

+ 20
- 8
vue-theme/src/components/hero.vue Wyświetl plik

@@ -121,10 +121,13 @@ export default {
121 121
             left: 0
122 122
             overflow: clip
123 123
             h2
124
-                font-size: $ms-1
124
+                font-size: $ms-2
125
+                margin: 0
125 126
                 color: $cia_white
126 127
                 text-shadow: 1px 1px $cia_black
127
-                max-width: 70vw
128
+                max-width: 90vw
129
+            p 
130
+                display: none
128 131
             a 
129 132
                 color: inherit 
130 133
                 text-decoration: none
@@ -149,20 +152,19 @@ export default {
149 152
             position: absolute
150 153
             min-height: $ms-7
151 154
             min-width: $ms-7
152
-            background-color: rgba(170,17,0,0.4)
155
+            background-color: rgba(170,17,0,0.5)
153 156
             border-radius: 50%
154 157
             border: 2px white solid
155 158
             &:hover
156
-                border: 2px #DDD solid
157
-                background-color: rgba(170,170,170,0.7)
159
+                background-color: rgba(170,17,0,0.8)
158 160
             &:after
159 161
                 content: ""
160 162
                 position: absolute
161
-                top: 30%
162
-                left: 40%
163
+                top: 19%
164
+                left: 31%
163 165
                 border-style: solid
164 166
                 border-width: 1em 0 1em 1.6em
165
-                border-color: transparent transparent transparent white
167
+                border-color: transparent transparent transparent rgba(255, 255, 255, 0.7)
166 168
 
167 169
 @media (min-width: $medium)
168 170
     button
@@ -179,8 +181,18 @@ export default {
179 181
         .embedded
180 182
             /* min-height: 50vh */
181 183
             min-height: 54vw
184
+        .blank
185
+            button
186
+                &:after
187
+                    top: 19%
188
+                    left: 34%
189
+                    border-width: 1.4em 2.2em 1.5em
182 190
         &--image
183 191
             &--overlay
184 192
                 h2
185 193
                     font-size: 4vw
194
+                    margin-bottom: $ms--7
195
+                    max-width: 70vw
196
+                p 
197
+                    display: block
186 198
 </style>

Ładowanie…
Anuluj
Zapisz