API tools faq
paste
Advertisement
Codesbyneen

012. Layout - Outro

Codesbyneen
Apr 29th, 2017
894
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 15.96 KB | None | 0 0
raw download clone embed print report
  1. /* -----------------------------------
  2.    This is "Outro",
  3.    a Flexible Squares layout by neen
  4.    available at revolumna
  5.    ----------------------------------- */
  6.  
  7. /* [ FONTS ]
  8.    ----------------------------------- */
  9.  
  10. @font-face {
  11.     font-family: 'Karla';
  12.     font-style: normal;
  13.     font-weight: 400;
  14.     src: local('Karla'), local('Karla-Regular'), url(https://fonts.gstatic.com/s/karla/v5/31P4mP32i98D9CEnGyeX9Q.woff2) format('woff2');
  15. }
  16.  
  17. @font-face {
  18.     font-family: 'Karla';
  19.     font-style: normal;
  20.     font-weight: 400;
  21.     src: local('Karla'), local('Karla-Regular'), url(https://fonts.gstatic.com/s/karla/v5/Zi_e6rBgGqv33BWF8WTq8g.woff2) format('woff2');
  22. }
  23.  
  24. @font-face {
  25.     font-family: 'Karla';
  26.     font-style: normal;
  27.     font-weight: 700;
  28.     src: local('Karla Bold'), local('Karla-Bold'), url(https://fonts.gstatic.com/s/karla/v5/r3NqIkFHFaF3esZDc3WT5BTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
  29. }
  30.  
  31. @font-face {
  32.     font-family: 'Karla';
  33.     font-style: normal;
  34.     font-weight: 700;
  35.     src: local('Karla Bold'), local('Karla-Bold'), url(https://fonts.gstatic.com/s/karla/v5/suoMYBGv5sGCUIrF9mVTffesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  36. }
  37.  
  38. @font-face {
  39.     font-family: 'Karla';
  40.     font-style: italic;
  41.     font-weight: 400;
  42.     src: local('Karla Italic'), local('Karla-Italic'), url(https://fonts.gstatic.com/s/karla/v5/uo43pN46LBw6Xe8n1TeyhPY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
  43. }
  44.  
  45. @font-face {
  46.     font-family: 'Karla';
  47.     font-style: italic;
  48.     font-weight: 400;
  49.     src: local('Karla Italic'), local('Karla-Italic'), url(https://fonts.gstatic.com/s/karla/v5/LCDsRHICy9vmW7BLwm8u7g.woff2) format('woff2');
  50. }
  51.  
  52. /* [ GLOBAL ]
  53.    ----------------------------------- */
  54.  
  55. body {
  56.     color: #999;
  57.     font-family: 'Karla', sans-serif;
  58.     font-size: 11px;
  59.     font-weight: 400;
  60. }
  61.  
  62. a,
  63. a:link,
  64. a:visited {
  65.     color: #bbb;
  66.     text-decoration: none;
  67.     -webkit-transition: color .5s ease-out;
  68.        -moz-transition: color .5s ease-out;
  69.          -o-transition: color .5s ease-out;
  70.             transition: color .5s ease-out;
  71. }
  72.  
  73. a:hover {
  74.     color: #444;
  75.     text-decoration: none;
  76. }
  77.  
  78. #content {
  79.     margin: 80px auto 0;
  80.     width: 590px;
  81. }
  82.  
  83. #maincontent {
  84.     margin-left: 190px;
  85.     margin-top: 60px;
  86.     width: 400px;
  87. }
  88.  
  89. /* [ HEADER ]
  90.    ----------------------------------- */
  91.  
  92. #header {
  93.     margin-left: 190px;
  94.     width: 400px;
  95. }
  96.  
  97. .navheader {
  98.     display: none;
  99. }
  100.  
  101. .title {
  102.     color: #444;
  103.     font-family: Karla, serif;
  104.     font-size: 14px;
  105.     font-weight: 700;
  106.     letter-spacing: 1px;
  107.     margin-bottom: 5px;
  108.     text-align: center;
  109.     text-transform: uppercase;
  110. }
  111.  
  112. .subtitle {
  113.     background-color: #fafafa;
  114.     border-bottom: 1px solid #eee;
  115.     font-size: 10px;
  116.     font-style: italic;
  117.     line-height: 1.3;
  118.     margin: 0 auto;
  119.     padding: 10px;
  120.     text-align: center;
  121.     width: 140px;
  122. }
  123.  
  124. /* [ FOOTER ]
  125.    ----------------------------------- */
  126.  
  127. .lj-view-recent #footer,
  128. .lj-view-friends #footer {
  129.     border-top: 1px solid #eee;
  130.     margin: 0 0 0 190px;
  131.     padding: 20px 0;
  132.     text-align: center;
  133.     width: 400px;
  134. }
  135.  
  136. .lj-view-recent #footer a,
  137. .lj-view-recent #footer a:link,
  138. .lj-view-friends #footer a,
  139. .lj-view-friends #footer a:link {
  140.     color: #444;
  141.     font-size: 10px;
  142.     font-weight: 700;
  143.     letter-spacing: .7px;
  144.     text-transform: uppercase;
  145.     -webkit-transition: letter-spacing .5s ease-out;
  146.        -moz-transition: letter-spacing .5s ease-out;
  147.          -o-transition: letter-spacing .5s ease-out;
  148.             transition: letter-spacing .5s ease-out;
  149. }
  150.  
  151. .lj-view-recent #footer a:hover,
  152. .lj-view-friends #footer a:hover {
  153.     letter-spacing: 2px;
  154. }
  155.  
  156. .navfooter {
  157.     display: inline;
  158.     padding: 0;
  159. }
  160.  
  161. .navfooter li {
  162.     display: inline-block;
  163.     list-style: none;
  164.     margin-left: 10px;
  165.     margin-right: 10px;
  166.     padding: 0;
  167. }
  168.  
  169. #footer .viewing {
  170.     color: #444;
  171.     font-size: 10px;
  172.     font-style: italic;
  173. }
  174.  
  175. /* [ SIDEBAR ]
  176.    ----------------------------------- */
  177.  
  178. #sidebar {
  179.     float: left;
  180.     position: fixed;
  181.     width: 150px;
  182. }
  183.  
  184. #sidebar a,
  185. #sidebar a:link,
  186. #sidebar a:visited {
  187.     font-size: 8px;
  188.     font-weight: 700;
  189.     letter-spacing: .7px;
  190.     text-transform: uppercase;
  191. }
  192.  
  193. #sidebar a:hover {
  194.     color: #444;
  195.     text-decoration: none;
  196. }
  197.  
  198. .sbarlist {
  199.     list-style: none;
  200.     margin-left: 0;
  201.     padding-left: 0;
  202. }
  203.  
  204. #sidebar_calendar.sbarbody,
  205. #sidebar_summary.sbarbody,
  206. #sidebar_tags.sbarbody {
  207.     display: none;
  208. }
  209.  
  210. /* [ default userpic ] ----- */
  211.  
  212. .defaultuserpic {
  213.     background-color: #fafafa;
  214.     margin: 0 auto -11px;
  215.     padding: 10px 5px 0;
  216.     text-align: center;
  217. }
  218.  
  219. .defaultuserpic img {
  220.     -webkit-border-radius: 50%;
  221.        -moz-border-radius: 50%;
  222.             border-radius: 50%;
  223.     height: 40px;
  224.     width: 40px;
  225. }
  226.  
  227. /* [ blurb ] ----- */
  228.  
  229. .sbartitle {
  230.     background-color: #fafafa;
  231.     border-bottom: 1px solid #eee;
  232.     color: #444;
  233.     font-size: 12px;
  234.     font-weight: 700;
  235.     letter-spacing: 1px;
  236.     list-style: none;
  237.     padding-bottom: 5px;
  238.     padding-top: 10px;
  239.     text-align: center;
  240.     text-transform: uppercase;
  241. }
  242.  
  243. .sbarbody2 {
  244.     font-size: 10px;
  245.     line-height: 1.5;
  246.     margin-top: -1px;
  247.     padding: 0 5px;
  248.     text-align: center;
  249. }
  250.  
  251. /* [ link list ] ----- */
  252.  
  253. #sidebar_linklist.sbarbody .sbarlist .sbartitle {
  254.     display: none;
  255. }
  256.  
  257. #sidebar_linklist.sbarbody {
  258.     border-top: 1px solid #eee;
  259.     margin: 10px 15px 0;
  260.     text-align: center;
  261. }
  262.  
  263. #sidebar_linklist.sbarbody .sbarcontent {
  264.     margin-top: -1px;
  265. }
  266.  
  267. #sidebar_linklist.sbarbody .sbaritem {
  268.     display: inline-block;
  269. }
  270.  
  271. #sidebar_linklist.sbarbody .sbaritem:after {
  272.     color: #d8d8d8;
  273.     content: '/';
  274.     font-size: 8px;
  275.     font-weight: 400;
  276.     margin: 0 3px;
  277. }
  278.  
  279. #sidebar_linklist.sbarbody .sbaritem:last-of-type:after {
  280.     content: normal;
  281. }
  282.  
  283. /* [ TAGS, TAGS PAGE ]
  284.    ----------------------------------- */
  285.  
  286. .ljtags {
  287.     font-size: 0;
  288.     margin-top: 20px;
  289.     text-align: center;
  290. }
  291.  
  292. .ljtags:before {
  293.     content: 'TAGS';
  294.     font-size: 8px;
  295.     font-weight: 700;
  296.     letter-spacing: .7px;
  297.     margin-right: 8px;
  298.     text-transform: uppercase;
  299. }
  300.  
  301. .ljtags a,
  302. .ljtags a:link,
  303. .ljtags a:visited {
  304.     font-size: 8px;
  305.     font-weight: 700;
  306.     letter-spacing: .7px;
  307.     margin-right: 8px;
  308.     text-transform: uppercase;
  309. }
  310.  
  311. .ljtags a:hover {
  312.     color: #444;
  313. }
  314.  
  315. .ljtags a:before {
  316.     content: '#';
  317.     font-weight: 400;
  318. }
  319.  
  320. .ljtags a:last-of-type {
  321.     margin-right: 0;
  322. }
  323.  
  324. h2 {
  325.     color: #444;
  326.     font-size: 12px;
  327.     font-weight: 700;
  328.     letter-spacing: .7px;
  329.     text-align: center;
  330.     text-transform: uppercase;
  331. }
  332.  
  333. .ljtaglist {
  334.     margin: 1px 0 10px;
  335.     padding: 10px;
  336.     text-align: left;
  337. }
  338.  
  339. .ljtaglist li {
  340.     color: #444;
  341.     font-style: italic;
  342.     list-style-type: circle;
  343.     margin-bottom: 5px;
  344.     margin-left: 10px;
  345.     padding-left: 10px;
  346.     text-transform: lowercase;
  347. }
  348.  
  349. .ljtaglist li:last-of-type {
  350.     margin-bottom: 0;
  351. }
  352.  
  353. .ljtaglist li a {
  354.     font-style: normal;
  355. }
  356.  
  357. /* [ ENTRIES ]
  358.    ----------------------------------- */
  359.  
  360. .entry_text {
  361.     background-color: #fafafa;
  362.     border-bottom: 1px solid #eee;
  363.     line-height: 1.6;
  364.     margin: 0;
  365.     min-height: 34px;
  366.     padding: 10px 15px;
  367.     text-align: justify;
  368. }
  369.  
  370. .entry ul,
  371. .entry ol {
  372.     margin: 0 0 0 20px;
  373.     padding: 0;
  374. }
  375.  
  376. .entry ul li,
  377. .entry ol li {
  378.     margin-bottom: 4px;
  379.     padding-left: 10px;
  380. }
  381.  
  382. .entry ul li:last-of-type,
  383. .entry ol li:last-of-type {
  384.     margin-bottom: 0;
  385. }
  386.  
  387. .entry ul li ~ br,
  388. .entry ol li ~ br {
  389.     display: none;
  390. }
  391.  
  392. .entry ul {
  393.     list-style-type: circle;
  394. }
  395.  
  396. blockquote {
  397.     color: #444;
  398.     font-style: italic;
  399.     margin: 0 20px;
  400. }
  401.  
  402. /* [ USERPIC, USERPIC FRIENDS ]
  403.    ----------------------------------- */
  404.  
  405. .userpic,
  406. .userpicfriends {
  407.     background: transparent !important;
  408.     float: right;
  409.     font-size: 0;
  410.     margin-right: -45px !important;
  411. }
  412.  
  413. .userpic img,
  414. .userpicfriends img {
  415.     background: transparent !important;
  416.     -webkit-border-radius: 5px;
  417.        -moz-border-radius: 5px;
  418.             border-radius: 5px;
  419.     height: 35px;
  420.     width: 35px;
  421. }
  422.  
  423. .userpic font,
  424. .userpicfriends font,
  425. .userpic a,
  426. .userpicfriends a {
  427.     display: none;
  428. }
  429.  
  430. /* [ DATE, SUBJECT, CURRENTS ]
  431.    ----------------------------------- */
  432.  
  433. .date {
  434.     color: #444;
  435.     display: inline-block;
  436.     font-size: 10px;
  437.     font-style: italic;
  438.     margin: 0 0 3px 200px;
  439.     text-align: right;
  440.     text-transform: lowercase;
  441.     width: 200px;
  442. }
  443.  
  444. .subject {
  445.     color: #444;
  446.     font-size: 12px;
  447.     font-weight: 700;
  448.     letter-spacing: .7px;
  449.     margin: 0 -9px 5px 0;
  450.     padding: 0;
  451.     text-align: right;
  452.     text-transform: uppercase;
  453. }
  454.  
  455. .subject a,
  456. .subject a:link,
  457. .subject a:visited {
  458.     color: #444;
  459.     font-size: 12px;
  460.     font-weight: 700;
  461.     letter-spacing: .7px;
  462.     text-align: right;
  463.     text-transform: uppercase;
  464. }
  465.  
  466. .currents {
  467.     height: 48px;
  468.     margin-left: 405px;
  469.     margin-top: -49px;
  470.     position: relative;
  471.     width: 200px;
  472. }
  473.  
  474. .currents > div:first-of-type {
  475.     bottom: 16px;
  476.     position: absolute;
  477. }
  478.  
  479. .currents > div:only-of-type,
  480. .currents > div:last-of-type {
  481.     bottom: 0;
  482.     position: absolute;
  483. }
  484.  
  485. .currents strong {
  486.     display: none;
  487. }
  488.  
  489. .currentmood,
  490. .currentmusic,
  491. .currentlocation {
  492.     color: #444;
  493.     font-size: 10px;
  494.     font-style: italic;
  495.     padding-left: 16px;
  496.     padding-top: 4px;
  497.     text-align: left;
  498.     text-transform: lowercase;
  499. }
  500.  
  501. .currentlocation a,
  502. .currentlocation a:link,
  503. .currentlocation a:visited,
  504. .currentlocation a:hover,
  505. .currentmusic a,
  506. .currentmusic a:link,
  507. .currentmusic a:visited,
  508. .currentmusic a:hover {
  509.     color: #444;
  510.     cursor: text;
  511.     font-size: 10px;
  512. }
  513.  
  514. .currentlocation {
  515.     background: url(http://i.imgur.com/e20fF22.gif) 2px 5px no-repeat;
  516. }
  517.  
  518. .currentmood {
  519.     background: url(http://i.imgur.com/zeF9gtJ.gif) 2px 5px no-repeat;
  520. }
  521.  
  522. .currentmusic {
  523.     background: url(http://i.imgur.com/4HwFdKI.gif) 2px 6px no-repeat;
  524. }
  525.  
  526. .meta-mood-img {
  527.     display: none;
  528. }
  529.  
  530. /* [ RECENT POSTS ]
  531.    ----------------------------------- */
  532.  
  533. .entry--threeposts {
  534.     margin-left: 0 !important;
  535. }
  536.  
  537. .threeposts__item {
  538.     margin-top: 5px !important;
  539.     padding-left: 0 !important;
  540.     text-align: justify;
  541. }
  542.  
  543. .threeposts__items {
  544.     margin-left: 0 !important;
  545. }
  546.  
  547. .threeposts__header {
  548.     color: #444;
  549.     font-family: 'Karla', sans-serif;
  550.     font-size: 12px;
  551.     font-weight: 700;
  552.     letter-spacing: .7px;
  553.     margin: 0 0 15px;
  554.     padding: 0;
  555.     text-align: center;
  556.     text-transform: uppercase;
  557. }
  558.  
  559. .threeposts__item:after {
  560.     opacity: 0;
  561. }
  562.  
  563. /* [ COMMENTS, COMMENTS PAGE ]
  564.    ----------------------------------- */
  565.  
  566. .comments {
  567.     font-size: 0;
  568.     margin-top: 10px;
  569.     text-align: center;
  570. }
  571.  
  572. .comments a,
  573. .comments a:link,
  574. .comments a:visited {
  575.     color: #444;
  576.     font-size: 10px;
  577.     font-weight: 700;
  578.     letter-spacing: .7px;
  579.     margin-left: 5px;
  580.     margin-right: 5px;
  581.     text-transform: uppercase;
  582.     -webkit-transition: letter-spacing .5s ease-out;
  583.        -moz-transition: letter-spacing .5s ease-out;
  584.          -o-transition: letter-spacing .5s ease-out;
  585.             transition: letter-spacing .5s ease-out;
  586. }
  587.  
  588. .comments a:hover {
  589.     letter-spacing: 2px;
  590. }
  591.  
  592. .datesubjectcomment {
  593.     color: #444;
  594.     font-size: 10px;
  595.     font-style: italic;
  596.     text-transform: lowercase;
  597. }
  598.  
  599. .datesubjectcomment strong {
  600.     color: #444;
  601.     font-size: 10px;
  602.     font-style: normal;
  603.     font-weight: 700;
  604.     letter-spacing: .7px;
  605.     text-transform: uppercase;
  606. }
  607.  
  608. .userpiccomment {
  609.     -webkit-border-radius: 5px;
  610.        -moz-border-radius: 5px;
  611.             border-radius: 5px;
  612.     float: left;
  613.     height: 45px;
  614.     margin-right: 5px;
  615.     position: relative;
  616.     width: 45px;
  617. }
  618.  
  619. .commentreply {
  620.     margin-top: 10px;
  621. }
  622.  
  623. .commentbox,
  624. .commentboxpartial {
  625.     background-color: #fafafa;
  626.     border-bottom: 1px solid #eee;
  627.     margin: 0 0 10px;
  628.     padding: 10px;
  629. }
  630.  
  631. center.comment-links {
  632.     margin: 0 0 10px !important;
  633. }
  634.  
  635. .comment-links {
  636.     margin-top: 10px !important;
  637. }
  638.  
  639. .comment-links div {
  640.     padding: 0 !important;
  641. }
  642.  
  643. #footer.box {
  644.     margin-top: 10px;
  645. }
  646.  
  647. #subject.textbox.textbox-subject {
  648.     border: 1px solid #eee;
  649.     margin-right: 5px;
  650.     width: 80% !important;
  651. }
  652.  
  653. textarea.textbox {
  654.     border: 1px solid #eee;
  655.     width: 100% !important;
  656. }
  657.  
  658. input,
  659. textarea,
  660. select {
  661.     border: 1px solid #eee;
  662.     color: #444;
  663.     font-family: 'Courier New';
  664.     font-size: 8pt;
  665.     padding: 3px;
  666. }
  667.  
  668. #submitpost.commentform-button-submit,
  669. #submitmoreopts.commentform-button-opts,
  670. #postform-submit-comment-button.commentform-button-submit,
  671. .commentform-button.commentform-button-preview,
  672. .b-postform-quote {
  673.     background-color: #fff;
  674.     border: 1px solid #eee;
  675.     color: #444;
  676.     font-family: 'Karla', sans-serif;
  677.     font-size: 11px;
  678.     font-weight: 700;
  679.     padding: 2px;
  680. }
  681.  
  682. .commentform-title.commentform-login-title,
  683. .commentform-title.commentform-subject-title,
  684. .commentform-title.commentform-msg-title {
  685.     font-weight: 700;
  686. }
  687.  
  688. .commentform-alert-wrapper {
  689.     font-size: 8pt;
  690. }
  691.  
  692. /* [ ARCHIVE ]
  693.    ----------------------------------- */
  694.  
  695. .year {
  696.     border: 1px solid #eee;
  697.     margin-bottom: 30px;
  698.     padding: 5px;
  699.     text-align: center;
  700. }
  701.  
  702. .year li {
  703.     display: inline-block;
  704.     margin: 0 3px;
  705. }
  706.  
  707. .yeartable {
  708.     text-align: center;
  709.     width: 400px;
  710. }
  711.  
  712. .yeartable .yeardate {
  713.     border: 1px solid #eee;
  714.     padding: 15px 8px 0;
  715.     text-align: center;
  716. }
  717.  
  718. .yeartable div {
  719.     text-align: center !important;
  720. }
  721.  
  722. .yeartable .yearday {
  723.     background-color: #fafafa;
  724.     font-size: 10px;
  725.     padding: 10px;
  726.     text-align: center;
  727.     text-transform: uppercase;
  728. }
  729.  
  730. .yearmonth:first-of-type {
  731.     color: #444;
  732.     font-size: 12px;
  733.     font-weight: 700;
  734.     letter-spacing: .7px;
  735.     text-transform: uppercase;
  736. }
  737.  
  738. dd {
  739.     border-bottom: 1px solid #eee;
  740.     color: #444;
  741.     font-style: italic;
  742.     margin-bottom: 10px;
  743.     padding: 5px 0;
  744.     text-align: left;
  745.     text-transform: lowercase;
  746. }
  747.  
  748. dd a {
  749.     font-style: normal;
  750.     text-transform: none;
  751. }
  752.  
  753. .entry dl dt a,
  754. .entry dl dt a:hover {
  755.     color: #444;
  756.     font-size: 12px;
  757.     font-weight: 700;
  758.     letter-spacing: .7px;
  759.     text-transform: uppercase;
  760. }
  761.  
  762. /* [ TINY ICONS ]
  763.    ----------------------------------- */
  764.  
  765. span.i-ljuser img[src*="img/userinfo_v8.svg"] {
  766.     background: transparent url(http://i.imgur.com/VTomZuh.gif) no-repeat !important;
  767.     height: 0 !important;
  768.     padding: 13px 0 0 10px  !important;
  769.     width: 0 !important;
  770. }
  771.  
  772. span.i-ljuser img[src*="img/community.gif"] {
  773.     background: transparent url(http://i.imgur.com/egYSa3B.gif) no-repeat !important;
  774.     height: 0 !important;
  775.     padding: 13px 0 0 10px  !important;
  776.     width: 0 !important;
  777. }
  778.  
  779. img[src*="img/icon_protected.gif"] {
  780.     background: transparent url(http://i.imgur.com/BxPcfTk.gif) no-repeat 1px 1px !important;
  781.     height: 0 !important;
  782.     padding: 11px 0 0 11px  !important;
  783.     width: 0 !important;
  784. }
  785.  
  786. img[src*="icon_private.gif"] {
  787.     background: transparent url(http://i.imgur.com/m910vvm.gif) no-repeat 1px 1px !important;
  788.     height: 0 !important;
  789.     padding: 11px 0 0 10px  !important;
  790.     width: 0 !important;
  791. }
  792.  
  793. img[src*="img/icon_sticky.png"] {
  794.     background: transparent url(http://i.imgur.com/ISNKUp3.gif) no-repeat 1px 1px !important;
  795.     height: 0 !important;
  796.     padding: 11px 0 0 11px  !important;
  797.     width: 0 !important;
  798. }
  799.  
  800. /* [ MISC ]
  801.    ----------------------------------- */
  802.  
  803. .clear {
  804.     display: none;
  805. }
  806.  
  807. .clearfoot {
  808.     clear: both;
  809.     height: 0;
  810. }
  811.  
  812. .separator {
  813.     height: 40px;
  814. }
  815.  
  816. .skiplinks {
  817.     border: 1px solid #eee;
  818.     color: #bbb;
  819.     margin-bottom: 15px;
  820.     padding: 5px;
  821.     text-align: center;
  822. }
  823.  
  824. .skiplinks a {
  825.     margin-left: 2px;
  826.     margin-right: 2px;
  827. }
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!