Skip to content

Commit 605fcc5

Browse files
committed
ticket ui fixes
1 parent 4251402 commit 605fcc5

File tree

6 files changed

+35
-17
lines changed

6 files changed

+35
-17
lines changed

docs/assets/index-B2DWdlsJ.css

-1
This file was deleted.

docs/assets/index-BW0xLFLI.css

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

docs/assets/index-Bd7u1y3Y.js docs/assets/index-uf88RFse.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

docs/index.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
<link rel="icon" href="/favicon.ico" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<title>RoboCon - Robot Framework Conference</title>
8-
<script type="module" crossorigin src="/assets/index-Bd7u1y3Y.js"></script>
9-
<link rel="stylesheet" crossorigin href="/assets/index-B2DWdlsJ.css">
8+
<script type="module" crossorigin src="/assets/index-uf88RFse.js"></script>
9+
<link rel="stylesheet" crossorigin href="/assets/index-BW0xLFLI.css">
1010
</head>
1111
<body>
1212
<div id="app"></div>

src/components/SectionRow.vue

+3-3
Original file line numberDiff line numberDiff line change
@@ -34,15 +34,15 @@ const components = renderEntryList(props.content)
3434
3535
& > div {
3636
scroll-snap-align: start;
37-
scroll-margin-inline: max(calc((100vw - var(--row-width) * 1) / 2 + 1rem), 0rem);
37+
scroll-margin-inline: max(calc((100vw - var(--layout-container-narrow-max-width) * 1) / 2 + 1rem), 0rem);
3838
}
3939
& > div:first-child {
4040
scroll-snap-align: start;
41-
margin-left: max(calc((100vw - var(--row-width) * 1) / 2 + 1rem), 0rem);
41+
margin-left: max(calc((100vw - var(--layout-container-narrow-max-width) * 1) / 2 + 0rem), 0rem);
4242
}
4343
& > div:last-child {
4444
scroll-snap-align: end;
45-
margin-right: calc((100vw - (var(--row-width) / 3)) / 2 + 1rem);
45+
margin-right: calc((100vw - (var(--layout-container-narrow-max-width) / 3)) / 2 + 1rem);
4646
scroll-margin-right: 0;
4747
}
4848
@media screen and (max-width: 701px) {

src/components/TicketItem.vue

+28-10
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ const props = defineProps({
6363
.content {
6464
width: calc(100% - 7rem);
6565
height: calc(100% - 2.5rem);
66+
z-index: 2;
6667
@media screen and (max-width: 701px) {
6768
width: calc(100% - 7rem);
6869
height: calc(100% - 4rem);
@@ -101,7 +102,7 @@ const props = defineProps({
101102
color: var(--color-theme-secondary);
102103
}
103104
.ticket-container:hover .specular {
104-
filter: brightness(0.5) saturate(2.5);
105+
filter: filter(1) brightness(1.5);
105106
}
106107
.ticket-container:hover rect {
107108
stroke: var(--color-theme);
@@ -137,16 +138,23 @@ svg {
137138
border-radius: 1.25rem;
138139
}
139140
.specular {
140-
opacity: 0.2;
141+
opacity: 0.25;
141142
left: 2rem;
142143
top: 1rem;
143144
width: calc(100% - 4rem);
144145
height: calc(100% - 2rem);
145-
mix-blend-mode: difference;
146-
background-image: linear-gradient(130deg, rgba(200,200,200,1) 9%, #3b2f00 10%, rgba(150,150,150,1) 30%, #3b2f00 36%, #eeddaa 57%, #3b2f00 65%, rgba(170,170,170,1) 92%);
147-
background-attachment: fixed;
148-
background-size: 100%;
146+
background-image: linear-gradient(130deg, rgba(200, 200, 200, 1) 9%, #a38719 10%, rgba(150, 150, 150, 1) 30%, #6181ff 36%, #eeddaa 57%, #ede9ff 65%, rgb(54 115 255) 92%);
147+
background-size: 150vw;
149148
transition: filter 0.1s;
149+
background-position: 0% 0%;
150+
background-repeat: repeat;
151+
filter: brightness(1.5) blur(1px);
152+
/* background-position: 100% 0%; */
153+
154+
animation-name: bling;
155+
animation-duration: 1ms;
156+
animation-direction: alternate;
157+
animation-timeline: scroll(root);
150158
151159
@media screen and (max-width: 701px) {
152160
width: calc(100% - 5rem);
@@ -155,8 +163,16 @@ svg {
155163
top: 1.5rem;
156164
}
157165
}
166+
@keyframes bling {
167+
from {
168+
background-position: 0vw 0;
169+
}
170+
to {
171+
background-position: 150vw 0;
172+
}
173+
}
158174
.golden {
159-
background-image: linear-gradient(130deg, rgba(200, 200, 200, 1) 9%, #0f69d5 10%, rgba(150, 150, 150, 1) 30%, #1b43b1 36%, #7aacff 57%, #0016ff 65%, rgba(170, 170, 170, 1) 92%);
175+
background-image: linear-gradient(130deg, rgba(200, 200, 200, 1) 9%, #ffc800 10%, rgb(255 175 0) 30%, #ffef00 36%, #d5cabf 57%, #ffd45e 65%, rgba(170, 170, 170, 1) 92%);
160176
opacity: 0.3;
161177
filter: saturate(2);
162178
}
@@ -170,14 +186,16 @@ svg {
170186
background-position: -6% -32%;
171187
background-repeat: repeat;
172188
background-image: url(/img/rf-pattern.jpg);
189+
filter: brightness(1);
173190
}
174191
.mask2 {
175-
mix-blend-mode: color-burn;
192+
mix-blend-mode: hard-light;
193+
transform: translate3d(0, 0, 0);
176194
background-size: cover;
177195
/* background-image: url(/docs/img/ticket-depth.jpg), url(/img/ticket-depth.jpg); */
178196
background-image: url(/img/ticket-depth.jpg);
179-
opacity: 0.7;
180-
filter: brightness(0.8);
197+
opacity: 1;
198+
filter: invert();
181199
182200
}
183201
.text-container {

0 commit comments

Comments
 (0)