Skip to content

Commit 89e82ac

Browse files
rozwaderrozwader
committed
chore: prepared site for deployment
1 parent c9a9bf0 commit 89e82ac

File tree

5 files changed

+87
-25
lines changed

5 files changed

+87
-25
lines changed

‎.github/workflows/deploy.yml‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
name: Deploy to GitHub Pages
2+
3+
on:
4+
# Trigger the workflow every time you push to the `main` branch
5+
# Using a different branch name? Replace `main` with your branch’s name
6+
push:
7+
branches: [ master ]
8+
# Allows you to run this workflow manually from the Actions tab on GitHub.
9+
workflow_dispatch:
10+
11+
# Allow this job to clone the repo and create a page deployment
12+
permissions:
13+
contents: read
14+
pages: write
15+
id-token: write
16+
17+
jobs:
18+
build:
19+
runs-on: ubuntu-latest
20+
steps:
21+
- name: Checkout your repository using git
22+
uses: actions/checkout@v4
23+
- name: Install, build, and upload your site
24+
uses: withastro/action@v3
25+
# with:
26+
# path: . # The root location of your Astro project inside the repository. (optional)
27+
# node-version: 20 # The specific version of Node that should be used to build your site. Defaults to 20. (optional)
28+
# package-manager: pnpm@latest # The Node package manager that should be used to install dependencies and build your site. Automatically detected based on your lockfile. (optional)
29+
# env:
30+
# PUBLIC_POKEAPI: 'https://pokeapi.co/api/v2' # Use single quotation marks for the variable value. (optional)
31+
32+
deploy:
33+
needs: build
34+
runs-on: ubuntu-latest
35+
environment:
36+
name: github-pages
37+
url: ${{ steps.deployment.outputs.page_url }}
38+
steps:
39+
- name: Deploy to GitHub Pages
40+
id: deployment
41+
uses: actions/deploy-pages@v4

‎astro.config.mjs‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,11 @@
22
import { defineConfig } from "astro/config";
33
import icon from "astro-icon";
44

5+
const LIVE_URL = "https://Craftserve.github.io"
6+
57
// https://astro.build/config
68
export default defineConfig({
9+
site: LIVE_URL,
710
output: "static",
811
integrations: [
912
icon({

‎src/components/Card.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ const { variant, title = undefined, styles = "" } = Astro.props as Props;
8282
}
8383

8484
.light {
85-
background-color: var(--lightDimmed);
85+
background-color: #9101ff8d;
8686
color: var(--light);
8787
}
8888

‎src/sections/ContactForm.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -175,7 +175,7 @@ const t = useTranslations(lang);
175175
font-weight: 400;
176176
font-size: 18px;
177177
color: var(--secondaryText);
178-
opacity: 0.7;
178+
opacity: 1;
179179
text-align: center;
180180
margin: 0;
181181
}

‎src/sections/Table.astro‎

Lines changed: 41 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -15,44 +15,44 @@
1515
</div>
1616
<div class="layer">
1717
<div class="card">
18-
<p style="font-weight: 400; width: 100%;">Lorem ipsum</p>
19-
<p style="font-weight: 300; width: 100%;">Glassmorphism is a design <br /> Glassmorphism is a design <br /> Glassmorphism is a design </p>
18+
<p style="font-weight: 400;">Lorem ipsum</p>
19+
<p style="font-weight: 300;">Glassmorphism is a design <br /> Glassmorphism is a design <br /> Glassmorphism is a design </p>
2020
</div>
2121
<div class="card">
22-
<p style="font-weight: 400; width: 100%;">Lorem ipsum</p>
23-
<p style="font-weight: 300; width: 100%;">Glassmorphism is a design <br /> Glassmorphism is a design <br /> Glassmorphism is a design </p>
22+
<p style="font-weight: 400;">Lorem ipsum</p>
23+
<p style="font-weight: 300;">Glassmorphism is a design <br /> Glassmorphism is a design <br /> Glassmorphism is a design </p>
2424
</div>
2525
<div class="card">
26-
<p style="font-weight: 400; width: 100%;">Lorem ipsum</p>
27-
<p style="font-weight: 300; width: 100%;">Glassmorphism is a design <br /> Glassmorphism is a design <br /> Glassmorphism is a design </p>
26+
<p style="font-weight: 400;">Lorem ipsum</p>
27+
<p style="font-weight: 300;">Glassmorphism is a design <br /> Glassmorphism is a design <br /> Glassmorphism is a design </p>
2828
</div>
2929
</div>
3030
<div class="layer">
3131
<div class="card">
32-
<p style="font-weight: 400; width: 100%;">Lorem ipsum</p>
33-
<p style="font-weight: 300; width: 100%;">Glassmorphism is a design <br /> Glassmorphism is a design <br /> Glassmorphism is a design </p>
32+
<p style="font-weight: 400;">Lorem ipsum</p>
33+
<p style="font-weight: 300;">Glassmorphism is a design <br /> Glassmorphism is a design <br /> Glassmorphism is a design </p>
3434
</div>
3535
<div class="card">
36-
<p style="font-weight: 400; width: 100%;">Lorem ipsum</p>
37-
<p style="font-weight: 300; width: 100%;">Glassmorphism is a design <br /> Glassmorphism is a design <br /> Glassmorphism is a design </p>
36+
<p style="font-weight: 400;">Lorem ipsum</p>
37+
<p style="font-weight: 300;">Glassmorphism is a design <br /> Glassmorphism is a design <br /> Glassmorphism is a design </p>
3838
</div>
3939
<div class="card">
40-
<p style="font-weight: 400; width: 100%;">Lorem ipsum</p>
41-
<p style="font-weight: 300; width: 100%;">Glassmorphism is a design <br /> Glassmorphism is a design <br /> Glassmorphism is a design </p>
40+
<p style="font-weight: 400;">Lorem ipsum</p>
41+
<p style="font-weight: 300;">Glassmorphism is a design <br /> Glassmorphism is a design <br /> Glassmorphism is a design </p>
4242
</div>
4343
</div>
4444
<div class="layer">
4545
<div class="card">
46-
<p style="font-weight: 400; width: 100%;">Lorem ipsum</p>
47-
<p style="font-weight: 300; width: 100%;">Glassmorphism is a design <br /> Glassmorphism is a design <br /> Glassmorphism is a design </p>
46+
<p style="font-weight: 400;">Lorem ipsum</p>
47+
<p style="font-weight: 300;">Glassmorphism is a design <br /> Glassmorphism is a design <br /> Glassmorphism is a design </p>
4848
</div>
4949
<div class="card">
50-
<p style="font-weight: 400; width: 100%;">Lorem ipsum</p>
51-
<p style="font-weight: 300; width: 100%;">Glassmorphism is a design <br /> Glassmorphism is a design <br /> Glassmorphism is a design </p>
50+
<p style="font-weight: 400;">Lorem ipsum</p>
51+
<p style="font-weight: 300;">Glassmorphism is a design <br /> Glassmorphism is a design <br /> Glassmorphism is a design </p>
5252
</div>
5353
<div class="card">
54-
<p style="font-weight: 400; width: 100%;">Lorem ipsum</p>
55-
<p style="font-weight: 300; width: 100%;">Glassmorphism is a design <br /> Glassmorphism is a design <br /> Glassmorphism is a design </p>
54+
<p style="font-weight: 400;">Lorem ipsum</p>
55+
<p style="font-weight: 300;">Glassmorphism is a design <br /> Glassmorphism is a design <br /> Glassmorphism is a design </p>
5656
</div>
5757
</div>
5858
</div>
@@ -61,6 +61,7 @@
6161
p{
6262
margin: 0;
6363
padding: 0;
64+
width: 200px;
6465
}
6566

6667
.tableLayout{
@@ -78,7 +79,6 @@
7879
}
7980

8081
.card {
81-
min-width: 200px;
8282
max-width: 30%;
8383
height: 100%;
8484
display: flex;
@@ -137,9 +137,15 @@
137137
}
138138

139139
@media only screen and (max-width: 1100px){
140+
141+
p{
142+
font-size: 0.9rem;
143+
}
144+
140145
.layer{
141-
flex-direction: column;
146+
flex-direction: row;
142147
gap: 10px;
148+
justify-content: space-center;
143149
}
144150

145151
.vertical {
@@ -156,11 +162,11 @@
156162

157163
.card{
158164
padding: 20px 0px;
159-
width: calc(100% - 20px);
165+
width: calc(30% - 20px);
160166
border-width: 0px;
161167
border-bottom-width: 1px;
162168
border-style: solid;
163-
border-image: linear-gradient(to right, transparent 20%, rgba(131, 131, 131, 1), transparent 80%) 1;
169+
border-image: linear-gradient(to right, transparent 5%, rgba(131, 131, 131, 1), transparent 95%) 1;
164170
max-width: unset;
165171
}
166172

@@ -169,8 +175,20 @@
169175
}
170176

171177
.card > p{
172-
max-width: 60%;
173178
text-align: center;
174179
}
175180
}
181+
182+
@media only screen and (max-width: 700px){
183+
.layer{
184+
justify-content: space-evenly;
185+
}
186+
}
187+
188+
@media only screen and (max-width: 600px){
189+
.layer{
190+
flex-direction: column;
191+
gap: 10px;
192+
}
193+
}
176194
</style>

0 commit comments

Comments
 (0)