Line/VixenchromaWebSite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Languages update and some better organization and optimization

Browse Source
This commit is contained in:
Alyx LG
2025-11-04 13:08:25 +01:00
parent 72e83a3c30
commit 44b349dbca
14 changed files with 770 additions and 1034 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
README.md
View File

@@ -1,4 +1,14 @@
Git project for my website, it's free and public.
So you are free to take inspiration from it or steal things from it~
Start the project :
```
git pull ......
cd VixenchromaWebSite
# You need to have git-lfs installed
git lfs pull
docker compose up -d
# enjoy the website at localhost:8080
```
LINE / Alyx

3
docker-compose.yml
View File

@@ -7,4 +7,5 @@ services:
# - 127.0.0.1:8080:80
- 8080:80
volumes:
- ./html:/usr/share/nginx/html
- ./html:/usr/share/nginx/html
- ./nginx_default.conf:/etc/nginx/conf.d/default.conf:ro

193
html/3dprinting_painting.html
View File

@@ -1,4 +1,4 @@
<html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="title" content="VixenChroma">
@@ -6,7 +6,8 @@
<meta name="keywords" content="alyx le guen, alyx, le guen, line, vixenchroma">
<link rel="author" href="https://vixenchroma.com"/>
<link rel="icon" type="image/svg+xml" href="img/favicon.svg">
<link rel="icon" type="image/svg+xml" href="img/favicon.svg">
<link rel="stylesheet" href="/vixenchroma.css" />
<title>Vixenchroma</title>
</head>
<body>
@@ -17,22 +18,12 @@
</div>
<div id="flex">
<aside id="leftSidebar" style="margin-right: 8px;">
<div>
<h3>Links</h3>
<div class="box">
<ul style="padding-left:8px;">
<li><a href="https://wiki.vixenchroma.com/public" target="_blank">My Wiki</a></li>
<br>
<li><a href="https://git.vixenchroma.com/explore/repos" target="_blank">My Gitea</a></li>
<br>
<li><a href="https://github.com/Alyx-LeGuen" target="_blank">My Github</a></li>
<br>
<li><a href="https://www.linkedin.com/in/alyx-le-guen-a17581173" target="_blank">My Linkedin</a></li>
</ul>
</div>
<h3>Languages</h3>
<div class="box">
<li><a href="/">En</a> / <a href="/fr/">Fr</a> / <a href="/jp/">Jp</a></li>
</div>
<div>
<h3>Projects</h3>
<h3>Navigation</h3>
<div class="box">
<ul style="padding-left:8px;">
<li><a href="/">Home</a></li>
@@ -49,6 +40,20 @@
</ul>
</div>
</div>
<div>
<h3>Links</h3>
<div class="box">
<ul style="padding-left:8px;">
<li><a href="https://wiki.vixenchroma.com/public" target="_blank">My Wiki</a></li>
<br>
<li><a href="https://git.vixenchroma.com/explore/repos" target="_blank">My Gitea</a></li>
<br>
<li><a href="https://github.com/Alyx-LeGuen" target="_blank">My Github</a></li>
<br>
<li><a href="https://www.linkedin.com/in/alyx-le-guen-a17581173" target="_blank">My Linkedin</a></li>
</ul>
</div>
</div>
<div>
<h3>Cool badge !</h3>
<img src="/img/WonderWorld.png" alt="Such a world of Wonder" style="margin-left: auto;margin-right: auto;display: block;"/>
@@ -64,160 +69,10 @@
</main>
</div>
</div>
<!-- THIS IS THE CSS !-->
<style>
:root {
--header-image: url('/img/LINE_TXT_REVERSE.png');
--body-bg-image: url('/img/LINE_LOGO_BACKGROUND_WEBSITE.png');
/* colors */
--content: #43256E;
}
@font-face {
font-family: ADDSBP;
src: url('ADDSBP.TTF');
}
body {
cursor: url('img/cursor.png'), auto;
font-family: 'ADDSBP';
margin: 0;
background-color: #08031A;
background-size: 960px;
color: #fceaff;
background-image: var(--body-bg-image);
}
* {
box-sizing: border-box;
}
#container {
max-width: 900px;
margin: 0 auto;
}
#headerArea {
text-align: center;
height: 40px;
}
#container a {
color: #1E74FD;
font-weight: bold;
}
#header {
width: 100%;
background-size: 100%;
background-color: #241445;
height: 400px;
background-image: var(--header-image);
}
#flex {
display: flex;
}
li a {
color: #1E74FD;
font-weight: 800;
text-decoration: none;
cursor: url('img/cursor_click.png'), auto;
}
li a:hover {
color: #a49cba;
text-decoration: underline;
}
aside {
background-color: #241445;
width: 200px;
padding: 20px;
font-size: smaller;
}
main {
background-color: #43256E;
flex: 1;
padding: 20px;
order: 2;
}
/* what's this "order" stuff about??
allow me to explain!
if you're using both sidebars, the "order" value
tells the CSS the order in which to display them.
left sidebar is 1, content is 2, and right sidebar is 3! */
*/ #leftSidebar {
order: 1;
}
#rightSidebar {
order: 3;
}
footer {
background-color: #13092D;
width: 100%;
height: 40px;
padding: 8px;
text-align: center;
}
h1,
h2,
h3,
pre {
color: #1E74FD;
}
h1 {
font-size: 25px;
}
strong {
color: #1E74FD;
}
.box {
background-color: #13092D;
border: 1px solid #1E74FD;
padding: 8px;
}
#topBar {
width: 100%;
height: 30px;
padding: 8px;
font-size: smaller;
background-color: #13092D;
}
@media only screen and (max-width: 800px) {
#flex {
flex-wrap: wrap;
}
aside {
width: 100%;
}
main {
order: 1;
}
#leftSidebar {
order: 2;
}
#rightSidebar {
order: 3;
}
main img {
max-width: 100%;
height: auto;
}
</style>
</body>

45
html/404.html Normal file
View File

@@ -0,0 +1,45 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="title" content="VixenChroma">
<meta name="description" content="VixenChroma - Line / Alyx website" />
<meta name="keywords" content="alyx le guen, alyx, le guen, line, vixenchroma">
<link rel="author" href="https://vixenchroma.com"/>
<link rel="icon" type="image/svg+xml" href="img/favicon.svg">
<link rel="stylesheet" href="/vixenchroma.css" />
<title>Vixenchroma</title>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="headerArea">
<a href="/" style="color:cyan">Are you lost ?</a><br>
<a href="/" style="color:deeppink">Are you lost ?</a><br>
<a href="/" style="color:red">Are you lost ?</a><br>
<a href="/" style="color:purple">Are you lost ?</a><br>
<a href="/" style="color:deeppink">Are you lost ?</a><br>
<a href="/" style="color:red">Are you lost ?</a><br>
<a href="/" style="color:cyan">Are you lost ?</a><br>
<a href="/" style="color:red">Are you lost ?</a><br>
<a href="/" style="color:deeppink">Are you lost ?</a><br>
<a href="/" style="color:deeppink">Are you lost ?</a><br>
<a href="/" style="color:purple">Are you lost ?</a><br>
<a href="/" style="color:red">Are you lost ?</a><br>
<a href="/" style="color:deeppink">Are you lost ?</a><br>
<a href="/" style="color:purple">Are you lost ?</a><br>
<a href="/" style="color:cyan">Are you lost ?</a><br>
<a href="/" style="color:deeppink">Are you lost ?</a><br>
<a href="/" style="color:deeppink">Are you lost ?</a><br>
<a href="/" style="color:cyan">Are you lost ?</a><br>
<a href="/" style="color:purple">Are you lost ?</a><br>
</div>
</div>
<style>
a {
text-decoration: none;
font-size: 30px;
}
</style>
</body>
</html>

193
html/about.html
View File

@@ -1,4 +1,4 @@
<html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="title" content="VixenChroma">
@@ -6,7 +6,8 @@
<meta name="keywords" content="alyx le guen, alyx, le guen, line, vixenchroma">
<link rel="author" href="https://vixenchroma.com"/>
<link rel="icon" type="image/svg+xml" href="img/favicon.svg">
<link rel="icon" type="image/svg+xml" href="img/favicon.svg">
<link rel="stylesheet" href="/vixenchroma.css" />
<title>Vixenchroma</title>
</head>
<body>
@@ -17,22 +18,12 @@
</div>
<div id="flex">
<aside id="leftSidebar" style="margin-right: 8px;">
<div>
<h3>Links</h3>
<div class="box">
<ul style="padding-left:8px;">
<li><a href="https://wiki.vixenchroma.com/public" target="_blank">My Wiki</a></li>
<br>
<li><a href="https://git.vixenchroma.com/explore/repos" target="_blank">My Gitea</a></li>
<br>
<li><a href="https://github.com/Alyx-LeGuen" target="_blank">My Github</a></li>
<br>
<li><a href="https://www.linkedin.com/in/alyx-le-guen-a17581173" target="_blank">My Linkedin</a></li>
</ul>
</div>
<h3>Languages</h3>
<div class="box">
<li><a href="/">En</a> / <a href="/fr/">Fr</a> / <a href="/jp/">Jp</a></li>
</div>
<div>
<h3>Projects</h3>
<h3>Navigation</h3>
<div class="box">
<ul style="padding-left:8px;">
<li><a href="/">Home</a></li>
@@ -49,6 +40,20 @@
</ul>
</div>
</div>
<div>
<h3>Links</h3>
<div class="box">
<ul style="padding-left:8px;">
<li><a href="https://wiki.vixenchroma.com/public" target="_blank">My Wiki</a></li>
<br>
<li><a href="https://git.vixenchroma.com/explore/repos" target="_blank">My Gitea</a></li>
<br>
<li><a href="https://github.com/Alyx-LeGuen" target="_blank">My Github</a></li>
<br>
<li><a href="https://www.linkedin.com/in/alyx-le-guen-a17581173" target="_blank">My Linkedin</a></li>
</ul>
</div>
</div>
<div>
<h3>Cool badge !</h3>
<img src="/img/WonderWorld.png" alt="Such a world of Wonder" style="margin-left: auto;margin-right: auto;display: block;"/>
@@ -73,161 +78,5 @@
</main>
</div>
</div>
<!-- THIS IS THE CSS !-->
<style>
:root {
--header-image: url('/img/LINE_TXT_REVERSE.png');
--body-bg-image: url('/img/LINE_LOGO_BACKGROUND_WEBSITE.png');
/* colors */
--content: #43256E;
}
@font-face {
font-family: ADDSBP;
src: url('ADDSBP.TTF');
}
body {
cursor: url('img/cursor.png'), auto;
font-family: 'ADDSBP';
margin: 0;
background-color: #08031A;
background-size: 960px;
color: #fceaff;
background-image: var(--body-bg-image);
}
* {
box-sizing: border-box;
}
#container {
max-width: 900px;
margin: 0 auto;
}
#headerArea {
text-align: center;
height: 40px;
}
#container a {
color: #1E74FD;
font-weight: bold;
}
#header {
width: 100%;
background-size: 100%;
background-color: #241445;
height: 400px;
background-image: var(--header-image);
}
#flex {
display: flex;
}
li a {
color: #1E74FD;
font-weight: 800;
text-decoration: none;
cursor: url('img/cursor_click.png'), auto;
}
li a:hover {
color: #a49cba;
text-decoration: underline;
}
aside {
background-color: #241445;
width: 200px;
padding: 20px;
font-size: smaller;
}
main {
background-color: #43256E;
flex: 1;
padding: 20px;
order: 2;
}
/* what's this "order" stuff about??
allow me to explain!
if you're using both sidebars, the "order" value
tells the CSS the order in which to display them.
left sidebar is 1, content is 2, and right sidebar is 3! */
*/ #leftSidebar {
order: 1;
}
#rightSidebar {
order: 3;
}
footer {
background-color: #13092D;
width: 100%;
height: 40px;
padding: 8px;
text-align: center;
}
h1,
h2,
h3,
pre {
color: #1E74FD;
}
h1 {
font-size: 25px;
}
strong {
color: #1E74FD;
}
.box {
background-color: #13092D;
border: 1px solid #1E74FD;
padding: 8px;
}
#topBar {
width: 100%;
height: 30px;
padding: 8px;
font-size: smaller;
background-color: #13092D;
}
@media only screen and (max-width: 800px) {
#flex {
flex-wrap: wrap;
}
aside {
width: 100%;
}
main {
order: 1;
}
#leftSidebar {
order: 2;
}
#rightSidebar {
order: 3;
}
}
</style>
</body>
</html>

104
html/all_updates.html Normal file
View File

@@ -0,0 +1,104 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="title" content="VixenChroma">
<meta name="description" content="VixenChroma - Line / Alyx website" />
<meta name="keywords" content="alyx le guen, alyx, le guen, line, vixenchroma">
<link rel="author" href="https://vixenchroma.com"/>
<link rel="icon" type="image/svg+xml" href="img/favicon.svg">
<link rel="stylesheet" href="/vixenchroma.css" />
<title>Vixenchroma</title>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="headerArea">
<h2 style="color:white">Vixenchroma WebSite - Owner Line / Alyx</h2>
</div>
<div id="flex">
<aside id="leftSidebar" style="margin-right: 8px;">
<h3>Languages</h3>
<div class="box">
<li><a href="/">En</a> / <a href="/fr/">Fr</a> / <a href="/jp/">Jp</a></li>
</div>
<div>
<h3>Navigation</h3>
<div class="box">
<ul style="padding-left:8px;">
<li><a href="/">Home</a></li>
<br>
<li><a href="/about.html">About</a></li>
<br>
<li><a href="/art.html">Art</a></li>
<br>
<li><a href="/embroidery.html">Embroidery / Patches</a></li>
<br>
<li><a href="/3dprinting_painting.html">3D printing, figurines and painting</a></li>
<br>
<li><a href="/other_things.html">Other things</a></li>
</ul>
</div>
</div>
<div>
<h3>Links</h3>
<div class="box">
<ul style="padding-left:8px;">
<li><a href="https://wiki.vixenchroma.com/public" target="_blank">My Wiki</a></li>
<br>
<li><a href="https://git.vixenchroma.com/explore/repos" target="_blank">My Gitea</a></li>
<br>
<li><a href="https://github.com/Alyx-LeGuen" target="_blank">My Github</a></li>
<br>
<li><a href="https://www.linkedin.com/in/alyx-le-guen-a17581173" target="_blank">My Linkedin</a></li>
</ul>
</div>
</div>
<div>
<h3>Cool badge !</h3>
<img src="/img/WonderWorld.png" alt="Such a world of Wonder" style="margin-left: auto;margin-right: auto;display: block;"/>
<img src="/img/webbadge/agrou.png" alt="fox say agrou" style="margin-left: auto;margin-right: auto;display: block;">
<img src="/img/webbadge/traaa.png" alt="cool trans flag" style="margin-left: auto;margin-right: auto;display: block;">
<img src="/img/webbadge/linux.png" alt="cool linux badge" style="margin-left: auto;margin-right: auto;display: block;">
<img src="/img/webbadge/brains.gif" alt="powered by my brain" style="margin-left: auto;margin-right: auto;display: block;">
<img src="/img/webbadge/fox.png" alt="moving fox gif" style="margin-left: auto;margin-right: auto;display: block;width: 60%;">
</div>
</aside>
<main>
<p>--------</p>
<span>LATEST : 04/11/25</span>
<div class="box">
<p>
- Languages update !!
<br>You can now switch from English to French
<br>I've also started translating into Japanese
<br>
<br>- Better organization of pages and my HTML code
</p>
</div>
<p>--------</p>
<span> 21/05/25</span>
<div class="box">
<p>
- I added an about page and several pages to share my projects
</p>
</div>
<p>--------</p>
<span> 20/05/25</span>
<div class="box">
<p>
- <img src="/img/webbadge/new.gif" alt="new gif"/> website version with no more js
<br>
- <img src="/img/webbadge/new.gif" alt="new gif"/> content published
</p>
</div>
</main>
</div>
</div>
<style>
span {
font-size: 20px;
}
</style>
</body>
</html>

192
html/art.html
View File

@@ -1,4 +1,4 @@
<html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="title" content="VixenChroma">
@@ -6,7 +6,8 @@
<meta name="keywords" content="alyx le guen, alyx, le guen, line, vixenchroma">
<link rel="author" href="https://vixenchroma.com"/>
<link rel="icon" type="image/svg+xml" href="img/favicon.svg">
<link rel="icon" type="image/svg+xml" href="img/favicon.svg">
<link rel="stylesheet" href="/vixenchroma.css" />
<title>Vixenchroma</title>
</head>
<body>
@@ -17,22 +18,12 @@
</div>
<div id="flex">
<aside id="leftSidebar" style="margin-right: 8px;">
<div>
<h3>Links</h3>
<div class="box">
<ul style="padding-left:8px;">
<li><a href="https://wiki.vixenchroma.com/public" target="_blank">My Wiki</a></li>
<br>
<li><a href="https://git.vixenchroma.com/explore/repos" target="_blank">My Gitea</a></li>
<br>
<li><a href="https://github.com/Alyx-LeGuen" target="_blank">My Github</a></li>
<br>
<li><a href="https://www.linkedin.com/in/alyx-le-guen-a17581173" target="_blank">My Linkedin</a></li>
</ul>
</div>
<h3>Languages</h3>
<div class="box">
<li><a href="/">En</a> / <a href="/fr/">Fr</a> / <a href="/jp/">Jp</a></li>
</div>
<div>
<h3>Projects</h3>
<h3>Navigation</h3>
<div class="box">
<ul style="padding-left:8px;">
<li><a href="/">Home</a></li>
@@ -49,6 +40,20 @@
</ul>
</div>
</div>
<div>
<h3>Links</h3>
<div class="box">
<ul style="padding-left:8px;">
<li><a href="https://wiki.vixenchroma.com/public" target="_blank">My Wiki</a></li>
<br>
<li><a href="https://git.vixenchroma.com/explore/repos" target="_blank">My Gitea</a></li>
<br>
<li><a href="https://github.com/Alyx-LeGuen" target="_blank">My Github</a></li>
<br>
<li><a href="https://www.linkedin.com/in/alyx-le-guen-a17581173" target="_blank">My Linkedin</a></li>
</ul>
</div>
</div>
<div>
<h3>Cool badge !</h3>
<img src="/img/WonderWorld.png" alt="Such a world of Wonder" style="margin-left: auto;margin-right: auto;display: block;"/>
@@ -84,166 +89,11 @@
</main>
</div>
</div>
<!-- THIS IS THE CSS !-->
<style>
:root {
--header-image: url('/img/LINE_TXT_REVERSE.png');
--body-bg-image: url('/img/LINE_LOGO_BACKGROUND_WEBSITE.png');
/* colors */
--content: #43256E;
}
@font-face {
font-family: ADDSBP;
src: url('ADDSBP.TTF');
}
body {
cursor: url('img/cursor.png'), auto;
font-family: 'ADDSBP';
margin: 0;
background-color: #08031A;
background-size: 960px;
color: #fceaff;
background-image: var(--body-bg-image);
}
* {
box-sizing: border-box;
}
#container {
max-width: 900px;
margin: 0 auto;
}
#headerArea {
text-align: center;
height: 40px;
}
#container a {
color: #1E74FD;
font-weight: bold;
}
#header {
width: 100%;
background-size: 100%;
background-color: #241445;
height: 400px;
background-image: var(--header-image);
}
#flex {
display: flex;
}
li a {
color: #1E74FD;
font-weight: 800;
text-decoration: none;
cursor: url('img/cursor_click.png'), auto;
}
li a:hover {
color: #a49cba;
text-decoration: underline;
}
aside {
background-color: #241445;
width: 200px;
padding: 20px;
font-size: smaller;
}
main {
background-color: #43256E;
flex: 1;
padding: 20px;
order: 2;
}
main img {
max-width: 100%;
height: auto;
}
/* what's this "order" stuff about??
allow me to explain!
if you're using both sidebars, the "order" value
tells the CSS the order in which to display them.
left sidebar is 1, content is 2, and right sidebar is 3! */
*/ #leftSidebar {
order: 1;
}
#rightSidebar {
order: 3;
}
footer {
background-color: #13092D;
width: 100%;
height: 40px;
padding: 8px;
text-align: center;
}
h1,
h2,
h3,
pre {
color: #1E74FD;
}
h1 {
font-size: 25px;
}
strong {
color: #1E74FD;
}
.box {
background-color: #13092D;
border: 1px solid #1E74FD;
padding: 8px;
}
#topBar {
width: 100%;
height: 30px;
padding: 8px;
font-size: smaller;
background-color: #13092D;
}
@media only screen and (max-width: 800px) {
#flex {
flex-wrap: wrap;
}
aside {
width: 100%;
}
main {
order: 1;
}
#leftSidebar {
order: 2;
}
#rightSidebar {
order: 3;
}
}
</style>
</body>
</html>

191
html/embroidery.html
View File

@@ -1,4 +1,4 @@
<html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="title" content="VixenChroma">
@@ -6,7 +6,8 @@
<meta name="keywords" content="alyx le guen, alyx, le guen, line, vixenchroma">
<link rel="author" href="https://vixenchroma.com"/>
<link rel="icon" type="image/svg+xml" href="img/favicon.svg">
<link rel="icon" type="image/svg+xml" href="img/favicon.svg">
<link rel="stylesheet" href="/vixenchroma.css" />
<title>Vixenchroma</title>
</head>
<body>
@@ -17,22 +18,12 @@
</div>
<div id="flex">
<aside id="leftSidebar" style="margin-right: 8px;">
<div>
<h3>Links</h3>
<div class="box">
<ul style="padding-left:8px;">
<li><a href="https://wiki.vixenchroma.com/public" target="_blank">My Wiki</a></li>
<br>
<li><a href="https://git.vixenchroma.com/explore/repos" target="_blank">My Gitea</a></li>
<br>
<li><a href="https://github.com/Alyx-LeGuen" target="_blank">My Github</a></li>
<br>
<li><a href="https://www.linkedin.com/in/alyx-le-guen-a17581173" target="_blank">My Linkedin</a></li>
</ul>
</div>
<h3>Languages</h3>
<div class="box">
<li><a href="/">En</a> / <a href="/fr/">Fr</a> / <a href="/jp/">Jp</a></li>
</div>
<div>
<h3>Projects</h3>
<h3>Navigation</h3>
<div class="box">
<ul style="padding-left:8px;">
<li><a href="/">Home</a></li>
@@ -49,6 +40,20 @@
</ul>
</div>
</div>
<div>
<h3>Links</h3>
<div class="box">
<ul style="padding-left:8px;">
<li><a href="https://wiki.vixenchroma.com/public" target="_blank">My Wiki</a></li>
<br>
<li><a href="https://git.vixenchroma.com/explore/repos" target="_blank">My Gitea</a></li>
<br>
<li><a href="https://github.com/Alyx-LeGuen" target="_blank">My Github</a></li>
<br>
<li><a href="https://www.linkedin.com/in/alyx-le-guen-a17581173" target="_blank">My Linkedin</a></li>
</ul>
</div>
</div>
<div>
<h3>Cool badge !</h3>
<img src="/img/WonderWorld.png" alt="Such a world of Wonder" style="margin-left: auto;margin-right: auto;display: block;"/>
@@ -80,165 +85,11 @@
</main>
</div>
</div>
<!-- THIS IS THE CSS !-->
<style>
:root {
--header-image: url('/img/LINE_TXT_REVERSE.png');
--body-bg-image: url('/img/LINE_LOGO_BACKGROUND_WEBSITE.png');
/* colors */
--content: #43256E;
}
@font-face {
font-family: ADDSBP;
src: url('ADDSBP.TTF');
}
body {
cursor: url('img/cursor.png'), auto;
font-family: 'ADDSBP';
margin: 0;
background-color: #08031A;
background-size: 960px;
color: #fceaff;
background-image: var(--body-bg-image);
}
* {
box-sizing: border-box;
}
#container {
max-width: 900px;
margin: 0 auto;
}
#headerArea {
text-align: center;
height: 40px;
}
#container a {
color: #1E74FD;
font-weight: bold;
}
#header {
width: 100%;
background-size: 100%;
background-color: #241445;
height: 400px;
background-image: var(--header-image);
}
#flex {
display: flex;
}
li a {
color: #1E74FD;
font-weight: 800;
text-decoration: none;
cursor: url('img/cursor_click.png'), auto;
}
li a:hover {
color: #a49cba;
text-decoration: underline;
}
aside {
background-color: #241445;
width: 200px;
padding: 20px;
font-size: smaller;
}
main {
background-color: #43256E;
flex: 1;
padding: 20px;
order: 2;
}
main img {
max-width: 100%;
height: auto;
}
/* what's this "order" stuff about??
allow me to explain!
if you're using both sidebars, the "order" value
tells the CSS the order in which to display them.
left sidebar is 1, content is 2, and right sidebar is 3! */
*/ #leftSidebar {
order: 1;
}
#rightSidebar {
order: 3;
}
footer {
background-color: #13092D;
width: 100%;
height: 40px;
padding: 8px;
text-align: center;
}
h1,
h2,
h3 {
color: #1E74FD;
}
h1 {
font-size: 25px;
}
strong {
color: #1E74FD;
}
.box {
background-color: #13092D;
border: 1px solid #1E74FD;
padding: 8px;
}
#topBar {
width: 100%;
height: 30px;
padding: 8px;
font-size: smaller;
background-color: #13092D;
}
@media only screen and (max-width: 800px) {
#flex {
flex-wrap: wrap;
}
aside {
width: 100%;
}
main {
order: 1;
}
#leftSidebar {
order: 2;
}
#rightSidebar {
order: 3;
}
}
</style>
</body>
</html>

138
html/fr/index.html Normal file
View File

@@ -0,0 +1,138 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="title" content="VixenChroma">
<meta name="description" content="VixenChroma - Line / Alyx website" />
<meta name="keywords" content="alyx le guen, alyx, le guen, line, vixenchroma">
<link rel="author" href="https://vixenchroma.com"/>
<link rel="icon" type="image/svg+xml" href="/img/favicon.svg">
<link rel="stylesheet" href="/vixenchroma.css" />
<title>Vixenchroma</title>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="headerArea">
<h2 style="color:white">Site web Vixenchroma - de Line / Alyx</h2>
</div>
<div id="flex">
<aside id="leftSidebar" style="margin-right: 8px;">
<h3>Langages</h3>
<div class="box">
<li><a href="/">En</a> / <a href="/fr/">Fr</a> / <a href="/jp/">Jp</a></li>
</div>
<div>
<h3>Navigation</h3>
<div class="box">
<ul style="padding-left:8px;">
<li><a href="/">Accueil</a></li>
<br>
<li><a href="/about.html">A propos</a></li>
<br>
<li><a href="/art.html">Art</a></li>
<br>
<li><a href="/embroidery.html">Broderie / Patches</a></li>
<br>
<li><a href="/3dprinting_painting.html">Impression 3D, figurines et peinture</a></li>
<br>
<li><a href="/other_things.html">Autre</a></li>
</ul>
</div>
</div>
<div>
<h3>Liens</h3>
<div class="box">
<ul style="padding-left:8px;">
<li><a href="https://wiki.vixenchroma.com/public" target="_blank">Mon Wiki</a></li>
<br>
<li><a href="https://git.vixenchroma.com/explore/repos" target="_blank">Mon Gitea</a></li>
<br>
<li><a href="https://github.com/Alyx-LeGuen" target="_blank">Mon Github</a></li>
<br>
<li><a href="https://www.linkedin.com/in/alyx-le-guen-a17581173" target="_blank">Mon Linkedin</a></li>
</ul>
</div>
</div>
<div>
<h3>Magnifiques badges !</h3>
<img src="/img/WonderWorld.png" alt="Such a world of Wonder" style="margin-left: auto;margin-right: auto;display: block;"/>
<img src="/img/webbadge/agrou.png" alt="fox say agrou" style="margin-left: auto;margin-right: auto;display: block;">
<img src="/img/webbadge/traaa.png" alt="cool trans flag" style="margin-left: auto;margin-right: auto;display: block;">
<img src="/img/webbadge/linux.png" alt="cool linux badge" style="margin-left: auto;margin-right: auto;display: block;">
<img src="/img/webbadge/brains.gif" alt="powered by my brain" style="margin-left: auto;margin-right: auto;display: block;">
<img src="/img/webbadge/fox.png" alt="moving fox gif" style="margin-left: auto;margin-right: auto;display: block;width: 60%;">
</div>
</aside>
<main>
<h1 style="font-size: 23px">Bienvenue sur Vixenchroma !</h1>
<img src="/img/UnderDestruction.gif" alt="UnderDesctruction"/>
<p><strong>Informations sur la proprietaire :</strong></p>
<p>Je suis Line ou Alyx, une SysOps française avec beaucoup trop de hobbies.</p>
<p><strong>Projets en cours :</strong></p>
<p>- Je travaille sur ce site web</p>
<p>- Creation d'un style pixel art cyberpunk cool pour tous mes projets</p>
<p>- Peindre des figurines</p>
<p>- Ca joue a The Finals et Arc Raiders</p>
<p>- J'apprends a lire et ecrire le japonais</p>
<p>- Je me remets a la robotique et a la domotique.</p>
<p>- J'essaie de dormir davantage.</p>
<p><strong>IRL CTF / Conference ou vous avez peut-etre pu me voir :</strong></p>
- BreizhCTF 2025<br>
- European Cyber Week 2024<br>
- Purple Pill Challenge 2024<br>
- Le Hack Paris 2024<br>
- BreizhCTF 2024<br>
- European Cyber Week 2023<br>
- Purple Pill Challenge 2023<br>
- Le Hack Paris 2023<br>
- BreizhCTF 2023<br>
<pre style="font-family: 'ADDSBP';"> ------------------------
| WAF |
------------------------
\/
/^u_ /
,___,--~~~~--' /'~
`~--~\ )____,)/'
(/\\_ (/\\_
</pre>
<img src="/img/UnderDestruction.gif" alt="UnderDesctruction"/>
</main>
<aside id="rightSidebar" style="margin-left: 8px;">
<h3>Mises a jour</h3>
<div class="box">
<img src="/img/webbadge/new.gif" alt="new gif"/><span> 04/11/25</span>
<ul style="padding-left:8px;">
<li>Mise a jour linguistique !
<br>Vous pouvez passer de l'anglais au français
<br>
<br>Et j'ai commence a traduire en japonais</li>
<br>
<li>Meilleure organisation des pages et du code HTML</li>
</ul>
<p>--------</p>
<span> 21/05/25</span>
<ul style="padding-left:8px;">
<li>Ajout d'une page "A propos" et plusieurs pages pour presenter mes projets</li>
</ul>
<p>--------</p>
<a style="color:deeppink; font-size: 18px;" href="/all_updates.html" >Voir l'ensemble des maj</a>
</div>
<h3>Outils / Liens externes</h3>
<div class="box">
<ul style="padding-left:8px;">
<!-- Old https://goblin-heart.net/sadgrl/webmastery/webmaster-links sadgrl website -->
<li><a href="https://sadgrl.online/resources/webdev-links/">Liens utiles pour creer un site web</a></li>
<br>
<li><a href="https://www.dafont.com/addstandardbitmap.font">Police de caracteres utilisee pour le site</a></li>
</ul>
</div>
<img src="/img/webbadge/coolline.png" alt="powered by my brain" style="margin-left: auto;margin-right: auto;display: block;width: 80%;">
</aside>
</div>
</div>
</body>
</html>

225
html/index.html
View File

@@ -1,4 +1,4 @@
<html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="title" content="VixenChroma">
@@ -6,7 +6,8 @@
<meta name="keywords" content="alyx le guen, alyx, le guen, line, vixenchroma">
<link rel="author" href="https://vixenchroma.com"/>
<link rel="icon" type="image/svg+xml" href="img/favicon.svg">
<link rel="icon" type="image/svg+xml" href="img/favicon.svg">
<link rel="stylesheet" href="/vixenchroma.css" />
<title>Vixenchroma</title>
</head>
<body>
@@ -17,22 +18,12 @@
</div>
<div id="flex">
<aside id="leftSidebar" style="margin-right: 8px;">
<div>
<h3>Links</h3>
<div class="box">
<ul style="padding-left:8px;">
<li><a href="https://wiki.vixenchroma.com/public" target="_blank">My Wiki</a></li>
<br>
<li><a href="https://git.vixenchroma.com/explore/repos" target="_blank">My Gitea</a></li>
<br>
<li><a href="https://github.com/Alyx-LeGuen" target="_blank">My Github</a></li>
<br>
<li><a href="https://www.linkedin.com/in/alyx-le-guen-a17581173" target="_blank">My Linkedin</a></li>
</ul>
</div>
<h3>Languages</h3>
<div class="box">
<li><a href="/">En</a> / <a href="/fr/">Fr</a> / <a href="/jp/">Jp</a></li>
</div>
<div>
<h3>Projects</h3>
<h3>Navigation</h3>
<div class="box">
<ul style="padding-left:8px;">
<li><a href="/">Home</a></li>
@@ -50,7 +41,21 @@
</div>
</div>
<div>
<h3>Cool badge !</h3>
<h3>Links</h3>
<div class="box">
<ul style="padding-left:8px;">
<li><a href="https://wiki.vixenchroma.com/public" target="_blank">My Wiki</a></li>
<br>
<li><a href="https://git.vixenchroma.com/explore/repos" target="_blank">My Gitea</a></li>
<br>
<li><a href="https://github.com/Alyx-LeGuen" target="_blank">My Github</a></li>
<br>
<li><a href="https://www.linkedin.com/in/alyx-le-guen-a17581173" target="_blank">My Linkedin</a></li>
</ul>
</div>
</div>
<div>
<h3>Cool badges !</h3>
<img src="/img/WonderWorld.png" alt="Such a world of Wonder" style="margin-left: auto;margin-right: auto;display: block;"/>
<img src="/img/webbadge/agrou.png" alt="fox say agrou" style="margin-left: auto;margin-right: auto;display: block;">
<img src="/img/webbadge/traaa.png" alt="cool trans flag" style="margin-left: auto;margin-right: auto;display: block;">
@@ -64,10 +69,16 @@
<img src="/img/UnderDestruction.gif" alt="UnderDesctruction"/>
<p><strong>Some owner info :</strong></p>
<p>I'm Line or Alyx, French SysOps with too many hobbies.</p>
<p><strong>Ongoing projects :</strong></p>
<p>- Working on this website</p>
<p>- Creating a cool cyberpunk pixel art style for all my projects</p>
<p>- Painting figurines</p>
<p>- Playing The Finals and Arc Raiders</p>
<p>- Learning to speak and read japanese</p>
<p>- Getting back into robotics and home automation</p>
<p>- Trying to sleep more</p>
<p><strong>IRL CTF / Conference where you may have seen me :</strong></p>
- BreizhCTF 2025<br>
- European Cyber Week 2024<br>
@@ -91,24 +102,30 @@
<img src="/img/UnderDestruction.gif" alt="UnderDesctruction"/>
</main>
<aside id="rightSidebar" style="margin-left: 8px;">
<h2>Updates</h2>
<h3>Updates</h3>
<div class="box">
<img src="/img/webbadge/new.gif" alt="new gif"/><span> 21/05/25</span>
<img src="/img/webbadge/new.gif" alt="new gif"/><span> 04/11/25</span>
<ul style="padding-left:8px;">
<li>Languages update !! You can now switch from English to French
<br>
<br>
I've also started translating into Japanese</li>
<br>
<li>Better organization of pages and my HTML code</li>
</ul>
<p>--------</p>
<span> 21/05/25</span>
<ul style="padding-left:8px;">
<li>I added an about page and several pages to share my projects</li>
</ul>
<p>--------</p>
<span> 20/05/25</span>
<ul style="padding-left:8px;">
<li>NEW website version with no more js</li>
<br>
<li>NEW content published</li>
</ul>
<a style="color:deeppink; font-size: 18px;" href="/all_updates.html" >View past updates</a>
</div>
<h3>External Tools/Links</h3>
<div class="box">
<ul style="padding-left:8px;">
<li><a href="https://goblin-heart.net/sadgrl/webmastery/webmaster-links">Usefull links to build website</a></li>
<!-- Old https://goblin-heart.net/sadgrl/webmastery/webmaster-links sadgrl website -->
<li><a href="https://sadgrl.online/resources/webdev-links/">Useful links to build website</a></li>
<br>
<li><a href="https://www.dafont.com/addstandardbitmap.font">Font used for the site</a></li>
</ul>
@@ -117,161 +134,5 @@
</aside>
</div>
</div>
<!-- THIS IS THE CSS !-->
<style>
:root {
--header-image: url('/img/LINE_TXT_REVERSE.png');
--body-bg-image: url('/img/LINE_LOGO_BACKGROUND_WEBSITE.png');
/* colors */
--content: #43256E;
}
@font-face {
font-family: ADDSBP;
src: url('ADDSBP.TTF');
}
body {
cursor: url('img/cursor.png'), auto;
font-family: 'ADDSBP';
margin: 0;
background-color: #08031A;
background-size: 960px;
color: #fceaff;
background-image: var(--body-bg-image);
}
* {
box-sizing: border-box;
}
#container {
max-width: 900px;
margin: 0 auto;
}
#headerArea {
text-align: center;
height: 40px;
}
#container a {
color: #1E74FD;
font-weight: bold;
}
#header {
width: 100%;
background-size: 100%;
background-color: #241445;
height: 400px;
background-image: var(--header-image);
}
#flex {
display: flex;
}
li a {
color: #1E74FD;
font-weight: 800;
text-decoration: none;
cursor: url('img/cursor_click.png'), auto;
}
li a:hover {
color: #a49cba;
text-decoration: underline;
}
aside {
background-color: #241445;
width: 200px;
padding: 20px;
font-size: smaller;
}
main {
background-color: #43256E;
flex: 1;
padding: 20px;
order: 2;
}
/* what's this "order" stuff about??
allow me to explain!
if you're using both sidebars, the "order" value
tells the CSS the order in which to display them.
left sidebar is 1, content is 2, and right sidebar is 3! */
*/ #leftSidebar {
order: 1;
}
#rightSidebar {
order: 3;
}
footer {
background-color: #13092D;
width: 100%;
height: 40px;
padding: 8px;
text-align: center;
}
h1,
h2,
h3,
pre {
color: #1E74FD;
}
h1 {
font-size: 25px;
}
strong {
color: #1E74FD;
}
.box {
background-color: #13092D;
border: 1px solid #1E74FD;
padding: 8px;
}
#topBar {
width: 100%;
height: 30px;
padding: 8px;
font-size: smaller;
background-color: #13092D;
}
@media only screen and (max-width: 800px) {
#flex {
flex-wrap: wrap;
}
aside {
width: 100%;
}
main {
order: 1;
}
#leftSidebar {
order: 2;
}
#rightSidebar {
order: 3;
}
}
</style>
</body>
</html>

138
html/jp/index.html Normal file
View File

@@ -0,0 +1,138 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="title" content="VixenChroma">
<meta name="description" content="VixenChroma - Line / Alyx website" />
<meta name="keywords" content="alyx le guen, alyx, le guen, line, vixenchroma">
<link rel="author" href="https://vixenchroma.com"/>
<link rel="icon" type="image/svg+xml" href="/img/favicon.svg">
<link rel="stylesheet" href="/vixenchroma.css" />
<title>Vixenchroma</title>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="headerArea">
<h2 style="color:white">Vixenchroma WebSite - Owner Line / Alyx</h2>
</div>
<div id="flex">
<aside id="leftSidebar" style="margin-right: 8px;">
<h3>Languages</h3>
<div class="box">
<li><a href="/">En</a> / <a href="/fr/">Fr</a> / <a href="/jp/">Jp</a></li>
</div>
<div>
<h3>Navigation</h3>
<div class="box">
<ul style="padding-left:8px;">
<li><a href="/">Home</a></li>
<br>
<li><a href="/about.html">About</a></li>
<br>
<li><a href="/art.html">Art</a></li>
<br>
<li><a href="/embroidery.html">Embroidery / Patches</a></li>
<br>
<li><a href="/3dprinting_painting.html">3D printing, figurines and painting</a></li>
<br>
<li><a href="/other_things.html">Other things</a></li>
</ul>
</div>
</div>
<div>
<h3>Links</h3>
<div class="box">
<ul style="padding-left:8px;">
<li><a href="https://wiki.vixenchroma.com/public" target="_blank">My Wiki</a></li>
<br>
<li><a href="https://git.vixenchroma.com/explore/repos" target="_blank">My Gitea</a></li>
<br>
<li><a href="https://github.com/Alyx-LeGuen" target="_blank">My Github</a></li>
<br>
<li><a href="https://www.linkedin.com/in/alyx-le-guen-a17581173" target="_blank">My Linkedin</a></li>
</ul>
</div>
</div>
<div>
<h3>Cool badges !</h3>
<img src="/img/WonderWorld.png" alt="Such a world of Wonder" style="margin-left: auto;margin-right: auto;display: block;"/>
<img src="/img/webbadge/agrou.png" alt="fox say agrou" style="margin-left: auto;margin-right: auto;display: block;">
<img src="/img/webbadge/traaa.png" alt="cool trans flag" style="margin-left: auto;margin-right: auto;display: block;">
<img src="/img/webbadge/linux.png" alt="cool linux badge" style="margin-left: auto;margin-right: auto;display: block;">
<img src="/img/webbadge/brains.gif" alt="powered by my brain" style="margin-left: auto;margin-right: auto;display: block;">
<img src="/img/webbadge/fox.png" alt="moving fox gif" style="margin-left: auto;margin-right: auto;display: block;width: 60%;">
</div>
</aside>
<main>
<h1>Welcome on Vixenchroma !</h1>
<img src="/img/UnderDestruction.gif" alt="UnderDesctruction"/>
<p><strong>Some owner info :</strong></p>
<p>I'm Line or Alyx, French SysOps with too many hobbies.</p>
<p><strong>Ongoing projects :</strong></p>
<p>- Working on this website</p>
<p>- Creating a cool cyberpunk pixel art style for all my projects</p>
<p>- Painting figurines</p>
<p>- Playing The Finals and Arc Raiders</p>
<p>- Learning to speak and read japanese</p>
<p>- Getting back into robotics and home automation</p>
<p>- Trying to sleep more</p>
<p><strong>IRL CTF / Conference where you may have seen me :</strong></p>
- BreizhCTF 2025<br>
- European Cyber Week 2024<br>
- Purple Pill Challenge 2024<br>
- Le Hack Paris 2024<br>
- BreizhCTF 2024<br>
- European Cyber Week 2023<br>
- Purple Pill Challenge 2023<br>
- Le Hack Paris 2023<br>
- BreizhCTF 2023<br>
<pre style="font-family: 'ADDSBP';"> ------------------------
| WAF |
------------------------
\/
/^u_ /
,___,--~~~~--' /'~
`~--~\ )____,)/'
(/\\_ (/\\_
</pre>
<img src="/img/UnderDestruction.gif" alt="UnderDesctruction"/>
</main>
<aside id="rightSidebar" style="margin-left: 8px;">
<h3>Updates</h3>
<div class="box">
<img src="/img/webbadge/new.gif" alt="new gif"/><span> 04/11/25</span>
<ul style="padding-left:8px;">
<li>Languages update !! You can now switch from English to French
<br>
<br>
I've also started translating into Japanese</li>
<br>
<li>Better organization of pages and my HTML code</li>
</ul>
<p>--------</p>
<span> 21/05/25</span>
<ul style="padding-left:8px;">
<li>I added an about page and several pages to share my projects</li>
</ul>
<p>--------</p>
<a style="color:deeppink; font-size: 18px;" href="/all_updates.html" >View past updates</a>
</div>
<h3>External Tools/Links</h3>
<div class="box">
<ul style="padding-left:8px;">
<!-- Old https://goblin-heart.net/sadgrl/webmastery/webmaster-links sadgrl website -->
<li><a href="https://sadgrl.online/resources/webdev-links/">Useful links to build website</a></li>
<br>
<li><a href="https://www.dafont.com/addstandardbitmap.font">Font used for the site</a></li>
</ul>
</div>
<img src="/img/webbadge/coolline.png" alt="powered by my brain" style="margin-left: auto;margin-right: auto;display: block;width: 80%;">
</aside>
</div>
</div>
</body>
</html>

193
html/other_things.html
View File

@@ -1,4 +1,4 @@
<html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="title" content="VixenChroma">
@@ -6,7 +6,8 @@
<meta name="keywords" content="alyx le guen, alyx, le guen, line, vixenchroma">
<link rel="author" href="https://vixenchroma.com"/>
<link rel="icon" type="image/svg+xml" href="img/favicon.svg">
<link rel="icon" type="image/svg+xml" href="img/favicon.svg">
<link rel="stylesheet" href="/vixenchroma.css" />
<title>Vixenchroma</title>
</head>
<body>
@@ -17,22 +18,12 @@
</div>
<div id="flex">
<aside id="leftSidebar" style="margin-right: 8px;">
<div>
<h3>Links</h3>
<div class="box">
<ul style="padding-left:8px;">
<li><a href="https://wiki.vixenchroma.com/public" target="_blank">My Wiki</a></li>
<br>
<li><a href="https://git.vixenchroma.com/explore/repos" target="_blank">My Gitea</a></li>
<br>
<li><a href="https://github.com/Alyx-LeGuen" target="_blank">My Github</a></li>
<br>
<li><a href="https://www.linkedin.com/in/alyx-le-guen-a17581173" target="_blank">My Linkedin</a></li>
</ul>
</div>
<h3>Languages</h3>
<div class="box">
<li><a href="/">En</a> / <a href="/fr/">Fr</a> / <a href="/jp/">Jp</a></li>
</div>
<div>
<h3>Projects</h3>
<h3>Navigation</h3>
<div class="box">
<ul style="padding-left:8px;">
<li><a href="/">Home</a></li>
@@ -49,6 +40,20 @@
</ul>
</div>
</div>
<div>
<h3>Links</h3>
<div class="box">
<ul style="padding-left:8px;">
<li><a href="https://wiki.vixenchroma.com/public" target="_blank">My Wiki</a></li>
<br>
<li><a href="https://git.vixenchroma.com/explore/repos" target="_blank">My Gitea</a></li>
<br>
<li><a href="https://github.com/Alyx-LeGuen" target="_blank">My Github</a></li>
<br>
<li><a href="https://www.linkedin.com/in/alyx-le-guen-a17581173" target="_blank">My Linkedin</a></li>
</ul>
</div>
</div>
<div>
<h3>Cool badge !</h3>
<img src="/img/WonderWorld.png" alt="Such a world of Wonder" style="margin-left: auto;margin-right: auto;display: block;"/>
@@ -64,160 +69,10 @@
</main>
</div>
</div>
<!-- THIS IS THE CSS !-->
<style>
:root {
--header-image: url('/img/LINE_TXT_REVERSE.png');
--body-bg-image: url('/img/LINE_LOGO_BACKGROUND_WEBSITE.png');
/* colors */
--content: #43256E;
}
@font-face {
font-family: ADDSBP;
src: url('ADDSBP.TTF');
}
body {
cursor: url('img/cursor.png'), auto;
font-family: 'ADDSBP';
margin: 0;
background-color: #08031A;
background-size: 960px;
color: #fceaff;
background-image: var(--body-bg-image);
}
* {
box-sizing: border-box;
}
#container {
max-width: 900px;
margin: 0 auto;
}
#headerArea {
text-align: center;
height: 40px;
}
#container a {
color: #1E74FD;
font-weight: bold;
}
#header {
width: 100%;
background-size: 100%;
background-color: #241445;
height: 400px;
background-image: var(--header-image);
}
#flex {
display: flex;
}
li a {
color: #1E74FD;
font-weight: 800;
text-decoration: none;
cursor: url('img/cursor_click.png'), auto;
}
li a:hover {
color: #a49cba;
text-decoration: underline;
}
aside {
background-color: #241445;
width: 200px;
padding: 20px;
font-size: smaller;
}
main {
background-color: #43256E;
flex: 1;
padding: 20px;
order: 2;
}
/* what's this "order" stuff about??
allow me to explain!
if you're using both sidebars, the "order" value
tells the CSS the order in which to display them.
left sidebar is 1, content is 2, and right sidebar is 3! */
*/ #leftSidebar {
order: 1;
}
#rightSidebar {
order: 3;
}
footer {
background-color: #13092D;
width: 100%;
height: 40px;
padding: 8px;
text-align: center;
}
h1,
h2,
h3,
pre {
color: #1E74FD;
}
h1 {
font-size: 25px;
}
strong {
color: #1E74FD;
}
.box {
background-color: #13092D;
border: 1px solid #1E74FD;
padding: 8px;
}
#topBar {
width: 100%;
height: 30px;
padding: 8px;
font-size: smaller;
background-color: #13092D;
}
@media only screen and (max-width: 800px) {
#flex {
flex-wrap: wrap;
}
aside {
width: 100%;
}
main {
order: 1;
}
#leftSidebar {
order: 2;
}
#rightSidebar {
order: 3;
}
main img {
max-width: 100%;
height: auto;
}
</style>
</body>

156
html/vixenchroma.css Normal file
View File

@@ -0,0 +1,156 @@
:root {
--header-image: url('/img/LINE_TXT_REVERSE.png');
--body-bg-image: url('/img/LINE_LOGO_BACKGROUND_WEBSITE.png');
/* colors */
--content: #43256E;
}
@font-face {
font-family: ADDSBP;
src: url('/ADDSBP.TTF');
}
body {
cursor: url('/img/cursor.png')6 0, auto;
font-family: 'ADDSBP';
margin: 0;
background-color: #08031A;
background-size: 960px;
color: #fceaff;
background-image: var(--body-bg-image);
}
* {
box-sizing: border-box;
}
#container {
max-width: 900px;
margin: 0 auto;
}
#headerArea {
text-align: center;
height: 40px;
}
#container a {
color: #1E74FD;
font-weight: bold;
}
#header {
width: 100%;
background-size: 100%;
background-color: #241445;
height: 400px;
background-image: var(--header-image);
}
#flex {
display: flex;
}
a {
text-decoration: none;
}
li a {
color: #1E74FD;
font-weight: 800;
text-decoration: none;
cursor: url('/img/cursor_click.png')6 0, auto;
}
li a:hover {
color: #a49cba;
text-decoration: underline;
}
aside {
background-color: #241445;
width: 200px;
padding: 20px;
font-size: smaller;
}
main {
background-color: #43256E;
flex: 1;
padding: 20px;
order: 2;
}
/* what's this "order" stuff about??
allow me to explain!
if you're using both sidebars, the "order" value
tells the CSS the order in which to display them.
left sidebar is 1, content is 2, and right sidebar is 3! */
*/ #leftSidebar {
order: 1;
}
#rightSidebar {
order: 3;
}
footer {
background-color: #13092D;
width: 100%;
height: 40px;
padding: 8px;
text-align: center;
}
h1,
h2,
h3,
pre {
color: #1E74FD;
}
h1 {
font-size: 25px;
}
strong {
color: #1E74FD;
}
.box {
background-color: #13092D;
border: 1px solid #1E74FD;
padding: 8px;
}
#topBar {
width: 100%;
height: 30px;
padding: 8px;
font-size: smaller;
background-color: #13092D;
}
@media only screen and (max-width: 800px) {
#flex {
flex-wrap: wrap;
}
aside {
width: 100%;
}
main {
order: 1;
}
#leftSidebar {
order: 2;
}
#rightSidebar {
order: 3;
}
}

23
nginx_default.conf Normal file
View File

@@ -0,0 +1,23 @@
server {
listen 80;
server_name localhost;
# site
location / {
root /usr/share/nginx/html;
index index.html;
}
# security
server_tokens off;
# error
error_page 404 /404.html;
location = /404.html {
root /usr/share/nginx/html;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}