More CSS dividing, making footer buttons larger, adding new section on main page.
This commit is contained in:
parent
04cd0bc087
commit
3c87cee9e7
GPG key ID:
EF45F9C6AFE20160
6 changed files with 37 additions and 124 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -44,3 +44,7 @@ a[role=button] {
|
|||
&.primary {
|
||||
}
|
||||
}
|
||||
|
||||
.text-white a[role=button]:not(.primary), a[role=button]:not(.primary).text-white {
|
||||
color: white;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
{{ 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>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -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 }}
|
||||
|
|
|
|||
Loading…
Reference in a new issue