Configured and redid the base website structure

This commit is contained in:
Bo⋆˚✿˖° 2025-05-25 20:58:24 +02:00
parent d6be5d4df4
commit c38c08f65c
No known key found for this signature in database
GPG key ID: CEE0F03E50221D34
9 changed files with 300 additions and 0 deletions

9
docker-compose.yml Normal file
View file

@ -0,0 +1,9 @@
services:
web:
image: nginx:latest
container_name: freed-place
restart: unless-stopped
volumes:
- ./html:/usr/share/nginx/html:ro
ports:
- "80:80"

43
html/about/index.html Normal file
View file

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html>
<head>
<title>/ | Freed's place</title>
<link rel="stylesheet" href="/assets/style.css">
<link rel="stylesheet" href="/assets/mobile.css">
<link rel="icon" type="image/x-icon" href="/assets/img/logo.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
</head>
<body>
<div class="box menu">
<div class="name"><p>Freed's place</p></div>
<div class="index">
<p>
<a href="/">Home</a> |
<a href="/about">About</a> |
<a href="/contact">Contact</a>
</p>
</div>
</div>
<div class="box">
<div class="item center">
<img src="/assets/img/logo.png" class="img">
</div>
<div class="item">
<h1>(&#x2500;&#x203F;&#x203F;&#x2500;) &#x2661;</h1>
<p>heya! my name's Bo, also known as Freed! I'm a tiny creature traveling around the wild web like every other tiny creature which I see on my computer screen. be welcome to my little corner of the internet!</p>
</div>
</div>
<div class="box footer">
<div class="info">
<p>Freed's place</p>
<p>Copyright (c) 2022-2025 FreedTapestry21</p>
</div>
</div>
</body>
</html>

Binary file not shown.

BIN
html/assets/img/favicon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

BIN
html/assets/img/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

68
html/assets/mobile.css Normal file
View file

@ -0,0 +1,68 @@
/*
* Freed.place
* Version 3.0
* Copyright (c) 2025 FreedTapestry21
*/
/* Responsive layout for mobile */
@media (max-width: 768px) {
/* Menu */
.menu {
width: 90%;
margin: auto;
}
.menu p {user-select: none; font-size: 20px;}
.menu a {
color: var(--background-color);
text-decoration: none;
}
.menu a:hover {
color: var(--accent-color-dark);
background-color: var(--background-color);
}
.name {
text-align: center; width: 100%;
background-color: var(--accent-color);
color: var(--text-color);
}
.index {
text-align: center; width: 100%;
background-color: var(--accent-color-dark);
color: var(--text-color);
}
/* Footer */
.footer {
background-color: var(--accent-color);
color: var(--background-color);
width: 100%;
margin: auto;
}
.footer p {font-size:12px;}
.info {text-align: center; width: 100%;}
/* Boxes */
.box {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.item {
padding: 10px;
width: 80%;
}
}

94
html/assets/style.css Normal file
View file

@ -0,0 +1,94 @@
/*
* Freed.place
* Version 3.0
* Copyright (c) 2025 FreedTapestry21
*/
@font-face {
font-family: 'Jetbrains Mono';
src: local(''),
url('./fonts/jbmono.woff2')
}
:root {
--accent-color: #b4befe;
--accent-color-dark: #9198cd;
--background-color: #191724;
}
body {
background-color: var(--background-color);
color: var(--accent-color);
font-family: Verdana, sans-serif;
}
p {font-size: 16px;}
h1 {font-size: 32px;}
h2 {font-size: 28px;}
h3 {font-size: 24px;}
h4 {font-size: 20px;}
/* Custom */
.center {
display: flex;
justify-content: center;
}
.img {
width: min(512px, 45%);
}
/* Menu */
.menu {
background-color: var(--accent-color);
color: var(--background-color);
width: 90%;
margin: auto;
}
.menu p {user-select: none; font-size: 20px;}
.menu a {
color: var(--background-color);
text-decoration: none;
}
.menu a:hover {
color: var(--accent-color);
background-color: var(--background-color);
}
.name {text-align: left; width: 45%;}
.index {text-align: right; width: 45%;}
/* Footer */
.footer {
background-color: var(--accent-color);
color: var(--background-color);
width: 90%;
margin: auto;
}
.footer p {font-size:12px;}
.info {text-align: left; width: 90%;}
/* Boxes */
.box {
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
}
.item {
padding: 10px;
width: 40%;
margin: auto;
}

43
html/contact/index.html Normal file
View file

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html>
<head>
<title>/ | Freed's place</title>
<link rel="stylesheet" href="/assets/style.css">
<link rel="stylesheet" href="/assets/mobile.css">
<link rel="icon" type="image/x-icon" href="/assets/img/logo.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
</head>
<body>
<div class="box menu">
<div class="name"><p>Freed's place</p></div>
<div class="index">
<p>
<a href="/">Home</a> |
<a href="/about">About</a> |
<a href="/contact">Contact</a>
</p>
</div>
</div>
<div class="box">
<div class="item center">
<img src="/assets/img/logo.png" class="img">
</div>
<div class="item">
<h1>(&#x2500;&#x203F;&#x203F;&#x2500;) &#x2661;</h1>
<p>heya! my name's Bo, also known as Freed! I'm a tiny creature traveling around the wild web like every other tiny creature which I see on my computer screen. be welcome to my little corner of the internet!</p>
</div>
</div>
<div class="box footer">
<div class="info">
<p>Freed's place</p>
<p>Copyright (c) 2022-2025 FreedTapestry21</p>
</div>
</div>
</body>
</html>

43
html/index.html Normal file
View file

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html>
<head>
<title>/ | Freed's place</title>
<link rel="stylesheet" href="/assets/style.css">
<link rel="stylesheet" href="/assets/mobile.css">
<link rel="icon" type="image/x-icon" href="/assets/img/logo.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
</head>
<body>
<div class="box menu">
<div class="name"><p>Freed's place</p></div>
<div class="index">
<p>
<a href="/">Home</a> |
<a href="/about">About</a> |
<a href="/contact">Contact</a>
</p>
</div>
</div>
<div class="box">
<div class="item center">
<img src="/assets/img/logo.png" class="img">
</div>
<div class="item">
<h1>(&#x2500;&#x203F;&#x203F;&#x2500;) &#x2661;</h1>
<p>heya! my name's Bo, also known as Freed! I'm a tiny creature traveling around the wild web like every other tiny creature which I see on my computer screen. be welcome to my little corner of the internet!</p>
</div>
</div>
<div class="box footer">
<div class="info">
<p>Freed's place</p>
<p>Copyright (c) 2022-2025 FreedTapestry21</p>
</div>
</div>
</body>
</html>