Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-21 17:34:25 +04:00
Code Issues Projects Releases Wiki Activity

profile cards

Browse Source
This commit is contained in:
codecalm
2020-01-12 22:42:06 +01:00
parent 429d953ab2
commit c76f1dd184
7 changed files with 37 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
pages/_data/menu.yml
View File

@@ -106,6 +106,9 @@ extra:
blog: blog:
title: Blog cards title: Blog cards
url: blog.html url: blog.html
snippets:
title: Snippets
url: snippets.html
search-results: search-results:
title: Search results title: Search results
url: search-results.html url: search-results.html

5
pages/_includes/cards/profile.html
View File

@@ -1,8 +1,5 @@
<div class="card card-profile"> <div class="card">
<div class="card-header" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[22].file }});"></div>
<div class="card-body text-center"> <div class="card-body text-center">
<img class="card-profile-img" src="{{ site.data.people[4].photo }}">
<h2 class="mb-3">{{ site.data.people[4].first_name }} {{ site.data.people[4].last_name }}</h2> <h2 class="mb-3">{{ site.data.people[4].first_name }} {{ site.data.people[4].last_name }}</h2>
<p class="mb-4"> <p class="mb-4">

1
pages/snippets.html
View File

@@ -2,6 +2,7 @@
title: Snippets title: Snippets
page-title: Snippets page-title: Snippets
page-title-right: date page-title-right: date
menu: extra.snippets
--- ---
<div class="row"> <div class="row">

9
pages/tmp.html
View File

@@ -7,8 +7,13 @@ menu: a.b.c
<div class="col-md-6 col-xl-4"> <div class="col-md-6 col-xl-4">
{% assign person = site.data.people[0] %} {% assign person = site.data.people[0] %}
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-img-top embed-responsive embed-responsive-21by9">
<h3 class="card-title">{{ person.full_name }}</h3> <div class="embed-responsive-item bg-cover" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[8].file }})"></div>
</div>
{% include ui/avatar.html person=person size="xl" class="mt-n5 mx-auto card-avatar" %}
<div class="card-body text-center">
<h2 class="mb-3">{{ person.full_name }}</h2>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aperiam atque autem consectetur dignissimos ea error exercitationem id, maxime minus mollitia nulla quasi quia quisquam sed tempora ut voluptas, voluptatem!</p>
</div> </div>
</div> </div>
{% include cards/user-info.html %} {% include cards/user-info.html %}

11
scss/_variables.scss
View File

@@ -158,8 +158,8 @@ $spacers: (
2: $spacer * .5, 2: $spacer * .5,
3: $spacer, 3: $spacer,
4: $spacer * 1.5, 4: $spacer * 1.5,
5: $spacer * 2, 5: $spacer * 3,
6: $spacer * 3, 6: $spacer * 4.5,
7: $spacer * 6, 7: $spacer * 6,
8: $spacer * 9, 8: $spacer * 9,
9: $spacer * 12, 9: $spacer * 12,
@@ -189,6 +189,13 @@ $container-max-widths: (
xl: 1200px xl: 1200px
) !default; ) !default;
$embed-responsive-aspect-ratios: (
'2by1': (
x: 2,
y: 1
)
) !default;
//alerts //alerts
$alert-link-font-weight: $font-weight-bold !default; $alert-link-font-weight: $font-weight-bold !default;
$alert-bg-level: -8 !default; $alert-bg-level: -8 !default;

24
scss/ui/_cards.scss
View File

@@ -330,23 +330,19 @@ Card chart
height: 3.5rem; height: 3.5rem;
} }
/* /**
Card profile Card avatar
*/ */
.card-profile { .card-avatar {
.card-header { box-shadow: 0 0 0 .5rem $card-bg;
height: 9rem;
background-size: cover;
}
} }
.card-profile-img { /*
max-width: 6rem; Card img top
margin-top: -5rem; */
margin-bottom: 1rem; .card-img-top,
border: 3px solid #ffffff; .card-img-bottom {
border-radius: 100%; border-radius: inherit;
box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
} }
/* /*

6
scss/utils/_background.scss
View File

@@ -7,3 +7,9 @@
color: #fff; color: #fff;
background-color: $light-black; background-color: $light-black;
} }
.bg-cover {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}