Skip to content

Commit

Permalink
[web] Use main site partials. Update styles. (#71)
Browse files Browse the repository at this point in the history
  • Loading branch information
z9r5 committed Mar 24, 2021
1 parent 376f283 commit 64d0738
Show file tree
Hide file tree
Showing 28 changed files with 528 additions and 761 deletions.
4 changes: 2 additions & 2 deletions .github/workflows/validate.yml
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ jobs:
--empty-alt-ignore \
--check_html \
--file_ignore "/____________/" \
--url_ignore "/localhost/,/t.me/,/slack.com/,/cncf.io/,/example.com/,/github.com\/werf\/werf-guides\/edit/,/apple-touch-icon.png/,/site.webmanifest/,/favicon/,/safari-pinned-tab/" \
--url_ignore "/localhost/,/t.me/,/slack.com/,/cncf.io/,/example.com/,/github.com\/werf\/werf-guides\/edit/,/apple-touch-icon.png/,/site.webmanifest/,/favicon/,/safari-pinned-tab/,/guides.html/" \
--url-swap "^\/documentation/:https\://werf.io/documentation/" \
--http-status-ignore 0 \
./_site/
Expand All @@ -72,7 +72,7 @@ jobs:
--empty-alt-ignore \
--check_html \
--file_ignore "/____________/" \
--url_ignore "/localhost/,/t.me/,/slack.com/,/cncf.io/,/example.com/,/github.com\/werf\/werf-guides\/edit/,/apple-touch-icon.png/,/site.webmanifest/,/favicon/,/safari-pinned-tab/" \
--url_ignore "/localhost/,/t.me/,/slack.com/,/cncf.io/,/example.com/,/github.com\/werf\/werf-guides\/edit/,/apple-touch-icon.png/,/site.webmanifest/,/favicon/,/safari-pinned-tab/,/guides.html/" \
--url-swap "^\/documentation/:https\://ru.werf.io/documentation/" \
--http-status-ignore 0 \
./_site/
12 changes: 7 additions & 5 deletions common/_include_templates/_breadcrumbs.html
Original file line number Diff line number Diff line change
@@ -1,16 +1,17 @@
<div class="breadcrumbs-container">
<ol class="breadcrumbs">
{%- if site.site_lang == "ru" %}
<li>
<li class="breadcrumbs__item">
<a href="/">Начало</a>
</li>
<li>
<li class="breadcrumbs__item">
<a href="/guides.html">Руководства</a>
</li>
{%- else %}
<li>
<li class="breadcrumbs__item">
<a href="/">Home</a>
</li>
<li>
<li class="breadcrumbs__item">
<a href="/guides.html">Guides</a>
</li>
{%- endif %}
Expand All @@ -19,4 +20,5 @@
{{ page.label_framework }}
</li>
{%- endif %}
</ol>
</ol>
</div>
51 changes: 51 additions & 0 deletions common/_include_templates/_sidebar.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
{% assign sidebar = site.data.sidebars[page.sidebar].entries[page.lang] %}
<ul id="mysidebar" class="sidebar sidebar_static">
{%- for folder in sidebar.f %}
{% if folder.sf %}
<li class="sidebar__item sidebar__item_parent {%- if page.url contains folder.url %} active{%- endif %}">
<a href="{{ site.baseurl }}/{{ page.guide_code }}/{{ folder.url }}" data-subhref="{{ folder.url }}">{{ folder.title }}</a>
<ul class="sidebar__submenu">
{%- for subfolders in folder.sf %}
{%- if subfolders.external_url %}
<li class="sidebar__submenu-item"><a href="{{ subfolders.external_url }}" target="_blank">{{subfolders.title}}</a></li>
{%- elsif page.url contains subfolders.url %}
<li class="sidebar__submenu-item active"><a href="{{ site.baseurl }}/{{ page.guide_code }}/{{ subfolders.url }}" data-subhref="{{ subfolders.url }}">{{subfolders.title}}</a></li>
{%- else %}
<li class="sidebar__submenu-item"><a href="{{ site.baseurl }}/{{ page.guide_code }}/{{ subfolders.url }}" data-subhref="{{subfolders.url}}">{{subfolders.title}}</a></li>
{%- endif %}
{%- endfor %}
</ul>
</li>
{%- elsif folder.external_url %}
<li class="sidebar__item"><a href="{{ folder.external_url }}" target="_blank">{{folder.title}}</a></li>
{%- elsif page.url contains folder.url %}
<li class="sidebar__item active"><a href="{{ site.baseurl }}/{{ page.guide_code }}/{{ folder.url }}" data-subhref="{{ folder.url }}">{{folder.title}}</a></li>
{%- else %}
<li class="sidebar__item"><a href="{{ site.baseurl }}/{{ page.guide_code }}/{{ folder.url }}" data-subhref="{{folder.url}}">
{{folder.title}}
</a></li>
{%- endif %}
{%- endfor %}
</ul>

<div class="sidebar__btns">
{%- if site.site_lang == "ru" %}
<a href="https://t.me/werf_ru" target="_blank" class="sidebar__btn" title="Задать вопрос в Telegram">
<span class="sidebar__btn-icon sidebar__btn-icon_telegram"></span>
Есть вопрос? Ответим
</a>
<a href="https://github.com/werf/werf" target="_blank" class="sidebar__btn" title="Поставить звезду на GitHub">
<span class="sidebar__btn-icon sidebar__btn-icon_github"></span>
Понравилось? Поставь звезду
</a>
{%- else %}
<a href="https://t.me/werf_io" target="_blank" class="sidebar__btn" title="Contact us via Telegram">
<span class="sidebar__btn-icon sidebar__btn-icon_telegram"></span>
Have a question? Ask us!
</a>
<a href="https://github.com/werf/werf" target="_blank" class="sidebar__btn" title="Star werf on GitHub">
<span class="sidebar__btn-icon sidebar__btn-icon_github"></span>
Star it of you like it!
</a>
{%- endif %}
</div>
2 changes: 2 additions & 0 deletions common/_plugins/snippetcut.rb
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,9 @@ def render(context)
<a href="javascript:void(0)" class="snippetcut__title-btn" data-snippetcut-btn-name>копировать имя</a>
<a href="javascript:void(0)" class="snippetcut__title-btn" data-snippetcut-btn-text>копировать текст</a>
</div>
<div class="highlight">
#{rendered_content}
</div>
<div class="snippetcut__raw" data-snippetcut-text>#{CGI::escapeHTML(content.strip.gsub(%r!^```[a-zA-Z]*!,''))}</div>
</div>
)
Expand Down
248 changes: 248 additions & 0 deletions common/assets/css/guides.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,248 @@
.content__header {
margin: 0 0 25px 0;
}

.content__title {
font-weight: bold;
font-size: 36px;
margin: 0px;
}
.content__title span {
color: #0066FF;
}

/* ---------------------------------------------------------------------------------------- */

.blueblock {
background: #F3F7FF;
}

.blueblock__container {
width: 650px;
margin: 0 auto;
padding: 20px 0;
}

.blueblock__container_narrow {
width: 960px;
padding: 1px 0;
}

.twoaccentedcolumns {
display: flex;
}

.twoaccentedcolumns__column {
margin: 0px auto;
width: 280px;
}

.wishselectwidget {
display: flex;
}
.wishselectwidget__image {
width: 130px;
text-align: center;
margin: 0px 0px 0px 30px;
}
.wishselectwidget__content {
display: flex;
flex-direction: column;
justify-content: center;
padding: 0px 0px 0px 30px;
}
.wishselectwidget__button {
height: 40px;
}

/* ---------------------------------------------------------------------------------------- */

.button__blue {
background: #0066ff;
padding: 10px 20px;
text-align: center;
/* border-radius */
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
/* box-shadow */
-webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
-moz-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
cursor: pointer;
}
.button__blue a {
color: #fff;
text-decoration: none;
}

.button__blue_small {
font-size: 10px;
}

.button__blue_inline {
display: inline;
padding: 2px 10px;
}

.button__blue_notblue {
background: none;
border: 0px;
padding: 10px 5px;
/* box-shadow */
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}

.button__blue_red {
background: #E50101;
color: #ffffff;;
border: 1px solid #E50101;
}

.button__blue_notblue a {
color: #898989;
}

/* ---------------------------------------------------------------------------------------- */

.button__white {
font-size: 14px;
background: #ffffff;
padding: 5px 20px;
text-align: center;
border: #0066ff 1px solid;
/* border-radius */
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
cursor: pointer;
}
.button__white a {
color: #000000;
text-decoration: none;
}
.button__white:hover,
.button__white_chosen {
background: #0066ff;
}
.button__white:hover a,
.button__white_chosen a {
color: #ffffff;
text-decoration: none;
}
.button__white_withoffset {
margin-left: 100px;
}
.button__white_smalloffsets {
margin: 0 10px 0 0;
}

/* ---------------------------------------------------------------------------------------- */

.buttons {
display: flex;
justify-content: flex-start;
margin-bottom: 25px;
}

/* ---------------------------------------------------------------------------------------- */

.checkboxesblock {

}

.checkboxesblock__item {
line-height: 35px;
padding-left: 30px;
}

.checkboxesblock__item input {

}

.checkboxesblock__item label {
padding-left: 10px;
}

/* ---------------------------------------------------------------------------------------- */

.progresswidget {
padding: 10px 0px;
}
.progresswidget__target {
/* line-height: 1.16; */
}
.progresswidget__progress {
display: flex;
align-items: flex-end;
margin-top: 10px;
}
.progresswidget__progress span {
margin: 0 5px;
color: #008080;
}
.progresswidget__timer {
margin: 0 5px;
color: #008080;
font-weight: bold;
}
.progresswidget__timer_overtime {
color: #E50101;
}

/* ---------------------------------------------------------------------------------------- */

.learningprogress {}

.learningprogress__checklist {
margin: 10px 0;
}

.learningprogress__row {}

.learningprogress__row_completed {
color: #008080;
text-decoration: line-through;
}

.learningprogress__time {
width: 100px;
text-align: right;
display: inline-block;
text-decoration: inherit;
}

.learningprogress__label {
display: inline-block;
text-decoration: inherit;
}

/* ---------------------------------------------------------------------------------------- */

.in-development {
display: flex;
align-items: center;
border: 2px solid #eef2ff;
padding: 10px;
margin: 5px 0 25px 0;
}

.in-development__image {
background-image: url(../assets/in_development.png);
width: 120px;
margin: 10px 20px;
background-repeat: no-repeat;
height: 100px;
background-size: 100px 100px;
}

.in-development__content {
font-size: 20px;
}

.in-development__content span {
color: #0066FF;
}

4 changes: 4 additions & 0 deletions common/webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,10 @@ module.exports = {
filename: '_includes/breadcrumbs.html',
template: path.resolve(__dirname, './_include_templates/_breadcrumbs.html'),
}),
new HtmlWebpackPlugin({
filename: '_includes/sidebar.html',
template: path.resolve(__dirname, './_include_templates/_sidebar.html'),
}),
new HtmlWebpackPlugin({
filename: '_includes/en/landing-tiles.html',
template: path.resolve(__dirname, './_include_templates/en/landing-tiles.html'),
Expand Down

0 comments on commit 64d0738

Please sign in to comment.