adaptive

index.html

@@ -18,6 +18,7 @@
   <link rel="stylesheet"
         href="https://cdn.jsdelivr.net/gh/jpswalsh/academicons@1/css/academicons.min.css">
   <link rel="stylesheet" href="./static/css/index.css">
+  <link rel="stylesheet" href="./static/css/custom.css">
   <link rel="icon" href="./static/images/favicon.svg">
 
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
@@ -410,7 +411,7 @@
     <h2 class="title is-3">Adaptive Attack</h2>
     <div class="columns is-centered">
       <div class="column container-centered">
-        <div id="refusal-loss-formula" class="container">
+        <div id="adaptive-loss-formula" class="container">
           <div id="adaptive-loss-formula-list" class="row align-items-center formula-list">
             <a href="#label-loss" class="selected">Label Loss</a>
             <a href="#representation-loss">Representation Loss</a>

static/css/custom.css

@@ -0,0 +1,7 @@
+#adaptive-loss-formula .formula { text-align: center; }
+
+#adaptive-loss-formula .formula-list { width: fit-content; margin: 0 auto; }
+
+#adaptive-loss-formula .formula-list a { display: inline-block; width: 250px; margin: 0 20px; padding: 8px 10px; text-align: center; background: #DDD; cursor: pointer; text-decoration: none; color: #333; border-radius: 10px; user-select: none; transition-duration: 0.3s; }
+
+#adaptive-loss-formula .formula-list a:hover, #jailbreak-demo #defense-methods .defense:hover { background: #555; color: #FFF; }