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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="feature">
|
<div class="feature">
|
||||||
<div class="container-full">
|
<div class="container-full">
|
||||||
|
|
||||||
<div class="card-deck">
|
<div class="card-deck">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-body">
|
<div class="card-gfx">
|
||||||
<div class="cardtext">
|
<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.
|
Feature Text 1 - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-body">
|
<div class="card-gfx">
|
||||||
<div class="cardtext">
|
<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.
|
Feature Text 2 - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-body">
|
<div class="card-gfx">
|
||||||
<div class="cardtext">
|
<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.
|
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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="cta-top">
|
<div class="cta-top">
|
||||||
<div class="container-full">
|
<div class="container-full">
|
||||||
CTA TOP
|
CTA TOP
|
||||||
@ -136,15 +139,57 @@
|
|||||||
|
|
||||||
<div class="cta-bottom">
|
<div class="cta-bottom">
|
||||||
<div class="container-full">
|
<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>
|
</div>
|
||||||
|
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
<div class="container-full">
|
<div class="footer-card-deck">
|
||||||
<a href="/" title="offen home page" alt="offen home page">
|
<div class="footer-card">
|
||||||
<img src="/theme/images/offen-logo-letters-only-grey.svg" alt="offen logo" width="86" height="38">
|
<a href="/" title="offen home page" alt="offen home page">
|
||||||
</a>
|
<img src="/theme/images/offen-logo-letters-only-grey.svg" alt="offen logo" width="86" height="38">
|
||||||
</div>
|
</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>
|
</div>
|
||||||
|
|
||||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
|
<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 {
|
.feature {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 400px;
|
|
||||||
background-color: var(--grey-bright);
|
background-color: var(--grey-bright);
|
||||||
}
|
}
|
||||||
.cta-top {
|
.cta-top {
|
||||||
@ -61,33 +60,122 @@ LAYOUT
|
|||||||
}
|
}
|
||||||
.cta-bottom {
|
.cta-bottom {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 200px;
|
|
||||||
background-color: var(--yellow-mid);
|
background-color: var(--yellow-mid);
|
||||||
}
|
}
|
||||||
.footer {
|
.footer {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 240px;
|
min-height: 300px;
|
||||||
color: var(--grey-mid);
|
color: var(--grey-mid);
|
||||||
background-color: var(--black-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 */
|
/* Desktop Styles */
|
||||||
@media only screen and (min-width: 961px) {
|
@media only screen and (min-width: 961px) {
|
||||||
.container-reader {
|
.container-reader {
|
||||||
width: 600px;
|
width: 600px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 40px 20px 80px 20px;
|
padding: 60px 20px 120px 20px;
|
||||||
}
|
}
|
||||||
.container-full {
|
.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 {
|
#nav-toggle.active span:after {
|
||||||
transform: rotate(-45deg);
|
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