Commit 7e3b3f7c authored by JoJo's avatar JoJo 💬

Update css

parent 41c71f67
header h1 {
height: calc(4em * 1.6);
margin: 0 1.6em;
header {
margin-bottom: 4em;
}
header .title {
display: flex;
font-size: 3.0em;
margin-top: 1.8em;
}
header h1:before, header h1:after {
......@@ -14,11 +19,15 @@ header h1:before, header h1:after {
}
header h1:before {
right: 10px;
right: 26px;
}
header h1:after {
left: 9px;
left: 10px;
}
#sitenav a:first-child {
display: none;
}
@keyframes fire {
......
:root {
/* Variable definitions */
/* Misc variables */
--toc-width: 320px;
--common-padding: 18px;
--main-width: 720px;
--article-width: 640px;
--shaded: rgba(0, 0, 0, 0.07);
--blackish: rgb(50, 50, 50);
--whiteish: rgb(254, 253, 252);
--secondary-dark: #0a4;
--secondary: #1f7;
--primary: #63f;
--primary-light: #86f;
--primary-lighter: #dcf;
/* Code */
--emerald: #2ecc71;
--river: #3498db;
--amethyst: #9b59b6;
--asphalt: #425d78;
--sunflower: #f1c40f;
--carrot: #e67e22;
--alizarin: #e74c3c;
--clouds: #ecf0f1;
--concrete: #95a5a6;
--light-turquoise: #90c0a0;
--dark-turquoise: #3a9a90;
--bleak-emerald: #50c080;
--dark-emerald: #24aa5c;
--dark-river: #2980b9;
--dark-asphalt: #2c3e50;
--dark-sunflower: #b09000;
--dark-carrot: #d35400;
--bleak-alizarin: #d06065;
--dark-alizarin: #bc3c34;
--dark-clouds: #bdc3c7;
--deep-clouds: #dce0e1;
--dark-concrete: #7f8c8d;
}
body {
display: flex;
min-height: 100vh;
flex-direction: column;
font: 16px "Fira Sans", "Dejavu Sans", sans-serif;
line-height: 1.6;
margin: 0;
color: rgb(50, 50, 50);
background-color: rgb(254, 253, 252);
color: var(--blackish);
background-color: var(--whiteish);
}
header {
min-width: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 1.4em;
}
header h1.title {
#sitenav {
height: 2.4em;
width: calc(100% - var(--common-padding) * 2);
padding: var(--common-padding);
display: flex;
justify-content: flex-end;
align-items: center;
justify-content: center;
margin-top: 0.8em;
margin-bottom: 0.6em;
}
#content {
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
#sitenav a:first-child {
margin-right: auto;
}
#sitenav a:first-child img {
height: 100%;
height: 2.4em;
}
#sitenav a {
padding: 0 6px;
margin: 0 8px;
font-size: 1.1em;
font-weight: bold;
color: var(--primary);
}
#sitenav a:visited {
color: var(--primary);
}
header {
margin-bottom: 2.2em;
}
header .title {
margin-top: 1.2em;
}
header .subtitle {
font-style: italic;
}
main {
display: grid;
grid-template-columns: var(--toc-width) auto var(--toc-width);
}
#table-of-contents {
font-size: 0.83em;
min-width: var(--toc-width);
width: var(--toc-width);
grid-column: 1 / 2;
align-self: start;
font-size: 1.0em;
padding: var(--common-padding);
background-color: var(--shaded);
}
#table-of-contents > h2, main > div:first-child > h2 {
margin-top: 0px;
#table-of-contents a {
color: var(--primary-light);
}
#table-of-contents ul {
padding-left: 16px;
#table-of-contents a:visited {
color: var(--primary-light);
}
.tag {
display: inline-block;
#table-of-contents > h2 {
margin-top: 12px;
}
#table-of-contents li .todo, #table-of-contents li .tag {
font-size: 0.8em;
#table-of-contents ul {
padding-left: 16px;
}
main {
max-width: var(--main-width);
/*min-width: 360px;*/
width: calc(100% - var(--toc-width) - 4*var(--common-padding));
article {
grid-column: 2 / 3;
justify-self: center;
max-width: var(--article-width);
width: auto;
padding: var(--common-padding);
}
main h2 .todo, main h2 .tag {
font-size: 0.6em;
article > p:first-child, article > div:first-child > h2 {
margin-top: 12px;
}
#sitenav {
padding: 4px;
background-color: rgba(0, 0, 0, 0.05);
.tag {
display: inline-block;
}
h2 {
margin-top: 2.2em;
.todo, .tag {
font-size: 0.8em;
}
#right-padding {
max-width: calc(var(--toc-width) + 2*var(--common-padding));
width: calc(100% - var(--toc-width) - var(--main-width) - 4*var(--common-padding));
.outline-2 {
margin-bottom: 2.6em;
}
img {
......@@ -103,12 +167,12 @@ p {
}
a {
color: rgba(20, 70, 240, 0.85);
color: var(--secondary);
text-decoration: none;
}
a:visited {
color: rgba(150, 40, 210, 0.85);
color: var(--secondary-dark);
}
a:hover {
......@@ -136,47 +200,92 @@ a:hover {
}
pre.src {
font-size: 0.8em;
overflow-x: scroll !important;
font-size: 0.9em;
overflow-x: auto !important;
border: var(--primary-lighter) 2px dashed;
padding: 6px 8px;
}
/* CUSTOM_ID boxes */
pre.example {
display: none;
}
code {
background-color: rgba(0, 180, 120, 0.12);
color: black;
background-color: var(--primary-lighter);
padding: 0 0.15em;
}
.footdef {
display: flex;
}
footer {
flex-grow: 1;
padding: 14px;
padding-top: 18px;
margin-top: 20px;
background-color: rgba(0, 0, 0, 0.05);
background-color: var(--shaded);
}
footer a, footer a:visited {
color: var(--primary-light)
}
footer p {
text-align: left;
}
@media screen and (max-width: 960px) {
body {
font-size: 14px;
width: 100%;
@media screen and (max-width: 1000px) {
:root {
--common-padding: 12px;
}
#table-of-contents {
padding: 12px;
min-width: 0;
width: 100%;
padding-left: calc(var(--common-padding) + 8px);
}
main {
padding: 12px;
max-width: 100%;
min-width: 0;
width: 100%;
display: block;
}
article {
max-width: none;
}
}
#right-padding {
width: 0;
@media screen and (max-width: 560px) {
body {
font-size: 10px;
}
}
/* Code faces */
pre.src {
color: var(--dark-asphalt); }
pre.src .org-builtin {
color: var(--dark-sunflower); }
pre.src .org-comment, pre.src .org-comment-delimiter {
color: var(--dark-concrete);
font-style: italic; }
pre.src .org-doc {
color: var(--dark-turquoise);
font-style: italic; }
pre.src .org-function-name {
color: var(--amethyst); }
pre.src .org-keyword {
color: var(--dark-asphalt);
font-style: italic; }
pre.src .org-string {
color: var(--bleak-alizarin); }
pre.src .org-type {
color: var(--dark-emerald); }
pre.src .org-constant {
color: var(--dark-emerald);
font-style: italic; }
pre.src .org-variable-name {
color: var(--river); }
pre.src .org-warning {
color: var(--dark-carrot); }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment