) having an extra line break afterwards, by wrapping it in an inline div. */
.ordered_list {
display: inline;
margin: 0 0;
}
ol {
margin-top: 0;
margin-bottom: 0;
padding-left: 1.2em;
/* border: 1px solid black; */ /* testing */
}
/* Add a little extra padding between bullet and text. */
li {
padding-left: 5px;
}
/* Prevent unordered_list () having an extra line break afterwards, by wrapping it in an inline div. */
.unordered_list {
display: inline;
margin: 0 0;
}
ul {
margin-top: 0;
margin-bottom: 0;
padding-left: 1.2em;
/* border: 1px solid black; */ /* testing */
list-style-type: disc;
}
/* END list section */
.embedded_video {
width: 340px;
height: 255px; /* 340.0 / 480 * 360 = 255px */
}
.datablock {
display: block;
width: 100%;
border: 1px solid black;
padding-left: 5px; padding-right: 5px;
/* By default, padding is added to the box _after_ the width is checked. To change this, use:
box-sizing: border-box;
http://stackoverflow.com/questions/22564756/css-how-to-make-max-width-fixed-when-adding-padding/22564800
*/
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
font-family: Courier, monospace;
font-size: 1em;
text-align: left;
overflow-wrap: break-word; /* In contrast to {word-break: break-all}, overflow-wrap will only create a break if an entire word cannot be placed on its own line without overflowing. With long words involved, wrapping might be a bit strange. */
}
.preserve_whitespace {
white-space: pre-wrap; /* preserve whitespace (spaces, tabs, newlines). Text will wrap when necessary, and on line breaks.
http://www.w3schools.com/cssref/pr_text_white-space.asp
*/
tab-size: 4; /*
The tab character (unicode U+0009) is typically converted to spaces (unicode U+0020) by the white space processing rules and then collapsed so that only one space in a row is displayed in the browser. Therefore the tab-size property is only useful when the white space processing rules do not apply, namely inside a
tag and when the white-space property of an element is set to pre-wrap.
The default value for the tab-size property is 8 space characters, and it can accept any positive integer value.
https://css-tricks.com/almanac/properties/t/tab-size/
*/
word-break: break-all; /* needed for handling e.g.:
root@trb1:~/trb# wget -O asciilifeform.asc http://wot.deedbot.org/17215D118B7239507FAFED98B98228A001ABFFC7.asc
this: {overflow-wrap: break-word;} will still cause wrapping and word position shifting if long words are involved, so it's not suitable for e.g. bash output display.
*/
}
.base64_data, .gpg_signature, .gpg_public_key {
text-align: left;
font-family: Courier, monospace;
font-size: 0.9em;
-webkit-text-size-adjust: none; /* for safari on iphone */
}
.code {
font-family: Courier, monospace;
font-size: 0.9em;
background-color: lightgrey;
line-height: 1.2em;
padding-left: 0.2em;
padding-right: 0.2em;
padding-top: 0.2em;
text-align: left;
max-width: 100%;
border-radius: 6px;
}
/* By default, prevent forms from changing layout. */
form {
margin: 0px;
padding: 0px;
display: inline;
}
.footnotes {
width: 100%;
text-align: left;
text-justify: inter-word;
}
.lined_code table {
width: 100%;
table-layout: fixed;
font-family: Courier, monospace;
font-size: 0.8em;
border-spacing: 0px; /* aka "cellspacing" */
}
/* https://danoc.me/blog/css-prevent-copy/ */
/* https://codepen.io/danoc/pen/ByGKZv */
.lined_code [data-pseudo-content]::before,
[data-pseudo-content--before]::before,
[data-pseudo-content--after]::after {
content: attr(data-pseudo-content);
/* Content displayed on a page using the CSS content property is never added to the DOM. This prevents the text from being selected or copied without the use of (-prefix-)user-select: none. */
}
.lined_code td {
border-left: 0px;
border-top: 0px;
border-bottom: 1px solid #777777;
border-right: 1px solid #777777;
padding-top: 5px;
padding-bottom: 5px;
}
.lined_code tr:first-child td {
border-top: 1px solid #777777;
}
.lined_code tr td:first-child {
border-left: 1px solid #777777;
}
.lined_code td.line_number {
text-align: right;
width: 10%;
background-color: #b0e0e6;
padding-left: 5px;
padding-right: 10px;
}
.lined_code td.code_line {
background-color: #faf0e6; /* Pale Turquoise http://www.tayloredmktg.com/rgb */
padding-left: 10px;
padding-right: 10px;
}
.lined_code td.code_line pre {
text-align: left;
overflow-wrap: break-word;
word-wrap: break-word; /* needed for firefox, which doesn't appear to handle overflow-wrap: break-word; */
border-left-color: red;
white-space: pre-wrap; /* preserve whitespace (spaces, tabs, newlines) */
tab-size: 4; /*
The tab character (unicode U+0009) is typically converted to spaces (unicode U+0020) by the white space processing rules and then collapsed so that only one space in a row is displayed in the browser. Therefore the tab-size property is only useful when the white space processing rules do not apply, namely inside a tag and when the white-space property of an element is set to pre-wrap.
The default value for the tab-size property is 8 space characters, and it can accept any positive integer value.
https://css-tricks.com/almanac/properties/t/tab-size/
*/
}
.lined_code_heading_container {
text-align: center;
width: 100%;
}
.lined_code_heading {
text-align: center;
width: 80%;
background-color: #faf0e6;
border: 1px solid black;
padding: 10px;
margin-top: 10px;
margin-bottom: 10px;
}
.lined_code_heading .code_title {
font-weight: bold;
word-break: break-all; /* for long code file names in small windows */
}
.lined_code_heading .code_language {
}
.indented_section {
padding-left: 30px;
}
/* SPECIFIC COMBINATION STYLE CLASSES FOR TABLE CELLS */
.monospace.align_center {
text-align: center;
font-family: Courier, monospace;
font-size: 0.8em;
overflow-wrap: break-word;
max-width: 100%;
}
/* SPECIFIC NUMERIC VALUES */
.font_size_1_2em {
/* used in /articles/ed_seykota_the_jademaster */
font-size: 1.2em;
}
.underline {
text-decoration: underline;
}
.double_underline {
border-bottom: 3px double;
}
.align_left {
text-align: left;
}
div.align_left {
width: 100%;
}
.align_center {
text-align: center;
}
div.align_center {
width: 100%;
}
.align_right {
text-align: right;
}
div.align_right {
width: 100%;
}
.align_top {
vertical-align: top;
}
div.align_top {
width: 100%;
}
.invisible {
visibility: hidden;
}
/* interface_manage_ip_addresses */
#interface_manage_ip_addresses {
width: 100%;
}
.ip_address_slot {
width: 100%;
}
.ip_address_slot input[type=submit] {
float: right;
}
/* end interface_manage_ip_addresses */
/* interface_browse_articles */
#interface_browse_articles {
width: 100%;
position: relative;
}
#interface_browse_articles_previous {
float: left;
}
#interface_browse_articles_next {
float: right;
}
/* end interface_browse_articles */
img {
width: 90%;
}
.image {
text-align: center;
}
.image_caption {
padding-top: 10px;
}
.bash, .repl {
width: 100%;
padding-left: 5px; padding-right: 5px;
font-family: Courier, monospace;
font-size: 0.8em;
padding: 10px;
/* By default, padding is added to the box _after_ the width is checked. To change this, use:
box-sizing: border-box;
http://stackoverflow.com/questions/22564756/css-how-to-make-max-width-fixed-when-adding-padding/22564800
*/
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
border: 1px solid #777777;
border-left: 3px solid #777777;
text-align: left;
background-color: #ffe4b5; /* http://www.tayloredmktg.com/rgb Moccasin */
margin-top: 10px;
margin-bottom: 10px;
word-break: break-all; /* needed for handling e.g.:
root@trb1:~/trb# wget -O asciilifeform.asc http://wot.deedbot.org/17215D118B7239507FAFED98B98228A001ABFFC7.asc */ /* note: this will break small words wherever they hit the max-width. */
}
.bash .input, .repl .input {
font-size: 1em;
font-weight: bold;
}
.warning {
font-weight: bold;
background-color: red;
border: 4px solid black;
border-radius: 20px;
padding: 10px;
margin-top: 10px;
margin-bottom: 10px;
}
.warning a, a.visited {
/* inherits from .content a settings */
color: darkblue;
}
/* Test: Single and nested blockquotes appear in:
http://edgecase.pro/articles/notes_on_the_security_of_p2sh_multisignature_addresses
*/
blockquote {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 10px;
margin-right: 10px;
padding-left: 10px;
padding-right: 10px; /* Without this, the text moves slightly over the right-hand side on iPhone */
border-left: 2px solid #666666; /* trilema blockquote border color */
display: inline-block; /* goal: don't add a
automatically after each */
/* By default, padding is added to the box _after_ the width is checked. This means that the box will move out past the right side of the page.
To change this, use:
box-sizing: border-box;
http://stackoverflow.com/questions/22564756/css-how-to-make-max-width-fixed-when-adding-padding/22564800
*/
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
.divider {
margin-top: 10px;
margin-bottom: 10px;
border-bottom: 2px solid #000000;
width: 50%;
}
.file {
padding-top: 10px; padding-bottom: 10px;
padding-right: 10px; /* to force a margin onto the .file .data item when its width is 100% */
}
.file_heading_container {
text-align: center;
width: 100%;
}
.file_heading {
text-align: center;
width: 80%;
background-color: lightblue;
border: 1px solid black;
padding: 10px;
margin-top: 10px;
margin-bottom: 10px;
}
.file_heading .filename {
font-weight: bold;
}
.file .data {
width: 100%;
border: 1px solid black;
padding-left: 5px; padding-right: 5px;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 5px; /* seems to have no effect if width is 100% */
text-align: left;
background-color: lightblue;
font-family: Courier, monospace;
font-size: 0.8em;
white-space: pre-wrap; /* preserve whitespace (spaces, tabs, newlines) */
tab-size: 4;
/* future: overflow-wrap: break-word; - will this work ok with {white-space: pre-wrap} */
}
.chat_content {
border: 1px solid black;
padding: 1em;
}
/* ==================================================== */
/* END RULESET 1 */
/* ==================================================== */
/* ==================================================== */
/* RULESET 2 */
/* ==================================================== */
/* NOTES:
- The rules here apply to screen sizes that are at least 1024 px wide.
- These are changes / updates / alterations to the default ruleset.
*/
@media only screen and (min-width: 1024px) {
#container {
}
#datafeed_name_text {
font-size: 3.5em;
}
#main_section {
width: 1024px;
margin-left: auto; margin-right: auto;
}
#display_panel {
/* With width = 580px, and font-size = 1.1 em, and the horizontal padding,
we get about 70-80 chars per line, which is very readable. */
width: 580px;
font-size: 1.1em;
float: left;
padding-left: 10px; padding-right: 20px;
padding-top: 5px; /* causes the initial quote / page title to be slightly below the Navigation menu title. */
line-height: 1.3em;
}
#navigation_panel_wrapper {
float: left;
border-color: orange;
width: 325px;
}
#navigation_panel {
width: 100%;
font-size: 0.9em;
padding-right: 5px; padding-left: 5px;
}
#title {
width: 100%;
margin: 0;
text-align: left;
font-size: 2em;
}
#title_line {
width: 100%;
margin-left: 0;
margin-right: 0;
}
#item_metadata div {
width: 100%;
}
#content_wrapper {
width: 100%;
}
.heading {
font-size: 1.8em;
}
.heading2 {
font-size: 1.4em;
}
#comments {
width: 100%;
}
#button_section_4 {
width: 100%;
padding-left: 10px;
}
.embedded_video {
width: 580;
height: 435; /* 580.0 / 480 * 360 = 435 */
}
}
/* ==================================================== */
/* END RULESET 2 */
/* ==================================================== */
/* ==================================================== */
/* RULESET 3 */
/* ==================================================== */
/* NOTES:
- The rules here apply to screen sizes that are at least 1366 px wide.
- These are changes / updates / alterations to the previous rulesets.
*/
@media only screen and (min-width: 1366px) {
/* Goal: Increase text size. Increase line length to ~100 chars. */
#main_section {
width: 1366px;
margin-left: auto; margin-right: auto;
border-color: blue;
}
#display_panel {
width: 900px;
font-size: 1.3em;
float: left;
padding-left: 10px; padding-right: 20px;
line-height: 1.3em;
}
#navigation_panel {
width: 400px;
font-size: 1em;
}
.embedded_video {
width: 900;
height: 506; /* 900.0 / 16 * 9 = 506.25 */
}
}
/* ==================================================== */
/* END RULESET 3 */
/* ==================================================== */