orgmode html setup

1. orgmode html export settings involving favicon

#+TITLE: Play Video Game
#+AUTHOR: neo
#+STARTUP: overview
#+OPTIONS: H:3 toc:2 num:t ^:{} \n:nil ::t |:t -:t f:t *:t tex:t d:(HIDE) tags:not-in-toc

#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="org_manual.css" />
#+HTML_HEAD: <link rel="icon" type="image/x-icon" href="images/alien.ico" />


# https://iconscout.com/icons/html?price=free download icons

2. css settings updating

/* view-source:https://orgmode.org/manual/ */

html {
    color: #000;
    background-color: #e7e7e7;
    scroll-behavior: initial;
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4,
h5, h6, pre, code, form, fieldset, legend, input,
button, textarea, p, blockquote, th, td {
    margin: 0;
    padding: 0;
}

abbr, acronym {
   border: 0;
   font-variant: normal;

   border-bottom:1px dotted #000;
   text-decoration: none;
   cursor:help;
}

html, body {
   font-size: 1em;
   text-align: left;
   text-decoration: none;
}

body {
   max-width: 74.92em;
   margin: 0 auto;
   padding: .5em 1em 1em 1em;
   background-color: white;
   border: .1em solid #c0c0c0;
}

h1 { font-size: 2em; margin: 1em 0 }
h2 { font-size: 1.50em; margin: 1.0em 0 0.87em 0; }
h3 { font-size: 1.30em; margin: 1.0em 0 0.87em 0; }
h4 { font-size: 1.13em; margin: 1.0em 0 0.88em 0; }
h5 { font-size: 1.00em; margin: 1.0em 0 1.00em 0; }
h6 { font-size: 1.00em; margin: 1.0em 0 1.00em 0; }

table {
  border-collapse: collapse;
  border: #fff;
  margin-top: 1.5em; margin-bottom: 1.5em;
  width: 100%;
  rules: all;
  frame: box;
}

td, th {
  border: 1px solid;
  padding: 8px;
}

thead {
  background-color: #1c87c9;
  color: #ffffff;
}

th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #04AA6D;
}
thead th:first-child {border-left: none;}

tr:nth-child(even) td { background-color: #1c87c9; }
tbody tr:hover {background-color: #ddd; }

ol { list-style: decimal outside;}
ul { list-style: square outside; }
ul ul, ol ul { list-style: circle; }
li { list-style: inherit; }

ul, ol, blockquote { margin-left: 1.5%; margin-right: 1.5%; }

/* Lists of underlined links are difficult to read. The top margin
   gives a little more spacing between entries. */
ul li { margin: .5em 1em; }
ol li { margin: 1em; }
ol ul li { margin: .5em 1em; }
ul li p, ul ul li { margin-top: .3em; margin-bottom: .3em; }
ul ul, ol ul { margin-top: 0; margin-bottom: 0; }

/* Separate description lists from preceding text */
dl { margin: 1em 0 0 0; }
/* separate the "term" from subsequent "description" */
dt { margin: .5em 0; }
/* separate the "description" from subsequent list item
   when the final <dd> child is an anonymous box */
dd { margin: .5em 3% 1em 3%; }
/* separate anonymous box (used to be the first element in <dd>)
   from subsequent <p> */
dd p { margin: .5em 0; }

hr { margin: 1em 0; background-color: #ede6d5; }

img { max-width: 100%}

ins {
    text-decoration: none;
}

del { text-decoration: line-through; }

caption { margin-bottom: .5em; text-align: center; }

q:before, q:after {
    content:'';
}

input, button, textarea, select, optgroup, option {
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
}

blockquote { font-style: normal; }

/*** BASIC ELEMENTS ***/

/* Size and positioning */

p, pre, li, dt, dd, table, code, address { line-height: 1.3em; }
address { margin-bottom: 1em; }

p, pre { margin: 1em 0; }
pre { overflow: auto; padding-bottom: .3em; }

sup { vertical-align: super; }
sub { vertical-align: sub; }
/* sup { vertical-align: baseline;} */
/* sub { vertical-align: baseline;} */

a[href] { color: #005090; }
a[href]:visited { color: #100070; }
a[href]:active, a[href]:hover {
   color: #100070;
   text-decoration: none;
}

h1 a[href]:visited, h2 a[href]:visited, h3 a[href]:visited,
 h4 a[href]:visited { color: #005090; }
h1 a[href]:hover, h2 a[href]:hover, h3 a[href]:hover,
 h4 a[href]:hover { color: #100070; }

em { font-style: italic; }
small { font-size: .9em; }

/*** SIMPLE CLASSES ***/

.center, .c { text-align: center; }
.nocenter{ text-align: left; }

.underline { text-decoration: underline; }
.nounderline { text-decoration: none; }

.no-bullet { list-style: none; }
.inline-list li { display: inline }

.netscape4, .no-display { display: none; }


/*** FOR WIDE SCREENS ***/

@media (min-width: 40em) {
   body { padding: .5em 3em 1em 3em; }
   div.header, div.node { margin: 0 -3em; padding: 0 3em; }
}

/* https://orgmode.org/worg/style/worg.css */
@media all
{

    .outline-text-4 {
	margin-left: 1.45em;
    }

    .todo {
	color: #CA0000;
    }

    .done {
	color: #006666;
    }

    .timestamp-kwd {
	color: #444;
    }

    .tag {

    }

    code {
	font-size: 0.9rem;
	color: black;
	padding: 0px 0.2em;
    }

    .share img {
	opacity: .4;
	-moz-opacity: .4;
	filter: alpha(opacity=40);
    }

    .share img:hover {
	opacity: 1;
	-moz-opacity: 1;
	filter: alpha(opacity=100);
    }

    pre {
	font-family: Droid Sans Mono, Monaco, Consolas, "Lucida Console", monospace;
	color: black;
	font-size: 90%;
	padding: 0.5em;
	overflow: auto;
	border: none;
	background-color: #f2f2f2;
	border-radius: 5px;
    }

    .org-info-box {
	clear:both;
	margin-left:auto;
	margin-right:auto;
	padding:0.7em;
    }
    .org-info-box img {
	float:left;
	margin:0em 0.5em 0em 0em;
    }
    .org-info-box p {
	margin:0em;
	padding:0em;
    }

    .builtin {
	/* font-lock-builtin-face */
	color: #f4a460;
    }
    .comment {
	/* font-lock-comment-face */
	color: #737373;
    }
    .comment-delimiter {
	/* font-lock-comment-delimiter-face */
	color: #666666;
    }
    .constant {
	/* font-lock-constant-face */
	color: #db7093;
    }
    .doc {
	/* font-lock-doc-face */
	color: #b3b3b3;
    }
    .function-name {
	/* font-lock-function-name-face */
	color: #5f9ea0;
    }
    .headline {
	/* headline-face */
	color: #ffffff;
	background-color: #000000;
	font-weight: bold;
    }
    .keyword {
	/* font-lock-keyword-face */
	color: #4682b4;
    }
    .negation-char {
    }
    .regexp-grouping-backslash {
    }
    .regexp-grouping-construct {
    }
    .string {
	/* font-lock-string-face */
	color: #ccc79a;
    }
    .todo-comment {
	/* todo-comment-face */
	color: #ffffff;
	background-color: #000000;
	font-weight: bold;
    }
    .variable-name {
	/* font-lock-variable-name-face */
	color: #ff6a6a;
    }
    .warning {
	/* font-lock-warning-face */
	color: #ffffff;
	background-color: #cd5c5c;
	font-weight: bold;
    }
    pre.a {
	color: inherit;
	background-color: inherit;
	font: inherit;
	text-decoration: inherit;
    }
    pre.a:hover {
	text-decoration: underline;
    }

    /* Styles for org-info.js */

    .org-info-js_info-navigation
    {
	border-style:none;
    }

    #org-info-js_console-label
    {
	font-size:10px;
	font-weight:bold;
	white-space:nowrap;
    }

    .org-info-js_search-highlight
    {
	background-color:#ffff00;
	color:#000000;
	font-weight:bold;
    }

    #org-info-js-window
    {
	border-bottom:1px solid black;
	padding-bottom:10px;
	margin-bottom:10px;
    }

    .org-info-search-highlight
    {
	background-color:#adefef; /* same color as emacs default */
	color:#000000;
	font-weight:bold;
    }

    .org-bbdb-company {
	/* bbdb-company */
	font-style: italic;
    }
    .org-bbdb-field-name {
    }
    .org-bbdb-field-value {
    }
    .org-bbdb-name {
	/* bbdb-name */
	text-decoration: underline;
    }
    .org-bold {
	/* bold */
	font-weight: bold;
    }
    .org-bold-italic {
	/* bold-italic */
	font-weight: bold;
	font-style: italic;
    }
    .org-border {
	/* border */
	background-color: #000000;
    }
    .org-buffer-menu-buffer {
	/* buffer-menu-buffer */
	font-weight: bold;
    }
    .org-builtin {
	/* font-lock-builtin-face */
	color: #da70d6;
    }
    .org-button {
	/* button */
	text-decoration: underline;
    }
    .org-c-nonbreakable-space {
	/* c-nonbreakable-space-face */
	background-color: #ff0000;
	font-weight: bold;
    }
    .org-calendar-today {
	/* calendar-today */
	text-decoration: underline;
    }
    .org-comment {
	/* font-lock-comment-face */
	color: #b22222;
    }
    .org-comment-delimiter {
	/* font-lock-comment-delimiter-face */
	color: #b22222;
    }
    .org-constant {
	/* font-lock-constant-face */
	color: #5f9ea0;
    }
    .org-cursor {
	/* cursor */
	background-color: #000000;
    }
    .org-default {
	/* default */
	color: #000000;
	background-color: #ffffff;
    }
    .org-diary {
	/* diary */
	color: #ff0000;
    }
    .org-doc {
	/* font-lock-doc-face */
	color: #bc8f8f;
    }
    .org-escape-glyph {
	/* escape-glyph */
	color: #a52a2a;
    }
    .org-file-name-shadow {
	/* file-name-shadow */
	color: #7f7f7f;
    }
    .org-fixed-pitch {
    }
    .org-fringe {
	/* fringe */
	background-color: #f2f2f2;
    }
    .org-function-name {
	/* font-lock-function-name-face */
	color: #0000ff;
    }
    .org-header-line {
	/* header-line */
	color: #333333;
	background-color: #e5e5e5;
    }
    .org-help-argument-name {
	/* help-argument-name */
	font-style: italic;
    }
    .org-highlight {
	/* highlight */
	background-color: #b4eeb4;
    }
    .org-holiday {
	/* holiday */
	background-color: #ffc0cb;
    }
    .org-info-header-node {
	/* info-header-node */
	color: #a52a2a;
	font-weight: bold;
	font-style: italic;
    }
    .org-info-header-xref {
	/* info-header-xref */
	color: #0000ff;
	text-decoration: underline;
    }
    .org-info-menu-header {
	/* info-menu-header */
	font-weight: bold;
    }
    .org-info-menu-star {
	/* info-menu-star */
	color: #ff0000;
    }
    .org-info-node {
	/* info-node */
	color: #a52a2a;
	font-weight: bold;
	font-style: italic;
    }
    .org-info-title-1 {
	/* info-title-1 */
	font-size: 172%;
	font-weight: bold;
    }
    .org-info-title-2 {
	/* info-title-2 */
	font-size: 144%;
	font-weight: bold;
    }
    .org-info-title-3 {
	/* info-title-3 */
	font-size: 120%;
	font-weight: bold;
    }
    .org-info-title-4 {
	/* info-title-4 */
	font-weight: bold;
    }
    .org-info-xref {
	/* info-xref */
	color: #0000ff;
	text-decoration: underline;
    }
    .org-isearch {
	/* isearch */
	color: #b0e2ff;
	background-color: #cd00cd;
    }
    .org-italic {
	/* italic */
	font-style: italic;
    }
    .org-keyword {
	/* font-lock-keyword-face */
	color: #a020f0;
    }
    .org-lazy-highlight {
	/* lazy-highlight */
	background-color: #afeeee;
    }
    .org-link {
	/* link */
	color: #0000ff;
	text-decoration: underline;
    }
    .org-link-visited {
	/* link-visited */
	color: #8b008b;
	text-decoration: underline;
    }
    .org-match {
	/* match */
	background-color: #ffff00;
    }
    .org-menu {
    }
    .org-message-cited-text {
	/* message-cited-text */
	color: #ff0000;
    }
    .org-message-header-cc {
	/* message-header-cc */
	color: #191970;
    }
    .org-message-header-name {
	/* message-header-name */
	color: #6495ed;
    }
    .org-message-header-newsgroups {
	/* message-header-newsgroups */
	color: #00008b;
	font-weight: bold;
	font-style: italic;
    }
    .org-message-header-other {
	/* message-header-other */
	color: #4682b4;
    }
    .org-message-header-subject {
	/* message-header-subject */
	color: #000080;
	font-weight: bold;
    }
    .org-message-header-to {
	/* message-header-to */
	color: #191970;
	font-weight: bold;
    }
    .org-message-header-xheader {
	/* message-header-xheader */
	color: #0000ff;
    }
    .org-message-mml {
	/* message-mml */
	color: #228b22;
    }
    .org-message-separator {
	/* message-separator */
	color: #a52a2a;
    }
    .org-minibuffer-prompt {
	/* minibuffer-prompt */
	color: #0000cd;
    }
    .org-mm-uu-extract {
	/* mm-uu-extract */
	color: #006400;
	background-color: #ffffe0;
    }
    .org-mode-line {
	/* mode-line */
	color: #000000;
	background-color: #bfbfbf;
    }
    .org-mode-line-buffer-id {
	/* mode-line-buffer-id */
	font-weight: bold;
    }
    .org-mode-line-highlight {
    }
    .org-mode-line-inactive {
	/* mode-line-inactive */
	color: #333333;
	background-color: #e5e5e5;
    }
    .org-mouse {
	/* mouse */
	background-color: #000000;
    }
    .org-negation-char {
    }
    .org-next-error {
	/* next-error */
	background-color: #eedc82;
    }
    .org-nobreak-space {
	/* nobreak-space */
	color: #a52a2a;
	text-decoration: underline;
    }
    .org-org-agenda-date {
	/* org-agenda-date */
	color: #0000ff;
    }
    .org-org-agenda-date-weekend {
	/* org-agenda-date-weekend */
	color: #0000ff;
	font-weight: bold;
    }
    .org-org-agenda-restriction-lock {
	/* org-agenda-restriction-lock */
	background-color: #ffff00;
    }
    .org-org-agenda-structure {
	/* org-agenda-structure */
	color: #0000ff;
    }
    .org-org-archived {
	/* org-archived */
	color: #7f7f7f;
    }
    .org-org-code {
	/* org-code */
	color: #7f7f7f;
    }
    .org-org-column {
	/* org-column */
	background-color: #e5e5e5;
    }
    .org-org-column-title {
	/* org-column-title */
	background-color: #e5e5e5;
	font-weight: bold;
	text-decoration: underline;
    }
    .org-org-date {
	/* org-date */
	color: #a020f0;
	text-decoration: underline;
    }
    .org-org-done {
	/* org-done */
	color: #228b22;
	font-weight: bold;
    }
    .org-org-drawer {
	/* org-drawer */
	color: #0000ff;
    }
    .org-org-ellipsis {
	/* org-ellipsis */
	color: #b8860b;
	text-decoration: underline;
    }
    .org-org-formula {
	/* org-formula */
	color: #b22222;
    }
    .org-org-headline-done {
	/* org-headline-done */
	color: #bc8f8f;
    }
    .org-org-hide {
	/* org-hide */
	color: #e5e5e5;
    }
    .org-org-latex-and-export-specials {
	/* org-latex-and-export-specials */
	color: #8b4513;
    }
    .org-org-level-1 {
	/* org-level-1 */
	color: #0000ff;
    }
    .org-org-level-2 {
	/* org-level-2 */
	color: #b8860b;
    }
    .org-org-level-3 {
	/* org-level-3 */
	color: #a020f0;
    }
    .org-org-level-4 {
	/* org-level-4 */
	color: #b22222;
    }
    .org-org-level-5 {
	/* org-level-5 */
	color: #228b22;
    }
    .org-org-level-6 {
	/* org-level-6 */
	color: #5f9ea0;
    }
    .org-org-level-7 {
	/* org-level-7 */
	color: #da70d6;
    }
    .org-org-level-8 {
	/* org-level-8 */
	color: #bc8f8f;
    }
    .org-org-link {
	/* org-link */
	color: #a020f0;
	text-decoration: underline;
    }
    .org-org-property-value {
    }
    .org-org-scheduled-previously {
	/* org-scheduled-previously */
	color: #b22222;
    }
    .org-org-scheduled-today {
	/* org-scheduled-today */
	color: #006400;
    }
    .org-org-sexp-date {
	/* org-sexp-date */
	color: #a020f0;
    }
    .org-org-special-keyword {
	/* org-special-keyword */
	color: #bc8f8f;
    }
    .org-org-table {
	/* org-table */
	color: #0000ff;
    }
    .org-org-tag {
	/* org-tag */
	font-weight: bold;
    }
    .org-org-target {
	/* org-target */
	text-decoration: underline;
    }
    .org-org-time-grid {
	/* org-time-grid */
	color: #b8860b;
    }
    .org-org-todo {
	/* org-todo */
	color: #ff0000;
    }
    .org-org-upcoming-deadline {
	/* org-upcoming-deadline */
	color: #b22222;
    }
    .org-org-verbatim {
	/* org-verbatim */
	color: #7f7f7f;
	text-decoration: underline;
    }
    .org-org-warning {
	/* org-warning */
	color: #ff0000;
	font-weight: bold;
    }
    .org-outline-1 {
	/* outline-1 */
	color: #0000ff;
    }
    .org-outline-2 {
	/* outline-2 */
	color: #b8860b;
    }
    .org-outline-3 {
	/* outline-3 */
	color: #a020f0;
    }
    .org-outline-4 {
	/* outline-4 */
	color: #b22222;
    }
    .org-outline-5 {
	/* outline-5 */
	color: #228b22;
    }
    .org-outline-6 {
	/* outline-6 */
	color: #5f9ea0;
    }
    .org-outline-7 {
	/* outline-7 */
	color: #da70d6;
    }
    .org-outline-8 {
	/* outline-8 */
	color: #bc8f8f;
    }
    .outline-text-1, .outline-text-2, .outline-text-3, .outline-text-4, .outline-text-5, .outline-text-6 {
    /* Add more spacing between section. Padding, so that folding with org-info.js works as expected. */

    }

    .org-preprocessor {
	/* font-lock-preprocessor-face */
	color: #da70d6;
    }
    .org-query-replace {
	/* query-replace */
	color: #b0e2ff;
	background-color: #cd00cd;
    }
    .org-regexp-grouping-backslash {
	/* font-lock-regexp-grouping-backslash */
	font-weight: bold;
    }
    .org-regexp-grouping-construct {
	/* font-lock-regexp-grouping-construct */
	font-weight: bold;
    }
    .org-region {
	/* region */
	background-color: #eedc82;
    }
    .org-rmail-highlight {
    }
    .org-scroll-bar {
	/* scroll-bar */
	background-color: #bfbfbf;
    }
    .org-secondary-selection {
	/* secondary-selection */
	background-color: #ffff00;
    }
    .org-shadow {
	/* shadow */
	color: #7f7f7f;
    }
    .org-show-paren-match {
	/* show-paren-match */
	background-color: #40e0d0;
    }
    .org-show-paren-mismatch {
	/* show-paren-mismatch */
	color: #ffffff;
	background-color: #a020f0;
    }
    .org-string {
	/* font-lock-string-face */
	color: #bc8f8f;
    }
    .org-texinfo-heading {
	/* texinfo-heading */
	color: #0000ff;
    }
    .org-tool-bar {
	/* tool-bar */
	color: #000000;
	background-color: #bfbfbf;
    }
    .org-tooltip {
	/* tooltip */
	color: #000000;
	background-color: #ffffe0;
    }
    .org-trailing-whitespace {
	/* trailing-whitespace */
	background-color: #ff0000;
    }
    .org-type {
	/* font-lock-type-face */
	color: #228b22;
    }
    .org-underline {
	/* underline */
	text-decoration: underline;
    }
    .org-variable-name {
	/* font-lock-variable-name-face */
	color: #b8860b;
    }
    .org-variable-pitch {
    }
    .org-vertical-border {
    }
    .org-warning {
	/* font-lock-warning-face */
	color: #ff0000;
	font-weight: bold;
    }
    .rss_box {}
    .rss_title, rss_title a {}
    .rss_items {}
    .rss_item a:link, .rss_item a:visited, .rss_item a:active {}
    .rss_item a:hover {}
    .rss_date {}

    label.org-src-name {
	font-size: 80%;
	font-style: italic;
    }

    #show_source {margin: 0; padding: 0;}

    #postamble {
	font-size: 75%;
	min-width: 700px;
	max-width: 80%;
	line-height: 14pt;
	margin-left: 20px;
	margin-top: 10px;
	padding: .2em;
	background-color: #ffffff;
	z-index: -1000;
    }
} /* END OF @media all */

3. end