API tools faq
paste
Advertisement
Guest User

Untitled

a guest
May 21st, 2018
65
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
SAS 9.74 KB | None | 0 0
raw download clone embed print report
  1. $main_font_family: "PT Sans", sans-serif;
  2. $main_font_hover_color: white;
  3. $main_bg_color: rgba(231,207,171, 0.3);
  4. $main_font_color: #2F2F2F;
  5. $main_border_radius: 5px;
  6. @mixin box-shadow($shadow)
  7. {
  8.     -webkit-box-shadow: #{$shadow};
  9.     -moz-box-shadow: #{$shadow};
  10.     -o-box-shadow: #{$shadow};
  11.     box-shadow: #{$shadow};
  12. }
  13. @mixin transition($params)
  14. {
  15.     transition: #{$params};
  16.     -webkit-transition: #{$params};
  17.     -moz-transition: #{$params};
  18.     -o-transition: #{$params};
  19.  
  20. }
  21. @charset "utf-8";
  22. @import url('https://fonts.googleapis.com/css?family=PT+Sans');
  23.  
  24. * {
  25.     margin: 0;
  26.     padding: 0;
  27.     outline: none;
  28. }
  29.  
  30. html{height: 100%}
  31.  
  32. body{
  33.     width: 100%;
  34.     height: 100%;
  35.     background-image: url(../images/background/retina_wood/retina_wood.png);
  36.     background-repeat: repeat;
  37.     font-family: $main_font_family;
  38.     color: #333333;
  39.     font-size: 1.1em;
  40. }
  41.  
  42. img{
  43.     max-width: 100%;
  44.     max-height: auto;
  45.     width: auto\9; /* ie8 */
  46. }
  47.  
  48. a {
  49.     text-decoration: none;
  50.     color: $main_font_color;
  51.     @include transition('all.4s ease');
  52. }
  53.  
  54.  
  55. .clear{
  56.     clear: both;
  57. }
  58.  
  59. /* Header */
  60.  
  61. header {
  62.     .right_sidebar_top{
  63.         float: right;
  64.         margin-top: 2%;
  65.         margin-right: 1%;
  66.     }
  67.  
  68.     a{
  69.         padding-left: 10px;
  70.         padding-right: 10px;
  71.         font-size: 1.1em;
  72.  
  73.         &:hover{
  74.             color: #ffffff;
  75.         }
  76.     }
  77.         .logo{
  78.         margin-left: 2%;
  79.         margin-top: 1%;
  80.             #logo_text_big{
  81.             font-size: 2.8em;
  82.             float: left;
  83.             margin-top: 25px;
  84.             margin-left: 1%;
  85.             font-family: 'Lucida Fax', Arial, sans-serif;
  86.             color: black;
  87.         }
  88.             #logo_text_small{
  89.             float: left;
  90.             font-family: 'MV Boli', Arial, sans-serif;
  91.             margin-top: 2.8%;
  92.             margin-left: 0.6%;
  93.  
  94.             &:hover{
  95.                 color: #BFA184;
  96.             }
  97.         }
  98.  
  99.             .logo_image{
  100.             float: left;
  101.             width: auto;
  102.             height: 100px;
  103.         }
  104.     }
  105.  
  106.     .center_sidebar_top{
  107.         text-align: center;
  108.         margin-top: 10%;
  109.         margin-bottom: 50px;
  110.    
  111.         a{
  112.             padding-left: 10px;
  113.             padding-right: 70px;
  114.             font-size: 1.2em;
  115.  
  116.             &:hover{
  117.                 color: #ffffff;
  118.             }
  119.             &:focus{
  120.                 color: #ffffff;
  121.             }
  122.         }
  123.     }
  124. }
  125.  
  126.  
  127. /* Animations */
  128.  
  129.  
  130.  
  131. .hidden{
  132. opacity:0;
  133. }
  134. .visible{
  135. opacity:1;
  136. }
  137.  
  138. /* Content */
  139.  
  140. content{
  141.     float: left;
  142.     margin-left: 15%;
  143.     margin-top: 30px;
  144.     margin-bottom: 200px;
  145.     width: 70%;
  146.     background-color: rgba(255, 255, 255, 0.5);
  147.     border-radius: 10px;
  148.  
  149.  
  150.     #line_slider{
  151.         width: 40%;
  152.         height: 0.1px;
  153.         color: #afafaf;
  154.         margin-left: 30%;
  155.         margin-top: 500px;
  156.     }
  157. }
  158.  
  159. /* Slider */
  160.  
  161.  
  162. #back_to_camera {
  163.     clear: both;
  164.     display: block;
  165.     height: 80px;
  166.     line-height: 40px;
  167.     padding: 20px;
  168. }
  169.  
  170. .fluid_container {
  171.     margin-top: 2%;
  172.     margin-left: auto;
  173.     margin-right: auto;
  174.     padding-bottom: 400px;
  175.     width: 95%;
  176.     font-family: "Segoe UI", Arial, sans-serif;
  177.  
  178.  
  179.         #camera_wrap_1 div a{
  180.         color: #ffffff;
  181.         &:hover{
  182.             color: #BFA184;
  183.         }
  184.     }
  185. }
  186.  
  187. .camera_pag_ul{
  188.     margin-bottom: -20%;
  189. }
  190.  
  191. /* Articles */
  192.  
  193. content {
  194.     #articles {
  195.             margin-top: 200px;
  196.             margin-left: 5%;
  197.         .article{  
  198.             border-radius: $main_border_radius*2;
  199.             margin-bottom: 7%;
  200.             margin-top: -50px;
  201.             float: left;
  202.             width: 40%;
  203.             margin-right: 5%;
  204.             background: rgba(231,207,171, 0.1);
  205.             padding-left: 2%;
  206.             padding-right: 2%;
  207.  
  208.             .article_name{
  209.                 float: left;
  210.                 text-align: center;
  211.                 font-size: 1.5em;
  212.                 color: #333333;
  213.                 margin-top: 40px;
  214.                 margin-bottom: 20px;
  215.                 margin-left: 40%;
  216.  
  217.                 &:hover{
  218.                     color: #BFA184;
  219.                 }
  220.             }
  221.             &:hover{
  222.                 @include box-shadow('inset 0px 0px 35px -8px rgba(0,0,0,0.75)');
  223.                 @include transition('all 1s ease');
  224.                 background: $main_bg_color;
  225.                 color: $main_font_color;
  226.             }
  227.  
  228.             .article_image{
  229.                 object-fit: cover;
  230.                 width: 100%;
  231.                 height: 350px;
  232.                 border-radius: 5px;
  233.                 margin-bottom: 20px;
  234.  
  235.             }
  236.             .article_meta_data{
  237.  
  238.                 .article_author{
  239.                     float: left;
  240.                     color: #a5a5a5;
  241.                     margin-top: 5px;
  242.                
  243.                     &:hover{
  244.                         color: #BFA184;
  245.                         cursor: pointer;
  246.                     }
  247.                 }
  248.                 .article_date{
  249.                     float: right;
  250.                     color: #a5a5a5;
  251.                     margin-top: 5px;
  252.                 }
  253.             }
  254.             hr{
  255.                 border: none;
  256.                 height: 1px;
  257.                 width: 50%;
  258.                 margin-left: 25%;
  259.                 margin-top: 40px;
  260.                 color: #afafaf;
  261.                 background-color: #afafaf;
  262.                 text-align: center;
  263.             }
  264.             .article_preview{
  265.                 float: left;
  266.                 margin-top: 40px;
  267.                 margin-left: 5%;
  268.             }
  269.             .article_next{
  270.                 float: left;
  271.                 font-size: 1.1em;
  272.                 margin-top: 40px;
  273.                 font-weight: bold;
  274.                 color: #333333;
  275.                 margin-bottom: 40px;
  276.                 margin-left: 5%;
  277.  
  278.                 &:hover{
  279.                     color: #BFA184;
  280.                 }
  281.             }
  282.         }
  283.     }
  284. }
  285.  
  286.  
  287.  
  288. /* paginator */
  289.  
  290. content {
  291.  
  292.         .paginator{
  293.         float: left;
  294.         margin-left: 20%;
  295.         margin-bottom: 7%;
  296.         width: 50%;
  297.  
  298.         .page_number_notActive{
  299.             font-size: 1.5em;
  300.             height: 20%;
  301.             border-radius: $main_border_radius;
  302.             margin-left: 3%;
  303.             padding-left: 2%;
  304.             padding-right: 2%;
  305.             background-color: #BFA184;
  306.  
  307.             &:hover{
  308.                 background-color: rgba(255, 255, 255, 0.1);
  309.                 color: #BFA184;
  310.             }
  311.         }
  312.         .page_number_active{
  313.             font-size: 1.5em;
  314.             height: 20%;
  315.             border-radius: $main_font_color;
  316.             margin-left: 3%;
  317.             padding-left: 2%;
  318.             padding-right: 2%;
  319.             background-color: rgba(255, 255, 255, 0.1);
  320.  
  321.         }
  322.     }
  323. }
  324.  
  325.  
  326.  
  327.  
  328.  
  329.  
  330.  
  331. /* footer */
  332.  
  333. footer{
  334.     margin-bottom: 50px;
  335.  
  336.     .right_sidebar_bottom{
  337.         float: right;
  338.         margin-top: 3%;
  339.         margin-right: 3%;
  340.         a{
  341.             padding-left: 10px;
  342.             padding-right: 10px;
  343.             font-size: 1.1em;
  344.  
  345.             &:hover{
  346.                 color: $main_font_hover_color;
  347.             }
  348.         }
  349.     }
  350.     .license_information{
  351.         float: left;
  352.         margin-left: 3%;
  353.         margin-top: 3%;
  354.         font-size: 1.1em;
  355.     }
  356. }
  357.  
  358.  
  359. /* feedback */
  360. content {
  361.     .error_show{
  362.         margin-top: 10px;
  363.         text-align: center;
  364.         color: red;
  365.     }
  366.     form {
  367.         input {
  368.             width: 40%;
  369.             margin-left: 30%;
  370.             float: left;
  371.             border-radius: $main_border_radius;
  372.             border: 2px solid silver;
  373.             padding: 5px;
  374.             color: #E5C19E;
  375.             margin-bottom: 20px;
  376.             font-size: 1.2em;
  377.             background-color: #F0F0F0;
  378.  
  379.             #send_message {
  380.                 margin-top: 3%;
  381.                 color: #BFA184;
  382.                 margin-bottom: 3%;
  383.  
  384.                 &:hover{
  385.                     border: 2px solid #f8d881;
  386.                     cursor: pointer;
  387.                 }
  388.             }
  389.  
  390.             &:focus{
  391.                 border: 2px solid #E5C19E;
  392.                 background-color: #ffffff;
  393.             }
  394.             &:hover{
  395.                 @extend input:focus;
  396.             }
  397.         }      
  398.         textarea{
  399.             width: 50%;
  400.             height: 200px;
  401.             margin-left: 25%;
  402.             float: left;
  403.             border-radius: $main_border_radius;
  404.             border: 2px solid silver;
  405.             padding: 5px;
  406.             color: #E5C19E;
  407.             margin-bottom: 10px;
  408.             font-size: 1.2em;
  409.             resize: none; /* Способ убрать изменитель масштаба textarea */
  410.             background-color: #F0F0F0;
  411.  
  412.             &:hover{
  413.                 @extend input:hover;
  414.             }
  415.             &:focus{
  416.                 @extend textarea:hover;
  417.             }
  418.         }
  419.  
  420.         h2{
  421.             text-align: center;
  422.             color: #333333;
  423.             padding-bottom: 20px;
  424.             margin-top: 10px;
  425.         }
  426.     }
  427.  
  428.  
  429.     #feedback_information{
  430.         float: left;
  431.         background-color: #E5C19E;
  432.         font-size: 1.2em;
  433.         width: 100%;
  434.         font-weight: bold;
  435.     }
  436. }
  437.  
  438.  
  439.  
  440.  
  441. /* about us */
  442.  
  443.  
  444. content {
  445.     #about_us {
  446.         width: auto;
  447.         height: 250px;
  448.  
  449.         h1{
  450.             text-align: center;
  451.             margin-top: 2%;
  452.         }
  453.         #parag_1{
  454.             margin-left: 3%;
  455.             margin-right: 2%;
  456.             margin-bottom: 2%;
  457.             margin-top: 1%;
  458.         }
  459.         #partners{
  460.             margin-left: 3%;
  461.             margin-right: 2%;
  462.             margin-bottom: 2%;
  463.             margin-top: 1%;
  464.             font-weight: bold;
  465.             font-size: 1.2em;
  466.             width: 590px;
  467.             height: 20px;
  468.  
  469.             a:hover{
  470.                 color: #BFA184;
  471.                 font-family: 'MV Boli', Arial, sans-serif;
  472.             }
  473.         }
  474.  
  475.     }
  476. }
  477.  
  478. /* articles_categories */
  479.  
  480. #articles_alert{
  481.     color: red;
  482.     font-size: 1.4em;
  483.     text-align: center;
  484.     margin-top: -20%;
  485. }
  486.  
  487. /* article_content */
  488.  
  489.  
  490. content {
  491.     .article_content {
  492.         float: left;
  493.         margin-left: 10%;
  494.         margin-right: 5%;
  495.         margin-bottom: 200px;
  496.         width: 80%;
  497.         border-radius: $main_border_radius*2;
  498.  
  499.         h1{
  500.             text-align: center;
  501.             margin-top: 50px;
  502.             margin-bottom:50px;
  503.         }
  504.  
  505.         .info_container{
  506.             float: right;
  507.             margin-top: 50px;
  508.             font-size: 1.2em;
  509.  
  510.             span{
  511.                 padding: 10px;
  512.             }
  513.             li{
  514.                 list-style-type: none;
  515.                 margin-bottom: 30px;
  516.             }
  517.         }
  518.         .article_content_image{
  519.             object-fit: cover;
  520.             width: 100%;
  521.             height: 100%;
  522.             border-radius: $main_border_radius;
  523.             cursor: zoom-in;
  524.         }
  525.         p{
  526.             margin: 20px;
  527.             font-size: 1.2em;
  528.         }
  529.  
  530.         .block{
  531.             border-radius: $main_border_radius*2;
  532.             margin-bottom: 10%;
  533.             float: left;
  534.             @include box-shadow('0px 0px 35px -8px rgba(0,0,0,0.75)');
  535.             @include transition('all 1s ease');
  536.             background: rgba(231,207,171, 0.3);
  537.             color: black;
  538.  
  539.  
  540.         }
  541.     }
  542. }
  543.  
  544. /* Image zoom */
  545.  
  546.  
  547. /* картинка на странице */
  548. .minimized {
  549.   width: 300px;
  550.   cursor: pointer;
  551. }
  552.  
  553.  
  554. /* увеличенная картинка */
  555. #magnify {
  556.   display: none;
  557.   /* position: absolute; upd: 24.10.2016 */
  558.   position: fixed;
  559.   max-width: 1300px;
  560.   height: auto;
  561.   z-index: 9999;
  562. }
  563.  
  564. #magnify img {
  565.   width: 100%;
  566. }
  567.  
  568. /* затемняющий фон */
  569. #overlay {
  570.   display: none;
  571.   background: #000;
  572.   position: fixed;
  573.   top: 0;
  574.   left: 0;
  575.   height: 100%;
  576.   width: 100%;
  577.   opacity: 0.5;
  578.   z-index: 9990;
  579. }
  580.  
  581. /* кнопка закрытия */
  582. #close-popup {
  583.     width: 30px;
  584.     height: 30px;
  585.     background: #FFFFFF;
  586.     border: 1px solid #AFAFAF;
  587.     border-radius: $main_border_radius*3;
  588.     cursor: pointer;
  589.     position: absolute;
  590.     top: 15px;
  591.     right: 15px;
  592.  
  593.     i{
  594.         width: 30px;
  595.         height: 30px;
  596.         background: url(https://codernote.ru/files/cross.png) no-repeat center center;
  597.         background-size: 16px 16px;
  598.         display: block;
  599.     }
  600.  
  601.     &:hover{
  602.         animation: rota 4s infinite normal;
  603.         -webkit-animation-iteration-count: 1;
  604.         animation-iteration-count: 1;
  605.     }
  606. }
  607.  
  608. @keyframes rota {
  609.  25% { transform: rotate(360deg); }
  610. }
  611.  
  612. /* Similar articles */
  613.  
  614. content .similar_articles{
  615.     float: left;
  616.         h1{
  617.         text-align: center;
  618.     }
  619. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!