diff --git a/src/content/links.json b/src/content/links.json index 51d6d78..61e8706 100644 --- a/src/content/links.json +++ b/src/content/links.json @@ -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" } diff --git a/src/css/main.css b/src/css/main.css index 874963d..1006997 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -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-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; - margin: 20px; + + + /* 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 { - filter: brightness(0.8); + /* 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 */ diff --git a/src/index.html b/src/index.html index 2e4fe4f..6e96b8f 100644 --- a/src/index.html +++ b/src/index.html @@ -3,7 +3,7 @@ - Julian Brammer + julian brammer @@ -14,7 +14,7 @@
-

Julian Brammer

+

julian brammer

@brulijam

diff --git a/src/js/main.js b/src/js/main.js index 1ca1996..52ee96b 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -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);