announcement

Author: sethbern

index.html

@@ -56,6 +56,20 @@ <h1>Seth Bernstein</h1>
         </header>
 
         <main>
+            <div id="announcement" class="announcement fade-in">
+            <i class="fa-solid fa-bullhorn"></i>
+            <div class="announcement-text">
+                <strong>Announcement:</strong><br>
+                I’ll be presenting our paper 
+                <a href="https://www.researchgate.net/publication/396250126_Beyond_the_Benefits_A_Systematic_Review_of_the_Harms_and_Consequences_of_Generative_AI_in_Computing_Education" 
+                target="_blank" 
+                rel="noopener noreferrer">
+                <em>“Beyond the Benefits: A Systematic Review of the Harms and Consequences of Generative AI in Computing Education”</em>
+                </a> 
+                at <span class="blue">Koli Calling 2025</span>, 
+                taking place <strong>November 11–16, 2025</strong>!
+            </div>
+            </div>
             <section id="about" class="fade-in">
                 <h2>About</h2>
                 <p>
@@ -111,7 +125,10 @@ <h2>Publications</h2>
                 <div id="pub-container">
                     <div class="pub-card" data-year="2025"
                         data-title="Beyond the Benefits: A Systematic Review of the Harms and Consequences of Generative AI in Computing Education">
-                        <a class="pub-title" href="https://www.researchgate.net/publication/396250126_Beyond_the_Benefits_A_Systematic_Review_of_the_Harms_and_Consequences_of_Generative_AI_in_Computing_Education" target="_blank">Beyond the Benefits: A Systematic Review of the Harms and Consequences of Generative AI in Computing Education</a>
+                        <span class="badge" aria-label="New publication">New</span>
+                        <a class="pub-title" href="https://www.researchgate.net/publication/396250126_Beyond_the_Benefits_A_Systematic_Review_of_the_Harms_and_Consequences_of_Generative_AI_in_Computing_Education" target="_blank">
+                            Beyond the Benefits: A Systematic Review of the Harms and Consequences of Generative AI in Computing Education
+                        </a>
                         <div class="pub-meta"><b>Seth Bernstein</b>, Ashfin Rahman, Nadia Sharifi, Ariunjargal Terbish, Stephen MacNeil<br>Preprint: Koli Calling 2025</div>
                     </div>
                     <div class="pub-card" data-year="2024"

style.css

@@ -306,3 +306,88 @@ strong {
     }
 }
 
+
+.pub-card.is-new { position: relative; }
+
+.pub-card { 
+    margin-bottom: 22px;       
+    padding: 14px 16px;      
+    border-bottom: 1px solid #ddd;
+    border-radius: 8px;
+}
+
+.pub-card.is-new {
+    padding-top: 28px;          
+    background: linear-gradient(to right, rgba(0,39,76,0.06), rgba(0,39,76,0.02) 60%);
+    border-bottom: 2px solid #00274C;  
+}
+
+.badge-new {
+    position: absolute;
+    top: 10px;
+    right: 12px;
+    background: #00274C;
+    color: #fff;
+    font-size: 11px;
+    font-weight: 700;
+    padding: 2px 8px;
+    border-radius: 999px;
+    line-height: 1.5;
+    box-shadow: 0 1px 3px rgba(0,0,0,.12);
+    animation: none;    
+}
+
+.pub-title { 
+    line-height: 1.35; 
+    display: inline-block; 
+    margin: 0 0 6px 0;      
+}
+
+.pub-meta { 
+    line-height: 1.45; 
+}
+
+.sort-buttons { 
+    margin: 10px 0 18px; 
+}
+
+.announcement {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  background: rgba(0, 39, 76, 0.05);
+  border-left: 4px solid #00274C;
+  border-radius: 6px;
+  padding: 12px 16px;
+  margin: 32px 0;
+  font-size: 15px;
+  line-height: 1.45;
+}
+
+.announcement i {
+  color: #00274C;
+  font-size: 18px;
+  margin-top: 2px;
+  flex-shrink: 0;
+}
+
+.announcement-text em {
+  font-style: italic;
+  color: #00274C;
+}
+
+.announcement strong {
+  color: #00274C;
+}
+
+.announcement-text a {
+  color: #00274C;
+  font-weight: 600;
+  text-decoration: none;
+  border-bottom: 1px solid rgba(0, 39, 76, 0.3);
+  transition: border-color 0.2s ease;
+}
+
+.announcement-text a:hover {
+  border-bottom-color: #00274C;
+}