瀏覽代碼

responsive styling - overlay title, embedded button adjust

tags/0.9.0
Alej 4 年之前
父節點
當前提交
47b6a69137
共有 1 個文件被更改,包括 20 次插入8 次删除
  1. 20
    8
      vue-theme/src/components/hero.vue

+ 20
- 8
vue-theme/src/components/hero.vue 查看文件

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

Loading…
取消
儲存