Skip to content

Commit dcf680d

Browse files
MeMMa137MeMMa137
committed
Update general graphics again
1 parent 21a26cb commit dcf680d

File tree

5 files changed

+136
-46
lines changed

5 files changed

+136
-46
lines changed

‎app/views/layouts/application.html.erb‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<meta name="csrf-token" content="<%= form_authenticity_token %>">
99
<link rel="icon" type="image/png" href="https://files.slack.com/files-pri/T09V59WQY1E-F0A6UD211JS/animal.png?pub_secret=3e17f8e9df">
1010
<link rel="shortcut icon" type="image/png" href="https://files.slack.com/files-pri/T09V59WQY1E-F0A6UD211JS/animal.png?pub_secret=3e17f8e9df">
11-
<link rel="stylesheet" href="/stylesheets/application.css?v=8">
11+
<link rel="stylesheet" href="/stylesheets/application.css?v=18">
1212
<script defer src="/javascripts/application.js?v=2"></script>
1313
</head>
1414
<body data-page="<%= content_for?(:page) ? yield(:page) : '' %>">
@@ -20,9 +20,7 @@
2020
<% end %>
2121

2222
<%= yield %>
23-
<% unless content_for?(:page) && yield(:page) == 'signin' %>
24-
<img src="/images/img_2180.png" alt="bottom-left decoration" class="corner-img corner-img--left">
25-
<img src="/images/untitled_artwork.png" alt="bottom-right decoration" class="corner-img corner-img--right">
26-
<% end %>
23+
<img src="/images/img_2180.png" alt="bottom-left decoration" class="corner-img corner-img--left">
24+
<img src="/images/untitled_artwork.png" alt="bottom-right decoration" class="corner-img corner-img--right">
2725
</body>
2826
</html>

‎app/views/pages/faq.html.erb‎

Lines changed: 24 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -46,19 +46,35 @@
4646
</main>
4747

4848
<style>
49+
.page-title {
50+
font-size: 64px;
51+
letter-spacing: 0.5px;
52+
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
53+
margin-bottom: 10px;
54+
}
55+
4956
.faq-section {
5057
margin-bottom: 2rem;
5158
border-radius: 12px;
5259
}
5360

5461
.faq-section__title {
55-
color: #8b5cf6;
56-
font-size: 1.75rem;
62+
color: var(--gold);
63+
font-size: 2.5rem;
5764
font-weight: 700;
5865
margin: 0 0 1.5rem 0;
5966
padding-bottom: 1rem;
6067
border-bottom: 2px solid #f0f0f0;
6168
}
69+
.faq-section__title::after {
70+
content: "";
71+
display: block;
72+
width: 80px;
73+
height: 6px;
74+
border-radius: 6px;
75+
margin-top: 10px;
76+
background: linear-gradient(90deg, var(--accent), rgba(210, 127, 70, 0.2));
77+
}
6278

6379
.faq-qa {
6480
display: flex;
@@ -77,15 +93,15 @@
7793

7894
.faq-item__question {
7995
color: #1f2430;
80-
font-size: 1rem;
96+
font-size: 1.3rem;
8197
font-weight: 700;
8298
margin: 0 0 0.5rem 0;
8399
line-height: 1.4;
84100
}
85101

86102
.faq-item__answer {
87103
color: #6b7280;
88-
font-size: 0.95rem;
104+
font-size: 1.2rem;
89105
margin: 0;
90106
line-height: 1.6;
91107
}
@@ -101,7 +117,7 @@
101117

102118
.faq-list li {
103119
color: #1f2430;
104-
font-size: 0.95rem;
120+
font-size: 1.2rem;
105121
line-height: 1.6;
106122
padding-left: 1.75rem;
107123
position: relative;
@@ -111,13 +127,13 @@
111127
content: "•";
112128
position: absolute;
113129
left: 0;
114-
color: #8b5cf6;
130+
color: var(--accent);
115131
font-weight: bold;
116132
font-size: 1.2rem;
117133
}
118134

119135
.link {
120-
color: #8b5cf6;
136+
color: var(--accent);
121137
text-decoration: none;
122138
font-weight: 600;
123139
transition: opacity 0.2s ease;
@@ -129,7 +145,7 @@
129145
}
130146

131147
.highlight {
132-
color: #8b5cf6;
148+
color: var(--gold);
133149
font-weight: 700;
134150
}
135151
</style>

‎app/views/pages/shop.html.erb‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,26 @@
1515
<aside class="shop-categories card">
1616
<h3 class="shop-heading">Category</h3>
1717
<ul class="shop-category-list">
18-
<% categories = [ "Keyboard", "Mouse", "Monitor", "Headphones", "Webcam" ] %>
19-
<% categories.each_with_index do |cat, idx| %>
18+
<% categories_active = [ "Keyboard", "Mouse", "Monitor", "Headphones", "Webcam" ] %>
19+
<% categories_soon = [ "Chair", "PC Components", "Desktop Accessories", "Suggest Something!" ] %>
20+
<% categories_active.each_with_index do |cat, idx| %>
2021
<li>
2122
<button class="shop-category-item <%= 'is-active' if idx == 0 %>" data-target="cat-<%= cat.downcase %>">
2223
<%= cat %>
2324
</button>
2425
</li>
2526
<% end %>
27+
<% categories_soon.each do |cat| %>
28+
<li>
29+
<button class="shop-category-item" disabled>
30+
<span class="shop-category-item__label"><%= cat %></span>
31+
<img
32+
src="https://files.slack.com/files-pri/T09V59WQY1E-F0A73PBKWEN/1000_f_108839823_c2hrfq0hbz7wkf6ngjesajlakz74zm7b.jpg?pub_secret=76883edfeb"
33+
alt="Coming Soon"
34+
class="shop-category-item__badge">
35+
</button>
36+
</li>
37+
<% end %>
2638
</ul>
2739
</aside>
2840

@@ -34,7 +46,7 @@
3446
</div>
3547
</div>
3648

37-
<% categories.each_with_index do |cat, idx| %>
49+
<% categories_active.each_with_index do |cat, idx| %>
3850
<% item = @shop_items.find { |i| i.name.to_s.downcase.strip == cat.downcase } %>
3951
<% base_cost = (item&.cost || 0).to_i %>
4052
<div id="cat-<%= cat.downcase %>" class="shop-item-detail <%= 'is-active' if idx == 0 %>">

‎app/views/pages/signin.html.erb‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
</a>
88

99
<div class="signin-content">
10-
<img src="https://files.slack.com/files-pri/T09V59WQY1E-F0A6LSXCXPF/image.png?pub_secret=dc0d11081a" class="signin-crane-text" alt="Reboot">
10+
<img src="https://files.slack.com/files-pri/T09V59WQY1E-F0A6XFGE0M9/img_2185.png?pub_secret=1776d88b52" class="signin-crane-text" alt="Reboot">
1111

1212
<%= form_tag("/auth/hack_club", method: :post) do %>
1313
<button type="submit" class="signin-btn" style="background: transparent; padding: 0; box-shadow: none; border: none;">
@@ -23,5 +23,5 @@
2323
<p class="signin-subtitle">Restore old projects --> upgrade your desktop setup!</p>
2424
</div>
2525

26-
<img src="/images/signin/animal.png" class="signin-mole" alt="Mole">
26+
<!-- Corner images now handled globally in layout -->
2727
</div>

‎public/stylesheets/application.css‎

Lines changed: 92 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -58,44 +58,48 @@ h1, h2, h3, h4, h5, h6 {
5858

5959
/* Top bar */
6060
.topbar {
61-
display: flex;
62-
align-items: center;
63-
justify-content: space-between;
64-
padding: 12px 20px;
65-
position: sticky;
66-
top: 0;
67-
z-index: 100;
68-
background: rgba(243, 227, 207, 0.75);
69-
backdrop-filter: blur(10px);
70-
-webkit-backdrop-filter: blur(10px);
71-
border-radius: 0;
72-
margin: 0;
73-
border-bottom: 1px solid rgba(58, 42, 24, 0.15);
74-
box-shadow: 0 8px 24px rgba(58, 42, 24, 0.12);
61+
display: flex;
62+
align-items: center;
63+
justify-content: space-between;
64+
padding: 14px 22px;
65+
position: sticky;
66+
top: 12px;
67+
z-index: 120;
68+
width: min(1200px, 94vw);
69+
margin: 12px auto 0;
70+
background: rgba(243, 227, 207, 0.78);
71+
backdrop-filter: blur(14px) saturate(125%);
72+
-webkit-backdrop-filter: blur(14px) saturate(125%);
73+
border-radius: 16px;
74+
border: 1px solid rgba(58, 42, 24, 0.14);
75+
box-shadow: 0 12px 28px rgba(58, 42, 24, 0.16);
7576
}
7677
.topbar__right {
7778
display: flex;
7879
align-items: center;
79-
gap: 8px;
80+
gap: 10px;
8081
}
8182
.nav {
8283
display: flex;
83-
gap: 28px;
84+
gap: 24px;
8485
}
8586
.nav__item {
8687
color: #221b12;
8788
text-decoration: none;
88-
font-weight: 700;
89-
padding: 6px 12px;
90-
border-radius: 10px;
91-
transition: transform 120ms ease, background-color 160ms ease, box-shadow 160ms ease;
89+
font-weight: 800;
90+
padding: 8px 14px;
91+
border-radius: 999px;
92+
transition: transform 120ms ease, background-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
9293
}
9394
.nav__item[aria-disabled="true"] {
9495
opacity: 0.6;
9596
pointer-events: none;
9697
}
9798
.nav__item--active {
98-
text-decoration: underline;
99+
background: rgba(200, 163, 110, 0.28);
100+
color: #20170f;
101+
box-shadow: 0 0 0 2px rgba(214, 161, 97, 0.24) inset;
102+
text-decoration: none;
99103
}
100104
.nav__item:hover {
101105
transform: translateY(-1px);
@@ -107,11 +111,12 @@ h1, h2, h3, h4, h5, h6 {
107111
box-shadow: none;
108112
}
109113
.coins {
110-
background: #f2d39e;
114+
background: linear-gradient(135deg, #f2d39e, #efd1a4);
111115
color: #3a2a18;
112-
border-radius: 12px;
113-
padding: 6px 10px;
114-
font-weight: 700;
116+
border-radius: 999px;
117+
padding: 6px 12px;
118+
font-weight: 800;
119+
box-shadow: 0 4px 10px rgba(58, 42, 24, 0.12);
115120
}
116121

117122
/* Containers */
@@ -389,6 +394,24 @@ a.project-row:hover {
389394
box-shadow: none;
390395
border: 1px solid var(--border);
391396
}
397+
/* Refine ghost button in topbar */
398+
.topbar__right .btn--ghost {
399+
border-color: rgba(58, 42, 24, 0.18);
400+
color: #2a2118;
401+
padding: 8px 12px;
402+
border-radius: 12px;
403+
background: rgba(255, 255, 255, 0.2);
404+
transition: background-color 160ms ease, box-shadow 160ms ease, transform 120ms ease;
405+
}
406+
.topbar__right .btn--ghost:hover {
407+
background: rgba(255, 255, 255, 0.36);
408+
box-shadow: 0 6px 14px rgba(58, 42, 24, 0.12);
409+
transform: translateY(-1px);
410+
}
411+
.topbar__right .btn--ghost:active {
412+
transform: translateY(0);
413+
box-shadow: none;
414+
}
392415
.btn--hca {
393416
background: #ec3750;
394417
color: white;
@@ -635,6 +658,22 @@ a.project-row:hover {
635658
border-color: var(--gold);
636659
box-shadow: 0 0 0 2px rgba(214, 161, 97, 0.2);
637660
}
661+
.shop-category-item[disabled] {
662+
opacity: 0.6;
663+
cursor: not-allowed;
664+
position: relative;
665+
}
666+
.shop-category-item__badge {
667+
position: absolute;
668+
top: 5px;
669+
right: 6px;
670+
width: 90px;
671+
height: auto;
672+
transform: rotate(35deg);
673+
pointer-events: none;
674+
border-radius: 6px;
675+
box-shadow: 0 6px 14px rgba(0,0,0,0.18);
676+
}
638677
.shop-items {
639678
padding: 16px;
640679
}
@@ -956,6 +995,7 @@ a.project-row:hover {
956995
[data-page="faq"] {
957996
background: var(--bg) url('https://files.slack.com/files-pri/T09V59WQY1E-F0A71GFN7N2/untitled_artwork.png?pub_secret=e6e1934613') no-repeat center center fixed;
958997
background-size: cover;
998+
font-size: 20px; /* bump base size on FAQ */
959999
}
9601000

9611001
.signin-page {
@@ -994,8 +1034,10 @@ a.project-row:hover {
9941034

9951035
/* Start button image */
9961036
.signin-start-img {
997-
width: clamp(100px, 22vw, 200px);
1037+
width: clamp(250px, 22vw, 200px);
9981038
height: auto;
1039+
animation: signin-bob 2.6s ease-in-out infinite;
1040+
will-change: transform;
9991041
}
10001042

10011043
.signin-content form {
@@ -1037,6 +1079,13 @@ a.project-row:hover {
10371079
z-index: 2;
10381080
}
10391081

1082+
/* Mirror animal on bottom-right for signin page */
1083+
.signin-mole--right {
1084+
right: 0;
1085+
left: auto;
1086+
transform: scaleX(-1);
1087+
}
1088+
10401089
/* Animations */
10411090
@keyframes fade-in-up {
10421091
from {
@@ -1059,6 +1108,15 @@ a.project-row:hover {
10591108
}
10601109
}
10611110

1111+
@keyframes signin-bob {
1112+
0%, 100% {
1113+
transform: translateY(0);
1114+
}
1115+
50% {
1116+
transform: translateY(-6px);
1117+
}
1118+
}
1119+
10621120
/* Global corner images */
10631121
.corner-img {
10641122
position: fixed;
@@ -1069,15 +1127,21 @@ a.project-row:hover {
10691127
}
10701128
.corner-img--left {
10711129
left: 0;
1072-
width: clamp(120px, 14vw, 220px);
1130+
width: clamp(160px, 20vw, 320px);
10731131
height: auto;
10741132
}
10751133
.corner-img--right {
10761134
right: 0;
1077-
width: clamp(120px, 16vw, 260px);
1135+
width: clamp(160px, 22vw, 360px);
10781136
height: auto;
10791137
}
10801138

1139+
/* Signin-only tweaks: make bottom-left corner image bigger and slightly lower */
1140+
[data-page="signin"] .corner-img--left {
1141+
width: clamp(220px, 28vw, 440px);
1142+
bottom: -50px;
1143+
}
1144+
10811145
/* Respect reduced motion */
10821146
@media (prefers-reduced-motion: reduce) {
10831147
* {

0 commit comments

Comments
 (0)