init commit,

99_references/ionic-react-conference-app-main_old/src/pages/SpeakerDetail.scss

@@ -0,0 +1,79 @@
+#speaker-detail {
+  /*
+   * Speaker Background
+   */
+
+  ion-toolbar {
+    position: absolute;
+
+    top: 0;
+    left: 0;
+    right: 0;
+
+    --background: transparent;
+    --color: white;
+  }
+
+  ion-toolbar ion-back-button,
+  ion-toolbar ion-button,
+  ion-toolbar ion-menu-button {
+    --color: white;
+  }
+
+  .speaker-background {
+    position: relative;
+
+    display: flex;
+
+    padding-top: var(--ion-safe-area-top);
+
+    align-items: center;
+    justify-content: center;
+
+    flex-direction: column;
+
+    height: calc(250px + var(--ion-safe-area-top));
+
+    background: center / cover url("/assets/img/speaker-background.png")
+      no-repeat;
+  }
+
+  .speaker-background img {
+    width: 70px;
+    border-radius: 50%;
+    margin-top: calc(-1 * var(--ion-safe-area-top));
+  }
+
+  .speaker-background h2 {
+    position: absolute;
+
+    bottom: 10px;
+
+    color: white;
+  }
+
+  .md .speaker-background {
+    box-shadow: rgba(0, 0, 0, 0.2) 0 3px 1px -2px,
+      rgba(0, 0, 0, 0.14) 0 2px 2px 0px, rgba(0, 0, 0, 0.12) 0 1px 5px 0;
+  }
+
+  .ios .speaker-background {
+    box-shadow: rgba(0, 0, 0, 0.12) 0 4px 16px;
+  }
+
+  /*
+   * Speaker Details
+   */
+
+  .speaker-detail p {
+    margin-left: 6px;
+    margin-right: 6px;
+  }
+
+  .speaker-detail hr {
+    margin-top: 20px;
+    margin-bottom: 20px;
+
+    background: var(--ion-color-step-150, #d7d8da);
+  }
+}