got alignment working and rect crown of thorns overlay

gloss.xcodeproj/xcuserdata/saint.xcuserdatad/xcdebugger/Breakpoints_v2.xcbkptlist

@@ -16,8 +16,8 @@
             endingColumnNumber = "9223372036854775807"
             startingLineNumber = "566"
             endingLineNumber = "566"
-            landmarkName = "handleVisibilityChanged(_:change:tracker:)"
+            landmarkName = "body"
-            landmarkType = "7">
+            landmarkType = "24">
          </BreakpointContent>
       </BreakpointProxy>
       <BreakpointProxy
@@ -32,8 +32,8 @@
             endingColumnNumber = "9223372036854775807"
             startingLineNumber = "568"
             endingLineNumber = "568"
-            landmarkName = "handleVisibilityChanged(_:change:tracker:)"
+            landmarkName = "body"
-            landmarkType = "7">
+            landmarkType = "24">
          </BreakpointContent>
       </BreakpointProxy>
       <BreakpointProxy

gloss/ContentView.swift

@@ -196,12 +196,12 @@ private struct SegRow: View {
                 var attributedString: AttributedString {
                     // var result = AttributedString("Hello World!")
                     var result = AttributedString(verse.body)
-                    result.underlineStyle = Text.LineStyle(
+                    // result.underlineStyle = Text.LineStyle(
-                        pattern: .dot, color: .white)
+                    //     pattern: .dot, color: .white)
                     return result
                 }
 
-                 retView = retView + Text(String(verse.verse)) + Text(String(ribbonId))
+                 retView = retView + Text(String(ribbonId))
                  //retView = retView + Text(attributedString)
                 // Text(seg.body)
                 // .contentShape(Rectangle())
@@ -254,9 +254,6 @@ struct ContentView: View {
     @State var scrollUpdate = false
     @State var initLoad = false
 
-    // @State var currentId : String?
-    // @State var currentOffset = CGFloat()
-
     // set this to scroll to area
     @State var scrollId : String?
     @State var scrollOffset:  CGFloat?
@@ -301,35 +298,91 @@ struct ContentView: View {
     var body: some View {
         // Print("rendering")
 
-        var size1 = CGFloat(70)
+        var size1 = CGFloat(11)
-        var size2 = CGFloat(120)
+        var size2 = CGFloat(100)
-        var fontSize = CGFloat(20)
+        var fontSize = CGFloat(15)
+        var scale = 0.65
+        var height = CGFloat(50)
+        var xOffset = CGFloat(25)
         GeometryReader { geometry in
             ZStack (alignment: .top) {
+
+
                 VStack{
-                    Text("pp")
-                    .font(Font.custom("AveriaSerifLibre-Regular", size: fontSize))
-                    .foregroundColor(Color(UIColor(red: 0.76, green: 0.76, blue: 0.76, alpha: 1.00)))
-                    // .background(Color(red: 0.3, green: 0.3, blue: 0.3))
-                    .overlay( MyCustomShape().frame(width: size1, height: size1) .foregroundColor(Color(UIColor(red: 0.30, green: 0.30, blue: 0.30, alpha: 0.4))))
-                    // .foregroundColor(.white))
-                    .frame(width: size2, height: size2)
 
-                    Text("Ps")
+                    Text("Imitation of Christ")
-                    .font(Font.custom("AveriaSerifLibre-Regular", size: fontSize))
                     .foregroundColor(Color(UIColor(red: 0.76, green: 0.76, blue: 0.76, alpha: 1.00)))
-                    // .background(Color(red: 0.3, green: 0.3, blue: 0.3))
+                    // // .background(Color(red: 0.3, green: 0.3, blue: 0.3))
-                    .overlay( MyCustomShape().frame(width: size1, height: size1) .foregroundColor(Color(UIColor(red: 0.30, green: 0.30, blue: 0.30, alpha: 0.4))))
                     // .foregroundColor(.white))
-                    .frame(width: size1, height: size1)
+                    // .foregroundColor(.black)
+                    .frame(minWidth: CGFloat(75), maxWidth: CGFloat(75), minHeight: height, maxHeight: height, alignment: .center)
+                     // .background(.red)
+                    // .background(.yellow)
+                    .multilineTextAlignment(.center)
+                    // .minimumScaleFactor(0.5)
+                    .padding([.top, .bottom], 10)
+                    .font(Font.custom("AveriaSerifLibre-Regular", size: CGFloat(10)))
 
-                    Text("Jn")
+                    .overlay( MyIcon().frame(width: CGFloat(100 * 1.66 * scale), height: CGFloat(100 * scale), alignment: .center) .foregroundColor(Color(UIColor(red: 0.30, green: 0.30, blue: 0.30, alpha: 0.4))))
-                    .font(Font.custom("AveriaSerifLibre-Regular", size: fontSize))
+
+                    .offset(x: xOffset)
+                    // .offset(y: 25)
+
+                    Text("Psalms")
                     .foregroundColor(Color(UIColor(red: 0.76, green: 0.76, blue: 0.76, alpha: 1.00)))
                     // .background(Color(red: 0.3, green: 0.3, blue: 0.3))
-                    .overlay( MyCustomShape().frame(width: size1, height: size1) .foregroundColor(Color(UIColor(red: 0.30, green: 0.30, blue: 0.30, alpha: 0.4))))
                     // .foregroundColor(.white))
-                    .frame(width: size1, height: size1)
+                    // .foregroundColor(.black)
+                    .overlay( MyIcon().frame(width: CGFloat(100 * 1.66 * scale), height: CGFloat(100 * scale)) .foregroundColor(Color(UIColor(red: 0.56, green: 0.30, blue: 0.30, alpha: 0.4))))
+                    .frame(minWidth: CGFloat(75), maxWidth: CGFloat(75), minHeight: height, maxHeight: height, alignment: .center)
+                    // .background(.red)
+                    .multilineTextAlignment(.center)
+
+                    .offset(x: xOffset)
+                    .padding([.top, .bottom], 10)
+                    // .minimumScaleFactor(0.5)
+                    .font(Font.custom("AveriaSerifLibre-Regular", size: CGFloat(14)))
+
+                    // Text("padding")
+
+                    Text("Fundamentals of Dogmatic Theology")
+                    .foregroundColor(Color(UIColor(red: 0.76, green: 0.76, blue: 0.76, alpha: 1.00)))
+                    // .background(Color(red: 0.3, green: 0.3, blue: 0.3))
+                    // .foregroundColor(.black)
+                    .overlay( MyIcon().frame(width: CGFloat(100 * 1.66 * scale), height: CGFloat(100 * scale)) .foregroundColor(Color(UIColor(red: 0.30, green: 0.30, blue: 0.30, alpha: 0.4))))
+                    .frame(minWidth: CGFloat(75), maxWidth: CGFloat(75), minHeight: height, maxHeight: height, alignment: .center)
+                    // .background(.red)
+                    .multilineTextAlignment(.center)
+                    .padding([.top, .bottom], 10)
+                    .offset(x: xOffset)
+                    // .minimumScaleFactor(0.5)
+                    .font(Font.custom("AveriaSerifLibre-Regular", size: CGFloat(10)))
+                    // .minimumScaleFactor(0.9)
+
+                    // Text("padding")
+
+
+                    // // Text("Fundamentals of Dogmatic Theology")
+                    // Text("FoDT")
+                    // .font(Font.custom("AveriaSerifLibre-Regular", size: CGFloat(15)))
+                    // .foregroundColor(Color(UIColor(red: 0.76, green: 0.76, blue: 0.76, alpha: 1.00)))
+                    // // .backgroundColor(Color(UIColor(red: 1.00, green: 0.76, blue: 0.76, alpha: 1.00)))
+                    // // .background(Color(red: 0.3, green: 0.3, blue: 0.3))
+                    // .overlay( MyIcon().frame(width: size2, height: size2) .foregroundColor(Color(UIColor(red: 0.30, green: 0.30, blue: 0.30, alpha: 0.4))))
+                    // // .background(.yellow)
+                    // // .foregroundColor(.white))
+                    // .frame(width: CGFloat(50), height: CGFloat(80))
+                    // .lineLimit(nil)
+                    // .multilineTextAlignment(.leading)
+                    // .minimumScaleFactor(0.9)
+
+                    // Text("Jn")
+                    // .font(Font.custom("AveriaSerifLibre-Regular", size: fontSize))
+                    // .foregroundColor(Color(UIColor(red: 0.76, green: 0.76, blue: 0.76, alpha: 1.00)))
+                    // // .background(Color(red: 0.3, green: 0.3, blue: 0.3))
+                    // .overlay( MyIcon().frame(width: size1, height: size1) .foregroundColor(Color(UIColor(red: 0.30, green: 0.30, blue: 0.30, alpha: 0.4))))
+                    // // .foregroundColor(.white))
+                    // .frame(width: size2, height: size2)
 
 
                     // Text("MTW")