This commit is contained in:
ZettaScript 2022-09-26 23:24:15 +02:00
parent f3f0841bb0
commit 9a6af1d0d1
No known key found for this signature in database
GPG Key ID: 3504BC6D362F7DCA
6 changed files with 194 additions and 134 deletions

View File

@ -29,38 +29,10 @@ html, body {
font-family: LunaSans; font-family: LunaSans;
} }
header { @import "header";
height: 48px; @import "footer";
max-width: 1100px; @import "services";
margin: 0 auto 16px auto; @import "process";
padding: 0 4px;
font-size: 24px;
}
#header-logo {
float: left;
height: 48px;
}
#header-menu ul {
float: right;
list-style-type: none;
margin: 9px 0 0 0;
}
#header-menu li {
display: inline-block;
margin: 0 8px;
}
#header-menu a {
padding: 8px 8px;
color: black;
}
#header-menu a:hover, #header-menu a:focus {
text-shadow: 1px 2px 1px #ac44ff;
}
main { main {
width: 100%; width: 100%;
@ -102,105 +74,3 @@ a, a:visited {
font-size: 300%; font-size: 300%;
font-family: Amatic; font-family: Amatic;
} }
.need_services {
margin-top: 16px;
display: flex;
align-items: stretch;
justify-content: center;
border-right: 32px solid #ac44ff;
}
.need_box {
flex: 38%;
font-family: Amatic;
font-size: 42px;
background: linear-gradient(0.25turn, #0294d9, #ac44ff);
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.service_boxes {
flex: 62%;
text-align: center;
font-family: LunaSans;
}
.service_box {
display: inline-block;
width: 144px;
padding-top: 4px;
vertical-align: top;
}
.service_box-img {
max-width: 128px;
max-height: 128px;
}
.service_box-img_wrap {
width: 128px;
height: 128px;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
}
.service_box-link, .service_box-link:visited {
color: #000;
text-decoration: none;
}
.service_box-link:hover, .service_box-link:focus {
text-shadow: 1px 2px 1px #ac44ff;
}
.service_box-title {
position: relative;
top: 8px;
display: inline-block;
padding-bottom: 14px;
font-size: 24px;
}
.process-title {
font-family: Amatic;
font-size: 42px;
background: linear-gradient(0.25turn, #0294d9, #ac44ff);
color: #fff;
}
.process_boxes {
flex: 62%;
text-align: center;
font-family: LunaSans;
}
.process_box {
display: inline-block;
width: 256px;
padding-top: 4px;
vertical-align: top;
}
.process_box-number {
display: inline-block;
width: 64px;
height: 64px;
font-size: 48px;
background: linear-gradient(-0.125turn, #0294d9, #ac44ff);
color: #fff;
border-radius: 32px;
}
.process_box-title {
position: relative;
top: 8px;
display: inline-block;
padding-bottom: 14px;
font-size: 32px;
}

29
sass/css/footer.scss Normal file
View File

@ -0,0 +1,29 @@
footer {
margin-top: 32px;
background: linear-gradient(0.25turn, #0294d9, #ac44ff);
color: #fff;
font-size: 18px;
}
.footer-wrapper {
display: flex;
max-width: 1100px;
padding: 16px 4px;
margin: auto;
}
.footer-pane {
flex: 1;
}
footer a {
color: #fdb;
}
footer a:hover, footer a:focus {
text-decoration: underline;
}
.footer-bigger {
font-size: 24px;
}

32
sass/css/header.scss Normal file
View File

@ -0,0 +1,32 @@
header {
height: 48px;
max-width: 1100px;
margin: 0 auto 16px auto;
padding: 0 4px;
font-size: 24px;
}
#header-logo {
float: left;
height: 48px;
}
#header-menu ul {
float: right;
list-style-type: none;
margin: 9px 0 0 0;
}
#header-menu li {
display: inline-block;
margin: 0 8px;
}
#header-menu a {
padding: 8px 8px;
color: black;
}
#header-menu a:hover, #header-menu a:focus {
text-shadow: 1px 2px 1px #ac44ff;
}

40
sass/css/process.scss Normal file
View File

@ -0,0 +1,40 @@
.process-title {
font-family: Amatic;
font-size: 42px;
background: linear-gradient(0.25turn, #0294d9, #ac44ff);
color: #fff;
margin-top: 16px;
margin-bottom: 16px;
}
.process_boxes {
flex: 62%;
text-align: center;
font-family: LunaSans;
}
.process_box {
display: inline-block;
width: 256px;
padding-top: 4px;
vertical-align: top;
margin: 8px 16px;
}
.process_box-number {
display: inline-block;
width: 64px;
height: 64px;
font-size: 48px;
background: linear-gradient(-0.125turn, #0294d9, #ac44ff);
color: #fff;
border-radius: 32px;
}
.process_box-title {
position: relative;
top: 8px;
display: inline-block;
padding-bottom: 14px;
font-size: 32px;
}

64
sass/css/services.scss Normal file
View File

@ -0,0 +1,64 @@
.need_services {
margin-top: 16px;
display: flex;
align-items: stretch;
justify-content: center;
border-right: 32px solid #ac44ff;
}
.need_box {
flex: 38%;
font-family: Amatic;
font-size: 42px;
background: linear-gradient(0.25turn, #0294d9, #ac44ff);
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.service_boxes {
flex: 62%;
text-align: center;
font-family: LunaSans;
}
.service_box {
display: inline-block;
width: 144px;
padding-top: 4px;
vertical-align: top;
margin: 0 4px;
}
.service_box-img {
max-width: 128px;
max-height: 128px;
}
.service_box-img_wrap {
width: 128px;
height: 128px;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
}
.service_box-link, .service_box-link:visited {
color: #000;
text-decoration: none;
}
.service_box-link:hover, .service_box-link:focus {
text-shadow: 1px 2px 1px #ac44ff;
}
.service_box-title {
position: relative;
top: 8px;
display: inline-block;
padding-bottom: 14px;
font-size: 24px;
}

View File

@ -29,5 +29,30 @@
</nav> </nav>
</header> </header>
{% block body %}{% endblock body %} {% block body %}{% endblock body %}
<footer>
<div class="footer-wrapper">
<div class="footer-pane">
<a href="/services" class="footer-bigger">Nos produits & services</a>
<ul>
<li><a href="/matériel">Installation matérielle</a></li>
<li><a href="/logiciel">Installation et configuration logicielles</a></li>
<li><a href="/formation">Formations</a></li>
</ul>
</div>
<div class="footer-pane">
<a href="/contact" class="footer-bigger">Contactez-nous</a>
<ul>
<li><a href="tel:+33782306653">07.82.30.66.53</a></li>
<li><a href="mailto:info@librezo.com">info@librezo.com</a></li>
</ul>
<a href="https://git.txmn.tk/tuxmain/librezo">Code source du site</a>
</div>
<div class="footer-pane">
<p>
Librezo propose une alternative aux services en ligne en favorisant l'auto-hébergement. Avec Debian 11 et ses solutions logicielles installées sur votre serveur, reprendre et garder le contrôle de vos données n'a jamais été aussi facile.
</p>
</div>
</div>
</footer>
</body> </body>
</html> </html>