Ready feature boxes on main page for vanilla Docsy
Tim Bannister
parent
a0020d3866
commit
c2939d58ec
|
|
@ -437,12 +437,6 @@ $ocean-nodes-h3-margin-bottom: 30px;
|
|||
// video
|
||||
$video-section-height: 200px;
|
||||
|
||||
// features
|
||||
$features-h3-margin-bottom: 20px;
|
||||
$feature-box-div-width: 100%;
|
||||
$feature-box-margin-bottom: 0;
|
||||
$feature-box-div-margin-bottom: 40px;
|
||||
|
||||
// Home-specific
|
||||
|
||||
.td-home {
|
||||
|
|
@ -687,47 +681,58 @@ section#cncf {
|
|||
}
|
||||
|
||||
// Features
|
||||
#features {
|
||||
padding-top: 140px;
|
||||
body.td-home section.features-container {
|
||||
padding: 0; // reset
|
||||
padding-top: 140px; // make room for logo
|
||||
|
||||
background-color: $light-grey;
|
||||
background-image: url(/images/wheel.svg);
|
||||
background-position: center 60px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 60px;
|
||||
}
|
||||
|
||||
.feature-box {
|
||||
//padding: 50px 0
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
clear: both;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
flex-wrap: wrap;
|
||||
padding-bottom: 2em;
|
||||
|
||||
h4 {
|
||||
line-height: normal;
|
||||
margin-bottom: 15px;
|
||||
.k8s-features-heading {
|
||||
color: $primary;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
& > div {
|
||||
background-color: #daeaf9;
|
||||
border-radius: 20px;
|
||||
padding: 25px;
|
||||
}
|
||||
}
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
align-items: stretch;
|
||||
gap: 1.2rem;
|
||||
|
||||
#features {
|
||||
h3 {
|
||||
margin-bottom: $features-h3-margin-bottom;
|
||||
}
|
||||
margin-top: 1.8em;
|
||||
|
||||
.feature-box {
|
||||
margin-bottom: $feature-box-margin-bottom;
|
||||
max-width: clamp(75em, 25cm, 90vw);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
& > div {
|
||||
width: $feature-box-div-width;
|
||||
margin-bottom: $feature-box-div-margin-bottom;
|
||||
background: initial;
|
||||
|
||||
& > .feature-box {
|
||||
margin: 0;
|
||||
|
||||
h3 {
|
||||
text-align: center;
|
||||
line-height: normal;
|
||||
font-size: 1.3em;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
flex-basis: calc(min(75vw, 12.5cm, 35em));
|
||||
flex-shrink: 0;
|
||||
|
||||
border-radius: 0.5em;
|
||||
padding: 1em;
|
||||
padding-bottom: 1.2em;
|
||||
|
||||
background-color: #daeaf9; // light blue
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1233,6 +1233,14 @@ body.td-search #search {
|
|||
padding: 0.2rem;
|
||||
}
|
||||
|
||||
|
||||
// handle main page features on narrow viewports
|
||||
@media screen and (max-width: 768px) {
|
||||
.features-container div.feature-box {
|
||||
min-width: 80vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-aspect-ratio: 9/15) {
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,12 +31,6 @@ $vendor-strip-font-size: 16px;
|
|||
//video
|
||||
$video-section-height: 400px;
|
||||
|
||||
//features
|
||||
$features-h3-margin-bottom: 40px;
|
||||
$feature-box-margin-bottom: 60px;
|
||||
$feature-box-div-margin-bottom: 0;
|
||||
$feature-box-div-width: 45%;
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
|
|
@ -156,29 +150,6 @@ $feature-box-div-width: 45%;
|
|||
display: none;
|
||||
}
|
||||
|
||||
#features {
|
||||
padding-bottom: 60px;
|
||||
|
||||
.feature-box {
|
||||
margin-bottom: 30px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-bottom: $features-h3-margin-bottom;
|
||||
}
|
||||
|
||||
.feature-box {
|
||||
& > div {
|
||||
width: $feature-box-div-width;
|
||||
margin-bottom: $feature-box-div-margin-bottom;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#talkToUs {
|
||||
#bigSocial {
|
||||
div {
|
||||
|
|
@ -211,4 +182,9 @@ $feature-box-div-width: 45%;
|
|||
width: 48%;
|
||||
}
|
||||
}
|
||||
|
||||
.features-container div.feature-box {
|
||||
min-width: clamp(20rem, 6cm, 90vw);
|
||||
max-width: clamp(90rem, 10cm, 90vw);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,23 +14,22 @@ feature:
|
|||
Note that markdown can be used in the description.
|
||||
|
||||
*/}}
|
||||
<section id="features">
|
||||
<div class="main-section">
|
||||
<h3 class="center">{{ T "main_kubernetes_features" }}</h3>
|
||||
<section class="features-container" id="features">
|
||||
{{- with resources.Get "images/wheel.svg" -}}
|
||||
<img class="kubernetes-logo wheel" src="{{ .RelPermalink }}" alt="">
|
||||
{{- end -}}
|
||||
|
||||
<h2 class="k8s-features-heading">{{ T "main_kubernetes_features" }}</h2>
|
||||
<div>
|
||||
{{ $pages := where site.Pages ".Params.feature" "!=" nil }}
|
||||
{{range $i, $p := $pages }}
|
||||
{{ if and (gt $i 0) (modBool $i 2) }}</div>{{ end }}
|
||||
{{ if modBool $i 2 }}
|
||||
<div class="feature-box">
|
||||
{{ end }}
|
||||
<div>
|
||||
{{ range $i, $p := $pages }}
|
||||
<div class="feature-box">
|
||||
{{ with .Params.feature }}
|
||||
<h4><a href="{{ $p.RelPermalink}}{{ with .anchor }}#{{ . | anchorize }}{{ end }}">{{ .title }}</a></h4>
|
||||
<h3><a href="{{ $p.RelPermalink}}{{ with .anchor }}#{{ . | anchorize }}{{ end }}">{{ .title }}</a></h3>
|
||||
{{ $description := .description | default $p.Params.description }}
|
||||
{{ $description | markdownify }}
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
Loading…
Reference in New Issue