Ben-New Base Code A Pure CSS Framework by Ben Huot www.benjamin-newton.com February 27, 2019 HELP FILE License This entire PDF and website HTML and CSS code for Ben-New Base Code is licensed under a Creative Commons Attribution 3.0 United States License. Change all you want and distribute it freely in any format, but just give me credit for it (after removing the content text). Commercial, government, educational, non-profit, personal, or any other purpose or context is totally free (except you need to give me credit)Overview with NO 3rd party dependencies, images, or Javascript but you can add what you like aimed at “old school” websites like mine that are there to present information only (NO 3rd party content support included) designed just to give information like books without any support for Ads works on watches to widescreens ultra lightweight, accessible, and aimed at slow connections based on what I learned of HTML5 and CSS3 from 2009-2019 The previous approximately 10 years I did the best I could with what we had at the time Instructions This code is the best from my website design set up so you can either leave it as it is, or modify the design code to suit your needs, and it should work for you Be sure to remove the sample content text, including the ones for the header and footer, which are not always visible Put the entire folder and its contents on your website - it is meant to be self contained and portable The only third party technology that this website framework needs is a web server set up for server side includes - this should work out of the box with Apache, Nginx, or any other major web server online or offline You could probably set it up to be fully flat files by having a static site generator or some sort of Javascript contraption but you would have to set that up or build that yourself Best Long Term Decisions What I Learned about websites by: updating one with content and design changes and learning about new technologies and techniques (daily for over 20 Years) Major Priorities Security as number 1 priority Speed a major priority Maintainability a major priority Accessibility a major priority Learning about latest techniques a major priority Usability Large font size High contrast between text and background colors Easy to see font at small sizes Making special effects optional Night mode, dark mode, increase text size Marketing No advertisements Name my website after myself Consolidate websites to one domain Be in as few online communities and social media as possible File Formats Use only open formats whenever possible Keep creations in as few a formats as possible As few graphics as possible Every graphic completely vector based if possible Put books in e-book specific formats and not in webpage format Organizational Related Separate out headers and footers to pages so they can be updated in one place Numbering systems on page for sections, headings, lists, paragraphs, and links Hide and show basic information on every page for the website Separate out large files like graphics and audio from small files like CSS and HTML into separate sections Reuse the most of my code possible in designs Check pages most likely to have layout breaks after design changes Design Related Put self portrait on website Explain my website design ideas Summarized what I learned over the last 20 years Machine translated most important writings Code Related No CMS like Wordpress No Javascript Least third party code possible Depend upon a as few programs as possible Use as few a layers of abstractions as possible index.shtml Ben-New Base Code: Benjamin-Newton United

Ben-New Base Code: Benjamin-Newton United

Best Long Term Decisions Made for Website

Major Priorities

Usability

Marketing

File Formats

Organizational Related

Design Related

Code Related

base-code-meta-tags.txt base-code-header.txt

Network First Things

Fighting and Making Fun of Ambiguity

Network Summary

  • BEN-NEW's Network
  • BENjamin-NEWton Challenging Projects Network
  • by Ben Huot
  • Academic Non-Fiction E-Books & More Free Stuff

This is an Old School Informational website

Network Ownership

"Think Critically" with BENjamin-NEWton's Network © Ben Huot 1998-Present.

Website designs and all content not marked with a specific license copyrighted, from 1998-Present. I am the webmaster of this network, which includes a half dozen different, but related websites.

Greetings

Welcome, visting human, pet, toy, or automated software

My stuffed toy bear Fred says I don't have Schizophrenia, but he does

License

This website adheres to the following

No Money

Entire E-Book Downloads, in Multiple Popular Formats

  • No Cost
  • No Ads
  • No DRM

Privacy Respected

  • No Tracking
  • No Ads
  • No Personal Information

No Bugging You

  • No Selling
  • No App
  • No Newsletters

No Subtle Ads/Selling

  • No Memberships
  • No Sponsored Articles
  • No Donations Accepted

Nothing In Your Way

  • No Signups
  • No Password or Email Asked For
  • No User Agreements

No Tracking

  • No Cookies
  • No Analytics
  • No 3rd Party Code

No Permissions Asked For

  • No Geolocation
  • No Microphone or Camera Access
  • No Contact or Photos Access

None of the More Risky New Technologies

  • No AR or VR
  • No 3D
  • No 3rd Party Domains or CDNs

None of the Slower Things

  • No Background Videos
  • No Giant Photos
  • No Social Media Share Buttons

Jump to Top

Website Card Data

20 Years of Critical Thinking
Creativity in Philosophy, Not Theology

Website Description

I am a researcher, writer, and designer for consumer, citizen, and seeker advocacy. I can improve your life, by giving you better advice.

Jump to Top

For Automated Software Visitors

XML Sitemap

base-code-all.css :root { font-size: 18px; } #your-logo { display: none; } h1, h2, h3, h4, h5, h6, li, p, .poetry, blockquote, figcaption, em, strong, td, th, a, *::before, *::after { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; } body, body *, figure { padding: 0px; margin: 0 auto; } body, body *, body *::before, body *::after { box-sizing: border-box; } :not(div), :not(div)::before, :not(div)::after { text-align: center; margin: 0px auto; } body *::before, body *::after { display: block; text-align: center; } body *::before { margin-bottom: .25rem; } body *::after { margin-top: .25rem; } #footer, #facts:not(:target) #facts-wrapper, #intro:not(:target) #intro-wrapper { display: none; } img, pre, figcaption, .ribbon { text-align: center; } ul, ol { list-style-type: none; padding-left: 0px; text-indent: 0px; } img, picture { padding: 0px; width: 90%; max-width: 30rem; height: auto; max-height: 30rem; display: block; margin: 0 auto; background-color: #ccc; } div { display: block; margin: 0 auto; padding: 0px; } head, link, meta, script, style, title { display: none !important; } body { background-color: white; color: black; padding: 0px; } @media screen and (min-width: 313px) { :root { font-size: 27px; } .website-section #creative-work, .website-section #essay, .website-section, .website-section ul, .website-section ol, .website-section li, .website-section p .website-section pre, .website-section .poetry, .website-section blockquote, .website-section a, .website-section em, .website-section strong, .website-section li, .website-section table, .website-section table tr, .website-section table tr td, .website-section table tr td p, .website-section figcaption { text-align: left; } h1, .website-section h2, .website-section h3, .website-section h4, .website-section h5, .website-section h6 .website-section *::before, .website-section *::after, .website-section::before { text-align: center; } .website-section *::before, .website-section *::after { display: flex; justify-content: center; align-items: center; align-content: center; flex-direction: column; flex-wrap: nowrap; min-width: 90%; } .website-section::before { display: flex; justify-content: center; align-items: center; align-content: center; flex-direction: row; flex-wrap: nowrap; flex: 1; min-width: 90%; } #your-logo { display: block; background-image: url(‘your-logo.svg’); background-color: transparent; background-repeat: no-repeat; background-size: contain; background-position: center; width: 20rem; max-width: 90%; height: 20rem; } #intro:target #intro-wrapper, #facts:target #facts-wrapper { display: flex; } .website-section #creative-work, .website-section #essay, .website-section, .website-section table { display: flex; justify-content: center; align-items: center; align-content: center; flex-direction: row; flex-wrap: wrap; } h1, .website-section h2, .website-section h3, .website-section h4, .website-section h5, .website-section h6, .website-section li, .website-section p, .website-section .poetry, .website-section blockquote, .website-section figcaption, .website-section a, .website-section img, .website-section table th, .website-section table td { display: flex; justify-content: center; align-items: center; align-content: center; flex-direction: column; flex-wrap: wrap; } .website-section ul, .website-section ol, .website-section figcaption, .website-section table tr { display: flex; justify-content: center; align-items: center; align-content: center; flex-direction: row; flex-wrap: wrap; } #all-wrapper footer { flex-direction: column; justify-content: center; align-items: center; align-content: center; } .website-section #creative-work, .website-section #essay, .website-section, .website-section table, h1, .website-section h2, .website-section h3, .website-section h4, .website-section h5, .website-section h6, .website-section ul, .website-section ol { flex: 1; min-width: 90%; } .website-section li, .website-section p, .website-section .poetry, .website-section blockquote, .website-section figcaption, .website-section table tr td { width: 90%; } .website-section em, .website-section strong { line-height: 1rem; border-radius: 0px; display: inline-flex; justify-content: center; align-items: center; align-content: center; flex-direction: column; flex-wrap: wrap; text-align: left; border-width: 1px; border-color: black; border-style: solid; text-transform: uppercase; } .website-section ul, .website-section ol, h1, .website-section h2, .website-section h3, .website-section h4, .website-section h5, .website-section h6, .website-section li span, .website-section table, .website-section tr, .website-section td, .website-section th { padding: .5em; } .website-section p, .website-section pre, .website-section .poetry, .website-section blockquote, .website-section figcaption, .website-section a, .website-section li, .website-section td p { padding: .5em; } .website-section em, .website-section strong { padding: .125em; margin: .125em; } h1, .website-section h2, .website-section h3, .website-section h4, .website-section h5, .website-section, .website-section ul, .website-section ol { margin: .5em 0; } .website-section li, .website-section p, figcaption, table tr td { margin: .25rem; } .website-section table, .website-section #creative-work, .website-section #essay { margin: 0rem; padding: 0rem; } h1::before, .website-section *::before, .website-section *::after { padding: .375em; margin: .375em; } .website-section::before { padding: .5em; margin: .5em; } #all #slide-out-right { position: fixed; top: 0; min-width: 0px; max-width: 320px; height: 100%; width: 80%; margin: .125rem auto; padding: .125rem 0; border: none; text-align: left; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: space-evenly; align-items: stretch; align-content: space-around; flex: 0 1 auto; background-color: #555 !important; } #slide-out-right:not(:target) { right: -100%; transition: right 1.5s; } #slide-out-right:target { right: 0; transition: right 1s; } #slide-out-right .slide-out-right { font-size: 1rem; margin: .125rem auto; padding: .125rem; border: none; min-width: 0px; max-width: none; width: 95%; display: flex; border-radius: .5em; flex-direction: column; flex-wrap: nowrap; justify-content: space-evenly; align-items: stretch; align-content: space-around; flex: 0 1 auto; } #slide-out-right ul.slide-out-right, #slide-out-right ol.slide-out-right, #slide-out-right li.slide-out-right, #slide-out-right p.slide-out-right { margin: 0px auto; padding: 0px; width: 100%; text-align: center; flex: 0 1 auto; } #slide-out-right a.slide-out-right, #slide-out-right h2.slide-out-right, #slide-out-right h3.slide-out-right, #slide-out-right h4.slide-out-right, #slide-out-right h5.slide-out-right, #slide-out-right h6.slide-out-right { min-height: 1.1rem; width: 100%; margin: .125rem auto; padding: .125rem 0rem; text-align: center; flex: 0 1 auto; } #slide-out-right::before, #slide-out-right::after, #slide-out-right *::before, #slide-out-right *::after, #slide-out-right .slide-out-right::before, #slide-out-right .slide-out-right::after { display: none !important; } } @media screen and (max-width: 480px) { img, picture { max-width: 90%; } } @media screen and (min-width: 480px) { :root { font-size: 29px; } } @media screen and (min-width: 768px) { #your-logo { width: 20rem; max-width: 95%; height: 20rem; } .website-section, .website-section table { display: flex; justify-content: flex-start; align-items: flex-start; align-content: flex-start; flex-direction: row; flex-wrap: wrap; } .website-section ul, .website-section ol, .website-section #creative-work, .website-section #essay, .website-section table tr { display: flex; justify-content: flex-start; align-items: baseline; align-content: flex-start; flex-direction: row; flex-wrap: wrap; min-width: 90%; flex: 1; } .website-section li, .website-section p, .website-section figcaption, .website-section table tr td { display: flex; justify-content: center; align-items: baseline; align-content: center; flex-direction: row; flex-wrap: wrap; text-align: left; flex: 0 1 auto; } .website-section table tr td p { flex: 1; min-width: 90%; } .website-section li, .website-section p, table tr td { width: 45%; max-width: 30rem; } :root { font-size: 31px; } #all-wrapper #footer { display: flex; justify-content: center; align-items: center; align-content: center; flex-wrap: nowrap; flex-direction: column; } } @media screen and (min-width: 1025px) { :root { font-size: 33px; } } @media screen and (min-width: 1366px) { .website-section li, .website-section p { width: 30%; max-width: 40rem; } :root { font-size: 35px; } } @media screen and (min-width: 1920px) { :root { font-size: 37px; } } @media screen and (max-width: 312px) { .website-section table, .website-section tr, .website-section tr td, .website-section th, .website-section table *::before, .website-section table *::after { display: block !important; margin: 0px !important; padding: 0px !important; border: none !important; width: auto !important; } body *, body *::before, body *::after { display: block !important; margin: 0px !important; padding: 0px !important; border: none !important; width: auto !important; } #facts:not(:target) #facts-wrapper, #intro:not(:target) #intro-wrapper, #all #all-wrapper #top-links, #slide-out-right, picture, img, aside, header, footer, nav, figure, .primary-element, #footer { display: none !important; } } @media screen and (max-width: 767px), screen and (min-width: 768px) and (orientation: portrait) { .easy-read-theme:target picture, .easy-read-theme:target img, .easy-read-theme:target aside, .easy-read-theme:target header, .easy-read-theme:target footer, .easy-read-theme:target nav:not(#top-links), .easy-read-theme:target figure { display: none !important; } } @media screen and (min-width: 768px) and (orientation: landscape) { .easy-read-theme:target #middle { display: flex !important; justify-content: flex-start; align-items: baseline; align-content: flex-start; flex-direction: row; flex-wrap: wrap; } .easy-read-theme:target #middle aside, .easy-read-theme:target #middle main { flex: 1 !important; min-width: 45% !important; } .easy-read-theme:target header, .easy-read-theme:target footer, .easy-read-theme:target nav:not(#top-links) { display: none !important; } .easy-read-theme:target #middle main article li, .easy-read-theme:target #middle main article p, .easy-read-theme:target #middle main article a, .easy-read-theme:target #middle main article td, .easy-read-theme:target #middle aside li, .easy-read-theme:target #middle aside p, .easy-read-theme:target #middle aside a { flex: 1 !important; min-width: 90% !important; margin: .25rem !important; padding: .25rem !important; } } base-code-media-all.css body { background-color: #555; } h1 { color: white; background-color: black; text-shadow: 1px 1px 1px black; } #footer { color: black; background-color: #ccc; text-shadow: 1px 1px 1px white; } body, body * { line-height: 1.25em; } a { text-decoration: none; color: black; } body, pre, code { font-weight: normal; font-family: Georgia, Times, "Times New Roman", serif; font-style: italic; } h1, h2, h3, h4, h5, h6, .website-section::before, *::before, *::after { font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif; font-style: normal; } pre { white-space: normal; } h1, h2, h3, h4, h5, h6, strong, th { font-weight: normal; } em { font-style: normal; } #all #all-wrapper pre, #all #all-wrapper code { display: block; margin: 0 auto; background: rgba(255,255,255,0.75); color: black; white-space: pre-wrap; text-align: left; width: 90%; } *::before, *::after { font-size: .75em; } header::before, main::before, footer::before, section::before, article::before, nav::before, aside::before, figure::before, h1, h2, h3, h4, h5, h6, th { font-size: 1rem; } p, li, .poetry, blockquote, figcaption, td { text-align: left; } *:not(h1)::before { color: white; background-color: hsl(218, 100%, 10%); text-shadow: 1px 1px 1px black; } header::before, main::before, footer::before, section::before, article::before, nav::before, aside::before, figure::before, *::after { color: black; background-color: hsl(218, 100%, 90%); text-shadow: 1px 1px 1px white; } p, li, .poetry, blockquote, figcaption, td { color: hsl(218, 100%, 3%); background-color: hsl(218, 100%, 97%); text-shadow: 1px 1px 1px white; } ul, ol, tr { background-color: hsl(218, 100%, 83%); } h2, h3, h4, h5, h6, th { color: hsl(218, 100%, 97%); background-color: hsl(218, 100%, 3%); text-shadow: 1px 1px 1px black; } a, #all td p, .ribbon { color: hsl(218, 100%, 7%); background-color: hsl(218, 100%, 93%); text-shadow: 1px 1px 1px white; } #all em, #all strong { font-size: .9rem; } .credits, #bot-visitors { font-size: .65rem !important; } @media screen and (min-width: 313px) { h1, .website-section h2, .website-section h3, .website-section h4, .website-section h5, .website-section h6, .website-section th, #all .website-section::before { font-size: 1.25rem; } #all .off-canvas-section, #all .off-canvas-section h2, #all .off-canvas-section h3, #all .off-canvas-section h4, #all .off-canvas-section h5, #all .off-canvas-section h6, #all .off-canvas-section ul, #all .off-canvas-section ol { padding: .125rem 0; margin: .125rem auto; font-size: .9rem; border-width: 1px; border-color: .125em; border-style: solid; } #all .off-canvas-section li, #all .off-canvas-section p, #all .off-canvas-section pre, #all .off-canvas-section figcaption, #all .off-canvas-section a, #all .off-canvas-section em, #all .off-canvas-section strong { margin: .125rem auto; padding: .125rem 0; text-align: center; font-size: .9rem; border-width: .125em; border-color: black; border-style: solid; } #all #all-wrapper a.escape-screen, #all #all-wrapper a.escape-screen::before, #all #all-wrapper a.escape-screen::after { border-radius: 1em; color: hsl(15, 0%, 93%); background-color: hsl(15, 0%, 7%); text-shadow: 1px 1px 1px black; } #all #all-wrapper a.escape-screen::before { color: black; background-color: hsl(15, 0%, 90%); text-shadow: 1px 1px 1px white; } #all #all-wrapper a.escape-screen::after { color: white; background-color: hsl(15, 0%, 10%); text-shadow: 1px 1px 1px black; } #all #all-wrapper a.primary-element, #all #all-wrapper a.primary-element::before, #all #all-wrapper a.primary-element::after { border-radius: 35%; color: hsl(15, 0%, 93%); background-color: hsl(15, 0%, 7%); text-shadow: 1px 1px 1px black; } #all #all-wrapper a.primary-element::before { color: black; background-color: hsl(15, 0%, 90%); text-shadow: 1px 1px 1px white; } #all #all-wrapper a.primary-element::after { color: white; background-color: hsl(15, 0%, 10%); text-shadow: 1px 1px 1px black; } #all { margin: 1.5rem auto; border-radius: 1rem; background-color: #333; } a { outline: none !important; } a:focus, a:active, a:hover { color: hsl(301, 100%, 93%) !important; background-color: hsl(218, 100%, 7%) !important; text-shadow: 1px 1px 1px black !important; border-style: dashed !important; } a:focus::before, a:active::before, a:hover::before { color: black !important; background-color: hsl(301, 100%, 90%) !important; text-shadow: 1px 1px 1px white !important; border-style: dashed !important; } a:focus::after, a:active::after, a:hover::after { color: white !important; background-color: hsl(301, 100%, 10%) !important; text-shadow: 1px 1px 1px black !important; border-style: dashed !important; } } @media screen and (min-width: 768px) { h1 { font-size: 1.5rem; } .decorative-theme:target .website-section h2 { font-size: 1.75rem; } .decorative-theme:target .website-section h3 { font-size: 1.35rem; } .decorative-theme:target .website-section h4 { font-size: 1.15rem; } .decorative-theme:target .website-section h5 { font-size: 1rem; } .decorative-theme:target .website-section h6 { font-size: .9rem; } .decorative-theme:target .website-section th { font-size: .9rem; } h1::before, .decorative-theme:target .website-section h2::before, .decorative-theme:target .website-section h3::before, .decorative-theme:target .website-section h4::before, .decorative-theme:target .website-section h5::before, .decorative-theme:target .website-section h6::before { font-size: .75em; } #all .decorative-theme:target .first-level-section::before { width: 90%; font-size: 1.5rem; } #all .decorative-theme:target .second-level-section::before { width: 80%; font-size: 1.25rem; } #all .decorative-theme:target .third-level-section::before { width: 70%; font-size: 1.125rem; } #all #all-wrapper #footer { display: flex; justify-content: center; align-items: center; align-content: center; flex-wrap: nowrap; flex-direction: column; } #all #all-wrapper .non-semantic-protector { position: static; z-index: 1; display: block; width: 90%; background: transparent; } #all #all-wrapper .ribbon { /* This ribbon is based on a 16px font side and a 24px vertical rhythm. I've used em's to position each element for scalability. If you want to use a different font size you may have to play with the position of the ribbon elements */ width: 50%; position: relative; background: #333; padding: 1em 2em; /* Adjust to suit */ margin: 2em auto 3em; /* Based on 24px vertical rhythm. 48px bottom margin - normally 24 but the ribbon 'graphics' take up 24px themselves so we double it. */ color: white; text-shadow: 1px 1px 1px black; display: block; border-radius: 0px; } #all #all-wrapper .ribbon::before, #all #all-wrapper .ribbon::after { content: ""; position: absolute; display: block; bottom: -.5em; border-style: solid; border-width: 1.5em; border-color: black; z-index: -1; background: transparent; } #all #all-wrapper .ribbon::before { left: -2em; border-right-width: 1.5em; border-left-color: transparent; background: transparent; } #all #all-wrapper .ribbon::after { right: -2em; border-left-width: 1.5em; border-right-color: transparent; background: transparent; } } base-code-labels-all.css html { counter-reset: page-section first item; } .first-level-section { counter-increment: page-section; counter-reset: page-sub-section; } .first-level-section .second-level-section { counter-increment: page-sub-section; counter-reset: page-sub-sub-section; } .first-level-section .second-level-section .third-level-section { counter-increment: page-sub-sub-section; } header.first-level-section::before { content: "Primary Information - " counter(page-section); } main.first-level-section::before { content: "Main Part - " counter(page-section); } footer.first-level-section::before { content: "Secondary Information - " counter(page-section); } nav.first-level-section::before { content: "Main Navigation - " counter(page-section); } aside.first-level-section::before { content: "Secondary Page Element - " counter(page-section); } section.first-level-section::before, article.first-level-section::before { content: "First Level Section - " counter(page-section); } figure.first-level-section::before { content: "Primary Picture - " counter(page-section); } picture.first-level-section::before { content: "Picture - " counter(page-section); } .first-level-section nav.second-level-section::before { content: "Minor Navigation - " counter(page-section) "." counter(page-sub-section); } .first-level-section aside.second-level-section::before { content: "Minor Page Element - " counter(page-section) "." counter(page-sub-section); } .first-level-section section.second-level-section::before, .first-level-section article.second-level-section::before { content: "Second Level Section - " counter(page-section) "." counter(page-sub-section); } .first-level-section figure.second-level-section::before { content: "Secondary Picture - " counter(page-section) "." counter(page-sub-section); } .first-level-section picture.second-level-section::before { content: "Picture - " counter(page-section) "." counter(page-sub-section); } main.first-level-section article.second-level-section::before { content: "Main Writing or Navigation - " counter(page-section) "." counter(page-sub-section); } .first-level-section .second-level-section article.third-level-section::before, .first-level-section .second-level-section section.third-level-section::before { content: "Third Level Section - " counter(page-section) "." counter(page-sub-section) "." counter(page-sub-sub-section); } .first-level-section .second-level-section figure.third-level-section::before { content: "Minor Picture - " counter(page-section) "." counter(page-sub-section) "." counter(page-sub-sub-section); } h1::before { content: "Page Title - "; } h2 { counter-increment: first; counter-reset: second; } h2::before { content: "Heading " counter(first) " - ; " } h3 { counter-increment: second; counter-reset: third; } h3::before { content: "Sub Heading " counter(first) "." counter(second) " - "; } h4 { counter-increment: third; counter-reset: fourth; } h4::before { content: "Sub Sub Heading " counter(first) "." counter(second) "." counter(third) " - "; } h5 { counter-increment: fourth; counter-reset: fifth; } h5::before { content: "Paragraph Heading "counter(first) "." counter(second) "." counter(third) "." counter(fourth) " - "; } h6 { counter-increment: fifth; counter-reset: sixth; } h6::before { content: "Sub Paragraph Heading " counter(first) "." counter(second) "." counter(third) "." counter(fourth) "." counter(fifth) " - "; } pre, p, .poetry, blockquote, figcaption, li, td p { counter-increment: item; } pre::before { content: "Code Sample - " counter(item, lower-alpha) ". "; } p::before { content: "Paragraph - " counter(item, lower-alpha) ". "; } .poetry::before { content: "Poem - " counter(item, lower-alpha) ". "; } blockquote:before { content: "Quote - " counter(item, lower-alpha) ". "; } figcaption:before { content: "Picture Caption - " counter(item, lower-alpha) ". "; } li::before { content: "List Item - " counter(item, lower-alpha) ". "; } td p::before { content: "Table Cell - " counter(item, lower-alpha) ". "; } .no-alt-motives::before { content: "Ethical Decision - " counter(item, lower-alpha) ". "; } .major-decision::before { content: "Major Decision - " counter(item, lower-alpha) ". "; } .my-attributes::before { content: "I Am - " counter(item, lower-alpha) ". "; } .themes-choice::before { content: "Theme & Layout Option - " counter(item, lower-alpha) ". "; } .page-nav-option::before { content: "Option Within Page - " counter(item, lower-alpha) ". "; } .website-nav-option::before { content: "Option Within Website - " counter(item, lower-alpha) ". "; } .primary-element::before { content: "Emphasized Option - " counter(item, lower-alpha) ". "; } .long-book::before { content: "Recommended Book - " counter(item, lower-alpha) ". "; } .music-artist::before { content: "Music Artist - " counter(item, lower-alpha) ". "; } .artist-song::before { content: "Song by Artist - " counter(item, lower-alpha) ". "; } #poem-name::before { content: "Poem Name - " counter(item, lower-alpha) ". "; } #poem-author::before { content: "Poem Author - " counter(item, lower-alpha) ". "; } #poem-genre::before { content: "Genre - " counter(item, lower-alpha) ". "; } #essay-name::before { content: "Essay Name - " counter(item, lower-alpha) ". "; } #essay-author::before { content: "Essay Author - " counter(item, lower-alpha) ". "; } #essay-genre::before { content: "Genre - " counter(item, lower-alpha) ". "; } .credits:before { content: "Credits - " counter(item, lower-alpha) ". "; } a::before { content: " Link → "; } a[href='#slide-out-right']::before { content: " Open Panel → "; } a[href*='tech']::before, a[href*='help']::before, a[href*='notice']::before, a[href*='map']::before, a[href*='central']::before, a[href*='special']::before { content: ' ? To Computer Help '; } a[href*='download']::before, a[href*='collected']::before, a[href*='save']::before { content: ' To Downloads ↓ '; } a[href*='/essays']::before, a[href*='essays/']::before { content: ' To Essays ≡ '; } a[href*='/poetry']::before, a[href*='poetry/']::before { content: ' To Poetry ≡ '; } a[href*='books/']::before, a[href*='texts/']::before, a[href*='/books']::before, a[href*='/texts']::before { content: ' To Books ≡ '; } a[href*='music/']::before, a[href*='songs/']::before, a[href*='/music']::before, a[href*='/songs']::before { content: ' To Audio Ω '; } a[href*='graphic']::before, a[href*='picture']::before, a[href*='photo']::before, a[href*='draw']::before, a[href*='icon']::before, a[href*='vector']::before, a[href*='logo']::before, a[href*='art']::before, a[href*='3d']::before { content: ' To Pictures ∞ '; } a[href$='#top-links']::before { content: ' To Navigation ↔ '; } a[href$='#facts']::before, a[href$='#intro']::before { content: ' Expand Section < '; } a[href$='-theme']::before { content: ' → Theme & Layout'; } a[href$='sitemap.xml']::before { content: ' Please Ignore This '; } a[href='#all']::before { content: " To Top ↑ "; } a[href='#content']::before { content: " To Content … "; } a[href='/']::before {content: ' ← To Home '; } a[href$='.zip']::before, a[href$='.pdf']::before, a[href$='.epub']::before, a[href$='.ibooks']::before, a[href$='.mobi']::before, a[href$='.rtf']::before, a[href$='.csv']::before, a[href$='.docx']::before, a[href$='.pptx']::before, a[href$='.xlsx']::before, a[href$='.pages']::before, a[href$='.key']::before, a[href$='.numbers']::before, a[href$='.odt']::before, a[href$='.odp']::before, a[href$='.ods']::before { content: ' ↓ Save File '; } a[href$='.png']::before, a[href$='.jpg']::before, a[href$='.svg']::before, a[href$=‘.svg.gz’]::before, a[href$='.svg.br']::before { content: ' ∞ View Picture '; } a[href$='.mp3']::before, a[href$='.mp4']::before, a[href$='.m4a']::before, a[href$='.m4r']::before { content: ' ↓ Audio Download '; } a[href$='.shtml']::before {content: ' → View Webpage '; } li.essay a[href$='.shtml']::before {content: ' ≡ Read Essay '; } li.poem a[href$='.shtml']::before { content: ' ≡ Read Poem '; } #all a[href^='//']::before, #all a[href^='http://']::before, #all a[href^='https://']::before { content: ' Notice ! '; } a[href^='/']::after, a[href$='/']::after { content: ' → another section '; } #all a[href*='@']::after { content: ' → email address '; } #all a[href^='#']::after { content: ' → on this page ← '; } #all a[href$='-theme']::after { content: ' change theme & layout Δ '; } #all a[href$='.zip']::after { content: ' ↓ zip download '; } #all a[href$='.pdf']::after { content: ' ↓ PDF download '; } #all a[href$='.epub']::after, #all a[href$='.ibooks']::after { content: ' ↓ Apple e-Book '; } #all a[href$='.mobi']::after { content: ' ↓ Amazon.com e-Book '; } #all a[href$='.rtf']::after { content: ' ↓ old Microsoft format '; } #all a[href$='.csv']::after { content: ' ↓ old spreadsheet format '; } #all a[href$='.docx']::after, #all a[href$='.pptx']::after, #all a[href$='.xlsx']::after { content: ' ↓ new Microsoft format '; } #all a[href$='.pages']::after, #all a[href$='.key']::after, #all a[href$='.numbers']::after { content: ' ↓ new Apple format '; } #all a[href$='.odt']::after, #all a[href$='.odp']::after, #all a[href$='.ods']::after { content: ' ↓ open document format '; } #all a[href$='.png']::after, #all a[href$='.jpg']::after { content: ' ∞ photo or drawing '; } #all a[href$='.svg']::after, #all a[href$='.svg.gz']::after { content: ' ∞ advanced picture format '; } #all a[href$='.svg.br']::after { content: ' ∞ newer advanced picture format '; } #all a[href$='.mp3']::after { content: ' Ω old audio format '; } #all a[href$='.mp4']::after, #all a[href$='.m4a']::after { content: ' Ω new audio format '; } #all a[href$='.m4r']::after { content: ' Ω iPhone ringtone '; } #all a[href$='.shtml']::after {content: ' → another page '; } #all a[href='/']::after {content: ' ↵ front page '; } #all a[href$='sitemap.xml']::after { content: ' software visitors only '; } .translation-1::after { content: "† historic bible translation"; } .translation-2::after { content: "† traditional bible translation"; } .translation-3::after { content: "† simple bible translation"; } .translation-4::after { content: "† contemporary bible translation"; } .translation-5::after { content: "† unofficial catholic translation"; } li.long-book strong::after { content: ' ≡ long book '; } li.long-book strong.stronger::after { content: ' ≡ longer book '; } li.long-book strong.strongest::after { content: ' ≡ longest book '; } #all a[href^='//']::after, #all a[href^='http://']::after, #all a[href^='https://']::after { content: ' → another website '; } ul::before, ol::before { display: none !important } base-code-theme-all.css #red-theme:target *:not(h1)::before { color: white; background-color: hsl(346, 100%, 10%); text-shadow: 1px 1px 1px black; } #red-theme:target header::before, #red-theme:target main::before, #red-theme:target footer::before, #red-theme:target section::before, #red-theme:target article::before, #red-theme:target nav::before, #red-theme:target aside::before, #red-theme:target figure::before, #red-theme:target *::after { color: black; background-color: hsl(346, 100%, 90%); text-shadow: 1px 1px 1px white; } #red-theme:target p, #red-theme:target li, #red-theme:target .poetry, #red-theme:target blockquote, #red-theme:target figcaption, #red-theme:target td { color: hsl(346, 100%, 3%); background-color: hsl(346, 100%, 97%); text-align: left; text-shadow: 1px 1px 1px white; } #red-theme:target ul, #red-theme:target ol, #red-theme:target tr { background-color: hsl(346, 100%, 83%); } #red-theme:target h2, #red-theme:target h3, #red-theme:target h4, #red-theme:target h5, #red-theme:target h6, #red-theme:target th { color: hsl(346, 100%, 97%); background-color: hsl(346, 100%, 3%); text-shadow: 1px 1px 1px black; } #red-theme:target a, #all #red-theme:target td p, #red-theme:target .ribbon { color: hsl(346, 100%, 7%); background-color: hsl(346, 100%, 93%); text-shadow: 1px 1px 1px white; } #green-theme:target *:not(h1)::before { color: white; background-color: hsl(110, 100%, 10%); text-shadow: 1px 1px 1px black; } #green-theme:target header::before, #green-theme:target main::before, #green-theme:target footer::before, #green-theme:target section::before, #green-theme:target article::before, #green-theme:target nav::before, #green-theme:target aside::before, #green-theme:target figure::before, #green-theme:target *::after { color: black; background-color: hsl(110, 100%, 90%); text-shadow: 1px 1px 1px white; } #green-theme:target p, #green-theme:target li, #green-theme:target .poetry, #green-theme:target blockquote, #green-theme:target figcaption, #green-theme:target td { color: hsl(110, 100%, 3%); background-color: hsl(110, 100%, 97%); text-shadow: 1px 1px 1px white; } #green-theme:target ul, #green-theme:target ol, #green-theme:target tr { background-color: hsl(110, 100%, 83%); } #green-theme:target h2, #green-theme:target h3, #green-theme:target h4, #green-theme:target h5, #green-theme:target h6, #green-theme:target th { color: hsl(110, 100%, 97%); background-color: hsl(110, 100%, 3%); text-shadow: 1px 1px 1px black; } #green-theme:target a, #all #green-theme:target td p, #green-theme:target .ribbon { color: hsl(110, 100%, 7%); background-color: hsl(110, 100%, 93%); text-shadow: 1px 1px 1px white; } *::before, header::before, main::before, footer::before, section::before, article::before, nav::before, aside::before, figure::before, *::after, p, li, .poetry, blockquote, figcaption, td, ul, ol, tr, h1, h2, h3, h4, h5, h6, th, a { background-image: linear-gradient(to top, hsla(15,50%,90%,0.5) 0%,hsla(45,50%,10%,0.5) 100%), linear-gradient(to right, hsla(0,0%,100%,0.25) 0%,hsla(0,0%,0%,0.25) 100%); background-origin: content-box, padding-box; border-radius: .5em; border-width: .125em; border-color: black; border-style: solid; } ::before, ::after, #all .off-canvas-section a { text-transform: lowercase; } #all .off-canvas-section *::before { color: white; background-color: hsl(55, 100%, 10%); text-shadow: 1px 1px 1px black; } #all .off-canvas-section header::before, #all .off-canvas-section main::before, #all .off-canvas-section footer::before, #all .off-canvas-section section::before, #all .off-canvas-section article::before, #all .off-canvas-section nav::before, #all .off-canvas-section aside::before, #all .off-canvas-section figure::before, #all .off-canvas-section *::after { color: black; background-color: hsl(55, 100%, 90%); text-shadow: 1px 1px 1px white; } #all .off-canvas-section p, #all .off-canvas-section li, #all .off-canvas-section .poetry, #all .off-canvas-section blockquote, #all .off-canvas-section figcaption, #all .off-canvas-section td { color: hsl(55, 100%, 3%); background-color: hsl(55, 100%, 97%); text-shadow: 1px 1px 1px white; } #all .off-canvas-section ul, #all .off-canvas-section ol, #all .off-canvas-section tr { background-color: hsl(55, 100%, 83%); } #all .off-canvas-section h2, #all .off-canvas-section h3, #all .off-canvas-section h4, #all .off-canvas-section h5, #all .off-canvas-section h6, #all .off-canvas-section th { color: hsl(55, 100%, 97%); background-color: hsl(55, 100%, 3%); text-shadow: 1px 1px 1px black; } #all .off-canvas-section a, #all #all .off-canvas-section td p, #all .off-canvas-section .ribbon { color: hsl(55, 100%, 7%); background-color: hsl(55, 100%, 93%); text-shadow: 1px 1px 1px white; }base-code-print.css body { background: transparent; color: black; border: none; border-radius: 0em; border-image: none; background-image: none; font-size: 14pt; padding: 1em; margin: 1em; text-align: left; box-decoration-break: clone; font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif; } h1, h2, h3, h4, h5, h6, li, p, td { page-break-inside: avoid; } h1, h2, h3, h4, h5, h6, p, li, ul, ol { padding: .25em; margin: .25em; } h1, h2, h3, h4, h5, h6 { text-align: left; } h1 { font-size: 24pt; } h2 { font-size: 22pt; } h3 { font-size: 20pt; } h4 { font-size: 18pt; } h5 { font-size: 16pt; } h6 { font-size: 14pt; } a { color: black; } table { display: table; width: auto; } tr { width: auto; display: table-row; page-break-inside: avoid; } td { width: auto; display: table-cell; text-align: center; border-color: black; border-width: 1px; border-style: solid; font-size: 12pt; } td p { width: auto; text-align: center; text-indent: 0px; } aside, header, footer, nav, img, figure, #bot-visitors, .primary-element { display: none; }