diff --git a/src/v2/scss/_variables.scss b/src/v2/scss/_variables.scss index d7e13a18..1cdcfd3a 100644 --- a/src/v2/scss/_variables.scss +++ b/src/v2/scss/_variables.scss @@ -115,7 +115,8 @@ $spacers: ( "4x": ($spacer * 4), "6x": ($spacer * 6), "8x": ($spacer * 8), - "10x": ($spacer * 10) + "10x": ($spacer * 10), + "20x": ($spacer * 20) ); // This variable affects the `.h-*` and `.w-*` classes. @@ -245,8 +246,6 @@ $h1-font-size: $font-size-base * 3 !default; $h2-font-size: $font-size-base * 2.25 !default; $h3-font-size: $font-size-base * 1.5 !default; $h4-font-size: $font-size-content-base; -$h5-font-size: $font-size-base !default; -$h6-font-size: $font-size-base !default; $text-muted: $gray-dark; diff --git a/src/v2/scss/components/_typography.scss b/src/v2/scss/components/_typography.scss index 15453831..ccba635e 100644 --- a/src/v2/scss/components/_typography.scss +++ b/src/v2/scss/components/_typography.scss @@ -1,6 +1,6 @@ $headings-font-family: inherit !default; -$headings-font-weight: $font-weight-normal; -$headings-line-height: 1.2; +$headings-font-weight: $font-weight-bold; +$headings-line-height: 1.1; $headings-color: inherit !default; $blockquote-small-color: $gray-disabled; @@ -20,16 +20,12 @@ h1, h2, h3, h4, -h5, -h6, .h1, .h2, .h3, .h4, -.h5, -.h6 { +.super-title { display: block; - margin-bottom: spacer("4x"); font-family: $headings-font-family; font-weight: $headings-font-weight; line-height: $headings-line-height; @@ -40,25 +36,29 @@ h6, } } +.super-title { + font-size: 4.5rem; + letter-spacing: -.15rem; + @include media-breakpoint-down(md) { + font-size: 2.5rem; + } +} + h1, .h1 { font-size: $h1-font-size; - margin-bottom: spacer("6x"); letter-spacing: -.04rem; - font-weight: $font-weight-light; @include media-breakpoint-down(md) { - font-size: 1.75rem; + font-size: 2rem; } } h2, .h2 { font-size: $h2-font-size; - font-weight: $font-weight-light; - margin-bottom: spacer("4x"); letter-spacing: -.04rem; @include media-breakpoint-down(md) { - font-size: 1.5rem; + font-size: 1.75rem; } } @@ -66,7 +66,7 @@ h3, .h3 { font-size: $h3-font-size; @include media-breakpoint-down(md) { - font-size: 1.25rem; + font-size: 1.5rem; } } @@ -75,14 +75,67 @@ h4, font-size: $h4-font-size; } -h5, -.h5 { - font-size: $h5-font-size; +p, +.text { + &._big { + font-size: $font-size-lg; + } + + &._small { + font-size: $font-size-sm; + } + + &._extra-small { + font-size: $font-size-extra-sm; + } + &._pale { + color: $gray-dark; + } } -h6, -.h6 { - font-size: $h6-font-size; +.article { + h1, + .h1 { + margin-top: spacer("20x"); + @include media-breakpoint-down(md) { + margin-top: spacer("10x"); + } + } + + h2, + .h2 { + margin-top: spacer("10x"); + @include media-breakpoint-down(md) { + margin-top: spacer("6x"); + } + } + + h3, + .h3, + h4, + .h4 { + margin-top: spacer("8x"); + @include media-breakpoint-down(md) { + margin-top: spacer("4x"); + } + } + + p, + .text, + table, + .table, + ul, + ol, + .list, + code, + blockquote, + .blockquote, + dl { + margin-top: spacer("4x"); + @include media-breakpoint-down(md) { + margin-top: spacer("3x"); + } + } } // Blockquotes diff --git a/templates/v2/components/typography.jinja2 b/templates/v2/components/typography.jinja2 index b0318889..fa9bb86c 100644 --- a/templates/v2/components/typography.jinja2 +++ b/templates/v2/components/typography.jinja2 @@ -1,85 +1,195 @@ {% extends "v2/layouts/inner.jinja2" %} {% block content %} -
-
-
-
-

H1 header style

-

H2 header style

-

H3 header style

-

H4 header style

- Link -

-

Main text text style

- Some text styles link style, - deleted text - , - inserted text - , cursive selection and bold selection, - small text - , - marked text - , normal text

-
-
-

Figure

-
- -
Лекция в Computer Science Center
-
-
-
-

Ul-list style

-
    -
  • Проект GoodsReview
    • -
  • Поиск генов в метагномных сборках
    • -
  • Список второго уровня: -
      -
    • nginx — сервер, который отдает статические файлы и роутит запросы на java-сервер
      • -
    • jetty — java-сервер
      • -
    • jersey — имплементация REST на java
      • -
    • jade — шаблонизатор
      • -
    • mysql — наша база
      • -
    -
    • -
  • Value-tracking анализ JavaScript
    • -
  • Распознавание марки и модели - автомобиля по фотографии -
    • -
-
-
-

Ol-list style

-
    -
  1. Андрей Иванов (JetBrains, СПбАУ РАН); -
    2. -
  2. Елена Бунина (Яндекс, ШАД, МГУ); -
    3. -
  3. Александр Куликов (ПОМИ РАН, CS клуб); -
    4. -
  4. Александр Смаль (ПОМИ РАН, СПбАУ РАН); -
    5. -
  5. Эдуард Гирш (ПОМИ РАН); -
    6. -
  6. Евгения Куликова (Яндекс). -
    7. -
-
-
-

Code

- 
+
+  

+    

+      

+        

+          

+            Typography
+          

+          

+            правила работы с текстом на сайте центра
+          

+        

+      

+    

+  

+
+  

+    

+      

+
+        

+          Заголовок уровня h1 и текст
+        

+        

+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet assumenda autem, debitis ea illo ipsa ipsam iste maxime
+          necessitatibus pariatur quae vel velit veritatis. Ab mollitia nihil nobis rem voluptates! Lorem ipsum dolor sit amet, consectetur
+          adipisicing elit. Amet assumenda autem, debitis ea illo ipsa ipsam iste maxime
+          necessitatibus pariatur quae vel velit veritatis. Ab mollitia nihil nobis rem voluptates!
+        

+
+        

+          Заголовок уровня h1
+        

+        

+          Заголовок уровня h2 и текст
+        

+        

+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet assumenda autem, debitis ea illo ipsa ipsam iste maxime
+          necessitatibus pariatur quae vel velit veritatis. Ab mollitia nihil nobis rem voluptates! Lorem ipsum dolor sit amet, consectetur
+          adipisicing elit. Amet assumenda autem, debitis ea illo ipsa ipsam iste maxime
+          necessitatibus pariatur quae vel velit veritatis. Ab mollitia nihil nobis rem voluptates!
+        

+        

+          Заголовок уровня h2 и текст
+        

+        

+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet assumenda autem, debitis ea illo ipsa ipsam iste maxime
+          necessitatibus pariatur quae vel velit veritatis. Ab mollitia nihil nobis rem voluptates! Lorem ipsum dolor sit amet, consectetur
+          adipisicing elit. Amet assumenda autem, debitis ea illo ipsa ipsam iste maxime
+          necessitatibus pariatur quae vel velit veritatis. Ab mollitia nihil nobis rem voluptates!
+        

+
+        

+          Заголовок уровня h1
+        

+        

+          Заголовок уровня h2
+        

+        

+          Заголовок уровня h3 и текст
+        

+        

+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet assumenda autem, debitis ea illo ipsa ipsam iste maxime
+          necessitatibus pariatur quae vel velit veritatis. Ab mollitia nihil nobis rem voluptates! Lorem ipsum dolor sit amet, consectetur
+          adipisicing elit. Amet assumenda autem, debitis ea illo ipsa ipsam iste maxime
+          necessitatibus pariatur quae vel velit veritatis. Ab mollitia nihil nobis rem voluptates!
+        

+        

+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet assumenda autem, debitis ea illo ipsa ipsam iste maxime
+          adipisicing elit. Amet assumenda autem, debitis ea illo ipsa ipsam iste maxime
+        

+        

+          Заголовок уровня h2 и текст
+        

+        

+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet assumenda autem, debitis ea illo ipsa ipsam iste maxime
+          necessitatibus pariatur quae vel velit veritatis. Ab mollitia nihil nobis rem voluptates! Lorem ipsum dolor sit amet, consectetur
+          adipisicing elit. Amet assumenda autem, debitis ea illo ipsa ipsam iste maxime
+          necessitatibus pariatur quae vel velit veritatis. Ab mollitia nihil nobis rem voluptates!
+        

+
+        

+          Стили основного шрифта
+        

+        

+          Основной текст, крупный размер
+        

+        

+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet assumenda autem, debitis ea illo ipsa ipsam iste maxime
+          necessitatibus pariatur quae vel velit veritatis. Ab mollitia nihil nobis rem voluptates! Lorem ipsum dolor sit amet, consectetur
+          adipisicing elit. Amet assumenda autem, debitis ea illo ipsa ipsam iste maxime
+          necessitatibus pariatur quae vel velit veritatis. Ab mollitia nihil nobis rem voluptates!
+        

+
+        

+          Основной текст, стандартный размер
+        

+
+        

+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet assumenda autem, debitis ea illo ipsa ipsam iste maxime
+          adipisicing elit. Amet assumenda autem, debitis ea illo ipsa ipsam iste maxime
+        

+
+        

+          Основной текст, маленький размер, неконтрастный
+        

+
+        

+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet assumenda autem, debitis ea illo ipsa ipsam iste maxime
+          adipisicing elit. Amet assumenda autem, debitis ea illo ipsa ipsam iste maxime
+        

+      

+    

+  

+  

+    

+      

+        

+          
Other styles

+          

+            Link style,
+            deleted text
+            ,
+            inserted text
+            , cursive selection and bold selection,
+            small text
+            ,
+            marked text
+            , normal text
+          

+        

+        

+          
Figure

+          

+            
+            
Лекция в Computer Science Center

+          

+        

+        

+          
Ul-list style

+          
    
+            
  • Проект GoodsReview
    • 
+            
  • Поиск генов в метагномных сборках
    • 
+            
  • Список второго уровня:
+              
      
+                
    • nginx — сервер, который отдает статические файлы и роутит запросы на java-сервер
      • 
+                
    • jetty — java-сервер
      • 
+                
    • jersey — имплементация REST на java
      • 
+                
    • jade — шаблонизатор
      • 
+                
    • mysql — наша база
      • 
+              
    
+            
    • 
+            
  • Value-tracking анализ JavaScript
    • 
+            
  • Распознавание марки и модели
+              автомобиля по фотографии
+            
    • 
+          

+        

+        

+          
Ol-list style

+          
    
+            
  1. Андрей Иванов (JetBrains, СПбАУ РАН);
+            
    2. 
+            
  2. Елена Бунина (Яндекс, ШАД, МГУ);
+            
    3. 
+            
  3. Александр Куликов (ПОМИ РАН, CS клуб);
+            
    4. 
+            
  4. Александр Смаль (ПОМИ РАН, СПбАУ РАН);
+            
    5. 
+            
  5. Эдуард Гирш (ПОМИ РАН);
+            
    6. 
+            
  6. Евгения Куликова (Яндекс).
+            
    7. 
+          

+        

+        

+          
Code

+          
 #include
 using namespace std;
 
@@ -89,157 +199,161 @@ int main()
     return 0;
 }

 
-                

-
-                

-                    
Table

-                    
-                        
-                        
-                        
-                            
-                            
-                            
-                            
-                        
-                        
-                            
-                            
-                            
-                            
-                        
-                        
-                            
-                            
-                            
-                            
-                        
-                        
-                            
-                            
-                            
-                            
-                        
-                        
-                            
-                            
-                            
-                            
-                        
-                        
-                            
-                            
-                            
-                            
-                        
-                        
-                            
-                            
-                            
-                            
-                        
-                        
-                            
-                            
-                            
-                            
-                        
-                        
-                            
-                            
-                            
-                            
-                        
-                        
-                            
-                            
-                            
-                            
-                        
-                        
-                    
Таблица размеров обуви
РоссияВеликобританияЕвропаДлина ступни, см
34,53,53623
35,5436⅔23–23,5
364,537⅓23,5
36,553824
375,538⅔24,5
38639⅓25
38,56,54025,5
39740⅔25,5–26
407,541⅓26

-                

-
-                

-                    
Table 100% width

-                    
-                        
-                        
-                        
-                            
-                            
-                            
-                            
-                        
-                        
-                            
-                            
-                            
-                            
-                        
-                        
-                            
-                            
-                            
-                            
-                        
-                        
-                            
-                            
-                            
-                            
-                        
-                        
-                            
-                            
-                            
-                            
-                        
-                        
-                            
-                            
-                            
-                            
-                        
-                        
-                            
-                            
-                            
-                            
-                        
-                        
-                            
-                            
-                            
-                            
-                        
-                        
-                            
-                            
-                            
-                            
-                        
-                        
-                            
-                            
-                            
-                            
-                        
-                        
-                    
Таблица размеров обуви
РоссияВеликобританияЕвропаДлина ступни, см
34,53,53623
35,5436⅔23–23,5
364,537⅓23,5
36,553824
375,538⅔24,5
38639⅓25
38,56,54025,5
39740⅔25,5–26
407,541⅓26

-                

-                
Отдельная благодарность Якову Зайцеву, подарившему CS центру более 100 книг.

-
-                
Blockquote

-                

-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut deserunt fuga impedit labore nihil
-                    odio quaerat, quos veritatis. Ab assumenda aut ea error excepturi fugiat, harum illum incidunt
-                    officia tenetur.
-                

-                    Svyatoslav Mikhaylov
-                

-                

-            

-        

+
+ +
+

Table

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Таблица размеров обуви
РоссияВеликобританияЕвропаДлина ступни, см
34,53,53623
35,5436⅔23–23,5
364,537⅓23,5
36,553824
375,538⅔24,5
38639⅓25
38,56,54025,5
39740⅔25,5–26
407,541⅓26
+
+
+ +
+

Table 100% width

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Таблица размеров обуви
РоссияВеликобританияЕвропаДлина ступни, см
34,53,53623
35,5436⅔23–23,5
364,537⅓23,5
36,553824
375,538⅔24,5
38639⅓25
38,56,54025,5
39740⅔25,5–26
407,541⅓26
+
+
+

Отдельная благодарность Якову Зайцеву, подарившему CS центру более 100 книг.

+ +

Blockquote

+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut deserunt fuga impedit labore nihil + odio quaerat, quos veritatis. Ab assumenda aut ea error excepturi fugiat, harum illum incidunt + officia tenetur. +

+ Svyatoslav Mikhaylov +

+
+
+
{% endblock content %} diff --git a/templates/v2/layouts/inner.jinja2 b/templates/v2/layouts/inner.jinja2 index 2652a8bd..3b9a96ef 100644 --- a/templates/v2/layouts/inner.jinja2 +++ b/templates/v2/layouts/inner.jinja2 @@ -11,7 +11,7 @@ - + {% block stylesheets %} {% endblock stylesheets %}