commit bfb1fd4e813964316ff9c145493f0455ee58fffa
parent 2789f1726e66aa0eecf27a8691ce8e5ecd16bb39
Author: MTRNord <mtrnord1@gmail.com>
Date: Fri, 9 Feb 2018 23:43:20 +0100
Simplify Css and replace Header Image
Signed-off-by: MTRNord <mtrnord1@gmail.com>
Diffstat:
6 files changed, 138 insertions(+), 284 deletions(-)
diff --git a/src/app/main/main.component.html b/src/app/main/main.component.html
@@ -38,13 +38,7 @@
<main class="text-center py-5">
<div class="container">
- <div class="row">
- <div class="col-md-12">
-
- <p align="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-
- </div>
- </div>
+ <p align="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</main>
diff --git a/src/app/main/main.component.scss b/src/app/main/main.component.scss
@@ -1,15 +0,0 @@
-.view {
- background: url("https://mdbootstrap.com/img/Photos/Others/img (40).jpg")no-repeat center center;
- background-size: cover;
-}
-.navbar {
- background-color: transparent;
-}
-.top-nav-collapse {
- background-color: #4285F4;
-}
-@media only screen and (max-width: 768px) {
- .navbar {
- background-color: #4285F4;
- }
-}
diff --git a/src/app/paper/paper.component.html b/src/app/paper/paper.component.html
@@ -60,10 +60,10 @@
<!-- Card footer -->
<div class="card-data">
<ul>
- <li><i class="fa fa-clock-o"> </i>{{item.createdAt}}</li>
- <li><i class="fa fa-comments-o"> </i>{{item.replies}}</li>
- <li><i class="fa fa-heart"> </i>{{item.favs}}</li>
- <li><i class="fa fa-retweet"> </i>{{item.retweets}}</li>
+ <li><i class="fa fa-clock-o"> </i>{{item.createdAt.toLocaleString()}}</li>
+ <li><i class="fa fa-comments-o"> </i>{{item.replies.toLocaleString()}}</li>
+ <li><i class="fa fa-heart"> </i>{{item.favs.toLocaleString()}}</li>
+ <li><i class="fa fa-retweet"> </i>{{item.retweets.toLocaleString()}}</li>
</ul>
</div>
</div>
diff --git a/src/app/paper/paper.component.scss b/src/app/paper/paper.component.scss
@@ -1,129 +0,0 @@
-.view{
- background: url("https://mdbootstrap.com/img/Photos/Others/img (40).jpg")no-repeat center center;
- background-size: cover;
-}
-.navbar {
- background-color: transparent;
-}
-.top-nav-collapse {
- background-color: #4285F4;
-}
-@media only screen and (max-width: 768px) {
- .navbar {
- background-color: #4285F4;
- }
-}
-
-.card {
- overflow: hidden;
-}
-
-.card .card-data {
- background-color: #929fba;
- color: #fff;
- text-align: center;
- height: auto;
- padding: 10px;
-}
-
-.card .card-data ul {
- margin-bottom: 0;
- font-size: .9rem;
-}
-
-.card .card-data ul li {
- display: inline;
-}
-
-.card .card-data ul a {
- color: #fff;
-}
-
-.card .card-data ul a .fa {
- margin-left: 5px;
- margin-right: 3px;
-}
-
-.card.card-cascade {
- width: 100%;
-}
-
-.card-img-top {
- width: 100%;
- height: 20vw;
- object-fit: cover;
-}
-
-.card-img-top img {
- width: 100%;
- height: 18.5vw;
- object-fit: cover;
-}
-
-.card .card-body {
- z-index: 1;
- background-color: white;
-}
-
-.card:not([class*="card-outline-"]) {
- border: 0;
-}
-
-#toast-container > div, .author-box, .badge, .btn, .card-wrapper .back, .card-wrapper .front, .card.card-cascade.wider .card-body, .card:not([class*="card-outline-"]), .chip, .counter, .dropdown-content, .jumbotron, .md-pills .nav-link.active, .modal-dialog.cascading-modal .modal-c-tabs .nav-tabs, .modal-dialog.modal-notify .modal-header, .navbar, .pagination .active .page-link, .pricing-card .price .version, .section-blog-fw img, .side-nav, .social-list, .z-depth-1 {
- box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
-}
-
-.btn-floating:hover, .card-overlay, .card.card-cascade img, .colorful-select .dropdown-content li a:hover, .colorful-select .dropdown-content li span:hover, .comments-list img, .modal-dialog.cascading-modal.modal-avatar .modal-header img, .reply-form img, .testimonial-carousel .testimonial .avatar img, .z-depth-2 {
- box-shadow: 0 8px 17px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);
-}
-
-.card.card-cascade img {
- border-radius: 4px;
-}
-
-.waves-effect {
- position: relative;
- cursor: pointer;
- overflow: hidden;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- -webkit-tap-highlight-color: transparent;
- z-index: 1;
-}
-
-/* The ribbons by https://codepen.io/eode9/pen/twkKm*/
-
-.card-ribbon-bottom.card-ribbon-right, .card-ribbon-top.card-ribbon-left {
- -webkit-transform: rotate(-45deg);
- -ms-transform: rotate(-45deg);
- transform: rotate(-45deg);
-}
-
-.card-ribbon-left {
- left: -70px;
-}
-
-.card-ribbon-top {
- top: 20px;
-}
-
-.card-ribbon:after {
- -webkit-transform: rotate(45deg);
- -ms-transform: rotate(45deg);
- transform: rotate(45deg);
-}
-
-.card-ribbon {
- width: 200px;
- padding: 2px 5px;
- position: absolute;
- text-align: center;
- font-size: 12px;
- z-index: 1;
-}
-
-.card-ribbon.tblue {
- background-color: #1da1f2;
-}
diff --git a/src/app/papers/papers.component.scss b/src/app/papers/papers.component.scss
@@ -1,129 +0,0 @@
-.view{
- background: url("https://mdbootstrap.com/img/Photos/Others/img (40).jpg")no-repeat center center;
- background-size: cover;
-}
-.navbar {
- background-color: transparent;
-}
-.top-nav-collapse {
- background-color: #4285F4;
-}
-@media only screen and (max-width: 768px) {
- .navbar {
- background-color: #4285F4;
- }
-}
-
-.card {
- overflow: hidden;
-}
-
-.card .card-data {
- background-color: #929fba;
- color: #fff;
- text-align: center;
- height: auto;
- padding: 10px;
-}
-
-.card .card-data ul {
- margin-bottom: 0;
- font-size: .9rem;
-}
-
-.card .card-data ul li {
- display: inline;
-}
-
-.card .card-data ul a {
- color: #fff;
-}
-
-.card .card-data ul a .fa {
- margin-left: 5px;
- margin-right: 3px;
-}
-
-.card.card-cascade {
- width: 100%;
-}
-
-.card-img-top {
- width: 100%;
- height: 20vw;
- object-fit: cover;
-}
-
-.card-img-top img {
- width: 100%;
- height: 18.5vw;
- object-fit: cover;
-}
-
-.card .card-body {
- z-index: 1;
- background-color: white;
-}
-
-.card:not([class*="card-outline-"]) {
- border: 0;
-}
-
-#toast-container > div, .author-box, .badge, .btn, .card-wrapper .back, .card-wrapper .front, .card.card-cascade.wider .card-body, .card:not([class*="card-outline-"]), .chip, .counter, .dropdown-content, .jumbotron, .md-pills .nav-link.active, .modal-dialog.cascading-modal .modal-c-tabs .nav-tabs, .modal-dialog.modal-notify .modal-header, .navbar, .pagination .active .page-link, .pricing-card .price .version, .section-blog-fw img, .side-nav, .social-list, .z-depth-1 {
- box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
-}
-
-.btn-floating:hover, .card-overlay, .card.card-cascade img, .colorful-select .dropdown-content li a:hover, .colorful-select .dropdown-content li span:hover, .comments-list img, .modal-dialog.cascading-modal.modal-avatar .modal-header img, .reply-form img, .testimonial-carousel .testimonial .avatar img, .z-depth-2 {
- box-shadow: 0 8px 17px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);
-}
-
-.card.card-cascade img {
- border-radius: 4px;
-}
-
-.waves-effect {
- position: relative;
- cursor: pointer;
- overflow: hidden;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- -webkit-tap-highlight-color: transparent;
- z-index: 1;
-}
-
-/* The ribbons by https://codepen.io/eode9/pen/twkKm*/
-
-.card-ribbon-bottom.card-ribbon-right, .card-ribbon-top.card-ribbon-left {
- -webkit-transform: rotate(-45deg);
- -ms-transform: rotate(-45deg);
- transform: rotate(-45deg);
-}
-
-.card-ribbon-left {
- left: -70px;
-}
-
-.card-ribbon-top {
- top: 20px;
-}
-
-.card-ribbon:after {
- -webkit-transform: rotate(45deg);
- -ms-transform: rotate(45deg);
- transform: rotate(45deg);
-}
-
-.card-ribbon {
- width: 200px;
- padding: 2px 5px;
- position: absolute;
- text-align: center;
- font-size: 12px;
- z-index: 1;
-}
-
-.card-ribbon.tblue {
- background-color: #1da1f2;
-}
diff --git a/src/styles.scss b/src/styles.scss
@@ -1,2 +1,135 @@
/* You can add global styles to this file, and also import other style files */
html { overflow:auto; }
+.navbar.navbar-dark .breadcrumb .nav-item.active > .nav-link, .navbar.navbar-dark .navbar-nav .nav-item.active > .nav-link {
+ border-radius: 5px;
+}
+
+.view{
+ background: url("https://riot.nordgedanken.de/news-newsletter-newspaper-information-158651.jpeg")no-repeat center center;
+ background-size: cover;
+}
+.navbar {
+ background-color: transparent;
+}
+.top-nav-collapse {
+ background-color: #763d8a;
+}
+@media only screen and (max-width: 768px) {
+ .navbar {
+ background-color: #763D8A;
+ }
+}
+
+.card {
+ overflow: hidden;
+}
+
+.card .card-data {
+ background-color: #929fba;
+ color: #fff;
+ text-align: center;
+ height: auto;
+ padding: 10px;
+}
+
+.card .card-data ul {
+ margin-bottom: 0;
+ font-size: .9rem;
+}
+
+.card .card-data ul li {
+ display: inline;
+}
+
+.card .card-data ul a {
+ color: #fff;
+}
+
+.card .card-data ul a .fa {
+ margin-left: 5px;
+ margin-right: 3px;
+}
+
+.card.card-cascade {
+ width: 100%;
+}
+
+.card-img-top {
+ width: 100%;
+ height: 20vw;
+ object-fit: cover;
+}
+
+.card-img-top img {
+ width: 100%;
+ height: 18.5vw;
+ object-fit: cover;
+}
+
+.card .card-body {
+ z-index: 1;
+ background-color: white;
+}
+
+.card:not([class*="card-outline-"]) {
+ border: 0;
+}
+
+#toast-container > div, .author-box, .badge, .btn, .card-wrapper .back, .card-wrapper .front, .card.card-cascade.wider .card-body, .card:not([class*="card-outline-"]), .chip, .counter, .dropdown-content, .jumbotron, .md-pills .nav-link.active, .modal-dialog.cascading-modal .modal-c-tabs .nav-tabs, .modal-dialog.modal-notify .modal-header, .navbar, .pagination .active .page-link, .pricing-card .price .version, .section-blog-fw img, .side-nav, .social-list, .z-depth-1 {
+ box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
+}
+
+.btn-floating:hover, .card-overlay, .card.card-cascade img, .colorful-select .dropdown-content li a:hover, .colorful-select .dropdown-content li span:hover, .comments-list img, .modal-dialog.cascading-modal.modal-avatar .modal-header img, .reply-form img, .testimonial-carousel .testimonial .avatar img, .z-depth-2 {
+ box-shadow: 0 8px 17px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);
+}
+
+.card.card-cascade img {
+ border-radius: 4px;
+}
+
+.waves-effect {
+ position: relative;
+ cursor: pointer;
+ overflow: hidden;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ -webkit-tap-highlight-color: transparent;
+ z-index: 1;
+}
+
+/* The ribbons by https://codepen.io/eode9/pen/twkKm*/
+
+.card-ribbon-bottom.card-ribbon-right, .card-ribbon-top.card-ribbon-left {
+ -webkit-transform: rotate(-45deg);
+ -ms-transform: rotate(-45deg);
+ transform: rotate(-45deg);
+}
+
+.card-ribbon-left {
+ left: -70px;
+}
+
+.card-ribbon-top {
+ top: 20px;
+}
+
+.card-ribbon:after {
+ -webkit-transform: rotate(45deg);
+ -ms-transform: rotate(45deg);
+ transform: rotate(45deg);
+}
+
+.card-ribbon {
+ width: 200px;
+ padding: 2px 5px;
+ position: absolute;
+ text-align: center;
+ font-size: 12px;
+ z-index: 1;
+}
+
+.card-ribbon.tblue {
+ background-color: #1da1f2;
+}
