css edits

pkgdown/extra.css

@@ -1,30 +1,3 @@
-.button {
-  display: inline-block;
-  width: 300px;
-  height: 40px;
-  line-height: 40px;
-  margin: 5px;
-  background-color: #233B51;
-  border-color: #233B51;
-  color: white;
-  text-decoration: none;
-  border-radius: 10px;
-  transition: background-color 0.3s;
-  text-align: center;
-}
-
-.button:hover {
-  background-color: #7E69AE;
-  border-color: #233B51;
-  border-radius: 4px;
-  border-radius: 10px;
-  text-decoration: none;
-  background-color: #ddd;
-  transition: color 0.3s;
-  color: black;
-}
-
-
 .gallery {
   display: grid;
   grid-gap: 15px;
@@ -43,10 +16,13 @@
   border: 1px solid #ddd;
   border-radius: 8px;
   padding: 15px;
-  text-align: center;
-  transition: transform 0.2s;
   text-decoration: none;
+  text-align: center;
   color: inherit;
+  height: 325px;
+  display: flex;
+  flex-direction: column;
+  transition: transform 0.2s;
 }
 
 .tile:hover {
@@ -55,8 +31,17 @@
   text-decoration: none;
 }
 
+.tile > div:first-child {
+  margin-top: 0;
+}
+
 .tile img {
   max-width: 100%;
   height: auto;
+  margin-top: auto;
+}
+
+.tile strong {
+  display: block;
   margin-bottom: 10px;
 }

vignettes/obj_create_sc.Rmd

@@ -29,7 +29,7 @@ library(Giotto)
 
 
 
-### Download data to use
+# Download data to use
 
 The example dataset used here is from 10X [link](https://www.10xgenomics.com/datasets/Human_PBMCs_Next_GEM_Flex_GEM-X_Flex_Comparison)
 
@@ -43,15 +43,15 @@ save_path <- file.path(data_path, "pbmc_matrix.h5")
 utils::download.file(link, destfile = save_path, method = "wget")
 ```
 
-### Read the data
+# Read the data
 
 Read the expression matrix, which is provided from 10X as an h5 format. `get10Xmatrix_h5()` is a convenience function from `Giotto` that will import this format as a *Matrix* `dgCMatrix` sparse matrix.
 
 ```{r, eval=FALSE}
 pbmc_mat <- get10Xmatrix_h5(save_path)
 ```
 
-### Load into Giotto as a single cell analysis
+# Load into Giotto as a single cell analysis
 
 Single cell datasets should be loaded in through `createGiottoObject()`.
 During the load, a set of dummy spatial locations that can be safely ignored will also be generated.

vignettes/object_creation.Rmd

@@ -13,30 +13,75 @@ vignette: >
   %\VignetteEncoding{UTF-8}
 ---
 
+```{css, echo=FALSE}
+/* Container for each datatype section */
+.datatype-section {
+  display: flex;
+  align-items: start;
+  gap: 2rem;
+  margin-bottom: 2rem;
+}
+
+/* Text content container */
+.datatype-content {
+  flex: 1;
+}
+
+/* Image container */
+.datatype-image {
+  flex: 0 0 45%;
+  margin: 0;
+  align-items: start;
+}
+
+/* Ensure images are responsive */
+.datatype-image img {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Clear any existing floats */
+.datatype-section::after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+/* custom header */
+.header-custom {
+    margin-top: 0px;
+    margin-bottom: 5px;
+    display: block;
+    font-size: 1.4em;
+    font-weight: bold;
+}
+```
 
 # Spatial Omic Datatypes
 
 Spatial omics data can be provided either as aggregated data or raw features information.
 
+<br>
+
 ```{r, echo=FALSE}
 heads <- c("Aggregated Data", "Raw Features", "Spatial Unit")
 txt <- c(
     "Feature information that has been calculated for a particular set of spatial locations. <br> These are commonly presented as an expression matrix paired with a set of xy(z) coordinates in tabular or matrix format.",
     "Feature information about the tissue that has not been aggregated. These features can be paired with a spatial unit to enable aggregate data-based analyses. <br> Raw features can include molecule detections with an ID and xy(z) coordinates in tabular format (e.g., transcripts), or a matrix of intensity values, typically in image format.",
     "Spatial units provide functional context to raw features, allowing them to be aggregated and treated as units of study. These can be artificial (e.g., spatial bins), biological (e.g., cell or nuclear segmentations), or technical (e.g., arrays of spots reflecting the assay's construction). <br> Annotations can either be provided as 2D raster image/matrix-like format where the integer values of matrix cells or raster pixels both identify and define the region covered by each annotation, or as a vector-type format where the vertices of the polygons are provided."
 )
-imgs <- sprintf(
-    '<img src="%s" style="float: right; width: 45%%;"/>',
-    c(
+imgs <- c(
         "images/object_creation/Giotto_Datatypes-agg.png",
         "images/object_creation/Giotto_Datatypes-ft.png",
         "images/object_creation/Giotto_Datatypes-su.png"
-    )
 )
-knitr::asis_output(paste0(sprintf(
-    '<div style="margin-bottom: 20px;">%s<div style="width: 50%%;"><h3 style="margin: 0;">%s</h3><p style="padding-left: 15px; margin-top: 5px;">%s</p></div><div style="clear: both;"></div></div>',
-    imgs, heads, txt
-)))
+
+sprintf(
+    '<div class="datatype-section"><div class="datatype-content"><p class="header-custom">%s</p><p>%s</p></div><div class="datatype-image"><img src="%s" alt="%s"/></div></div>',
+    heads, txt, imgs, heads
+) |> 
+    paste0() |>
+    knitr::asis_output()
 ```
 
 
@@ -52,37 +97,35 @@ See the following for instructions on setting up a custom `giotto` object with t
 
 
 ```{r, echo=FALSE}
-tile_imgs <- vapply(
+tile_imgs <- sprintf(
+    '<img src="%s"/>',
     c(
         "images/object_creation/1_spatplot_aggregate.png",
         "images/object_creation/4_align.png",
         "images/object_creation/9_align2.png"
-    ),
-    function(im_path) knitr::sew(knitr::include_graphics(im_path)),
-    FUN.VALUE = character(1L)
+    )
+)
+
+tile_links <- c(
+    "obj_create_agg.html",
+    "obj_create_pnts.html",
+    "obj_create_img.html"
+)
+
+tile_txt <- c(
+    "Matrix and Spatial Locations", 
+    "Feature detection (points) and cell annotations (vector polygons)",
+    "Staining images and cell annotations (raster mask/polygons)"
 )
 
 tile <- sprintf(
-    "<strong>%s</strong>%s", 
-    c(
-        "Matrix and Spatial Locations", 
-        "Feature detection (points) and cell annotations (vector polygons)",
-        "Staining images and cell annotations (raster mask/polygons)"
-    ),
-    tile_imgs
+    '<a href="%s" class="tile"><div><strong>%s</strong></div>%s</a>',
+    tile_links, tile_txt, tile_imgs
 )
 
 knitr::asis_output(paste0(
     '<div class="gallery">',
-    '<a href="obj_create_agg.html" class="tile">',
-        tile[[1L]],
-    '</a>',
-    '<a href="obj_create_pnts.html" class="tile">',
-        tile[[2L]],
-    '</a>',
-    '<a href="obj_create_img.html" class="tile">',
-        tile[[3L]],
-    '</a>',
+        tile[[1L]], tile[[2L]], tile[[3L]],
     '</div>'
 ))
 ```