diff --git a/34-Drizzle b/34-Drizzle
index 6e3241f..8ba038b 100644
--- a/34-Drizzle
+++ b/34-Drizzle
@@ -3,7 +3,10 @@ Theme [34]: Drizzle
Made by glenthemes
Initial release: 2019/04/16
-Last updated: 2023/05/08
+Last updated: 2023/07/29
+
+What's new:
+✱ NPF audio post support
TERMS OF USE:
1) Do not remove the theme credit.
@@ -59,7 +62,7 @@ $(document).ready(function(){
$('.photo-slideshow').pxuPhotoset({
lightbox: true,
rounded: false,
- gutter: '{text:photoset gutter width}px',
+ gutter: '{select:photos spacing}',
borderRadius: '0px',
photoset: '.photo-slideshow',
photoWrap: '.photo-data',
@@ -100,7 +103,7 @@ $(document).ready(function(){
+
+
+
+
+
+
+
+
+
+
+
@@ -200,12 +278,217 @@ $(document).ready(function(){
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -216,28 +499,20 @@ $(document).ready(function(){
-
-
-
-
-
-
-
+
-
-
-
-
-
-
-
+
+
+
+
+
-
+
-
+
@@ -248,19 +523,6 @@ $(document).ready(function(){
-
-
-
-
-
-
-
-
-
-
-
-
-
@@ -273,12 +535,12 @@ $(document).ready(function(){
background-color: {color:tooltip background};
border-radius:2px;
font-family:muli;
- font-size: calc({text:font size}px - 3px);
+ font-size: calc({select:font size} - 3px);
letter-spacing: 1px;
text-transform: uppercase;
color: {color:tooltip text};
z-index:99;
- max-width: calc({text:post width}px * 1.25);
+ max-width: calc({select:post width} * 1.25);
}
/*--------------------TUMBLR CONTROLS--------------------*/
@@ -375,7 +637,7 @@ cursor:normal;
font-family:karla;
font-weight:300;
line-height:1.6em;
-font-size:{text:font size}px;
+font-size:{select:font size};
text-align:left;
}
@@ -403,7 +665,7 @@ hr {
background-color:rgba({RGBcolor:text},0.3);
}
-p.npf_quirky, p.npf_quote {font-size:calc({text:font size}px + 5px);line-height:1em;}
+p.npf_quirky, p.npf_quote {font-size:calc({select:font size} + 5px);line-height:1em;}
/*--------------------LINKS--------------------*/
a {
@@ -422,7 +684,7 @@ a:hover {text-decoration:none;}
img {opacity:1;text-decoration:none;}
h1, h2, h3, h4, h5, h6 {
- font-size:calc({text:font size}px + 1px);
+ font-size:calc({select:font size} + 1px);
font-family:quicksand;
font-weight:normal;
text-transform: uppercase;
@@ -446,7 +708,7 @@ h1, h2, h3, h4, h5, h6, .h1c {color:{color:headings};}
#cont-h-2 {
display:inline-block;
{block:Pagination}
- margin-left:-{text:posts right margin}px;
+ margin-left:-{select:posts right gap};
{/block:Pagination}
}
@@ -457,7 +719,7 @@ h1, h2, h3, h4, h5, h6, .h1c {color:{color:headings};}
position:fixed;
top:0;margin-top:0px;
height:100vh;
- width:{text:sidebar width}px;
+ width:{select:sidebar width};
display:table;
}
@@ -484,7 +746,7 @@ h1, h2, h3, h4, h5, h6, .h1c {color:{color:headings};}
.s-head {
position:relative;
width:100%;
- min-height:{text:sidebar icon size}px;
+ min-height:{select:sidebar icon size};
vertical-align:middle;
}
@@ -557,22 +819,22 @@ h1, h2, h3, h4, h5, h6, .h1c {color:{color:headings};}
.avi {
position:relative;
display:block;
- margin:calc((-{text:sidebar icon size}px / 2) - {text:sidebar icon border thickness}px) auto auto auto;
- width:{text:sidebar icon size}px;
- height:{text:sidebar icon size}px;
+ margin:calc((-{select:sidebar icon size} / 2) - {select:sidebar icon border}) auto auto auto;
+ width:{select:sidebar icon size};
+ height:{select:sidebar icon size};
background:{color:sidebar background};
border-radius:100%;
- border:{text:sidebar icon border thickness}px solid {color:sidebar background};
+ border:{select:sidebar icon border} solid {color:sidebar background};
}
.space {
- margin-top:calc((-{text:sidebar icon size}px / 2) - {text:sidebar icon border thickness}px);
- padding:calc(({text:sidebar icon size}px / 2) + {text:sidebar icon border thickness}px) {text:description padding}px {text:description padding}px;
+ margin-top:calc((-{select:sidebar icon size} / 2) - {select:sidebar icon border});
+ padding:calc(({select:sidebar icon size} / 2) + {select:sidebar icon border}) {select:desc padding} {select:desc padding};
background:{color:sidebar background};
}
.desc-tit {
- margin-top:calc({text:description padding}px - {text:sidebar icon border thickness}px - 1px);
+ margin-top:calc({select:desc padding} - {select:sidebar icon border} - 1px);
font-family:quicksand;
font-size:13px;
text-transform:uppercase;
@@ -582,7 +844,7 @@ h1, h2, h3, h4, h5, h6, .h1c {color:{color:headings};}
}
.desc {
- margin-top:calc({text:description padding}px - ({text:sidebar icon border thickness}px / 2) - ((1.8em - 1em) / 2));
+ margin-top:calc({select:desc padding} - ({select:sidebar icon border} / 2) - ((1.8em - 1em) / 2));
margin-bottom:calc(((1.8em - 1em) / 2) * -1);
font-size:12px;
line-height:1.8em;
@@ -594,7 +856,7 @@ h1, h2, h3, h4, h5, h6, .h1c {color:{color:headings};}
.desc i, .desc em {color:{color:desc italic};}
.navlinks {
- margin-top:calc({text:description padding}px + 4px);
+ margin-top:calc({select:desc padding} + 4px);
text-align:center;
cursor:pointer;
}
@@ -615,8 +877,8 @@ h1, h2, h3, h4, h5, h6, .h1c {color:{color:headings};}
.valkyrie {
position:fixed;
top:0;margin-top:0px;
- margin-left:calc({text:sidebar width}px + {text:sidebar right margin}px);
- width:{text:custom links width}px;
+ margin-left:calc({select:sidebar width} + {select:sidebar right gap});
+ width:{select:custom links width};
height:100vh;
display:table;
}
@@ -630,13 +892,13 @@ h1, h2, h3, h4, h5, h6, .h1c {color:{color:headings};}
.cl {
margin:-2px auto;
- padding:{text:custom links margin}px 0;
+ padding:{select:custom links spacing} 0;
cursor:pointer;
}
.cl svg {
- width:{text:custom links icon size}px;
- height:{text:custom links icon size}px;
+ width:{select:custom links icon size};
+ height:{select:custom links icon size};
stroke-width:1px;
color:{color:custom links icon};
}
@@ -644,9 +906,9 @@ h1, h2, h3, h4, h5, h6, .h1c {color:{color:headings};}
.cl-text {
position:absolute;
display:inline-block;
- margin-top:calc((({text:custom links icon size}px - 9px - (6px * 2)) / 2));
- margin-left:calc((-{text:custom links width}px / 2) - ({text:custom links icon size}px / 2) - 3px);
- width:{text:custom links width}px;
+ margin-top:calc((({select:custom links icon size} - 9px - (6px * 2)) / 2));
+ margin-left:calc((-{select:custom links width} / 2) - ({select:custom links icon size} / 2) - 3px);
+ width:{select:custom links width};
padding:6px 3px;
background:{color:background};
font-family:quicksand;
@@ -668,16 +930,16 @@ h1, h2, h3, h4, h5, h6, .h1c {color:{color:headings};}
/*--------------------POSTS--------------------*/
.postscont {
- margin-top:{text:window margin}px;
- margin-left:calc({text:sidebar width}px + {text:sidebar right margin}px + {text:custom links width}px + {text:custom links right margin}px);
- margin-bottom:{text:window margin}px;
+ margin-top:{select:window margin};
+ margin-left:calc({select:sidebar width} + {select:sidebar right gap} + {select:custom links width} + {select:custom links right gap});
+ margin-bottom:{select:window margin};
{block:Pagination}
- margin-right:calc({text:posts right margin}px + {text:pagination arrow size}px);
+ margin-right:calc({select:posts right gap} + {select:pagination arrow size});
{/block:Pagination}
}
.topkek {
- margin-bottom:{text:post inner padding}px;
+ margin-bottom:{select:post padding inner};
text-align:center;
}
@@ -760,9 +1022,9 @@ h1, h2, h3, h4, h5, h6, .h1c {color:{color:headings};}
.posts {
overflow:hidden;
- margin-bottom:{text:post margin}px;
- width:{text:post width}px;
- padding:{text:post outer padding}px;
+ margin-bottom:{select:post spacing};
+ width:{select:post width};
+ padding:{select:post padding outer};
background-color:{color:post};
}
@@ -772,7 +1034,7 @@ h1, h2, h3, h4, h5, h6, .h1c {color:{color:headings};}
.photos, .photos img {
position:relative;
overflow:hidden;
- width:{text:post width}px;
+ width:{select:post width};
{block:IndexPage}
{block:ifphotofade}
@@ -829,7 +1091,7 @@ h1, h2, h3, h4, h5, h6, .h1c {color:{color:headings};}
/*--------------------PERMALINK--------------------*/
.permawrap {
- margin-top:{text:post inner padding}px;
+ margin-top:{select:post padding inner};
text-align:center;
}
@@ -837,7 +1099,7 @@ h1, h2, h3, h4, h5, h6, .h1c {color:{color:headings};}
font-family:quicksand;
text-transform:uppercase;
letter-spacing:1px;
- font-size:calc({text:font size}px - 3px);
+ font-size:calc({select:font size} - 3px);
}
.perma a {
@@ -857,7 +1119,7 @@ h1, h2, h3, h4, h5, h6, .h1c {color:{color:headings};}
text-transform:uppercase;
letter-spacing:1.5px;
line-height:1.5em;
- font-size:calc({text:font size}px - 3.5px);
+ font-size:calc({select:font size} - 3.5px);
text-align:right;
}
@@ -873,7 +1135,7 @@ h1, h2, h3, h4, h5, h6, .h1c {color:{color:headings};}
/* -- and tutorial by shythemes: http://shythemes.tumblr.com/post/147903463743/custom-like-and-reblog-buttons -- */
/* -- and help from borntobewildcodes -- */
.controls {
- margin-top:{text:post inner padding}px;
+ margin-top:{select:post padding inner};
margin-bottom:-5px;
text-align:center;
}
@@ -890,8 +1152,8 @@ h1, h2, h3, h4, h5, h6, .h1c {color:{color:headings};}
/* both svg colors */
.controls svg {
- width:{text:font size}px;
- height:{text:font size}px;
+ width:{select:font size};
+ height:{select:font size};
color:{color:post buttons};
stroke-width:2px;
}
@@ -900,8 +1162,8 @@ h1, h2, h3, h4, h5, h6, .h1c {color:{color:headings};}
.controls .like .like_button {
position:absolute;
- width:{text:font size}px;
- height:{text:font size}px;
+ width:{select:font size};
+ height:{select:font size};
margin-top:2px;
}
@@ -916,7 +1178,7 @@ h1, h2, h3, h4, h5, h6, .h1c {color:{color:headings};}
/*--------------------POST NOTES--------------------*/
ol.notes {
-width:calc({text:post width}px + ({text:post outer padding}px * 2));
+width:calc({select:post width} + ({select:post padding outer} * 2));
padding:0px;
margin-top:30px;
list-style-type:none;
@@ -959,7 +1221,7 @@ text-decoration:none;
box-shadow:none !important;
border-radius:0px !important;
max-width:none;
- padding:{text:photoset gutter width}px !important;
+ padding:{select:photos spacing} !important;
background:{color:post} !important;
border:0px solid transparent !important;
}
@@ -971,7 +1233,7 @@ text-decoration:none;
/*---------------------LINK POSTS---------------------*/
.l-link {
- margin:{text:post inner padding}px auto;
+ margin:{select:post padding inner} auto;
}
/*---------------------------QUOTES---------------------------*/
@@ -990,11 +1252,11 @@ text-decoration:none;
}
.quote {
- margin-top:calc({text:post inner padding}px - ((2.3em - 1em) / 2));
- padding:0 {text:post inner padding}px;
+ margin-top:calc({select:post padding inner} - ((2.3em - 1em) / 2));
+ padding:0 {select:post padding inner};
font-family:Quicksand;
text-transform:uppercase;letter-spacing:1px;
- font-size:calc({text:font size}px + 1px);
+ font-size:calc({select:font size} + 1px);
color:{color:headings};
text-align:center;
line-height:2.3em;
@@ -1002,7 +1264,7 @@ text-decoration:none;
.quotesource {
text-align:center;
- margin-top:calc({text:post inner padding}px - ((2.3em - 1em) / 2));
+ margin-top:calc({select:post padding inner} - ((2.3em - 1em) / 2));
}
/*---------------------------CHATS---------------------------*/
@@ -1027,20 +1289,20 @@ text-decoration:none;
color:{color:headings};
}
-p.npf_chat { font-family:Courier; font-size:{text:font size}px; }
+p.npf_chat { font-family:Courier; font-size:{select:font size}; }
/*---------------------------ASKS---------------------------*/
.question {
text-align:center;
-margin-top:calc({text:post inner padding}px - ((2.3em - 1em) / 2));
-padding:0 {text:post inner padding}px;
+margin-top:calc({select:post padding inner} - ((2.3em - 1em) / 2));
+padding:0 {select:post padding inner};
}
.asker {
font-family:quicksand;
text-transform:uppercase;
-font-size:calc({text:font size}px - 2.5px);
+font-size:calc({select:font size} - 2.5px);
letter-spacing:2px;
}
@@ -1100,17 +1362,17 @@ border-spacing:4px 0px;
vertical-align:top;
}
-.trackdetails td:first-child {
+.trackdetails td:first-child, .npf-audio-details > * {
font-family:quicksand;
text-transform:uppercase;
- font-size:calc({text:font size}px - 2px);
+ font-size:calc({select:font size} - 2px);
letter-spacing:0.5px;
color:{color:headings};
}
/*---------------------------VIDEO---------------------------*/
.tumblr_video_container {
- width:{text:post width}px!important;
+ width:{select:post width}!important;
height:auto!important;
max-height:540px!important;
overflow:hidden!important;
@@ -1148,7 +1410,7 @@ video {
.righteth {
position:fixed;
top:0;margin-top:0px;
- margin-left:calc({text:sidebar width}px + {text:sidebar right margin}px + {text:custom links width}px + {text:custom links right margin}px + {text:post width}px + ({text:post outer padding}px * 2) + ({text:post inner padding}px * 2) + {text:posts right margin}px);
+ margin-left:calc({select:sidebar width} + {select:sidebar right gap} + {select:custom links width} + {select:custom links right gap} + {select:post width} + ({select:post padding outer} * 2) + ({select:post padding inner} * 2) + {select:posts right gap});
height:100vh;
display:table;
}
@@ -1159,7 +1421,7 @@ video {
}
.pagi {
- padding:{text:pagination margin}px 0;
+ padding:{select:pagination arrow spacing} 0;
text-align:center;
}
@@ -1167,8 +1429,8 @@ video {
.pagi:last-child {padding-bottom:0px}
.pagi svg {
- width:{text:pagination arrow size}px;
- height:{text:pagination arrow size}px;
+ width:{select:pagination arrow size};
+ height:{select:pagination arrow size};
color:{color:pagination arrows};
}