diff --git a/exampleSite/content/posts/first_post.md b/exampleSite/content/posts/first_post.md index ab2c728..5ee12e9 100644 --- a/exampleSite/content/posts/first_post.md +++ b/exampleSite/content/posts/first_post.md @@ -23,6 +23,15 @@ Yo yo yo > And this is a really really really really really long blockquote which spans across multple lines +One importnant thing to keep in mind is that using multi-stage will not impact the build time of your container, the time difference between the build times is negligible + +| Language | Normal | Multi-Stage | +|-------|----------------|-------| +| Python | 274 MB | 84.5 MB | +| Golang | 829 MB | 15.3MB | + +Multi-stage builds are useful where space is a constraint, and whilst it is always better to build small concise containers, it is easy to get carried away trying to shave off a few megabytes. Even though they are great to use, they shouldn’t be abused, the effort should always spent be towards improving the workflow. + ```py # Codeblocks look like this diff --git a/themes/gokarna/static/css/dark.css b/themes/gokarna/static/css/dark.css index f01aa88..c23e5ac 100644 --- a/themes/gokarna/static/css/dark.css +++ b/themes/gokarna/static/css/dark.css @@ -1,47 +1,54 @@ -html { - background: #121212 !important; - color: white !important; +:root { + /* dark theme colors */ + --dark-bg-color: #121212; + --dark-text-color: white; + --dark-header-bg-color: #1f1f1f; + --dark-header-divider-color: #484848; } -a { - color: white; +html { + background-color: var(--dark-bg-color); + color: var(--dark-text-color); } .header { box-shadow: rgba(102, 102, 102, 0.5) 0px 1px 2px 0px; - background-color: #1f1f1f !important; - color: white !important; + background-color: var(--dark-header-bg-color); } .nav-links .nav-icons-divider { - color: #484848; -} - -.post-tags .post-tag { - border: 1px solid white; - color: white; + color: var(--dark-header-divider-color); } .post-tags .post-tag:hover { - background-color: white; - color: black; + background-color: var(--dark-text-color); + color: var(--dark-bg-color); } .tags-list .post-tags .post-tag a .tag-posts-count { - background-color: #1f1f1f; + background-color: var(--dark-header-bg-color); } .tags-list .post-tags .post-tag:hover a .tag-posts-count { - background-color: white; - color: black; + background-color: var(--dark-text-color); + color: var(--dark-bg-color); } .footer { - border-top-color: #333 !important; + border-top-color: var(--dark-header-bg-color); } blockquote { - border-left-color: #333 !important; + border-left-color: var(--dark-header-divider-color); +} + +table thead { + background-color: var(--dark-header-bg-color); +} + +table td, +table th { + border-bottom-color: var(--dark-header-divider-color); } /* TODO: Check if this is needed or not */ diff --git a/themes/gokarna/static/css/main.css b/themes/gokarna/static/css/main.css index 0553802..a83f5a8 100644 --- a/themes/gokarna/static/css/main.css +++ b/themes/gokarna/static/css/main.css @@ -1,11 +1,16 @@ :root { --accent-color: #ff4d4d; --content-width: 810px; + /* light theme colors */ + --light-bg-color: white; + --light-text-color: black; + --light-header-bg-color: #f0f0f0; + --light-header-divider-color: #dfdfdf; } html { - background: white; - color: black; + background-color: var(--light-bg-color); + color: var(--light-text-color); font-family: "Jost", sans-serif; font-weight: 400; letter-spacing: 0.5px; @@ -18,7 +23,7 @@ body { } a { - color: black; + color: inherit; } a:hover { @@ -26,20 +31,20 @@ a:hover { } main#content { - width: var(--content-width); margin: 90px auto 0; + width: var(--content-width); } img { - width: var(--content-width); height: auto; + width: var(--content-width); } /* HEADER */ .header { - background-color: rgb(240, 240, 240); + background-color: var(--light-header-bg-color); box-shadow: rgba(170, 170, 170, 0.5) 0px 1px 2px 0px; - color: black; + color: inherit; font-size: 1.05rem; height: 50px; left: 0; @@ -100,8 +105,8 @@ img { .nav-links .nav-icons-divider { border-color: inherit; border-left: 1.5px solid; + color: var(--light-header-divider-color); margin: 0 10px; - color: #dfdfdf; } .nav-links #dark-theme-toggle:hover { cursor: pointer; @@ -116,7 +121,7 @@ img { /* FOOTER */ .footer { bottom: 0; - border-top: 1px solid #eee; + border-top: 1px solid var(--light-header-bg-color); color: inherit; left: 0; overflow: hidden; @@ -152,16 +157,16 @@ img { padding: 0; } .post-tags .post-tag { - border: 1px solid black; + border: 1px solid; border-radius: 4px; box-sizing: border-box; - color: black; + color: inherit; display: inline-block; font-size: 14px; } .post-tags .post-tag:hover { - background-color: black; - color: white; + background-color: var(--light-text-color); + color: var(--light-bg-color); } .post-tag a { color: inherit; @@ -190,9 +195,29 @@ code { } blockquote { - border-left: 2px solid #e0e0e0; - padding-left: 1rem; + border-left: 2px solid var(--light-header-divider-color); color: grey; + padding-left: 1rem; +} + +table { + border-collapse: collapse; + font-size: 1.05rem; + margin: 30px 0; + text-align: left; +} + +table thead { + background-color: var(--light-header-bg-color); +} + +table td, +table th { + padding: 1.4rem; +} + +table td { + border-bottom: 1px solid var(--light-header-divider-color); } /* HOME PAGE */ @@ -232,11 +257,13 @@ blockquote { } /* SINGLE */ +main#content .post { + font-size: 1.2rem; +} .post .post-date { color: gray; } .post .post-content { - font-size: 1.2rem; line-height: 1.7; margin-top: 50px; } @@ -273,7 +300,6 @@ blockquote { border-radius: inherit; padding: 0; } - .tags-list .post-tags .post-tag a div { display: inline-block; }