brulijam/introduction-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

changes

Browse Source
This commit is contained in:
Julian Brammer 2024-08-27 21:50:30 +02:00
parent c131d89a45
commit 4893ac5a2f
4 changed files with 50 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/content/links.json
View File

@ -116,7 +116,7 @@
}, },
{ {
"name": "Telegram", "name": "Telegram",
"href": "https://t.me/julian_brammer", "href": "https://t.me/brulijam",
"icon": "https://simpleicons.org/icons/telegram.svg", "icon": "https://simpleicons.org/icons/telegram.svg",
"group": 1 "group": 1
}, },
@ -129,7 +129,7 @@
], ],
"groupNames": { "groupNames": {
"1": "social", "1": "social",
"2": "content", "2": "stuff",
"3": "games", "3": "games",
"4": "other" "4": "other"
} }

49
src/css/main.css
View File

@ -1,17 +1,17 @@
:root { :root {
--bg-color: rgb(10, 10, 10); --bg-color: rgb(15, 15, 15);
--primary: rgb(240, 240, 240); --primary: rgb(240, 240, 240);
--secondary-color: hsl(210, 80%, 60%); --secondary-color: hsl(210, 80%, 60%);
--secondary-color2: hsl(210, 60%, 30%); --secondary-color2: hsl(210, 20%, 20%);
--font-weight: 400; --font-weight: 300;
--font-family: "Lucida Console"; --font-family: "Lucida Console";
--link-font-weight: 700; --link-font-weight: 700;
--link-border-radius: 1000px; --link-border-radius: 1000px;
--page-max-width: 800px; --page-max-width: 600px;
} }
/* General */ /* General */
@ -21,7 +21,17 @@ body {
font-family: var(--font-family), monospace; font-family: var(--font-family), monospace;
font-weight: var(--font-weight); font-weight: var(--font-weight);
overflow-x: hidden; overflow-x: hidden;
/* if slim */
@media only screen and (max-width: 480px) {
margin: 5px;
}
/* if wide */
@media only screen and (min-width: 480px) {
margin: 20px; margin: 20px;
}
& h1, p { & h1, p {
margin: 0; margin: 0;
@ -31,6 +41,15 @@ body {
main { main {
max-width: var(--page-max-width); max-width: var(--page-max-width);
margin: 0 auto; margin: 0 auto;
/*border: 1px solid var(--secondary-color);*/
/*border-radius: 5px;*/
padding: 20px;
filter: drop-shadow(0px 0px 1px var(--secondary-color)) brightness(1);
}
::selection {
color: var(--bg-color);
background: var(--secondary-color);
} }
/* Header*/ /* Header*/
@ -85,11 +104,12 @@ h2 {
} }
.links { .links {
padding: 20px; padding: 10px;
border: 1px solid var(--secondary-color);
border-radius: 5px;
} }
.linkGroup { .linkGroup {
margin: auto; margin: auto;
/* if wide */ /* if wide */
@ -107,8 +127,8 @@ h2 {
/* if slim */ /* if slim */
@media only screen and (max-width: 480px) { @media only screen and (max-width: 480px) {
margin-bottom: 10px; margin-bottom: 10px;
margin-left: 10%; margin-left: 5%;
margin-right: 10%; margin-right: 5%;
} }
/* if wide */ /* if wide */
@ -118,11 +138,10 @@ h2 {
} }
} }
.linkButton { .linkButton {
font-weight: var(--link-font-weight); font-weight: var(--link-font-weight);
font-size: 25px; font-size: 25px;
line-height: 30px; line-height: 25px;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
text-transform: lowercase; text-transform: lowercase;
@ -144,7 +163,7 @@ h2 {
width: 25px; width: 25px;
height: 25px; height: 25px;
padding-right: 10px; padding-right: 10px;
padding-bottom: 4px; padding-bottom: 2px;
vertical-align: middle; vertical-align: middle;
} }
} }
@ -155,15 +174,21 @@ h2 {
} }
.links:hover .link:not(:hover) a { .links:hover .link:not(:hover) a {
/* if wide */
@media only screen and (min-width: 480px) {
filter: brightness(0.8); filter: brightness(0.8);
}
} }
.linkButton:active { .linkButton:active {
transform: scale(0.95); top: +2px; transform: scale(0.95);
top: +2px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
} }
/* Timers */ /* Timers */
.timer p { .timer p {
/* if slim */ /* if slim */

4
src/index.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Julian Brammer</title> <title>julian brammer</title>
<link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/main.css">
<link rel="me" href="https://social.brulijam.com/@brulijam"> <link rel="me" href="https://social.brulijam.com/@brulijam">
<script src="js/main.js"></script> <script src="js/main.js"></script>
@ -14,7 +14,7 @@
<header> <header>
<!-- <img src="https://brulijam.com/assets/img/1_1713277032.jpga" alt="&lt;profile picture&gt;"></img>--> <!-- <img src="https://brulijam.com/assets/img/1_1713277032.jpga" alt="&lt;profile picture&gt;"></img>-->
<div class="names"> <div class="names">
<h1>Julian Brammer</h1> <h1>julian brammer</h1>
<p>@brulijam</p> <p>@brulijam</p>
</div> </div>
</header> </header>

11
src/js/main.js
View File

@ -22,14 +22,15 @@
// setRandomSecondaryColor(); // setRandomSecondaryColor();
let hue = 200; let hue = 210;
const colorChangeInterval = 150; const colorChangeInterval = 50;
function setRainbowColor() { function setRainbowColor() {
const color = `hsl(${hue}, 60%, 60%)`; const color = `hsl(${hue}, 80%, 80%)`;
document.documentElement.style.setProperty('--secondary-color', color); document.documentElement.style.setProperty('--secondary-color', color);
document.documentElement.style.setProperty('--secondary-color2', `hsl(${hue}, 40%, 40%)`);
hue = (hue + 1) % 360; hue = (hue + 1) % 360;
} }
// setRainbowColor(); setRainbowColor();
// setInterval(setRainbowColor, colorChangeInterval); setInterval(setRainbowColor, colorChangeInterval);