mirror of
https://github.com/krahets/hello-algo.git
synced 2024-12-26 23:46:29 +08:00
417 lines
No EOL
11 KiB
HTML
417 lines
No EOL
11 KiB
HTML
|
|
{% extends "main.html" %}
|
|
|
|
<!-- Render hero under tabs -->
|
|
{% block tabs %}
|
|
{{ super() }}
|
|
|
|
<!-- Additional styles for landing page -->
|
|
<style>
|
|
|
|
/* Apply box shadow on smaller screens that don't display tabs */
|
|
@media only screen and (max-width: 1220px) {
|
|
.md-header {
|
|
box-shadow: 0 0 .2rem rgba(0,0,0,.1),0 .2rem .4rem rgba(0,0,0,.2);
|
|
transition: color 250ms,background-color 250ms,box-shadow 250ms;
|
|
}
|
|
}
|
|
|
|
/* Hide main content for now */
|
|
.md-content {
|
|
display: none;
|
|
}
|
|
|
|
/* Hide table of contents */
|
|
@media screen and (min-width: 60em) {
|
|
.md-sidebar--secondary {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* Hide navigation */
|
|
@media screen and (min-width: 76.25em) {
|
|
.md-sidebar--primary {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* Get started button */
|
|
.md-typeset .md-button--primary {
|
|
color: var(--md-primary-fg-color);
|
|
background-color: var(--md-primary-bg-color);
|
|
border-color: var(--md-primary-bg-color);
|
|
}
|
|
.md-typeset .md-button--primary:hover {
|
|
color: var(--md-primary-bg-color);
|
|
background-color: var(--md-primary-fg-color);
|
|
border-color: var(--md-primary-bg-color);
|
|
}
|
|
|
|
.tx-hero {
|
|
max-width: 700px;
|
|
display: flex;
|
|
padding: .4rem;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
}
|
|
.tx-hero h1 {
|
|
font-weight: 700;
|
|
font-size: 38px;
|
|
line-height: 46px;
|
|
color: rgb(38, 38, 38);
|
|
}
|
|
.tx-hero p {
|
|
color: rgb(92, 92, 92);
|
|
font-weight: 400;
|
|
font-size: 20px;
|
|
line-height: 32px;
|
|
}
|
|
.tx-hero__image {
|
|
max-width: 300px;
|
|
min-width: 300px;
|
|
width: 100%;
|
|
height: auto;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.tx-hero__image img {
|
|
width: 100%;
|
|
height: 100%;
|
|
min-width: 0;
|
|
}
|
|
|
|
/* Secondary content styles */
|
|
.secondary-section {
|
|
background: rgb(245, 245, 245) none repeat scroll 0% 0%;
|
|
border-top: 1px solid rgb(222, 222, 222);
|
|
border-bottom: 1px solid rgb(222, 222, 222)
|
|
}
|
|
@media screen and (max-width: 1012px) {
|
|
.secondary-section {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.secondary-section .g {
|
|
position: relative;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
padding: 0px 100px;
|
|
max-width: 1280px;
|
|
}
|
|
|
|
.secondary-section .g .section {
|
|
font-size: 18px;
|
|
font-weight: 400;
|
|
line-height: 30px;
|
|
letter-spacing: normal;
|
|
padding: 88px 0px 116px;
|
|
}
|
|
|
|
.secondary-section .g .section.follow {
|
|
padding-top: 0px;
|
|
}
|
|
|
|
|
|
.secondary-section .g .section .component-wrapper {
|
|
display: flex;
|
|
-moz-box-align: center;
|
|
align-items: center;
|
|
}
|
|
|
|
@media screen and (max-width: 1012px) {
|
|
.secondary-section .g .section .component-wrapper {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.secondary-section .g .section .component-wrapper h3 {
|
|
color: rgb(38, 38, 38);
|
|
font-size: 36px;
|
|
font-weight: 700;
|
|
line-height: 46px;
|
|
letter-spacing: normal;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.secondary-section .g .section .component-wrapper h4 {
|
|
color: rgb(38, 38, 38);
|
|
}
|
|
|
|
.secondary-section .g .section .component-wrapper p {
|
|
color: rgb(92, 92, 92);
|
|
font-size: 18px;
|
|
font-weight: 400;
|
|
line-height: 30px;
|
|
letter-spacing: normal;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.secondary-section .g .section .component-wrapper .image-wrapper {
|
|
margin-bottom: 12px;
|
|
overflow: hidden;
|
|
border-radius: 8px;
|
|
margin-top: 48px;
|
|
border: 1px solid rgb(222, 222, 222);
|
|
box-shadow: rgba(202, 202, 202, 0.15) 0px 0px 0px 6px;
|
|
max-width: 600px;
|
|
width: 100%;
|
|
height: auto;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.image-wrapper img {
|
|
width: 100%;
|
|
height: 100%;
|
|
min-width: 0;
|
|
}
|
|
|
|
.secondary-section .g .section .component-wrapper .first-column {
|
|
padding-right: 100px;
|
|
flex: 0 1 auto;
|
|
height: auto;
|
|
width: 50%;
|
|
}
|
|
|
|
@media screen and (max-width: 1012px) {
|
|
.secondary-section .g .section .component-wrapper .first-column {
|
|
padding-right: 0px;
|
|
width: 100%;
|
|
margin-bottom: 32px;
|
|
}
|
|
}
|
|
|
|
.secondary-section .g .section .component-wrapper .second-column {
|
|
flex: 0 1 auto;
|
|
height: auto;
|
|
width: 50%;
|
|
}
|
|
@media screen and (max-width: 1012px) {
|
|
.secondary-section .g .section .component-wrapper .second-column {
|
|
width: 100%;
|
|
margin-bottom: 32px;
|
|
}
|
|
}
|
|
|
|
.secondary-section .g .section .component-wrapper .responsive-grid {
|
|
display: grid;
|
|
width: 100%;
|
|
grid-template-columns: repeat(1, 1fr);
|
|
gap: 2rem;
|
|
}
|
|
@media screen and (min-width: 64rem) {
|
|
.secondary-section .g .section .component-wrapper .responsive-grid {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
}
|
|
|
|
.secondary-section .g .section .component-wrapper .responsive-grid a.card-wrapper {
|
|
text-decoration: none;
|
|
transition: none;
|
|
background: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.secondary-section .g .section .component-wrapper .responsive-grid .card {
|
|
position: relative;
|
|
background-color: #fff none repeat scroll 0% 0%;
|
|
padding: 1.5rem;
|
|
display: flex;
|
|
flex-direction: row;
|
|
-moz-box-align: center;
|
|
align-items: center;
|
|
height: 100%;
|
|
-moz-box-pack: start;
|
|
justify-content: flex-start;
|
|
box-shadow: rgba(0, 0, 0, 0.09) 0.3125rem 0.3125rem 0px -0.0625rem, rgba(0, 0, 0, 0.15) 0px 0.25rem 0.5rem 0px;
|
|
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
|
|
}
|
|
.secondary-section .g .section .component-wrapper .responsive-grid .card:hover {
|
|
box-shadow: rgba(0, 0, 0, 0.2) 0.3125rem 0.3125rem 0px -0.0625rem, rgba(0, 0, 0, 0.26) 0px 0.25rem 0.5rem 0px;
|
|
}
|
|
|
|
@media screen and (min-width: 75rem) {
|
|
.secondary-section .g .section .component-wrapper .responsive-grid .card {
|
|
padding: 2rem 2.5rem;
|
|
}
|
|
}
|
|
@media screen and (min-width: 36rem) {
|
|
.secondary-section .g .section .component-wrapper .responsive-grid .card {
|
|
padding: 1rem 1.5rem;
|
|
}
|
|
}
|
|
|
|
.secondary-section .g .section .component-wrapper .responsive-grid .card .logo {
|
|
margin-right: 0.75rem;
|
|
width: 1.2rem;
|
|
min-width: 1.2rem;
|
|
}
|
|
|
|
.secondary-section .g .section .component-wrapper .responsive-grid .card .card-content {
|
|
display: flex;
|
|
flex: 1 1 0%;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
}
|
|
|
|
.secondary-section .g .section .component-wrapper .responsive-grid .card .card-content h5 {
|
|
color: rgb(61, 61, 61);
|
|
margin: 0;
|
|
}
|
|
|
|
.secondary-section .g .section .component-wrapper .responsive-grid .card .card-content p {
|
|
margin-top: 0.25em;
|
|
margin-bottom: 0;
|
|
color: rgb(92, 92, 92);
|
|
font-size: 0.65rem;
|
|
font-weight: 300;
|
|
line-height: normal;
|
|
}
|
|
|
|
.secondary-section .g .section .component-wrapper .responsive-grid .card .card-content code {
|
|
background: rgba(0, 0, 0, 0.05) none repeat scroll 0% 0%;
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
|
|
.component-wrapper span.em {
|
|
color: rgb(61, 61, 61);
|
|
}
|
|
|
|
.component-wrapper a {
|
|
transition: color 125ms;
|
|
color: rgb(61, 61, 61);
|
|
background: rgba(0, 0, 0, 0.05) none repeat scroll 0% 0%;
|
|
padding: 2px 6px;
|
|
margin: 0px 1px;
|
|
border-radius: 4px;
|
|
display: inline;
|
|
cursor: pointer;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.component-wrapper a:hover {
|
|
color: var(--md-typeset-a-color);
|
|
background: var(--md-accent-fg-color--transparent);
|
|
}
|
|
|
|
</style>
|
|
|
|
<!-- Hero for landing page -->
|
|
<div class="md-container">
|
|
<div class="tx-hero__image">
|
|
<img
|
|
src="{{config.site_url}}index.assets/conceptual_rendering.png"
|
|
alt=""
|
|
draggable="false"
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="md-container tx-hero">
|
|
<div class="md-grid md-typeset">
|
|
<div class="md-main__inner">
|
|
<div>
|
|
<h2>动画图解、一键运行的数据结构与算法教程</h2>
|
|
<p>AWS Copilot is an open source command line interface that makes it easy for developers to <span class="em">build</span>,
|
|
<span class="em">release</span>, and <span class="em">operate</span> production ready containerized applications on AWS App Runner, Amazon ECS, and AWS Fargate.
|
|
</p>
|
|
<a
|
|
href="chapter_preface/"
|
|
title="Get Started"
|
|
class="md-button md-button--primary"
|
|
>
|
|
开始阅读
|
|
<svg width="11" height="10" viewBox="0 0 11 10" fill="none" style="margin-left:2px"><path d="M1 5.16772H9.5M9.5 5.16772L6.5 1.66772M9.5 5.16772L6.5 8.66772" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="md-container secondary-section">
|
|
<div class="g">
|
|
<!-- Architecture as building blocks -->
|
|
<div class="section">
|
|
<div class="component-wrapper">
|
|
<div class="first-column">
|
|
<h3>全书动画图解</h3>
|
|
<p>
|
|
内容清晰易懂、学习曲线平滑</br>电脑、平板、手机全终端阅读
|
|
</p>
|
|
</div>
|
|
<div class="second-column">
|
|
<div class="image-wrapper">
|
|
<img
|
|
src="{{config.site_url}}index.assets/animation.gif"
|
|
alt=""
|
|
draggable="false"
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Continuous delivery -->
|
|
<div class="section follow">
|
|
<div class="component-wrapper">
|
|
<div class="first-column">
|
|
<h3>Continuous delivery</h3>
|
|
<p>
|
|
No need to worry about gluing Copilot commands in a script to create an automated release process.
|
|
Copilot provides commands to create multiple deployment <a href="docs/concepts/environments/">environments</a> in separate AWS accounts and regions,
|
|
as well as creating an AWS CodePipeline <a href="docs/concepts/pipelines/">pipeline</a> to build your container images, deploy your services, and
|
|
run automated tests.
|
|
</p>
|
|
</div>
|
|
<div class="second-column">
|
|
<div class="image-wrapper">
|
|
<img
|
|
src="{{config.site_url}}assets/images/copilot-env-init.png"
|
|
alt=""
|
|
draggable="false"
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Operations -->
|
|
<div class="section follow">
|
|
<div class="component-wrapper">
|
|
<div class="first-column">
|
|
<h3>Operations is part of the workflow</h3>
|
|
<p>
|
|
Modeling, provisioning, and deploying services are only part of the application lifecycle for the developer.
|
|
Copilot also supports workflows around troubleshooting and debugging to help when things go wrong. <a href="docs/commands/svc-logs/">Tail
|
|
your logs</a>, <a href="docs/commands/svc-exec">get a shell</a> to a running container, <a href="docs/commands/svc-status/">view the health</a> of your services
|
|
from the comfort of your terminal.
|
|
</p>
|
|
</div>
|
|
<div class="second-column">
|
|
<div class="image-wrapper">
|
|
<img
|
|
src="{{config.site_url}}assets/images/copilot-svc-status.png"
|
|
alt=""
|
|
draggable="false"
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
<!-- Content -->
|
|
{% block content %}{% endblock %}
|
|
|
|
<!-- Application footer -->
|
|
{% block footer %}
|
|
{{ super() }}
|
|
{% endblock %} |