Spaces:
Sleeping
Sleeping
_font_title = "Monoton" | |
_font_subtitle = "Exo" | |
CSS = ( | |
""" | |
<!-- Add the font link from Google Fonts --> | |
<link href="https://fonts.googleapis.com/css2?family=""" | |
+ _font_title | |
+ """&display=swap" rel="stylesheet"> | |
<link href="https://fonts.googleapis.com/css2?family=""" | |
+ _font_subtitle | |
+ """&display=swap" rel="stylesheet"> | |
<style> | |
/* Remove the streamlit header */ | |
header[data-testid="stHeader"] { | |
display: none; | |
} | |
/* Remove the sidebar menu */ | |
div[data-testid="collapsedControl"]{ | |
display: none; | |
} | |
/* Background */ | |
.css-z5fcl4 { | |
padding: 0.5rem; | |
padding-top: 0rem; | |
} | |
/* Distances between the title and the image in mobile */ | |
.css-1uifejx.e1tzin5v1 { | |
margin-bottom: 0px; | |
padding-bottom: 0px; | |
} | |
h1 { | |
padding-top: 0px; | |
} | |
/* Center the image within its container */ | |
.css-1kyxreq { | |
justify-content: center; | |
} | |
/* Remove fixed width from the image container */ | |
.css-1kyxreq.etr89bj2 { | |
width: 100% !important; | |
} | |
/* Center the title */ | |
.css-k7vsyb { | |
text-align: center; | |
} | |
/* Hide the anchor button */ | |
.css-zt5igj.e16nr0p33 a { | |
display: none; | |
} | |
/* Hide the full screen button */ | |
.css-e370rw.e19lei0e1 { | |
display: none; | |
} | |
.css-6awftf.e19lei0e1 { | |
display: none; | |
} | |
/* Desktop */ | |
@media (min-width: 640px) { | |
.stMarkdown { | |
max-width: 100%; | |
width: auto; | |
display: inline-block; | |
} | |
/* Dynamically add space between the image and the title */ | |
.css-1kyxreq { | |
justify-content: right; | |
} | |
} | |
/* Add space after the image and the title */ | |
.css-1a32fsj { | |
margin-right: 0px; | |
} | |
/* Apply the futuristic font to the text title*/ | |
#moseca { | |
font-family: '""" | |
+ _font_title | |
+ """', sans-serif; | |
font-size: 3rem; | |
text-align: center; | |
/* Align the text to the center of the box */ | |
align-items: center; | |
/* Set the line height to the same as the height of the box */ | |
line-height: 3.5rem; | |
margin-bottom: -1rem; | |
} | |
/* subtitle */ | |
.css-5rimss p, .css-nahz7x p { | |
font-family: """ | |
+ _font_subtitle | |
+ """, sans-serif; | |
font-size: 0.8rem; | |
text-align: center; | |
} | |
/* Desktop */ | |
@media (min-width: 640px) { | |
.css-zt5igj, .css-nahz7x p { | |
text-align: left; | |
} | |
.css-5rimss p { | |
text-align: left; | |
} | |
} | |
.st-af { | |
align-items: center; | |
padding-right: 2rem; | |
} | |
/* Remove the gap around the player */ | |
.css-434r0z { | |
gap: 0rem; | |
} | |
</style> | |
""" | |
) | |