diff --git a/assets/SiGithub.svg b/assets/SiGithub.svg new file mode 100644 index 0000000..3a37400 --- /dev/null +++ b/assets/SiGithub.svg @@ -0,0 +1,5 @@ + + + diff --git a/assets/akira-mascot-akari-flipped.png b/assets/akira-mascot-akari-flipped.png new file mode 100644 index 0000000..51f3189 Binary files /dev/null and b/assets/akira-mascot-akari-flipped.png differ diff --git a/assets/akira-mascot-akari.png b/assets/akira-mascot-akari.png new file mode 100644 index 0000000..826a8e1 Binary files /dev/null and b/assets/akira-mascot-akari.png differ diff --git a/assets/akiraApp2.png b/assets/akiraApp2.png new file mode 100644 index 0000000..580b181 Binary files /dev/null and b/assets/akiraApp2.png differ diff --git a/assets/akiraMascot.png b/assets/akiraMascot.png new file mode 100644 index 0000000..6b67603 Binary files /dev/null and b/assets/akiraMascot.png differ diff --git a/assets/akiraMascotFlipped.png b/assets/akiraMascotFlipped.png new file mode 100644 index 0000000..e71809f Binary files /dev/null and b/assets/akiraMascotFlipped.png differ diff --git a/assets/akiraWebsiteFull.jpg b/assets/akiraWebsiteFull.jpg new file mode 100644 index 0000000..aaccf8d Binary files /dev/null and b/assets/akiraWebsiteFull.jpg differ diff --git a/assets/akiraWebsiteMobileFull.jpg b/assets/akiraWebsiteMobileFull.jpg new file mode 100644 index 0000000..a3fe090 Binary files /dev/null and b/assets/akiraWebsiteMobileFull.jpg differ diff --git a/assets/antidoteJackProfilePict.png b/assets/antidoteJackProfilePict.png new file mode 100644 index 0000000..cc026aa Binary files /dev/null and b/assets/antidoteJackProfilePict.png differ diff --git a/assets/antidotejackPict.png b/assets/antidotejackPict.png new file mode 100644 index 0000000..18eff76 Binary files /dev/null and b/assets/antidotejackPict.png differ diff --git a/assets/benchmarks.png b/assets/benchmarks.png new file mode 100644 index 0000000..05365cf Binary files /dev/null and b/assets/benchmarks.png differ diff --git a/assets/email.svg b/assets/email.svg new file mode 100644 index 0000000..ac265ed --- /dev/null +++ b/assets/email.svg @@ -0,0 +1,34 @@ + + + + + + diff --git a/assets/facebook.svg b/assets/facebook.svg new file mode 100644 index 0000000..508dd03 --- /dev/null +++ b/assets/facebook.svg @@ -0,0 +1,33 @@ + + + + + + diff --git a/assets/librepayIcon.svg b/assets/librepayIcon.svg new file mode 100644 index 0000000..bf26beb --- /dev/null +++ b/assets/librepayIcon.svg @@ -0,0 +1 @@ + diff --git a/assets/watermark.png b/assets/watermark.png new file mode 100755 index 0000000..dc277d9 Binary files /dev/null and b/assets/watermark.png differ diff --git a/index.html b/index.html index 1271121..9313486 100644 --- a/index.html +++ b/index.html @@ -7,33 +7,177 @@ Akira - The Linux Design Tool + + + + + - + -
- +
+
+ + +

Akira UX

+

The Linux Design Tool from Developers to developers

+ Image of the project's mascot +
+
-

Akira

-

The Linux Design Tool

-
+ +
+
+

Test it Now!

+

+ Akira is a native Linux Design application built in Vala and GTK. Akira focuses on offering a modern and fast approach to UI and UX Design, mainly targeting web designers and graphic designers. +

+
+ + Image of the application. + + Download +
+
+

Features

+ +
+

Clever

+ +

+ In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation. +

+ + Image of the teen mascot + + Learn more... +
+ +
+

Light Weight

+ +

+ Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. +

+ +

+Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful +

+ + Akira benchmarks. + + Learn more... +
+
+
+

Contributors

+ +
+ + AJ's picture + +

Developer's Name

+ +

+ A breaf description of the developer role, an other micelaneous that I can't come up with... +

+ + + +
+ +
+ + AJ's picture + +

Developer's Name

+ +

+ A breaf description of the developer role, an other micelaneous that I can't come up with... +

+ + + +
+ +
+ diff --git a/style/contributor.css b/style/contributor.css new file mode 100644 index 0000000..ccb3432 --- /dev/null +++ b/style/contributor.css @@ -0,0 +1,41 @@ +#contributors{ + display: grid; +} + +#contributors h4{ + text-decoration-line: underline; + margin: 1rem auto; +} + +.dev-card{ + margin: 5rem 0; + border-radius: 14px; + padding: 2rem 1rem; + background-image: url('../assets/watermark.png'); + background-repeat: no-repeat; + background-size: cover; +} + +.dev-card .dev-picture{ + width: 250px; + height: 250px; + border-radius: 50%; + margin: 0 auto; + overflow: hidden; +} + +.dev-card p{ + margin: 0 0 2rem 0; +} + +.dev-card footer{ + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} + +.dev-card footer img{ + width: 2rem; + flex-basis: 2rem; +} + diff --git a/style/features.css b/style/features.css new file mode 100644 index 0000000..08c897a --- /dev/null +++ b/style/features.css @@ -0,0 +1,11 @@ +#features{ + display: grid; +} + +#features article{ + margin: 5rem 0; +} + +#features article p{ + margin: 0 0 2rem 0; +} diff --git a/style/footer.css b/style/footer.css new file mode 100644 index 0000000..0de94ec --- /dev/null +++ b/style/footer.css @@ -0,0 +1,42 @@ +footer{ + display: grid; + gap: 4rem; + text-align: center; +} + +#donate, #copyrights{ + display: grid; + gap: 1rem; +} + +#donate{ + grid-template-columns: 1fr 1fr 1fr; + grid-template-areas: + 'title title title' + 'mascot mascot lp' + 'p p p' + ; + padding-top: 2rem; +} + +#donate h4{ grid-area: title; } + +#donate > img{ + grid-area: mascot; +} + +#donate .btn{ + grid-area: lp; + width: 120px; + margin: auto; +} + +#donate p{ grid-area: p; } + +#copyrights{ + padding-bottom: 2rem; +} + +#copyrights img{ + margin: auto; +} diff --git a/style/header.css b/style/header.css new file mode 100644 index 0000000..aa6581b --- /dev/null +++ b/style/header.css @@ -0,0 +1,55 @@ +/* Header */ + +.site-header-bg{ +} + +.site-header { + display: grid; + grid-template-areas: + 'nav nav' + 'title title' + '. .' + '. img' + '. img' + ; + height: 400px; +} + +.site-navigation { + grid-area: nav; + display: flex; + justify-content: space-between; + gap: 2rem; +} + +.site-navigation .flex-wrapper{ + display: flex; + flex-wrap: wrap; + justify-content: end; + gap: 1rem; +} + +.site-navigation .flex-wrapper .anchor-link{ + padding: .5rem; +} + +.site-title{ + grid-area: title; + font-size: 2.5rem; +} + +.site-description{ + grid-column: 1/3; + grid-row: 3/5; + font-size: 1.5rem; +} + +.header-mascot-img{ + grid-area: img; + height: 200px; +} + +.nav-link:hover, .nav-link:focus-visible{ + color: var(--acent-color-e); + text-decoration-line: underline; +} diff --git a/style/hero-section.css b/style/hero-section.css new file mode 100644 index 0000000..c62d02d --- /dev/null +++ b/style/hero-section.css @@ -0,0 +1,11 @@ +#hero-section{ + display: grid; + gap: 2rem; + padding-top: 3rem; + padding-bottom: 3rem; +} + +#hero-section .btn{ + width: min-content; + margin: auto; +} diff --git a/style/main.css b/style/main.css index 70b53d8..426b55d 100644 --- a/style/main.css +++ b/style/main.css @@ -1,17 +1,152 @@ @import "../node_modules/normalize.css/normalize.css"; +/* I don't know what is this line for but I keep it any ways. + * move the header to a separeted file. + */ -/* Header */ +/* + * GLOBAL +*/ +:root{ + --primary-color-f: #fffaee; + + --secondary-color-a: #161f29; + --secondary-color-b: #1d2b3b; + --secondary-color-c: #394655; + --secondary-color-d: #435062; + --secondary-color-e: #6b798c; -.site-header { - background: rgb(48,48,48); - background: linear-gradient(45deg, rgba(48,48,48,1) 0%, rgba(77,77,77,1) 100%); - color: #fff; - display: flex; - flex-direction: column; - padding: 1em 3em; + --acent-color-a: #763600; + --acent-color-b: #a05900; + --acent-color-c: #c87a00; + --acent-color-d: #f49e00; + --acent-color-e: #fea607; } -.site-navigation { - display: flex; - align-items: center; +*{ + font-family: inherit; + box-sizing: border-box; + position: relative; + margin: 0; + padding: 0; + color: inherit; + fill: inherit; + text-decoration: none; + list-style: none; + font-size: .9rem; + scrollbar-width: thin; +} +*:focus-visible{ + outline: 1px dashed var(--acent-color-e); +} + +h1, h2, h3, h4, h5, h6{ + font-size: 1.7rem; + margin: .4rem 0; +} +/* + * GLOBAL +*/ + + +/* + * COLORS +*/ +.primary-f-bg{background: var(--primary-color-f);} +.primary-f-text{color: var(--primary-color-f);} +.primary-f-fill{fill: var(--primary-color-f);} + +.secondary-a-bg{background: var(--secondary-color-a);} +.secondary-a-text{color: var(--secondary-color-a);} +.secondary-a-fill{fill: var(--secondary-color-a);} + +.secondary-b-bg{background: var(--secondary-color-b);} +.secondary-b-text{color: var(--secondary-color-b);} +.secondary-b-fill{fill: var(--secondary-color-b);} + +.secondary-c-bg{background: var(--secondary-color-c);} +.secondary-c-text{color: var(--secondary-color-c);} +.secondary-c-fill{fill: var(--secondary-color-c);} + +.secondary-d-bg{background: var(--secondary-color-d);} +.secondary-d-text{color: var(--secondary-color-d);} +.secondary-d-fill{fill: var(--secondary-color-d);} + +.secondary-e-bg{background: var(--secondary-color-e);} +.secondary-e-text{color: var(--secondary-color-e);} +.secondary-e-fill{fill: var(--secondary-color-e);} + +.secondary-gradient-bg{ + background-color: var(--secondary-color-b); + background-image: linear-gradient(45deg, var(--secondary-color-b), var(--secondary-color-c)); +} + +.acent-a-bg{background: var(--acent-color-a);} +.acent-a-text{color: var(--acent-color-a);} +.acent-a-fill{fill: var(--acent-color-a);} + +.acent-b-bg{background: var(--acent-color-b);} +.acent-b-text{color: var(--acent-color-b);} +.acent-b-fill{fill: var(--acent-color-b);} + +.acent-c-bg{background: var(--acent-color-c);} +.acent-c-text{color: var(--acent-color-c);} +.acent-c-fill{fill: var(--acent-color-c);} + +.acent-d-bg{background: var(--acent-color-d);} +.acent-d-text{color: var(--acent-color-d);} +.acent-d-fill{fill: var(--acent-color-d);} + +.acent-e-bg{background: var(--acent-color-e);} +.acent-e-text{color: var(--acent-color-e);} +.acent-e-fill{fill: var(--acent-color-e);} + +/* + * COLORS +*/ + + +/* Anchor Links */ +.anchor-link{ + font-style: italic; + padding: 0 1rem; + text-decoration-line: underline; +} +.anchor-link:hover, .anchor-link:focus-visible{ + color: var(--acent-color-b); +} + + +/* Butons */ + +.btn{ + display: block; + padding: .7rem 2rem; +} + +.btn:hover, .btn:focus-visible{ + text-decoration-line: underline; + opacity: .9; +} + +/* Content Wrapper */ + +.content-wrapper{ + padding: 1rem; + max-width: 1500px; + border-left: 1px solid #333; + border-right: 1px solid #333; + margin: 0 auto; +} + +/* Setion Titles */ +.title{ + font-size: 2.7rem; + margin: 3rem auto; +} +.subtitle{ + font-size: 1.7rem; +} + +section{ + text-align: center; }