Page MenuHomeDevCentral
Files F3768801

D1033.id2669.diff
No OneTemporary
Actions

D1033.id2669.diff
View Options

diff --git a/src/assets/js/app.js b/src/assets/js/app.js
--- a/src/assets/js/app.js
+++ b/src/assets/js/app.js
@@ -37,14 +37,42 @@
Foundation.Motion.animateIn($("#hero"), 'slide-in-down slow');
},
+ /**
+ * Gets reversed Flex direction.
+ *
+ * @param directionToToggle A valid flex-direction value
+ * @returns {*} The reversed Flex direction
+ */
+ toggleFlexDirection: function(directionToToggle) {
+ switch (directionToToggle) {
+ case '':
+ case 'row':
+ return 'row-reverse';
+
+ case 'row-reverse':
+ return 'row';
+
+ case 'column':
+ return 'column-reverse';
+
+ case 'column-reverse':
+ return 'column';
+
+ default:
+ console.log("Unknown Flex direction to toggle: " + directionToToggle);
+ return directionToToggle; // Stay as is
+ }
+ },
+
+ /**
+ * Reverses Flex direction for the specified grid element.
+ *
+ * @param selector The grid element
+ */
reverseFlexDirection: function(selector) {
var elem = $(selector);
var currentDirection = elem.css("flex-direction");
- if (currentDirection == "row-reverse") {
- elem.css("flex-direction", "row");
- } else {
- elem.css("flex-direction", "row-reverse");
- }
+ elem.css("flex-direction", this.toggleFlexDirection(currentDirection));
}
}
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
@@ -14,48 +14,86 @@
Table of contents
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+ :: Background
:: Split design
+ :: Smaller resolution design
:: Hero
:: Content
*/
/* -------------------------------------------------------------
- Split design
+ Background
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
body {
background-image: url(/assets/img/old-books.jpg);
background-size: cover;
+ background-repeat: no-repeat;
}
-.app {
- height: 100vh;
- width: 100vw;
+/* -------------------------------------------------------------
+ Split design
+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
+
+@media screen and (min-width: 1024px) {
+ .app {
+ height: 100vh;
+ width: 100vw;
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: row-reverse;
- display: flex;
- align-items: center;
- justify-content: center;
+ > div {
+ width: 50vw;
+ }
- flex-direction: row;
+ #hero {
+ padding: 5em;
- > div {
- width: 50vw;
+ h1 {
+ margin-bottom: 10vh;
+ }
+ }
+
+ #content {
+ height: 100vh;
+
+ padding: 20vh 5vw;
+ }
}
}
/* -------------------------------------------------------------
- Hero
+ Smaller resolution design
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
-#hero {
- padding: 5em;
+@media screen and (max-width: 1023px) {
+ .app {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
- text-align: center;
+ min-height: 100vh;
- h1 {
- margin-bottom: 10vh;
+ #hero {
+ padding: 5vh 1em;
+ }
+
+ #content {
+ padding: 5vh 2em;
+ }
}
+}
+
+/* -------------------------------------------------------------
+ Hero
+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
+
+#hero {
+ text-align: center;
.subheader {
color: hsla(12, 51%, 69%, 1);
@@ -69,9 +107,6 @@
#content {
background-color: rgba(148, 67, 46, 1);
- height: 100vh;
-
- padding: 20vh 5vw;
section {
margin-bottom: 10vh;
diff --git a/src/pages/index.html b/src/pages/index.html
--- a/src/pages/index.html
+++ b/src/pages/index.html
@@ -1,5 +1,11 @@
<div class="app">
+ <div id="hero">
+ <img src="assets/img/nasqueron-logo.png" alt="Nasqueron logo">
+ <h1>Nasqueron documentation</h1>
+ <h2 class="subheader">Learn how to use our software.</h2>
+ </div>
+
<div id="content">
<section id="menu">
<h2>Available docs</h2>
@@ -32,10 +38,4 @@
</section>
</div>
- <div id="hero">
- <img src="assets/img/nasqueron-logo.png" alt="Nasqueron logo">
- <h1>Nasqueron documentation</h1>
- <h2 class="subheader">Learn how to use our software.</h2>
- </div>
-
</div>

File Metadata

Mime Type
text/plain
Expires
Sun, Nov 24, 10:36 (20 h, 24 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2258111
Default Alt Text
D1033.id2669.diff (4 KB)

Event Timeline

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