BranchesTags

Latest commit

History

23 Commits

Folders and files

NameName
Last commit message
Last commit date
css
css
fonts
fonts
images
images
LICENSE
LICENSE
README.org
README.org
background.jpg
background.jpg
index.html
index.html
screenshot.png
screenshot.png

Repository files navigation

The St. Cleve Chronicle

The Deadline for the Headline is the Breadline

Recreating the Thick as a Brick album cover as a web page shall be fun. The gatefold consisted of a twelve page spoof of a newspaper with an overtly complicated tabloid page layout and —what is more— being a mock of a parochial newspaper it contained deliberate errata, misprints, repetitions, and was overall, badly designed using e.g. six or seven different fonts just on the front page, underlined headlines, and complete disregard for consistency; not to talk about the actual content.

The original text was written by Ian Anderson, Jeffrey Hammond, John Evan, and Roy Elridge from Chrysalis with additional collaboration from other Jethro Tull members. I don’t intend to reproduce an exact copy but to try new concepts as I learn them. There will be also a facsimile branch in which I’ll strive to obtain a verbatim copy if time allows it.

This excercise in layout originated as part of Brian Holt’s excellent web development course at Frontend Masters.

Main changes

TODO Add a section menu somewhere

I’ll add some sort of menu or nav bar as per the excersice guidelines while trying to keep the printed-on-paper look at the same time.

Rearrange the Layout

In accordance to the excercise guidelines, I use Flex. Grid will surely be implemented at some later point.

Minimize the Use of Fonts

Headlines
use Roboto Condensed bold
The masthead
is typeset with Old English Text MT and will fallback to Chomsky.
“& Linwell Advertiser”
is typeset with Script MT. I am currently looking for a free substitute fallback font.

All headlines are capitalized

No rules

Except for the double rule at the end of the masthead.

Style

I removed full stops from acronyms. Eg. “U.F.O.” changes to ”UFO”.

background.jpg

screenshot.png

Sources

I used to own the local (Argentinean) vinyl press which didn’t include the newspaper but I’ve also got the 25th Anniversary Edition CD remaster wich features a scaled-down but nevertheless full reproduction of the original twelve page tabloid.

About

A recreation of The St. Cleve Chronicle & Linwell Advertiser. Jethro Tull's Thick as A Brick album cover newspaper

stormwatch.github.io/TSCC/

Resources

Readme
GPL-3.0 license
Activity

Stars

2 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
BranchesTags
Latest commit
History
23 Commits
Folders and files
NameName
Last commit message
Last commit date
css
css
fonts
fonts
images
images
LICENSE
LICENSE
README.org
README.org
background.jpg
background.jpg
index.html
index.html
screenshot.png
screenshot.png
Repository files navigation
The St. Cleve Chronicle
The Deadline for the Headline is the Breadline
Recreating the Thick as a Brick album cover as a web page shall be fun. The
gatefold consisted of a twelve page spoof of a newspaper with an overtly
complicated tabloid page layout and —what is more— being a mock of a parochial
newspaper it contained deliberate errata, misprints, repetitions, and was
overall, badly designed using e.g. six or seven different fonts just on the
front page, underlined headlines, and complete disregard for consistency; not
to talk about the actual content.
The original text was written by Ian Anderson, Jeffrey Hammond, John Evan, and
Roy Elridge from Chrysalis with additional collaboration from other Jethro
Tull members. I don’t intend to reproduce an exact copy but to try new
concepts as I learn them. There will be also a facsimile branch in which
I’ll strive to obtain a verbatim copy if time allows it.
This excercise in layout originated as part of Brian Holt’s excellent web
development course at Frontend Masters.
Main changes
TODO Add a section menu somewhere
I’ll add some sort of menu or nav bar as per the excersice guidelines while
trying to keep the printed-on-paper look at the same time.
Rearrange the Layout
In accordance to the excercise guidelines, I use Flex. Grid will surely be
implemented at some later point.
Minimize the Use of Fonts
Headlines
use Roboto Condensed bold
The masthead
is typeset with Old English Text MT and will fallback to Chomsky.
“& Linwell Advertiser”
is typeset with Script MT. I am currently
looking for a free substitute fallback font.
All headlines are capitalized
No rules
Except for the double rule at the end of the masthead.
Style
I removed full stops from acronyms. Eg. “U.F.O.” changes to ”UFO”.
background.jpg
screenshot.png
Sources
I used to own the local (Argentinean) vinyl press which didn’t include the
newspaper but I’ve also got the 25th Anniversary Edition CD remaster wich
features a scaled-down but nevertheless full reproduction of the original
twelve page tabloid.
About
A recreation of The St. Cleve Chronicle & Linwell Advertiser. Jethro Tull's Thick as A Brick album cover newspaper
stormwatch.github.io/TSCC/
Resources
Readme
GPL-3.0 license
Activity
Stars
2 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Latest commit
History
23 Commits
Folders and files
NameName
Last commit message
Last commit date
css
css
fonts
fonts
images
images
LICENSE
LICENSE
README.org
README.org
background.jpg
background.jpg
index.html
index.html
screenshot.png
screenshot.png
Repository files navigation
The St. Cleve Chronicle
The Deadline for the Headline is the Breadline
Recreating the Thick as a Brick album cover as a web page shall be fun. The
gatefold consisted of a twelve page spoof of a newspaper with an overtly
complicated tabloid page layout and —what is more— being a mock of a parochial
newspaper it contained deliberate errata, misprints, repetitions, and was
overall, badly designed using e.g. six or seven different fonts just on the
front page, underlined headlines, and complete disregard for consistency; not
to talk about the actual content.
The original text was written by Ian Anderson, Jeffrey Hammond, John Evan, and
Roy Elridge from Chrysalis with additional collaboration from other Jethro
Tull members. I don’t intend to reproduce an exact copy but to try new
concepts as I learn them. There will be also a facsimile branch in which
I’ll strive to obtain a verbatim copy if time allows it.
This excercise in layout originated as part of Brian Holt’s excellent web
development course at Frontend Masters.
Main changes
TODO Add a section menu somewhere
I’ll add some sort of menu or nav bar as per the excersice guidelines while
trying to keep the printed-on-paper look at the same time.
Rearrange the Layout
In accordance to the excercise guidelines, I use Flex. Grid will surely be
implemented at some later point.
Minimize the Use of Fonts
Headlines
use Roboto Condensed bold
The masthead
is typeset with Old English Text MT and will fallback to Chomsky.
“& Linwell Advertiser”
is typeset with Script MT. I am currently
looking for a free substitute fallback font.
All headlines are capitalized
No rules
Except for the double rule at the end of the masthead.
Style
I removed full stops from acronyms. Eg. “U.F.O.” changes to ”UFO”.
background.jpg
screenshot.png
Sources
I used to own the local (Argentinean) vinyl press which didn’t include the
newspaper but I’ve also got the 25th Anniversary Edition CD remaster wich
features a scaled-down but nevertheless full reproduction of the original
twelve page tabloid.
About
A recreation of The St. Cleve Chronicle & Linwell Advertiser. Jethro Tull's Thick as A Brick album cover newspaper
stormwatch.github.io/TSCC/
Resources
Readme
GPL-3.0 license
Activity
Stars
2 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Latest commit
History
23 Commits
Folders and files
NameName
Last commit message
Last commit date
css
css
fonts
fonts
images
images
LICENSE
LICENSE
README.org
README.org
background.jpg
background.jpg
index.html
index.html
screenshot.png
screenshot.png
Repository files navigation
The St. Cleve Chronicle
The Deadline for the Headline is the Breadline
Recreating the Thick as a Brick album cover as a web page shall be fun. The
gatefold consisted of a twelve page spoof of a newspaper with an overtly
complicated tabloid page layout and —what is more— being a mock of a parochial
newspaper it contained deliberate errata, misprints, repetitions, and was
overall, badly designed using e.g. six or seven different fonts just on the
front page, underlined headlines, and complete disregard for consistency; not
to talk about the actual content.
The original text was written by Ian Anderson, Jeffrey Hammond, John Evan, and
Roy Elridge from Chrysalis with additional collaboration from other Jethro
Tull members. I don’t intend to reproduce an exact copy but to try new
concepts as I learn them. There will be also a facsimile branch in which
I’ll strive to obtain a verbatim copy if time allows it.
This excercise in layout originated as part of Brian Holt’s excellent web
development course at Frontend Masters.
Main changes
TODO Add a section menu somewhere
I’ll add some sort of menu or nav bar as per the excersice guidelines while
trying to keep the printed-on-paper look at the same time.
Rearrange the Layout
In accordance to the excercise guidelines, I use Flex. Grid will surely be
implemented at some later point.
Minimize the Use of Fonts
Headlines
use Roboto Condensed bold
The masthead
is typeset with Old English Text MT and will fallback to Chomsky.
“& Linwell Advertiser”
is typeset with Script MT. I am currently
looking for a free substitute fallback font.
All headlines are capitalized
No rules
Except for the double rule at the end of the masthead.
Style
I removed full stops from acronyms. Eg. “U.F.O.” changes to ”UFO”.
background.jpg
screenshot.png
Sources
I used to own the local (Argentinean) vinyl press which didn’t include the
newspaper but I’ve also got the 25th Anniversary Edition CD remaster wich
features a scaled-down but nevertheless full reproduction of the original
twelve page tabloid.
About
A recreation of The St. Cleve Chronicle & Linwell Advertiser. Jethro Tull's Thick as A Brick album cover newspaper
stormwatch.github.io/TSCC/
Resources
Readme
GPL-3.0 license
Activity
Stars
2 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
BranchesTags
Latest commit
History
23 Commits
Folders and files
NameName
Last commit message
Last commit date
css
css
fonts
fonts
images
images
LICENSE
LICENSE
README.org
README.org
background.jpg
background.jpg
index.html
index.html
screenshot.png
screenshot.png
Repository files navigation
The St. Cleve Chronicle
The Deadline for the Headline is the Breadline
Recreating the Thick as a Brick album cover as a web page shall be fun. The
gatefold consisted of a twelve page spoof of a newspaper with an overtly
complicated tabloid page layout and —what is more— being a mock of a parochial
newspaper it contained deliberate errata, misprints, repetitions, and was
overall, badly designed using e.g. six or seven different fonts just on the
front page, underlined headlines, and complete disregard for consistency; not
to talk about the actual content.
The original text was written by Ian Anderson, Jeffrey Hammond, John Evan, and
Roy Elridge from Chrysalis with additional collaboration from other Jethro
Tull members. I don’t intend to reproduce an exact copy but to try new
concepts as I learn them. There will be also a facsimile branch in which
I’ll strive to obtain a verbatim copy if time allows it.
This excercise in layout originated as part of Brian Holt’s excellent web
development course at Frontend Masters.
Main changes
TODO Add a section menu somewhere
I’ll add some sort of menu or nav bar as per the excersice guidelines while
trying to keep the printed-on-paper look at the same time.
Rearrange the Layout
In accordance to the excercise guidelines, I use Flex. Grid will surely be
implemented at some later point.
Minimize the Use of Fonts
Headlines
use Roboto Condensed bold
The masthead
is typeset with Old English Text MT and will fallback to Chomsky.
“& Linwell Advertiser”
is typeset with Script MT. I am currently
looking for a free substitute fallback font.
All headlines are capitalized
No rules
Except for the double rule at the end of the masthead.
Style
I removed full stops from acronyms. Eg. “U.F.O.” changes to ”UFO”.
background.jpg
screenshot.png
Sources
I used to own the local (Argentinean) vinyl press which didn’t include the
newspaper but I’ve also got the 25th Anniversary Edition CD remaster wich
features a scaled-down but nevertheless full reproduction of the original
twelve page tabloid.
About
A recreation of The St. Cleve Chronicle & Linwell Advertiser. Jethro Tull's Thick as A Brick album cover newspaper
stormwatch.github.io/TSCC/
Resources
Readme
GPL-3.0 license
Activity
Stars
2 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Latest commit
History
23 Commits
Folders and files
NameName
Last commit message
Last commit date
css
css
fonts
fonts
images
images
LICENSE
LICENSE
README.org
README.org
background.jpg
background.jpg
index.html
index.html
screenshot.png
screenshot.png
Repository files navigation
The St. Cleve Chronicle
The Deadline for the Headline is the Breadline
Recreating the Thick as a Brick album cover as a web page shall be fun. The
gatefold consisted of a twelve page spoof of a newspaper with an overtly
complicated tabloid page layout and —what is more— being a mock of a parochial
newspaper it contained deliberate errata, misprints, repetitions, and was
overall, badly designed using e.g. six or seven different fonts just on the
front page, underlined headlines, and complete disregard for consistency; not
to talk about the actual content.
The original text was written by Ian Anderson, Jeffrey Hammond, John Evan, and
Roy Elridge from Chrysalis with additional collaboration from other Jethro
Tull members. I don’t intend to reproduce an exact copy but to try new
concepts as I learn them. There will be also a facsimile branch in which
I’ll strive to obtain a verbatim copy if time allows it.
This excercise in layout originated as part of Brian Holt’s excellent web
development course at Frontend Masters.
Main changes
TODO Add a section menu somewhere
I’ll add some sort of menu or nav bar as per the excersice guidelines while
trying to keep the printed-on-paper look at the same time.
Rearrange the Layout
In accordance to the excercise guidelines, I use Flex. Grid will surely be
implemented at some later point.
Minimize the Use of Fonts
Headlines
use Roboto Condensed bold
The masthead
is typeset with Old English Text MT and will fallback to Chomsky.
“& Linwell Advertiser”
is typeset with Script MT. I am currently
looking for a free substitute fallback font.
All headlines are capitalized
No rules
Except for the double rule at the end of the masthead.
Style
I removed full stops from acronyms. Eg. “U.F.O.” changes to ”UFO”.
background.jpg
screenshot.png
Sources
I used to own the local (Argentinean) vinyl press which didn’t include the
newspaper but I’ve also got the 25th Anniversary Edition CD remaster wich
features a scaled-down but nevertheless full reproduction of the original
twelve page tabloid.
About
A recreation of The St. Cleve Chronicle & Linwell Advertiser. Jethro Tull's Thick as A Brick album cover newspaper
stormwatch.github.io/TSCC/
Resources
Readme
GPL-3.0 license
Activity
Stars
2 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Latest commit
History
23 Commits
Folders and files
NameName
Last commit message
Last commit date
css
css
fonts
fonts
images
images
LICENSE
LICENSE
README.org
README.org
background.jpg
background.jpg
index.html
index.html
screenshot.png
screenshot.png
Repository files navigation
The St. Cleve Chronicle
The Deadline for the Headline is the Breadline
Recreating the Thick as a Brick album cover as a web page shall be fun. The
gatefold consisted of a twelve page spoof of a newspaper with an overtly
complicated tabloid page layout and —what is more— being a mock of a parochial
newspaper it contained deliberate errata, misprints, repetitions, and was
overall, badly designed using e.g. six or seven different fonts just on the
front page, underlined headlines, and complete disregard for consistency; not
to talk about the actual content.
The original text was written by Ian Anderson, Jeffrey Hammond, John Evan, and
Roy Elridge from Chrysalis with additional collaboration from other Jethro
Tull members. I don’t intend to reproduce an exact copy but to try new
concepts as I learn them. There will be also a facsimile branch in which
I’ll strive to obtain a verbatim copy if time allows it.
This excercise in layout originated as part of Brian Holt’s excellent web
development course at Frontend Masters.
Main changes
TODO Add a section menu somewhere
I’ll add some sort of menu or nav bar as per the excersice guidelines while
trying to keep the printed-on-paper look at the same time.
Rearrange the Layout
In accordance to the excercise guidelines, I use Flex. Grid will surely be
implemented at some later point.
Minimize the Use of Fonts
Headlines
use Roboto Condensed bold
The masthead
is typeset with Old English Text MT and will fallback to Chomsky.
“& Linwell Advertiser”
is typeset with Script MT. I am currently
looking for a free substitute fallback font.
All headlines are capitalized
No rules
Except for the double rule at the end of the masthead.
Style
I removed full stops from acronyms. Eg. “U.F.O.” changes to ”UFO”.
background.jpg
screenshot.png
Sources
I used to own the local (Argentinean) vinyl press which didn’t include the
newspaper but I’ve also got the 25th Anniversary Edition CD remaster wich
features a scaled-down but nevertheless full reproduction of the original
twelve page tabloid.
About
A recreation of The St. Cleve Chronicle & Linwell Advertiser. Jethro Tull's Thick as A Brick album cover newspaper
stormwatch.github.io/TSCC/
Resources
Readme
GPL-3.0 license
Activity
Stars
2 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
BranchesTags
Latest commit
History
23 Commits
Folders and files
NameName
Last commit message
Last commit date
css
css
fonts
fonts
images
images
LICENSE
LICENSE
README.org
README.org
background.jpg
background.jpg
index.html
index.html
screenshot.png
screenshot.png
Repository files navigation
The St. Cleve Chronicle
The Deadline for the Headline is the Breadline
Recreating the Thick as a Brick album cover as a web page shall be fun. The
gatefold consisted of a twelve page spoof of a newspaper with an overtly
complicated tabloid page layout and —what is more— being a mock of a parochial
newspaper it contained deliberate errata, misprints, repetitions, and was
overall, badly designed using e.g. six or seven different fonts just on the
front page, underlined headlines, and complete disregard for consistency; not
to talk about the actual content.
The original text was written by Ian Anderson, Jeffrey Hammond, John Evan, and
Roy Elridge from Chrysalis with additional collaboration from other Jethro
Tull members. I don’t intend to reproduce an exact copy but to try new
concepts as I learn them. There will be also a facsimile branch in which
I’ll strive to obtain a verbatim copy if time allows it.
This excercise in layout originated as part of Brian Holt’s excellent web
development course at Frontend Masters.
Main changes
TODO Add a section menu somewhere
I’ll add some sort of menu or nav bar as per the excersice guidelines while
trying to keep the printed-on-paper look at the same time.
Rearrange the Layout
In accordance to the excercise guidelines, I use Flex. Grid will surely be
implemented at some later point.
Minimize the Use of Fonts
Headlines
use Roboto Condensed bold
The masthead
is typeset with Old English Text MT and will fallback to Chomsky.
“& Linwell Advertiser”
is typeset with Script MT. I am currently
looking for a free substitute fallback font.
All headlines are capitalized
No rules
Except for the double rule at the end of the masthead.
Style
I removed full stops from acronyms. Eg. “U.F.O.” changes to ”UFO”.
background.jpg
screenshot.png
Sources
I used to own the local (Argentinean) vinyl press which didn’t include the
newspaper but I’ve also got the 25th Anniversary Edition CD remaster wich
features a scaled-down but nevertheless full reproduction of the original
twelve page tabloid.
About
A recreation of The St. Cleve Chronicle & Linwell Advertiser. Jethro Tull's Thick as A Brick album cover newspaper
stormwatch.github.io/TSCC/
Resources
Readme
GPL-3.0 license
Activity
Stars
2 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages