diff options
| author | Suleyman Farajli <suleyman@farajli.net> | 2024-06-11 00:40:58 +0400 |
|---|---|---|
| committer | Suleyman Farajli <suleyman@farajli.net> | 2024-06-11 00:40:58 +0400 |
| commit | 3d130506f6030ec1e3b31bd8b1ae2ed251c1fb9c (patch) | |
| tree | 7f36a38e9a59eb5a19285a90284c6c12d0235c0d | |
| parent | 62490b10c58adbb60312ddb5df990a2266611d7f (diff) | |
improvement on css and organization on both css and homepage
| -rw-r--r-- | src/home/index.html | 55 | ||||
| -rw-r--r-- | src/index.html | 54 | ||||
| -rw-r--r-- | src/style.css | 103 |
3 files changed, 158 insertions, 54 deletions
diff --git a/src/home/index.html b/src/home/index.html new file mode 100644 index 0000000..6e49bea --- /dev/null +++ b/src/home/index.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel='stylesheet' type='text/css' href="../style.css"> + <title>Suleyman Farajli's website</title> +</head> + +<body> + <a id="header-link" href="#">Suleyman Farajli</a> + + <hr class="separator"> + + <div class="menu"> + <a class="menu_item" href="#"><u>Home</u>/</a> + <a class="menu_item" href="#">Software/</a> + <a class="menu_item" href="#">Wiki/</a> + <a class="menu_item right" href="https://git.farajli.xyz">Git</a> + </div> + + + <p> + My real name is Suleyman Farajli but I occasionally use shorter nicknames as + <span class="color1"> theion</span> and <span class="color1">thei0n</span> and they are not the same as + "<strong>the ion</strong>"! + in fact, they don't even mean anything in other languages either. + I am a system administrator, who is currently studying at university. Recently, + I have been interested in <span class="color2">Unix programming</span> and <span class="color2">Computer + Networking</span>. + </p> + + <h2>posts</h2> + + <table> + <tr><td><time class="key">2024-06-09</time></td><td><a class="post value" href="../posts/website_created.html">Website Created!</a></td></tr> + </table> + + + <h3>links and contact info</h3> + + <table> + <tr><td class="key">email</td><td><a class="value" href="#">suleyman@farajli.xyz</a></td></tr> + <tr><td class="key">xmpp </td><td><a class="value" href="#">suleyman@farajli.xyz</a></td></tr> + <tr><td class="key">ssh </td><td><a class="value" href="#">Public key</a></td></tr> + <tr><td class="key">github</td><td><a class="value" href="https://github.com/thei0n">thei0n</a></td></tr> + </table> + + + <small class="footnote">* and it is worth mentioning that I don't have a LinkedIn (or any social media) account.</small> + + <p id="copyleft"><br>copyleft (c) 2024 theion</p> + +</body> +</html> diff --git a/src/index.html b/src/index.html deleted file mode 100644 index 4f5123a..0000000 --- a/src/index.html +++ /dev/null @@ -1,54 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <link rel='stylesheet' type='text/css' href="style.css"> - <title>Suleyman Farajli</title> -</head> - -<body> - - <a class="logo" href="#">Suleyman Farajli</a> - <a class="right" href="#">RSS</a> - <a class="right" href="#">Donate(Monero)</a> - - <hr class="separator"> - -<ul> - <li> <a href="#">Git</a></li> - <li> <a href="#">Software</a></li> - <li> <a href="#">Wiki</a></li> - <li> <a class="right" href="#">Resume</a></li> - -</ul> - -<p> -My real name is Suleyman Farajli but occasionally I use the nicknames theion and thei0n -which do not have special meaning or anything. -I am A system administrator, who is currently studying at a university. Recently, -I have been interested in Unix programming and Computer Networking. -</p> - -<h2>posts</h2> - -<table> - <tr><td><time class="key">2024-06-09</time></td><td><a class="value" href="#">Created Website!</a></td></tr> -</table> - - -<h3>contact</h3> - -<table> - <tr><td class="key">email</td><td><a class="value" href="#">suleyman@farajli.xyz</a></td></tr> - <tr><td class="key">xmpp </td><td><a class="value" href="#">suleyman@farajli.xyz</a></td></tr> - <tr><td class="key">ssh </td><td><a class="value" href="#">Public key</a></td></tr> -</table> - -<small class="footnote">* and it is worth mentioning that I don't have a LinkedIn (or any social media ) account.</small> - - -<p class="copyleft"><br>copyleft (c) 2024 theion</p> - -</body> -</html> diff --git a/src/style.css b/src/style.css new file mode 100644 index 0000000..71c93d8 --- /dev/null +++ b/src/style.css @@ -0,0 +1,103 @@ +/* CSS for Suleyman Farajli's Website */ +/* 10th June 2024, Thei0n */ + +body { + font: 15px monospace; + max-width: 60em; + display:block; + padding-top: 4em; + margin: auto; + background-color: #1c1c1c; /* Almost Black */ + color: #ffffff; /* White */ +} + +p, a { + font-size: 1.3em; +} + +h1, h2, h3 { + margin-right: 0.2em; + margin-left: 0.2em; +} + +p { + margin-right: 1em; + margin-left: 1em; +} + +a { + text-decoration: none; + color: #BB6767; /* Red */ + margin-right: 0.2em; + margin-left: 0.2em; +} + +a:hover { + color: #B48EAD; /* Purple */ + font-weight: bold; + +} + +table { + padding-left: 1em; +} + +.menu_item { + font-weight: bold; + padding-right: 3em; + font-size: 1.3em; +} + +.right { + float: right; + padding-right: 1em; +} + +.menu { + /*Left blank intentionally*/ +} + +.value { + color: #5E81AC; /* Blue */ + padding-left:3em; +} + +.post{ + padding-left:1em; +} + +.key { + color : #bbbbbb; /* Light Gray */ +} + +.color1 { + color: #EBCB8B; /* Orange */ +} +.color2 { + color: #A3BE8C; /* Green */ +} +.color3 { + color: #B48EAD; /* Purple */ +} +.color4 { + color: #BB6767; /* Red */ +} +.color0 { + color: #FFFFFF; /* White */ +} + +#copyleft { + color: #696969 /* Dark Gray */ +} + +/* + * "pointer-events: none" doesn't work on some browsers, + * to deactivate hover effect on this tag, + * hover and regular styles are defined + */ + +#header-link, #header-link:hover { + font-size: 2.0em; + color: white; + font-weight: normal; +} |