commit 2f107849d8026f25c81a1a5c04bc3714c8a8d417
parent 9d31a4599838859ff8379bd57d74549a9e9b4543
Author: Hugo Soucy <hugo@soucy.cc>
Date: Sun, 6 Dec 2020 16:03:19 -0500
change the layout of the site
Diffstat:
5 files changed, 61 insertions(+), 41 deletions(-)
diff --git a/src/scss/modules/_header-banner.scss b/src/scss/modules/_header-banner.scss
@@ -1,8 +1,12 @@
// Header banner module
.header-banner {
- padding: 1rem;
+ align-items: center;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ padding: 0 1rem;
- & > * + * {
- margin-top: 1.5rem;
- }
+ // & > * + * {
+ // margin-top: 1.5rem;
+ // }
}
diff --git a/src/scss/modules/_layout.scss b/src/scss/modules/_layout.scss
@@ -1,20 +1,27 @@
// Layout module
+.layout {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ margin-left: auto;
+ margin-right: auto;
+ min-height: 100vh;
+ max-width: rem-calc(1140);
+}
+
.layout > * {
- display: flex;
- flex-wrap: wrap;
+ margin: 1rem 0;
}
-.layout__inner {
- height: 100%;
+.layout > main {
+ margin-bottom: auto;
+ margin-top: auto;
}
-.layout__aside {
- flex-basis: 15rem;
- flex-grow: 1;
+.layout > :first-child:not(h1) {
+ margin-top: 0;
}
-.layout__main {
- flex-basis: 0;
- flex-grow: 999;
- min-width: calc(75% - 1rem);
+.layout > :last-child:not(h1) {
+ margin-bottom: 0;
}
diff --git a/src/scss/modules/_logo.scss b/src/scss/modules/_logo.scss
@@ -3,5 +3,7 @@
color: var(--base-fg);
display: block;
font: 2rem serif;
+ margin-right: 1.5rem;
+ margin-top: 1.5rem;
text-decoration: none;
}
diff --git a/src/scss/modules/_nav.scss b/src/scss/modules/_nav.scss
@@ -1,8 +1,10 @@
// Navigation module
.nav {
+ margin-top: 1.5rem;
+
a {
display: block;
- padding: 0.25rem 0;
+ padding: 0.5rem;
&,
&:active {
@@ -14,5 +16,19 @@
&:hover {
text-decoration: underline;
}
+
+ :first-child > & {
+ padding-left: 0;
+ }
+ }
+
+ &__list {
+ align-items: center;
+ display: flex;
+ flex-wrap: wrap;
+ }
+
+ &__item {
+
}
}
diff --git a/templates/partials/base.html.twig b/templates/partials/base.html.twig
@@ -28,10 +28,10 @@
{% endblock %}
</head>
- <body id="t" class="layout {{ page.header.body_classes }}">
- <div class="layout__inner">
+ <body id="t" class="{{ page.header.body_classes }}">
+ <div class="layout">
{% block header %}
- <header class="header-banner layout__aside">
+ <header class="header-banner">
<a class="logo" href="{{ home_url }}" rel="index">
{{ config.site.title }}
</a>
@@ -41,29 +41,20 @@
</header>
{% endblock %}
- <div class="layout__main">
- {% block body %}
- <main class="main" id="c">
- {% block content %}{% endblock %}
- </main>
- {% endblock %}
-
- {% block footer %}
- <footer class="footer-banner">
- <p>
- <span>Copyright © <time>{{ now|date('Y') }}</time> Jacynthe Carrier.</span><br/>
- <span>Tous droits réservés.</span>
- </p>
+ {% block body %}
+ <main class="main" id="c">
+ {% block content %}{% endblock %}
+ </main>
+ {% endblock %}
- <dl>
- <dt>Contact</dt>
- <dd>
- <a href="info@jacynthecarrier.com">info@jacynthecarrier.com</a><br/>
- </dd>
- </dl>
- </footer>
- {% endblock %}
- </div>
+ {% block footer %}
+ <footer class="footer-banner">
+ <p>
+ <span>Copyright © <time>{{ now|date('Y') }}</time> Jacynthe Carrier.</span><br/>
+ <span>Tous droits réservés.</span>
+ </p>
+ </footer>
+ {% endblock %}
{% do assets.addJs('theme://js/index.js', {group: 'bottom'}) %}
