Skip to content

Commit 73150f7

Browse files
Biswas-SamratBiswas-Samrat
committed
UI: Replace GitHub ribbon with icon and fix overlap on Overview page #437 
1 parent ed15792 commit 73150f7

4 files changed

Lines changed: 37 additions & 32 deletions

File tree

‎src/app/app.component.css‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,19 @@
4040
color: #ddd;
4141
}
4242

43-
.github-fork-ribbon:before {
44-
background-color: #333;
43+
.github-button img {
44+
margin-right: 20px;
45+
height: 35px;
46+
width: auto;
47+
transition: transform 0.2s;
48+
}
49+
50+
.github-button:hover img {
51+
transform: scale(1.1);
52+
}
53+
54+
:host-context(.dark-theme) .github-button img {
55+
filter: invert(1);
4556
}
4657

4758
@media only screen and (max-width: 750px) {

‎src/app/app.component.html‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -16,15 +16,11 @@
1616
<div class="tag-subtitle">{{ subtitle }}</div>
1717
</div>
1818
<div class="dummy"></div>
19-
<a
20-
target="_blank"
21-
class="github-fork-ribbon"
22-
href="https://github.com/devsecopsmaturitymodel/DevSecOps-MaturityModel"
23-
data-ribbon="Fork me on GitHub"
24-
title="Fork me on GitHub"
25-
>Fork me on GitHub</a
26-
>
19+
<a target="_blank" class="github-button" href="https://github.com/devsecopsmaturitymodel/DevSecOps-MaturityModel"
20+
data-ribbon="Fork me on GitHub" title="Fork me on GitHub">
21+
<img src="assets/images/github.png" alt="Fork me on GitHub" />
22+
</a>
2723
</div>
2824
<mat-divider></mat-divider>
2925
<router-outlet></router-outlet>
30-
</mat-drawer-container>
26+
</mat-drawer-container>

‎src/assets/images/github.png‎

6.24 KB
Loading

‎src/index.html‎

Lines changed: 19 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,21 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8" />
5-
<title>DSOMM</title>
6-
<base href="/" />
7-
<meta name="viewport" content="width=device-width, initial-scale=1" />
8-
<link rel="icon" type="image/x-icon" href="favicon.ico" />
9-
<link rel="preconnect" href="https://fonts.gstatic.com" />
10-
<link
11-
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"
12-
rel="stylesheet" />
13-
<link
14-
href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined"
15-
rel="stylesheet" />
16-
<link
17-
rel="stylesheet"
18-
href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.3/gh-fork-ribbon.min.css" />
19-
</head>
20-
<body>
21-
<app-root></app-root>
22-
</body>
23-
</html>
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<title>DSOMM</title>
7+
<base href="/" />
8+
<meta name="viewport" content="width=device-width, initial-scale=1" />
9+
<link rel="icon" type="image/x-icon" href="favicon.ico" />
10+
<link rel="preconnect" href="https://fonts.gstatic.com" />
11+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet" />
12+
<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet" />
13+
<!-- <link rel="stylesheet"
14+
href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.3/gh-fork-ribbon.min.css" /> -->
15+
</head>
16+
17+
<body>
18+
<app-root></app-root>
19+
</body>
20+
21+
</html>

0 commit comments

Comments
 (0)