Hugging Face's logo

Spaces:
KalbeDigitalLab
/
pathology_nuclei_segmentation_classification
Sleeping

App Files Community
4
haritsahm russellotniel commited on
Commit
b16da09
•
1 Parent(s): 8aec0c2

Styling change (Font Size and Container Width) and Class name fix (#4)

Browse files

- changed font size and container width, added more media screen code to adjust responsiveness (8a0b793bf0f4495aa2b8553edc34cea388a56c0f)
- fixed class name usage, and added margin bottom to css and adjusted line height (5426a289bf5ee71d62b49c7c831ce7663ec4d412)


Co-authored-by: Russell Otniel <russellotniel@users.noreply.huggingface.co>

Files changed (2) hide show
  1. index.html +5 -5
  2. style.css +17 -9
index.html CHANGED
@@ -23,9 +23,9 @@
23
  </div>
24
  <div class="grid-container">
25
  <h3 class="overview-heading"><span class="vl">Dataset</span></h3>
26
- <div class="overview-content">
27
- <p>The model is trained with multi-tissue histology images based on <a href="https://warwick.ac.uk/fac/cross_fac/tia/data/hovernet/" target="_blank">CoNSeP dataset.</a></p>
28
- <ul>
29
  <li>Target: Nuclei</li>
30
  <li>Task: Instance Segmentation</li>
31
  <li>Modality: RGB images</li>
@@ -34,8 +34,8 @@
34
  </div>
35
  <div class="grid-container">
36
  <h3 class="overview-heading"><span class="vl">Model Architecture</span></h3>
37
- <div class="overview-content">
38
- <p>Overview approach for simultaneous nuclear instance segmentation.</p>
39
  <img class="content-image" src="file/figures/OverviewNucleiSegmentationClassification.jpg" alt="model-architecture" />
40
  </div>
41
  </div>
 
23
  </div>
24
  <div class="grid-container">
25
  <h3 class="overview-heading"><span class="vl">Dataset</span></h3>
26
+ <div>
27
+ <p class="overview-content">The model is trained with multi-tissue histology images based on <a href="https://warwick.ac.uk/fac/cross_fac/tia/data/hovernet/" target="_blank">CoNSeP dataset.</a></p>
28
+ <ul >
29
  <li>Target: Nuclei</li>
30
  <li>Task: Instance Segmentation</li>
31
  <li>Modality: RGB images</li>
 
34
  </div>
35
  <div class="grid-container">
36
  <h3 class="overview-heading"><span class="vl">Model Architecture</span></h3>
37
+ <div>
38
+ <p class="overview-content">Overview approach for simultaneous nuclear instance segmentation.</p>
39
  <img class="content-image" src="file/figures/OverviewNucleiSegmentationClassification.jpg" alt="model-architecture" />
40
  </div>
41
  </div>
style.css CHANGED
@@ -8,41 +8,39 @@ body {
8
  }
9
 
10
  .container {
11
- width: 80%;
12
  margin: 0 auto;
13
  }
14
 
15
  .title {
16
- font-size: 40px !important;
17
  font-weight: 600 !important;
18
- line-height: 50px !important;
19
  letter-spacing: 0em;
20
  text-align: center;
21
  color: #374159 !important;
22
  }
23
 
24
  .subtitle {
25
- font-size: 2em !important;
26
  font-style: italic;
27
  font-weight: 400 !important;
28
- line-height: 40px !important;
29
  letter-spacing: 0em;
30
  text-align: center;
31
  color: #1d652a !important;
 
32
  }
33
 
34
  .overview-heading {
35
- font-size: 2em !important;
36
  font-weight: 600 !important;
37
- line-height: 40px !important;
38
  letter-spacing: 0em;
39
  text-align: left;
40
  }
41
 
42
  .overview-content {
43
- font-size: 22px !important;
44
  font-weight: 400 !important;
45
- line-height: 33px !important;
46
  letter-spacing: 0em;
47
  text-align: left;
48
  }
@@ -62,10 +60,20 @@ body {
62
  display: grid;
63
  grid-template-columns: 1fr 2fr;
64
  gap: 20px;
 
 
65
  }
66
 
67
  @media screen and (max-width: 768px) {
 
 
 
 
68
  .grid-container {
69
  display: block;
70
  }
 
 
 
 
71
  }
 
8
  }
9
 
10
  .container {
11
+ width: 100%;
12
  margin: 0 auto;
13
  }
14
 
15
  .title {
16
+ font-size: 24px !important;
17
  font-weight: 600 !important;
 
18
  letter-spacing: 0em;
19
  text-align: center;
20
  color: #374159 !important;
21
  }
22
 
23
  .subtitle {
24
+ font-size: 24px !important;
25
  font-style: italic;
26
  font-weight: 400 !important;
 
27
  letter-spacing: 0em;
28
  text-align: center;
29
  color: #1d652a !important;
30
+ padding-bottom: 0.5em;
31
  }
32
 
33
  .overview-heading {
34
+ font-size: 24px !important;
35
  font-weight: 600 !important;
 
36
  letter-spacing: 0em;
37
  text-align: left;
38
  }
39
 
40
  .overview-content {
41
+ font-size: 14px !important;
42
  font-weight: 400 !important;
43
+ line-height: 30px !important;
44
  letter-spacing: 0em;
45
  text-align: left;
46
  }
 
60
  display: grid;
61
  grid-template-columns: 1fr 2fr;
62
  gap: 20px;
63
+ align-items: flex-start;
64
+ margin-bottom: 0.7em;
65
  }
66
 
67
  @media screen and (max-width: 768px) {
68
+ .container {
69
+ width: 90%;
70
+ }
71
+
72
  .grid-container {
73
  display: block;
74
  }
75
+
76
+ .overview-heading {
77
+ font-size: 18px !important;
78
+ }
79
  }