diff --git a/build.js b/build.js index b87d26196f1c40d43b7e3be2b6e66d59a3daf457..f0b0f8bb75f3a6624c7090e4504bf80a561eaeb6 100644 --- a/build.js +++ b/build.js @@ -3,7 +3,7 @@ "use strict"; const build_conf = { - protected_dirs: ["assets", "style", "news-articles", "game-articles", "software-articles", "articles"], + protected_dirs: ["assets", "style", "articles"], }; const fs = require("fs"); diff --git a/config.js b/config.js index a6423fa2f24afeae10c9c5af524399476cd735b9..5b5dc12c10a3c2ce0e72e4cb549d68d6cdf41f2f 100644 --- a/config.js +++ b/config.js @@ -1,6 +1,10 @@ -module.exports = { - server_url: `${location.origin}${ +function getServerUrl() { + return `${location.origin}${ location.origin.charAt(location.origin.length - 1) !== "/" ? "/" : "" - }`, - in_construction: false, + }`; +} + +module.exports = { + getServerUrl, + website_title: "Kuadrado website template", }; diff --git a/constants.js b/constants.js index 6d0ce287a31b694e43c646747957d3e09213b56c..67897a28ca2a0e0c1d3d652b18b9cb1c56a47b26 100644 --- a/constants.js +++ b/constants.js @@ -1,6 +1,6 @@ -const { server_url } = require("./config"); +const { getServerUrl } = require("./config"); module.exports = { - images_url: `${server_url}assets/images`, - articles_url: `${server_url}articles/`, + images_url: `${getServerUrl()}assets/images`, + articles_url: `${getServerUrl()}articles/`, }; diff --git a/public/education/education.js b/public/education/education.js index bca1f48a0dd54d2b43c46b62b71d376dab204f27..d576f8bcf83cbde2c2ceb69037563a7ceca9fd12 100644 --- a/public/education/education.js +++ b/public/education/education.js @@ -1,17 +1,21 @@ (function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){ -module.exports = { - server_url: `${location.origin}${ +function getServerUrl() { + return `${location.origin}${ location.origin.charAt(location.origin.length - 1) !== "/" ? "/" : "" - }`, - in_construction: false, + }`; +} + +module.exports = { + getServerUrl, + website_title: "Kuadrado website template", }; },{}],2:[function(require,module,exports){ -const { server_url } = require("./config"); +const { getServerUrl } = require("./config"); module.exports = { - images_url: `${server_url}assets/images`, - articles_url: `${server_url}articles/`, + images_url: `${getServerUrl()}assets/images`, + articles_url: `${getServerUrl()}articles/`, }; },{"./config":1}],3:[function(require,module,exports){ @@ -103,6 +107,16 @@ module.exports = { },{}],4:[function(require,module,exports){ "use strict"; +class WebPage { + constructor(args) { + Object.assign(this, args); + } +} + +module.exports = WebPage; +},{}],5:[function(require,module,exports){ +"use strict"; + const { images_url } = require("../../../../constants"); const GAMEDEV_THEMES = [ @@ -453,7 +467,7 @@ class GameStudioClub { module.exports = GameStudioClub; -},{"../../../../constants":2}],5:[function(require,module,exports){ +},{"../../../../constants":2}],6:[function(require,module,exports){ "use strict"; const { images_url } = require("../../../../constants"); @@ -626,17 +640,15 @@ class Popularization { module.exports = Popularization; -},{"../../../../constants":2}],6:[function(require,module,exports){ +},{"../../../../constants":2}],7:[function(require,module,exports){ "use strict"; const { images_url } = require("../../../constants"); +const WebPage = require("../../lib/web-page"); const GameStudioClub = require("./components/game-studio-club"); const Popularization = require("./components/popularization"); -class EducationPage { - constructor(args) { - Object.assign(this, args); - } +class EducationPage extends WebPage { render() { return { @@ -680,7 +692,7 @@ class EducationPage { module.exports = EducationPage; -},{"../../../constants":2,"./components/game-studio-club":4,"./components/popularization":5}],7:[function(require,module,exports){ +},{"../../../constants":2,"../../lib/web-page":4,"./components/game-studio-club":5,"./components/popularization":6}],8:[function(require,module,exports){ "use strict"; "use strict"; @@ -688,7 +700,7 @@ const runPage = require("../../run-page"); const EducationPage = require("./education"); runPage(EducationPage); -},{"../../run-page":8,"./education":6}],8:[function(require,module,exports){ +},{"../../run-page":9,"./education":7}],9:[function(require,module,exports){ "use strict"; const objectHtmlRenderer = require("./lib/object-html-renderer"); @@ -700,7 +712,7 @@ module.exports = function runPage(PageComponent) { objectHtmlRenderer.renderCycle(); }; -},{"./lib/object-html-renderer":3,"./template/template":10}],9:[function(require,module,exports){ +},{"./lib/object-html-renderer":3,"./template/template":11}],10:[function(require,module,exports){ "use strict"; const { images_url } = require("../../../constants"); @@ -811,7 +823,7 @@ class NavBar { module.exports = NavBar; -},{"../../../constants":2}],10:[function(require,module,exports){ +},{"../../../constants":2}],11:[function(require,module,exports){ "use strict"; const { in_construction } = require("../../config"); @@ -885,4 +897,4 @@ class Template { module.exports = Template; -},{"../../config":1,"../../constants":2,"./components/navbar":9}]},{},[7]); +},{"../../config":1,"../../constants":2,"./components/navbar":10}]},{},[8]); diff --git a/public/games/games.js b/public/games/games.js index 50a7e1566ca6bab66711f62c2635dbcdfff5080b..129e319ac9b8b6570dd680612ac5ea71c9439f69 100644 --- a/public/games/games.js +++ b/public/games/games.js @@ -1,17 +1,21 @@ (function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){ -module.exports = { - server_url: `${location.origin}${ +function getServerUrl() { + return `${location.origin}${ location.origin.charAt(location.origin.length - 1) !== "/" ? "/" : "" - }`, - in_construction: false, + }`; +} + +module.exports = { + getServerUrl, + website_title: "Kuadrado website template", }; },{}],2:[function(require,module,exports){ -const { server_url } = require("./config"); +const { getServerUrl } = require("./config"); module.exports = { - images_url: `${server_url}assets/images`, - articles_url: `${server_url}articles/`, + images_url: `${getServerUrl()}assets/images`, + articles_url: `${getServerUrl()}articles/`, }; },{"./config":1}],3:[function(require,module,exports){ @@ -271,6 +275,16 @@ module.exports = { },{}],7:[function(require,module,exports){ "use strict"; +class WebPage { + constructor(args) { + Object.assign(this, args); + } +} + +module.exports = WebPage; +},{}],8:[function(require,module,exports){ +"use strict"; + const ImageCarousel = require("../../../generic-components/image-carousel"); const { getArticleBody, getArticleStatus } = require("../../../lib/article-utils"); @@ -392,7 +406,7 @@ class GameArticle { module.exports = GameArticle; -},{"../../../generic-components/image-carousel":3,"../../../lib/article-utils":4}],8:[function(require,module,exports){ +},{"../../../generic-components/image-carousel":3,"../../../lib/article-utils":4}],9:[function(require,module,exports){ "use strict"; const { articles_url } = require("../../../../constants"); @@ -460,17 +474,14 @@ class GameArticles { module.exports = GameArticles; -},{"../../../../constants":2,"../../../lib/article-utils":4,"../../../lib/object-html-renderer":6,"./game-article":7}],9:[function(require,module,exports){ +},{"../../../../constants":2,"../../../lib/article-utils":4,"../../../lib/object-html-renderer":6,"./game-article":8}],10:[function(require,module,exports){ "use strict"; const { images_url } = require("../../../constants"); +const WebPage = require("../../lib/web-page"); const GameArticles = require("./components/game-articles"); -class GamesPage { - constructor(args) { - Object.assign(this, args); - } - +class GamesPage extends WebPage { render() { return { tag: "div", @@ -513,7 +524,7 @@ class GamesPage { module.exports = GamesPage; -},{"../../../constants":2,"./components/game-articles":8}],10:[function(require,module,exports){ +},{"../../../constants":2,"../../lib/web-page":7,"./components/game-articles":9}],11:[function(require,module,exports){ "use strict"; "use strict"; @@ -521,7 +532,7 @@ const runPage = require("../../run-page"); const GamesPage = require("./games"); runPage(GamesPage); -},{"../../run-page":11,"./games":9}],11:[function(require,module,exports){ +},{"../../run-page":12,"./games":10}],12:[function(require,module,exports){ "use strict"; const objectHtmlRenderer = require("./lib/object-html-renderer"); @@ -533,7 +544,7 @@ module.exports = function runPage(PageComponent) { objectHtmlRenderer.renderCycle(); }; -},{"./lib/object-html-renderer":6,"./template/template":13}],12:[function(require,module,exports){ +},{"./lib/object-html-renderer":6,"./template/template":14}],13:[function(require,module,exports){ "use strict"; const { images_url } = require("../../../constants"); @@ -644,7 +655,7 @@ class NavBar { module.exports = NavBar; -},{"../../../constants":2}],13:[function(require,module,exports){ +},{"../../../constants":2}],14:[function(require,module,exports){ "use strict"; const { in_construction } = require("../../config"); @@ -718,4 +729,4 @@ class Template { module.exports = Template; -},{"../../config":1,"../../constants":2,"./components/navbar":12}]},{},[10]); +},{"../../config":1,"../../constants":2,"./components/navbar":13}]},{},[11]); diff --git a/public/main.js b/public/main.js index 87e129abd86c3f90ee22af952cc2f354a2c969ba..0f9c7eab93ed72147b41bd95739232147f2c43d8 100644 --- a/public/main.js +++ b/public/main.js @@ -1,17 +1,21 @@ (function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){ -module.exports = { - server_url: `${location.origin}${ +function getServerUrl() { + return `${location.origin}${ location.origin.charAt(location.origin.length - 1) !== "/" ? "/" : "" - }`, - in_construction: false, + }`; +} + +module.exports = { + getServerUrl, + website_title: "Kuadrado website template", }; },{}],2:[function(require,module,exports){ -const { server_url } = require("./config"); +const { getServerUrl } = require("./config"); module.exports = { - images_url: `${server_url}assets/images`, - articles_url: `${server_url}articles/`, + images_url: `${getServerUrl()}assets/images`, + articles_url: `${getServerUrl()}articles/`, }; },{"./config":1}],3:[function(require,module,exports){ diff --git a/public/software-development/software-development.js b/public/software-development/software-development.js index 56856fefe2ccab22866abf962f0fe0a642e1fc08..4fc93d9472ebd5a1878901bd8fb0faf3c5fa00ef 100644 --- a/public/software-development/software-development.js +++ b/public/software-development/software-development.js @@ -1,17 +1,21 @@ (function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){ -module.exports = { - server_url: `${location.origin}${ +function getServerUrl() { + return `${location.origin}${ location.origin.charAt(location.origin.length - 1) !== "/" ? "/" : "" - }`, - in_construction: false, + }`; +} + +module.exports = { + getServerUrl, + website_title: "Kuadrado website template", }; },{}],2:[function(require,module,exports){ -const { server_url } = require("./config"); +const { getServerUrl } = require("./config"); module.exports = { - images_url: `${server_url}assets/images`, - articles_url: `${server_url}articles/`, + images_url: `${getServerUrl()}assets/images`, + articles_url: `${getServerUrl()}articles/`, }; },{"./config":1}],3:[function(require,module,exports){ @@ -271,6 +275,16 @@ module.exports = { },{}],7:[function(require,module,exports){ "use strict"; +class WebPage { + constructor(args) { + Object.assign(this, args); + } +} + +module.exports = WebPage; +},{}],8:[function(require,module,exports){ +"use strict"; + const { articles_url } = require("../../../../constants"); const ImageCarousel = require("../../../generic-components/image-carousel"); const { loadArticles, getArticleBody, getArticleDate, getArticleStatus } = require("../../../lib/article-utils"); @@ -328,14 +342,16 @@ class SoftwareArticle { contents: "Details", }, { - tag: "table", + tag: "ul", + class: "technical-details", contents: [ { - tag: "tr", + tag: "li", + class: "detail", contents: [ - { tag: "td", contents: "Stack" }, + { tag: "label", contents: "Stack" }, { - tag: "td", + tag: "div", contents: [ { tag: "ul", @@ -348,36 +364,35 @@ class SoftwareArticle { ], }, { - tag: "tr", + tag: "li", + class: "detail", contents: [ - { tag: "td", contents: "Version actuelle" }, + { tag: "label", contents: "Version actuelle" }, { - tag: "td", + tag: "div", contents: technical.version, }, ], }, { - tag: "tr", + tag: "li", + class: "detail", contents: [ - { tag: "td", contents: "License" }, - { tag: "td", contents: technical.license }, + { tag: "label", contents: "License" }, + { tag: "div", contents: technical.license }, ], }, { - tag: "tr", + tag: "li", + class: "detail", contents: [ - { tag: "td", contents: "Dépôt code source" }, - { - tag: "td", - contents: [ - { - tag: "a", - href: technical.repository, - contents: technical.repository, - }, - ], - }, + { tag: "label", contents: [ + { + tag: "a", + href: technical.repository, + contents: "Dépôt code source" + } + ] }, ], }, ], @@ -438,17 +453,14 @@ class SoftwareArticles { module.exports = SoftwareArticles; -},{"../../../../constants":2,"../../../generic-components/image-carousel":3,"../../../lib/article-utils":4,"../../../lib/object-html-renderer":6}],8:[function(require,module,exports){ +},{"../../../../constants":2,"../../../generic-components/image-carousel":3,"../../../lib/article-utils":4,"../../../lib/object-html-renderer":6}],9:[function(require,module,exports){ "use strict"; const { images_url } = require("../../../constants"); +const WebPage = require("../../lib/web-page"); const SoftwareArticles = require("./components/software-articles"); -class SoftwareDevelopment { - constructor(args) { - Object.assign(this, args); - } - +class SoftwareDevelopment extends WebPage { render() { return { tag: "div", @@ -490,7 +502,7 @@ class SoftwareDevelopment { module.exports = SoftwareDevelopment; -},{"../../../constants":2,"./components/software-articles":7}],9:[function(require,module,exports){ +},{"../../../constants":2,"../../lib/web-page":7,"./components/software-articles":8}],10:[function(require,module,exports){ "use strict"; "use strict"; @@ -498,7 +510,7 @@ const runPage = require("../../run-page"); const SoftwareDevelopment = require("./software-development"); runPage(SoftwareDevelopment); -},{"../../run-page":10,"./software-development":8}],10:[function(require,module,exports){ +},{"../../run-page":11,"./software-development":9}],11:[function(require,module,exports){ "use strict"; const objectHtmlRenderer = require("./lib/object-html-renderer"); @@ -510,7 +522,7 @@ module.exports = function runPage(PageComponent) { objectHtmlRenderer.renderCycle(); }; -},{"./lib/object-html-renderer":6,"./template/template":12}],11:[function(require,module,exports){ +},{"./lib/object-html-renderer":6,"./template/template":13}],12:[function(require,module,exports){ "use strict"; const { images_url } = require("../../../constants"); @@ -621,7 +633,7 @@ class NavBar { module.exports = NavBar; -},{"../../../constants":2}],12:[function(require,module,exports){ +},{"../../../constants":2}],13:[function(require,module,exports){ "use strict"; const { in_construction } = require("../../config"); @@ -695,4 +707,4 @@ class Template { module.exports = Template; -},{"../../config":1,"../../constants":2,"./components/navbar":11}]},{},[9]); +},{"../../config":1,"../../constants":2,"./components/navbar":12}]},{},[10]); diff --git a/public/style/style.css b/public/style/style.css index 01bc0b75867b27e72ef0f26e0e23516f62e22a15..909180c424685507d5960d6a36aa74588541ee98 100644 --- a/public/style/style.css +++ b/public/style/style.css @@ -1048,26 +1048,28 @@ main #page-container #software-page .software-articles article.software-article font-size: 20px; font-style: italic; } -main #page-container #software-page .software-articles article.software-article .software-technical table { - border-collapse: collapse; - margin: 10px 20px; +main #page-container #software-page .software-articles article.software-article .software-technical ul.technical-details { + margin: 10px; } -main #page-container #software-page .software-articles article.software-article .software-technical table tr td { - border: 1px solid #6b7880; - color: #d4d9dd; - padding: 10px 20px; +main #page-container #software-page .software-articles article.software-article .software-technical ul.technical-details .detail { + display: grid; + grid-template-columns: 1fr auto; + padding: 10px 0; } -main #page-container #software-page .software-articles article.software-article .software-technical table tr td *:not(a) { - color: #d4d9dd; +main #page-container #software-page .software-articles article.software-article .software-technical ul.technical-details .detail:not(:first-child) { + border-top: 1px solid #6b7880; } -main #page-container #software-page .software-articles article.software-article .software-technical table tr td:first-child { +main #page-container #software-page .software-articles article.software-article .software-technical ul.technical-details .detail label { font-weight: bold; } -main #page-container #software-page .software-articles article.software-article .software-technical table tr td:last-child ul { +main #page-container #software-page .software-articles article.software-article .software-technical ul.technical-details .detail ul { display: flex; flex-wrap: wrap; gap: 10px; } +main #page-container #software-page .software-articles article.software-article .software-technical ul.technical-details .detail *:not(a) { + color: #d4d9dd; +} @media screen and (max-width: 1300px) { main #page-container #software-page .software-articles article.software-article { margin: 30px 20px; diff --git a/src/lib/web-page.js b/src/lib/web-page.js new file mode 100644 index 0000000000000000000000000000000000000000..b58f4c0a88f85c2b45ca6220c6ed4651488dbfb1 --- /dev/null +++ b/src/lib/web-page.js @@ -0,0 +1,9 @@ +"use strict"; + +class WebPage { + constructor(args) { + Object.assign(this, args); + } +} + +module.exports = WebPage; \ No newline at end of file diff --git a/src/pages/education/education.js b/src/pages/education/education.js index c084624cdbc31ee833c9c8e706db7347f35721de..d088914c71d87b92cac70c6780170596a3429151 100644 --- a/src/pages/education/education.js +++ b/src/pages/education/education.js @@ -1,13 +1,11 @@ "use strict"; const { images_url } = require("../../../constants"); +const WebPage = require("../../lib/web-page"); const GameStudioClub = require("./components/game-studio-club"); const Popularization = require("./components/popularization"); -class EducationPage { - constructor(args) { - Object.assign(this, args); - } +class EducationPage extends WebPage { render() { return { diff --git a/src/pages/games/games.js b/src/pages/games/games.js index 3ec0955ea733e057f0396ee1cbce86bf8b96515e..246ae03c5e8c9038758cea324cd11e1c5bc45436 100644 --- a/src/pages/games/games.js +++ b/src/pages/games/games.js @@ -1,13 +1,10 @@ "use strict"; const { images_url } = require("../../../constants"); +const WebPage = require("../../lib/web-page"); const GameArticles = require("./components/game-articles"); -class GamesPage { - constructor(args) { - Object.assign(this, args); - } - +class GamesPage extends WebPage { render() { return { tag: "div", diff --git a/src/pages/software-development/components/software-articles.js b/src/pages/software-development/components/software-articles.js index 4793a2e13abdbe9c3cdef4e7310ff90a2c9ce45f..4812f53b1947e5829f412b2ab15fb6e43180cb84 100644 --- a/src/pages/software-development/components/software-articles.js +++ b/src/pages/software-development/components/software-articles.js @@ -57,14 +57,16 @@ class SoftwareArticle { contents: "Details", }, { - tag: "table", + tag: "ul", + class: "technical-details", contents: [ { - tag: "tr", + tag: "li", + class: "detail", contents: [ - { tag: "td", contents: "Stack" }, + { tag: "label", contents: "Stack" }, { - tag: "td", + tag: "div", contents: [ { tag: "ul", @@ -77,36 +79,35 @@ class SoftwareArticle { ], }, { - tag: "tr", + tag: "li", + class: "detail", contents: [ - { tag: "td", contents: "Version actuelle" }, + { tag: "label", contents: "Version actuelle" }, { - tag: "td", + tag: "div", contents: technical.version, }, ], }, { - tag: "tr", + tag: "li", + class: "detail", contents: [ - { tag: "td", contents: "License" }, - { tag: "td", contents: technical.license }, + { tag: "label", contents: "License" }, + { tag: "div", contents: technical.license }, ], }, { - tag: "tr", + tag: "li", + class: "detail", contents: [ - { tag: "td", contents: "Dépôt code source" }, - { - tag: "td", - contents: [ - { - tag: "a", - href: technical.repository, - contents: technical.repository, - }, - ], - }, + { tag: "label", contents: [ + { + tag: "a", + href: technical.repository, + contents: "Dépôt code source" + } + ] }, ], }, ], diff --git a/src/pages/software-development/software-development.js b/src/pages/software-development/software-development.js index df3b394b342c73f536155a5fd96965177b16f6c6..3032680c7456988eee77aa644113f0d155ee5d2e 100644 --- a/src/pages/software-development/software-development.js +++ b/src/pages/software-development/software-development.js @@ -1,13 +1,10 @@ "use strict"; const { images_url } = require("../../../constants"); +const WebPage = require("../../lib/web-page"); const SoftwareArticles = require("./components/software-articles"); -class SoftwareDevelopment { - constructor(args) { - Object.assign(this, args); - } - +class SoftwareDevelopment extends WebPage { render() { return { tag: "div", diff --git a/src/pages/software-development/software-development.scss b/src/pages/software-development/software-development.scss index d5549a322054bd99cdcb7eb8f3e139ba755dced1..83ac6cd2a66ae6564f078944a766d4e0b8c48078 100644 --- a/src/pages/software-development/software-development.scss +++ b/src/pages/software-development/software-development.scss @@ -54,32 +54,30 @@ font-size: 20px; font-style: italic; } - table { - border-collapse: collapse; - margin: 10px 20px; - tr { - td { - border: 1px solid $medium_grey; + ul.technical-details { + margin: 10px; + .detail { + display: grid; + grid-template-columns: 1fr auto; + &:not(:first-child) { + border-top: 1px solid $medium_grey; + } + padding: 10px 0; + label { + font-weight: bold; + } + ul { + display: flex; + flex-wrap: wrap; + gap: 10px; + } + *:not(a) { color: $light_0; - padding: 10px 20px; - *:not(a) { - color: $light_0; - } - &:first-child { - font-weight: bold; - } - &:last-child { - ul { - display: flex; - flex-wrap: wrap; - gap: 10px; - } - } } } } } - + @media screen and (max-width: $page_contents_center_width) { margin: 30px 20px; }