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

This commit is contained in:
Ad5001 2021-07-15 19:45:45 +02:00
parent 04cd0bc087
commit 3c87cee9e7
Signed by: Ad5001
GPG Key ID: EF45F9C6AFE20160
6 changed files with 37 additions and 124 deletions

View File

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

View File

@ -44,3 +44,7 @@ a[role=button] {
&.primary {
}
}
.text-white a[role=button]:not(.primary), a[role=button]:not(.primary).text-white {
color: white;
}

View File

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

View File

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

View File

@ -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 }}

View File

@ -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 }}