diff --git a/assets/css/blog.css b/assets/css/blog.css
index c87d101..2b24cb8 100644
--- a/assets/css/blog.css
+++ b/assets/css/blog.css
@@ -4,16 +4,36 @@
appearance: none;
}
+.content-wrapper {
+ grid-area: primary;
+}
+#entry-wrapper {
+ grid-area: secundary;
+}
+header {
+ grid-area: sidebar;
+}
+footer {
+ grid-area: footer;
+}
+
+body {
+ display: grid;
+ grid-template-columns: 22vw auto auto;
+ grid-template-rows: auto;
+ grid-template-areas:
+ "sidebar . primary"
+ "sidebar . secundary"
+ "sidebar footer footer";
+ column-gap: 1.33rem;
+}
+
header {
position: fixed;
-
- background-color: #201E1F;
-
- width: 22vw;
- height: 100vh;
-
+ width: max-content;
+ height: 100%;
+ background-color: #201e1f;
top: 0;
-
-webkit-box-shadow: 2px 5px 16px 0px rgba(34, 30, 34, 0.4),
17px 26px 15px 0px rgba(0, 0, 0, 0);
box-shadow: 2px 5px 16px 0px rgba(34, 30, 34, 0.4),
@@ -35,11 +55,11 @@ header .menu-list {
.header-main {
margin: 0.666em;
- border-radius: 3px 0.666em 0.666em 3px;
+ border-radius: 2px 0.333em 0.333em 2px;
font-size: 1.802rem;
background: #a22430;
padding: 6px 12px;
- width: 100%;
+ width: min-content, auto;
color: #f6f4f6;
-webkit-box-shadow: 2px 5px 16px 0px rgba(34, 30, 34, 0.4),
17px 26px 15px 0px rgba(0, 0, 0, 0);
@@ -72,37 +92,41 @@ header .menu-list {
font-weight: bolder;
}
-.content-wrapper,
-#template-wrapper {
- display: flex;
- flex-direction: column;
- margin-left: 22vw;
- padding: 1.802rem 11vw;
- margin-right: auto;
+.content-wrapper {
+ /* Trust me */
+ padding: 2.11rem 22vw 11vw 2.11rem;
+ height: max-content;
}
-#template-wrapper:first-of-type {
- padding-top: 1rem;
+
+/* Distancing itself from main content */
+#entry-wrapper:first-of-type {
+ padding-top: 0.666rem;
}
-#template-wrapper:last-of-type {
- padding-bottom: 1rem;
-}
-.template-unit {
+
+/* This is an individual section */
+.entry-unit {
padding-top: 1rem;
border-top: 2px solid #221e2233;
}
-.template-unit h3 {
+
+/* This is an individual section */
+.entry-unit h3 {
margin-top: 0 !important;
}
-.template-unit:nth-of-type(n + 2) {
+
+.entry-unit:nth-of-type(n + 2) {
margin-top: 2rem !important;
}
-.template-unit ul :last-child {
+
+.entry-unit ul :last-child {
margin-bottom: unset;
}
-.template-unit ul + p {
+
+.entry-unit ul + p {
margin-top: 1rem;
}
-.template-unit img {
+
+.entry-unit img {
display: block;
max-width: 800px;
max-height: 400px;
@@ -110,9 +134,11 @@ header .menu-list {
height: auto;
margin-top: 5px;
}
+
.allposts_header + ul :last-child {
margin-bottom: 1rem;
}
+
.subtitle {
margin-bottom: 2rem;
}
@@ -144,20 +170,23 @@ pre {
}
s:after {
- font-size: 0.66em;
- content: '\2713';
- background: #3f3b3b;
+ font-size: 1em;
+ content: "\2713";
padding: 0 4px;
border-radius: 3px;
margin-left: 4px;
- color: limegreen;
+ color: #201e1f;
}
footer {
padding: 1rem;
- background-color: #201E1F;
+ background: #201e1f;
color: #e9eaed;
- margin-left: 22vw;
+ position: fixed;
+ width: 100%;
+ bottom: 0;
+ grid-column-start: sidebar-start;
+ height: max-content;
}
footer a {
@@ -166,26 +195,42 @@ footer a {
color: #e9eaed;
}
+.content-wrapper img {
+ max-width: 100%;
+}
+
@media screen and (max-width: 767px) {
+ body {
+ display: grid;
+ grid-template-columns: 100%;
+ grid-template-rows: auto;
+ grid-template-areas:
+ "sidebar"
+ "primary"
+ "secundary"
+ "footer";
+ }
+
header {
box-sizing: border-box;
position: relative;
-
- background-color: #201E1F;
-
+ background-color: #201e1f;
width: 100vw;
height: max-content;
padding-bottom: 1rem;
+ margin-bottom: 0;
}
- .header-main {
- margin: 0;
+
+ header a {
+ display: inline-block;
}
+
+ header .menu-list {
+ margin-top: 0;
+ }
+
.content-wrapper,
- #template-wrapper {
- margin-left: 0;
- padding: 1rem 2rem;
- }
- footer {
- margin-left: 0;
+ #entry-wrapper {
+ padding: 1rem;
}
}
diff --git a/v3/all_tags.html b/v3/all_tags.html
index 3ac1e7a..fda110d 100644
--- a/v3/all_tags.html
+++ b/v3/all_tags.html
@@ -27,8 +27,8 @@
-
+
+
All tags
@@ -36,6 +36,6 @@