comphy-lab.github.io/index.html at main · comphy-lab/comphy-lab.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
---
layout: default
title: "Home"
permalink: /
---

<section id="intro" class="s-intro target-section">
  <div class="s-intro__bg rellax" data-rellax-speed="-5"></div>
  <div class="row s-intro__content">
    <div class="column">
      <div class="s-intro__content-top">
        <div style="display: flex; justify-content: center; gap: 20px; margin-bottom: 10px;">
          <a href="https://orcid.org/0000-0002-4293-6099" style="text-decoration: none;">
            <i class="ai ai-orcid" style="font-size: 2.5em; color: #e63946;"></i>
          </a>
          <a href="https://github.com/comphy-lab" style="text-decoration: none;">
            <i class="fa-brands fa-github" style="font-size: 2.5em; color: #8a2be2;"></i>
          </a>
          <a href="https://scholar.google.com/citations?user=tHb_qZoAAAAJ&hl=en" style="text-decoration: none;">
            <i class="ai ai-google-scholar" style="font-size: 2.5em; color: #4169e1;"></i>
          </a>
        </div>
        <h1 class="s-intro__title">
          Computational Multiphase <br>
          Physics (CoMPhy) Lab
        </h1>
        <div class="s-intro__caption">
          <p>Picture: <a href="/research/#7">Worthington jet</a> formed due to bursting bubble.</p>
        </div>
        <div class="s-intro__subtitle">
          <p style="margin-top: 30px;">
            <a href="#featured-wrapper" class="smoothscroll" style="display: inline-block; padding: 8px 16px; background-color: rgba(3, 102, 214, 0.9); color: white; text-decoration: none; border-radius: 25px; font-size: 0.9em; transition: all 0.3s ease; box-shadow: 0 2px 4px rgba(0,0,0,0.1); backdrop-filter: blur(5px);">
                Featured Research
            </a>
        </div>
        </p>
      </div>
    </div>
  </div>
</section>

  <section id="about" class="s-about target-section">
    <div class="row s-about__content" data-animate-block>
      <div class="s-about__grid">
        <div class="s-about__left">
          <div id="about-content" class="s-about__desc" data-animate-el>
            <!-- Markdown content will be loaded here -->
          </div>
        </div>
        <div class="s-about__right">
          <div class="s-about__social" data-animate-el>
            <div class="s-about__social-header">
              <i class="fa-solid fa-newspaper" style="font-size: 1.75em; color: #68236D;"></i>
              <h3 class="news-header">News</h3>
            </div>
            <div id="news-content" class="s-about__desc" data-animate-el>
              <!-- News content will be loaded here -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Adding a style block with !important rules to override any section styling -->
  <style>
    /* Global override to remove ANY lines and borders from featured wrapper and children */
    #featured-wrapper,
    #featured-wrapper *,
    #featured-wrapper::before,
    #featured-wrapper::after,
    #featured-wrapper *::before,
    #featured-wrapper *::after {
      border: none !important;
      border-top: none !important;
      border-bottom: none !important;
      box-shadow: none !important;
    }

    /* Completely hide any ::after pseudo-elements that might be adding lines */
    #featured-wrapper::after,
    #featured-wrapper *::after {
      display: none !important;
      content: none !important;
      height: 0 !important;
      background: transparent !important;
      opacity: 0 !important;
      visibility: hidden !important;
      border: none !important;
    }

    /* Extra strong reset for the wrapper */
    #featured-wrapper {
      position: relative !important;
      z-index: 1 !important;
      overflow: visible !important;
    }
  </style>

  <!-- Reworked featured section with more aggressive style isolation -->
  <div id="featured-wrapper" style="padding: 2rem 2rem; background: var(--color-background); display: flex; align-items: flex-start; position: relative; min-height: 50vh; z-index: 1; border: none !important; overflow: visible;">
    <div style="width: 100%; max-width: 1400px; margin: 0 auto; border: none !important; position: relative; z-index: 2;">
      <div style="text-align: center; margin-bottom: 4rem; border: none !important;">
        <h2 style="font-size: 3.6rem; color: var(--color-heading-h1); margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500; border: none !important;">
          Featured Research
        </h2>

        <!-- Only purple line - with z-index to make sure it's above any other lines -->
        <div style="height: 2px; background-color: var(--color-heading-h1); border: none !important; width: 100%; max-width: 100%; margin: 1rem auto 2rem; display: block; position: relative; z-index: 10;"></div>
      </div>

      <!-- Adding a large bottom margin to push any possible blue line out of view -->
      <div class="featured-item" data-animate-el style="border: none !important; margin-bottom: 5rem;">
        <div class="featured-item__image" style="border: none !important;">
          <!-- Featured papers will be loaded here by JavaScript -->
        </div>
      </div>
    </div>
  </div>