mirror of
https://github.com/codex-team/codex.docs.git
synced 2025-08-02 20:15:25 +02:00
Main elements created (#4)
This commit is contained in:
Peter Savchenko
GitHub
parent
248558a11f
commit
4326cb22ab
13 changed files with 172 additions and 13 deletions
28
src/frontend/styles/components/aside.pcss
Normal file
28
src/frontend/styles/components/aside.pcss
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
.docs-aside {
|
||||
font-size: 15px;
|
||||
color: var(--color-text-second);
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&__section {
|
||||
margin-bottom: 30px;
|
||||
|
||||
&-title {
|
||||
margin-bottom: 15px;
|
||||
color: var(--color-link-active);
|
||||
}
|
||||
|
||||
&-list {
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
color: inherit;
|
||||
padding: 8px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
31
src/frontend/styles/components/header.pcss
Normal file
31
src/frontend/styles/components/header.pcss
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
.docs-header {
|
||||
font-size: 15.8px;
|
||||
border-bottom: 1px solid var(--color-line-gray);
|
||||
line-height: 50px;
|
||||
display: flex;
|
||||
padding: 0 var(--layout-padding-horisontal);
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
display: inline-block;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-link-active);
|
||||
}
|
||||
}
|
||||
|
||||
&__logo {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&__menu {
|
||||
display: flex;
|
||||
margin: 0 0 0 auto;
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
22
src/frontend/styles/layout.pcss
Normal file
22
src/frontend/styles/layout.pcss
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
.docs {
|
||||
display: flex;
|
||||
padding: 0 var(--layout-padding-horisontal);
|
||||
|
||||
&__aside {
|
||||
width: var(--layout-width-aside);
|
||||
}
|
||||
|
||||
&__content {
|
||||
flex-grow: 2;
|
||||
|
||||
&-inner {
|
||||
max-width: var(--layout-width-main-col);
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__aside,
|
||||
&__content {
|
||||
padding: 40px 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +1,12 @@
|
|||
@import url('../../../node_modules/normalize.css');
|
||||
@import url('vars.pcss');
|
||||
@import url('layout.pcss');
|
||||
@import url('components/header.pcss');
|
||||
@import url('components/aside.pcss');
|
||||
|
||||
body {
|
||||
font-family: system-ui, Helvetica, Arial, Verdana;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #00B7FF;
|
||||
color: var(--color-text-main);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
|
|
|||
13
src/frontend/styles/vars.pcss
Normal file
13
src/frontend/styles/vars.pcss
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
:root {
|
||||
--color-text-main: #1D202B;
|
||||
--color-text-second: #7B7E89;
|
||||
--color-line-gray: #E8E8EB;
|
||||
--color-link-active: #388AE5;
|
||||
|
||||
/**
|
||||
* Site layout sizes
|
||||
*/
|
||||
--layout-padding-horisontal: 40px;
|
||||
--layout-width-aside: 250px;
|
||||
--layout-width-main-col: 650px;
|
||||
}
|
||||
19
src/views/components/aside.twig
Normal file
19
src/views/components/aside.twig
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<div class="docs-aside">
|
||||
<section class="docs-aside__section">
|
||||
<a class="docs-aside__section-title" href="">
|
||||
Base concepts
|
||||
</a>
|
||||
<ul class="docs-aside__section-list">
|
||||
<li>
|
||||
<a href="">
|
||||
Insallation
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">
|
||||
Usage
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
27
src/views/components/header.twig
Normal file
27
src/views/components/header.twig
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<header class="docs-header">
|
||||
<a href="/" class="docs-header__logo">
|
||||
CodeX Editor 🤩🧦🤨
|
||||
</a>
|
||||
<ul class="docs-header__menu">
|
||||
<li>
|
||||
<a href="">
|
||||
Guides
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">
|
||||
API
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">
|
||||
Plugins
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">
|
||||
Support Project
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</header>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
{% extends 'layout.twig' %}
|
||||
|
||||
{% block body %}
|
||||
<h1>{{title}}</h1>
|
||||
{{title}}
|
||||
<p>Welcome to {{title}}</p>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -3,9 +3,22 @@
|
|||
<head>
|
||||
<title>{{ title }}</title>
|
||||
<link rel="stylesheet" href="/dist/bundle.css" />
|
||||
<script src="/dist/bundle.js" onload="new Docs()"></script>
|
||||
</head>
|
||||
<body>
|
||||
{% block body %}{% endblock %}
|
||||
{% include "components/header.twig" %}
|
||||
<div class="docs">
|
||||
<aside class="docs__aside">
|
||||
{% include "components/aside.twig" %}
|
||||
</aside>
|
||||
<div class="docs__content">
|
||||
<div class="docs__content-inner">
|
||||
{% block body %}{% endblock %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="/dist/bundle.js"></script>
|
||||
<script>
|
||||
new Docs();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue