update css

app.py

@@ -6,7 +6,7 @@ If you're not a hedgehog, you shouldn't reuse this code. Use this instead: https
 import streamlit as st
 
 
-from st_helpers import make_header, content_text, cite
+from st_helpers import make_header, content_text, content_title, cite
 from charts import draw_current_progress
 
 st.set_page_config(page_title="Training Transformers Together", layout="centered")
@@ -28,3 +28,17 @@ All it takes is for a bunch of us to come together. In fact, we're doing it righ
 """, vspace_before=12, vspace_after=16)
 
 draw_current_progress()
+
+content_text(f"""
+The model we're training is called DALLE: a transformer "language model" that generates images from text description.
+We're training this model on <a href=https://laion.ai/laion-400-open-dataset/>LAION</a> - the world's largest openly available
+image-text-pair dataset with 400 million samples.
+<b>TODO</b> You see a short description of training dataset, model architecture and training configuration.
+In includes all necessary citations and, most importantly, a down-to-earth explanation of what exactly is dalle.
+It properly refers the communities that provided data, the source codebase and provides necessary links.
+""")
+
+content_title("How do I join?")
+
+content_text("For the sake of ")
+

charts.py

@@ -35,6 +35,7 @@ def draw_current_progress():
         use_container_width=True,
     )
 
+def draw_participant_bubbles():
     with st.expander("Who's training?", expanded=False):
         st.markdown("### Collaborative training participants\n(may take a few seconds to load)")
 

st_helpers.py

@@ -19,8 +19,15 @@ def make_header():
     st.markdown(f"<style>{content_style_css}</style>", unsafe_allow_html=True)  # apply css to the rest of the document
 
 
+def content_title(title: str, vspace_before: int = 0, vspace_after: int = 0):
+    st.markdown(f'<center><div class="padded faded demo_title" '
+                f'style="padding-top: {vspace_before}px; padding-bottom: {vspace_after}px; text-align: justify;">'
+                f'{title}</div><center>',
+                unsafe_allow_html=True)
+
+
 def content_text(text: str, vspace_before: int = 0, vspace_after: int = 0):
-    st.markdown(f'<center><div class="padded faded main_text" '
+    st.markdown(f'<center><div class="padded faded demo_text" '
                 f'style="padding-top: {vspace_before}px; padding-bottom: {vspace_after}px; text-align: justify;">'
                 f'{text}</div><center>',
                 unsafe_allow_html=True)

static/content_style.css

@@ -11,13 +11,13 @@
     max-width: 800px;
     text-align: left;
 }
-.title {
+.demo_title {
    font-size: 32px;
    box-shadow: 0 0 5px 5px var(--window-color);
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,
                 sans-serif,Apple Color Emoji,Segoe UI Emoji;
 }
-.main_text {
+.demo_text {
    font-size: 16px;
    box-shadow: 0 0 5px 5px var(--window-color);
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,