barua-ui 0.9.1 → 0.9.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/css/components/marketing.css +12 -1
- package/package.json +1 -1
|
@@ -109,7 +109,10 @@
|
|
|
109
109
|
inset: 0;
|
|
110
110
|
z-index: 0;
|
|
111
111
|
pointer-events: none;
|
|
112
|
-
|
|
112
|
+
/* The cell scales with the viewport. Held at a fixed size it kept its
|
|
113
|
+
pixel grain while the hero got narrow, so on a phone the whisper of a
|
|
114
|
+
pattern became grey blocks sitting behind the headline. */
|
|
115
|
+
--b-tile: clamp(2.25rem, 5.5vw, 5.5rem);
|
|
113
116
|
/* The field paints its own ground, a shade off the page, and the squares
|
|
114
117
|
sit *lighter* on it — which is the only way the pattern is visible on a
|
|
115
118
|
white page and still barely there on a dark one. Two knobs, both
|
|
@@ -130,6 +133,14 @@
|
|
|
130
133
|
-webkit-mask-image: radial-gradient(120% 85% at 50% 0%, #000 0%, transparent 72%);
|
|
131
134
|
mask-image: radial-gradient(120% 85% at 50% 0%, #000 0%, transparent 72%);
|
|
132
135
|
}
|
|
136
|
+
/* A hero on a phone is a different shape: tall and narrow, with the words
|
|
137
|
+
starting much higher up. The field has to be done before they get there. */
|
|
138
|
+
@media (max-width: 40rem) {
|
|
139
|
+
.b-tile-field {
|
|
140
|
+
-webkit-mask-image: radial-gradient(150% 52% at 50% 0%, #000 0%, transparent 70%);
|
|
141
|
+
mask-image: radial-gradient(150% 52% at 50% 0%, #000 0%, transparent 70%);
|
|
142
|
+
}
|
|
143
|
+
}
|
|
133
144
|
/* Anything that has to sit on top of it says so once. */
|
|
134
145
|
.b-tile-field ~ * { position: relative; z-index: 1; }
|
|
135
146
|
|