Skip to content

Commit e9c3e1c

Browse files
jlukicjlukic
committed
Work on homepage
1 parent da61e34 commit e9c3e1c

File tree

3 files changed

+144
-108
lines changed

3 files changed

+144
-108
lines changed

‎docs/src/components/CodePlayground/CodePlayground.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { defineComponent } from '@semantic-ui/component';
2-
import { firstMatch, get, each, sortBy } from '@semantic-ui/utils';
2+
import { firstMatch, get, each, inArray, sortBy } from '@semantic-ui/utils';
33

44
import { CodePlaygroundPanel } from './CodePlaygroundPanel.js';
55
import { CodePlaygroundFile } from './CodePlaygroundFile.js';
@@ -154,7 +154,7 @@ const createComponent = ({afterFlush, self, reaction, state, data, settings, $,
154154
;
155155
// force tabs for small screens or inline examples
156156
const displayMode = state.displayMode.get();
157-
if(displayMode == 'tablet' || settings.inline) {
157+
if(inArray(displayMode, ['tablet', 'mobile']) || settings.inline) {
158158
layout = 'tabs';
159159
}
160160
self.setLayout(layout);

‎docs/src/layouts/Homepage.css‎

Lines changed: 83 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@
4848
z-index: 2;
4949
line-height: 1.18;
5050
align-content: center;
51-
text-shadow: 0px 3px 8px rgba(0, 0, 0, 0.6);
51+
text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
5252

5353
&:before {
5454
position: absolute;
@@ -59,9 +59,9 @@
5959
height: 100%;
6060
background-image: radial-gradient(circle at 50% 50%, oklch(0 0 0) 0%, oklch(0.32 0.08 228.42 / 0.66) 600px, oklch(0 0 0) 1200px);
6161
background-image: linear-gradient(#000, transparent 300px), radial-gradient(circle at 50% 50%, oklch(0 0 0) 0%, oklch(0.32 0.08 228.42 / 0.66) 600px, oklch(0 0 0) 1200px);
62-
background-image: linear-gradient(#000, transparent 300px), radial-gradient(50% 50% at 50% 50%, oklch(0 0 0) 0%, transparent 800px);
6362
background-image: linear-gradient(#000, transparent 300px), radial-gradient(100vw 1000px at 50% 50%, rgba(0, 0, 0, 0.8) 0, rgba(0, 0, 0, 0.7) 500px, rgba(0, 0, 0, 0) 800px);
6463
background-image: linear-gradient(#000, transparent 300px), radial-gradient(100vw 1000px at 50% 50%, rgba(0, 0, 0, 0.8) 0, oklch(0.37 0.09 227.35) 500px, rgba(0, 0, 0, 0) 800px);
64+
background-image: linear-gradient(#000, transparent 300px), radial-gradient(50% 50% at 50% 50%, oklch(0 0 0) 0%, transparent 800px);
6565
pointer-events: none;
6666
}
6767

@@ -100,12 +100,12 @@
100100
position: absolute;
101101
width: 100%;
102102
height: 100%;
103+
103104
--gradient-color-1: #001019;
104-
--gradient-color-2: #c7824b;
105-
--gradient-color-3: #02403f;
106-
--gradient-color-4: #0a76a5;
105+
--gradient-color-2: #001019;
106+
--gradient-color-3: #112129;
107+
--gradient-color-4: #174557;
107108
}
108-
/*
109109
&:before {
110110
position: absolute;
111111
z-index: 1;
@@ -126,7 +126,9 @@
126126
animation-timing-function: linear;
127127
animation-iteration-count: infinite;
128128
transform: rotateX(60deg) rotateZ(0deg) rotateY(0deg) translateY(-7%) translateX(0%) translateZ(0px);
129-
}*/
129+
}
130+
131+
130132

131133
}
132134

@@ -155,34 +157,39 @@
155157
font-weight: bold;
156158
}
157159

158-
.fixed {
159-
position: absolute;
160-
right: 0rem;
161-
width: 550px;
160+
.expressive-code {
161+
margin-top: 1rem;
162+
}
162163

163-
.container {
164-
position: sticky;
165-
top: 1rem;
166-
}
167-
.segment {
168-
padding: 2rem;
169-
border: var(--glow-border);
170-
background: oklch(0.15 0.05 240.81 / 0.52) var(--angled-gradient);
171-
background-image: var(--angled-gradient);
172-
}
173-
.expressive-code {
174-
margin-top: 1rem;
175-
}
176164

177-
}
178-
.copy {
179-
width: 450px;
180-
}
181165
}
182166

183167
.tour {
184168
.copy {
185-
height: 500px;
169+
min-height: 500px;
170+
margin-bottom: 3rem;
171+
}
172+
ui-container {
173+
display: flex;
174+
flex-direction: row-reverse;
175+
}
176+
.container {
177+
position: sticky;
178+
top: 1rem;
179+
}
180+
.segment {
181+
padding: 2rem;
182+
border: var(--glow-border);
183+
background: oklch(0.15 0.05 240.81 / 0.52) var(--angled-gradient);
184+
background-image: var(--angled-gradient);
185+
}
186+
.left {
187+
flex: 1 1 auto;
188+
padding-right: 5rem;
189+
}
190+
.right {
191+
width: 500px;
192+
flex: 0 0 auto;
186193
}
187194
}
188195

@@ -222,7 +229,7 @@
222229
line-height: 1.2;
223230
font-weight: bold;
224231
color: var(--primary-text-color);
225-
margin-bottom: 0.5rem;
232+
margin: 0rem 0rem 0.5rem;
226233
}
227234
p {
228235
max-width: 500px;
@@ -234,13 +241,24 @@
234241
}
235242

236243

237-
@keyframes masthead {
238-
0% {
239-
background-position: 0% 0%;
240-
}
241-
100% {
242-
background-position: 0% -475px;
244+
@keyframes fade {
245+
from {
246+
opacity: 0;
247+
transform: translateY(20px);
248+
}
249+
to {
250+
opacity: 1;
251+
transform: translateY(0);
252+
}
243253
}
254+
255+
@keyframes masthead {
256+
0% {
257+
background-position: 0% 0%;
258+
}
259+
100% {
260+
background-position: 0% -475px;
261+
}
244262
}
245263

246264

@@ -252,19 +270,36 @@
252270
background-image: none;
253271
}
254272

255-
ribbon .cards {
256-
margin-top: 5rem;
273+
ribbon {
274+
padding: 2rem 1rem;
275+
276+
.cards {
277+
margin-top: 0rem;
278+
.card {
279+
margin: 0;
280+
flex-basis: 100%;
281+
}
282+
}
283+
284+
&.tour {
285+
.left {
286+
padding-right: 0rem;
287+
}
288+
.right {
289+
display: none;
290+
}
291+
}
257292
}
258-
}
259-
}
260293

261-
@keyframes fade {
262-
from {
263-
opacity: 0;
264-
transform: translateY(20px);
265-
}
266-
to {
267-
opacity: 1;
268-
transform: translateY(0);
294+
canvas#gradient {
295+
position: absolute;
296+
width: 100%;
297+
height: 100%;
298+
299+
--gradient-color-1: #001019;
300+
--gradient-color-2: #001019;
301+
--gradient-color-3: #001019;
302+
--gradient-color-4: #001019;
303+
}
269304
}
270305
}

‎docs/src/pages/index.astro‎

Lines changed: 59 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ const code2=`
8080
</ribbon>
8181
<ribbon class="tour">
8282
<ui-container>
83-
<div class="fixed">
83+
<div class="right">
8484
<div class="container">
8585
<div class="segment">
8686
<div class="one">
@@ -112,66 +112,67 @@ const code2=`
112112
</div>
113113
</div>
114114
</div>
115-
<div class="copy">
116-
<h4 class="sub header">Start Fast</h4>
117-
<h3 class="header">Build Layouts with UI Primitives</h3>
118-
<p>Semantic provides a growing library for first-party UI components like dropdowns, buttons, menus, inputs that you can use as baseline to design your own custom design system.</p>
115+
<div class="left">
116+
<div class="copy">
117+
<h4 class="sub header">Start Fast</h4>
118+
<h3 class="header">Build Layouts with UI Primitives</h3>
119+
<p>Semantic provides a growing library for first-party UI components like dropdowns, buttons, menus, inputs that you can use as baseline to design your own custom design system.</p>
119120

120-
<ul class="feature-list">
121-
<li>
122-
<ui-icon check></ui-icon>
123-
Built using principles from natural language that make using UI as simple as describing it.
124-
</li>
125-
<li>
126-
<ui-icon check></ui-icon>
127-
Three syntaxes that provide flexibility in how you describe your UI.
128-
</li>
129-
<li>
130-
<ui-icon check></ui-icon>
131-
UI components can be used anywhere you use html, even if you decide not to adopt the component framework.
132-
</li>
133-
</ul>
134-
</div>
135-
<div class="copy">
136-
<h4 class="sub header">Build Flexibly</h4>
137-
<h3 class="header">Design Custom Components Easily</h3>
138-
<p>Semantic includes a robust component framework that makes it easy to compose complex components that build off primitives and handle your app's specific use cases.</p>
139-
<ul class="feature-list">
140-
<li>
141-
<ui-icon check></ui-icon>
142-
Reactive expressions with natural syntax
143-
</li>
144-
<li>
145-
<ui-icon check></ui-icon>
146-
Robust AST based compilation
147-
</li>
148-
<li>
149-
<ui-icon check></ui-icon>
150-
Performant rendering powered by Google's Lit
151-
</li>
152-
</ul>
153-
<p>
154-
</div>
121+
<ul class="feature-list">
122+
<li>
123+
<ui-icon check></ui-icon>
124+
Built using principles from natural language that make using UI as simple as describing it.
125+
</li>
126+
<li>
127+
<ui-icon check></ui-icon>
128+
Three syntaxes that provide flexibility in how you describe your UI.
129+
</li>
130+
<li>
131+
<ui-icon check></ui-icon>
132+
UI components can be used anywhere you use html, even if you decide not to adopt the component framework.
133+
</li>
134+
</ul>
135+
</div>
136+
<div class="copy">
137+
<h4 class="sub header">Build Flexibly</h4>
138+
<h3 class="header">Design Custom Components Easily</h3>
139+
<p>Semantic includes a robust component framework that makes it easy to compose complex components that build off primitives and handle your app's specific use cases.</p>
140+
<ul class="feature-list">
141+
<li>
142+
<ui-icon check></ui-icon>
143+
Reactive expressions with natural syntax
144+
</li>
145+
<li>
146+
<ui-icon check></ui-icon>
147+
Robust AST based compilation
148+
</li>
149+
<li>
150+
<ui-icon check></ui-icon>
151+
Performant rendering powered by Google's Lit
152+
</li>
153+
</ul>
154+
</div>
155155

156-
<div class="copy">
157-
<h4 class="sub header">Developers</h4>
158-
<h3 class="header">Intuitive Templating</h3>
159-
<p>Write templates that read like plain English. Semantic UI's template syntax makes components self-documenting and easier to maintain.</p>
156+
<div class="copy">
157+
<h4 class="sub header">Developers</h4>
158+
<h3 class="header">Intuitive Templating</h3>
159+
<p>Write templates that read like plain English. Semantic UI's template syntax makes components self-documenting and easier to maintain.</p>
160160

161-
<ul class="feature-list">
162-
<li>
163-
<ui-icon check></ui-icon>
164-
Reactive expressions with natural syntax
165-
</li>
166-
<li>
167-
<ui-icon check></ui-icon>
168-
Automatic state synchronization
169-
</li>
170-
<li>
171-
<ui-icon check></ui-icon>
172-
Built-in conditional and loop helpers
173-
</li>
174-
</ul>
161+
<ul class="feature-list">
162+
<li>
163+
<ui-icon check></ui-icon>
164+
Reactive expressions with natural syntax
165+
</li>
166+
<li>
167+
<ui-icon check></ui-icon>
168+
Automatic state synchronization
169+
</li>
170+
<li>
171+
<ui-icon check></ui-icon>
172+
Built-in conditional and loop helpers
173+
</li>
174+
</ul>
175+
</div>
175176
</div>
176177
</ui-container>
177178
</ribbon>

0 commit comments

Comments
 (0)