mirror of
https://github.com/offen/website.git
synced 2024-11-22 09:00:28 +01:00
more about cards
This commit is contained in:
parent
b6970f306d
commit
c26ce8eb44
@ -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>
|
||||
<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">
|
||||
<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>
|
||||
|
||||
160
styles/index.css
160
styles/index.css
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user