update styles

gdg-twhk · Oct 20, 2024 · eb5007b · eb5007b
1 parent 8962971
commit eb5007b
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 11 deletions.
diff --git a/src/app/app.component.css b/src/app/app.component.css
@@ -6,14 +6,16 @@ mat-toolbar {
     left: 0px;
 }
 
-mat-drawer{
+mat-drawer {
     position: fixed;
     z-index: 11;
     top: 0px;
     left: 0px;
+    width: 250px;
+    padding: 20px 10px;
 }
 
-mat-drawer mat-nav-list{
+mat-drawer mat-nav-list {
     padding-top: var(--mat-toolbar-standard-height);
 }
 
@@ -29,7 +31,7 @@ mat-drawer-container {
         padding-top: var(--mat-toolbar-mobile-height);
     }
 
-    mat-drawer mat-nav-list{
+    mat-drawer mat-nav-list {
         padding-top: var(--mat-toolbar-mobile-height);
     }
 }
@@ -38,9 +40,28 @@ mat-drawer-container {
     flex: 1 1 auto;
 }
 
-mat-drawer {
-    width: 250px;
-    padding: 20px 10px;
+a.logo-button {
+    display: block;
+    height: 25px;
+}
+
+a.logo-button img {
+    height: 100%;
+}
+
+.highlight-tab-link {
+    border-radius: 5px;
+    background-color: var(--blue-500);
+    transition: background-color 750ms var(--default-transition-timing-function);
+}
+
+.highlight-tab-link:hover {
+    background-color: #7caeff;
+}
+
+::ng-deep .highlight-tab-link .mdc-tab__text-label {
+    color: #fff!important;
+    font-weight: bold;
 }
 
 main {
@@ -57,7 +78,7 @@ footer {
     background-color: #e0e0e0;
 }
 
-#footer-container {
+.footer-container {
     padding: 20px 10px 5px;
     margin: 0px auto;
     width: 100%;

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -4,14 +4,16 @@
     <mat-icon *ngIf="!drawer.opened">menu</mat-icon>
     <mat-icon *ngIf="drawer.opened">close</mat-icon>
   </button>
-  <img style="height: 25px;" src="./assets/df24-nav-logo.png" alt="GDG DevFest 2024">
+  <a class="logo-button" routerLink="/">
+    <img src="./assets/df24-nav-logo.png" alt="GDG DevFest 2024">
+  </a>
   <span class="toolbar-spacer"></span>
   <nav mat-tab-nav-bar [tabPanel]="tabPanel" class="hide-when-screen-smaller-than-900px">
     <a *ngFor="let link of links" mat-tab-link [routerLink]="link.link" routerLinkActive="mat-tab-link-active"
       #rla="routerLinkActive" [active]="rla.isActive" [routerLinkActiveOptions]="{exact: link.exact}">
       {{link.name}}
     </a>
-    <a mat-tab-link>購買票卷</a>
+    <a mat-tab-link class="highlight-tab-link">購買票卷</a>
   </nav>
 </mat-toolbar>
 
@@ -29,7 +31,7 @@
       <router-outlet />
     </main>
     <footer>
-      <div id="footer-container" class="max-width">
+      <div class="footer-container max-width">
         <img src="./assets/df24-footer-logo.png" style="height: 30px;">
         <p class="footer-box-title">跟隨我們</p>
         <div class="footer-button-group">

diff --git a/src/app/schedule/schedule-dialog.css b/src/app/schedule/schedule-dialog.css
@@ -9,11 +9,20 @@ mat-dialog-content p {
     color: #717171;
 }
 
+ul.speaker-list a.speaker-avatar-link {
+    height: 60px;
+}
+
 ul.speaker-list img {
     width: 60px;
     height: 60px;
 }
 
 ul.speaker-list p {
     margin: 10px;
+}
+
+.speaker-name{
+    color: var(--black-02);
+    font-weight: bold;
 }
diff --git a/src/app/schedule/schedule.component.css b/src/app/schedule/schedule.component.css
@@ -25,7 +25,7 @@
 }
 
 .schedule-time {
-    color: var(--halftone-red);
+    color: var(--blue-500);
     font-size: 1.3rem;
     margin: 20px 0px 5px;
     letter-spacing: 3px;
@@ -54,13 +54,16 @@ ul.speaker-list li {
 
 ul.speaker-list a.speaker-avatar-link {
     margin-right: 10px;
+    display: block;
+    height: 40px;
 }
 
 ul.speaker-list img {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     transition: box-shadow 750ms var(--default-transition-timing-function);
+    background-color: var(--pastel-green);
 }
 
 ul.speaker-list img:hover {