changes
This commit is contained in:
parent
c131d89a45
commit
4893ac5a2f
@ -116,7 +116,7 @@
|
||||
},
|
||||
{
|
||||
"name": "Telegram",
|
||||
"href": "https://t.me/julian_brammer",
|
||||
"href": "https://t.me/brulijam",
|
||||
"icon": "https://simpleicons.org/icons/telegram.svg",
|
||||
"group": 1
|
||||
},
|
||||
@ -129,7 +129,7 @@
|
||||
],
|
||||
"groupNames": {
|
||||
"1": "social",
|
||||
"2": "content",
|
||||
"2": "stuff",
|
||||
"3": "games",
|
||||
"4": "other"
|
||||
}
|
||||
|
||||
@ -1,17 +1,17 @@
|
||||
:root {
|
||||
--bg-color: rgb(10, 10, 10);
|
||||
--bg-color: rgb(15, 15, 15);
|
||||
--primary: rgb(240, 240, 240);
|
||||
|
||||
--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";
|
||||
|
||||
--link-font-weight: 700;
|
||||
--link-border-radius: 1000px;
|
||||
|
||||
--page-max-width: 800px;
|
||||
--page-max-width: 600px;
|
||||
}
|
||||
|
||||
/* General */
|
||||
@ -21,7 +21,17 @@ body {
|
||||
font-family: var(--font-family), monospace;
|
||||
font-weight: var(--font-weight);
|
||||
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;
|
||||
}
|
||||
|
||||
& h1, p {
|
||||
margin: 0;
|
||||
@ -31,6 +41,15 @@ body {
|
||||
main {
|
||||
max-width: var(--page-max-width);
|
||||
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*/
|
||||
@ -85,11 +104,12 @@ h2 {
|
||||
}
|
||||
|
||||
.links {
|
||||
padding: 20px;
|
||||
padding: 10px;
|
||||
border: 1px solid var(--secondary-color);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.linkGroup {
|
||||
|
||||
margin: auto;
|
||||
|
||||
/* if wide */
|
||||
@ -107,8 +127,8 @@ h2 {
|
||||
/* if slim */
|
||||
@media only screen and (max-width: 480px) {
|
||||
margin-bottom: 10px;
|
||||
margin-left: 10%;
|
||||
margin-right: 10%;
|
||||
margin-left: 5%;
|
||||
margin-right: 5%;
|
||||
}
|
||||
|
||||
/* if wide */
|
||||
@ -118,11 +138,10 @@ h2 {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.linkButton {
|
||||
font-weight: var(--link-font-weight);
|
||||
font-size: 25px;
|
||||
line-height: 30px;
|
||||
line-height: 25px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
text-transform: lowercase;
|
||||
@ -144,7 +163,7 @@ h2 {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
padding-right: 10px;
|
||||
padding-bottom: 4px;
|
||||
padding-bottom: 2px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
@ -155,15 +174,21 @@ h2 {
|
||||
}
|
||||
|
||||
.links:hover .link:not(:hover) a {
|
||||
/* if wide */
|
||||
@media only screen and (min-width: 480px) {
|
||||
filter: brightness(0.8);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Timers */
|
||||
.timer p {
|
||||
/* if slim */
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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="me" href="https://social.brulijam.com/@brulijam">
|
||||
<script src="js/main.js"></script>
|
||||
@ -14,7 +14,7 @@
|
||||
<header>
|
||||
<!-- <img src="https://brulijam.com/assets/img/1_1713277032.jpga" alt="<profile picture>"></img>-->
|
||||
<div class="names">
|
||||
<h1>Julian Brammer</h1>
|
||||
<h1>julian brammer</h1>
|
||||
<p>@brulijam</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@ -22,14 +22,15 @@
|
||||
// setRandomSecondaryColor();
|
||||
|
||||
|
||||
let hue = 200;
|
||||
const colorChangeInterval = 150;
|
||||
let hue = 210;
|
||||
const colorChangeInterval = 50;
|
||||
|
||||
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-color2', `hsl(${hue}, 40%, 40%)`);
|
||||
hue = (hue + 1) % 360;
|
||||
}
|
||||
|
||||
// setRainbowColor();
|
||||
// setInterval(setRainbowColor, colorChangeInterval);
|
||||
setRainbowColor();
|
||||
setInterval(setRainbowColor, colorChangeInterval);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user