cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <title>Dispatches from the shithole of Nambia</title>
<div class="leftmenu-nohide list of-buttons">
	<a href="#">follow DWol</a>
	<a href="#">follow #whiterabbit</a>
	<a href="#">follow #sillyseason</a>
</div>
<div class="post">
	<div class="sub">
		<div class="score-wrapper">
			<a id="up_399259" onclick="return vote(this)" href="#" class="score votes-8">
				<svg class="scorelogo" viewBox="0 0 612 612">
					<circle fill="#8097A4" cx=306 cy=306 r=130></circle>
					<circle fill="#8097A4" class="cdot" cx=489.2 cy=122.8 r=46></circle>
					<circle fill="#8097A4" class="cdot" cx=566 cy=306 r=46></circle>
					<circle fill="#8097A4" class="cdot" cx=489.2 cy=489.2 r=46></circle>
					<circle fill="#8097A4" class="cdot" cx=306 cy=566 r=46></circle>
					<circle fill="#8097A4" class="cdot" cx=122.8 cy=489.2 r=46></circle>
					<circle fill="#8097A4" class="cdot" cx=46 cy=306 r=46></circle>
					<circle fill="#8097A4" class="cdot" cx=122.8 cy=122.8 r=46></circle>
					<circle fill="#8097A4" class="cdot" cx=306 cy=46 r=46></circle>
				</svg>
				<a class="sharetext-score sharenum" href="#">21</a>
			</a>
		</div>
		<div class="postcontent">
			<div class="title">
				<a class="title-actual" href="#">Dispatches from the shithole of Nambia</a>
				<a class="combub" href="#">9</a>
				<a href="#" class="badged ajax">
					<svg class="bbadge" viewBox="0 0 812 812">
						<circle class="badgecircle" cx=406 cy=406 r=390 id="bcircle"></circle>
						<circle class="badgecenter" cx=406 cy=406 r=130></circle>
						<circle class="badgedot" cx=589.2 cy=222.8 r=46></circle>
						<circle class="badgedot" cx=666 cy=406 r=46></circle>
						<circle class="badgedot" cx=589.2 cy=589.2 r=46></circle>
						<circle class="badgedot" cx=406 cy=666 r=46></circle>
						<circle class="badgedot" cx=222.8 cy=589.2 r=46></circle>
						<circle class="badgedot" cx=146 cy=406 r=46></circle>
						<circle class="badgedot" cx=222.8 cy=222.8 r=46></circle>
						<circle class="badgedot" cx=406 cy=146 r=46></circle>
					</svg>
					<span class="badges-count">3</span>
				</a>
			</div>
			<div class="titlelinks list of-buttons">
				<a id="save_399259" onclick="return save(this)" href="#" class="title-button save">save</a>
				<a id="hide_399259" onclick="return hide(this)" href="#"class="title-button hide">hide</a>
				<a id="stick_399259" onclick="return stick(this)" href="#" class="title-button stick">stick</a>
				<a href="#" class="title-button badge">+!</a>
			</div>
			<div class="subtitle">
				<div class="shareline list of-buttons">
					<a id="username" href="#">DWol</a>
					<span class="timeago">22 days ago</span>
					<a href="#" class="ajax sharetext">
						<span class="sharenum">21</span> shared
					</a>
				</div>
			</div>
			<div class="bottomline list of-buttons">
				<a href="#">text</a>
				<a id="tag1" href="#">#whiterabbit</a>
				<a id="tag2" href="#">#sillyseason</a>
				<a class="commtagtrigger" href="#">+#</a>
			</div>
		</div>
    </div>
  </div>
  <div class="wholepub">
    <div class="pubcontent">
      <div class="pubtext">
      
        <p>Most of this really shouldn’t have to be said…</p>

        <p>I’m also not the best person to say it… but nevertheless I feel the need to vent a bit:</p>

        <p>Purported quotes: <i>“Why are we having all these people from shithole countries come here?” "Why do we need more Haitians? Take them out." Mr Trump told lawmakers [that] the US should instead be taking in migrants from countries like Norway.</i></p>

        <p>&#60;rant&#62;</p>

        <p><b>On the surface-level</b></p>

        <p>It’s obviously myopic to label entire swathes of the world “shitholes”. One could point to examples of decidedly non-shitty places in the shitholes as well as decidedly shitty places in the non-shitholes as riposte. Not worth splitting hairs about this as the main point is that TBH this level of thinking is a) not becoming of the office of the President and b) not indicative of someone who can think further than their eyes can see.</p>

        <p><b>But they are shitholes?</b></p>

        <p>
					<span class="marginnote">
  Trump will probably deny that he said it at all, but it will be too late for the foaming sycophants who publicly agree with his alleged statements.
</span>
					<i>Yes. Isn’t it great that we can now finally express our narrow-minded opinions unfettered by liberal/elite/intellectual imps and their fellatory attitude towards political correctness? The truth is the truth, and it wants to be heard.</i></p>

        <p>The argument that goes alongside this idea, if we are being charitable, is that it’s not racist if it’s true. Perhaps in the strict sense, but in the context of other things the man has said, it becomes another piece of ever-increasing evidence that he is, in fact, a flaming bigot.
					<span class="marginnote">Let’s not even begin to talk about America’s historical penchant for contributing to shitholery worldwide – I’m sure there will be some punditry on this topic elsewhere.</span>
					And this bigotry is oozing into your politics, national discourse and foreign policy in ways that are far less subtle than before.</p>

        <p><b>A country’s shittiness as determinant of what exactly?</b></p>

        <p>On the first level, it is quite obviously stupid to tie the preference for a potential immigrant to the status of their home country. There is presumably a process involved which negates having to rely on "nationality" as the deciding factor. Presumably also people who are happy where they are tend not to move to places which are worse for them (in the general sense that we are considering immigration here) so the point is probably moot.</p>

        <p>I’m sure the ancient Egyptians would have considered Europe to be a shithole too if they were thinking like this. The wheel turns slowly. But it does turn. And so it would appear that MAGA is not final, shittiness not fatal. Your president is a cock, my president is a cock. Your politicians are often shit, my politicians are often shit. Pray to your remaining institutions of social cohesion that you can keep it together lest the door hit you on the way out in the South China Sea some years from now.</p>

        <p>OK, a bit crude but the point is that petty nationalism and the related disparaging of the Other implies a lack of familiarity with “we hold these truths to be self-evident, that all men are created equal…” If nothing else, then I would hope that America can remember in the years to come what its founding principles were.</p>

        <p><b>Olive branch fatigue</b></p>

        <p>Many of us shitholers are constantly engaged in a very tiring battle to gain a more full humanity in the eyes of the likes of Trump’s base. This is the kind of struggle that Trump’s comments undermine. I think the key feature is that it’s actually quite difficult to explain things that e.g. to me might seem obvious, but in fact are hard to understand if you have a very different frame of reference. When Fanon says that people revolt “because they cannot breathe” I wonder who is capable of appreciating what he means.</p>

        <p>On a practical level, this kind of understanding is better found through calm engagement or reading a book but instead it tends to happen in the vitriolic spaces of social media – it’s worth a thought how much this is having a negative impact on “debates” – I certainly perceive that it is.</p>

        <p>Eventually people give up trying and become jaded. Cf. the processes by which people move from satyagraha or civil disobedience to armed struggle.</p>

        <p><b>Africa is a country, n’est ce pas?</b></p>

        <p>Firstly, the mere fact of calling out “Africa” as one of the shithole entities qualifies it for this one.</p>

        <p>Secondly, it’s telling that it is only some countries which are labelled as irredeemable shitholes. This idea is laid bare too obviously by Trump but I’m going to put it to you that he is not alone.
					<span class="marginnote">Mahmood Mamdani speaks about how Africa has been a victim of history by analogy – I will go look for the quote when I have the chance.</span>
					Most analysis of the continent is done through this lens and I invite you to extend a more critical eye.</p>

        <p><b>Dog whistles</b></p>

        <p>This is confirmed by his supposed preference for Norwegians… Norway, the social-democratic welfare state with universal healthcare. The fact that these policies are not in the US Overton window is apparently not enough to designate a country as a shithole and its citizens as fundamentally undesirable.</p>

        <p>It’s pretty clear what his rationale is here…</p>

        <p>In fact, as dog whistles go, the veneer is becoming increasingly thin. I watch with growing alarm at the amount of bile spewn by reinvigorated white nationalists. Please, America, don’t let them win. When the dust finally settles you will be hard pressed to find anyone who claims they voted for Trump, just like you can’t find anyone who voted for the NP in South Africa.</p>

        <p><b>Shithole today, trading partner tomorrow</b></p>

        <p>Even only practically, this numpty probably makes US diplomatic staff incredibly despondent. Good luck creating those bilateral trade deals with the shitholes – politics has never been rational and so these stupid things ironically matter. As one twitteratus put it: “If Africa is the shithole, y'all must enjoy eating ass”</p>

        <p>Anyway, Death to America, eat the rich, and furthermore Carthago delenda est.</p>

        <p>&#60;/rant&#62;</p>

        <p>P.S. in these trying times I have to add that I am not being 100% serious, if it wasn't clear...</p>
      </div>
    </div>
            
          
!
            
              @import url("https://fonts.googleapis.com/css?family=Merriweather:400,400i,700");

:root {
  --vote-size: 1.35rem;
  --sub-padding-top: 1.75rem;
	
	--count-pos-x: 0.75rem;
	--count-pos-y: 1.75rem;
}

/*   NECESSITIES   */

.hubwheel { fill: #8097a4; }
.hubwheel-a { fill: #f37901; }
.hubwheel-s { fill: #10bdbb; }

.bbadge {
  width: 22px;
  height: 22px;
  margin: 0 3px -1px;
}
.badgecircle { fill: #ebc400; }
.badgecenter { fill: #fff; }
.badgedot { fill: #fff; }

/*   FIXING THE WHEEL    */
/*   why it starts from 3 is
     beyond me */

.votes-1 .cdot:nth-of-type(n+3) { display: none; }
.votes-2 .cdot:nth-of-type(n+4) { display: none; }
.votes-3 .cdot:nth-of-type(n+5) { display: none; }
.votes-4 .cdot:nth-of-type(n+6) { display: none; }
.votes-5 .cdot:nth-of-type(n+7) { display: none; }
.votes-6 .cdot:nth-of-type(n+8) { display: none; }
.votes-7 .cdot:nth-of-type(n+9) { display: none; }
.votes-8 .cdot:nth-of-type(n+10) { display: none; }

/*   THE MAIN PART   */

body {
  font-family: "Merriweather", serif;
  padding-top: 1rem;
}

p {
  font-size: 0.9rem;
  margin: 0.9rem 0;
  line-height: 1.5rem;
  text-align: justify;
}
.marginnote { font-size: 0.9rem; font-style: italic; }

.leftmenu-nohide { font-size: 0.75rem; }

.score {
  float: left;
  position: absolute;
  left: calc((var(--vote-size) + 0.75rem) * -1);
  top: calc(var(--sub-padding-top) + 0.1rem);
}
.scorelogo {
  height: var(--vote-size);
  width: var(--vote-size);
}
.sharetext-score {
	display: none;
	position: absolute;
	top: calc(var(--sub-padding-top) + var(--count-pos-x));
	left: calc((var(--vote-size) + var(--count-pos-y)) * -1);
	text-align: right;
}

.sub {
  width: 55%;
  padding: var(--sub-padding-top) 0;
  font-size: 0.85rem;
  position: relative;
}

.title {
  margin-bottom: 1.25em;
  position: relative;
}
.title-actual {
  font-size: 1.3rem;
  font-variant: small-caps;
}
.badged {
  position: absolute;
  top: 2.4rem;
  left: -2.35rem;
}
.badges-count {
  position: absolute;
  top: var(--count-pos-x);
  right: var(--count-pos-y);
  text-shadow: none !important;
	text-align: right;
}
.combub { position: relative; top: 0.25rem; }

.titlelinks { float: right; }

.bottomline { margin-top: 1rem; }

/* JURY-RIGGED FIX FOR TUFTE CSS'
    LINK DESIGN
   TO BE FIXED BY EDITING
   TUFTE CSS DURING TRANSITION */
a { background-position: 0% 100%, 100% 100%, 0% 100% !important; }
.sub *:not(:hover),
.leftmenu-nohide *:not(:hover),
.badged,
.score {
  background: unset !important;
}

.list *:not(:first-child) {
  margin-left: 0.5rem;
}
  
  /*  EXPERIMENTS SECTION   */

/* UNCOMMENT TO MOVE 'SHARED' COUNT
   UNDER THE VOTE BUTTON
!! HIDES SUBTITLE SHARED COUNT */
.sharetext-score { display: block; }
.sharetext { display: none; }

/* UNCOMMENT ALSO TO ONLY DISPLAY
   'SHARED' COUNT UNDER THE VOTE
   BUTTON IF THERE ARE MORE THAN
   OR EXACTLY 8 VOTES */
.sharetext-score { display: none; }
.votes-8 + .sharetext-score { display: block; }

/* UNCOMMENT TO RETURN
   MIDDOTS BETWEEN LIST ITEMS */
/* .list *:not(:first-child):before {
  content: "\00B7";
  margin-right: 0.7em;
} */

/* UNCOMMENT TO MAKE SUB LINKS
   INTO BUTTONS
!! REPLACES UNDERLINE ON HOVER */

.list.of-buttons a {
	background-color: #dddddd !important;
  text-shadow: none;
	padding: 0.4rem 0.65rem;
}
.list.of-buttons a:hover {
  background-color: #bbbbbb !important;
}
.sub *,
.leftmenu-nohide * {
  background: unset !important;
}
.bottomline {
  margin-top: 1.5rem;
}

/* UNCOMMENT TO HIDE THE BADGE DOTS */

.badgedot { fill: #ebc400; } 

/* UNCOMMENT TO MOVE
   TITLE MENU TO THE SIDE */

/* .titlelinks {
  position: absolute;
  right: -4.35rem;
	top: 1.5rem;
}
.titlelinks a {
	display: block;
	margin-left: 0 !important;
	margin-top: 0.5rem;
} */

/* UNCOMMENT ALSO TO MAKE
   THE TITLE MENU STICK TO
   THE TOP */

/* .titlelinks {
  position: fixed;
} */

/* UNCOMMENT TO LIMIT LINE LENGTH
   TO 450px (~50-60 SYMBOLS / LINE) */
/* p { max-width: 450px; } */

/* UNCOMMENT TO LIMIT SUB'S
   WIDTH TO 450px */
/* .sub { max-width: 450px; } */
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console