mirror of
https://github.com/ipdb/website.git
synced 2024-11-13 16:54:50 +01:00
more styled vision & research section
This commit is contained in:
parent
a720d21ae8
commit
9143ad4f0e
@ -9,8 +9,8 @@
|
||||
align-items: center;
|
||||
|
||||
@media ($screen-sm) {
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
padding-top: $spacer * 5;
|
||||
padding-bottom: $spacer * 5;
|
||||
}
|
||||
|
||||
// handling long text, like URLs
|
||||
@ -107,3 +107,19 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section--border {
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: -.1rem;
|
||||
display: block;
|
||||
height: .1rem;
|
||||
background: darken($brand-05, 8%);
|
||||
transform: rotate(-4deg);
|
||||
}
|
||||
}
|
||||
|
@ -7,23 +7,25 @@
|
||||
}
|
||||
}
|
||||
|
||||
.feature {
|
||||
padding-left: 5rem;
|
||||
position: relative;
|
||||
}
|
||||
.section--caretakers {
|
||||
.feature {
|
||||
padding-left: 5rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.feature__image {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
.feature__image {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
.feature__title {
|
||||
font-size: $font-size-h5;
|
||||
margin-bottom: $spacer / 2;
|
||||
.feature__title {
|
||||
font-size: $font-size-h5;
|
||||
margin-bottom: $spacer / 2;
|
||||
}
|
||||
}
|
||||
|
||||
.caretakers-current {
|
||||
@ -37,3 +39,24 @@
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.section--board {
|
||||
.board {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.section--vision {
|
||||
.feature__image {
|
||||
margin: 0;
|
||||
background: $brand-05;
|
||||
padding: $spacer;
|
||||
padding-bottom: 0;
|
||||
border-radius: $border-radius;
|
||||
min-height: 9rem;
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -91,22 +91,30 @@ css: page-foundation
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section section--vision" id="vision">
|
||||
<section class="section section--vision section--border" id="vision">
|
||||
<div class="row">
|
||||
<header class="section__header">
|
||||
<div class="grid grid--full grid-medium--columns grid--center grid--gutters">
|
||||
<div class="grid__col grid__col--4">
|
||||
<div class="grid grid--full grid-medium--columns grid--center grid--gutters">
|
||||
<div class="grid__col grid__col--4">
|
||||
<header class="section__header">
|
||||
<h1 class="section__title">{{ content.vision.title }}</h1>
|
||||
<p class="section__description">{{ content.vision.description }}</p>
|
||||
</div>
|
||||
<div class="grid__col grid__col--2">
|
||||
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
{{ content.vision.text | markdownify }}
|
||||
<div class="grid grid--full grid-medium--columns grid--gutters">
|
||||
<div class="grid__col grid__col--2">
|
||||
<figure class="feature__image">
|
||||
<svg>
|
||||
<use xlink:href="/assets/img/sprite.svg#starbase-towers"></use>
|
||||
</svg>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="grid__col grid__col--4">
|
||||
{{ content.vision.text | markdownify }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
Loading…
Reference in New Issue
Block a user