Commit 55baa121 authored by JoJo's avatar JoJo 💬

Fix closing tags. Add footer. Fires as css pseudocontent. Misc styling

parent 2ee80697
body {
min-width: 420px;
font: 16px "Fira Sans", "Dejavu Sans", sans-serif;
line-height: 1.6;
margin: 0;
color: rgba(20, 20, 20, 0.85);
color: rgb(50, 50, 50);
background-color: rgb(254, 253, 252);
}
h1 {
header {
min-width: 100%;
width: 100%;
}
header h1 {
display: flex;
align-items: center;
justify-content: center;
margin: 0;
height: calc(4em * 1.6);
margin: 0 1.6em;
}
h1 > b {
margin: 0 14px;
header h1:before, header h1:after {
content: "🔥";
width: 40px;
height: 40px;
position: relative;
animation: fire 1s steps(1, end) infinite;
}
header h1:before {
right: 8px;
}
header h1:after {
left: 7px;
}
@keyframes fire {
0% {
font-size: 1em;
font-size: 26px;
bottom: 0px;
}
50% {
font-size: 1.6em;
font-size: 40px;
bottom: 12px;
}
}
main {
#content {
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
padding: 20px;
}
#table-of-contents {
font-size: 0.85em;
min-width: 220px;
width: 220px;
padding-right: 20px;
min-width: 200px;
width: 200px;
padding: 20px;
}
#table-of-contents > h2, main > article > div:first-child > h2 {
#table-of-contents > h2, main > div:first-child > h2 {
margin-top: 0px;
}
......@@ -51,23 +69,28 @@ main {
padding-left: 24px;
}
article {
main {
max-width: 700px;
min-width: 360px;
width: calc(100% - 240px - 20px);
min-width: 380px;
width: calc(100% - 240px - 2*20px);
padding: 20px;
}
h2 {
margin-top: 2.2em;
}
#right-padding {
max-width: 240px;
width: calc(100% - 240px - 700px - 20px);
width: calc(100% - 240px - 700px - 2*20px);
}
article img {
img {
width: 100%;
border-radius: 8px;
}
article figure {
figure {
margin: 1.5em 0;
}
......@@ -112,3 +135,14 @@ a:hover {
.mathjax-wrapper > .MathJax_Display {
margin: 0;
}
footer {
padding: 14px;
padding-top: 18px;
margin-top: 20px;
background-color: rgba(0, 0, 0, 0.05);
}
footer p {
text-align: left;
}
* Me
I like cats. [[https://github.com/bryal/][This is my Github profile]]. [[https://www.linkedin.com/in/bryal][This is my LinkedIn profile]].
This is how much I love my cats:
$$\begin{aligned}
l(c) &= \sum_{n=0,1,...} n \\
\text{where} & \\
\ \ l &= \text{ how much I love something}, \\
c &= \text{ my cats}
\end{aligned}$$
* My cats
I have two cats. They are very pretty.
#+CAPTION: So pretty!
#+NAME: fig:together-on-bed
[[./img/highres/together-on-bed.jpg][file:img/together-on-bed.jpg]]
** Caesar
He is very pretty.
#+CAPTION: Handsome!
#+NAME: fig:handsome-caesar
[[./img/highres/handsome-caesar.jpg][file:img/handsome-caesar.jpg]]
#+CAPTION: Where are you looking?
#+NAME: fig:attentive-caesar
[[./img/highres/attentive-caesar.jpg][file:img/attentive-caesar.jpg]]
** Octavia
She is very pretty also.
#+CAPTION: What a cute face!
#+NAME: fig:octavia-cute-face
[[./img/highres/octavia-cute-face.jpg][file:img/octavia-cute-face.jpg]]
#+CAPTION: So comfy!
#+NAME: fig:octavia-so-comfy
[[./img/highres/octavia-so-comfy.jpg][file:img/octavia-so-comfy.jpg]]
#+TITLE: *🔥* /Welcome to the Jo-Zone!/ *🔥*
#+TITLE: Welcome to the Jo‑Zone!
#+AUTHOR: The Jo-ster, Mr. J, The Living Yo-Yo
#+EMAIL: mailto:[email protected]
#+LANGUAGE: en
#+OPTIONS: toc:nil h:4 html-postamble:nil html-preamble:t tex:t f:t
#+OPTIONS: h:4 tex:t f:t
#+OPTIONS: prop:("VERSION")
#+HTML_DOCTYPE: <!DOCTYPE html>
#+HTML_DOCTYPE: html5
#+HTML_HEAD: <link href="css/style.css" rel="stylesheet" type="text/css" />
#+AUTHOR: The Jo-ster, Mr. J, The Living Yo-Yo
#+EMAIL: mailto:[email protected]
#+HTML_POSTAMBLE: <p class="author">Author: %a (%e)</p><p class="date">Created: %T</p><p class="creator">%c</p>
# #+HTML: <div class="outline-2" id="meta">
# | *Author* | {{{author}}} ({{{email}}}) |
......@@ -14,62 +16,6 @@
#+HTML: <main>
#+TOC: headlines 2
#+HTML: <article>
#+BEGIN_COMMENT
Each major section of this document is defined in its own file.
You can jump to each file by moving the cursor on an "#+include" line
and typing =C-c '= Note: There is *no requirement* to split, but large
org-mode files can become quite slow to edit, so separate sections help
keeping things fluid...
#+END_COMMENT
# #+INCLUDE: "./sections/intro.org" :minlevel 1
# #+INCLUDE: "./sections/sys-arch.org" :minlevel 1
# #+INCLUDE: "./sections/comms.org" :minlevel 1
* Me
I like cats. [[https://github.com/bryal/][This is my Github profile]]. [[https://www.linkedin.com/in/bryal][This is my LinkedIn profile]].
* My cats
I have two cats. They are very pretty.
#+CAPTION: So pretty!
#+NAME: fig:together-on-bed
[[./img/together-on-bed.jpg]]
** Caesar
He is very pretty.
#+CAPTION: Handsome!
#+NAME: fig:handsome-caesar
[[./img/handsome-caesar.jpg]]
#+CAPTION: Where are you looking?
#+NAME: fig:attentive-caesar
[[./img/attentive-caesar.jpg]]
** Octavia
She is very pretty also.
#+CAPTION: What a cute face!
#+NAME: fig:octavia-cute-face
[[./img/octavia-cute-face.jpg]]
#+CAPTION: So comfy!
#+NAME: fig:octavia-so-comfy
[[./img/octavia-so-comfy.jpg]]
#+HTML_AFTER_CONTENTS: </main><div id="right-padding"></div>
#+HTML: </article><div id="right-padding"></div></main>
#+INCLUDE: "./frontpage.org" :minlevel 1
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