fixed citation box

Author: zzigak

index.html

@@ -97,9 +97,12 @@ <h2 id="video">Video</h2>
 		<iframe height="528" src="#" title="Supplemental video" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
 	</section> -->
 
-	<section>
-		<h2 id="citation">Citation</h2>
-		<pre><button class="copy" onclick="copyText()"><i class="fa fa-clipboard"></i></button><span id="citation-content">@article{Anonymous2024,
+	<section class="section" id="citation">
+		<div class="container is-max-desktop content">
+			<h2 class="title">Citation</h2>
+			<div class="citation-box">
+				<button class="copy" onclick="copyText()"><i class="fa fa-clipboard"></i></button>
+				<pre><code id="citation-content">@article{Anonymous2024,
 	author = {Anonymous User 123 and Anonymous User 456 and Anonymous User 789 and Anonymous User 101},
 	title = {Anonymous Research Paper},
 	year = {2024},
@@ -108,19 +111,21 @@ <h2 id="citation">Citation</h2>
 	number = {1},
 	pages = {1--10},
 	doi = {10.0000/0000000}
-}</span></pre>
+}</code></pre>
+			</div>
+		</div>
 	</section>
 
 	<section>
 		<h2 id="acknowledgments">Acknowledgments</h2>
 		<p>Coming soon</p>
-		<p><em>Note: This website template is inspired by <a href="https://nerfies.github.io/">Nerfies</a> and <a href="https://imaging.cs.cmu.edu/">CMU Computational Imaging Lab</a> research pages.</em></p>
 	</section>
 	</main>
 
 	<footer>
 		<p class="license">This website is licensed under a <a href="https://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International License</a>.</p>
 		<p class="license">This means you are free to borrow the source code of this website, we just ask that you link back to this page in the footer. Please remember to remove the analytics code included in the header of the website which you do not want on your website.</p>
+		<p class="license">This website template is inspired by <a href="https://nerfies.github.io/">Nerfies</a> and <a href="https://imaging.cs.cmu.edu/">CMU Computational Imaging Lab</a> research pages.</p>
 		<p class="license">Website template from <a href="https://github.com/zzigak/research-project-website">research-project-website</a>.</p>
 	</footer>
 </body>

style.css

@@ -354,49 +354,65 @@ model-viewer {
 /* Authors section */
 .authors {
 	text-align: center;
-	margin: 1.5em 0;
+	margin: 1.5em auto;
 	font-size: 1.1em;
+	width: 100%;
+	max-width: 100%;
+	overflow-x: hidden;
+	padding: 0 1em;
+	box-sizing: border-box;
 }
 
 .author-names {
 	margin-bottom: 0.5em;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	gap: 0.15em;
+	width: 100%;
+	max-width: 100%;
 }
 
 .author-block {
 	display: inline-block;
-	margin: 0 0.25em;
+	margin: 0;
+	white-space: normal;
+	font-size: 0.95em;
+	max-width: 100%;
+	word-wrap: break-word;
 }
 
 .author-block a {
 	color: #1772d0;
 	text-decoration: none;
 	font-weight: bold;
-}
-
-.author-block a:hover {
-	color: #f09228;
-}
-
-.author-block sup {
-	color: #666;
-	font-size: 0.8em;
-	vertical-align: super;
+	padding: 0 0.1em;
+	word-wrap: break-word;
 }
 
 .author-affiliations {
-	font-size: 1em;
+	font-size: 0.9em;
 	color: #666;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	gap: 0.3em;
+	width: 100%;
+	max-width: 100%;
 }
 
 .affiliation-block {
 	display: inline-block;
-	margin: 0 0.5em;
+	margin: 0;
+	white-space: normal;
+	word-wrap: break-word;
 }
 
-.affiliation-block sup {
-	color: #666;
-	font-size: 0.8em;
-	vertical-align: super;
+.author-notes {
+	margin-top: 0.5em;
+	font-size: 0.85em;
+	width: 100%;
+	max-width: 100%;
 }
 
 /* Navigation */
@@ -461,4 +477,118 @@ nav > ul > li {
 
 .theme-switch:hover i {
 	color: #1772d0;
+}
+
+/* Citation section styles */
+.section {
+	padding: 3rem 1.5rem;
+}
+
+.container {
+	margin: 0 auto;
+	position: relative;
+	width: 100%;
+}
+
+.is-max-desktop {
+	max-width: 960px;
+}
+
+.content {
+	margin-top: 0;
+}
+
+.title {
+	color: #363636;
+	font-size: 2rem;
+	font-weight: 600;
+	line-height: 1.125;
+	margin-bottom: 1.5rem;
+	text-align: center;
+}
+
+.citation-box {
+	position: relative;
+	background-color: #f5f5f5;
+	border-radius: 6px;
+	padding: 1.25rem 1.5rem;
+}
+
+#citation pre {
+	margin: 0;
+	padding: 0;
+	background: none;
+	border: none;
+	overflow-x: auto;
+	white-space: pre;
+	word-wrap: normal;
+}
+
+#citation code {
+	font-family: monospace;
+	font-size: 0.9em;
+	line-height: 1.4;
+	color: #4a4a4a;
+	background: none;
+	padding: 0;
+	border: none;
+	text-decoration: none;
+}
+
+#citation .copy {
+	position: absolute;
+	right: 1rem;
+	top: 1rem;
+	background: none;
+	border: none;
+	color: #666;
+	cursor: pointer;
+	padding: 0.25rem;
+	border-radius: 0.25rem;
+	transition: background-color 0.2s;
+}
+
+#citation .copy:hover {
+	background-color: #e0e0e0;
+	color: #1772d0;
+}
+
+@media screen and (max-width: 768px) {
+	.section {
+		padding: 1.5rem 1rem;
+	}
+	
+	.title {
+		font-size: 1.5rem;
+	}
+	
+	.citation-box {
+		padding: 1rem;
+	}
+	
+	#citation code {
+		font-size: 0.8em;
+	}
+}
+
+@media screen and (max-width: 600px) {
+	.authors {
+		font-size: 0.9em;
+		padding: 0 0.5em;
+		width: 100%;
+		max-width: 100%;
+	}
+	
+	.author-block {
+		font-size: 0.85em;
+		white-space: normal;
+	}
+	
+	.author-affiliations {
+		font-size: 0.8em;
+	}
+	
+	.author-notes {
+		font-size: 0.8em;
+	}
 }