From 3c87cee9e739d632e69e89d740e127666c8bffd6 Mon Sep 17 00:00:00 2001 From: Ad5001 Date: Thu, 15 Jul 2021 19:45:45 +0200 Subject: [PATCH] More CSS dividing, making footer buttons larger, adding new section on main page. --- assets/scss/common.scss | 123 +----------------- .../scss/components/{ => common}/button.scss | 4 + .../scss/components/{ => common}/columns.scss | 10 +- assets/scss/footer.scss | 5 +- layouts/main-index.html | 17 ++- layouts/partials/footer.html | 2 +- 6 files changed, 37 insertions(+), 124 deletions(-) rename assets/scss/components/{ => common}/button.scss (93%) rename assets/scss/components/{ => common}/columns.scss (92%) diff --git a/assets/scss/common.scss b/assets/scss/common.scss index 868d193..361fda5 100644 --- a/assets/scss/common.scss +++ b/assets/scss/common.scss @@ -16,8 +16,13 @@ * along with this program. If not, see . */ -@import "components/columns"; -@import "components/button"; +@import "components/common/button"; +@import "components/common/centering"; +@import "components/common/columns"; +@import "components/common/headers"; +@import "components/common/icon"; +@import "components/common/padding"; +@import "components/common/text"; body { font-family: 'Metropolis', 'Fira Sans','Ubuntu', 'Noto Sans', sans-serif; @@ -35,20 +40,6 @@ body { max-width: 75em; } -.padding-container { - padding: 1em; -} - -.padding-container-1 { - padding-left: 1em; - padding-right: 1em; -} - -.padding-container-3 { - padding-left: 3em; - padding-right: 3em; -} - hr { opacity: 0.5; } @@ -63,112 +54,12 @@ hr { --theme-color: var(--secondary-color); } -.text-white a[role=button]:not(.primary), a[role=button]:not(.primary).text-white { - color: white; -} - /* format */ .fill-width { width: 100%; } -.center { - margin-right: auto !important; - margin-left: auto !important; -} - -img.center { - display: block; - max-width: 100%; -} - -.vertical-center { - margin-top: auto !important; - margin-bottom: auto !important; - max-height: 100%; -} - -/* workaround for sometimes images don't position correctly vertically */ -.vertical-center-img { - margin: auto; - max-height: 100%; -} - -/* text and image formatting */ - -.text-left { - text-align: left; -} - -.text-center { - text-align: center; -} - -.text-right { - text-align: right; -} - -.text-white { - color: white; - - .icon-monochrome { - filter: invert(96%) sepia(0%) saturate(0%) hue-rotate(119deg) brightness(104%) contrast(104%); - } -} - -.icon-as-text { - width: 1em; - height: 1em; - margin-right: 0.4em; - vertical-align: middle; -} - -.icon-larger-text { - width: 1.4em; - height: 1.4em; - margin-right: 0.4em; - margin-top: -0.2em; - vertical-align: middle; -} - -.icon-larger2-text { - width: 1.6em; - height: 1.6em; - margin-right: 0.4em; - margin-top: -0.3em; - vertical-align: middle; -} - -.icon-twice-text { - width: 2em; - height: 2em; - margin-right: 0.4em; - margin-top: -0.5em; - vertical-align: middle; -} - -h1 { - font-size: xx-large; - font-family: var(--light-font); - &.larger { - font-size: xxx-large; - } -} - -h2 { - font-size: x-large; - font-family: var(--light-font); -} - -h3 { - font-family: var(--light-font); -} - -.text-content { - line-height: 1.5em; -} - .grid { display: flex; flex-wrap: wrap; diff --git a/assets/scss/components/button.scss b/assets/scss/components/common/button.scss similarity index 93% rename from assets/scss/components/button.scss rename to assets/scss/components/common/button.scss index 71fe042..cadac69 100644 --- a/assets/scss/components/button.scss +++ b/assets/scss/components/common/button.scss @@ -44,3 +44,7 @@ a[role=button] { &.primary { } } + +.text-white a[role=button]:not(.primary), a[role=button]:not(.primary).text-white { + color: white; +} diff --git a/assets/scss/components/columns.scss b/assets/scss/components/common/columns.scss similarity index 92% rename from assets/scss/components/columns.scss rename to assets/scss/components/common/columns.scss index 1757679..44745a1 100644 --- a/assets/scss/components/columns.scss +++ b/assets/scss/components/common/columns.scss @@ -57,11 +57,7 @@ width: 20%; } -@media screen and (max-width: 700px) { - .padding-container-3 { - padding-left: 0.5em; - padding-right: 0.5em; - } +@media screen and (max-width: 850px) { :not(footer) > .columns-container { display: block; @@ -70,6 +66,10 @@ .column { width: 100%; + &.padding-container { + width: calc(100% - 2em); + } + & :not(p).text-right, &.text-right :not(p), & :not(p).text-left, &.text-left :not(p) { text-align: center; } diff --git a/assets/scss/footer.scss b/assets/scss/footer.scss index b8c82ae..feeaf10 100644 --- a/assets/scss/footer.scss +++ b/assets/scss/footer.scss @@ -28,7 +28,10 @@ footer { .footer-social-list { display: flex; - font-size: 24px; + font-size: 30px; + a img { + margin: 0.3em; + } } @media screen and (max-width: 550px) { diff --git a/layouts/main-index.html b/layouts/main-index.html index 3b45b7f..8adf3b5 100644 --- a/layouts/main-index.html +++ b/layouts/main-index.html @@ -21,7 +21,7 @@ -
+

Software commitments

@@ -89,4 +89,19 @@
+
+

{{ .Params.NewSection.Title }}

+

+ {{ .Params.NewSection.Description | markdownify }} +

+
  + {{ range .Params.NewSection.Links }} + + {{ end }} +
+
{{ end }} diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 60bd60d..b0f26a9 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,7 +1,7 @@