yw5n/yw5ncom
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: suckless inspired style
All checks were successful
/ deploy (push) Successful in 11s
Details

Browse Source
This commit is contained in:
ange 2024-09-10 10:27:27 +07:00
parent 34570534a7
commit ea5de0a2c4
Signed by: ange
GPG Key ID: 9E0C4157BB7BEB1D
4 changed files with 213 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Dockerfile
View File

@ -1,2 +1,2 @@
FROM docker.io/nginx:latest
COPY html/ /usr/share/nginx/html/
COPY static/ /usr/share/nginx/html/

48
html/index.html
View File

@ -1,48 +0,0 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
<style>
#body {
# background-color: #000;
# color: #fff;
#}
table, th, td {
#border: 2px solid #fff;
border: 2px solid;
border-collapse: collapse;
padding: 1ex;
}
</style>
<title>Ange DUHAYON</title>
</head>
<body>
<h1>⚠️ Website in construction! ⚠️</h1>
<table>
<tr>
<th>Plateform</th>
<th>Contact</th>
</tr>
<tr>
<td>Matrix (Element)</td>
<td><a href="https://app.element.io/#/user/@ange:gmoker.com">@ange:gmoker.com</a></td>
</tr>
<tr>
<td>Discord</td>
<td>@elrilio</td>
</tr>
<tr>
<td>Phone (France)</td>
<td><a href="tel:+33582951623">+33 5 82 95 16 23</a></td>
</tr>
<tr>
<td>Email</td>
<td><a href="mailto:ange@yw5n.com">ange@yw5n.com</a></td>
</tr>
<tr>
<td>WhatsApp</td>
<td><a href="https://wa.me/6288231253958">+62 882-3125-3958</a></td>
</tr>
</table>
</body>
</html>

42
static/index.html Normal file
View File

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ange DUHAYON</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div id="header">
<a id="headerLink" href="/">Ange DUHAYON</a>
<span id="headerSubtitle">DevOps</span>
</div>
<div id="menu">
<a href="/"><b>contact</b></a>
<a href="/resume/">resume</a>
<a href="/about/">about me</a>
<span class="right">
<a href="//git.gmoker.com/yw5n/">source</a>
</span>
</div>
<hr class="hidden"/>
<div id="content">
<div id="nav">
<ul>
<li><a href="#matrix">Matrix</a></li>
<li><a href="#discord">Discord</a></li>
<li><a href="#phone">Phone (France)</a></li>
<li><a href="#email">Email</a></li>
<li><a href="#wa">WhatsApp</a></li>
</ul>
</div>
<div id="main">
<table>
<tr id="matrix"><td>Matrix (Element)</td><td><a href="https://app.element.io/#/user/@ange:gmoker.com">@ange:gmoker.com</a></td></tr>
<tr id="discord"><td>Discord</td><td>@elrilio</td></tr>
<tr id="phone"><td>Phone (France)</td><td><a href="tel:+33582951623">+33 5 82 95 16 23</a></td></tr>
<tr id="email"><td>Email</td><td><a href="mailto:ange@yw5n.com">ange@yw5n.com</a></td></tr>
<tr id="wa"><td>WhatsApp</td><td><a href="https://wa.me/6285333559453">+62 853-3355-9453</a></td></tr>
</table>
</div>
</body>
</html>

170
static/style.css Normal file
View File

@ -0,0 +1,170 @@
/* https://suckless.org/pub/style.css */
html {
overflow-y: scroll;
}
body {
background-color: #fff;
color: #000;
font-family: sans-serif;
padding: 0;
margin: 0;
}
pre, code {
margin: 0;
}
a {
color: #005386;
}
#header a, #nav a, #menu a {
text-decoration: none;
}
#nav a:hover {
background-color: #ddd;
}
#menu {
clear: both;
color: #069;
overflow: hidden;
background-color: #17a;
padding: 0.7ex;
border-top: 1px solid #ccc;
border-bottom: 1px solid #069;
}
#menu a {
padding: 0.5ex 1ex;
color: #fff;
}
#menu a:hover {
background-color: #069;
}
#header {
background-color: #eee;
clear: both;
color: #555;
font-size: 1.78em;
padding: 0.7ex 0.7ex 0.7ex 0.7em;
}
#headerLink {
color: #17a;
margin-left: 5px;
}
h1 {
margin: 1em 1ex 0.5ex 0;
font-size: 1.4em;
}
h2 {
margin: 1em 1ex 0.5ex 0;
font-size: 1.3em;
}
h3 {
margin: 1em 1ex 0.5ex 0;
font-size: 1.0em;
}
h4 {
margin: 1em 1ex 0.5ex 0;
font-size: 0.9em;
}
#headerSubtitle {
font-size: 0.75em;
font-style: italic;
margin-left: 1em;
}
#content {
clear: both;
margin: 0;
padding: 0;
}
#nav {
float: left;
margin: 0 1px 0 0;
padding: 1em 0;
border-right: 1px dotted #ccc;
width: 200px;
}
#nav ul {
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
padding: 0;
margin: 0;
}
#nav li ul {
padding-left: 0.6em !important;
}
#nav li a {
display: block;
margin: 0;
padding: 0.8ex 2em 0.8ex 1em;
}
#main {
margin: 0 0 0 200px;
max-width: 50em;
padding: 1.5em;
}
.left {
float: left;
margin: 0;
padding: 0;
}
.right {
float: right;
margin: 0;
padding: 0;
}
.hidden {
display: none;
}
@media (prefers-color-scheme: dark) {
body {
background-color: #000;
color: #bdbdbd;
}
#menu {
border-top: 1px solid #222;
}
#header {
background-color: #111;
}
#nav a:hover {
background-color: #222;
}
blockquote, pre, code {
background-color: #111;
border-color: #222;
}
a {
color: #56c8ff;
}
#main img[src$=svg] {
filter: invert(1);
}
}