Skip to content

Commit e9da1e0

Browse files
joskuijpersPerksey
joskuijpers
and
Perksey
authored
[3.0] Fix issues with mobile website (#2416)
* Fix issues with mobile site. Add CSProj for website. * Add tailwindcss. * Add tailwind config * Some more minor adjustments * Attempt to fix build --------- Co-authored-by: Dylan Perks <[email protected]> Co-authored-by: Dylan Perks <[email protected]>
1 parent a2d070e commit e9da1e0

File tree

12 files changed

+2695
-1078
lines changed

12 files changed

+2695
-1078
lines changed

‎.github/workflows/dotnet.yml‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -45,10 +45,10 @@ jobs:
4545
if-no-files-found: warn
4646
retention-days: 1
4747
- name: Push to Experimental Feed
48-
if: ${{ github.repository == 'dotnet/Silk.NET' }}
48+
if: ${{ secrets.EXP_NUGET_PASSWORD != '' }}
4949
run: ./build.sh PushToNuGet --skip Clean Compile Pack --nuget-feed https://dotnet.github.io/Silk.NET/nuget/experimental/index.json --nuget-username ${{ secrets.EXP_NUGET_USERNAME }} --nuget-password ${{ secrets.EXP_NUGET_PASSWORD }} --nuget-api-key ${{ secrets.EXP_NUGET_PASSWORD }}
5050
- name: Push to GitHub Packages
51-
if: ${{ github.repository == 'dotnet/Silk.NET' }}
51+
if: ${{ secrets.EXP_NUGET_PASSWORD != '' }} # ik it's irrelevant but it tells if we likely have perms
5252
run: ./build.sh PushToNuGet --skip Clean Compile Pack --nuget-feed https://nuget.pkg.github.com/dotnet/index.json --nuget-api-key ${{ secrets.GITHUB_TOKEN }}
5353
Test:
5454
strategy:
@@ -78,13 +78,14 @@ jobs:
7878
run: dotnet restore --runtime ${{ matrix.rid }}
7979
- name: Test
8080
run: dotnet test -c Release --no-restore --runtime ${{ matrix.rid }} --collect:"XPlat Code Coverage" --results-directory ./coverage --logger:"trx"
81-
- name: Test Report
82-
uses: dorny/test-reporter@v1
83-
if: success() || failure()
84-
with:
85-
name: .NET Test Report (${{ matrix.rid }})
86-
path: ./coverage/**/*.trx
87-
reporter: dotnet-trx
81+
# TODO: https://github.com/dorny/test-reporter?tab=readme-ov-file#recommended-setup-for-public-repositories
82+
#- name: Test Report
83+
# uses: dorny/test-reporter@v1
84+
# if: success() || failure()
85+
# with:
86+
# name: .NET Test Report (${{ matrix.rid }})
87+
# path: ./coverage/**/*.trx
88+
# reporter: dotnet-trx
8889
- name: Upload Coverage Results
8990
uses: actions/upload-artifact@v4
9091
with:

‎sources/Website/docusaurus.config.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import {themes as prismThemes} from 'prism-react-renderer';
22
import type {Config} from '@docusaurus/types';
33
import type * as Preset from '@docusaurus/preset-classic';
4+
45
import remarkGithubAdmonitionsToDirectives from "remark-github-admonitions-to-directives";
56
import { visit } from 'unist-util-visit';
6-
import { pathToFileURL } from 'node:url';
77
import path from 'node:path';
88
import { readFileSync, existsSync } from 'node:fs';
9+
import tailwindPlugin from './plugins/tailwind-config.cjs';
910

1011
// This runs in Node.js - Don't use client-side code here (browser APIs, JSX...)
1112

@@ -91,6 +92,10 @@ const config: Config = {
9192

9293
staticDirectories: ["static", "../../eng/submodules/silk.net-2.x/documentation/images"],
9394

95+
plugins: [
96+
tailwindPlugin
97+
],
98+
9499
presets: [
95100
[
96101
'classic',

‎sources/Website/package-lock.json‎

Lines changed: 2427 additions & 978 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎sources/Website/package.json‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,21 +15,24 @@
1515
"typecheck": "tsc"
1616
},
1717
"dependencies": {
18-
"@docusaurus/core": "3.6.3",
19-
"@docusaurus/preset-classic": "3.6.3",
18+
"@docusaurus/core": "3.7.0",
19+
"@docusaurus/preset-classic": "3.7.0",
2020
"@mdx-js/react": "^3.0.0",
2121
"clsx": "^2.0.0",
2222
"prism-react-renderer": "^2.3.0",
23-
"react": "^18.0.0",
24-
"react-dom": "^18.0.0",
23+
"react": "^19.0.0",
24+
"react-dom": "^19.0.0",
2525
"react-responsive-3d-carousel": "^2.1.1",
2626
"remark-github-admonitions-to-directives": "^2.1.0",
2727
"unist-util-visit": "^5.0.0"
2828
},
2929
"devDependencies": {
30-
"@docusaurus/module-type-aliases": "3.6.3",
31-
"@docusaurus/tsconfig": "3.6.3",
32-
"@docusaurus/types": "3.6.3",
30+
"@docusaurus/module-type-aliases": "3.7.0",
31+
"@docusaurus/tsconfig": "3.7.0",
32+
"@docusaurus/types": "3.7.0",
33+
"autoprefixer": "^10.4.20",
34+
"postcss": "^8.5.1",
35+
"tailwindcss": "^3.4.17",
3336
"typescript": "~5.6.2"
3437
},
3538
"browserslist": {

‎sources/Website/plugins/tailwind-config.cjs‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
function tailwindPlugin(context, options) {
2+
return {
3+
name: 'tailwind-plugin',
4+
configurePostCss(postcssOptions) {
5+
postcssOptions.plugins = [
6+
require('postcss-import'),
7+
require('tailwindcss'),
8+
require('autoprefixer'),
9+
];
10+
return postcssOptions;
11+
},
12+
};
13+
}
14+
15+
module.exports = tailwindPlugin;

‎sources/Website/src/components/HomepageFeatures/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ const FeatureList: FeatureItem[] = [
4848

4949
function Feature({title, image, description}: FeatureItem) {
5050
return (
51-
<div className={clsx('col col--4')} style={{padding: "0"}}>
51+
<div className={clsx('col col--4')}>
5252
<div>
5353
<img src={useBaseUrl(image)} className={styles.featureimg} role="img" />
5454
</div>
@@ -63,7 +63,7 @@ function Feature({title, image, description}: FeatureItem) {
6363
export default function HomepageFeatures(): JSX.Element {
6464
return (
6565
<section className={styles.corerow}>
66-
<div className="container" style={{padding: "0"}}>
66+
<div className="container">
6767
<div className="row">
6868
{FeatureList.map((props, idx) => (
6969
<Feature key={idx} {...props} />

‎sources/Website/src/components/VideoSection.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import clsx from "clsx";
2+
import styles from './styles.module.css';
23
import Link from "@docusaurus/Link";
34

45
export function VideoSection({ children }): JSX.Element {

‎sources/Website/src/css/custom.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wdth,wght@0,75..100,300..800;1,75..100,300..800&family=Space+Grotesk:[email protected]&display=swap');
22
@import 'variables.css';
33

4+
@tailwind base;
5+
@tailwind components;
6+
@tailwind utilities;
7+
48
html {
59
scroll-behavior: smooth;
610
}

‎sources/Website/src/css/variables.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,8 @@
8383
--ifm-color-content: var(--ifm-color-emphasis-900);
8484
--ifm-color-content-inverse: var(--ifm-color-emphasis-900);
8585

86+
--ifm-button-color: var(--ifm-color-gray-900);
87+
8688
--ifm-background-color: var(--ifm-color-emphasis-0);
8789
--ifm-background-surface-color: var(--ifm-color-emphasis-0);
8890

‎sources/Website/src/pages/index.module.css‎

Lines changed: 109 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -32,10 +32,32 @@ p {
3232
}
3333

3434
.heroWords {
35-
width: 40%;
35+
width: 100%;
3636
align-content: center;
3737
}
3838

39+
.heroCarousel {
40+
width: 100%;
41+
}
42+
43+
.heroRow {
44+
flex-flow: wrap-reverse;
45+
}
46+
47+
@media (min-width: 940px) {
48+
.heroWords {
49+
width: 40%;
50+
}
51+
52+
.heroCarousel {
53+
width: 60%;
54+
}
55+
56+
.heroRow {
57+
flex-flow: initial;
58+
}
59+
}
60+
3961
.heroWords h1 {
4062
background: linear-gradient(128.87deg,#512bd4 14.05%,#0b6cff 89.3%);
4163
background-clip: text;
@@ -48,7 +70,7 @@ p {
4870
color: transparent;
4971
}
5072

51-
@media (min-width:540px) {
73+
/*@media (min-width:540px) {
5274
.heroWords h1 {
5375
font-size: 2.5rem;
5476
line-height: 3.25rem;
@@ -64,7 +86,7 @@ p {
6486
}
6587
}
6688
67-
@media (min-width:1248px) {
89+
@media (min-width:1248px) {*/
6890
.heroWords h1 {
6991
font-size: 4.25rem;
7092
line-height: 4.625rem;
@@ -78,11 +100,23 @@ p {
78100
line-height: 2.5rem;
79101
text-transform: none;
80102
}
103+
/*}*/
104+
105+
.heroButtons {
106+
display: flex;
107+
flex-wrap: wrap;
81108
}
82109

83110
.heroButtons a {
84111
margin-right: 1rem;
85112
margin-top: 1rem;
113+
flex-grow: 1;
114+
}
115+
116+
@media (min-width: 720px) {
117+
.heroButtons a {
118+
flex-grow: unset;
119+
}
86120
}
87121

88122
.silkDnfLogo {
@@ -137,29 +171,64 @@ p {
137171
height: 100%;
138172
border-radius: 1rem;
139173
object-fit: cover;
174+
box-shadow: rgba(0, 0, 0, 0.5) 0 0.1rem 0.5rem;
175+
}
176+
177+
.carouselImage {
178+
padding: 0.5rem;
140179
}
141180

142181
.otherMoreDifferentSection > div {
143182
width: 50%;
144183
align-content: center;
145184
}
146185

186+
.technologiesSection {
187+
background: var(--ifm-color-emphasis-100);
188+
padding: 1.5rem;
189+
width: 100%;
190+
border-radius: 2rem;
191+
text-align: center;
192+
display: grid;
193+
grid-template-columns: repeat(1, 1fr);
194+
gap: 2rem;
195+
}
196+
197+
@media (min-width: 720px) {
198+
.technologiesSection {
199+
grid-template-columns: repeat(2, 1fr);
200+
}
201+
}
202+
203+
.technologiesSection > div {
204+
/*display: grid;*/
205+
/*grid-template-columns: subgrid;*/
206+
/*grid-template-rows: subgrid;*/
207+
}
208+
209+
.technologiesSection > div > h1 {
210+
align-self: center;
211+
}
212+
147213
.supportedIcons {
148214
display: flex;
149215
justify-content: center;
150216
margin: 2rem 2rem 0 2rem;
151217
flex-wrap: wrap;
218+
gap: max(1.5rem, 5%);
152219
}
153220

154221
.supportedIcon {
155-
width: 20%;
156-
padding: 1.5rem;
222+
width: max(5rem, 10%);
223+
min-width: 4rem;
224+
max-width: 8rem;
157225
height: auto;
158226
align-content: center;
227+
list-style: none;
159228
}
160229

161230
.communityIcon {
162-
width: 10%;
231+
width: max(6rem, 10%);
163232
padding: 1.5rem;
164233
height: auto;
165234
align-content: center;
@@ -184,3 +253,37 @@ p {
184253
.strideSection h2 {
185254
color: white;
186255
}
256+
257+
.homeContainer {
258+
margin: 2rem auto;
259+
max-width: 1140px;
260+
padding: 0 1rem;
261+
width: 100%;
262+
}
263+
264+
.homeContainer > .homeRow {
265+
display: flex;
266+
flex-wrap: wrap;
267+
}
268+
269+
@media (min-width: 1440px) {
270+
.homeContainer {
271+
max-width: 1320px;
272+
}
273+
}
274+
275+
.contactUs {
276+
width: 100%;
277+
padding: 0 1rem;
278+
margin: 0 auto;
279+
}
280+
281+
.contactUs > p {
282+
text-align: center;
283+
}
284+
285+
@media (min-width: 720px) {
286+
.contactUs {
287+
width: 50%;
288+
}
289+
}

0 commit comments

Comments
 (0)