Initial Upload

blog/blog-style.css

@@ -0,0 +1,198 @@
+#blog,
+#blog-post {
+  width: min(95%, 650px);
+  margin: auto;
+  font-family: "mono", monospace;
+  font-size: 14px;
+}
+
+#blog-post audio {
+  width: 100%;
+}
+
+.blog-link {
+  position: relative;
+  padding: 10px 15px;
+  margin-bottom: 15px;
+
+  background-color: var(--blog-box);
+  -webkit-transition: ease-in-out 100ms;
+  -o-transition: ease-in-out 100ms;
+  transition: ease-in-out 100ms;
+}
+
+.blog-link:hover {
+  -webkit-filter: drop-shadow(var(--max-dark) 5px 5px 5px);
+  filter: drop-shadow(var(--max-dark) 5px 5px 5px);
+}
+
+.blog-link h2,
+.blog-link h3,
+.blog-link h4 {
+  margin: 5px 0;
+  font-weight: bold;
+  text-shadow: var(--blog-box) 1px 1px 0;
+}
+
+.blog-link h2,
+.blog-link h3 {
+  width: calc(100% - 100px);
+}
+
+.blog-link h3 {
+  color: var(--accent-focus);
+}
+
+.blog-link h3::before {
+  padding-left: 15px;
+  content: "~ ";
+}
+
+.blog-link h4 {
+  position: absolute;
+  color: var(--load-light);
+  right: 15px;
+  top: 10px;
+}
+
+.blog-link #stars {
+  position: absolute;
+  right: 10px;
+  bottom: 7px;
+  opacity: 50%;
+
+  -webkit-transition: ease-in-out 200ms;
+
+  -o-transition: ease-in-out 200ms;
+
+  transition: ease-in-out 200ms;
+}
+
+.blog-link:hover #stars {
+  right: 12px;
+  bottom: 8px;
+  opacity: 80%;
+
+  -webkit-filter: drop-shadow(var(--accent) 2px 2px 0);
+
+  filter: drop-shadow(var(--accent) 2px 2px 0);
+}
+
+.blog-link #stars img {
+  width: 15px;
+  margin: 2px;
+}
+
+.music-related {
+  background-image: url(../res/asset-blog-music_post.png);
+  background-size: 120px;
+  background-position: right top;
+  background-repeat: no-repeat;
+}
+
+.poetry-related {
+  background-image: url(../res/asset-blog-poetry_post.png);
+  background-size: 120px;
+  background-position: right top;
+  background-repeat: no-repeat;
+}
+
+.thought-related {
+  background-image: url(../res/asset-blog-thought_post.png);
+  background-size: 120px;
+  background-position: right top;
+  background-repeat: no-repeat;
+}
+
+#blog-post {
+  text-align: justify;
+  text-justify: inter-word;
+  font-size: 18px;
+}
+
+#blog-post p {
+  padding: 0px 15px;
+  margin: 10px 0;
+}
+
+#blog-post ul {
+  width: 80%;
+  margin: auto;
+  list-style-type: ">/ ";
+  padding: 0;
+}
+
+#blog-post ul li {
+  padding: 4px 0;
+}
+
+#blog-post h1,
+#blog-post h2 {
+  vertical-align: middle;
+  width: 100%;
+  margin: auto;
+  text-align: center;
+}
+
+#blog-post h1 {
+  font-size: 25px;
+}
+
+#blog-post h2 {
+  font-size: 20px;
+}
+
+#blog-post h3 {
+  padding: 15px 0 0 40px;
+  margin: 0;
+}
+
+#blog-post h4 {
+  padding: 20px 0 0 0;
+  margin: 0;
+}
+
+.highlight {
+  background-color: var(--text-highlight);
+}
+
+#review-header {
+  position: relative;
+}
+
+#stars {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+#stars img {
+  height: 20px;
+  margin: 5px 3px;
+}
+
+#rating-out-of-five {
+  position: absolute;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+
+  height: 30px;
+  right: 25px;
+  padding: 0 !important;
+}
+
+#blog-footer {
+  font-family: "mono", monospace;
+  text-align: center;
+  padding: 15px;
+  font-size: 15px;
+
+  color: var(--load-light);
+}