feat: add footer

src/app/app.component.scss

@@ -1,14 +0,0 @@
-.github {
- height: 24px;
- line-height: 36px;
- margin: 0 4px 3px 0;
- vertical-align: middle;
- cursor: pointer;
- white-space: nowrap;
- text-align: center;
-
- img {
- width: 24px;
- height: 24px;
- }
-}

src/app/presentation/home/home.component.html

@@ -1,6 +1,6 @@
 <div class="container">
-<!-- <div class='∞'></div>-->
-<!-- <div class="box" style="&#45;&#45;c1:orange;&#45;&#45;c3:purple;&#45;&#45;d:60px;&#45;&#45;s:2px"></div>-->
+ <!-- <div class='∞'></div>-->
+ <!-- <div class="box" style="&#45;&#45;c1:orange;&#45;&#45;c3:purple;&#45;&#45;d:60px;&#45;&#45;s:2px"></div>-->
  <div class="intro markdown">
  <blockquote>
  <h5>DevOps 是一种软件工程文化和实践，旨在统一整合软件开发和软件运维。</h5>
@@ -48,5 +48,12 @@ <h2 class="center">Key Contributors</h2>
  </div>
  </div>
 
- <div class="footer"></div>
+ <div class="footer">
+ <div class="columns">
+ <div class="rows">
+ <div class="cell-title cell">资源</div>
+ <div class="cell"><a href="https:/phodal/do" target="_blank">GitHub</a></div>
+ </div>
+ </div>
+ </div>
 </div>

src/app/presentation/home/home.component.scss

@@ -77,5 +77,34 @@
 }
 
 .footer {
- padding-top: 8em;
+ background: #ff4081;
+ display: flex;
+ color: #fff;
+
+ margin-top: 4em;
+ padding-top: 4em;
+ padding-bottom: 4em;
+
+ .columns {
+ width: 960px;
+ margin: 0 auto;
+
+ .rows {
+ line-height: 1.6em;
+ .cell-title {
+ font-size: 1.2em;
+ font-weight: bold;
+ line-height: 1.6em;
+ }
+ .cell {
+ color: #fff;
+
+ a {
+ padding: 0;
+ color: #fff;
+ line-height: 1.6em;
+ }
+ }
+ }
+ }
 }

src/styles.scss

@@ -87,3 +87,18 @@ body {
 .webcomponents-plugins {
 
 }
+
+.github {
+ height: 24px;
+ line-height: 36px;
+ margin: 0 4px 3px 0;
+ vertical-align: middle;
+ cursor: pointer;
+ white-space: nowrap;
+ text-align: center;
+
+ img {
+ width: 24px;
+ height: 24px;
+ }
+}