so the user can choose positioning of the sidebar. head, left or right. I use grid for that. */ main { display: grid; margin-top: var(--gap-top-bottom); gap: 4rem 5rem; justify-items: center; justify-content: center; flex: 1; } .th-container { width: 1020px; height: 600px; background-color: rgb(var(--c-bg3)); overflow: auto; position: relative; border: 1px solid rgb(var(--c-border)); } .center { margin: 0; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } /* ------------------------------------- sidebar */ #sb-container { display: grid; width: 399px; height: 500px; background: linear-gradient(242deg, rgb(var(--c-acc2)) 0%, rgb(var(--c-acc1)) 100%); margin-left: -1px; position: fixed; z-index: 0; } #sb-desc { background-color: rgb(var(--c-bg1)); margin-left: -2px; position: fixed; height: 90px; width: 401px; margin-top: 509px; border-left: 1px solid rgb(var(--c-border)); border-right: 1px solid rgb(var(--c-border)); border-bottom: 1px solid rgb(var(--c-border)); } #sb-words { width: 270px; font-size: 0.85em; font-family: roboto mono; font-style: italic; color: var(--c-text); position: fixed; margin-left: 20px; margin-top: 12px; height: 72px; text-align: justify; overflow: auto; text-transform:lowercase; line-height: 110%; z-index: 1; } #sb-words b,strong { color: rgb(var(--c-acc1)); } #sb-words i,em { color: rgb(var(--c-acc2)); } #sb-links { font-family: lora; background-color: rgb(var(--c-bg3)); color: rgb(var(--c-acc1)); font-size: 0.9em; width: 400.75px; height: 24px; padding: 5px; text-transform: uppercase; text-align: center; margin-top: 485px; position: fixed; letter-spacing: 2px; margin-left:-0.75px; z-index: 3; border-bottom: 1px solid rgb(var(--c-border)); border-right: 1px solid rgb(var(--c-border)); border-left: 1px solid rgb(var(--c-border)); } #sb-links a { font-family: lora; text-transform: uppercase; color: rgb(var(--c-text)); } .sb-links a:hover { color: rgb(var(--c-acc2)); } #sb-image2 { position: fixed; height: 68px; width: 68px; background: linear-gradient(white, white) padding-box, linear-gradient(to right, rgb(var(--c-acc1)), rgb(var(--c-acc2))) border-box; border-radius: var(--circle); border: 4px solid transparent; margin-top: 10px; margin-left: 310px; } #sb-image2 img { object-fit: cover; height: 60px; width: 60px; border-radius: var(--circle); } #sb-image { margin: 100px auto; position: relative; width: 204px; height: 324px; border-radius: 50%; background-color: rgb(var(--c-bg3)); z-index: 4; border: 4px solid #fff; } .sb-title { font-family: "Sail", system-ui; font-size: 40px; background: -webkit-linear-gradient(rgb(var(--c-acc1)), rgb(var(--c-acc2))); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-top: 238px; margin-left: 0px; width: 400px; z-index: 5; text-align: center; position: fixed; text-transform: lowercase; } .sb-subtitle { color: #fff; font-size: .9em; font-family: roboto mono; text-transform: uppercase; margin-top: 273px; margin-left: 0px; width: 400px; z-index: 5; text-align: center; position: fixed; } #sb-image img { width: 200px; height: 320px; position: relative; margin-left: -2px; margin-top: -2px; object-fit: cover; border-radius: 50%; filter: grayscale(100%) contrast(75%) brightness(50%); } #line { z-index: 3; height: 500px; position: fixed; margin-left: -100px; } #pattern { z-index: 3; height: 500px; position: fixed; } #line2 { z-index: 3; width: 495px; margin-top: 345px; margin-left: -2px; position: fixed; } #line3 { z-index: 3; height: 600px; position: fixed; margin-left: 50px; margin-top: 0px; } /*----- TABS -----*/ .x-circle { cursor:pointer;position:fixed;margin-left:900px;margin-top:30px;z-index:9999!important;font-size:50px;width:50px;height:50px; } .tab { overflow: hidden; } .tab button:hover { color: #fff; } .tab button.active {} .tabcontent { display:none; height: 100%; width: 100%; margin-left:0px; margin-top:0px; overflow-y:scroll; z-index:9!important; background-color: rgb(var(--c-bg3)); position:fixed; border-bottom: 1px solid rgb(var(--c-border)); border-right: 1px solid rgb(var(--c-border)); } .tablinks { cursor:pointer; } #blob3 { position:fixed; margin-top: -500px; margin-left: 150px; background-color: rgb(var(--c-acc2)); width:200px; height:200px; border-radius:100%; filter:blur(100px); opacity: 0.8; z-index:1; } #wave { z-index: 2; margin-left: -197px; margin-top: 2px; position: fixed; height: 585px; width: 590px; } .tabimage { width: 528px; height: 225px; margin-left: 495px; margin-top: -0.5px; position: fixed; z-index: 2; border: 1px solid rgb(var(--c-border)); } .tabimage img { width: 526px; height: 224px; object-fit: cover; filter: grayscale(100%) contrast(75%) brightness(50%); object-position: 50% 30%; } .tabimage2 { width: 498px; height: 197px; margin-left: -4px; margin-top: 403px; position: fixed; z-index: 2; border: 1px solid rgb(var(--c-border)); } .tabimage2 img { width: 498px; height: 195px; object-fit: cover; filter: grayscale(100%) contrast(75%) brightness(50%); object-position: 50% 30%; } .tab-title { font-family: "Sail", system-ui; font-size: 32px; background: -webkit-linear-gradient(rgb(var(--c-acc1)), rgb(var(--c-acc2))); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-top: 5px; margin-left: 105px; width: 395px; z-index: 5; text-align: right; position: fixed; text-transform: lowercase; padding: 10px; } .tab-subtitle { color: rgb(var(--c-acc1)); font-size: 0.9em; font-family: Roboto Mono; text-transform: uppercase; margin-top: 50px; margin-left: 115px; width: 370px; z-index: 5; text-align: right; position: fixed; font-style: italic; font-weight: bold; line-height: 135%; } .tab-desc { position: fixed; width: 300px; margin-left: 180px; margin-top: 95px; height: 250px; z-index: 5; text-align: right; border-right: 10px solid rgb(var(--c-acc1)); padding-top: 5px; padding-bottom: 5px; padding-right: 15px; font-family: var(--font); text-transform: uppercase; color: rgb(var(--c-text)); line-height: 120%; font-size: 0.9em; font-weight: 500; overflow: auto; } .tab-desc b, strong { color: rgb(var(--c-acc1)); } .tab-desc i, em { color: rgb(var(--c-acc2)); font-weight: bold; } .tab-links { font-size: 16px; text-transform: uppercase; font-family: roboto mono; color: rgb(var(--c-acc2)); font-style: italic; font-weight: bold; position: fixed; width: 350px; margin-left: 130px; margin-top: 360px; text-align: right; line-height: 110%; z-index: 6; } .tab-links a { color: rgb(var(--c-acc2)); font-size: 16px; text-transform: uppercase; font-family: roboto mono; font-style: italic; font-weight: bold; line-height: 110%; } .tab-links a:hover { color: rgb(var(--c-acc1)); } .tabmuses { overflow: hidden; width: 527px; height: 376px; margin-left: 495px; margin-top: 224px; position: fixed; z-index: 0; background-color: rgb(var(--c-bg1)); border: 1px solid rgb(var(--c-border)); background-image: linear-gradient(rgb(var(--c-border)) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--c-border)) 1px, transparent 1px); background-size:20px 20px; background-position:center center; background-attachment:fixed; } .scrollmuse { position: fixed; margin-left: 660px; margin-top: 240px; z-index: 1; height: 20px; width: 175px; font-family: roboto mono; text-transform: uppercase; background-image: linear-gradient(rgb(var(--c-acc1)),rgb(var(--c-acc2))); color: rgb(var(--c-bg1)); text-align: center; padding-top: 3px; font-size: 0.9em; font-style: italic; } #musestitle { color: rgb(var(--c-bg1)); font-family: sail; font-size: 80px; writing-mode: vertical-rl; text-orientation: mixed; margin-top: 18px; margin-left: 440px; text-transform: lowercase; z-index: 4; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: rgb(var(--c-acc2)); } #musescontainer { z-index: 0; position: fixed; margin-top: 252px; margin-left: 529px; width: 430px; height: 320px; background: linear-gradient(rgb(var(--c-bg1)), rgb(var(--c-bg1))) padding-box, linear-gradient(to right, rgb(var(--c-acc1)), rgb(var(--c-acc2))) border-box; border: 2px solid transparent; overflow: auto; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 100px; justify-content: space-evenly; } .box { transform-style: preserve-3d; border-radius: 20px; width: 65px; height: 65px; z-index: 5; margin: 20px; cursor: pointer; } .box img { border-radius: 20px; width: 65px; height: 65px; object-fit: cover; filter: grayscale(100%) brightness(85%) contrast(85%); border: 1px rgb(var(--c-text)) solid; } .box::before { content: ""; position: absolute; inset: -3px; background: linear-gradient(#ADC2E6,#deafd5); filter: blur(5px); transform: translate3d(4px,2px,-1px); border-radius: inherit; pointer-events: none; opacity: 0.9; } .musetabdesc { position: fixed; right: 1px; top: 1px; width: 395px; height: 599px; background-color: rgb(var(--c-bg1)); border-left: 1px solid rgb(var(--c-border)); } .musetabimg { height: 601px; width: 300px; position: fixed; top: 0px; left: -2px; object-fit: cover; z-index: 2; border-top-right-radius: 300px; border-bottom-right-radius: 300px; } .musetabimg img { height: 601px; width: 300px; object-fit: cover; border-top-right-radius: 300px; border-bottom-right-radius: 300px; filter: grayscale(100%) contrast(75%) brightness(50%); border: 1px solid rgb(var(--c-border)); } .musetababout { height: 560px; width: 280px; margin-top: 20px; margin-left: 320px; overflow: auto; font-family: lora; font-size: 1em; color: rgb(var(--c-text)); text-align: justify; font-weight: normal; line-height: 125%; z-index: 5; position: fixed; } .musetababout h1 { text-align: center; font-family: sail; font-size: 2em; line-height: 125%; text-transform: lowercase; background: -webkit-linear-gradient(rgb(var(--c-acc1)), rgb(var(--c-acc2))); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: bold; } .musetabimg2 { width: 396px; height: 150px; position: fixed; bottom: 0.5px; right: -1px; object-fit: cover; border-top: 1px solid rgb(var(--c-border)); } .musetabimg2 img { width: 396px; height: 150px; object-fit: cover; filter: grayscale(100%) contrast(75%) brightness(50%); } .musetabbio { height: 435px; width: 310px; position: fixed; overflow: auto; top: 10px; right: 45px; text-align: justify; line-height: 120%; } .musetabbio strong { background-color: rgb(var(--c-acc2)); color: rgb(var(--c-bg1)); padding: 5px; font-size: 0.9; font-family: roboto mono; float: left; margin-right: 10px; } /* ------------------------------------- pagination */ nav.pagi a[class*="page"] { color: #000; cursor: default; padding: 0.8rem; opacity: 0.3; z-index: 4; margin-left: 0px; margin-bottom: 30px; background: linear-gradient(to right, rgb(var(--c-acc1)), rgb(var(--c-acc2))); } nav.pagi a.has_page { cursor: pointer; opacity: 1; } nav.pagi a.has_page:hover { color: rgb(var(--c-link)); } /* ------------------------------------- sections */ /* section.content that contains the post and the pagination at the bottom */ section.content { grid-area: post; width: var(--post-width); position: relative; margin-left: 348px; z-index: 5; } /* the post container with post info + tags */ article { width: 100%; border: 1px solid rgb(var(--c-border)); background-color: rgb(var(--c-bg2)); overflow: hidden; margin-bottom: var(--gap-post-margin); } /* the post container - only the post content */ .post-content { } /* ------------------------------------- lineheight I try to keep the line-height on the text itself inside the article, rather than the since it will skew or elongate buttons or square divs. "article .question" is the text in ask question/answer. if you need line-height on anothers, simply add it here to the list. I use :is instead of:where because I don't want accidentally override it. */ :is(article h1, article h2, article h3, article p, article ul, article ol, article blockquote, article .question, ol.notes) { line-height: var(--line-height); } /* ------------------------------------- captions and others */ .caption b,strong { color: rgb(var(--c-acc1)); } .caption i,em { color: rgb(var(--c-acc2)); } /* the padding for basically everything that isn't photos */ article figcaption.audio-caption, /* <-- npf audio wrapper */ article h1, article h2, article h3, article ul, article ol, article pre, article blockquote, article .caption p, article .replies p, article .question p { margin: var(--text-margin); } article ul, article ol { padding-left: var(--text-margin); } article h1, .poll-post .poll-question { font-size: 1.5em; font-weight: 700; } article h2 { font-size: 1.3em; font-weight: 700; } article h3 { font-size: 1.1em; font-weight: 700; } /* user original */ .reblog-header { margin: var(--text-margin); } /* user reblogs */ .reblog-header:is(:not(.original)) { border-top: 0px solid rgb(var(--c-border)); margin: 0 0 var(--gap2) 0; padding: var(--text-margin) var(--text-margin) 0 var(--text-margin); } .reblog-header img { max-width: 2em; height: auto; border-radius: var(--circle); background: linear-gradient(white, white) padding-box, linear-gradient(to right, rgb(var(--c-acc1)), rgb(var(--c-acc2))) border-box; border: 4px solid transparent; } .reblog-header .user { color: rgb(var(--c-text)); text-transform: lowercase; font-family: "Sail", system-ui; font-style: normal; font-size: 30px; transition: all 0.5s ease-in-out; } .reblog-header a.user:hover { color: rgb(var(--c-acc1)); transition: all 0.5s ease-in-out; } span.deactivated:after { content:'deactivated'; opacity:0; transition: all 0.2s ease; margin-left: 10px; } .reblog-header:hover span.deactivated:after { opacity:0.7; } p:empty { display: none; } /* ------------------------------------- npf photoset stuff. */ figure.tmblr-full:is(:not(:last-of-type)) { margin-bottom: var(--gutter); } figure:is(:not(:last-of-type)) { margin-bottom: var(--gutter); } article img { display: block; } article iframe, article img { max-width: 100%; height: auto; } .post-content div.npf_row { margin-bottom: calc(var(--gutter) - 4px); } .post-content div.npf_row:last-child { margin-bottom: 0; } .post-content div.npf_row .npf_col { margin-right: calc(var(--gutter) - 4px); } .post-content div.npf_row .npf_col:last-child { margin-right: 0; } .npf_row:only-of-type, .npf-photos, .more_photoset, .legacy-photo img, .photoset { border-radius: var(--photo-corners); overflow:hidden; margin: auto; } .npf-photos:has(+figure) { border-radius: var(--photo-corners) var(--photo-corners) 0 0; max-width: fit-content; } .npf-photos + figure { overflow: hidden; border-radius: 0 0 var(--photo-corners) var(--photo-corners); margin: var(--gutter) auto auto; max-width: fit-content; } /* ------------------------------------- legacy photoset stuff. */ /* Gutter width has to be divided into 2 since it's the padding that's around each photo-row or legacy-photoset-inner - last one being the inner container of the photoset. See 5ppi Flexible Photoset credit for more info */ .photo-row { padding: calc(var(--gutter) / 2) 0; display:flex; } .photo-row:first-child { padding-top:0; } .photo-row:last-child { padding-bottom:0; } /* legacy-photoset-inner is inside each photo-row, use inspect firefox or chrome to see more */ .legacy-photoset-inner { cursor:pointer; padding: 0 calc(var(--gutter) / 2); flex-grow:1; } .legacy-photoset-inner:first-child { padding-left:0; } .legacy-photoset-inner:last-child { padding-right:0; } /* every single img.image inide legacy-photoset-inner */ .image { display:block; } .photo-row-1 .legacy-photoset-inner { width:100%; } .photo-row-2 .legacy-photoset-inner { width:50%; } .photo-row-3 .legacy-photoset-inner { width:33.3333333%; } /* single legacy photo post */ .photo-single { cursor: pointer; } /* ------------ blockquotes, quote posts, legacy quotes */ article blockquote { border-left: 1px solid rgb(var(--c-border)); padding-left: var(--text-margin); } /* there's already a margins around

*and* blockquote, so let's remove it around

*/ article blockquote p { margin: 0!important; } /* ------------ styling different stuff */ small, sup, sub, big, p.npf_quote { font-size: inherit; font-family: inherit; vertical-align: inherit; } p.npf_quirky { line-height: inherit; font-size: 1.6em; } pre { white-space: initial; margin: 0; } code { line-height: inherit !important; background: transparent; font-size: inherit !important; word-wrap: break-word; } /* ------------------------------------- post footer */ footer.info { border-top: 1px solid rgb(var(--c-border)); padding: var(--text-margin); } .info-inner a { color: var(--c-text); font-family: "roboto mono"; text-transform: uppercase; font-weight: bold; } .info-inner a:hover, .toggle-tags:hover { color: rgb(var(--c-acc1)); } .date { font-size: 1em; font-style: normal; } .date a { color: var(--c-acc1); } .info-icon { display: inline-flex; font-size: 1.5em; } .interact { gap: 0.8rem; } /* make 'em square */ .interact a { display: inline-flex; } /* like */ a.custom-like-container { position: relative; } a.custom-like-container .like_button { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; opacity: 0; } a.custom-like-container .like_button iframe { width: 100%!important; height: 100%!important; } a.custom-like-container .liked + .custom-like-icon { color: rgb(var(--c-acc1))!important; } /* tags */ .toggle-tags { cursor: pointer; transition: all 0.2s ease; display: inline-flex; } .toggle-tags:hover { color: rgb(var(--c-acc1)); } .tags { margin-top: var(--gap2); } /* --------- on permalink pages */ .permalink-ago { font-weight: 700; font-size: 1em; font-family: "roboto mono"; text-transform: uppercase; } .permalink-date { line-height: 1.6; margin-top: 0.4em; } .permalink-reblogged { flex-direction: column; margin-top: var(--gap3); gap: 10px; } .permalink-source { margin-top: var(--gap1); display: block; } /* ------------------------------------- notes */ .notecount { font-family: "roboto mono"; text-transform: uppercase; font-weight: bold; font-size: 1em; } .notes-container { margin-top: var(--gap4); } span.note-counter { display: block; font-weight: 600; margin-bottom: var(--gap3); font-family: "roboto mono"; text-transform: uppercase; font-weight: bold; font-size: 1em; } ol.notes li.note { padding: var(--gap1) 0; position: relative; list-style-type: none; } ol.notes li.note img.avatar { margin-right: var(--gap1); vertical-align: middle; max-width: 2em; height: auto; background: linear-gradient(white, white) padding-box, linear-gradient(to right, rgb(var(--c-acc1)), rgb(var(--c-acc2))) border-box; border-radius: var(--circle); border: 4px solid transparent; } a.more_notes_link { color: rgb(var(--c-text)); display: block; font-family: roboto mono; font-weight: 500; background: linear-gradient(to right, rgb(var(--c-acc1)), rgb(var(--c-acc2))); padding: 5px; margin-bottom: 20px; color: #000; } /* ------------------------------------- POST-TYPE: poll */ .poll-post a.poll-row { color: rgb(var(--c-text)); line-height: inherit !important; font-size: var(--font-size); border-radius: var(--round1); padding: 8px var(--gap1); font-weight: 600; margin: var(--text-margin) 0; border: 1px solid rgb(var(--c-border)); background-color: rgb(var(--c-bg2)); width: auto!important; text-align: center; min-height: auto; } .poll-post a.poll-row:hover { color: rgb(var(--c-acc1))!important; } a.poll-row p { margin: 0!important; } .poll-post .poll-see-results { margin-top: 0; margin-bottom: var(--text-margin); } /* ------------------------------------- POST-TYPE: quote */ p.npf_quote { font-family: "Sail", system-ui; font-size: 30px; text-transform: lowercase; line-height: 100%; color: rgb(var(--c-acc1)); } /* ------------------------------------- POST-TYPE: ask*/ .ask-container { border-bottom: 0px solid rgb(var(--c-border)); overflow: hidden; background-color: rgb(var(--c-bg1)); } .asker-wrap { margin: var(--text-margin); } .asker-wrap img { width: 3em; height: 3em; border-radius: var(--circle); display: inline-flex; background: linear-gradient(white, white) padding-box, linear-gradient(to right, rgb(var(--c-acc1)), rgb(var(--c-acc2))) border-box; border: 4px solid transparent; } .ask-user-info { gap: 0.8rem; flex-direction: column; } .ask-user-info span:first-child { font-weight: 700; text-transform: lowercase; } .ask-user-info a.asker, .ask-user-info a.answerer { color: rgb(var(--c-text)); } .ask-user-info a.asker:hover, .ask-user-info a.answerer:hover { color: rgb(var(--c-acc1)); } /* margin on ask since some legacy asks don't wrap the questions in

... */ .question { margin: var(--text-margin); } /* .. then remove the usual horizontal margins we've created earlier...*/ .question p { margin-right: 0!important; margin-left: 0!important; } /* ... and remove the first and last vertical margins we've created earlier

*/ .question p:first-of-type { margin-top: 0; } .question p:last-of-type { margin-bottom: 0; } /* keep npf photos from extending over the askbox size */ .question .npf_inst { max-width: 100%; margin: 0; } /* keeps the aspect ratio and width on images inside asks */ :where(.question, .replies, .rb-answer) img { width: auto!important; max-width: 100%; border-radius: var(--photo-corners); } /* this is the original answer container */ .replies { margin-top: var(--text-margin); background-color: rgb(var(--c-bg3)); } /* this is the rebloged answer container */ .rb-answer { margin-bottom: -1px; /* to fix double border at bottom when using borders */ background-color: rgb(var(--c-bg2)); } /* ------------------------------------- POST-TYPE: chat */ p.npf_chat span.label { font-weight: 600; } p.npf_chat { font-family: inherit!important; background-color: rgb(var(--c-bg1)); padding: 10px; border: 1px solid rgb(var(--c-border)); } /* ------------------------------------- video /audio responsiveness */ /* since aspect-ratio is now supported CSS, the following takes care of reponsiveness and the aspect ratio of videos and iframes and sound. */ article iframe:not(iframe.bandcamp_audio_player,.spotify_audio_player, iframe.soundcloud_audio_player, iframe.tumblr_audio_player) { max-width: 100%; aspect-ratio: 16/9; height: auto; } iframe.soundcloud_audio_player, .tumblr_video_container { width: 100%!important; height: auto!important; } figure iframe.spotify_audio_player, iframe.spotify_audio_player { max-height: 90px; width: 100%; } article iframe[src*='soundcloud'] { max-height: 130px; width: 100%; } figure iframe.bandcamp_audio_player { max-height: 120px; width: 100%; } iframe.tumblr_audio_player { max-height: 85px; width: 100%; } /* ------------------------------------- POST TYPE: audio */ .audio_player { max-height: 27px; } .tmblr-full>.audio-caption .audio-details { padding: 0; flex: 1; } .tmblr-full>.audio-caption .album-cover { flex: none; margin-left: var(--text-margin); background: linear-gradient(white, white) padding-box, linear-gradient(to right, rgb(var(--c-acc1)), rgb(var(--c-acc2))) border-box; border-radius: var(--round1); border: 4px solid transparent; } /* ------------------------------------- POST TYPE: link */ /* recreated tumblr's npf style of link posts so legacy will match. see HTML part for more info */ div.npf-link-block { align-items: flex-start; border: 1px solid rgb(var(--c-border)); background-color: rgb(var(--c-bg1)); border-radius: var(--round2); display: flex; justify-content: center; margin: var(--text-margin); overflow: hidden; flex-direction: column; } div.npf-link-block .poster { -ms-flex-align: center; align-items: center; background-position: 50%; background-repeat: no-repeat; background-size: cover; background-clip: content-box; border-bottom: 1px solid rgb(var(--c-bg1)); display: -ms-flexbox; display: flex; height: 250px; -ms-flex-pack: center; justify-content: center; position: relative; } div.npf-link-block .title { font-size: 1.5em; line-height: var(--line-height); max-height: 136px; overflow: hidden; overflow-wrap: anywhere; text-overflow: ellipsis; font-weight: 500; padding: var(--gap2) var(--gap2) 0; } div.npf-link-block .poster .title { color: #fff; font-weight: 400; padding: var(--gap3); position: absolute; text-align: center; } div.npf-link-block .bottom { color: inherit; line-height: var(--line-height); padding: var(--gap2); } div.npf-link-block .bottom .description { color: inherit; font-size: inherit; line-height: inherit; margin: 0; max-height: 80px; overflow: hidden; overflow-wrap: anywhere; text-overflow: ellipsis; } div.npf-link-block .bottom .site-name { color: rgb(var(--c-link)); font-size: inherit; font-weight: 400; line-height: var(--line-height); margin-top: 10px; opacity: 1; text-transform: uppercase; } /* ------------------------------------- corners */ .top-corner { position: fixed; flex-direction: column; top: var(--gap1); right: var(--gap1); z-index: 2; align-items: flex-end; } /* styling right side icons */ .right-icon { padding: 0.5rem; font-size: 1.5em; background-color: rgb(var(--c-bg2)); border: 1px solid rgb(var(--c-border)); color: rgb(var(--c-text)); border-radius: var(--round2); } /* tumblr controls stuff */ iframe.tmblr-iframe, .tmblr-iframe { z-index: 99!important; opacity: 0; visibility: hidden; top: 1rem; right: 5rem!important; transform: scale(0.8); transform-origin: 100% 0; transition: all 0.3s ease; } .tmblr-iframe.active { opacity: 1; visibility: visible; } .spin { transition: rotate .4s ease; } .spin.active { rotate: 30deg; } /* ------------------------------------------------- responsive */ @media only screen and (max-width: calc(500px + 350px)) { :root { --sb-width: var(--post-width); } :is(.left,.right) main { grid-template-areas: "sb" "post"; } } @media only screen and (max-width: calc(500px + 50px)) { :root { --post-width: 85vw; --sb-width: 85vw } main { width: 100vw; } }

Lorem ipsum odor amet, consectetuer adipiscing elit. Semper ex a nostra lobortis vestibulum ad. Nibh urna erat scelerisque consectetur nisi? Mus erat nec taciti cursus sodales adipiscing class iaculis. Vehicula convallis cras pellentesque scelerisque ipsum auctor phasellus accumsan. Duis vestibulum turpis dapibus quam ligula vulputate, risus condimentum. Efficitur consequat rhoncus ultricies potenti litora orci eu morbi torquent.

Ligula vivamus maximus torquent velit, non pharetra praesent nisl risus. Nullam euismod metus imperdiet quam felis non cursus. Interdum dignissim dignissim; elementum nascetur mauris ullamcorper diam adipiscing. Consequat mi molestie libero senectus condimentum leo parturient convallis. Gravida morbi netus, mus efficitur duis congue dignissim. Maecenas venenatis pellentesque penatibus cursus inceptos quisque odio. Ullamcorper venenatis nisi; lectus dictumst himenaeos facilisi id magnis egestas. Lacus cras finibus et semper ante. Porttitor fames facilisis lectus pellentesque massa accumsan massa elementum hac.

Fusce torquent vitae convallis cursus himenaeos rhoncus a. Scelerisque consequat ex maecenas laoreet mattis quisque hac. Consectetur pellentesque ultricies ex dignissim sed faucibus et. In suspendisse eleifend tellus; eget consectetur nostra quisque. Ex nisl eu torquent primis placerat consequat? Nam pharetra magna dui gravida et fusce pretium ad. Ornare posuere felis leo a nulla et. Diam potenti suscipit pulvinar nullam ullamcorper netus orci.

Lectus mus elit pellentesque dignissim pretium duis. Consectetur mattis ut, id quisque lobortis pretium proin. Imperdiet metus nibh maecenas enim parturient blandit quis. Platea vehicula turpis ipsum cubilia hendrerit euismod felis turpis. Congue placerat congue leo non nunc eget. Nulla torquent quis aenean vivamus nulla augue. Tellus magna bibendum urna consectetur in. Ante parturient senectus; felis maximus suspendisse libero nullam sem. Venenatis efficitur imperdiet curae sociosqu est sit non.

Eget potenti non pretium feugiat quis laoreet at cubilia. Nam vel eget risus; habitant scelerisque habitant. Donec non natoque hac lobortis rhoncus primis. Conubia habitasse vestibulum placerat ridiculus ultrices pharetra per efficitur lobortis. Felis mi aliquam turpis habitasse et netus dapibus. Vitae hac facilisi facilisis quam ac platea. Vivamus curae blandit ultricies adipiscing iaculis vestibulum urna pulvinar.

LABEL The Benevolent.


AGE 24.


FACE CLAIM Kaylee Kaneshiro.


OCCUPATION Verse dependent.


GENDER Demigirl.


PRONOUNS She/they.


SEXUALITY Bisexual biromantic.


Lorem ipsum odor amet, consectetuer adipiscing elit. Semper ex a nostra lobortis vestibulum ad. Nibh urna erat scelerisque consectetur nisi? Mus erat nec taciti cursus sodales adipiscing class iaculis. Vehicula convallis cras pellentesque scelerisque ipsum auctor phasellus accumsan. Duis vestibulum turpis dapibus quam ligula vulputate, risus condimentum. Efficitur consequat rhoncus ultricies potenti litora orci eu morbi torquent.

Ligula vivamus maximus torquent velit, non pharetra praesent nisl risus. Nullam euismod metus imperdiet quam felis non cursus. Interdum dignissim dignissim; elementum nascetur mauris ullamcorper diam adipiscing. Consequat mi molestie libero senectus condimentum leo parturient convallis. Gravida morbi netus, mus efficitur duis congue dignissim. Maecenas venenatis pellentesque penatibus cursus inceptos quisque odio. Ullamcorper venenatis nisi; lectus dictumst himenaeos facilisi id magnis egestas. Lacus cras finibus et semper ante. Porttitor fames facilisis lectus pellentesque massa accumsan massa elementum hac.

Fusce torquent vitae convallis cursus himenaeos rhoncus a. Scelerisque consequat ex maecenas laoreet mattis quisque hac. Consectetur pellentesque ultricies ex dignissim sed faucibus et. In suspendisse eleifend tellus; eget consectetur nostra quisque. Ex nisl eu torquent primis placerat consequat? Nam pharetra magna dui gravida et fusce pretium ad. Ornare posuere felis leo a nulla et. Diam potenti suscipit pulvinar nullam ullamcorper netus orci.

Lectus mus elit pellentesque dignissim pretium duis. Consectetur mattis ut, id quisque lobortis pretium proin. Imperdiet metus nibh maecenas enim parturient blandit quis. Platea vehicula turpis ipsum cubilia hendrerit euismod felis turpis. Congue placerat congue leo non nunc eget. Nulla torquent quis aenean vivamus nulla augue. Tellus magna bibendum urna consectetur in. Ante parturient senectus; felis maximus suspendisse libero nullam sem. Venenatis efficitur imperdiet curae sociosqu est sit non.

Eget potenti non pretium feugiat quis laoreet at cubilia. Nam vel eget risus; habitant scelerisque habitant. Donec non natoque hac lobortis rhoncus primis. Conubia habitasse vestibulum placerat ridiculus ultrices pharetra per efficitur lobortis. Felis mi aliquam turpis habitasse et netus dapibus. Vitae hac facilisi facilisis quam ac platea. Vivamus curae blandit ultricies adipiscing iaculis vestibulum urna pulvinar.

LABEL The Byronic.


AGE 27.


FACE CLAIM Callum Turner.


OCCUPATION Verse dependent.


GENDER Cis man.


PRONOUNS He/him.


SEXUALITY Homosexual homoromantic.


Lorem ipsum odor amet, consectetuer adipiscing elit. Semper ex a nostra lobortis vestibulum ad. Nibh urna erat scelerisque consectetur nisi? Mus erat nec taciti cursus sodales adipiscing class iaculis. Vehicula convallis cras pellentesque scelerisque ipsum auctor phasellus accumsan. Duis vestibulum turpis dapibus quam ligula vulputate, risus condimentum. Efficitur consequat rhoncus ultricies potenti litora orci eu morbi torquent.

Ligula vivamus maximus torquent velit, non pharetra praesent nisl risus. Nullam euismod metus imperdiet quam felis non cursus. Interdum dignissim dignissim; elementum nascetur mauris ullamcorper diam adipiscing. Consequat mi molestie libero senectus condimentum leo parturient convallis. Gravida morbi netus, mus efficitur duis congue dignissim. Maecenas venenatis pellentesque penatibus cursus inceptos quisque odio. Ullamcorper venenatis nisi; lectus dictumst himenaeos facilisi id magnis egestas. Lacus cras finibus et semper ante. Porttitor fames facilisis lectus pellentesque massa accumsan massa elementum hac.

Fusce torquent vitae convallis cursus himenaeos rhoncus a. Scelerisque consequat ex maecenas laoreet mattis quisque hac. Consectetur pellentesque ultricies ex dignissim sed faucibus et. In suspendisse eleifend tellus; eget consectetur nostra quisque. Ex nisl eu torquent primis placerat consequat? Nam pharetra magna dui gravida et fusce pretium ad. Ornare posuere felis leo a nulla et. Diam potenti suscipit pulvinar nullam ullamcorper netus orci.

Lectus mus elit pellentesque dignissim pretium duis. Consectetur mattis ut, id quisque lobortis pretium proin. Imperdiet metus nibh maecenas enim parturient blandit quis. Platea vehicula turpis ipsum cubilia hendrerit euismod felis turpis. Congue placerat congue leo non nunc eget. Nulla torquent quis aenean vivamus nulla augue. Tellus magna bibendum urna consectetur in. Ante parturient senectus; felis maximus suspendisse libero nullam sem. Venenatis efficitur imperdiet curae sociosqu est sit non.

Eget potenti non pretium feugiat quis laoreet at cubilia. Nam vel eget risus; habitant scelerisque habitant. Donec non natoque hac lobortis rhoncus primis. Conubia habitasse vestibulum placerat ridiculus ultrices pharetra per efficitur lobortis. Felis mi aliquam turpis habitasse et netus dapibus. Vitae hac facilisi facilisis quam ac platea. Vivamus curae blandit ultricies adipiscing iaculis vestibulum urna pulvinar.

LABEL The Erudite.


AGE 27.


FACE CLAIM Taylor Russell.


OCCUPATION Verse dependent.


GENDER Cis woman.


PRONOUNS She/her.


SEXUALITY Bisexual biromantic.


Lorem ipsum odor amet, consectetuer adipiscing elit. Semper ex a nostra lobortis vestibulum ad. Nibh urna erat scelerisque consectetur nisi? Mus erat nec taciti cursus sodales adipiscing class iaculis. Vehicula convallis cras pellentesque scelerisque ipsum auctor phasellus accumsan. Duis vestibulum turpis dapibus quam ligula vulputate, risus condimentum. Efficitur consequat rhoncus ultricies potenti litora orci eu morbi torquent.

Ligula vivamus maximus torquent velit, non pharetra praesent nisl risus. Nullam euismod metus imperdiet quam felis non cursus. Interdum dignissim dignissim; elementum nascetur mauris ullamcorper diam adipiscing. Consequat mi molestie libero senectus condimentum leo parturient convallis. Gravida morbi netus, mus efficitur duis congue dignissim. Maecenas venenatis pellentesque penatibus cursus inceptos quisque odio. Ullamcorper venenatis nisi; lectus dictumst himenaeos facilisi id magnis egestas. Lacus cras finibus et semper ante. Porttitor fames facilisis lectus pellentesque massa accumsan massa elementum hac.

Fusce torquent vitae convallis cursus himenaeos rhoncus a. Scelerisque consequat ex maecenas laoreet mattis quisque hac. Consectetur pellentesque ultricies ex dignissim sed faucibus et. In suspendisse eleifend tellus; eget consectetur nostra quisque. Ex nisl eu torquent primis placerat consequat? Nam pharetra magna dui gravida et fusce pretium ad. Ornare posuere felis leo a nulla et. Diam potenti suscipit pulvinar nullam ullamcorper netus orci.

Lectus mus elit pellentesque dignissim pretium duis. Consectetur mattis ut, id quisque lobortis pretium proin. Imperdiet metus nibh maecenas enim parturient blandit quis. Platea vehicula turpis ipsum cubilia hendrerit euismod felis turpis. Congue placerat congue leo non nunc eget. Nulla torquent quis aenean vivamus nulla augue. Tellus magna bibendum urna consectetur in. Ante parturient senectus; felis maximus suspendisse libero nullam sem. Venenatis efficitur imperdiet curae sociosqu est sit non.

Eget potenti non pretium feugiat quis laoreet at cubilia. Nam vel eget risus; habitant scelerisque habitant. Donec non natoque hac lobortis rhoncus primis. Conubia habitasse vestibulum placerat ridiculus ultrices pharetra per efficitur lobortis. Felis mi aliquam turpis habitasse et netus dapibus. Vitae hac facilisi facilisis quam ac platea. Vivamus curae blandit ultricies adipiscing iaculis vestibulum urna pulvinar.

LABEL The Cataclysmic.


AGE 25.


FACE CLAIM Marlo Kelly.


OCCUPATION Verse dependent.


GENDER Cis woman.


PRONOUNS She/her.


SEXUALITY Bisexual biromantic.


Lorem ipsum odor amet, consectetuer adipiscing elit. Semper ex a nostra lobortis vestibulum ad. Nibh urna erat scelerisque consectetur nisi? Mus erat nec taciti cursus sodales adipiscing class iaculis. Vehicula convallis cras pellentesque scelerisque ipsum auctor phasellus accumsan. Duis vestibulum turpis dapibus quam ligula vulputate, risus condimentum. Efficitur consequat rhoncus ultricies potenti litora orci eu morbi torquent.

Ligula vivamus maximus torquent velit, non pharetra praesent nisl risus. Nullam euismod metus imperdiet quam felis non cursus. Interdum dignissim dignissim; elementum nascetur mauris ullamcorper diam adipiscing. Consequat mi molestie libero senectus condimentum leo parturient convallis. Gravida morbi netus, mus efficitur duis congue dignissim. Maecenas venenatis pellentesque penatibus cursus inceptos quisque odio. Ullamcorper venenatis nisi; lectus dictumst himenaeos facilisi id magnis egestas. Lacus cras finibus et semper ante. Porttitor fames facilisis lectus pellentesque massa accumsan massa elementum hac.

Fusce torquent vitae convallis cursus himenaeos rhoncus a. Scelerisque consequat ex maecenas laoreet mattis quisque hac. Consectetur pellentesque ultricies ex dignissim sed faucibus et. In suspendisse eleifend tellus; eget consectetur nostra quisque. Ex nisl eu torquent primis placerat consequat? Nam pharetra magna dui gravida et fusce pretium ad. Ornare posuere felis leo a nulla et. Diam potenti suscipit pulvinar nullam ullamcorper netus orci.

Lectus mus elit pellentesque dignissim pretium duis. Consectetur mattis ut, id quisque lobortis pretium proin. Imperdiet metus nibh maecenas enim parturient blandit quis. Platea vehicula turpis ipsum cubilia hendrerit euismod felis turpis. Congue placerat congue leo non nunc eget. Nulla torquent quis aenean vivamus nulla augue. Tellus magna bibendum urna consectetur in. Ante parturient senectus; felis maximus suspendisse libero nullam sem. Venenatis efficitur imperdiet curae sociosqu est sit non.

Eget potenti non pretium feugiat quis laoreet at cubilia. Nam vel eget risus; habitant scelerisque habitant. Donec non natoque hac lobortis rhoncus primis. Conubia habitasse vestibulum placerat ridiculus ultrices pharetra per efficitur lobortis. Felis mi aliquam turpis habitasse et netus dapibus. Vitae hac facilisi facilisis quam ac platea. Vivamus curae blandit ultricies adipiscing iaculis vestibulum urna pulvinar.

LABEL The Judge.


AGE 27.


FACE CLAIM Alisha Boe.


OCCUPATION Verse dependent.


GENDER Cis woman.


PRONOUNS She/her.


SEXUALITY Homosexual homoromantic.


Lorem ipsum odor amet, consectetuer adipiscing elit. Semper ex a nostra lobortis vestibulum ad. Nibh urna erat scelerisque consectetur nisi? Mus erat nec taciti cursus sodales adipiscing class iaculis. Vehicula convallis cras pellentesque scelerisque ipsum auctor phasellus accumsan. Duis vestibulum turpis dapibus quam ligula vulputate, risus condimentum. Efficitur consequat rhoncus ultricies potenti litora orci eu morbi torquent.

Ligula vivamus maximus torquent velit, non pharetra praesent nisl risus. Nullam euismod metus imperdiet quam felis non cursus. Interdum dignissim dignissim; elementum nascetur mauris ullamcorper diam adipiscing. Consequat mi molestie libero senectus condimentum leo parturient convallis. Gravida morbi netus, mus efficitur duis congue dignissim. Maecenas venenatis pellentesque penatibus cursus inceptos quisque odio. Ullamcorper venenatis nisi; lectus dictumst himenaeos facilisi id magnis egestas. Lacus cras finibus et semper ante. Porttitor fames facilisis lectus pellentesque massa accumsan massa elementum hac.

Fusce torquent vitae convallis cursus himenaeos rhoncus a. Scelerisque consequat ex maecenas laoreet mattis quisque hac. Consectetur pellentesque ultricies ex dignissim sed faucibus et. In suspendisse eleifend tellus; eget consectetur nostra quisque. Ex nisl eu torquent primis placerat consequat? Nam pharetra magna dui gravida et fusce pretium ad. Ornare posuere felis leo a nulla et. Diam potenti suscipit pulvinar nullam ullamcorper netus orci.

Lectus mus elit pellentesque dignissim pretium duis. Consectetur mattis ut, id quisque lobortis pretium proin. Imperdiet metus nibh maecenas enim parturient blandit quis. Platea vehicula turpis ipsum cubilia hendrerit euismod felis turpis. Congue placerat congue leo non nunc eget. Nulla torquent quis aenean vivamus nulla augue. Tellus magna bibendum urna consectetur in. Ante parturient senectus; felis maximus suspendisse libero nullam sem. Venenatis efficitur imperdiet curae sociosqu est sit non.

Eget potenti non pretium feugiat quis laoreet at cubilia. Nam vel eget risus; habitant scelerisque habitant. Donec non natoque hac lobortis rhoncus primis. Conubia habitasse vestibulum placerat ridiculus ultrices pharetra per efficitur lobortis. Felis mi aliquam turpis habitasse et netus dapibus. Vitae hac facilisi facilisis quam ac platea. Vivamus curae blandit ultricies adipiscing iaculis vestibulum urna pulvinar.

LABEL The Lone Wolf.


AGE 27.


FACE CLAIM Jessie Mei Li.


OCCUPATION Verse dependent.


GENDER Gender noncomforming woman.


PRONOUNS She/they.


SEXUALITY Homosexual homoromantic.


Lorem ipsum odor amet, consectetuer adipiscing elit. Semper ex a nostra lobortis vestibulum ad. Nibh urna erat scelerisque consectetur nisi? Mus erat nec taciti cursus sodales adipiscing class iaculis. Vehicula convallis cras pellentesque scelerisque ipsum auctor phasellus accumsan. Duis vestibulum turpis dapibus quam ligula vulputate, risus condimentum. Efficitur consequat rhoncus ultricies potenti litora orci eu morbi torquent.

Ligula vivamus maximus torquent velit, non pharetra praesent nisl risus. Nullam euismod metus imperdiet quam felis non cursus. Interdum dignissim dignissim; elementum nascetur mauris ullamcorper diam adipiscing. Consequat mi molestie libero senectus condimentum leo parturient convallis. Gravida morbi netus, mus efficitur duis congue dignissim. Maecenas venenatis pellentesque penatibus cursus inceptos quisque odio. Ullamcorper venenatis nisi; lectus dictumst himenaeos facilisi id magnis egestas. Lacus cras finibus et semper ante. Porttitor fames facilisis lectus pellentesque massa accumsan massa elementum hac.

Fusce torquent vitae convallis cursus himenaeos rhoncus a. Scelerisque consequat ex maecenas laoreet mattis quisque hac. Consectetur pellentesque ultricies ex dignissim sed faucibus et. In suspendisse eleifend tellus; eget consectetur nostra quisque. Ex nisl eu torquent primis placerat consequat? Nam pharetra magna dui gravida et fusce pretium ad. Ornare posuere felis leo a nulla et. Diam potenti suscipit pulvinar nullam ullamcorper netus orci.

Lectus mus elit pellentesque dignissim pretium duis. Consectetur mattis ut, id quisque lobortis pretium proin. Imperdiet metus nibh maecenas enim parturient blandit quis. Platea vehicula turpis ipsum cubilia hendrerit euismod felis turpis. Congue placerat congue leo non nunc eget. Nulla torquent quis aenean vivamus nulla augue. Tellus magna bibendum urna consectetur in. Ante parturient senectus; felis maximus suspendisse libero nullam sem. Venenatis efficitur imperdiet curae sociosqu est sit non.

Eget potenti non pretium feugiat quis laoreet at cubilia. Nam vel eget risus; habitant scelerisque habitant. Donec non natoque hac lobortis rhoncus primis. Conubia habitasse vestibulum placerat ridiculus ultrices pharetra per efficitur lobortis. Felis mi aliquam turpis habitasse et netus dapibus. Vitae hac facilisi facilisis quam ac platea. Vivamus curae blandit ultricies adipiscing iaculis vestibulum urna pulvinar.

LABEL The Primadonna.


AGE 26.


FACE CLAIM Rachel Zegler.


OCCUPATION Socialite.


GENDER Cis woman.


PRONOUNS She/her.


SEXUALITY Bisexual biromantic (closeted).


* it was an
( endless summer ... )
[ It was the summer I fucked up the summer fucked up me fucked up a fuck-up in the summer & I spent time laying under stars too much time I wasted the stars you lied to me under the stars ]

morning → rachelzegler

temporary url change 💜✨

WARNING do NOT start reading books and comics or watching movies or looking at art!!! you will start wanting to create art yourself. or god forbid. writing.

Should I put $10 towards food, or towards education and development in Gaza?

This is a real question, not just theory or philosophy… a question I face every day, and I found myself needing to answer it clearly.

Today in Gaza, people are hungry… but also, people are lost. There's a graduate sitting on rubble with no laptop to even work on. There's a university student studying by candlelight, without internet to continue their education. There's an engineer, who instead of building, is searching for a box of aid to feed his family.

Do you know what this means? It means the occupation doesn't want to kill us with bullets, it wants to kill us with ignorance, with helplessness, by turning us into just people waiting for a bag of flour, waiting for aid… and that's the biggest crime against us. Today we all in Gaza need a bite to eat… but tomorrow? Do I want to spend my whole life depending on others to live? This is the question that worries me the most!! Or should I be able to provide for myself and my family and rebuild my life from scratch?

That's why, instead of that $10 being a meal for one day, let it be an investment in a student who will emerge from under the rubble, will learn, and will be able to provide their own food forever.

Let it be a share of Esnad, not just so Gaza can live another day… but so that Gaza can rise, stand, and persevere forever.

Help us build a future for the coming days in Gaza. We at ISNAD Foundation provide free scholarships for students. Help us rebuild Gaza by building its students and empowering them to have a suitable learning environment.

Gaza students need your support. Final exams are about to start and as you know there are no universities in Gaza so education is online but there is another obstacle which is the internet and electricity!! But we at Isnad with your help and donations will provide a safe and dedicated place to study so that students can complete their education. All you have to do is make a small donation. A student sponsorship is equal to $150. There is no problem with your small donation, a little on a little is worth a lot.

The most important thing about this is that the place we got requires us to pay rent within Saturday, which is four days away, so we need your help to raise $1,500 within the four days.
We have $225 so far.

@g0at0ad @feluka @gothhabiba

Hey all, please support if you can! They urgently need to raise this $1,500 by Saturday as they will lose their booking! As Israel has destroyed all educational infrastructure in Gaza, please support Gazan students who want nothing more than to continue their education!

"if tumblr dies you can find me on bluesky" "if tumblr dies you can find me on Instagram" if tumblr dies you cannot find me. It's over. I'm free.