2
0
mirror of https://github.com/offen/website.git synced 2024-12-23 13:30:20 +01:00

more about cards

This commit is contained in:
Hendrik Niefeld 2019-08-21 12:53:01 +02:00
parent b6970f306d
commit c26ce8eb44
2 changed files with 164 additions and 75 deletions

View File

@ -81,35 +81,38 @@
</div>
</div>
</div>
<div class="feature">
<div class="container-full">
<div class="card-deck">
<div class="card">
<div class="card-body">
<div class="cardtext">
<div class="card-gfx">
<img src="/theme/images/offen-logo-circle-only.svg" width="42" height="46">
</div>
<div class="card-text">
Feature Text 1 - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="cardtext">
<div class="card-gfx">
<img src="/theme/images/offen-logo-circle-only.svg" width="42" height="46">
</div>
<div class="card-text">
Feature Text 2 - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="cardtext">
<div class="card-gfx">
<img src="/theme/images/offen-logo-circle-only.svg" width="42" height="46">
</div>
<div class="card-text">
Feature Text 3 - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
</div>
</div>
</div>
</div>
</div>
</div>
<div class="cta-top">
<div class="container-full">
CTA TOP
@ -136,15 +139,57 @@
<div class="cta-bottom">
<div class="container-full">
CTA BOTTOM
<div class="card-deck">
<div class="card">
<div class="card-text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<div class="btn-wrapper">
<a class="btn btn-color-black" href="{{GITHUB_ORG}}" target="_blank">Get involved</a>
</div>
</div>
</div>
<div class="card">
<div class="card-text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<div class="btn-wrapper">
<a class="btn btn-color-black" href="/status/" target="_blank">Status</a>
</div>
</div>
</div>
<div class="card">
<div class="card-text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<div class="btn-wrapper">
<a class="btn btn-color-black" href="{{PATREON_URL}}" target="_blank">Support Us</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container-full">
<a href="/" title="offen home page" alt="offen home page">
<img src="/theme/images/offen-logo-letters-only-grey.svg" alt="offen logo" width="86" height="38">
</a>
</div>
<div class="footer-card-deck">
<div class="footer-card">
<a href="/" title="offen home page" alt="offen home page">
<img src="/theme/images/offen-logo-letters-only-grey.svg" alt="offen logo" width="86" height="38">
</a>
</div>
<div class="footer-card">
<p>
<a href="#">LINK</a>
</p>
<p>
<a href="#">LINK</a>
</p>
<p>
<a href="#">LINK</a>
</p>
</div>
<div class="footer-card">
August 2019
</div>
</div>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

View File

@ -41,7 +41,6 @@ LAYOUT
}
.feature {
width: 100%;
height: 400px;
background-color: var(--grey-bright);
}
.cta-top {
@ -61,33 +60,122 @@ LAYOUT
}
.cta-bottom {
width: 100%;
height: 200px;
background-color: var(--yellow-mid);
}
.footer {
width: 100%;
height: 240px;
min-height: 300px;
color: var(--grey-mid);
background-color: var(--black-mid);
}
/* Mobile Styles */
@media only screen and (max-width: 960px) {
.container-reader,
.container-full {
padding: 40px 20px 80px 20px;
}
}
/* Desktop Styles */
@media only screen and (min-width: 961px) {
.container-reader {
width: 600px;
margin: 0 auto;
padding: 40px 20px 80px 20px;
padding: 60px 20px 120px 20px;
}
.container-full {
padding: 40px 80px 80px 80px;
padding: 60px 80px 120px 80px;
}
.footer {
padding: 40px 40px 0 40px;
}
}
/* Tablet Styles */
@media only screen and (min-width: 600px) and (max-width: 960px) {
.container-reader,
.container-full {
width: 600px;
margin: 0 auto;
padding: 60px 20px 120px 20px;
}
}
/* Mobile Styles */
@media only screen and (max-width: 960px) {
.container-reader,
.container-full,
.footer {
padding: 60px 20px 120px 20px;
}
}
/* ---------------------------------------------------
CARDS
----------------------------------------------------*/
.card-deck,
.card,
.footer-card-deck {
display: flex;
}
.card {
max-width: 400px;
color: var(--black-mid);
}
.footer-card p {
margin: 0 0 4px 0;
}
.footer-card:nth-child(1),
.footer-card:nth-child(2) {
margin: 0 0 20px 0;
}
/* Mobile Styles */
@media only screen and (max-width: 960px) {
.card-deck,
.card,
.footer-card-deck {
flex-direction: column;
}
.card {
align-self: center;
}
.card:nth-child(2) {
margin: 80px 0 80px 0;
}
.card-gfx,
.card-text,
.footer-card {
text-align: center;
}
.card-gfx {
margin: 0 0 20px 0;
}
}
/* Tablet Styles */
@media only screen and (min-width: 600px) and (max-width: 960px) {
}
/* Desktop Styles */
@media only screen and (min-width: 961px) {
.card-deck,
.card,
.footer-card-deck {
flex-direction: row;
}
.card-deck {
justify-content: space-evenly;
}
.card:nth-child(2) {
margin: 0 40px 0 40px;
}
.card-gfx,
.card-text {
text-align: left;
}
.card-gfx {
margin: 0 20px 0 0;
}
.footer-card-deck {
justify-content: space-between;
}
.footer-card:nth-child(1),
.footer-card:nth-child(2) {
flex-grow: 1;
}
.footer-card:nth-child(3) {
text-align: right;
flex-grow: 10;
}
}
@ -383,47 +471,3 @@ nav ul li ul li a {
#nav-toggle.active span:after {
transform: rotate(-45deg);
}
/* ---------------------------------------------------
CARDS
----------------------------------------------------*/
.card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-clip: border-box;
}
.card-body {
flex: 1 1 auto;
text-align: center;
}
.card-deck {
display: flex;
flex-direction: column;
}
.card-deck .card {
margin: 0 0 15px 0;
}
/* Mobile Styles */
@media only screen and (max-width: 960px) {
}
/* Desktop Styles */
@media only screen and (min-width: 961px) {
/* Card */
.card-deck {
flex-flow: row wrap;
margin: 0 -15px 0 -15px;
}
.card-deck .card {
display: flex;
flex: 1 0 0%;
flex-direction: column;
margin: 0 15px 0 15px;
}
}