API tools faq
paste
southcodes

theme pack #1 about sodium

southcodes
Oct 28th, 2020 (edited)
427
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 13.96 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.     - about page 'sodium' by skye southcodes.tumblr.com
  3.     - modify as you please but please do not touch the credit
  4.     - any errors? need help? have questions? let me know!
  5.     southcodes.tumblr.com/inbox
  6.    
  7.     - normalize css by https://github.com/necolas
  8.     - fonts by google
  9.     - honeybee icons by https://honeybee.suiomi.com/
  10.  
  11.  -->
  12.  <!DOCTYPE html>
  13.  <html>
  14.  <head>
  15.      <title>{title}</title>
  16.      
  17.      <meta name="viewport" content="width=device-width, initial-scale=1.0">
  18.  
  19.      <link rel="shortcut icon" href="{favicon}">
  20.      <meta name="description" content="{MetaDescription}"/>
  21.  
  22.      <!-- fonts -->
  23.      
  24.      <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,600;1,600&family=Open+Sans:ital,wght@0,400;0,600;1,400;1,600&family=Dancing+Script:wght@500;700&display=swap" rel="stylesheet">
  25.      
  26.      <!-- normalize -->
  27.      <link href="https://necolas.github.io/normalize.css/7.0.0/normalize.css" rel="stylesheet">
  28.  
  29.     <!-- honeybee icons -->
  30.     <link rel="stylesheet" href="https://solrainha.github.io/honeybee/honeybee.css" >
  31.  
  32.  
  33. <style>
  34. :root {
  35.     --background:#fdfdff;
  36.     --text-color:#333;
  37.     --links:#130a73;
  38.     --links-hover-color: #477edc;
  39.     --accents:#e3eafe;
  40.     --icon-color: #4160a2;
  41.     --borders: #aebbf5;
  42.     --boxes-color: #ffffff
  43. }
  44.  
  45. .tmblr-iframe {margin:.7rem;opacity:.6;-ms-transform: scale(0.85); /* IE 9 */-webkit-transform: scale(0.85); /* Safari */transform: scale(0.85);}
  46. .tmblr-iframe:hover {opacity:.8;}
  47.  
  48. ::-webkit-scrollbar-thumb:vertical {border-left:2px solid var(--links);}
  49. ::-webkit-scrollbar {width:6px;height:0}
  50. ::-webkit-scrollbar-track-piece{margin:5px 0;}
  51.  
  52. pre {font-family:consolas;
  53.     white-space: pre-wrap;       /* css-3 */
  54.     white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  55.     white-space: -pre-wrap;      /* Opera 4- */
  56.     white-space: -o-pre-wrap;    /* Opera 7 */
  57.     word-wrap: break-word;}      /* Internet Explorer 5.5+ */
  58.  
  59. body, figure{margin:0;padding:0}
  60. html{font: 14px 'Open Sans', sans-serif;}
  61. body {font-size:14px;color:var(--text-color);background:var(--background);}
  62. a {text-decoration: none;color:var(--links);word-break:break-word;}
  63. a:hover {color:var(--links-hover-color);}
  64. blockquote {margin:0;padding:0;}
  65. blockquote blockquote {
  66.     border-left:1px solid var(--borders);padding:.3rem 0 .3rem .6rem
  67. }
  68. img {max-width:100%;height: auto;display: block;margin:0}
  69. hr {border:0;border-top:1px solid var(--borders);margin:0;}
  70.  
  71. main {
  72.     width:90vw;
  73.     max-width:50rem;
  74.     height: 30rem;
  75.     max-height:90vh;
  76.     display: flex;
  77.     flex-flow: row;
  78.     margin:5rem auto 10rem
  79. }
  80.  
  81. #socials {
  82.     display:flex;
  83.     flex-flow: column wrap;
  84.     justify-content: space-around;
  85.     width:10%;
  86.     text-align: center;
  87. }
  88.  
  89. #socials .th {
  90.     text-align: center;
  91.     font-size:1.2rem;
  92.     color:var(--icon-color);
  93.     border-radius:100%;
  94.     width:auto;
  95.     padding:.7rem;
  96.     background:var(--boxes-color);
  97.     border:1px solid var(--borders);
  98.  
  99. }
  100.  
  101.  
  102. #about-wrap {
  103.     margin:0 1rem;
  104.     width:calc(100% - 35%)
  105. }
  106.  
  107. #bio {
  108.     box-sizing:border-box;
  109.     margin-bottom:1rem;
  110.     height:calc(60% - 2rem);
  111. }
  112.  
  113. #name {
  114.     font: 700 3rem 'Dancing Script', cursive;
  115.     margin: 0 0 1rem 1rem;
  116.     float:left;
  117.     padding:0 1rem 0;
  118.     box-shadow: inset 0 -15px var(--borders);
  119. }
  120.  
  121. #info {
  122.     float:right;
  123.     font-style: italic;
  124.     font-size: .9rem;
  125.     margin:2rem 1rem 0 0;
  126.     letter-spacing: .1rem;
  127. }
  128.  
  129.    
  130. #about {
  131.     clear:both;
  132.     font-size: .9rem;
  133.     letter-spacing:.03rem;
  134.     line-height: 180%;
  135.     margin:6rem 0 0;
  136.     border:1px solid var(--borders);
  137.     border-bottom:5px solid var(--borders);
  138.     padding:1rem;
  139.     background:var(--boxes-color);
  140.     overflow:auto;
  141.     box-sizing:border-box;
  142.     max-width:100%;
  143.     height:calc(100% - 5rem)
  144. }
  145.  
  146.  
  147.  
  148. #blogs-friends-wrapper {
  149.    
  150.     height:calc(40% - 1rem);
  151.     display:flex;
  152.     flex-flow: row wrap;
  153.     box-sizing:border-box;
  154.     justify-content: space-between;
  155. }
  156.  
  157. #blogs-friends-wrapper h2{
  158.     margin:0 0 1rem;
  159.     font:600 1.15em 'Montserrat', sans-serif;
  160.     text-transform: uppercase;
  161.     letter-spacing: .04rem;}
  162. #blogs-friends-wrapper h2 span{
  163.     padding:0 .7rem 0;
  164.     width:50%;
  165.     box-shadow: inset 0 -7px var(--borders);
  166. }
  167.  
  168. #blogs, #friends {
  169.     width:calc(50% - .5rem);
  170.     height:calc(100% - 6px);
  171. }
  172.  
  173. #blogs-wrapper,#friends-wrapper {
  174.     box-sizing:border-box;
  175.     border:1px solid var(--borders);
  176.     border-bottom:5px solid var(--borders);
  177.     height:100%;
  178.     overflow:auto;
  179.     box-sizing:border-box;
  180.     background:var(--boxes-color);
  181.     padding:0 1rem
  182. }
  183. .blog,.friend {border-bottom:1px solid var(--borders);padding-bottom:1.5rem;margin-top:1.5rem}
  184.  
  185.  
  186. .blog:last-of-type,.friend:last-of-type {border-bottom:0}
  187. .blog a,.friend a{
  188.     display: flex;
  189.     flex-flow: row wrap;
  190.     align-content: center;
  191. }
  192. .blog:last-of-type,.friend:last-of-type { margin-bottom:0}
  193.  
  194. .friend-image,.blog-image {
  195.     width:2rem;
  196.     height:2rem;
  197. }
  198. img.friend-image,img.blog-image{
  199.     margin:0;
  200.     object-fit: cover;
  201.     border: 4px solid var(--borders);
  202.     display:block
  203. }
  204.  
  205. .friend-info,.blog-info {
  206.     width:calc(100% - 3.7rem);
  207.     margin-left:1.5rem;
  208.     vertical-align: middle;
  209. }
  210.  
  211. .blog-url,.friend-url {
  212.     font: 600 .9rem 'Montserrat', sans-serif;
  213. }
  214.  
  215.  
  216. .blog-description,.friend-description {
  217.     font-size: .85rem;
  218.     font-style: italic;
  219.     color:#666;
  220.     letter-spacing:.04rem;
  221.     margin-top:.3rem
  222. }
  223.  
  224.  
  225. /* side image & quote */
  226.  
  227. #image-quote {
  228.     width:35%;
  229.     position: relative;
  230. }
  231. .side-image {
  232.     height: 100%;
  233.     width:100%;
  234.     object-fit: cover;
  235. }
  236.  
  237. #quote {
  238.     position: absolute;
  239.     bottom:0;left:0;right:0;
  240.     padding:1rem;
  241.     background:rgba(255,255,255,.5);
  242.     font-size:.9rem;
  243.     text-align: center;
  244.     line-height:175%;
  245.     letter-spacing: .07rem;
  246.     font-style:italic;
  247.     box-sizing:border-box;
  248.     border:1px solid var(--borders);
  249. }
  250.  
  251. #bottom-header {
  252.     padding:.5rem 2rem;
  253.     position:fixed;bottom:0;left:0;right:0;
  254.     background:var(--accents);
  255.     z-index:99999;
  256.     border-top:1px solid var(--borders);
  257. }
  258.  
  259. #bottom-nav ul,#bottom-nav ul li {margin:0;padding:0;vertical-align:middle;list-style-type:none}
  260.  
  261. #bottom-nav ul {
  262.     font:600 .9rem 'Montserrat', sans-serif;
  263.     text-transform:uppercase;
  264.     margin:auto;
  265.     max-width:40rem;
  266.     display:flex;
  267.     flex-flow:row wrap;
  268.     justify-content:space-around;
  269.     align-items:center;
  270.     letter-spacing:.04rem;
  271.     text-align:center;
  272. }
  273. #bottom-nav .th {
  274.     font-size:1.2rem;
  275.     display:block;
  276.     margin-bottom:.5rem;
  277.     border-radius:100%;
  278.     padding:.4rem;
  279.     height:2rem;width:2rem;
  280.     line-height:2.4rem;
  281.     background:var(--boxes-color);
  282.     color:var(--icon-color);
  283.     border:1px solid var(--borders);
  284. }
  285.  
  286. figure.bottom-header-icon {
  287.     margin:0 auto 1rem;
  288.     width:4rem;
  289.     height:4rem;
  290. }
  291.  
  292. img.bottom-header-icon {
  293.     width:100%;
  294.     height:100%;
  295.     object-fit:cover;
  296.     border-radius:100%;
  297.     border:2px solid white;
  298. }
  299. .bottom-header-icon {transition-duration:.4s;}
  300. .bottom-header-icon:hover {
  301.     opacity:.8;
  302. }
  303.  
  304.  
  305. /* MEDIA */
  306.  
  307. @media only screen and (min-width:0px) and (max-width:699px) {
  308.  
  309.     #name {
  310.         float:none;
  311.         box-shadow:none;
  312.         margin:0 0 1rem
  313.     }
  314.    
  315. #name span {
  316.     padding:0 .5rem;
  317.     box-shadow: inset 0 -15px var(--borders);
  318. }
  319.  
  320.     #info {
  321.         width:100%;
  322.     float:none;
  323.     font-style: italic;
  324.     font-size: .9rem;
  325.     margin:0 0 0 0rem;
  326.     letter-spacing: .1rem;
  327.     }
  328.    
  329.     #bio {
  330.         box-sizing:border-box;
  331.         margin-bottom:0rem;
  332.     }
  333.  
  334.     #about {
  335.         margin:1rem 0 0 0;
  336.         height:calc(100% - 8rem)
  337.     }
  338.    
  339.     #blogs, #friends {
  340.         width:100%;
  341.         height:calc(35% - 3px);
  342.     }
  343.  
  344.  
  345.     #blogs-friends-wrapper {
  346.    
  347.         height:calc(50%);
  348.     }
  349.     #blogs-friends-wrapper h2{
  350.         margin:0 0 0rem;
  351.         font:600 1.15em 'Montserrat', sans-serif;
  352.         text-transform: uppercase;
  353.         letter-spacing: .04rem;}
  354. }
  355.  </style>    
  356.  </head>
  357.  <body>
  358.  
  359.  
  360.  <div id="container">
  361.  
  362.  <main>
  363.      
  364.  <section id="socials">
  365.      <!-- delete and add as you see fit -->
  366.      <a href="SOCIAL URL"><div class="th th-twitter-o"></div></a>
  367.      <a href="SOCIAL URL"><div class="th th-facebook-o"></div></a>
  368.      <a href="SOCIAL URL"><div class="th th-instagram-o"></div></a>
  369.      <a href="SOCIAL URL"><div class="th th-snapchat-o"></div></a>
  370.      <a href="SOCIAL URL"><div class="th th-curious-cat"></div></a>
  371.      <a href="SOCIAL URL"><div class="th th-discord"></div></a>
  372.  </section>
  373.  
  374.  
  375.  <section id="about-wrap">
  376.      <article id="bio">
  377.          <p id="name"><span>name</span></p>
  378.  
  379.          <p id="info">details ~ if you ~ want them</p>
  380.  
  381.          <div id="about">
  382.              insert your about here
  383.          </div>
  384.          
  385.      </article>     <!-- #bio end -->
  386.      
  387.      <article id="blogs-friends-wrapper">
  388.          <article id="blogs">
  389.  
  390.              <h2><span>blogs</span></h2>
  391.                      
  392.              <div id="blogs-wrapper">
  393.  
  394.                 <div class="blog">
  395.                     <a href="BLOG URL">
  396.                     <figure class="blog-image"><img class="blog-image" src="BLOG IMAGE URL"/></figure>
  397.                                                
  398.                    
  399.                     <div class="blog-info">
  400.                         <div class="blog-url">
  401.                             blog url
  402.                         </div>
  403.                         <div class="blog-description">
  404.                             blog description
  405.                         </div>
  406.                     </div>
  407.                 </a>
  408.                 </div> <!-- end blog 1 -->
  409.  
  410.  
  411.  
  412.                
  413.                 <div class="blog">
  414.                     <a href="BLOG URL">
  415.                     <figure class="blog-image"><img class="blog-image" src="BLOG IMAGE URL"/></figure>
  416.                                                
  417.                    
  418.                     <div class="blog-info">
  419.                         <div class="blog-url">
  420.                             blog url
  421.                         </div>
  422.                         <div class="blog-description">
  423.                             blog description
  424.                         </div>
  425.                     </div>
  426.                 </a>
  427.                 </div> <!-- end blog 2 -->
  428.  
  429.  
  430.  
  431.                
  432.                 <div class="blog">
  433.                     <a href="BLOG URL">
  434.                     <figure class="blog-image"><img class="blog-image" src="BLOG IMAGE URL"/></figure>
  435.                                                
  436.                    
  437.                     <div class="blog-info">
  438.                         <div class="blog-url">
  439.                             blog url
  440.                         </div>
  441.                         <div class="blog-description">
  442.                             blog description
  443.                         </div>
  444.                     </div>
  445.                 </a>
  446.                 </div> <!-- end blog 3 -->
  447.  
  448.  
  449.          </div>             <!-- blogs wrapper -->
  450.  
  451.          </article> <!-- blogs end -->
  452.  
  453.          <article id="friends">
  454.              
  455.              <h2><span>friends</span></h2>
  456.              
  457.              <div id="friends-wrapper">
  458.  
  459.            
  460.  
  461.                 <div class="friend">
  462.                     <a href="FRIEND URL">
  463.                     <figure class="friend-image"><img class="friend-image" src="FRIEND IMAGE URL"/></figure>
  464.                    
  465.                     <div class="friend-info">
  466.                         <div class="friend-url">blog name</div>
  467.                         <div class="friend-description">friend blog</div>
  468.                     </div>
  469.                 </a>
  470.                 </div> <!-- end friend 1 -->
  471.  
  472.                  
  473.                 <div class="friend">
  474.                     <a href="FRIEND URL">
  475.                     <figure class="friend-image"><img class="friend-image" src="FRIEND IMAGE URL"/></figure>
  476.                    
  477.                     <div class="friend-info">
  478.                         <div class="friend-url">blog name</div>
  479.                         <div class="friend-description">friend blog</div>
  480.                     </div>
  481.                 </a>
  482.                 </div> <!-- end friend 2 -->
  483.  
  484.                  
  485.                  <div class="friend">
  486.                      <a href="FRIEND URL">
  487.                      <figure class="friend-image"><img class="friend-image" src="FRIEND IMAGE URL"/></figure>
  488.                      
  489.                      <div class="friend-info">
  490.                          <div class="friend-url">blog name</div>
  491.                          <div class="friend-description">friend blog</div>
  492.                      </div>
  493.                  </a>
  494.                  </div> <!-- end friend 3 -->
  495.  
  496.              </div>                <!-- friends wrapper -->
  497.              
  498.          </article>        <!-- friends end -->
  499.  </article><!-- blogs-friends-wrapper -->
  500.  </section><!-- about wrap -->
  501.  
  502.  
  503.  
  504.  <section id="image-quote">
  505.      <figure class="side-image">
  506.          <img src="SIDEBAR IMAGE URL" class="side-image"/>
  507.      </figure>
  508.      <div id="quote">
  509.          write your quote
  510.      </div>
  511.  </section>
  512.  
  513.  </main>
  514.  </div>
  515.  
  516.  
  517.  <header id="bottom-header">
  518.      
  519.      <nav id="bottom-nav"><ul>
  520.          
  521.          <a href="/about"><li><div class="th th-home"></div>home</li></a>
  522.          
  523.          <a href="/"><li><figure class="bottom-header-icon"><img class="bottom-header-icon" src="IMAGE URL BOTTOM ICON"/></figure></li></a>
  524.          
  525.          <a href="links"><li><div class="th th-equal-o"></div>links</li></a>
  526.          
  527.      </ul></nav>
  528.      
  529.  </header>
  530.  
  531.  
  532. <a style="position:fixed;bottom:1.3rem;right:1.3rem;font-size:15px;line-height:14px;height:14px;padding:3px;color:{color:links};text-align:center;letter-spacing:.7px;z-index:9999999" href="https://southcodes.tumblr.com" target="_blank" title="southcodes">sc</a>
  533.  </body>
  534.  </html>
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!