Changed the calendar design

OSURoboticsClub · Apr 8, 2024 · 1ae1eeb · 1ae1eeb
1 parent 66417d9
commit 1ae1eeb
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 3 deletions.
diff --git a/layouts/_default/events.html b/layouts/_default/events.html
@@ -1,13 +1,46 @@
 {{ define "main" }}
 
 <article class="pb-24 relative"> 
- <div style = "padding-top: 100px; font-size: 35px;" >Calendar</div>
- <div style = "padding-top: 50px;">
+ <div class="orange-bubble">
+ Calendar
+ </div>
+ <div class="gray-bubble">
+ <p>Check out our upcoming events!</p>
+ </div>
+ <hr>
+ <div style="padding-top: 50px;">
  <iframe src="https://docs.google.com/spreadsheets/d/1tIayCRxMKOJj41na6zIgkK2xSVG4RlWO_3dKGToBaco/edit?usp=sharing/pubhtml?gid=0&amp;single=true&amp;widget=true&amp;headers=false" width="100%" height="500" frameborder="0"></iframe>
  </div>
 
 
 </article>
 
-
+<style>
+ .orange-bubble, .gray-bubble {
+ display: inline-block;
+ padding: 20px;
+ color: white;
+ margin-bottom: 20px;
+ border-radius: 50%; 
+ background-color: rgba(249, 115, 22, 0.8); 
+ }
+ .orange-bubble {
+ display: inline-block;
+ margin-top: 100px;
+ padding: 10px 20px;
+ font-size: 35px;
+ background-color: #F97316;
+ color: white;
+ border-radius: 20px 0 0 20px;
+ margin-bottom: 20px;
+ }
+
+ .gray-bubble {
+ display: inline-block;
+ padding: 10px 20px;
+ background-color: #ababab;
+ border-radius: 0 20px 20px 0;
+ margin-bottom: 20px;
+ }
+</style>
 {{ end}}
diff --git a/static/css/styles.css b/static/css/styles.css
@@ -1612,6 +1612,7 @@ video {
 .bruh-card:hover .bruh-card-text {
  background-color: rgb(0 0 0 / 0.5);
 }
+
 .hover\:opacity-90:hover {
  opacity: 0.9;
 }