From 3f48107fb4749a85384beca492149aec36ad7543 Mon Sep 17 00:00:00 2001
From: Liliana Sanfilippo <liliana.sanfilippo@uni-bielefeld.de>
Date: Fri, 27 Sep 2024 13:56:36 +0200
Subject: [PATCH] css
---
src/App/App.css | 13 +++++++++++++
src/contents/description.tsx | 24 +++++++++++++++++++-----
2 files changed, 32 insertions(+), 5 deletions(-)
diff --git a/src/App/App.css b/src/App/App.css
index fc132ee2..7e9f9b45 100644
--- a/src/App/App.css
+++ b/src/App/App.css
@@ -3930,6 +3930,7 @@ height: min-content !important;
figure {
+ align-self: center;
display: table;
text-align: center;
font-style: italic;
@@ -3944,4 +3945,16 @@ figcaption{
caption-side: bottom;
padding: 0.5em;
background-color: var(--darkerbeige)
+}
+
+figure .row div{
+ padding-top: 20px;
+ display: grid;
+ justify-content: center;
+}
+
+.figure-wrapper{
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
\ No newline at end of file
diff --git a/src/contents/description.tsx b/src/contents/description.tsx
index 8b29f740..9d63f344 100644
--- a/src/contents/description.tsx
+++ b/src/contents/description.tsx
@@ -74,15 +74,29 @@ export function Description() {
</Subesction>
<Subesction title="The CFTR Protein" id="Cystic Fibrosis2">
<div className="row align-items-center">
- <div className="full-small col-2">
- <img src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/>
+ <figure>
+ <div className="row">
+ <div className="col">
+ <img src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/>
+ </div>
+ <div className="col">
<img src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/>
</div>
+ </div>
+ <figcaption><b>Figure x.</b> </figcaption>
+ </figure>
+
<div className="col">
<p>Text about CFTR <LoremMedium/></p>
- <div className="col gif-wrapper">
- <img className="fanzor gif" src="https://static.igem.wiki/teams/5247/fanzor/cftr-wt.gif"></img>
- </div>
+ <div className="figure-wrapper">
+ <figure>
+ <div className="col gif-wrapper">
+ <img className="fanzor gif" src="https://static.igem.wiki/teams/5247/fanzor/cftr-wt.gif"></img>
+ </div>
+ <figcaption> <b>Figure 3.</b>Phase contrast image of HEK293T at 20x magnification</figcaption>
+ </figure>
+ </div>
+
</div>
</div>
</Subesction>
--
GitLab