Merge pull request #4 from QUAREP-LiMi/updated_format

Updated format

.gitignore

@@ -1 +1,2 @@
-checklists_for_image_publishing/_build/**
+checklists_for_image_publishing/_build/**
+**/.DS_Store

checklists_for_image_publishing/annotation.md

@@ -1,18 +1,59 @@
 # Image annotation
 
-````{dropdown} Minimal 
-- [ ] <img src="images_icons/blank.png" height="25px"> Add scale information (scale bar, image length; in figure/figure legend)
+``````{admonition} Minimal 
+:class: warning
 
-- [ ] <img src="images_icons/blank.png" height="25px">  Explain all annotations (in figure/figure legend)
+`````{dropdown} <img src="images_icons/blank.png" height="50px"> &nbsp; Add scale information (scale bar, image length; in figure/figure legend)
+````{tab-set}
+```{tab-item} Description
+```
+```{tab-item} Links
+```
+````
+````` 
 
-- [ ] <img src="images_icons/blank.png" height="25px"> Annotations should be legible (line width, size/point size, color)
- 
-- [ ] <img src="images_icons/blank.png" height="25px">  Annotations should not obscure key data
+`````{dropdown} <img src="images_icons/blank.png" height="50px"> &nbsp; Explain all annotations (in figure/figure legend)
+````{tab-set}
+```{tab-item} Description
+```
+```{tab-item} Links
+```
+````
+`````  
 
+`````{dropdown} <img src="images_icons/blank.png" height="50px"> &nbsp; Annotations should be legible (line width, size/point size, color)
+````{tab-set}
+```{tab-item} Description
+```
+```{tab-item} Links
+```
+````
+````` 
+ 
+`````{dropdown} <img src="images_icons/blank.png" height="50px"> &nbsp; Annotations should not obscure key data
+````{tab-set}
+```{tab-item} Description
+```
+```{tab-item} Links
+```
 ````
+`````  
+
+``````
 
-````{dropdown} Recommended
-- [ ] <img src="images_icons/blank.png" height="25px"> Annotate imaging details important for interpreting the figure. (Depending on the main message and imaging technique this may be e.g. image pixel size, imaging intervals (time-lapse in movies), exposure time, or anatomical section.)
+``````{admonition} Recommended
+:class: attention
 
+`````{dropdown} <img src="images_icons/blank.png" height="50px"> &nbsp; Annotate imaging details important for interpreting the figure. 
+
+````{tab-set}
+```{tab-item} Description
+(Depending on the main message and imaging technique this may be e.g. image pixel size, imaging intervals (time-lapse in movies), exposure time, or anatomical section.)
+```
+```{tab-item} Links
+```
 ````
+````` 
+
+``````
 <!--Notes which will not be shown on the actual page-->

checklists_for_image_publishing/availability.md

@@ -1,17 +1,44 @@
 # Image availability
 
-````{dropdown} Minimal 
-- [ ] <img src="images_icons/blank.png" height="25px"> Images are shared (lossless compression/microscope images)
+``````{admonition} Minimal 
+:class: warning
 
+`````{dropdown} <img src="images_icons/blank.png" height="50px"> &nbsp; Images are shared (lossless compression/microscope images)
+````{tab-set}
+```{tab-item} Description
+```
+```{tab-item} Links
+```
 ````
+````` 
 
-````{dropdown} Recommended
-- [ ] <img src="images_icons/blank.png" height="25px"> Images are freely downloadable (public databse)
+``````
 
+``````{admonition} Recommended
+:class: attention
+
+`````{dropdown} <img src="images_icons/blank.png" height="50px"> &nbsp; Images are freely downloadable (public databse)
+````{tab-set}
+```{tab-item} Description
+```
+```{tab-item} Links
+```
 ````
+````` 
+
+``````
 
-````{dropdown} Ideal
-- [ ] <img src="images_icons/blank.png" height="25px"> Images files are in dedicated image database (added value database or image archive)
+``````{admonition} Ideal
+:class: tip
 
+`````{dropdown} <img src="images_icons/blank.png" height="50px"> &nbsp; Image files are in dedicated image database (added value database or image archive)
+````{tab-set}
+```{tab-item} Description
+```
+```{tab-item} Links
+```
 ````
+````` 
+
+``````
 <!--Notes which will not be shown on the actual page-->

checklists_for_image_publishing/channels.md

@@ -1,32 +1,107 @@
 # Image colors and channels
 
 
-````{dropdown} Minimal 
-- [ ] <img src="images_icons/blank.png" height="25px"> Annotation of channels (staining, marker etc.) visible
+``````{admonition} Minimal 
+:class: warning
+
+`````{dropdown} <img src="images_icons/blank.png" height="50px"> &nbsp; Annotation of channels (staining, marker etc.) visible
+````{tab-set}
+```{tab-item} Description
 Add the staining or marker within or beside the relevant image (panel). 
-- [ ] <img src="images_icons/blank.png" height="25px">  Adjust brightness/contrast, report adjustments, use uniform color-scales
+```
+```{tab-item} Links
+```
+````
+````` 
+
+`````{dropdown} <img src="images_icons/blank.png" height="50px"> &nbsp; Adjust brightness/contrast, report adjustments, use uniform color-scales
+````{tab-set}
+```{tab-item} Description
 Intensity range adjustments should be monitored with the image histogram and done with care: a too wide intensity range results in ‘faded’ images that lack details, while a too narrow intensity range removes data.
 Use a range indicator LUT (e.g. HiLo in Fiji) to highlight pixels where data was removed due to a too narrow intensity range
-- [ ] <img src="images_icons/blank.png" height="25px"> Image comparison: use same adjustments
+```
+```{tab-item} Links
+```
+````
+`````  
+
+`````{dropdown} <img src="images_icons/blank.png" height="50px"> &nbsp; Image comparison: use same adjustments
+````{tab-set}
+```{tab-item} Description
 Any adjustments to the image, such as brightness/contrast must be consistent across all images within an experiment, that might be directly compared.
-- [ ] <img src="images_icons/blank.png" height="25px">  Channel colors high visibility on background. Best visibility: grayscale
-Ensure the use of highly contrastive colors when choosing for your individual microscopy channels. Darker colors, like blue, are less visible on a black background while lighter colors, like yellow, are highly visible on a black background but less so on a brightfield image with a white background. 
-- [ ] <img src="images_icons/blank.png" height="25px"> Multi-color: provide grayscale for each color channel
+```
+```{tab-item} Links
+```
+````
+````` 
+
+`````{dropdown} <img src="images_icons/blank.png" height="50px"> &nbsp; Channel colors high visibility on background. Best visibility: grayscale
+````{tab-set}
+```{tab-item} Description
+Ensure the use of highly contrastive colors when choosing for your individual microscopy channels. Darker colors, like blue, are less visible on a black background while lighter colors, like yellow, are highly visible on a black background but less so on a brightfield image with a white background.
+```
+```{tab-item} Links
+```
+````
+`````  
+ 
+`````{dropdown} <img src="images_icons/blank.png" height="50px"> &nbsp; Multi-color: provide grayscale for each color channel
+````{tab-set}
+```{tab-item} Description
 Grayscale images are often easier to visually distinguish fine detail within than color channels; providing them ensures the reader can see your phenotype to best effect.
-- [ ] <img src="images_icons/blank.png" height="25px">  Multi-color: if channels are merged, make accessible to color blind
+```
+```{tab-item} Links
+```
+````
+````` 
+
+`````{dropdown} <img src="images_icons/blank.png" height="50px"> &nbsp; Multi-color: if channels are merged, make accessible to color blind
+````{tab-set}
+```{tab-item} Description
 If creating merged images, ensure the LUTs chosen are separable for color-blind readers; online simulations can help you check this.
+```
+```{tab-item} Links
+```
 ````
+`````  
+
+``````
 
-````{dropdown} Recommended
-- [ ] <img src="images_icons/blank.png" height="25px"> Provide intensity scales (calibration bar) for grayscale, color, pseudocolor
+``````{admonition} Recommended
+:class: attention
 
+`````{dropdown} <img src="images_icons/blank.png" height="50px"> &nbsp; Provide intensity scales (calibration bar) for grayscale, color, pseudocolor
+````{tab-set}
+```{tab-item} Description
+```
+```{tab-item} Links
+```
 ````
+````` 
 
-````{dropdown} Ideal
-- [ ] <img src="images_icons/blank.png" height="25px"> Pseudo-colored images: additionally provide grayscale version for comparison
+``````
 
-- [ ] <img src="images_icons/blank.png" height="25px">  Gamma adjustments: additionally provide linear-adjusted image for comparison
+``````{admonition} Ideal
+:class: tip
 
+`````{dropdown} <img src="images_icons/blank.png" height="50px"> &nbsp; Pseudo-colored images: additionally provide grayscale version for comparison
+````{tab-set}
+```{tab-item} Description
+```
+```{tab-item} Links
+```
 ````
+````` 
+
+`````{dropdown} <img src="images_icons/blank.png" height="50px"> &nbsp; Gamma adjustments: additionally provide linear-adjusted image for comparison
+````{tab-set}
+```{tab-item} Description
+```
+```{tab-item} Links
+```
+````
+`````  
+
+``````
 
 <!--Notes which will not be shown on the actual page-->

checklists_for_image_publishing/established.md

@@ -1,31 +1,100 @@
 # Established workflows
 
 
-````{dropdown} Minimal 
-- [ ] <img src="images_icons/icon_cite.svg" height="25px"> Cite workflow & platform
+``````{admonition} Minimal 
+:class: warning
 
-- [ ] <img src="images_icons/icon_key_settings.svg" height="25px"> Key settings
+`````{dropdown} <img src="images_icons/icon_cite.svg" width="50px"> &nbsp; Cite workflow & platform
+````{tab-set}
+```{tab-item} Description
+```
+```{tab-item} Links
+```
+````
+````` 
 
-- [ ] <img src="images_icons/icon_example.svg" height="25px"> Example data
+`````{dropdown} <img src="images_icons/icon_key_settings.svg" width="50px"> &nbsp; Key settings
+````{tab-set}
+```{tab-item} Description
+```
+```{tab-item} Links
+```
+````
+````` 
 
-- [ ] <img src="images_icons/icon_roi.svg" height="25px"> Manual ROIs
+`````{dropdown} <img src="images_icons/icon_example.svg" width="50px"> &nbsp; Example data
+````{tab-set}
+```{tab-item} Description
+```
+```{tab-item} Links
+```
+````
+````` 
 
-- [ ] <img src="images_icons/icon_version.svg" height="25px"> Exact version
+`````{dropdown} <img src="images_icons/icon_roi.svg" width="50px"> &nbsp; Manual ROIs
+````{tab-set}
+```{tab-item} Description
+```
+```{tab-item} Links
+```
+````
+````` 
 
+`````{dropdown} <img src="images_icons/icon_version.svg" width="50px"> &nbsp; Exact version
+````{tab-set}
+```{tab-item} Description
+```
+```{tab-item} Links
+```
 ````
+````` 
 
-````{dropdown} Recommended
-- [ ] <img src="images_icons/icon_all_settings.svg" height="25px"> All settings
+``````
 
-- [ ] <img src="images_icons/icon_public_example.svg" height="25px"> Public example
+``````{admonition} Recommended
+:class: attention
 
+`````{dropdown} <img src="images_icons/icon_all_settings.svg" width="50px"> &nbsp; All settings
+````{tab-set}
+```{tab-item} Description
+```
+```{tab-item} Links
+```
 ````
+````` 
 
-````{dropdown} Ideal
-- [ ] <img src="images_icons/icon_screen_recording.svg" height="25px"> Document usage (e.g. screen recording or tutorial)
+`````{dropdown} <img src="images_icons/icon_public_example.svg" width="50px"> &nbsp; Public example
+````{tab-set}
+```{tab-item} Description
+```
+```{tab-item} Links
+```
+````
+````` 
 
-- [ ] <img src="images_icons/icon_cloud_container.svg" height="25px"> Cloud hosted or container
+``````
 
+``````{admonition} Ideal
+:class: tip
+
+`````{dropdown} <img src="images_icons/icon_screen_recording.svg" width="50px"> &nbsp; Document usage (e.g. screen recording or tutorial)
+````{tab-set}
+```{tab-item} Description
+```
+```{tab-item} Links
+```
+````
+````` 
+
+`````{dropdown} <img src="images_icons/icon_cloud_container.svg" width="50px"> &nbsp; Cloud hosted or container
+````` 
+````{tab-set}
+```{tab-item} Description
+```
+```{tab-item} Links
+```
 ````
 
+``````
+
 <!--Notes which will not be shown on the actual page-->