API tools faq
paste
Advertisement
circlejourney

Vernal Regalia (Tumblr theme)

circlejourney
Jun 27th, 2014
405
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 16.00 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <!---
  4.  
  5. V E R N A L   R E G A L I A
  6. DESIGNED BY CIRCLEJOURNEY
  7. circlejourney.tumblr.com
  8.  
  9. --->
  10.    
  11.     <head>
  12.    
  13.     <!-- Variables -->
  14.    
  15.     <meta name = "select:Title style" content = "big" title = "Big title"/>
  16.     <meta name = "select:Title style" content = "small" title = "Small title"/>
  17.     <meta name = "select:Title style" content = "hidden" title = "Hidden"/>
  18.     <meta name = "image:Background" content = "http://static.tumblr.com/g06rfu3/Sinn7qlkw/colored_pattern_squares_background-other.jpg"/>
  19.     <meta name = "font:Main font" content = "Avalon"/>
  20.     <meta name = "font:Title font" content = "Helvetica"/>
  21.     <meta name = "color:Title color" content = "white"/>
  22.     <meta name = "color:Sidebar color" content = "#db0f0f"/>
  23.     <meta name = "color:Sidebar accent color" content = "#ff2b2b"/>
  24.     <meta name = "color:Pagelink color" content = "#ffbeb2"/>
  25.     <meta name = "color:Post color" content = "#ffcc00"/>
  26.     <meta name = "color:Tab color" content = "#ff9d9d"/>
  27.     <meta name = "color:Main font color" content = "#222"/>
  28.    
  29.    
  30.    
  31.     <style type="text/css">
  32.    
  33.     html {
  34.         padding:0;
  35.     }
  36.    
  37.     #background {
  38.         width:100%;
  39.         height:100%;
  40.         z-index:-10;
  41.         position:fixed;
  42.         background-image:url("{image:Background}");
  43.         background-size:100%;
  44.     }
  45.    
  46.     body {
  47.         margin:0;
  48.         padding:0;
  49.         font-family:{font:Main font},sans-serif;
  50.         background:transparent;
  51.         width:100%;
  52.         height:100%;
  53.         font-size:11pt;
  54.         color:{color:Main font color};
  55.     }
  56.        
  57.     ::-webkit-scrollbar {
  58.         width:7px;
  59.     }
  60.        
  61.     ::-webkit-scrollbar:horizontal {
  62.         height:7px;
  63.     }
  64.        
  65.     ::-webkit-scrollbar-track {
  66.         background:transparent;
  67.     }
  68.        
  69.     ::-webkit-scrollbar-thumb {
  70.         background-color:white;
  71.     }
  72.    
  73.     img {
  74.         -webkit-filter:saturate(1.2) sepia(0.1);
  75.         -moz-filter:saturate(1.2) sepia(0.1);
  76.         -o-filter:saturate(1.2) sepia(0.1);
  77.         max-width:100%;
  78.         height:auto;
  79.     }
  80.    
  81.     .tmblr-full {
  82.         margin:0;
  83.         max-width:100%;
  84.     }
  85.    
  86.     iframe {
  87.         max-width:100%;
  88.     }
  89.        
  90.     ol, ul {
  91.         margin:0;
  92.         padding:0;
  93.     }
  94.    
  95.     ul {
  96.         list-style-type:square;
  97.     }
  98.    
  99.     a {
  100.         text-decoration:none;
  101.         color:{color:Sidebar color};
  102.     }
  103.    
  104.     /* SIDEBAR */
  105.        
  106.     #sidebar {
  107.         font-size:9pt;
  108.         color: {color:Sidebar color};
  109.         position:fixed;
  110.         left:45px;
  111.         top:150px;
  112.         background-color:{color:Sidebar color};
  113.         width:150px;
  114.         height:400px;
  115.         border-right:10px solid {color:Sidebar accent color};
  116.         border-bottom-left-radius:1000px;
  117.         border-bottom-right-radius:1000px;
  118.         -webkit-box-shadow:0px 0px 6px rgba(99,19,2,0.5);
  119.         -webkit-transition:0.4s all linear;
  120.         -moz-transition:0.4s all linear;
  121.         -o-transition:0.4s all linear;
  122.     }
  123.    
  124.     #sidebar a {
  125.         color: {color:Sidebar color};
  126.     }
  127.    
  128.    
  129.     #sidebar:hover {
  130.         padding-bottom:220px;
  131.     }
  132.    
  133.     #sidebar:hover .linklist {
  134.         opacity:1;
  135.     }
  136.    
  137.     /* USERPIC */
  138.        
  139.     #userpic {
  140.         -webkit-border-radius:1000px;
  141.         -moz-border-radius:1000px;
  142.         -o-border-radius:1000px;
  143.         margin:-75px auto auto 16px;
  144.         width:128px;
  145.         height:128px;
  146.         text-align:center;
  147.         background:{color:Sidebar accent color};
  148.     }
  149.    
  150.     #userpic img {
  151.         min-width:128px;
  152.         -webkit-border-radius:1000px;
  153.     }
  154.    
  155.     /* BLOG DESCRIPTION */
  156.    
  157.     #description {
  158.         padding:1px 5px;
  159.         margin-bottom:10px;
  160.         margin-top:20px;
  161.         background:{color:Pagelink color};
  162.         text-align:center;
  163.     }
  164.    
  165.     /* LINK LIST */
  166.    
  167.     .linklist {
  168.         list-style-type:none;
  169.         margin:20px 15px 0 15px;
  170.         opacity:0;
  171.         -webkit-transition:0.4s all linear;
  172.         -moz-transition:0.4s all linear;
  173.         -o-transition:0.4s all linear;
  174.     }
  175.    
  176.     .linklist li {
  177.         padding:5px;
  178.         margin-bottom:10px;
  179.         background:{color:Pagelink color};
  180.         text-align:center;
  181.         -webkit-transition:0.2s all linear;
  182.         -moz-transition:0.2s all linear;
  183.         -o-transition:0.2s all linear;
  184.     }
  185.    
  186.     .linklist li:hover {
  187.         -webkit-filter:brightness(1.2);
  188.         -moz-filter:brightness:(1.2);
  189.         -o-filter:brightness:(1.2);
  190.     }
  191.    
  192.     /* BLOG TITLE */
  193.    
  194.    
  195.     h1 {
  196.         font-family:{font:Title font},sans-serif;
  197.         color:{color:Title color};
  198.     }
  199.    
  200.     .big {
  201.         z-index:-6;
  202.         font-size:120pt;
  203.         line-height:121pt;
  204.         position:fixed;
  205.         width:auto;
  206.         text-align:left;    
  207.         margin:0;
  208.         left:670px;
  209.         bottom:-30px;
  210.     }
  211.        
  212.     .small {
  213.         z-index:6;
  214.         letter-spacing:10px;
  215.         font-size:25pt;
  216.         text-align:left;
  217.         position:absolute;
  218.         margin:0;
  219.         top:-5px;
  220.         left:260px;
  221.         width:1000px;
  222.     }
  223.    
  224.     .hidden {
  225.         visibility:hidden;
  226.     }
  227.    
  228.    
  229.     /* POST AREA */
  230.    
  231.     #main {
  232.         z-index:-3;
  233.         background:rgba(99,19,2,0.3);
  234.         position:absolute;
  235.         left:250px;
  236.         padding:80px 20px 0 20px;
  237.         width:420px;
  238.     }
  239.    
  240.     #posts {
  241.         position: relative;
  242.     }
  243.    
  244.     .post {
  245.         z-index:2;
  246.         {block:IfShadow}-webkit-box-shadow:0px 0px 6px rgba(99,19,2,0.5);{/block:IfShadow}
  247.         background:{color:Post color};
  248.         width:390px;
  249.         -webkit-transition:0.4s all linear;
  250.         -moz-transition:0.4s all linear;
  251.         -o-transition:0.4s all linear;
  252.         padding:15px;
  253.     }
  254.    
  255.     .post ul, .post ol {
  256.         margin-left:10px;
  257.         list-style-position:inside;
  258.     }
  259.    
  260.     .post li {
  261.         margin-bottom:10px;
  262.     }
  263.     /* POST META TABS */
  264.        
  265.     .meta {
  266.         z-index:-1;
  267.         background:transparent;
  268.         position:absolute;
  269.         top:-30px;
  270.         width:420px;
  271.         height:30px;
  272.         font-size:10px;
  273.     }
  274.    
  275.     .datetab, .notestab  {
  276.         -webkit-box-shadow:0px 0px 6px rgba(99,19,2,0.5);
  277.         height:20px;
  278.         position:absolute;
  279.         top:0;
  280.         padding:10px 10px 0 10px;
  281.         background:{color:Tab color};
  282.         -webkit-transition:0.2s all linear;
  283.         -moz-transition:0.2s all linear;
  284.         -o-transition:0.2s all linear;
  285.     }
  286.    
  287.     .notestab {
  288.         right:0;
  289.     }
  290.    
  291.     .datetab {
  292.         left:0;
  293.     }
  294.        
  295.     /* TEXT POSTS */
  296.        
  297.     h3 {
  298.         font-size:18pt;
  299.         padding:0;
  300.         margin:10px 0;
  301.         color:{color:Sidebar color};
  302.         width:400px;
  303.         text-align:center;
  304.     }
  305.    
  306.     .text p {
  307.         margin:0 10px 10px 10px;
  308.         text-align:justify;
  309.     }
  310.    
  311.     .text p:last-child {
  312.         margin-bottom:0;
  313.     }
  314.        
  315.     .post p img {
  316.         max-width:90%;
  317.     }
  318.    
  319.     /* PHOTO POSTS */
  320.        
  321.     img.photo {
  322.         min-width:400px;
  323.     }
  324.        
  325.     blockquote {
  326.         border-left:3px solid {color:Sidebar accent color};
  327.         padding-left:5px;
  328.         margin:0 5px 0 5px;
  329.     }
  330.    
  331.     /* LINK POSTS */
  332.        
  333.     h2 {
  334.         padding:10px;
  335.         margin:0;
  336.         background:{color:Sidebar accent color};
  337.         color:{color:Post color};
  338.         -webkit-transition:0.4s all linear;
  339.         -moz-transition:0.4s all linear;
  340.         -o-transition:0.4s all linear;
  341.     }
  342.    
  343.     h2 a {
  344.         color:{color:Post color};
  345.     }
  346.        
  347.     .link-description {
  348.         margin:0;
  349.         padding:0;
  350.     }
  351.    
  352.     /* QUOTE POSTS */
  353.        
  354.     .thequote {
  355.         margin:0;
  356.         padding:0;
  357.         line-height:90%;
  358.     }
  359.        
  360.     .quotesrc {
  361.         padding-left:10px;
  362.     }
  363.    
  364.     .short {
  365.         font-size:40pt;
  366.     }
  367.        
  368.     .medium {
  369.         font-size:25pt;
  370.     }
  371.        
  372.     .long {
  373.         font-size:20pt;
  374.     }
  375.    
  376.     /* AUDIO POSTS */
  377.        
  378.     .playbox {
  379.         background:white;
  380.         position:absolute;
  381.         z-index:100;
  382.         margin-left:170px;
  383.         margin-top:170px;
  384.         opacity:0.5;
  385.         -webkit-filter:contrast(1.5);
  386.         -moz-filter:contrast(1.5);
  387.         -o-filter:contrast(1.5);
  388.         border:2px solid #aaa;
  389.     }
  390.        
  391.     .playbox:hover {
  392.         opacity:1;
  393.     }
  394.        
  395.     .playbutton {
  396.         height:30px;
  397.         width:20px;
  398.         overflow:hidden;
  399.         position: relative;
  400.         z-index:100;
  401.         margin:15px 25px 15px 15px;
  402.     }
  403.        
  404.     .albumart {
  405.         min-width:400px;
  406.     }
  407.    
  408.     .post:hover h2 {
  409.         color:{color:Hover color};
  410.     }
  411.    
  412.     /* TAGS */
  413.    
  414.     .hastags {
  415.         margin:0;
  416.         padding:0;
  417.         background:{color:Tab color};
  418.         font-size:10pt;
  419.         display:block;
  420.         width:410px;
  421.         padding:5px;
  422.     }
  423.    
  424.     .tags {
  425.         margin-bottom:100px;
  426.     }
  427.    
  428.     .tags li {
  429.         display:inline-block;
  430.         margin-right:5px;
  431.     }
  432.    
  433.     /* POST NOTES */
  434.    
  435.     .notes {
  436.         list-style-type:none;
  437.         width:410px;
  438.         padding:5px;
  439.         background:{color:Tab color};
  440.         position:relative;
  441.         margin-top:-80px;
  442.     }
  443.    
  444.     /* PAGINATION */
  445.    
  446.     #pagination {
  447.         text-align:center;
  448.         position:fixed;
  449.         bottom:20px;
  450.         right:20px;
  451.         padding:10px;
  452.         width:100px;
  453.         background:{color:Sidebar accent color};
  454.    
  455.     #pagination arrows {
  456.         font-size:20px;
  457.     }
  458.    
  459.     </style>
  460.    
  461.         <title>{Title}{block:PostSummary}: {PostSummary}
  462. {/block:PostSummary}</title>
  463.  
  464.    
  465.  
  466.     </head>
  467.  
  468.  
  469.     <body>
  470.     <div id="background"></div>
  471.        
  472.         <h1 class="{select:Title style}">{Title}</h1>
  473.         <link rel="shortcut icon" href="{Favicon}">
  474.         <link rel="alternate" type="application/rss+xml" href="{RSS}">
  475.        
  476.         <div id="sidebar">
  477.             <div id="userpic" >
  478.                 <a href="/"><img src="{Favicon}"/></a>
  479.             </div>
  480.             {block:Description}<div id="description"><p>{Description}</p></div>{/block:Description}
  481.        
  482.            
  483.             <ul class = "linklist">
  484.                 {block:AskEnabled}
  485.                 <a href="/ask"><li>{AskLabel}</li></a>
  486.                 {/block:AskEnabled}
  487.                 {block:SubmitEnabled}
  488.                 <a href="/submit"><li>{SubmitLabel}</li></a>
  489.                 {/block:SubmitEnabled}
  490.             {block:HasPages}
  491.             {block:Pages}
  492.                 <a href="{URL}"><li>{Label}</li></a>
  493.                
  494.             {/block:Pages}
  495.             {/block:HasPages}
  496.                 <a href="/RSS"><li>RSS</li></a>
  497.                 <a href="/archive"><li>Archive</li></a>
  498.                 <a href="http://circlejourney-themes.tumblr.com/post/90053066387/vernal-regalia-theme-bold-minimalistic-design"><li>Theme</li></a>
  499.             </ul>
  500.         </div>
  501.        
  502.        
  503.        
  504.        
  505.        
  506.         <backDecor><img url="http://38.media.tumblr.com/91f5252c5bd71ee295a88ac7bf6cb727/tumblr_n23dctqDe41s8dgheo1_500.png"/></backDecor>
  507.        
  508.         <!--- <div id="rightbar"></div> --->
  509.        
  510.        
  511.         <div id="main">
  512.        
  513.         {block:Posts}
  514.         <ol id="posts">
  515.             <div class="meta">
  516.                 {block:Date}<a href="{Permalink}"><div class="datetab">
  517.                     {DayOfMonthWithZero} {ShortMonth} {ShortYear}{block:RebloggedFrom} // reblogged from {ReblogParentName}{/block:RebloggedFrom}
  518.                 </div></a>{/block:Date}                
  519.                 {block:NoteCount}<a href="{Permalink}"><div class="notestab">
  520.                     {NoteCount} &#10084;
  521.                 </div></a>{/block:NoteCount}
  522.                 </div>
  523.                 </a>
  524.  
  525.                 {block:Text}
  526.                 <li class = "post text">
  527.                 {block:Title}<h3><a href="{Permalink}">{Title}</a></h3>{/block:Title}
  528.                 <div id= "post body">{Body}</div>
  529.                 </li>
  530.                 {/block:Text}
  531.                
  532.                
  533.                
  534.                 {block:Photo}
  535.                 <li class = "post photo">
  536.                 {LinkOpenTag}<img src="{PhotoURL-400}" class="photo" alt="{PhotoAlt}" />{LinkCloseTag}
  537.                 {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  538.                 </li>
  539.                 {/block:Photo}
  540.                
  541.                
  542.                
  543.                 {block:Photoset}
  544.                 <li class = "post photoset">
  545.                     {Photoset-400}
  546.                     {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  547.                 </li>
  548.                 {/block:Photoset}
  549.                
  550.                
  551.                
  552.                 {block:Quote}
  553.                 <li class = "post quote">
  554.                     <p class="thequote {Length}">"{Quote}"</p>
  555.                     {block:Source}
  556.                     <div class="quotesrc">&mdash; {Source}</div>
  557.                     {/block:Source}
  558.                 </li>
  559.                 {/block:Quote}
  560.                
  561.                
  562.                
  563.                 {block:Link}
  564.                 <li class = "post link">
  565.                     <a href="{URL}"><h2>{Name} &#9755;</h2></a>
  566.                     {block:Description}<div class="link-description">{Description}</div>{/block:Description}
  567.                 </li>
  568.                 {/block:Link}
  569.                
  570.                
  571.                
  572.                 {block:Chat}
  573.                 <li class = "post chat">
  574.                     <ul class="chat">
  575.                         {block:Lines}
  576.                         <li class = "{Alt} user_{UserNumber}">
  577.                             {block:Label}<b>{Label}</b>{/block:Label} {Line}
  578.                         </li>
  579.                     {/block:Lines}
  580.                 </ul>
  581.                 </li>
  582.                 {/block:Chat}
  583.                
  584.                
  585.                
  586.                 {block:Audio}
  587.                 <li class = "post audio">
  588.                     {block:AlbumArt}<div class="playbox"><div class="playbutton">{/block:AlbumArt}{block:AudioPlayer}{AudioPlayerWhite}{/block:AudioPlayer}{block:AlbumArt}</div></div>{/block:AlbumArt}
  589.                 {block:AlbumArt}
  590.                     <img src="{AlbumArtURL}" class="albumart"/>
  591.                 {/block:AlbumArt}
  592.                     {block:Caption}
  593.                         <div class="caption">{Caption}</div>
  594.                     {/block:Caption}
  595.                 </li>
  596.                 {/block:Audio}
  597.                
  598.                
  599.                
  600.                 {block:Video}
  601.                 <li class="post video">
  602.                 {Video-400}
  603.                 {block:Caption}
  604.                 <div class="caption">{Caption}</div>
  605.                 {/block:Caption}
  606.                 </li>
  607.                 {/block:Video}
  608.                
  609.             <ul class="tags {block:HasTags}hastags{/block:HasTags}">
  610.             {block:HasTags}
  611.                 {block:Tags}
  612.                     <li><a href="{TagURL}">#{Tag}</a></li>
  613.                 {/block:Tags}
  614.             {/block:HasTags}
  615.             </ul>
  616.             <div>{block:PostNotes}{PostNotes}{/block:PostNotes}</div>
  617.         </ol>
  618.        
  619.         {/block:Posts}
  620.        
  621.         </div>
  622.        
  623.        
  624.        
  625.         <div id="pagination">
  626.             <div id="pageCounter">
  627.             {block:PreviousPage}
  628.                 <arrows><a href="{PreviousPage}">&#9664;</a></arrows>
  629.             {/block:PreviousPage}&nbsp;&nbsp;{CurrentPage} / {TotalPages}&nbsp;&nbsp;
  630.             {block:NextPage}
  631.                 <arrows><a href="{NextPage}">&#9654;</a></arrows>
  632.             {/block:NextPage}
  633.             </div>
  634.         </div>
  635.         </body>
  636.         </html>
  637.        
  638.        
  639.     </body>
  640. </html>
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!