Actions

Work Header

Rating:
Archive Warning:
Fandom:
Additional Tags:
Language:
English
Stats:
Published:
2026-04-11
Completed:
2026-04-12
Words:
1,361
Chapters:
3/3
Comments:
2
Kudos:
11
Bookmarks:
5
Hits:
194

Academic Journal Article Work Skin

Summary:

Work skin that mimics an academic journal article being accessed through an online database.

Notes:

I created this for my Iron Leaguer crack fic Frontiers in Understanding: On Human-Leaguer Sexual Relationships , where you can see it in action. It's nothing super fancy, but I'm sharing it by request for anyone else who wants to make use of it.

Chapter 1 goes through the HTML formatting for the desktop version, chapter 2 covers the HTML for the mobile version, and chapter 3 shares the CSS styling for both.

Chapter 1: Desktop version - HTML Formatting

Chapter Text

This section creates the header. It's set up as a grid where the first item is three times the size of each other item so that the site title will be separated from the navigation bar elements. Each navigation element has a Unicode icon in front of the text styled with the icon class.


<div class="header">
	<p>ILsevier &#169;</p>
	<p><span class="icon link">&#128366;&#xFE0E;</span>Journals</p>
	<p><span class="icon link">&#128269;&#xFE0E;</span>Search</p>
	<p><span class="icon link">&#128100;&#xFE0E;</span>Account</p>
	<p><span class="icon link">&#127963;&#xFE0E;</span>Institutional login</p>
</div>

This next section creates the secondary header of access options. It's a simple list of links with the first one styled to look like a button.


<div class="access">
	<ul class="access-options">
		<li class="link">Access through your institution</li>
		<li class="link">Purchase PDF</li>
		<li class="link">Subscription options</li>
	</ul>
</div>

The main section consists of two subsections: the sidebar and the article itself. Everything here is mostly just a heading or paragraph text with styling. The two interactive bits (the author's affiliation and the full text link are achieved with <details> toggles. All icons are Unicode.


<div class="main">
	<div class="sidebar">
		<p class="title">Qualitative Research Methods in Iron Leaguer Studies</p>
		<p class="link">Editorial board</p>
		<p class="link">Browse journal</p>
		<p class="title">Volume 48, Issue 3</p>
		<p class="link">Table of contents</p>
		<hr/>
		<p class="title">Article Metrics <span class="icon link">&#128712;&#xFE0E;</span></p>
		<p>Citations: 57</p>
		<div class="article-buttons">
			<p><span class="icon link">&#128231;&#xFE0E;</span>Share</p>
			<p><span class="icon link">&#10077;&#xFE0E;</span>Cite</p>
			<p><span class="icon link">&#128462;&#xFE0E;</span>Related articles</p>
		</div>
	</div>
	<div class="article">
		<h3>Qualitative Research Methods in Iron Leaguer Studies - <span class="browse link">Browse Journal</span></h3>
		<p class="vol-info">Volume 48, Issue 3, October 19XX, Pages 101-124 |  <span class="link">https://doi.org/10.5454/JPSv1i220161014</span></p>
		<hr/>
		<h4>Frontiers in Understanding: On Human-Leaguer Sexual Relationships</h4>
		<h5>Ricardo Ginjou, PhD, DRSciEn</h5><details><summary></summary><em>Current affiliation:</em> Associate Clinical Professor, Department of Robotic Engineering, Dark Institute of Technology</details>

		<h6>Abstract</h6>

		<p>blah blah blah blah.</p>

		<p>you get the point, I don't need to reproduce the whole article text here</p>

		<details class="full-text"><summary class="link">View full text</summary><p class="full-text-open"><span class="link">Purchase access</span> or <span class="link">subscribe</span> to view full text<br/><br/>or<br/><br/><span class="link">Log in through your institution</span></p></details>
		</div>
</div>