From 14119cb9c522669e76166e590a85f19eca792bc3 Mon Sep 17 00:00:00 2001 From: Karvy Singh Date: Wed, 11 Dec 2024 22:35:34 +0530 Subject: [PATCH] Teeny tiny changes --- assets/css/style.css | 197 +++++++++++++++++++++++++++++++++++++------ templates/index.html | 68 +++++++++++---- 2 files changed, 221 insertions(+), 44 deletions(-) diff --git a/assets/css/style.css b/assets/css/style.css index 7ca2e7c..b077ca0 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -8,11 +8,11 @@ body { .hero { background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/assets/images/backdrop.jpg"); min-height: 100vh; - display: flex; + display: flex; background-position: center top; background-size: cover; background-repeat: no-repeat; - background-attachment: fixed; + background-attachment: scroll; align-items: center; justify-content: center; text-align: center; @@ -39,19 +39,166 @@ body { } .hero-button { - display: inline-block; - background: #fff; - color: #3f2b96; + position: relative; + width: auto; + height: auto; padding: 10px 20px; - text-decoration: none; + background-color: #fff; + display: inline-flex; + align-items: center; + justify-content: center; + color: #3f2b96; font-weight: 700; - margin-top: 20px; + text-decoration: none; + border: none; border-radius: 5px; - transition: background 0.3s; + cursor: pointer; + transition: background 0.3s, transform 0.2s ease-in-out; +} + +.hero-button::before { + content: ''; + position: absolute; + inset: 0; + margin: auto; + width: calc(100% + 8px); + height: calc(100% + 8px); + border-radius: 8px; + background: linear-gradient(-45deg, #a8c0ff 0%, #3f2b96 100%); + z-index: -10; + pointer-events: none; + transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); +} + +.hero-button::after { + content: ""; + z-index: -1; + position: absolute; + inset: 0; + background: linear-gradient(-45deg, #6a11cb 0%, #2575fc 100%); + transform: translate3d(0, 0, 0) scale(0.95); + filter: blur(20px); + border-radius: 8px; + pointer-events: none; } .hero-button:hover { background: #e0e0e0; + color: #fff; + transform: scale(1.05); +} + +.hero-button:hover::after { + filter: blur(30px); +} + +.hero-button:hover::before { + transform: rotate(-180deg); +} + +.hero-button:active { + transform: scale(0.95); +} + +.hero-button:active::before { + scale: 0.7; +} + +/* Style for the mystery tool */ +.mystery-tool { + display: inline-flex; + align-items: center; + text-decoration: none; + color: #3f2b96; + font-weight: bold; +} + +.mystery-box { + display: inline-flex; + align-items: center; + justify-content: center; + width: 24px; /* Dimensions for the box */ + height: 24px; + background-color: #e0e0e0; /* Light gray background */ + border-radius: 4px; /* Rounded corners */ + border: 2px solid #3f2b96; /* Box border matching the theme */ + margin-right: 8px; /* Space between box and text */ + position: relative; +} + +.mystery-box-2 { + display: inline-flex; + align-items: center; + justify-content: center; + width: 100px; /* Dimensions for the box */ + height: 18px; + background-color: #e0e0e0; /* Light gray background */ + border-radius: 4px; /* Rounded corners */ + border: 2px solid #3f2b96; /* Box border matching the theme */ + margin-right: 8px; /* Space between box and text */ + position: relative; +} + +.question-mark { + font-family: 'Montserrat', sans-serif; + font-weight: 700; + font-size: 14px; + color: #3f2b96; + position: relative; + top: -1px; /* Slight adjustment for vertical centering */ +} + +.mystery-tool:hover .mystery-box { + background-color: #3f2b96; /* Dark background on hover */ + color: #ffffff; /* White question mark on hover */ +} +.mystery-tool:hover .mystery-box-2 { + background-color: #3f2b96; /* Dark background on hover */ + color: #ffffff; /* White question mark on hover */ +} + +.mystery-tool:hover .question-mark { + color: #ffffff; +} + +.button { + display: flex; + justify-content: center; + align-items: center; + padding: 10px 15px; + gap: 15px; + margin: 0 auto; + background-color: #181717; + outline: 3px #181717 solid; + outline-offset: -3px; + border-radius: 5px; + margin-top: 20px; + border: none; + cursor: pointer; + transition: 400ms; +} + +.button .text { + color: white; + font-weight: 700; + font-size: 1em; + transition: 400ms; +} + +.button svg path { + transition: 400ms; +} + +.button:hover { + background-color: transparent; +} + +.button:hover .text { + color: #181717; +} + +.button:hover svg path { + fill: #181717; } .about-section, @@ -100,6 +247,11 @@ body { .footer { background: #f5f5f5; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; padding: 20px 0; margin-top: 40px; text-align: center; @@ -137,26 +289,6 @@ body { text-decoration: underline; } -/* Footer GitHub Link */ -.github-link { - display: inline-flex; - align-items: center; - color: #333; - text-decoration: none; - font-weight: bold; - margin-top: 10px; -} - -.github-link:hover { - text-decoration: underline; -} - -.github-icon { - width: 20px; - height: 20px; - margin-right: 8px; - vertical-align: middle; -} .inline-code { font-family: 'Courier New', Courier, monospace; @@ -205,3 +337,12 @@ body { .plungers-list a:hover { text-decoration: underline; } + +.divider { + height: 3px; + width: 70%; + background: linear-gradient(to right, #6a11cb , #3f2b96); + border-radius: 10px; + margin: 40px auto; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} \ No newline at end of file diff --git a/templates/index.html b/templates/index.html index 0f425b2..cb5bcb1 100644 --- a/templates/index.html +++ b/templates/index.html @@ -43,22 +43,46 @@

About JPoop

+
+

Our Mops

Use these mops to clean up the chaos:

    -
  • JPortal – It doesn't get any messier than Attendance! +
  • + + JPortal + + – It doesn't get any messier than Attendance! Though last endsem's cram session will give you a bad trip to the toilet. (credits to da goat: @codeblech)
    • -
  • JPGram – Photo wall for JPee Hubs, coz the college doesn't have one updated.
    • -
  • Planner – Save yourself from the cryptic JIIT Time Tables and low +
  • + + JPGram + + – Photo wall for JPee Hubs, coz the college doesn't have one updated.
    • +
  • + + Planner + + – Save yourself from the cryptic JIIT Time Tables and low attendance (no guarantee for the last one).
    • -
  • ??? – curl https://wifi.jpoop.in
    • +
  • + + + ? + + – curl https://wifi.jpoop.in + +
    • +
+
+

Our Plungers

@@ -67,14 +91,24 @@

Our Plungers

life easier:

    -
  • jsjiit – The library that powers JPortal. The drainage system to JIIT Webpooptal.
    • -
  • pyjiit – A python library for the same WebPooptal.
    • -
  • jiit-marks – A marks report PDF parser written in python.
    • -
  • jiit-tt-parser – Parse your TTs (Time Tables). Powers JIIT Planner.
    • +
  • + jsjiit + – The library that powers JPortal. The drainage system to JIIT Webpooptal.
    • +
  • + pyjiit + – A python library for the same WebPooptal.
    • +
  • + jiit-marks + – A marks report PDF parser written in python.
    • +
  • + jiit-tt-parser + – Parse your TTs (Time Tables). Powers JIIT Planner.
+
+

Contribute Your Tool

@@ -91,14 +125,16 @@

Contribute Your Tool