From ef56166c811ef460baec218b445fd79f5318b138 Mon Sep 17 00:00:00 2001 From: "S.M Mukarram Nainar" Date: Wed, 2 Feb 2022 18:00:08 -0500 Subject: [PATCH] Initial SSG work --- .gitignore | 1 + README.md | 8 +- config.toml | 16 + content/_index.md | 3 + chat-with-us.md => content/chat-with-us.md | 4 +- .../play-libre-games.md | 3 + static/style.css | 438 ++++++++++++++++++ templates/base.html | 14 + templates/index.html | 5 + templates/page.html | 5 + 10 files changed, 490 insertions(+), 7 deletions(-) create mode 100644 .gitignore create mode 100644 config.toml create mode 100644 content/_index.md rename chat-with-us.md => content/chat-with-us.md (99%) rename play-libre-games.md => content/play-libre-games.md (99%) create mode 100644 static/style.css create mode 100644 templates/base.html create mode 100644 templates/index.html create mode 100644 templates/page.html diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..87174b6 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +/public/ diff --git a/README.md b/README.md index af20aa3..a2280de 100644 --- a/README.md +++ b/README.md @@ -6,10 +6,6 @@ Welcome to the LibreGaming website repository! ## How to contribute -*libregaming.org* is built from git with pandoc. Please remember to include a licence header (e.g. CC0-1.0). Happy writing! +*libregaming.org* is built with zola. Please remember to include a licence header (e.g. CC0-1.0). Happy writing! - git checkout public - git show master:chat-with-us.md \ - | pandoc --standalone --metadata=title:'Libre Gaming' \ - > index.html - git commit -am Publish +You can build the site with `zola build`, which puts the output in `public/`, or run `zola serve` for previewing. diff --git a/config.toml b/config.toml new file mode 100644 index 0000000..8aa9399 --- /dev/null +++ b/config.toml @@ -0,0 +1,16 @@ +# The URL the site will be built for +base_url = "https://libregaming.org" + +# Whether to automatically compile all Sass files in the sass directory +compile_sass = true + +# Whether to build a search index to be used later on by a JavaScript library +build_search_index = false + +[markdown] +# Whether to do syntax highlighting +# Theme can be customised by setting the `highlight_theme` variable to a theme supported by Zola +highlight_code = false + +[extra] +# Put all your custom variables here diff --git a/content/_index.md b/content/_index.md new file mode 100644 index 0000000..ee886d2 --- /dev/null +++ b/content/_index.md @@ -0,0 +1,3 @@ ++++ ++++ +# Hi there diff --git a/chat-with-us.md b/content/chat-with-us.md similarity index 99% rename from chat-with-us.md rename to content/chat-with-us.md index ee7cfdc..7aec419 100644 --- a/chat-with-us.md +++ b/content/chat-with-us.md @@ -1,5 +1,7 @@ ++++ +title = "Chat with us!" ++++ - [Who we are](https://md.roflcopter.fr/libregaming). (WiP) # Chat with us! diff --git a/play-libre-games.md b/content/play-libre-games.md similarity index 99% rename from play-libre-games.md rename to content/play-libre-games.md index c76dea6..b2e46d9 100644 --- a/play-libre-games.md +++ b/content/play-libre-games.md @@ -1,3 +1,6 @@ ++++ +title = "Play libre games!" ++++ # Play libre games! diff --git a/static/style.css b/static/style.css new file mode 100644 index 0000000..e773d14 --- /dev/null +++ b/static/style.css @@ -0,0 +1,438 @@ +/*!**************************************************************************************************!*\ + !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/responsive-nav/responsive-nav.css ***! + \**************************************************************************************************/ +/*! responsive-nav.js 1.0.39 by @viljamis */ + +.nav-collapse ul { + margin: 0; + padding: 0; + width: 100%; + display: block; + list-style: none; +} + +.nav-collapse li { + width: 100%; + display: block; +} + +.js .nav-collapse { + clip: rect(0 0 0 0); + max-height: 0; + position: absolute; + display: block; + overflow: hidden; + zoom: 1; +} + +.nav-collapse.opened { + max-height: 9999px; +} + +.nav-toggle { + -webkit-tap-highlight-color: rgba(0,0,0,0); + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + -o-user-select: none; + user-select: none; +} + +@media screen and (min-width: 40em) { + .js .nav-collapse { + position: relative; + } + .js .nav-collapse.closed { + max-height: none; + } + .nav-toggle { + display: none; + } +} + +/*!*******************************************************************************************************************************************!*\ + !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/scss/styles.scss ***! + \*******************************************************************************************************************************************/ +* { + box-sizing: border-box; +} + +html, body { + margin: 0; + padding: 0; +} + +html body { + background-color: #1c1b22; +} + +body { + font-size: 1.25rem; + font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + line-height: 1.4; + color: #dee2e6; +} + +h1, h2, h3, h4, h5, h6 { + font-family: inherit; +} + +h2 { + font-size: 2rem; +} + +p { + margin-top: 0; + margin-bottom: 1rem; +} + +a { + text-decoration: none; + color: #ff8f23; + text-decoration: underline; +} +a:hover { + color: #daf2ee; +} +a:visited { + color: #ff820a; +} +a:active { + color: #fff; +} + +.text-lightblue { + color: #b6e2ee; +} + +h1, h2, h3, h4, h5, h6, +.h1, .h2, .h3, .h4, .h5, .h6 { + margin-bottom: 5px; + font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-weight: 900; + line-height: 1.4em; + color: #dee2e6; +} + +h1, .h1 { + font-size: calc(1.4375rem + 2.25vw); +} +@media (min-width: 1200px) { + h1, .h1 { + font-size: 3.125rem; + } +} + +h2, .h2 { + font-size: calc(1.375rem + 1.5vw); +} +@media (min-width: 1200px) { + h2, .h2 { + font-size: 2.5rem; + } +} + +h3, .h3 { + font-size: calc(1.34375rem + 1.125vw); +} +@media (min-width: 1200px) { + h3, .h3 { + font-size: 2.1875rem; + } +} + +h4, .h4 { + font-size: calc(1.3125rem + 0.75vw); +} +@media (min-width: 1200px) { + h4, .h4 { + font-size: 1.875rem; + } +} + +h5, .h5 { + font-size: calc(1.28125rem + 0.375vw); +} +@media (min-width: 1200px) { + h5, .h5 { + font-size: 1.5625rem; + } +} + +h6, .h6 { + font-size: 1.25rem; +} + +.lead { + font-size: calc(1.28125rem + 0.375vw); + font-weight: 300; +} +@media (min-width: 1200px) { + .lead { + font-size: 1.5625rem; + } +} + +.container { + max-width: 1200px; + margin-left: auto; + margin-right: auto; +} +@media (max-width: 78.75em) { + .container { + margin-left: 15px; + margin-right: 15px; + } +} + +.full-width-container { + max-width: 100%; + margin-left: 15px; + margin-right: 15px; +} + +.header { + width: 100%; + height: 56px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); + background: #212529; + color: #FFF; + display: flex; + flex-direction: row; + align-items: center; + padding: 0 16px; +} +.header .brand { + margin-left: auto; + padding-left: 1em; + padding-right: 1em; + text-decoration: none; +} +.header .brand > h1 { + color: #4fbad5 !important; + display: inline-flex; + align-items: center; + font-size: calc(1.2875rem + 0.45vw); + margin: 0; +} +@media (min-width: 1200px) { + .header .brand > h1 { + font-size: 1.625rem; + } +} +.header .brand .brand-img { + margin-right: 0.5rem; +} +.header .brand .second { + color: #ff8f23 !important; +} +.header .lang-select { + display: inline-flex; + vertical-align: middle; + margin-left: auto; +} + +.header__menu-toggle { + background: none; + border: none; + width: 24px; + height: 24px; + padding: 0; + margin: 0 24px 0 0; + color: #FFF; +} + +.side-nav__content { + padding-top: 32px; + flex: 1; + list-style: none; + padding: 0; + margin: 0; + overflow-x: hidden; + overflow-y: auto; + -webkit-overflow-scrolling: touch; +} + +.side-nav__content li { + min-height: 48px; + line-height: 48px; +} + +.side-nav__content li a:hover { + background: #343a40; +} + +.nav-collapse a { + color: #dee2e6; + text-decoration: none; + width: 100%; + background: rgba(0, 0, 0, 0.7); + border-bottom: 1px solid #212529; + padding: 0.7em 1em; + float: left; +} + +.hero { + border-radius: 12px; + background: linear-gradient(to right, #159957, #155799); + min-height: 300px; + width: 100%; + color: white; + justify-content: center; + flex-direction: column; + flex-grow: 1; + padding: 1.25rem; + display: -webkit-flex; + display: flex; + -webkit-align-items: center; + align-items: center; +} +.hero > h1 { + margin: 0; +} +.hero .message { + display: -webkit-flex; + display: flex; + -webkit-justify-content: center; + justify-content: center; + -webkit-align-items: center; + align-items: center; + letter-spacing: 5px; +} + +.posts ul li { + list-style: none; + margin-bottom: calc(1.525rem + 3.3vw); +} +@media (min-width: 1200px) { + .posts ul li { + margin-bottom: 4rem; + } +} +.posts ul li a { + display: -webkit-flex; + display: flex; + text-decoration: none; +} +.posts ul { + border-top: 1px solid #495057; + padding-left: 0; + padding-right: 0; + padding-top: calc(1.625rem + 4.5vw); +} +@media (min-width: 1200px) { + .posts ul { + padding-top: 5rem; + } +} +.posts .left { + line-height: 1em; + display: -webkit-flex; + display: flex; + flex-direction: column; +} +.posts .date { + color: #4fbad5; + margin-bottom: 0.3125rem; + margin-right: 1em; + text-transform: uppercase; + font-size: calc(1.275rem + 0.3vw); +} +@media (min-width: 1200px) { + .posts .date { + font-size: 1.5rem; + } +} +.posts .year { + color: #fff; +} +.posts .title { + font-size: calc(1.325rem + 0.9vw); +} +@media (min-width: 1200px) { + .posts .title { + font-size: 2rem; + } +} +.posts .right { + line-height: 1.15em; +} +.lg-title span { + background-color: #f8f9fa; + padding-top: 0.2rem; + padding-bottom: 0.2rem; + padding-left: 1rem; + padding-right: 1rem; + border-radius: 22px; + color: #343a40 !important; + border: 3px #6c757d solid; + display: inline-flex; +} +.lg-title .icon { + margin: 0; + padding-top: 0 !important; + padding-bottom: 0 !important; +} +.lg-title .icon:before { + position: relative; + top: 0; + left: 0; + bottom: 0; + content: ""; + margin-top: -3px; + margin-bottom: -3px; + width: 64px; + margin-right: calc(1.2625rem + 0.15vw); + margin-left: -30px; + border-radius: 100%; +} +@media (min-width: 1200px) { + .lg-title .icon:before { + margin-right: 1.375rem; + } +} + +#description { + width: 100%; + display: -webkit-flex; + display: flex; + flex-direction: row; + padding: 2em; + column-gap: 20px; + border-width: 0.5em 0 0; + border-style: solid; + align-items: center; + justify-content: center; + border-image: linear-gradient(139deg, #fb8817, #ff4b01, #c12127, #e02aff) 3; + background-color: #29008a !important; + background: linear-gradient(180deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0)); +} +#description .tile { + border-left: 7px solid #adb5bd; + width: 20em; + padding-left: 1.4em; + padding-right: 1.4em; + padding-bottom: 2em; + background-color: rgba(0, 0, 0, 0.9); +} +#description .tile .content { + margin: 0 auto; + max-width: 280px; +} +#description .tile .content p { + margin: 0 auto; +} + +#footer { + display: -webkit-flex; + display: flex; + justify-content: end; + margin-top: 3em; + padding: 2em 1em; +} +#footer ul li { + list-style: none; + display: inline-block; + margin-right: 0.3em; +} diff --git a/templates/base.html b/templates/base.html new file mode 100644 index 0000000..1ea1298 --- /dev/null +++ b/templates/base.html @@ -0,0 +1,14 @@ + + + + + + Libregaming.org + + + + + {% block content %} {% endblock %} + + + diff --git a/templates/index.html b/templates/index.html new file mode 100644 index 0000000..575141f --- /dev/null +++ b/templates/index.html @@ -0,0 +1,5 @@ +{% extends "base.html" %} + +{% block content %} +{{ section.content | safe }} +{% endblock content %} diff --git a/templates/page.html b/templates/page.html new file mode 100644 index 0000000..8226656 --- /dev/null +++ b/templates/page.html @@ -0,0 +1,5 @@ +{% extends "base.html" %} + +{% block content %} +{{ page.content | safe }} +{% endblock content %}