first blood

1 files changed, 249 insertions, 0 deletions

diff --git a/assets/css/style.css b/assets/css/style.css
new file mode 100644
index 0000000..8a06300
--- /dev/null
+++ b/assets/css/style.css
@@ -0,0 +1,249 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
+
+:root {
+  --bg: #282a36;
+  --current-line: #44475a;
+  --foreground: #f8f8f2;
+  --comment: #6272a4;
+  --cyan: #8be9fd;
+  --green: #50fa7b;
+  --orange: #ffb86c;
+  --pink: #ff79c6;
+  --purple: #bd93f9;
+  --red: #ff5555;
+  --yellow: #f1fa8c;
+  --radius: 25px;
+
+  --cactus-button-color: var(--comment);
+  --cactus-button-color--strong: var(--foreground);
+  --cactus-button-color--stronger: var(--foreground);
+  --cactus-error-color: var(--red);
+  --cactus-text-color: var(--foreground);
+  --cactus-text-color--soft: var(--foreground);
+  --cactus-border-color: var(--pink);
+}
+
+body {
+  margin: 1em;
+  background-image: url("/assets/media/background.jpg");
+  background-color: var(--bg);
+  image-rendering: pixelated;
+  font-family: "Montserrat", sans-serif;
+  color: var(--foreground);
+  text-align: center;
+  font-size: 1em;
+}
+
+.em {
+  color: var(--cyan);
+}
+
+p {
+  text-align: justify;
+}
+
+p#post-excerpt {
+  background-color: var(--current-line);
+  padding: 1em;
+  border-radius: var(--radius);
+}
+
+small {
+  font-size: small;
+}
+
+p,
+small {
+  margin-left: 0.5em;
+  margin-right: 0.5em;
+}
+
+.active {
+  font-weight: bolder;
+  border: 2px solid var(--bg);
+  background-color: var(--cyan);
+  padding: 0.1em;
+  padding-left: 0.2em;
+  padding-right: 0.2em;
+  border-radius: var(--radius);
+}
+
+.center {
+  text-align: center;
+}
+
+.right {
+  float: right;
+  margin-left: 1em;
+}
+
+.left-blog-index {
+  text-align: left;
+}
+
+.left {
+  float: left;
+  right: 1em;
+}
+
+.container {
+  padding: 1em;
+  max-width: 1000px;
+  display: inline-block;
+  border-radius: var(--radius);
+  border: 3px solid var(--green);
+  background-color: var(--bg);
+}
+
+.tiny-img {
+  height: 25%;
+  width: 25%;
+  border-radius: var(--radius);
+  border: 3px solid var(--cyan);
+}
+
+.small-img {
+  height: 40%;
+  width: 40%;
+  border-radius: var(--radius);
+  border: 3px solid var(--cyan);
+}
+
+.large-img {
+  height: 100%;
+  width: 100%;
+  border-radius: var(--radius);
+  border: 3px solid var(--cyan);
+}
+
+.rainbow {
+  background-image: linear-gradient(to left,
+      var(--red),
+      var(--pink),
+      var(--orange),
+      var(--yellow),
+      var(--green),
+      var(--cyan),
+      var(--purple),
+      var(--red));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+@font-face {
+  font-family: OpenSans;
+  src: url("/assets/fonts/OpenSans-Regular.ttf");
+}
+
+header,
+footer {
+  margin: inherit;
+  background-color: var(--current-line);
+  border-radius: var(--radius);
+  padding: 0.5em;
+}
+
+footer {
+  margin-top: 0.7em;
+}
+
+h1 {
+  color: var(--pink);
+}
+
+h2 {
+  color: var(--green);
+}
+
+h3 {
+  text-align: left;
+  color: var(--yellow);
+  margin-left: 0.5em;
+}
+
+nav {
+  margin: inherit;
+  background-color: var(--orange);
+  border-radius: inherit;
+  padding: inherit;
+}
+
+i {
+  color: var(--cyan);
+}
+
+#nav-menu {
+  margin: inherit;
+  background-color: var(--orange);
+  border-radius: inherit;
+  padding: inherit;
+}
+
+a {
+  color: var(--purple);
+  text-decoration: none;
+}
+
+nav a {
+  color: var(--bg);
+  text-decoration: none;
+}
+
+nav a:visited {
+  color: var(--bg);
+  text-decoration: none;
+}
+
+a:visited {
+  color: var(--purple);
+}
+
+div.scroller {
+  height: 16px;
+  margin: auto;
+  margin-bottom: 1em;
+  width: 75%;
+  border-radius: var(--radius);
+  border: 3px solid var(--cyan);
+}
+
+div.gifbuttons {
+  vertical-align: middle;
+}
+
+div.post-excerpt-index {
+  background-color: var(--current-line);
+  padding: 1em;
+  border-radius: var(--radius);
+}
+
+iframe.scroller {
+  width: 100%;
+  border-radius: var(--radius);
+}
+
+ol {
+  counter-reset: item;
+  text-align: left;
+}
+
+li {
+  text-align: left;
+  padding-bottom: 0.5em;
+  padding: 10px;
+  margin: 0;
+}
+
+hr {
+  color: var(--pink);
+}
+
+::-moz-selection {
+  color: var(--bg);
+  background: var(--pink);
+}
+
+::selection {
+  color: var(--bg);
+  background: var(--pink);
+}