Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-18 08:20:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(demo): improve dashboard and ui features pages

Browse source
This commit is contained in:
KostyaDanovsky 2017-07-20 18:13:11 +03:00
parent 8127f98f3c
commit b10e5e9ae5
20 changed files with 158 additions and 158 deletions
Download patch file Download diff file Expand all files Collapse all files

50
src/app/@theme/components/header/header.component.scss
View file

@ -1,52 +1,34 @@
@import '../../styles/variables'; @import '../../styles/variables';
@include nga-install-component() { @include nga-install-component() {
width: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
width: 100%;
div { .left-container {
display: flex; display: flex;
align-items: center; align-items: center;
& > * { .navigation {
height: 100%; padding-right: nga-theme(padding);
display: flex;
align-items: center;
}
}
.left {
> * {
padding: 0 1.25rem;
border-right: 1px solid nga-theme(separator);
&:first-child {
padding-left: 0;
}
&:last-child {
border: none;
}
}
.theme-buttons button {
margin-left: 10px;
}
.control-icon.ion-navicon {
font-size: 2.5rem; font-size: 2.5rem;
} }
.logo { .logo {
font-size: 1.7rem; padding: 0 nga-theme(padding);
font-size: 1.75rem;
font-weight: nga-theme(font-weight-bolder); font-weight: nga-theme(font-weight-bolder);
text-decoration: none; border-left: 1px solid nga-theme(separator);
transition: all 0.2s ease;
cursor: pointer;
a { span {
font-weight: normal; font-weight: nga-theme(font-weight-normal);
}
}
.theme-buttons {
margin-left: 3rem;
button {
margin-right: 1rem;
} }
} }
} }

6
src/app/@theme/components/header/header.component.ts
View file

@ -8,9 +8,9 @@ import { UserService } from '../../../@core/data/users.service';
selector: 'ngx-header', selector: 'ngx-header',
styleUrls: ['./header.component.scss'], styleUrls: ['./header.component.scss'],
template: ` template: `
<div class="left"> <div class="left-container">
<a (click)="toggleSidebar()" href="#"><i class="control-icon ion ion-navicon"></i></a> <a (click)="toggleSidebar()" href="#" class="navigation"><i class="ion-navicon"></i></a>
<span class="logo" (click)="goToHome()">NgX&nbsp;<a>Admin</a></span> <div class="logo" (click)="goToHome()">NgX&nbsp;<span>Admin</span></div>
<div class="theme-buttons"> <div class="theme-buttons">
<button class="btn btn-hero-primary" (click)="selectCosmicTheme()">Cosmic</button> <button class="btn btn-hero-primary" (click)="selectCosmicTheme()">Cosmic</button>
<button class="btn btn-hero-warning" (click)="selectLightTheme()">Light</button> <button class="btn btn-hero-warning" (click)="selectLightTheme()">Light</button>

14
src/app/@theme/styles/global.scss
View file

@ -3,21 +3,7 @@
} }
.nga-theme-cosmic { .nga-theme-cosmic {
// Styles for cards without separator
nga-card nga-card-header + nga-card-body {
padding-top: 0;
}
nga-card nga-card-body + nga-card-footer {
padding-top: 0;
}
// Styles for modals without separator
.modal-content .modal-header + .modal-body {
padding-top: 0;
}
.modal-content .modal-body + .modal-footer {
padding-top: 0;
}
} }
//global styles for the whole application //global styles for the whole application

4
src/app/pages/dashboard/dashboard.component.html
View file

@ -46,7 +46,7 @@
<div class="row"> <div class="row">
<div class="col-lg-3"> <div class="col-lg-3">
<nga-card size="xsmall"> <nga-card size="xsmall" class="solar-card">
<nga-card-header>Solar Energy Consumption</nga-card-header> <nga-card-header>Solar Energy Consumption</nga-card-header>
<nga-card-body> <nga-card-body>
<ngx-solar [chartValue]="72"></ngx-solar> <ngx-solar [chartValue]="72"></ngx-solar>
@ -57,7 +57,7 @@
</div> </div>
<div class="col-lg-3"> <div class="col-lg-3">
<nga-card size="xsmall"> <nga-card size="xsmall" class="traffic-card">
<nga-card-header>Traffic Consumption</nga-card-header> <nga-card-header>Traffic Consumption</nga-card-header>
<nga-card-body class="p-0"> <nga-card-body class="p-0">
<ngx-traffic></ngx-traffic> <ngx-traffic></ngx-traffic>

13
src/app/pages/dashboard/dashboard.component.scss
View file

@ -1,5 +1,18 @@
@import '../../@theme/styles/variables'; @import '../../@theme/styles/variables';
@include nga-install-component() { @include nga-install-component() {
.solar-card nga-card-header {
border: none;
padding-bottom: 0;
}
.traffic-card {
nga-card-header {
border: none;
}
nga-card-body {
overflow: hidden;
}
}
} }

4
src/app/pages/dashboard/electricity/electricity.component.scss
View file

@ -39,13 +39,11 @@
ul { ul {
align-items: center; align-items: center;
padding: 1rem; padding: 1rem;
border-top: 1px solid nga-theme(separator);
border-bottom: 1px solid nga-theme(separator);
} }
ul li a { ul li a {
font-weight: nga-theme(font-weight-bolder); font-weight: nga-theme(font-weight-bolder);
padding: 0.5rem 1rem 0.75rem; padding: 0.75rem 1rem;
} }
ul li.active { ul li.active {

4
src/app/pages/dashboard/rooms/room-selector/room-selector.component.html
View file

@ -75,10 +75,10 @@
</g> </g>
<g [attr.id]="room.id" [class.selected-room]="selectedRoom == room.id" *ngFor="let room of sortedRooms"> <g [attr.id]="room.id" [class.selected-room]="selectedRoom == room.id" *ngFor="let room of sortedRooms">
<path class="room-bg" (click)="roomSelected(room.id)" [attr.d]="room.area.d" /> <path class="room-bg" (click)="selectRoom(room.id)" [attr.d]="room.area.d" />
<path class="room-border" [attr.d]="room.border.d" /> <path class="room-border" [attr.d]="room.border.d" />
<path class="room-border room-border-glow" [attr.d]="room.border.d" /> <path class="room-border room-border-glow" [attr.d]="room.border.d" />
<text class="room-text" (click)="roomSelected(room.id)" text-anchor="middle" <text class="room-text" (click)="selectRoom(room.id)" text-anchor="middle"
[attr.x]="room.name.x" [attr.y]="room.name.y">{{room.name.text}}</text> [attr.x]="room.name.x" [attr.y]="room.name.y">{{room.name.text}}</text>
</g> </g>
</svg> </svg>

4
src/app/pages/dashboard/rooms/room-selector/room-selector.component.ts
View file

@ -56,7 +56,7 @@ export class RoomSelectorComponent {
}; };
constructor() { constructor() {
this.sortRooms(); this.selectRoom('2');
} }
private sortRooms() { private sortRooms() {
@ -71,7 +71,7 @@ export class RoomSelectorComponent {
}); });
} }
roomSelected(roomNumber) { selectRoom(roomNumber) {
this.selectedRoom = roomNumber; this.selectedRoom = roomNumber;
this.sortRooms(); this.sortRooms();
} }

21
src/app/pages/dashboard/security-cameras/security-cameras.component.html
View file

@ -19,23 +19,26 @@
</div> </div>
</div> </div>
<div class="cameras" *ngIf="!isSingleView"> <div class="cameras" *ngIf="!isSingleView">
<div class="camera" *ngFor="let c of cameras" [style.background-image]="'url(' + c.source + ')'" (click)="selectCamera(c)"> <div class="camera" *ngFor="let camera of cameras" [style.background-image]="'url(' + camera.source + ')'"
<span>{{ c.title }}</span> (click)="selectCamera(camera)">
<span>{{ camera.title }}</span>
</div> </div>
</div> </div>
</nga-card-body> </nga-card-body>
<nga-card-footer> <nga-card-footer>
<nga-actions size="medium"> <nga-actions size="medium" fullWidth>
<nga-action icon="ion-navicon"></nga-action>
<nga-action> <nga-action>
<nga-search type="rotate-layout"></nga-search> <i class="ion-ios-pause-outline"></i><span>Pause</span>
</nga-action> </nga-action>
<nga-action icon="ion-ios-email-outline"></nga-action>
<nga-action disabled icon="ion-ios-bell-outline"></nga-action>
<nga-action> <nga-action>
<nga-user [menu]="userMenu" name="Han Solo"></nga-user> <i class="ion-navicon"></i><span>Log View</span>
</nga-action>
<nga-action>
<i class="ion-ios-search"></i><span>Search</span>
</nga-action>
<nga-action>
<i class="ion-ios-gear-outline"></i><span>Setup</span>
</nga-action> </nga-action>
<nga-action icon="ion-ios-gear-outline"></nga-action>
</nga-actions> </nga-actions>
</nga-card-footer> </nga-card-footer>
</nga-card> </nga-card>

61
src/app/pages/dashboard/security-cameras/security-cameras.component.scss
View file

@ -1,14 +1,18 @@
@import '../../../@theme/styles/variables'; @import '../../../@theme/styles/variables';
@include nga-install-component() { @include nga-install-component() {
nga-card { nga-card-header {
nga-card-header { padding: 0;
padding: 0; border: none;
} }
nga-card-body { nga-card-body {
padding: 0; padding: 0;
} }
nga-card-footer {
padding: 1rem 0;
border: none;
} }
.cameras-card-header { .cameras-card-header {
@ -32,26 +36,34 @@
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
color: nga-theme(color-fg); color: nga-theme(color-fg);
border-left: 1px solid #342e73; }
a:first-child {
border-left: 1px solid nga-theme(separator);
}
a:last-child {
border-top-right-radius: nga-theme(card-border-radius);
} }
a.active { a.active {
background-color: #342e73; background-color: nga-theme(color-bg-active);
color: #00d990; color: nga-theme(color-fg-highlight);
text-shadow: 0 4px 10px rgba(33, 7, 77, 0.4), 0 0 12px rgba(0, 217, 144, 0.4); text-shadow: 0 0 12px rgba(nga-theme(color-fg-highlight), 0.4);
border: none;
} }
} }
.cameras { .cameras {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
height: 100%;
.camera { .camera {
position: relative; position: relative;
background-position: center; background-position: center;
background-size: cover; background-size: cover;
// TODO: Use calculated height height: 50%;
height: 278px;
width: 50%; width: 50%;
span { span {
@ -71,7 +83,7 @@
content: ''; content: '';
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 278px; height: 100%;
opacity: 0.2; opacity: 0.2;
transition: 0.1s; transition: 0.1s;
} }
@ -83,14 +95,27 @@
.cameras.single-view { .cameras.single-view {
.camera { .camera {
// TODO: Use calculated height height: 100%;
height: 556px;
width: 100%; width: 100%;
&::before { &::before {
// TODO: Use calculated height height: 100%;
height: 556px;
} }
} }
} }
nga-action {
i {
color: nga-theme(color-fg);
font-size: 2.5rem;
margin-right: 1rem;
}
span {
font-family: nga-theme(font-family-secondary);
font-weight: nga-theme(font-weight-bold);
color: nga-theme(color-fg-heading);
text-transform: uppercase;
}
}
} }

6
src/app/pages/dashboard/solar/solar.component.scss
View file

@ -4,12 +4,6 @@
display: flex; display: flex;
height: 100%; height: 100%;
width: 100%;
ngx-echarts-pie, ngx-echarts-bar, ngx-echarts-line {
display: block;
height: 100%;
}
.echart { .echart {
flex: 1; flex: 1;

38
src/app/pages/dashboard/team/team.component.html
View file

@ -1,24 +1,24 @@
<nga-card size="medium"> <nga-card size="medium">
<nga-card-body> <div class="team-photo">
<div class="team-photo"> <a href="mailto:contact@akveo.com">
<a href="mailto:contact@akveo.com"> <button type="button" class="btn btn-success btn-icon team-link">
<button type="button" class="btn btn-success btn-icon team-link"> <i class="ion-paper-airplane"></i>
<i class="ion-paper-airplane"></i> </button>
</button> </a>
</a> </div>
<div class="team-info">
<div class="team-title">
<h2>Akveo Team</h2>
</div> </div>
<div class="team-info"> <div class="team-subtitle">Design & Development</div>
<div class="team-title"> <div class="team-bio">
<h2>Akveo Team</h2> We're small team of fullstack software experts. We're crazy about creation of modern and secure software. We help to make
</div> your product amazing.
<div class="team-subtitle">Design & Development</div>
<div class="team-bio">
We're small team of fullstack software experts. We're crazy about creation of modern and secure software. We help to make
your product amazing.
</div>
</div> </div>
</nga-card-body> </div>
<nga-card-footer>
<div class="links">
<a href="https://www.akveo.com" target="_blank"> <a href="https://www.akveo.com" target="_blank">
<i class="ion-ios-world-outline"></i> <i class="ion-ios-world-outline"></i>
</a> </a>
@ -31,5 +31,5 @@
<a href="https://github.com/akveo" target="_blank"> <a href="https://github.com/akveo" target="_blank">
<i class="ion-social-github"></i> <i class="ion-social-github"></i>
</a> </a>
</nga-card-footer> </div>
</nga-card> </nga-card>

29
src/app/pages/dashboard/team/team.component.scss
View file

@ -1,32 +1,31 @@
@import '../../../@theme/styles/variables'; @import '../../../@theme/styles/variables';
@import '~@akveo/nga-theme/styles/global/bootstrap/hero-buttons';
@include nga-install-component() { @include nga-install-component() {
.team-photo { .team-photo {
background-image: url('./~/assets/images/team.jpg'); background-image: url('~/assets/images/team.png');
background-position: center; background-position: center;
background-size: cover; background-size: cover;
// TODO: Use calculated height
height: 200px;
position: relative; position: relative;
border-top-left-radius: nga-theme(card-border-radius); border-top-left-radius: nga-theme(card-border-radius);
border-top-right-radius: nga-theme(card-border-radius); border-top-right-radius: nga-theme(card-border-radius);
flex: 1;
max-height: 50%;
.team-link { .team-link {
border-radius: 50%;
height: 60px;
width: 60px;
position: absolute; position: absolute;
height: 4rem;
width: 4rem;
bottom: -2rem; bottom: -2rem;
right: 1rem; right: 1rem;
box-shadow: btn-hero-shadow(); border-radius: 50%;
box-shadow: 0 4px 10px 0 rgba(nga-theme(layout-bg), 0.4), 0 0 12px 0 rgba(nga-theme(color-fg-highlight), 0.2);
} }
} }
.team-info { .team-info {
padding: 2rem 1.5rem; padding: 1.5rem 1.5rem 0;
padding-bottom: 0;
.team-title { .team-title {
color: nga-theme(color-fg-heading); color: nga-theme(color-fg-heading);
@ -50,21 +49,17 @@
} }
} }
nga-card > nga-card-body { .links {
padding: 0;
height: 100%;
}
nga-card > nga-card-footer {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
padding: 1rem 0;
a { a {
text-decoration: none; text-decoration: none;
color: nga-theme(color-fg); color: nga-theme(color-fg);
i { i {
font-size: 2rem; font-size: 1.75rem;
} }
} }
} }

5
src/app/pages/dashboard/traffic/traffic.component.scss
View file

@ -7,8 +7,9 @@
height: 100%; height: 100%;
} }
canvas { /deep/ canvas {
border-radius: nga-theme(card-border-radius); border-bottom-left-radius: nga-theme(card-border-radius);
border-bottom-right-radius: nga-theme(card-border-radius);
} }
.echart { .echart {

5
src/app/pages/ui-features/icons/icons.component.scss
View file

@ -7,12 +7,11 @@
} }
:host { :host {
nga-card-header, nga-card-body { nga-card-body {
padding-bottom: 0; padding: 0;
} }
nga-card-footer { nga-card-footer {
text-align: right; text-align: right;
padding-top: 0;
} }
} }

8
src/app/pages/ui-features/search-fields/search-fields.component.html
View file

@ -7,7 +7,6 @@
<nga-card-body> <nga-card-body>
<nga-search type="simple-search" tag="simple-search"></nga-search> <nga-search type="simple-search" tag="simple-search"></nga-search>
</nga-card-body> </nga-card-body>
<nga-card-footer></nga-card-footer>
</nga-card> </nga-card>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
@ -18,7 +17,6 @@
<nga-card-body> <nga-card-body>
<nga-search type="rotate-layout" tag="rotate-layout"></nga-search> <nga-search type="rotate-layout" tag="rotate-layout"></nga-search>
</nga-card-body> </nga-card-body>
<nga-card-footer></nga-card-footer>
</nga-card> </nga-card>
</div> </div>
</div> </div>
@ -31,7 +29,6 @@
<nga-card-body> <nga-card-body>
<nga-search type="modal-zoomin" tag="modal-zoomin"></nga-search> <nga-search type="modal-zoomin" tag="modal-zoomin"></nga-search>
</nga-card-body> </nga-card-body>
<nga-card-footer></nga-card-footer>
</nga-card> </nga-card>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
@ -42,7 +39,6 @@
<nga-card-body> <nga-card-body>
<nga-search type="modal-move" tag="modal-move"></nga-search> <nga-search type="modal-move" tag="modal-move"></nga-search>
</nga-card-body> </nga-card-body>
<nga-card-footer></nga-card-footer>
</nga-card> </nga-card>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
@ -53,7 +49,6 @@
<nga-card-body> <nga-card-body>
<nga-search type="modal-drop" tag="modal-drop"></nga-search> <nga-search type="modal-drop" tag="modal-drop"></nga-search>
</nga-card-body> </nga-card-body>
<nga-card-footer></nga-card-footer>
</nga-card> </nga-card>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
@ -64,7 +59,6 @@
<nga-card-body> <nga-card-body>
<nga-search type="modal-half" tag="modal-half"></nga-search> <nga-search type="modal-half" tag="modal-half"></nga-search>
</nga-card-body> </nga-card-body>
<nga-card-footer></nga-card-footer>
</nga-card> </nga-card>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
@ -75,7 +69,6 @@
<nga-card-body> <nga-card-body>
<nga-search type="curtain" tag="curtain"></nga-search> <nga-search type="curtain" tag="curtain"></nga-search>
</nga-card-body> </nga-card-body>
<nga-card-footer></nga-card-footer>
</nga-card> </nga-card>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
@ -86,7 +79,6 @@
<nga-card-body> <nga-card-body>
<nga-search type="column-curtain" tag="column-curtain"></nga-search> <nga-search type="column-curtain" tag="column-curtain"></nga-search>
</nga-card-body> </nga-card-body>
<nga-card-footer></nga-card-footer>
</nga-card> </nga-card>
</div> </div>
</div> </div>

23
src/app/pages/ui-features/typography/typography.component.html
View file

@ -117,8 +117,7 @@
<p class="text-indent"> <p class="text-indent">
Far far away, behind the word mountains, far from the countries <strong>Vokalia</strong> and <strong>Consonantia</strong>, Far far away, behind the word mountains, far from the countries <strong>Vokalia</strong> and <strong>Consonantia</strong>,
there live the blind texts. there live the blind texts.
Separated they live in <strong>Bookmarksgrove</strong> Separated they live in <strong>Bookmarksgrove</strong>.
right at the coast of the Semantics, a large language ocean.
</p> </p>
<p class="text-indent"> <p class="text-indent">
A small <strong>river named Duden</strong> flows by their place and supplies it with the A small <strong>river named Duden</strong> flows by their place and supplies it with the
@ -140,14 +139,14 @@
</nga-card-header> </nga-card-header>
<nga-card-body> <nga-card-body>
<blockquote class="blockquote"> <blockquote class="blockquote">
<p class="mb-0">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove.</p> <p class="mb-0">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia.
</blockquote> </blockquote>
<blockquote class="blockquote"> <blockquote class="blockquote">
<p class="mb-0">Far far away, behind the word mountains, far from the countries.</p> <p class="mb-0">Far far away, behind the word mountains, far from the countries.</p>
<footer class="blockquote-footer">Vladimir Lugovsky</footer> <footer class="blockquote-footer">Vladimir Lugovsky</footer>
</blockquote> </blockquote>
<blockquote class="blockquote-reverse"> <blockquote class="blockquote-reverse">
<p class="mb-0">Far far away, behind the word mountains, far from the countries.</p> <p class="mb-0">Far far away, behind the word mountains.</p>
<footer class="blockquote-footer">Vladimir Lugovsky</footer> <footer class="blockquote-footer">Vladimir Lugovsky</footer>
</blockquote> </blockquote>
</nga-card-body> </nga-card-body>
@ -164,56 +163,56 @@
<div class="colors"> <div class="colors">
<div class="item text-heading"> <div class="item text-heading">
<div class="color bg-heading"></div> <div class="color bg-heading"></div>
<div class="color-name"> <div>
<h5 class="text-heading">Heading Text</h5> <h5 class="text-heading">Heading Text</h5>
Far far away, behind the your awesomeness. Far far away, behind the your awesomeness.
</div> </div>
</div> </div>
<div class="item text-body"> <div class="item text-body">
<div class="color bg-body"></div> <div class="color bg-body"></div>
<div class="color-name"> <div>
<h5 class="text-body">Body Text</h5> <h5 class="text-body">Body Text</h5>
Far far away, behind the your awesomeness. Far far away, behind the your awesomeness.
</div> </div>
</div> </div>
<div class="item text-hint"> <div class="item text-hint">
<div class="color bg-hint"></div> <div class="color bg-hint"></div>
<div class="color-name"> <div>
<h5 class="text-hint">Hint Text</h5> <h5 class="text-hint">Hint Text</h5>
Far far away, behind the your awesomeness. Far far away, behind the your awesomeness.
</div> </div>
</div> </div>
<div class="item text-primary"> <div class="item text-primary">
<div class="color bg-primary"></div> <div class="color bg-primary"></div>
<div class="color-name"> <div>
<h5 class="text-primary">Primary Text</h5> <h5 class="text-primary">Primary Text</h5>
Far far away, behind the your awesomeness. Far far away, behind the your awesomeness.
</div> </div>
</div> </div>
<div class="item text-success"> <div class="item text-success">
<div class="color bg-success"></div> <div class="color bg-success"></div>
<div class="color-name"> <div>
<h5 class="text-success">Link/Hightlight Text</h5> <h5 class="text-success">Link/Hightlight Text</h5>
Far far away, behind the your awesomeness. Far far away, behind the your awesomeness.
</div> </div>
</div> </div>
<div class="item text-info"> <div class="item text-info">
<div class="color bg-info"></div> <div class="color bg-info"></div>
<div class="color-name"> <div>
<h5 class="text-info">Info Text</h5> <h5 class="text-info">Info Text</h5>
Far far away, behind the your awesomeness. Far far away, behind the your awesomeness.
</div> </div>
</div> </div>
<div class="item text-warning"> <div class="item text-warning">
<div class="color bg-warning"></div> <div class="color bg-warning"></div>
<div class="color-name"> <div>
<h5 class="text-warning">Warning Text</h5> <h5 class="text-warning">Warning Text</h5>
Far far away, behind the your awesomeness. Far far away, behind the your awesomeness.
</div> </div>
</div> </div>
<div class="item text-danger"> <div class="item text-danger">
<div class="color bg-danger"></div> <div class="color bg-danger"></div>
<div class="color-name"> <div>
<h5 class="text-danger">Danger Text</h5> <h5 class="text-danger">Danger Text</h5>
Far far away, behind the your awesomeness. Far far away, behind the your awesomeness.
</div> </div>

21
src/app/pages/ui-features/typography/typography.component.scss
View file

@ -14,22 +14,31 @@
} }
.font-row { .font-row {
margin-bottom: 3rem; &:first-child {
margin-bottom: 2rem;
}
.header { .header {
align-items: baseline; align-items: baseline;
} }
p {
margin: 0;
}
} }
.header { .header {
display: flex; display: flex;
align-items: center; align-items: center;
padding-bottom: 1.125rem; padding-bottom: 1rem;
margin-bottom: 1.125rem; margin-bottom: 1rem;
border-bottom: 1px solid rgba(nga-theme(color-fg), 0.1); border-bottom: 1px solid nga-theme(separator);
color: nga-theme(color-fg-heading); color: nga-theme(color-fg-heading);
&:last-child { &:last-child {
border-bottom: none; border-bottom: none;
padding: 0;
margin: 0;
} }
div:first-child { div:first-child {
@ -83,5 +92,9 @@
border-bottom-left-radius: 1rem; border-bottom-left-radius: 1rem;
margin-right: 1rem; margin-right: 1rem;
} }
h1, h2, h3, h4, h5, h6 {
margin-bottom: 0.25rem;
}
} }
} }

BIN
src/assets/images/team.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 126 KiB

BIN
src/assets/images/team.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 610 KiB