From 73cfa2e66418f9e01b1ac39b17051eebe40e7a9f Mon Sep 17 00:00:00 2001 From: bingus_violet Date: Wed, 17 Apr 2024 09:33:05 -0500 Subject: [PATCH] Add activities to socials page --- README.md | 3 +-- static/global.css | 52 +++++++++++++++++++++++++++++++++++++++ static/root.css | 50 ------------------------------------- static/socials/index.html | 5 +++- static/subpage.css | 5 +++- 5 files changed, 61 insertions(+), 54 deletions(-) diff --git a/README.md b/README.md index 0fbe139..6020f04 100644 --- a/README.md +++ b/README.md @@ -27,5 +27,4 @@ For an easy to digest example, look at the socials section on the main page of [ # To-do - [ ] Add more content to the socials page & make it more easily findable on the site - [ ] Pull latest Youtube video & display it - - [ ] Display current Discord Activities - - [ ] Display current steam game \ No newline at end of file + - [x] Display current Discord Activities \ No newline at end of file diff --git a/static/global.css b/static/global.css index 0e6b4df..279efc0 100644 --- a/static/global.css +++ b/static/global.css @@ -167,4 +167,56 @@ h2 { .striked { text-decoration: line-through; text-decoration-color: white; +} + + + +.activity { + border-width: 3px; + border-radius: 10px; + overflow: hidden; + margin: auto; + padding: 0; + display: flex; + position: relative; + z-index: 3; + /* max-height: 200px; */ +} + +.activity>p { + width: 100%; + max-height: 100%; + overflow-wrap: anywhere; + text-overflow: ellipsis; + padding: 3px; + line-height: 1.5rem; + align-self: center; +} + +.activity>img { + width: 40%; + aspect-ratio: 1/1; + object-fit: cover; +} + +.activity>img:not(.smallimg) { + min-width: 150px; + max-width: 150px; +} + +.activity>.smallimg { + width: 48px; + height: 48px; + position: absolute; + bottom: 0px; + left: 0px; + border-radius: 50px; + background: black; + padding: 5px; + /* border: 2px gray solid; */ + transform: scale(0.9); +} + +.activity>.smallimg:hover { + transform: scale(1); } \ No newline at end of file diff --git a/static/root.css b/static/root.css index e262cbf..32032ba 100644 --- a/static/root.css +++ b/static/root.css @@ -60,56 +60,6 @@ display: inline-block; } -.activity { - border-width: 3px; - border-radius: 10px; - overflow: hidden; - margin: auto; - padding: 0; - display: flex; - position: relative; - z-index: 3; - /* max-height: 200px; */ -} - -.activity>p { - width: 100%; - max-height: 100%; - overflow-wrap: anywhere; - text-overflow: ellipsis; - padding: 3px; - line-height: 1.5rem; - align-self: center; -} - -.activity>img { - width: 40%; - aspect-ratio: 1/1; - object-fit: cover; -} - -.activity>img:not(.smallimg) { - min-width: 150px; - max-width: 150px; -} - -.activity>.smallimg { - width: 48px; - height: 48px; - position: absolute; - bottom: 0px; - left: 0px; - border-radius: 50px; - background: black; - padding: 5px; - /* border: 2px gray solid; */ - transform: scale(0.9); -} - -.activity>.smallimg:hover { - transform: scale(1); -} - img:not(.project-inner > div > img):not(.activity>img) { width: 100%; max-width: 168px; diff --git a/static/socials/index.html b/static/socials/index.html index 009bce6..7b04265 100644 --- a/static/socials/index.html +++ b/static/socials/index.html @@ -21,8 +21,10 @@ {WEATHER_MODIFIER} +

Socials

-

Congrats on finding the Incomplete seperated version of the socials page!!!!

+
+

Here's most of the sites you can find me on-
if you needed that for some reason?

@@ -62,6 +64,7 @@
{ACTIVITIES}
+
\ No newline at end of file diff --git a/static/subpage.css b/static/subpage.css index 6b13fe2..ab32dc8 100644 --- a/static/subpage.css +++ b/static/subpage.css @@ -13,8 +13,11 @@ body { padding: 5vh 0; } -main { +.mainDiv { animation: fadeUp 1s cubic-bezier(0.075, 0.82, 0.165, 1); + padding: 0 2.5vw; + max-width: 800px; + margin: auto; } @keyframes fadeUp {