Skip to content

K
kpp
Commit 0476ab42 authored by Nikolay Gromov's avatar Nikolay Gromov
Browse files
Options

add

parent 3b2948ba
Hide whitespace changes
Inline Side-by-side
Showing with 383 additions and 14 deletions
src/index.html
View file @ 0476ab42
......@@ -2,29 +2,19 @@
<html class="no-js" lang="ru">
<head>
<meta charset="utf-8">
<title>Заголовок</title>
<meta name="description" content="">
@@include('_include/page_head.html')
</head>
<body>
@@include('_include/page_header.html')
<h1>Заголовок h1</h1>
<img src="img/TEMP_DavidBlaine.jpg" alt="">
@@include('_include/page_footer.html')
@@include('_include/page_bottom.html')
</body>
</html>
src/less/global.less 0 → 100644
View file @ 0476ab42
// Make viewport responsive
// see http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
@at-root {
@-ms-viewport { width: device-width; }
}
// Suppress the focus outline on elements that cannot be accessed via keyboard.
// see: https://github.com/suitcss/base
[tabindex="-1"]:focus {
outline: none !important;
}
// iOS "clickable elements" fix for role="button"
// see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
[role="button"] {
cursor: pointer;
}
// Avoid 300ms click delay on touch devices that support the `touch-action` CSS property.
// see:
// http://v4-alpha.getbootstrap.com/content/reboot/#click-delay-optimization-for-touch
// http://caniuse.com/#feat=css-touch-action
// http://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay
a,
area,
button,
[role="button"],
input,
label,
select,
summary,
textarea {
touch-action: manipulation;
}
*, *:before, *:after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
font-size: 10px;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-ms-overflow-style: scrollbar;
}
body {
font-family: @font-family;
font-size: @font-size;
line-height: @line-height;
color: @text-color;
background: @body-bg;
}
a {
color: @link-color;
text-decoration: none;
&:hover,
&:focus {
color: @link-color--hover;
text-decoration: underline;
}
}
img {
max-width: 100%;
}
// .h1,
h1 { font-size: @font-size--h1; }
// .h2,
h2 { font-size: @font-size--h2; }
// .h3,
h3 { font-size: @font-size--h3; }
// .h4,
h4 { font-size: @font-size--h4; }
// .h5,
h5 { font-size: @font-size--h5; }
// .h6,
h6 { font-size: @font-size--h6; }
// .h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6
{
font-family: @font-family--headings;
font-weight: 700;
line-height: 1.2;
color: currentColor;
}
// .h1, .h2, .h3,
h1, h2, h3
{
margin-top: @line-height;
margin-bottom: (@line-height / 2);
}
// .h4, .h5, .h6,
h4, h5, h6
{
margin-top: (@line-height / 2);
margin-bottom: (@line-height / 2);
}
p,
ul,
ol,
blockquote {
margin: 0 0 (@line-height / 2);
}
hr {
margin-top: @line-height;
margin-bottom: @line-height;
border: 0;
border-top: 1px solid @border-color;
}
// .small,
small {
font-size: @font-size--small;
}
// .mark,
mark {
background-color: #ff0;
padding: .2em;
}
blockquote {
padding: @line-height;
border-left: 5px solid @border-color;
p,
ul,
ol {
&:last-child {
margin-bottom: 0;
}
}
}
src/less/mixins/mixins.less 0 → 100644
View file @ 0476ab42
//------------------------------------------------------------------------------
// Генератор правил для прямого родителя модульной сетки
//------------------------------------------------------------------------------
// Принимает:
// @gutter: @grid-gutter-width - промежуток между ячейками
//------------------------------------------------------------------------------
.row(@gutter: @grid-gutter-width) {
display: flex;
flex-wrap: wrap;
// ВНИМАНИЕ! если передан false, в CSS не попадут margin-ы
& when not (@gutter = false) {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
}
//------------------------------------------------------------------------------
// Генератор ширины ячейки
//------------------------------------------------------------------------------
// Принимает:
// @column: 1 - ширина (кол-во колонок в этой ячейке)
// @columns: @grid-columns; - количество ячеек в ряду
//
// Возвращает переменную @width в контекст вызова.
//------------------------------------------------------------------------------
.get-width(@column: 1, @columns: @grid-columns) {
@width: (100% / @columns) * @column;
}
//------------------------------------------------------------------------------
// Генератор правил для одной ячейки
//------------------------------------------------------------------------------
// Принимает:
// @column: 1 - ширина (кол-во колонок для этой ячейки)
// @columns: @grid-columns; - общее количество ячеек на 1 ряд
// @gutter: @grid-gutter-width - промежуток между ячейками (для padding-left и padding-right)
//------------------------------------------------------------------------------
.make-col(@column: 1, @columns: @grid-columns, @gutter: @grid-gutter-width) {
.get-width(@column, @columns); // Вернёт @width с шириной в процентах
flex: 0 0 @width;
max-width: @width;
// ВНИМАНИЕ! если @gutter = false, в CSS не попадут правила padding-left и padding-right
& when not (@gutter = false) {
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
}
}
//------------------------------------------------------------------------------
// Генератор правил для одной ячейки с возможностью указать @media
//------------------------------------------------------------------------------
// Принимает:
// @screen: xs - тип сетки [xs|sm|md|lg|xl|xxl]
// @column: 1 - ширина (кол-во колонок для этой ячейки)
// @columns: @grid-columns; - общее количество ячеек на 1 ряд
// @gutter: @grid-gutter-width - промежуток между ячейками (для padding-left и padding-right)
//------------------------------------------------------------------------------
.col(@screen: xs, @column: 1, @columns: @grid-columns, @gutter: @grid-gutter-width) {
& when (@screen = xs) {
.make-col(@column, @columns, @gutter);
}
& when (@screen = sm) {
@media (min-width: @screen-sm) {
.make-col(@column, @columns, @gutter);
}
}
& when (@screen = md) {
@media (min-width: @screen-md) {
.make-col(@column, @columns, @gutter);
}
}
& when (@screen = lg) {
@media (min-width: @screen-lg) {
.make-col(@column, @columns, @gutter);
}
}
& when (@screen = xl) {
@media (min-width: @screen-xl) {
.make-col(@column, @columns, @gutter);
}
}
& when (@screen = xxl) {
@media (min-width: @screen-xxl) {
.make-col(@column, @columns, @gutter);
}
}
}
//------------------------------------------------------------------------------
// Генератор списка селекторов .col-[]-[] и их общих свойств
//------------------------------------------------------------------------------
// Принимает:
// @screen: xs - тип сетки [xs|sm|md|lg|xl|xxl]
//------------------------------------------------------------------------------
.make-column-list-general-rules(@screen: xs) {
.column-list(@index) {
@item: ~".col-@{screen}-@{index}";
.column-list((@index + 1), @item);
}
.column-list(@index, @list) when (@index =< @grid-columns) {
@item: ~".col-@{screen}-@{index}";
.column-list((@index + 1), ~"@{list}, @{item}");
}
.column-list(@index, @list) when (@index > @grid-columns) {
@{list} {
flex: 0 0 100%;
width: 100%;
padding-left: (@grid-gutter-width / 2);
padding-right: (@grid-gutter-width / 2);
}
}
.column-list(1);
}
//------------------------------------------------------------------------------
// Генератор селекторов .col-[]-[] и их индивидуальных свойств (ширин)
//------------------------------------------------------------------------------
// Принимает:
// @n: - количество колонок
// @screen: - тип сетки [xs|sm|md|lg|xl|xxl]
//------------------------------------------------------------------------------
.make-columns(@n, @screen, @i: 1) when (@i =< @n) {
.col-@{screen}-@{i} {
.make-col(@i, @grid-columns, false)
}
.make-columns(@n, @screen, (@i + 1));
}
//------------------------------------------------------------------------------
// Генератор селекторов .col-[]-offset-[] и их индивидуальных свойств (margin-left)
//------------------------------------------------------------------------------
// Принимает:
// @n: - количество колонок
// @screen: - тип сетки [xs|sm|md|lg|xl|xxl]
//------------------------------------------------------------------------------
.make-offsets(@n, @screen, @i: 1) when (@i =< @n) {
.col-@{screen}-offset-@{i} {
margin-left: (@i * 100% / @n);
}
.make-offsets(@n, @screen, (@i + 1));
}
src/less/style.less
View file @ 0476ab42
@bg_color: #fff;
@import "variables.less";
@import "mixins/mixins.less";
body {
background-color: @bg_color;
}
@import "global.less";
src/less/variables.less 0 → 100644
View file @ 0476ab42
// Базовые цвета
@gray-darkest: #1C1C1C;
@gray-darker: #3A3A3A;
@gray-dark: #5F5F5F;
@gray: #808080;
@gray-light: #B1B1B1;
@gray-lighter: #eceeef;
@gray-lightest: #f7f7f9;
@color-main: #0275d8;
@color-success: #5cb85c;
@color-danger: #d9534f;
// Базовая типографика (Mobile: 1 rem = 10px)
@font-size: 1.6rem;
@font-size--h1: 3.6rem;
@font-size--h2: 3rem;
@font-size--h3: 2.4rem;
@font-size--h4: 1.6rem;
@font-size--h5: 1.6rem;
@font-size--h6: 1.6rem;
@font-size--small: 1.1rem;
@line-height: 1.4;
@font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Ubuntu", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
@font-family--serif: Georgia, "Times New Roman", Times, serif;
@font-family--headings: @font-family;
// Цвета
@text-color: @gray-darkest;
@body-bg: #fff;
@link-color: @color-main;
@link-color--hover: darken(@color-main, 15%);
@border-color: @gray-light;
// Модульная сетка
@grid-columns: 12;
@grid-gutter-width: 30px;
// Ширины
@screen-xs: 0;
@screen-sm: 480px;
@screen-md: 768px;
@screen-lg: 992px;
@screen-xl: 1200px;
@screen-xxl: 1890px;
@container-sm: 100%;
@container-md: 100%;
@container-lg: @screen-lg;
@container-xl: @screen-xl;
@container-xxl: @screen-xxl;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment