www: Port the color scheme from forum stylehseet
Change-Id: I9bbd2f57d94529a5f0fcacbea7c1925eb2e76960
diff --git a/components/footer.html.twig b/components/footer.html.twig
index 9581e9f..52b636e 100644
--- a/components/footer.html.twig
+++ b/components/footer.html.twig
@@ -1,3 +1,10 @@
<footer>
- © 2022-2023 The LeafOS Project
-</footer>
\ No newline at end of file
+ <div class="container">
+ <h2>The LeafOS Project</h2>
+ <p>Open-source, AOSP-based Android custom ROM</p>
+ <p>© 2022-2023 The LeafOS Project</p>
+ </div>
+ <p class="footnote">
+ Website designed and developed by <a href="http://rlazarotto.pages.dev" target="_blank">Firehawk</a>.
+ </p>
+</footer>
diff --git a/components/navbar.html.twig b/components/navbar.html.twig
index ba37e7a..e4e5ead 100644
--- a/components/navbar.html.twig
+++ b/components/navbar.html.twig
@@ -1,7 +1,7 @@
<input type="checkbox" id="toggle-aside" />
<nav class="navbar">
<input type="checkbox" id="toggle-navbar" />
- <div style="display: flex;">
+ <div>
{% if showSidenav %}
<label for="toggle-aside" class="label-aside">
<span class="icon-bar top-bar"></span>
@@ -10,24 +10,24 @@
</label>
{% endif %}
<a href="{{ path('leaf_home') }}" class="logo">
- <svg id="vector" xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 0 140.2 76.8">
+ <svg id="vector" xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 140.2 76.8">
<path fill="#90ee90" d="M28.88 31.84C35.54 40 45.19 48.78 51 58.5c5.14 10.73 14.22 25.34 -3.33 13.65 -13.43 -6.58 -29.21 -10 -38.22 -22.22C0.3 42.26 -2.77 -3.82 2.74 0.25 24.46 11 48 9.35 60.23 23.48a40.75 40.75 0 0 1 8.15 14.85c2.81 7.88 5.2 -7.21 7.53 -9.22C79.66 22.69 85.58 18 92.06 14.8c14.06 -5.15 29.14 -7 42.88 -13.31 2.26 -1 4.25 -1.55 4.8 -0.43 1.28 18.32 0.77 39.76 -12.86 53.37C114.91 65.51 98 67.91 84.12 76.7c-3.83 1 -0.62 -5.45 0.17 -8 5.56 -16 17.39 -24.86 29.34 -37.27C85.69 39.75 77.73 81 73.41 67.29c-1.25 -2 -0.53 -7.12 -3.5 -7.3 -3.17 0.58 -2.27 13.27 -8.27 7.83C53.88 54 43.86 37.9 28.88 31.84Z" id="path_0"></path>
</svg>
- </a>
+ </a>
</div>
<ul>
<li class="nav-logo"></li>
<li>
- <a href="{{ path('leaf_about') }}" class="{{ route == 'leaf_about' ? 'active' : '' }} nav-link">About</a>
+ <a href="{{ path('leaf_about') }}" class="nav-link {{ route == 'leaf_about' ? 'active' : '' }}">About</a>
</li>
<li>
- <a href="{{ path('leaf_gallery') }}" class="{{ route == 'leaf_gallery' ? 'active' : '' }} nav-link">Gallery</a>
+ <a href="{{ path('leaf_gallery') }}" class="nav-link {{ route == 'leaf_gallery' ? 'active' : '' }}">Gallery</a>
</li>
<li>
- <a href="{{ path('leaf_wiki') }}" class="{{ route == 'leaf_wiki' ? 'active' : '' }} nav-link">Wiki</a>
+ <a href="{{ path('leaf_wiki') }}" class="nav-link {{ route == 'leaf_wiki' ? 'active' : '' }}">Wiki</a>
</li>
<li>
- <a href="{{ path('leaf_community') }}" class="{{ route == 'leaf_community' ? 'active' : '' }} nav-link">Community</a>
+ <a href="{{ path('leaf_community') }}" class="nav-link {{ route == 'leaf_community' ? 'active' : '' }}">Community</a>
</li>
</ul>
<label for="toggle-navbar" class="label-navbar">
diff --git a/composer.json b/composer.json
index 3307015..4099f23 100644
--- a/composer.json
+++ b/composer.json
@@ -1,76 +1,80 @@
{
- "type": "project",
- "license": "proprietary",
- "minimum-stability": "stable",
- "prefer-stable": true,
- "require": {
- "php": ">=8.1",
- "ext-ctype": "*",
- "ext-iconv": "*",
- "doctrine/doctrine-bundle": "^2.9",
- "doctrine/doctrine-migrations-bundle": "^3.2",
- "doctrine/orm": "^2.14",
- "symfony/asset": "6.2.*",
- "symfony/console": "6.2.*",
- "symfony/dotenv": "6.2.*",
- "symfony/flex": "^2",
- "symfony/framework-bundle": "6.2.*",
- "symfony/runtime": "6.2.*",
- "symfony/twig-bundle": "6.2.*",
- "symfony/yaml": "6.2.*",
- "twig/extra-bundle": "^2.12|^3.0",
- "twig/twig": "^2.12|^3.0"
+ "type": "project",
+ "license": "proprietary",
+ "minimum-stability": "stable",
+ "prefer-stable": true,
+ "require": {
+ "php": ">=8.1",
+ "ext-ctype": "*",
+ "ext-iconv": "*",
+ "doctrine/doctrine-bundle": "^2.9",
+ "doctrine/doctrine-migrations-bundle": "^3.2",
+ "doctrine/orm": "^2.14",
+ "symfony/asset": "6.2.*",
+ "symfony/console": "6.2.*",
+ "symfony/dotenv": "6.2.*",
+ "symfony/flex": "^2",
+ "symfony/framework-bundle": "6.2.*",
+ "symfony/runtime": "6.2.*",
+ "symfony/twig-bundle": "6.2.*",
+ "symfony/yaml": "6.2.*",
+ "twig/extra-bundle": "^2.12|^3.0",
+ "twig/twig": "^2.12|^3.0"
+ },
+ "config": {
+ "allow-plugins": {
+ "php-http/discovery": true,
+ "symfony/flex": true,
+ "symfony/runtime": true
},
- "config": {
- "allow-plugins": {
- "php-http/discovery": true,
- "symfony/flex": true,
- "symfony/runtime": true
- },
- "sort-packages": true
- },
- "autoload": {
- "psr-4": {
- "App\\": "src/"
- }
- },
- "autoload-dev": {
- "psr-4": {
- "App\\Tests\\": "tests/"
- }
- },
- "replace": {
- "symfony/polyfill-ctype": "*",
- "symfony/polyfill-iconv": "*",
- "symfony/polyfill-php72": "*",
- "symfony/polyfill-php73": "*",
- "symfony/polyfill-php74": "*",
- "symfony/polyfill-php80": "*",
- "symfony/polyfill-php81": "*"
- },
- "scripts": {
- "auto-scripts": {
- "cache:clear": "symfony-cmd",
- "assets:install %PUBLIC_DIR%": "symfony-cmd"
- },
- "post-install-cmd": [
- "@auto-scripts"
- ],
- "post-update-cmd": [
- "@auto-scripts"
- ]
- },
- "conflict": {
- "symfony/symfony": "*"
- },
- "extra": {
- "symfony": {
- "allow-contrib": false,
- "require": "6.2.*"
- }
- },
- "require-dev": {
- "symfony/maker-bundle": "^1.48",
- "symfony/var-dumper": "6.2.*"
+ "sort-packages": true
+ },
+ "autoload": {
+ "psr-4": {
+ "App\\": "src/"
}
+ },
+ "autoload-dev": {
+ "psr-4": {
+ "App\\Tests\\": "tests/"
+ }
+ },
+ "replace": {
+ "symfony/polyfill-ctype": "*",
+ "symfony/polyfill-iconv": "*",
+ "symfony/polyfill-php72": "*",
+ "symfony/polyfill-php73": "*",
+ "symfony/polyfill-php74": "*",
+ "symfony/polyfill-php80": "*",
+ "symfony/polyfill-php81": "*"
+ },
+ "scripts": {
+ "auto-scripts": {
+ "cache:clear": "symfony-cmd",
+ "assets:install %PUBLIC_DIR%": "symfony-cmd"
+ },
+ "post-install-cmd": [
+ "@auto-scripts"
+ ],
+ "post-update-cmd": [
+ "@auto-scripts"
+ ],
+ "dev": [
+ "Composer\\Config::disableProcessTimeout",
+ "php -S localhost:8000 -t public"
+ ]
+ },
+ "conflict": {
+ "symfony/symfony": "*"
+ },
+ "extra": {
+ "symfony": {
+ "allow-contrib": false,
+ "require": "6.2.*"
+ }
+ },
+ "require-dev": {
+ "symfony/maker-bundle": "^1.48",
+ "symfony/var-dumper": "6.2.*"
+ }
}
diff --git a/public/assets/app.css b/public/assets/app.css
index 46546cf..6652a18 100644
--- a/public/assets/app.css
+++ b/public/assets/app.css
@@ -1,470 +1,555 @@
-@import url('https://fonts.cdnfonts.com/css/century-gothic');
+@import url("https://fonts.cdnfonts.com/css/inter");
:root {
- --color-leaf: #90ee90;
- --color-leaf-text: #202124;
+ --transition: color 200ms ease-in-out, border-color 200ms ease-in-out;
+
+ /* H3 to h6 and text color */
+ --text-color: #111;
+
+ /* H1 and H2 */
+ --heading-color: #669982;
+
+ --background-color: #fff;
+ --hero-bg-color: #e4f6ee;
+ --hero-text-color: #669982;
+
+ /* Buttons */
+ --button-color: #fff;
+ --button-bg: #109c5c;
+ --button-bg-hover: #0e854e;
+ --button-bg-active: #0b6e41;
+
+ /* Links */
+ --link-color: #07a55d;
+
+ --control-bg: #e4f6ee;
+ --control-color: #669982;
+
+ --control-hover: #f2fbf7;
+ --control-active: #bee9d6;
+ --control-text-active: #669982;
}
-*, *:before, *:after {
- box-sizing: inherit;
+@media (prefers-color-scheme: dark) {
+ :root {
+ /* H3 to h6 and text color */
+ --text-color: #ddd;
+
+ /* H1 and H2 */
+ --heading-color: #6c9381;
+
+ --background-color: #141f1a;
+ --hero-bg-color: #1b2822;
+ --hero-text-color: #6c9381;
+
+ /* Buttons */
+ --button-color: #141f1a;
+ --button-bg: #109c5c;
+ --button-bg-hover: #0e854e;
+ --button-bg-active: #0b6e41;
+
+ /* Links */
+ --link-color: #07a55d;
+
+ --control-color: #6c9381;
+ --control-bg: #1b2822;
+ --control-hover: #17231e;
+ --control-active: #060908;
+ --control-text-active: #6c9381;
+ }
}
html {
- box-sizing: border-box;
- font-family: 'Century Gothic', sans-serif;
- color-scheme: only light;
+ box-sizing: border-box;
+ font-family: "Inter", sans-serif;
}
body {
- margin: 0;
+ background-color: var(--background-color);
+ color: var(--text-color);
}
-h1, h2, h3, h4, h5, h6 {
- font-weight: 300;
+h1,
+h2 {
+ font-weight: 600;
+ margin: 0;
+ color: var(--heading-color);
+}
+
+h3,
+h4,
+h5,
+h6 {
+ font-weight: 600;
+ margin: 0;
+ color: var(--text-color);
}
a {
- text-decoration: none;
+ text-decoration: none;
+ color: var(--link-color);
+ border-bottom: 1px solid var(--control-bg);
+ transition: var(--transition);
+}
+
+a:hover {
+ border-color: var(--link-color);
}
.layout {
- display: flex;
- flex-direction: column;
+ display: flex;
+ flex-direction: column;
}
.layout main {
- flex-grow: 1;
- display: flex;
- flex-direction: row;
+ flex-grow: 1;
+ display: flex;
+ flex-direction: row;
}
main aside {
- width: 220px;
- box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3 px 6px rgba(0, 0, 0, 0.23);
- min-height: 100vh;
- background-color: #e7e9eb;
+ width: 220px;
+ min-width: 220px;
+ box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+ min-height: 100vh;
+ background-color: var(--background-color);
}
aside h2 {
- font-size: 21px;
- padding-left: 16px;
- width: 204px;
+ font-size: 21px;
+ padding: 20px 16px;
}
aside ul {
- list-style: none;
- padding: 0;
- margin: 0;
+ list-style: none;
+ padding: 0;
+ margin: 0;
}
aside a {
- text-decoration: none;
- display: block;
- padding: 10px 16px;
- color: inherit;
+ display: block;
+ padding: 10px 16px;
+ border: 0;
+ color: var(--text-color);
}
aside a:hover {
- color: #000000;
- background-color: #cccccc;
+ color: var(--link-color);
+ background-color: var(--control-hover);
}
aside a.active {
- background-color: #90ee90;
- color: #202124;
- font-weight: 700;
+ background-color: var(--control-active);
+ color: var(--control-text-active);
}
main article {
- flex-grow: 1;
- min-height: calc(100vh - (64px) - (40px * 2 + 21px));
+ flex-grow: 1;
+ min-height: calc(100vh - (64px) - (40px * 2 + 21px));
}
footer {
- font-size: 16px;
- text-align: center;
- padding: 40px;
- background-color: #f8f9fa;
+ background-color: var(--hero-bg-color);
+ padding: 20px 0;
+}
+
+footer div {
+ padding-bottom: 20px;
+}
+
+footer p {
+ margin: 0;
+ padding: 0;
+ color: var(--control-color);
+}
+
+footer .footnote {
+ text-align: center;
+ padding: 15px 0;
+ font-size: 10px;
+ font-weight: 600;
+ text-transform: uppercase;
+}
+
+table.center thead th,
+table.center tbody td {
+ text-align: center;
}
#toggle-aside,
#toggle-navbar {
- display: none;
+ display: none;
}
nav.navbar {
- background-color: #333;
- position: sticky;
- top: 0;
- z-index: 999;
- box-shadow: 1px 1px 8px black;
- display: flex;
+ background-color: var(--background-color);
+ position: sticky;
+ top: 0;
+ z-index: 999;
+ box-shadow: 0 2px 6px rgb(0 0 0 / 50%);
+ display: flex;
+ justify-items: center;
+}
+
+.navbar div {
+ display: flex;
+ align-items: center;
}
.navbar a.logo {
- padding: 14px 16px;
+ padding: 14px 16px;
+ border: 0;
}
.navbar ul {
- list-style-type: none;
- margin: 0;
- padding: 0;
- display: flex;
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+ display: flex;
}
.navbar ul li a {
- display: block;
- color: white;
- text-align: center;
- padding: 21px 16px;
- text-decoration: none;
+ background-color: var(--background-color);
+ display: block;
+ color: var(--control-color);
+ text-align: center;
+ padding: 21px 16px;
+ border: 0;
+ transition: var(--transition);
}
.navbar ul li a:hover:not(.active) {
- background-color: #111;
+ background-color: var(--control-hover);
+ color: var(--link-color);
}
.navbar ul li a.active {
- background-color: #90ee90;
- color: #202124;
+ background-color: var(--control-active);
+ color: var(--control-text-active);
}
.container {
- width: 100%;
- margin-right: auto;
- margin-left: auto;
- padding-right: 15px;
- padding-left: 15px;
+ margin-right: auto;
+ margin-left: auto;
+ padding: 30px 20px;
+}
+
+.container h2 {
+ margin-bottom: 15px;
}
.button {
- padding: 8px 12px;
- background-color: #1ec71e;
- color: white;
- font-weight: 400;
- display: inline-block;
+ padding: 10px 20px;
+ background-color: var(--button-bg);
+ color: var(--button-color);
+ font-weight: 600;
+ display: inline-block;
+ transition: all 200ms ease-in-out;
+ border-radius: 4px;
+ border: 0;
+}
+
+.button:hover {
+ background-color: var(--button-bg-hover);
+}
+
+.button:active {
+ background-color: var(--button-bg-active);
}
.banner {
- background-color: #90ee90;
- color: #202124;
- padding: 2.125rem 0;
- margin-bottom: 2rem;
- border-radius: 0;
+ background-color: var(--hero-bg-color);
+ color: var(--hero-text-color);
}
-article.gallery {
- background-color: #129b5ad5;
+.features {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ column-gap: 30px;
+ row-gap: 25px;
}
.screenshot-gallery {
- display: grid;
- margin-left: auto;
- margin-right: auto;
- row-gap: 25px;
- padding-bottom: 20px;
- width: 90vw;
- column-gap: 30px;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ gap: 30px;
+ margin-left: auto;
+ margin-right: auto;
+ justify-content: center;
+ align-items: center;
+ padding: 10vw;
+ padding: 30px 0;
}
.screenshot-gallery img {
- border-radius: 20px;
- width: 200px;
- justify-self: center;
- box-shadow: 1px 1px 8px black;
+ border-radius: 8px;
+ flex-basis: 25%;
+ width: 200px;
+ box-shadow: 0 2px 8px black;
}
.device-info {
- display: flex;
- gap: 8px;
+ display: flex;
+ gap: 8px;
}
.instructions {
- flex: 2;
+ flex: 2;
}
.latest-builds {
- display: grid;
- gap: 10px;
+ display: grid;
+ gap: 10px;
}
.build-card {
- border: 1px solid grey;
+ border: 1px solid var(--control-bg);
+ border-radius: 4px;
}
.build-card .title {
- background-color: grey;
- padding: 8px;
-
+ background-color: var(--control-bg);
+ padding: 8px;
}
.specs {
- flex: 1;
- display: flex;
- flex-direction: column;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
}
.specs .heading h2,
.specs .heading p {
- text-align: center;
- margin: 0;
+ text-align: center;
+ margin: 0;
}
.specs .heading p {
- font-size: small;
+ font-size: small;
}
.specs img {
- max-width: 200px;
- object-fit: contain;
- align-self: center;
- padding: 1rem 0;
+ max-width: 200px;
+ object-fit: contain;
+ align-self: center;
+ padding: 1rem 0;
}
.device-info table {
- border-collapse: collapse;
- width: 100%;
+ border-collapse: collapse;
+ width: 100%;
}
-.device-info th, td {
- padding: 12px;
+.device-info th,
+td {
+ padding: 12px;
}
.device-info tr:not(:last-of-type) {
- border-bottom: 1px solid #888;
-
+ border-bottom: 1px solid var(--control-bg);
}
.device-info tbody {
- font-size: small
+ font-size: small;
}
.device-info tbody p {
- padding: 0;
- margin: 0;
+ padding: 0;
+ margin: 0;
}
.device-info tbody ul {
- list-style: none;
- margin: 0;
- padding: 0;
+ list-style: none;
+ margin: 0;
+ padding: 0;
}
.device-info tbody td:nth-child(1) {
- font-weight: bold;
+ font-weight: bold;
}
.device-info tbody td:nth-child(2) {
- text-align: right;
+ text-align: right;
}
.contribute {
- column-gap: 30px;
- display: grid;
- row-gap: 25px;
-}
-
-.contribute a {
- color: #1ec71e;
- text-shadow: 1px 1px 2px #989898, -1px -1px 2px #ffffff;
+ column-gap: 30px;
+ display: grid;
+ row-gap: 25px;
}
/* Media queries */
@media (min-width: 576px) {
- .screenshot-gallery {
- grid-template-columns: repeat(2, minmax(0, 1fr));
- }
+ .contribute {
+ grid-template-columns: repeat(1, minmax(0, 1fr));
+ }
- .contribute {
- grid-template-columns: repeat(1, minmax(0, 1fr));
- }
+ .latest-builds {
+ grid-template-columns: repeat(1, minmax(0, 1fr));
+ }
- .latest-builds {
- grid-template-columns: repeat(1, minmax(0, 1fr));
- }
-
- .container {
- max-width: 540px;
- }
+ .container {
+ max-width: 540px;
+ }
}
@media (min-width: 768px) {
- .screenshot-gallery {
- grid-template-columns: repeat(3, minmax(0, 1fr));
- }
+ .contribute {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
- .contribute {
- grid-template-columns: repeat(2, minmax(0, 1fr));
- }
-
- .container {
- max-width: 720px;
- }
+ .container {
+ max-width: 720px;
+ }
}
@media (min-width: 992px) {
- .screenshot-gallery {
- grid-template-columns: repeat(4, minmax(0, 1fr));
- }
+ .latest-builds {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
- .latest-builds {
- grid-template-columns: repeat(2, minmax(0, 1fr));
- }
-
- .container {
- max-width: 960px;
- }
+ .container {
+ max-width: 960px;
+ }
}
@media (min-width: 1200px) {
- .screenshot-gallery {
- grid-template-columns: repeat(5, minmax(0, 1fr));
- }
+ .latest-builds {
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ }
- .latest-builds {
- grid-template-columns: repeat(3, minmax(0, 1fr));
- }
-
- .container {
- max-width: 1140px;
- }
+ .container {
+ max-width: 1140px;
+ }
}
@media (min-width: 1400px) {
- .screenshot-gallery {
- grid-template-columns: repeat(6, minmax(0, 1fr));
- }
-
- .container {
- max-width: 1320px;
- }
+ .container {
+ max-width: 1320px;
+ }
}
+/* Mobile overrides */
@media (max-width: 600px) {
- main aside {
- display: none;
- position: fixed;
- }
+ main aside {
+ display: none;
+ position: fixed;
+ }
- .navbar {
- justify-content: space-between;
- }
+ .navbar {
+ justify-content: space-between;
+ }
- .navbar ul {
- flex-direction: column;
- display: none;
- position: absolute;
- background-color: #333;
- margin-top: 63px;
- }
+ .navbar ul {
+ flex-direction: column;
+ display: none;
+ position: absolute;
+ margin-top: 63px;
+ }
- .navbar ul li {
- width: 100vw;
- }
+ .navbar ul li {
+ width: 100vw;
+ }
- .navbar .label-aside,
- .navbar .label-navbar {
- display: block;
- cursor: pointer;
- }
+ .navbar .label-aside,
+ .navbar .label-navbar {
+ display: block;
+ cursor: pointer;
+ }
- .navbar .label-aside .icon-bar {
- display: block;
- height: 6px;
- background-color: #cccccc;
- margin: 10px;
- transition: all 0.2s;
- }
+ .navbar .label-aside .icon-bar {
+ display: block;
+ height: 6px;
+ background-color: var(--control-color);
+ margin: 10px;
+ transition: all 0.2s;
+ }
- .navbar .label-aside .top-bar {
- width: 24px;
- transform: translateY(9px) rotate(45deg);
- }
+ .navbar .label-aside .top-bar {
+ width: 24px;
+ transform: translateY(9px) rotate(45deg);
+ }
- .navbar .label-aside .middle-bar {
- opacity: 0;
- }
+ .navbar .label-aside .middle-bar {
+ opacity: 0;
+ }
- .navbar .label-aside .bottom-bar {
- width: 24px;
- transform: translateY(-9px) rotate(-45deg);
- }
+ .navbar .label-aside .bottom-bar {
+ width: 24px;
+ transform: translateY(-9px) rotate(-45deg);
+ }
- #toggle-aside:checked~.navbar .label-aside .top-bar {
- transform: translateY(9px) rotate(-45deg);
- }
+ #toggle-aside:checked ~ .navbar .label-aside .top-bar {
+ transform: translateY(9px) rotate(-45deg);
+ }
- #toggle-aside:checked~.navbar .label-aside .middle-bar {
- opacity: 0;
- }
+ #toggle-aside:checked ~ .navbar .label-aside .middle-bar {
+ opacity: 0;
+ }
- #toggle-aside:checked~.navbar .label-aside .bottom-bar {
- transform: translateY(-9px) rotate(45deg);
- }
+ #toggle-aside:checked ~ .navbar .label-aside .bottom-bar {
+ transform: translateY(-9px) rotate(45deg);
+ }
- #toggle-aside:checked~main aside {
- display: block;
- }
+ #toggle-aside:checked ~ main aside {
+ display: block;
+ }
- .navbar .label-navbar {
- display: flex;
- flex-direction: column;
- align-items: flex-end;
- justify-content: center;
- margin-right: 5px;
- }
+ .navbar .label-navbar {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+ justify-content: center;
+ margin-right: 5px;
+ }
- .navbar .label-navbar .icon-bar {
- display: block;
- width: 48px;
- height: 6px;
- background-color: #cccccc;
- margin: 5px;
- transition: all 0.2s;
- }
+ .navbar .label-navbar .icon-bar {
+ display: block;
+ width: 48px;
+ height: 6px;
+ background-color: var(--control-color);
+ margin: 5px;
+ transition: all 0.2s;
+ }
- .navbar .label-navbar .top-bar {
- transform: rotate(0);
- }
+ .navbar .label-navbar .top-bar {
+ transform: rotate(0);
+ }
- .navbar .label-navbar .middle-bar {
- opacity: 1;
- }
+ .navbar .label-navbar .middle-bar {
+ opacity: 1;
+ }
- #toggle-navbar:checked~.label-navbar .top-bar {
- transform: translateY(16px) rotate(45deg);
- }
+ #toggle-navbar:checked ~ .label-navbar .top-bar {
+ transform: translateY(16px) rotate(45deg);
+ }
- #toggle-navbar:checked~.label-navbar .middle-bar {
- opacity: 0;
- }
+ #toggle-navbar:checked ~ .label-navbar .middle-bar {
+ opacity: 0;
+ }
- #toggle-navbar:checked~.label-navbar .bottom-bar {
- transform: translateY(-16px) rotate(-45deg);
- }
+ #toggle-navbar:checked ~ .label-navbar .bottom-bar {
+ transform: translateY(-16px) rotate(-45deg);
+ }
- #toggle-navbar:checked~ul {
- display: flex;
- }
+ #toggle-navbar:checked ~ ul {
+ display: flex;
+ }
- .container {
- padding: 0;
- }
+ .features {
+ grid-template-columns: repeat(1, minmax(0, 1fr));
+ }
+
+ .screenshot-gallery {
+ flex-direction: column;
+ }
+
+ .banner svg {
+ right: 5%;
+ }
+
+ footer p:not(.footnote) {
+ font-size: 12px;
+ }
}
-
-/* Darkmode overrides */
-@media (prefers-color-scheme: dark) {
- html {
- background-color: #1c1b22;
- color: white;
- }
-
- .contribute a {
- text-shadow: 1px 1px 2px #989898, -1px -1px 2px #000000;
- }
-
- footer,
- main aside {
- background-color: #0e0d11;
- }
-}
\ No newline at end of file
diff --git a/public/assets/images/header.webp b/public/assets/images/header.webp
new file mode 100644
index 0000000..d993c00
--- /dev/null
+++ b/public/assets/images/header.webp
Binary files differ
diff --git a/public/assets/images/screenshots/1.webp b/public/assets/images/screenshots/1.webp
deleted file mode 100644
index 27cbe51..0000000
--- a/public/assets/images/screenshots/1.webp
+++ /dev/null
Binary files differ
diff --git a/public/assets/images/screenshots/10.webp b/public/assets/images/screenshots/10.webp
deleted file mode 100644
index 6fa96d8..0000000
--- a/public/assets/images/screenshots/10.webp
+++ /dev/null
Binary files differ
diff --git a/public/assets/images/screenshots/11.webp b/public/assets/images/screenshots/11.webp
deleted file mode 100644
index 89ca565..0000000
--- a/public/assets/images/screenshots/11.webp
+++ /dev/null
Binary files differ
diff --git a/public/assets/images/screenshots/12.webp b/public/assets/images/screenshots/12.webp
deleted file mode 100644
index 8d748b0..0000000
--- a/public/assets/images/screenshots/12.webp
+++ /dev/null
Binary files differ
diff --git a/public/assets/images/screenshots/13.webp b/public/assets/images/screenshots/13.webp
deleted file mode 100644
index c2dd354..0000000
--- a/public/assets/images/screenshots/13.webp
+++ /dev/null
Binary files differ
diff --git a/public/assets/images/screenshots/14.webp b/public/assets/images/screenshots/14.webp
deleted file mode 100644
index 486b061..0000000
--- a/public/assets/images/screenshots/14.webp
+++ /dev/null
Binary files differ
diff --git a/public/assets/images/screenshots/15.webp b/public/assets/images/screenshots/15.webp
deleted file mode 100644
index 6f5c285..0000000
--- a/public/assets/images/screenshots/15.webp
+++ /dev/null
Binary files differ
diff --git a/public/assets/images/screenshots/16.webp b/public/assets/images/screenshots/16.webp
deleted file mode 100644
index abbf38d..0000000
--- a/public/assets/images/screenshots/16.webp
+++ /dev/null
Binary files differ
diff --git a/public/assets/images/screenshots/17.webp b/public/assets/images/screenshots/17.webp
deleted file mode 100644
index 95411e7..0000000
--- a/public/assets/images/screenshots/17.webp
+++ /dev/null
Binary files differ
diff --git a/public/assets/images/screenshots/19.webp b/public/assets/images/screenshots/19.webp
deleted file mode 100644
index 6f17582..0000000
--- a/public/assets/images/screenshots/19.webp
+++ /dev/null
Binary files differ
diff --git a/public/assets/images/screenshots/2.webp b/public/assets/images/screenshots/2.webp
deleted file mode 100644
index 5680144..0000000
--- a/public/assets/images/screenshots/2.webp
+++ /dev/null
Binary files differ
diff --git a/public/assets/images/screenshots/20.webp b/public/assets/images/screenshots/20.webp
deleted file mode 100644
index aa0747f..0000000
--- a/public/assets/images/screenshots/20.webp
+++ /dev/null
Binary files differ
diff --git a/public/assets/images/screenshots/21.webp b/public/assets/images/screenshots/21.webp
deleted file mode 100644
index ce3da1c..0000000
--- a/public/assets/images/screenshots/21.webp
+++ /dev/null
Binary files differ
diff --git a/public/assets/images/screenshots/22.webp b/public/assets/images/screenshots/22.webp
deleted file mode 100644
index 27d0930..0000000
--- a/public/assets/images/screenshots/22.webp
+++ /dev/null
Binary files differ
diff --git a/public/assets/images/screenshots/23.webp b/public/assets/images/screenshots/23.webp
deleted file mode 100644
index a13adb3..0000000
--- a/public/assets/images/screenshots/23.webp
+++ /dev/null
Binary files differ
diff --git a/public/assets/images/screenshots/25.webp b/public/assets/images/screenshots/25.webp
deleted file mode 100644
index b650c7f..0000000
--- a/public/assets/images/screenshots/25.webp
+++ /dev/null
Binary files differ
diff --git a/public/assets/images/screenshots/26.webp b/public/assets/images/screenshots/26.webp
deleted file mode 100644
index 00be060..0000000
--- a/public/assets/images/screenshots/26.webp
+++ /dev/null
Binary files differ
diff --git a/public/assets/images/screenshots/27.webp b/public/assets/images/screenshots/27.webp
deleted file mode 100644
index 22935d9..0000000
--- a/public/assets/images/screenshots/27.webp
+++ /dev/null
Binary files differ
diff --git a/public/assets/images/screenshots/28.webp b/public/assets/images/screenshots/28.webp
deleted file mode 100644
index da39b65..0000000
--- a/public/assets/images/screenshots/28.webp
+++ /dev/null
Binary files differ
diff --git a/public/assets/images/screenshots/3.webp b/public/assets/images/screenshots/3.webp
deleted file mode 100644
index 3732ddb..0000000
--- a/public/assets/images/screenshots/3.webp
+++ /dev/null
Binary files differ
diff --git a/public/assets/images/screenshots/4.webp b/public/assets/images/screenshots/4.webp
deleted file mode 100644
index 92e9e38..0000000
--- a/public/assets/images/screenshots/4.webp
+++ /dev/null
Binary files differ
diff --git a/public/assets/images/screenshots/6.webp b/public/assets/images/screenshots/6.webp
deleted file mode 100644
index 98a8945..0000000
--- a/public/assets/images/screenshots/6.webp
+++ /dev/null
Binary files differ
diff --git a/public/assets/images/screenshots/8.webp b/public/assets/images/screenshots/8.webp
deleted file mode 100644
index a27a9fa..0000000
--- a/public/assets/images/screenshots/8.webp
+++ /dev/null
Binary files differ
diff --git a/public/assets/images/screenshots/9.webp b/public/assets/images/screenshots/9.webp
deleted file mode 100644
index 2b56b4b..0000000
--- a/public/assets/images/screenshots/9.webp
+++ /dev/null
Binary files differ
diff --git a/public/assets/normalize.css b/public/assets/normalize.css
new file mode 100644
index 0000000..dc13b8a
--- /dev/null
+++ b/public/assets/normalize.css
@@ -0,0 +1,351 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+ ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+ line-height: 1.15; /* 1 */
+ -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+ ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+ margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+ display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+ font-size: 2em;
+ margin: 0.67em 0;
+}
+
+/* Grouping content
+ ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+ box-sizing: content-box; /* 1 */
+ height: 0; /* 1 */
+ overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+ font-family: monospace, monospace; /* 1 */
+ font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+ ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+ background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+ border-bottom: none; /* 1 */
+ text-decoration: underline; /* 2 */
+ text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+ font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+ font-family: monospace, monospace; /* 1 */
+ font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+ font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+
+sub {
+ bottom: -0.25em;
+}
+
+sup {
+ top: -0.5em;
+}
+
+/* Embedded content
+ ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+ border-style: none;
+}
+
+/* Forms
+ ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+ font-family: inherit; /* 1 */
+ font-size: 100%; /* 1 */
+ line-height: 1.15; /* 1 */
+ margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input {
+ /* 1 */
+ overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select {
+ /* 1 */
+ text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+ -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+ border-style: none;
+ padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+ outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+ padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ * `fieldset` elements in all browsers.
+ */
+
+legend {
+ box-sizing: border-box; /* 1 */
+ color: inherit; /* 2 */
+ display: table; /* 1 */
+ max-width: 100%; /* 1 */
+ padding: 0; /* 3 */
+ white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+ vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+ overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+ box-sizing: border-box; /* 1 */
+ padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+ height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+ -webkit-appearance: textfield; /* 1 */
+ outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+ -webkit-appearance: button; /* 1 */
+ font: inherit; /* 2 */
+}
+
+/* Interactive
+ ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+ display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+ display: list-item;
+}
+
+/* Misc
+ ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+ display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+ display: none;
+}
diff --git a/src/Controller/HomeController.php b/src/Controller/HomeController.php
index 879b239..e6276e8 100644
--- a/src/Controller/HomeController.php
+++ b/src/Controller/HomeController.php
@@ -6,11 +6,14 @@
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;
-class HomeController extends AbstractController
-{
+class HomeController extends AbstractController {
#[Route('/', name: 'leaf_home')]
- public function index(): Response
- {
+ public function index(): Response {
return $this->render('home/index.html.twig');
}
+
+ #[Route('/stack', name: 'leaf_stack')]
+ public function stack(): Response {
+ return $this->render('stack/index.html.twig');
+ }
}
diff --git a/templates/base.html.twig b/templates/base.html.twig
index 034ac74..ba1ec92 100644
--- a/templates/base.html.twig
+++ b/templates/base.html.twig
@@ -6,10 +6,14 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="LeafOS is an AOSP-based custom ROM for select Android devices." />
- <title>{% block title %}{% endblock %}</title>
+ <title>
+ {% block title %}
+ {% endblock %}
+ </title>
{# Favicon same as navbar logo #}
<link rel="icon" href="data:image/svg+xml, %3Csvg id='vector' xmlns='http://www.w3.org/2000/svg' height='30px' viewBox='0 0 140.2 76.8'%3E%3Cpath fill='%2390ee90' d='M28.88 31.84C35.54 40 45.19 48.78 51 58.5c5.14 10.73 14.22 25.34 -3.33 13.65 -13.43 -6.58 -29.21 -10 -38.22 -22.22C0.3 42.26 -2.77 -3.82 2.74 0.25 24.46 11 48 9.35 60.23 23.48a40.75 40.75 0 0 1 8.15 14.85c2.81 7.88 5.2 -7.21 7.53 -9.22C79.66 22.69 85.58 18 92.06 14.8c14.06 -5.15 29.14 -7 42.88 -13.31 2.26 -1 4.25 -1.55 4.8 -0.43 1.28 18.32 0.77 39.76 -12.86 53.37C114.91 65.51 98 67.91 84.12 76.7c-3.83 1 -0.62 -5.45 0.17 -8 5.56 -16 17.39 -24.86 29.34 -37.27C85.69 39.75 77.73 81 73.41 67.29c-1.25 -2 -0.53 -7.12 -3.5 -7.3 -3.17 0.58 -2.27 13.27 -8.27 7.83C53.88 54 43.86 37.9 28.88 31.84Z' id='path_0'%3E%3C/path%3E%3C/svg%3E" />
{# Site CSS #}
+ <link rel="stylesheet" href="{{ asset('assets/normalize.css') }}" />
<link rel="stylesheet" href="{{ asset('assets/app.css') }}" />
<link rel="canonical" href="{{ path('leaf_home') }}" />
<meta property="og:title" content="{{ block('title') }}" />
@@ -21,8 +25,8 @@
{% include '@components/navbar.html.twig' %}
<main>
{% block body %}
+
{% endblock %}
-
</main>
{% include '@components/footer.html.twig' %}
</div>
diff --git a/templates/home/index.html.twig b/templates/home/index.html.twig
index 3579522..bd8cb94 100644
--- a/templates/home/index.html.twig
+++ b/templates/home/index.html.twig
@@ -1,17 +1,53 @@
{% extends 'base.html.twig' %}
-
{% block title %}
LeafOS ROM
{% endblock %}
-
{% block body %}
- <article>
+ <article class="home">
<div class="banner">
<div class="container">
<h1>Welcome to the LeafOS!</h1>
<p>LeafOS is an AOSP-based ROM, focused on stability.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rhoncus aliquam ante sed convallis. Nullam vitae vestibulum nunc. Donec vehicula leo elementum odio suscipit mollis. Vivamus facilisis magna.</p>
<a href="{{ path('leaf_wiki') }}" class="button">Get LeafOS</a>
</div>
</div>
+ <div class="container">
+ <h2>Leaf Features</h2>
+ <div class="features">
+ <div class="card">
+ <h3>Secure</h3>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam viverra, urna vel ultricies efficitur, odio tellus feugiat arcu, in facilisis.</p>
+ </div>
+ <div class="card">
+ <h3>Stable</h3>
+ <p>Integer lacus diam, gravida ac rutrum eget, ultricies eget ligula. Donec rhoncus at mi et pharetra. Donec sed eros ut.</p>
+ </div>
+ <div class="card">
+ <h3>Personalizable</h3>
+ <p>Aenean placerat rhoncus scelerisque. Nunc quis nisi sed arcu volutpat lobortis. Praesent ullamcorper aliquam interdum. Maecenas aliquam ipsum at orci.</p>
+ </div>
+ <div class="card">
+ <h3>Constantly Updated</h3>
+ <p>Aenean nec ullamcorper orci. Vestibulum volutpat magna sit amet metus commodo tempor. Nunc lacinia velit sollicitudin nulla rutrum, eget venenatis.</p>
+ </div>
+ </div>
+ </div>
+ <div class="container">
+ <h2>Keep your device for longer</h2>
+ <p>With Leaf OS, you're not limited to your device's OEM upgrade range. Not only you can extend its lifespan, you can get more performance out of your device with a clean and lightweight OS.</p>
+ </div>
+ <div class="container">
+ <div class="features">
+ <div>
+ <h2>Open-source, by default</h2>
+ <p>You are in control. Everything is open-sourced, you can check for yourself what every app is doing, anytime.</p>
+ </div>
+ <div>
+ <h2>Device not yet supported?</h2>
+ <p>No problem! You can build the ROM for your device, and apply to be a maintainer for it.</p>
+ </div>
+ </div>
+ </div>
</article>
{% endblock %}
