docs: добавить стайлгайд nextjs-style-guide в репозиторий
- Добавлена документация SLM-архитектуры, базовых правил и прикладных разделов - Добавлены разделы: стили, SVG-спрайты, шаблоны генерации, PostCSS, REST, Realtime - Удалены устаревшие файлы (спрайты, скрипты, стили из app/)
This commit is contained in:
@@ -1,161 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>SVG stack preview | svg-sprite</title>
|
||||
<style>
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
color: #666;
|
||||
background: #fafafa;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 1em;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
header {
|
||||
display: block;
|
||||
padding: 3em 3em 2em;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
header p {
|
||||
margin: 2em 0 0;
|
||||
}
|
||||
|
||||
section {
|
||||
border-top: 1px solid #eee;
|
||||
padding: 2em 3em 0;
|
||||
}
|
||||
|
||||
section ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
section li {
|
||||
display: inline-block;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
margin: 0 2em 2em 0;
|
||||
vertical-align: top;
|
||||
border: 1px solid #ccc;
|
||||
padding: 1em 1em 3em;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.icon-box {
|
||||
margin: 0;
|
||||
width: 144px;
|
||||
height: 144px;
|
||||
position: relative;
|
||||
background: #ccc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath fill='%23fff' d='M6 0h6v6H6zM0 6h6v6H0z'/%3E%3C/svg%3E") top left repeat;
|
||||
border: 1px solid #ccc;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 1em;
|
||||
font-weight: 400;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
position: absolute;
|
||||
left: 1em;
|
||||
right: 1em;
|
||||
bottom: 1em;
|
||||
}
|
||||
|
||||
footer {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0 3em 3em;
|
||||
}
|
||||
|
||||
footer p {
|
||||
margin: 0;
|
||||
font-size: .7em;
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: #0f7595;
|
||||
margin-left: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!--
|
||||
Sprite shape dimensions
|
||||
====================================================================================================
|
||||
You will need to set the sprite shape dimensions via CSS when you use them as stack SVGs, otherwise
|
||||
they would become a huge 100% in size. You may use the following dimension classes for doing so.
|
||||
They might well be outsourced to an external stylesheet of course.
|
||||
-->
|
||||
|
||||
<style>
|
||||
.svg-arrow-down-dims { width: 24px; height: 24px; }
|
||||
.svg-arrow-right-dims { width: 20px; height: 20px; }
|
||||
</style>
|
||||
|
||||
<!--
|
||||
====================================================================================================
|
||||
-->
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>SVG stack preview</h1>
|
||||
<p>This preview features an SVG stack. Please have a look at the HTML source for further details and be aware of the following constraints:</p>
|
||||
<ul>
|
||||
<li>Your browser has to <a href="https://caniuse.com/svg-fragment" target="_blank" rel="noopener noreferrer">support SVG fragment identifiers</a> for SVG stacks to work.</li>
|
||||
<li>Support for SVG fragment identifiers hasn't always been that decent. For older browsers you will have to use some prolyfill like <a href="https://github.com/preciousforever/SVG-Stacker/blob/master/fixsvgstack.jquery.js" target="_blank" rel="noopener noreferrer">fixsvgstack.jquery.js</a>.</li>
|
||||
</ul>
|
||||
</header>
|
||||
<section>
|
||||
|
||||
<!--
|
||||
SVG stack
|
||||
====================================================================================================
|
||||
These SVG images make use of fragment identifiers (IDs) to reference certain portions of the
|
||||
external sprite. By default, all shapes inside the sprite are hidden by CSS. The `:target` pseudo
|
||||
selector is used to show the very shape that is referenced by the fragment identifier.
|
||||
-->
|
||||
|
||||
<ul>
|
||||
|
||||
<li title="arrow-down">
|
||||
<div class="icon-box">
|
||||
<img src="sprite.stack.svg#arrow-down" class="svg-arrow-down-dims" alt="arrow-down">
|
||||
</div>
|
||||
<h2>arrow-down, </h2>
|
||||
</li>
|
||||
<li title="arrow-right">
|
||||
<div class="icon-box">
|
||||
<img src="sprite.stack.svg#arrow-right" class="svg-arrow-right-dims" alt="arrow-right">
|
||||
</div>
|
||||
<h2>arrow-right, </h2>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!--
|
||||
====================================================================================================
|
||||
-->
|
||||
|
||||
</section>
|
||||
<footer>
|
||||
<p>Generated at Tue, 21 Apr 2026 18:16:57 GMT by <a href="https://github.com/svg-sprite/svg-sprite" target="_blank" rel="noopener noreferrer">svg-sprite</a>.</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style>:root>svg{display:none}:root>svg:target{display:block}</style><svg viewBox="0 0 24 24" fill="none" id="arrow-down" xmlns="http://www.w3.org/2000/svg"><path d="M18.07 14.43 12 20.5l-6.07-6.07M12 3.5v16.83" stroke="var(--icon-color-1, currentColor)" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></svg><svg viewBox="0 0 20 20" fill="none" id="arrow-right" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M18.25 10a.75.75 0 0 1-.22.53l-5.833 5.834a.75.75 0 1 1-1.06-1.06l4.553-4.554H1.667a.75.75 0 0 1 0-1.5H15.69l-4.553-4.553a.75.75 0 0 1 1.06-1.06l5.834 5.833c.14.14.22.331.22.53Z" fill="var(--icon-color-1, currentColor)"/></svg></svg>
|
||||
|
Before Width: | Height: | Size: 843 B |
Reference in New Issue
Block a user