API tools faq
paste
vonko1988

SliceAndDice_PSD_to_HTML_homework_task2.less

vonko1988
Apr 15th, 2014
118
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 16.36 KB | None | 0 0
raw download clone embed print report
  1. /*The usual resets*/
  2.  
  3. html, body, div, header, img, nav, ul, li, a, p, time, aside, section, h1, h2, footer, span {
  4.     margin: 0;
  5.     padding: 0;
  6. }
  7.  
  8. header, nav, section, footer, article, aside {
  9.     display: block;
  10. }
  11.  
  12. div, header, nav, section, footer, article, aside {
  13.     -moz-box-sizing: border-box;
  14.     -webkit-box-sizing: border-box;
  15.     box-sizing: border-box;
  16. }
  17.  
  18. a {
  19.     display: inline-block;
  20.     text-decoration: none;
  21.     color: black;
  22. }
  23.  
  24. html, body, div#wrapper, div#background {
  25.     min-height: 100%;
  26. }
  27.  
  28. ul {
  29.     list-style-type: none;
  30. }
  31.  
  32. /*Some variables*/
  33. @wr_color1: #ffffff;
  34. @wr_color2: #dfd3b5;
  35. @bg_color1: #c1ab75;
  36. @bg_color2: #9a8a65;
  37.  
  38. /*some mixins*/
  39. .gradient(@from_color, @to_color) {
  40.     background: @from_color; /* Old browsers */
  41.     /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  42.     background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  43.     background: -moz-linear-gradient(top, @from_color 0%, @to_color 100%); /* FF3.6+ */
  44.     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@from_color), color-stop(100%,@to_color)); /* Chrome,Safari4+ */
  45.     background: -webkit-linear-gradient(top, @from_color 0%,@to_color 100%); /* Chrome10+,Safari5.1+ */
  46.     background: -o-linear-gradient(top, @from_color 0%,@to_color 100%); /* Opera 11.10+ */
  47.     background: -ms-linear-gradient(top, @from_color 0%,@to_color 100%); /* IE10+ */
  48.     background: linear-gradient(to bottom, @from_color 0%,@to_color 100%); /* W3C */
  49.     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@from_color', endColorstr='@to_color',GradientType=0 ); /* IE6-8 */
  50. }
  51.  
  52. .clearfix {
  53.     zoom: 1;
  54.  
  55.     &:after {
  56.         display: block;
  57.         content: "";
  58.         height: 0;
  59.         clear: both;
  60.     }
  61. }
  62.  
  63.  
  64. body {
  65.  
  66.     div#wrapper {
  67.         width: 100%;
  68.         overflow-x: hidden;
  69.         .gradient(@wr_color1, @wr_color2);
  70.  
  71.         div#background {
  72.             position: relative;
  73.             width: 90%;
  74.             margin: 0 auto;
  75.             .gradient(@bg_color1, @bg_color2);
  76.             padding: 1%;
  77.             border-radius: 15px;
  78.             .clearfix();
  79.  
  80.             /*The header including the two logo images*/
  81.  
  82.             header {
  83.                 padding-bottom: 18%;
  84.                 border-top-right-radius: 10px;
  85.  
  86.                 /*The left logo pic*/
  87.                 img#logo {
  88.                     position:absolute;
  89.                     width: 29%;
  90.                     top:0;
  91.                 }
  92.  
  93.                 /*The right logo pic*/
  94.                 img#header_pic {
  95.                     position: absolute;
  96.                     z-index: 4;
  97.                     right: 1.1%;
  98.                     top: 0.3%;
  99.                     float: right;
  100.                     width: 66.2%;
  101.                 }
  102.             }
  103.  
  104.             /*This div contains everything but the header. I put it,
  105.                 so to make white the spaces at the bottom that are not with
  106.                 white background.*/
  107.             div#inner_wrapper {
  108.                 position: relative;
  109.                 height:80%;
  110.                 z-index: 1;
  111.                 padding-bottom: 0.1%;
  112.                 background: #ffffff;
  113.                 border-top-left-radius: 15px;
  114.                 .clearfix();
  115.  
  116.                 /*The right section containing the articles*/
  117.                 section {
  118.                     margin-top: 2.8%;
  119.                     position: relative;
  120.                     background: #ffffff;
  121.                     padding: 16% 0 5% 0;
  122.                     width: 63%;
  123.                     float: right;
  124.  
  125.                     /*The main heading in the section*/
  126.                     h1 {
  127.                         color: #bc8801;
  128.                         font-size: 1.8em;
  129.                         font-weight: normal;
  130.                         padding-bottom: 1.6%;
  131.                         border-bottom: 3px solid #cfbd93;
  132.                     }
  133.  
  134.                     /*Article needs to be clearfixed because the image is floated*/
  135.                     article {
  136.                         padding: 2% 0 3% 0;
  137.                         .clearfix();
  138.  
  139.                         /*The heading below h1*/
  140.                         h2 {
  141.                             color: #d0b671;
  142.                             font-size: 1.5em;
  143.                             font-weight: normal;
  144.                             padding-bottom: 1.6%;
  145.                             border-bottom: 3px solid #cfbd93;
  146.                             margin-bottom: 2.6%;
  147.                         }
  148.  
  149.                         /*The paragraphs in the first article are grouped in a div
  150.                             so the can be correctli positioned around the floated picture*/
  151.                         &:first-of-type {
  152.  
  153.                             div#paragraphs {
  154.                                 display: inline-block;
  155.                                 width: 55%;
  156.                                 text-align: justify;
  157.                                 margin-left: 3%;
  158.                             }
  159.                         }
  160.  
  161.  
  162.                         a {
  163.                             display:block;
  164.                             clear:left;
  165.                             color: #5a491a;
  166.                             font-size:1.1em;
  167.                             font-weight:bold;
  168.                             text-decoration: underline;
  169.                             text-align:right;
  170.                             margin-right:6%;                          
  171.                         }
  172.  
  173.                         /*The image holders will create the borders around
  174.                           the pictures*/
  175.                         div.image_holder1 {
  176.                             display: inline-block;
  177.                             float:left;
  178.                             width: 35%;
  179.                             background: #e7e0ce;
  180.                             padding: 4px;
  181.                             border-radius: 10px;
  182.                             border: 1px solid #c6b387;
  183.  
  184.                             div.image_holder2 {
  185.                                 display: block;
  186.                                 background: #ffffff;
  187.                                 padding: 4px;
  188.                                 border-radius: 10px 10px 0 0;
  189.  
  190.                                 img {
  191.                                     display: block;
  192.                                     border-radius: 5px 5px 0 0;
  193.                                     width: 100%;
  194.                                 }
  195.                             }
  196.                         }
  197.  
  198.                         /*The images and paragraphs in the second article
  199.                           have different styles*/
  200.                         &:nth-of-type(2) {
  201.                             .clearfix();
  202.  
  203.                             div.image_holder1 {
  204.                                 width: 20%;
  205.                                 margin-right: 3%;
  206.  
  207.                              
  208.  
  209.                                     span {
  210.                                         display:block;
  211.                                         width:100%;
  212.                                         text-align:center;
  213.                                         color:#958149;
  214.                                         background:white;
  215.                                         border-top:2px solid #b8b19d;
  216.                                         border-radius:0 0 10px 10px;
  217.                                     }
  218.                                
  219.                             }
  220.  
  221.                             p {
  222.                                 display: inline-block;
  223.                                 width: 22%;
  224.                                 font-size: 0.9em;
  225.                                 margin-right: 3%;
  226.                             }
  227.  
  228.                             p, div.image_holder1 {
  229.                                 float: left;
  230.                             }
  231.  
  232.                             a {
  233.                                 clear: both;
  234.                             }
  235.                         }
  236.                     }
  237.                 }
  238.  
  239.                 /*This container groups the navigation and sidebar
  240.                   at the left. I put it because they will be positioned
  241.                    absolutely so better they are positioned together.*/
  242.                 div#left_container {
  243.                     position:absolute;
  244.                     margin-top:-2.3%;
  245.                     float:left;
  246.                     width:32.3%;
  247.                     .clearfix();
  248.  
  249.                     nav {
  250.                         width:100%;
  251.                         border-radius: 15px 15px 0 0;
  252.                         background: #cdc4aa;
  253.                         padding: 8% 0 6% 0;
  254.  
  255.                         ul {
  256.  
  257.                             li {
  258.                                 position: relative;
  259.                                 background: #2a2a2a;
  260.                                 border-bottom: 1px solid #717171;
  261.                                 padding: 0.8% 0 0 3.68%;
  262.                                 background-position: 80% center;
  263.                                 background-repeat: no-repeat;
  264.  
  265.                                 &:last-of-type {
  266.                                     border-bottom: none;
  267.                                 }
  268.  
  269.                                 /*This span will create the borders left of
  270.                                     the links. That's why we positioned the li
  271.                                     relatevely*/
  272.                                 span.border_span {
  273.                                     position: absolute;
  274.                                     bottom: 0;
  275.                                     width: 5%;
  276.                                     height: 50%;
  277.                                     border-right: 1px solid #717171;
  278.                                 }
  279.  
  280.                                 a {
  281.                                     width: 80%;
  282.                                     font-size: 1.2em;
  283.                                     color: white;
  284.                                     padding: 0.6% 0 0.6% 8%;
  285.  
  286.                                     &:hover {
  287.                                         color: #e5c077;
  288.                                     }
  289.  
  290.                                     /*The right arrow right from the links'text*/
  291.                                     span {
  292.                                         float: right;
  293.                                         font-size: 0.5em;
  294.                                         margin-top: 4px;
  295.                                     }
  296.                                 }
  297.                             }
  298.                         }
  299.                     }
  300.  
  301.                     /*The sidebar below the navigation*/
  302.                     aside {
  303.                         width:100%;            
  304.                         background: #fdfbf2;
  305.                         color: #6f5f36;                      
  306.  
  307.                         ul {  
  308.                             padding: 7% 5% 4% 9%;
  309.                            
  310.                             li {
  311.                                 padding: 6% 8% 8% 0;
  312.                                 font-size:1.1em;
  313.                                 text-align: justify;
  314.  
  315.                                 &:first-of-type {
  316.                                     border-bottom: 1px dotted #ceccc7;
  317.                                 }
  318.  
  319.                                 /*Weput this tag to stress semantic meaning
  320.                                   on the date*/
  321.                                 time {
  322.                                     display: inline-block;
  323.                                     font-weight: bold;
  324.                                     margin-bottom: 4.5%;
  325.                                 }
  326.  
  327.                                 a {
  328.                                     color: #6f5f36;
  329.                                     font-weight: bold;
  330.                                     text-decoration: underline;
  331.                                     float: right;
  332.                                 }
  333.                             }
  334.                         }
  335.  
  336.                         /*The picture at the bottom of the sidebar*/
  337.                         img {
  338.                             width: 100%;
  339.                         }
  340.                     }
  341.                 }
  342.             }
  343.  
  344.             /*The footer of the page*/
  345.             footer {
  346.                 position: relative;
  347.                 background: #dfd4b5;
  348.                 color: #7d6b44;
  349.                 clear: both;
  350.                 width: 100%;
  351.                 text-align: center;
  352.                 height: 40px;
  353.                 line-height: 40px;
  354.             }
  355.         }
  356.     }
  357. }
  358.  
  359. /*Some media queries for responsive design*/
  360. @media only screen and (max-width:960px) {
  361.  
  362.     body {
  363.  
  364.         div#wrapper {
  365.  
  366.             div#background {
  367.                 width:100%;
  368.             }
  369.         }
  370.     }
  371. }
  372.  
  373. @media only screen and (max-width: 540px) {
  374.  
  375.     body {
  376.  
  377.         div#wrapper {
  378.  
  379.             div#background {
  380.  
  381.                 header {
  382.                     padding:0;
  383.  
  384.                     img#header_pic,img#logo {
  385.                         display:none;
  386.                     }
  387.                 }
  388.  
  389.                 div#inner_wrapper {
  390.  
  391.                     section {
  392.                         float: none;
  393.                         width: 100%;
  394.                         padding-top:56%;
  395.                     }
  396.  
  397.                     div#left_container {
  398.                         top:0;
  399.                         width:100%;
  400.                         margin-bottom:5%;
  401.  
  402.                         aside {
  403.                             display: none;
  404.                         }
  405.                     }
  406.                 }
  407.             }
  408.         }
  409.     }
  410. }
  411.  
  412. @media only screen and (max-width: 440px) {
  413.  
  414.     body {
  415.  
  416.         div#wrapper {
  417.  
  418.             div#background {
  419.  
  420.                 div#inner_wrapper {
  421.  
  422.                     section {
  423.                         padding-top: 63%;
  424.                     }
  425.                 }
  426.             }
  427.         }
  428.     }
  429. }
  430.  
  431. @media only screen and (max-width: 380px) {
  432.  
  433.     body {
  434.  
  435.         div#wrapper {
  436.  
  437.             div#background {
  438.  
  439.                 div#inner_wrapper {
  440.  
  441.                     section {
  442.                         padding-top: 66%;
  443.                     }
  444.                 }
  445.             }
  446.         }
  447.     }
  448. }
  449.  
  450. @media only screen and (max-width: 350px) {
  451.  
  452.     body {
  453.  
  454.         div#wrapper {
  455.  
  456.             div#background {
  457.  
  458.                 div#inner_wrapper {
  459.  
  460.                     section {
  461.                         padding-top: 70%;
  462.                     }
  463.                 }
  464.             }
  465.         }
  466.     }
  467. }
  468.  
  469. @media only screen and (max-width: 320px) {
  470.  
  471.     body {
  472.  
  473.         div#wrapper {
  474.  
  475.             div#background {
  476.                 padding: 0;
  477.  
  478.                 div#inner_wrapper {
  479.  
  480.                     section {
  481.                         padding: 0;
  482.                         padding-top: 90%;
  483.  
  484.                         article {
  485.                             padding-right: 0;
  486.  
  487.                             div.image_holder1 {
  488.                                 display: none;
  489.                             }
  490.  
  491.                             &:first-of-type {
  492.  
  493.                                 div#paragraphs {
  494.                                     width: 90%;
  495.                                 }
  496.                             }
  497.  
  498.                             &:nth-of-type(2) {
  499.  
  500.                                 p {
  501.                                     width:46%;
  502.                                 }
  503.                             }
  504.                         }
  505.  
  506.                         a {
  507.                             display: inline;
  508.                             margin-right: 0;
  509.                         }
  510.                     }
  511.                 }
  512.             }
  513.         }
  514.     }
  515. }
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!