More CSS dividing, making footer buttons larger, adding new section on main page.

assets/scss/common.scss

@@ -16,8 +16,13 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-@import "components/columns";
+@import "components/common/button";
-@import "components/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;

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;
+}

assets/scss/components/common/columns.scss

@@ -57,11 +57,7 @@
     width: 20%;
 }
 
-@media screen and (max-width: 700px) {
+@media screen and (max-width: 850px) {
-    .padding-container-3 {
-        padding-left: 0.5em;
-        padding-right: 0.5em;
-    }
     
     :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;
         }

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) {

layouts/main-index.html

@@ -21,7 +21,7 @@
         </div>
     </div>
 </section>
-<section style="" class="section-skewed">
+<section class="section-skewed">
     <h1 class="text-center">Software commitments</h1>
     <div class="columns-container padding-container-3" >
         <div class="column col3 vertical-center padding-container">
@@ -89,4 +89,19 @@
         </div>
     </div>
 </section>
+<section class="padding-container-3">
+    <h1>{{ .Params.NewSection.Title }}</h1>
+    <p>
+    {{ .Params.NewSection.Description | markdownify }}
+    </p>
+    <div class="grid">&nbsp;
+        {{ range .Params.NewSection.Links }}
+        <div>
+            <a href="{{ .URL | safeURL }}" role="button" class="primary" title="{{ .Title }}">
+                <img src="/icons/{{ .Icon }}.svg" class="icon-as-text" alt="{{ .Icon }}">{{ .Title }}
+            </a>&nbsp;
+        </div>
+        {{ end }}
+    </div>
+</section>
 {{ end }}

layouts/partials/footer.html

@@ -1,7 +1,7 @@
 <footer>
     <br><br>
     <div class="columns-container">
-        <div class="col3 footer-social-list grid padding-container-1">
+        <div class="col3 footer-social-list grid padding-container-point3">
             {{ range .Site.Menus.social }}
                 <a role="button" alt="{{ .Name }}" title="{{ .Name }}" href={{ .URL }}>
                     {{ .Pre }}