Page MenuHomeDevCentral
Files F3779542

D546.diff
No OneTemporary
Actions

D546.diff
View Options

diff --git a/src/assets/scss/app.scss b/src/assets/scss/app.scss
--- a/src/assets/scss/app.scss
+++ b/src/assets/scss/app.scss
@@ -81,3 +81,4 @@
@import 'components/book';
@import 'components/footer';
@import 'components/layout';
+@import 'components/actions';
diff --git a/src/assets/scss/components/_layout.scss b/src/assets/scss/components/_actions.scss
copy from src/assets/scss/components/_layout.scss
copy to src/assets/scss/components/_actions.scss
--- a/src/assets/scss/components/_layout.scss
+++ b/src/assets/scss/components/_actions.scss
@@ -11,41 +11,9 @@
------------------------------------------------------------- */
/* -------------------------------------------------------------
- Table of contents
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- :: Header
- :: Content
- :: Headings
-
-*/
-
-/* -------------------------------------------------------------
- Header
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
-
-header {
- padding-top: 10em;
- padding-bottom: 2em;
- margin-bottom: 8em;
-
- background-color: rgba(255, 255, 255, 0.05);
- color: whitesmoke;
-}
-
-header h1 {
- color: antiquewhite;
-}
-
-/* -------------------------------------------------------------
- Content
+ General padding
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
-.darken {
- background-color: rgba(0, 0, 0, 0.85);
- color: ghostwhite;
-}
-
#actions {
padding-top: 3em;
}
@@ -56,7 +24,7 @@
}
/* -------------------------------------------------------------
- Headings
+ Icons
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
#actions i {
@@ -64,6 +32,35 @@
font-size: 128px;
}
-h3 {
- color: antiquewhite;
+/* -------------------------------------------------------------
+ < 640 px
+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
+
+@include breakpoint(small down) {
+ #actions {
+ h3 {
+ text-align: center;
+ font-size: 1.4rem;
+ }
+
+ .button {
+ display: block;
+ }
+ }
+}
+
+/* -------------------------------------------------------------
+ < 1024 px
+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
+
+@include breakpoint(medium down) {
+ #actions {
+ h3 {
+ margin-bottom: 2rem;
+ }
+
+ .button {
+ margin-top: 2rem;
+ }
+ }
}
diff --git a/src/assets/scss/components/_blockgrid.scss b/src/assets/scss/components/_blockgrid.scss
--- a/src/assets/scss/components/_blockgrid.scss
+++ b/src/assets/scss/components/_blockgrid.scss
@@ -15,7 +15,7 @@
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.blockgrid img {
- margin-top: 1em;
+ margin: 1rem 0;
}
.black-margin {
diff --git a/src/assets/scss/components/_footer.scss b/src/assets/scss/components/_footer.scss
--- a/src/assets/scss/components/_footer.scss
+++ b/src/assets/scss/components/_footer.scss
@@ -34,20 +34,8 @@
list-style: none;
font-weight: bold;
color: #ffffff;
- padding: 3rem 0 2rem;
margin: 0;
-
- &::after {
- content: "•";
- padding: 0 0.4rem 0 0.8rem;
- }
-
- &:last-child::after {
- content: "";
- padding: 0 0.4rem 0 0.8rem;
- }
}
-
}
.service-name {
@@ -59,3 +47,52 @@
font-size: 0.75rem;
margin: 3em 0 0 0;
}
+
+/* -------------------------------------------------------------
+ < 640 px
+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
+
+@include breakpoint(small down) {
+ footer {
+ h3 {
+ font-size: 1.4rem;
+ }
+
+ .links {
+ font-size: 1rem;
+ }
+
+ .links a {
+ display: block;
+ }
+ }
+
+ .footer-extra-info {
+ br {
+ display: block;
+ margin: 0.2rem 0;
+ }
+ }
+}
+
+/* -------------------------------------------------------------
+ >= 640 px
+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
+
+@include breakpoint(medium) {
+ footer {
+ .links a {
+ padding: 3rem 0 2rem;
+
+ &::after {
+ content: "•";
+ padding: 0 0.4rem 0 0.8rem;
+ }
+
+ &:last-child::after {
+ content: "";
+ padding: 0 0.4rem 0 0.8rem;
+ }
+ }
+ }
+}
diff --git a/src/assets/scss/components/_layout.scss b/src/assets/scss/components/_layout.scss
--- a/src/assets/scss/components/_layout.scss
+++ b/src/assets/scss/components/_layout.scss
@@ -46,24 +46,10 @@
color: ghostwhite;
}
-#actions {
- padding-top: 3em;
-}
-
-#actions .row {
- padding-top: 1em;
- padding-bottom: 4em;
-}
-
/* -------------------------------------------------------------
Headings
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
-#actions i {
- color: #5e191c;
- font-size: 128px;
-}
-
h3 {
color: antiquewhite;
}
diff --git a/src/pages/index.html b/src/pages/index.html
--- a/src/pages/index.html
+++ b/src/pages/index.html
@@ -10,7 +10,7 @@
<div class="darken">
<section id="actions">
<div class="row">
- <div class="large-3 large-offset-1 columns">
+ <div class="large-3 large-offset-1 text-center large-text-left columns">
<i class="fi-book huge"></i>
</div>
<div class="large-8 columns">
@@ -25,7 +25,7 @@
</div>
<div class="row">
- <div class="large-3 large-offset-1 columns">
+ <div class="large-3 large-offset-1 text-center large-text-left columns">
<i class="fi-torsos-female-male huge"></i>
</div>
<div class="large-8 columns">
@@ -41,20 +41,19 @@
</div>
<div class="row">
- <div class="large-3 large-offset-1 columns">
+ <div class="large-3 large-offset-1 text-center large-text-left columns">
<i class="fi-mountains huge"></i>
</div>
<div class="large-8 columns">
<h3>Add a channel</h3>
- <p>Explain your needs and we'll offer you a solution.</p>
- <p>We create <em>sur mesure</em> code for each community.</p>
- <p>As it's already connected to a job queue, a RabbitMQ broker<br />and a MySQL database, pretty anything is possible.</p>
+ <p>Explain your needs and we'll offer you a solution. We create <em>sur mesure</em> code for each community.</p>
+ <p>As it's already connected to a job queue, a RabbitMQ broker and a MySQL database, pretty anything is possible.</p>
<a href="https://devcentral.nasqueron.org/maniphest/task/edit/form/1/?tags=d%C3%A6ghrefn&subscribers=Dereckson&title=Add%20D%C3%A6ghrefn%20to%20%3Cwrite%20here%20the%20channel%20name%3E&description=[Write%20here%20what%20problems%20you%20want%20the%20bot%20to%20solve.]" class="button round">Request new channel</a>
</div>
</div>
<div class="row">
- <div class="large-3 large-offset-1 columns">
+ <div class="large-3 large-offset-1 text-center large-text-left columns">
<i class="fi-trees huge"></i>
</div>
<div class="large-8 columns">

File Metadata

Mime Type
text/plain
Expires
Tue, Nov 26, 08:41 (22 h, 11 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2264390
Default Alt Text
D546.diff (7 KB)

Event Timeline

Nasqueron DevCentral · If it had been much bigger the moon would have had a core of ice. · Powered by Phabricator