Skip to content

Commit 88aeb45

Browse files
GabsEditsGabsEdits
committed
Initial Commit
0 parents  commit 88aeb45

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+3248
-0
lines changed

‎.gitignore

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
.DS_Store
12+
dist
13+
dist-ssr
14+
coverage
15+
*.local
16+
17+
/cypress/videos/
18+
/cypress/screenshots/
19+
20+
# Editor directories and files
21+
.vscode/*
22+
!.vscode/extensions.json
23+
.idea
24+
*.suo
25+
*.ntvs*
26+
*.njsproj
27+
*.sln
28+
*.sw?

‎.vscode/extensions.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
3+
}

‎README.md

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
# aplos
2+
3+
This template should help get you started developing with Vue 3 in Vite.
4+
5+
## Recommended IDE Setup
6+
7+
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
8+
9+
## Type Support for `.vue` Imports in TS
10+
11+
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
12+
13+
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
14+
15+
1. Disable the built-in TypeScript Extension
16+
1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
17+
2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
18+
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
19+
20+
## Customize configuration
21+
22+
See [Vite Configuration Reference](https://vitejs.dev/config/).
23+
24+
## Project Setup
25+
26+
```sh
27+
npm install
28+
```
29+
30+
### Compile and Hot-Reload for Development
31+
32+
```sh
33+
npm run dev
34+
```
35+
36+
### Type-Check, Compile and Minify for Production
37+
38+
```sh
39+
npm run build
40+
```

‎env.d.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/// <reference types="vite/client" />

‎index.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<link rel="icon" href="/favicon.ico">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Aplós</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/main.ts"></script>
12+
</body>
13+
</html>

‎old/demo.html

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Aplós - Demo</title>
8+
<link rel="stylesheet" href="styles/base.css">
9+
<link rel="preconnect" href="https://rsms.me/">
10+
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
11+
</head>
12+
13+
<body>
14+
<header>
15+
<nav>
16+
<ul>
17+
<li class="h1-nav"><h1>Aplós</h1></li>
18+
<li><a href="">About</a></li>
19+
<li><a href="">Demo</a></li>
20+
<li><a href="">Blog</a></li>
21+
</ul>
22+
</nav>
23+
</header>
24+
<main>
25+
<h1>Header 1</h1>
26+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo labore aperiam, asperiores doloribus earum qui id harum neque modi nostrum similique. Rerum consequatur ab eaque velit consequuntur blanditiis praesentium commodi.</p>
27+
<h2>Header 2</h2>
28+
<h3>Header 3</h3>
29+
<ul>
30+
<li>Item 1</li>
31+
<li>Item 2</li>
32+
<li>Item 3</li>
33+
</ul>
34+
<h4>Header 4</h4>
35+
<blockquote>
36+
<p>“Simplicity is the ultimate sophistication.”
37+
<br> &mdash; Leonardo da Vinci
38+
</p>
39+
40+
</blockquote>
41+
<h2>Lorem.</h2>
42+
<code class="code">git clone https://github.com/</code>
43+
44+
<h2>Photo</h2>
45+
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQM1PqXLgwP5hbeVzB_OETs-RsihZVjubbQNCF2uxruEg&s" alt="Photo">
46+
</body>
47+
</html>

‎old/favicon_io.zip

78.1 KB
Binary file not shown.

‎old/favicon_io/android-chrome-192x192.png

10.7 KB
Loading

‎old/favicon_io/android-chrome-512x512.png

40.7 KB
Loading

‎old/favicon_io/apple-touch-icon.png

8.89 KB
Loading

‎old/favicon_io/favicon-16x16.png

601 Bytes
Loading

‎old/favicon_io/favicon-32x32.png

1.12 KB
Loading

‎old/favicon_io/site.webmanifest

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

‎old/index.html

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Aplós</title>
8+
<link rel="stylesheet" href="styles/base.css">
9+
<link rel="preconnect" href="https://rsms.me/">
10+
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
11+
</head>
12+
13+
<body>
14+
<header>
15+
<nav>
16+
<ul>
17+
<li class="h1-nav"><a href="/"><h1>Aplós</h1></a></li>
18+
<li><a href="">About</a></li>
19+
<li><a href="/demo.html">Demo</a></li>
20+
<li><a href="">Blog</a></li>
21+
</ul>
22+
</nav>
23+
</header>
24+
<main>
25+
<h1>Aplós</h1>
26+
<p><b>Aplós</b> is a simple, modern, and practical by design theme build up on Aeolus. The idea is a simple way to have
27+
a quick page on the web. It aims to provide all the needed options for comfortable writing, keeping the
28+
balance of it being simple.
29+
<br>
30+
<br> &bull; Simple and lightweight. No need for JavaScript.
31+
<br> &bull; For a very pleasant look, the colors are tinted with the primary color.
32+
<br> &bull; Proper favicon for modern browsers and Apple device icons.
33+
<br> &bull; Social media meta cards for easy sharing.
34+
<br> &bull; One of the best fonts: Inter and Source Code Pro. Everything local using NPM.
35+
<br> &bull; Mobile friendly, with dark mode.
36+
</p>
37+
<blockquote>
38+
<p>“Simplicity is the ultimate sophistication.”
39+
<br> &mdash; Leonardo da Vinci
40+
</p>
41+
42+
</blockquote>
43+
<h2>Install.</h2>
44+
<p>Clone it locally</p>
45+
<code class="code">git clone https://github.com/</code>
46+
<p>Open it, and change everything that is in the docs there. And Done!</p>
47+
<h2>❤ & Credits️:</h2>
48+
<p>
49+
<br> &bull; Simple and lightweight. No need for JavaScript.
50+
<br> &bull;For a very pleasant look, the colors are tinted with the primary color.
51+
<br> &bull;Proper favicon for modern browsers and Apple device icons.
52+
<br> &bull;Social media meta cards for easy sharing.
53+
<br> &bull;One of the best fonts: Inter and Source Code Pro. Everything local using NPM.
54+
<br> &bull;Mobile friendly, with dark mode.
55+
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quod eveniet fugit rem neque aliquam exercitationem magni iure, aliquid iste ut quam delectus dignissimos perspiciatis praesentium voluptatum obcaecati molestiae architecto minima.
56+
</p>
57+
</main>
58+
</body>
59+
</html>

‎old/styles/base.css

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@500&display=swap');
2+
@import url(/styles/color.css);
3+
@import url(/styles/style.css);
4+
@import url(/styles/common.css);
5+
6+
:root {
7+
font-family: Inter, sans-serif;
8+
font-feature-settings: "liga" 1, "calt" 1; /* fix for Chrome */
9+
}
10+
@supports (font-variation-settings: normal) {
11+
:root {
12+
font-family: InterVariable, sans-serif;
13+
}
14+
}
15+
16+
main {
17+
margin: 5% 30%;
18+
font-size: 1rem;
19+
line-height: 1.5;
20+
}
21+
22+
body {
23+
background-color: var(--color-background);
24+
color: var(--color-text);
25+
}
26+
27+
28+
html {
29+
scrollbar-color: var(--accsent-color) rgba(0,0,0,0);
30+
accent-color: var(--accsent-color);
31+
}

‎old/styles/color.css

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
:root {
2+
--color-background: #fdfbf8;
3+
--color-text: #000;
4+
--header-color: #fdfbf8b3;
5+
--accsent-color: #F1CF55;
6+
--color-text-secondary: #6c6c6c;
7+
--second-color-background: #FFF8DD;
8+
}
9+
10+
@media (prefers-color-scheme: dark) {
11+
:root {
12+
--color-background: #17140b;
13+
--second-color-background: #25231B;
14+
--header-color: #191815ad;
15+
--color-text: #fff;
16+
}
17+
}

‎old/styles/common.css

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
h1 {
2+
font-size: 50px;
3+
font-style: normal;
4+
font-weight: 900;
5+
line-height: normal;
6+
letter-spacing: -1.2px;
7+
}
8+
9+
h2 {
10+
font-size: 35px;
11+
font-style: normal;
12+
font-weight: 800;
13+
line-height: normal;
14+
letter-spacing: -1.2px;
15+
}
16+
17+
code {
18+
font-family: 'Source Code Pro', monospace;
19+
}
20+
21+
.code {
22+
background-color: var(--second-color-background);
23+
border-right: var(--accsent-color) 5px solid;
24+
padding: 10px 20px;
25+
border-radius: 20px;
26+
margin: 0;
27+
}
28+
29+
blockquote {
30+
border-left: var(--accsent-color) 5px solid;
31+
border-radius: 8px 50px 50px 8px;
32+
background-color: var(--second-color-background);
33+
padding: 10px 19px;
34+
margin: 0;
35+
width: max-content;
36+
}
37+
38+
blockquote p {
39+
color: var(--color-text-secondary);
40+
margin: 0;
41+
}
42+
43+
img {
44+
border-radius: 10px;
45+
width: 100%;
46+
}

‎old/styles/style.css

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
nav {
2+
background-color: none;
3+
backdrop-filter: blur(10px);
4+
overflow: hidden;
5+
position: fixed;
6+
top: 5%;
7+
left: 50%;
8+
transform: translate(-50%, -50%);
9+
border-radius: 40px;
10+
background-color: var(--header-color);
11+
border: 0.4px solid #74747460;
12+
padding: 1px 25px;
13+
text-align: center;
14+
}
15+
16+
nav ul {
17+
list-style-type: none;
18+
margin: 0;
19+
padding: 0;
20+
overflow: hidden;
21+
display: flex;
22+
align-items: center;
23+
justify-content: space-between;
24+
}
25+
26+
nav ul li {
27+
display: inline-block;
28+
}
29+
30+
nav ul li a {
31+
display: block;
32+
text-align: center;
33+
color: var(--color-text-secondary);
34+
text-decoration: none;
35+
font-weight: 600;
36+
font-size: 14px;
37+
letter-spacing: -0.72px;
38+
margin: 0 5px;
39+
font-size: 14px;
40+
transition: color 0.7s ease;
41+
}
42+
43+
nav ul li a:hover {
44+
color: var(--accsent-color);
45+
}
46+
47+
nav h1 {
48+
font-size: 16px;
49+
letter-spacing: -1px;
50+
font-weight: 800;
51+
color: var(--color-text); /* Apply the text color to h1 to match the links */
52+
margin: 10px 0;
53+
}
54+
55+
.h1-nav {
56+
margin-right: 50px;
57+
}

0 commit comments

Comments
 (0)