Commit 5126e768 authored by Guillaume Grossetie's avatar Guillaume Grossetie 🎧
Browse files

implement footer

parent b7511595
......@@ -155,11 +155,88 @@
</section>
</main>
<footer class="footer">
<div class="logo">
<img src="./assets/img/asciidoc-horizontal-white.svg" alt="AsciiDoc Logo"/>
<div class="asciidoc">
<div class="category brand">
<div class="logo">
<img src="./assets/img/asciidoc-horizontal-white.svg" alt="AsciiDoc Logo" />
</div>
</div>
<div class="category work">
<ul>
<li><a href="https://asciidoc-wg.eclipse.org/">Working Group</a></li>
<li><a href="https://projects.eclipse.org/projects/asciidoc.asciidoc-lang">Language Project</a></li>
</ul>
</div>
<div class="category documentation">
<ul>
<li><a href="https://docs.asciidoctor.org/asciidoc/latest/">Documentation</a></li>
<li><a href="https://docs.asciidoctor.org/asciidoc/latest/syntax-quick-reference/">Syntax Quick Reference</a></li>
</ul>
</div>
<div class="category ecosystem">
<ul>
<li><a href="#">Processors</a></li>
<li><a href="#">Ecosystem</a></li>
</ul>
</div>
</div>
<div class="copyright">
© 2022 AsciiDoc. All rights reserved
<div class="eclipse">
<div class="category foundation">
<h4>Eclipse Foundation</h4>
<ul>
<li><a href="https://www.eclipse.org/org/">About Us</a></li>
<li><a href="https://www.eclipse.org/org/foundation/contact.php">Contact Us</a></li>
<li><a href="https://www.eclipse.org/donate">Donate</a></li>
<li><a href="https://www.eclipse.org/membership/">Members</a></li>
<li><a href="https://www.eclipse.org/org/documents/">Governance</a></li>
<li><a href="https://www.eclipse.org/org/documents/Community_Code_of_Conduct.php">Code of Conduct</a></li>
<li><a href="https://www.eclipse.org/artwork/">Logo and Artwork</a></li>
<li><a href="https://www.eclipse.org/org/foundation/directors.php">Board of Directors</a></li>
</ul>
</div>
<div class="category legal">
<h4>Legal</h4>
<ul>
<li><a href="https://www.eclipse.org/legal/privacy.php">Privacy Policy</a></li>
<li><a href="https://www.eclipse.org/legal/termsofuse.php">Terms of Use</a></li>
<li><a href="https://www.eclipse.org/legal/copyright.php">Copyright Agent</a></li>
<li><a href="https://www.eclipse.org/legal/epl-2.0/">Eclipse Public License</a></li>
<li><a href="https://www.eclipse.org/legal/">Legal Resources</a></li>
</ul>
</div>
<div class="category links">
<h4>Useful Links</h4>
<ul>
<li><a href="https://bugs.eclipse.org/bugs/">Report a Bug</a></li>
<li><a href="//help.eclipse.org/">Documentation</a></li>
<li><a href="https://www.eclipse.org/contribute/">How to Contribute</a></li>
<li><a href="https://www.eclipse.org/mail/">Mailing Lists</a></li>
<li><a href="https://www.eclipse.org/forums/">Forums</a></li>
<li><a href="//marketplace.eclipse.org">Marketplace</a></li>
</ul>
</div>
<div class="category other">
<h4>Other</h4>
<ul>
<li><a href="https://www.eclipse.org/ide/">IDE and Tools</a></li>
<li><a href="https://www.eclipse.org/projects">Projects</a></li>
<li><a href="https://www.eclipse.org/org/workinggroups/">Working Groups</a></li>
<li><a href="https://www.eclipse.org/org/research/">Research@Eclipse</a></li>
<li><a href="https://www.eclipse.org/security/">Report a Vulnerability</a></li>
<li><a href="https://status.eclipse.org">Service Status</a></li>
</ul>
</div>
<div class="copyright">
Copyright © Eclipse Foundation. All Rights Reserved.
</div>
<div class="social">
<ul>
<li><a class="social-media-link twitter" href="https://twitter.com/EclipseFdn"></a></li>
<li><a class="social-media-link facebook" href="https://www.facebook.com/eclipse.org"></a></li>
<li><a class="social-media-link youtube" href="https://www.youtube.com/user/EclipseFdn"></a></li>
<li><a class="social-media-link linkedin" href="https://www.linkedin.com/company/eclipse-foundation"></a></li>
</ul>
</div>
</div>
</footer>
<script src="./assets/js/main.bundle.js"></script>
......
......@@ -13,6 +13,7 @@
--brand-color-900: #194954;
--brand-color-1000: #033844;
--gray-color-100: #F3F4F6;
--gray-color-200: #E5E7EB;
--gray-color-500: #6B7280;
--gray-color-600: #202020;
......@@ -24,9 +25,17 @@
body {
font-family: var(--brand-font-primary);
color: var(--gray-color-600);
background: linear-gradient(#e5e5e5 0%, #F9FAFB 35%);
background: linear-gradient(#F9FAFB 0%, #ffffff 35%);
/* fallback */
background-color: #F9FAFB;
background-color: #ffffff;
}
@media screen and (min-width: 769px) {
body {
background: linear-gradient(#eaeaea 0%, #F9FAFB 25%);
/* fallback */
background-color: #F9FAFB;
}
}
.header {
......@@ -39,7 +48,7 @@ body {
z-index: 1;
}
@media screen and (min-width: 769px) {
@media screen and (min-width: 768px) {
.header::before {
content: "";
position: absolute;
......@@ -79,10 +88,18 @@ body {
font-weight: 700;
}
@media screen and (min-width: 769px) {
@media screen and (min-width: 768px) {
.header .menu {
flex-direction: row;
gap: 2.5rem;
padding: 0.75rem;
margin-left: auto;
}
}
@media screen and (min-width: 1024px) {
.header .menu {
flex-direction: row;
gap: 1rem;
padding: 0.75rem;
margin-left: auto;
}
......@@ -137,7 +154,8 @@ header .logo > img {
}
.main > .hero .imageblock > .content {
height: 200px;
height: 35vw;
max-height: 400px;
overflow: hidden;
}
......@@ -145,7 +163,7 @@ header .logo > img {
margin-top: 2rem;
}
@media screen and (min-width: 769px) {
@media screen and (min-width: 768px) {
.main > .hero {
text-align: center;
}
......@@ -153,18 +171,16 @@ header .logo > img {
.main > .hero p {
text-align: center;
}
.main > .hero .imageblock > .content {
height: 360px;
}
}
.main > .hero .imageblock img {
border-top-left-radius: 7px;
border-top-right-radius: 7px;
filter: drop-shadow(0px 5px 20px rgba(0, 0, 0, 0.1));
}
.hero .paragraph {
width: 100%;
}
.main h1 {
font-family: var(--brand-font-secondary);
font-size: 2.25em;
......@@ -288,9 +304,14 @@ section.about {
color: #272e3b;
padding-top: 3rem;
padding-bottom: 3rem;
background-image: url(../img/grid-watermark.png);
background-repeat: no-repeat;
background-position: right 3rem;
}
@media screen and (min-width: 1024px) {
section.about {
background-image: url(../img/grid-watermark.png);
background-repeat: no-repeat;
background-position: right 2.595rem;
}
}
section.about .columns {
......@@ -401,6 +422,11 @@ section.try {
@media screen and (min-width: 1024px) {
section.try {
padding-top: 5.75rem;
background-image: url(../img/grid-watermark-sm.png);
background-repeat: no-repeat;
background-position-y: -2rem;
background-position-x: calc(50% - 1120px/2 + 225px);
}
}
......@@ -836,7 +862,6 @@ section.tools {
margin-top: 3rem;
margin-bottom: 3rem;
max-width: 1360px;
background-color: #F9FAFB;
}
section.tools h2 {
......@@ -1118,16 +1143,12 @@ section.docs a {
}
}
@media screen and (min-width: 769px) {
@media screen and (min-width: 768px) {
.main a.button {
display: inline-flex;
}
}
.hero .paragraph {
width: 100%;
}
.main .paragraph + .paragraph {
margin-top: 1rem;
}
......@@ -1152,25 +1173,205 @@ section.docs a {
}
.footer {
min-height: 350px;
background-color: #323232;
display: flex;
flex-direction: column;
font-size: 0.875rem;
color: var(--brand-color-200);
}
.footer .asciidoc {
background-color: var(--brand-color-800);
display: grid;
column-gap: 5rem;
row-gap: 2rem;
justify-content: center;
padding-bottom: 3.125rem;
padding-top: 3.375rem;
}
.footer .eclipse::before {
content: "";
display: block;
border-top: 1.5px solid rgba(255, 255, 255, 0.4);
width: calc(100% - 4rem);
position: absolute;
margin: 0 auto;
top: -1.5px;
left: 0;
right: 0;
}
.footer .eclipse {
position: relative;
background-color: var(--brand-color-900);
display: grid;
justify-content: center;
padding-top: 2rem;
padding-bottom: 3rem;
}
.footer .eclipse,
.footer .asciidoc {
grid-template-columns: 250px 250px 250px 250px;
padding-right: 2rem;
padding-left: 2rem;
}
.footer .eclipse .copyright {
grid-row: 2;
grid-column: span 3;
padding-top: 4rem;
color: var(--gray-color-100);
}
@media screen and (min-width: 480px) and (max-width: 767px) {
.footer .eclipse,
.footer .asciidoc {
grid-template-columns: 175px 175px;
column-gap: 2rem;
padding-right: 2rem;
padding-left: 2rem;
}
}
@media screen and (max-width: 479px) {
.footer .eclipse,
.footer .asciidoc {
grid-template-columns: 1fr 1fr;
column-gap: 1rem;
padding-right: 1.25rem;
padding-left: 1.25rem;
}
}
@media screen and (max-width: 767px) {
.footer .category.work,
.footer .category.ecosystem {
grid-row: 2;
}
.footer .category.documentation {
grid-row: 3;
grid-column: span 2;
}
.footer .category.links,
.footer .category.other {
grid-row: 2;
}
.footer .eclipse {
row-gap: 2rem;
}
.footer .eclipse .copyright {
grid-row: 3;
max-width: 225px;
line-height: 1.75rem;
padding-top: 0.25rem;
}
.footer .eclipse .social {
grid-row: 4;
grid-column: span 2;
justify-content: start;
}
.footer .social ul {
column-gap: 1rem;
}
}
@media screen and (min-width: 768px) {
.footer .eclipse,
.footer .asciidoc {
grid-template-columns: 150px 150px 150px 150px;
column-gap: 2rem;
}
}
@media screen and (min-width: 1024px) {
.footer .eclipse,
.footer .asciidoc {
grid-template-columns: 200px 175px 175px 175px;
column-gap: 4rem;
}
}
@media screen and (min-width: 1408px) {
.footer .eclipse,
.footer .asciidoc {
grid-template-columns: 250px 250px 250px 250px;
column-gap: 5rem;
}
}
.footer .category h4 {
font-family: var(--brand-font-primary);
font-size: 1rem;
font-weight: 700;
line-height: 1.625rem;
letter-spacing: 0em;
color: rgba(255, 255, 255, 0.5);
color: var(--brand-color-100);
padding-bottom: 1rem;
}
.footer .category ul {
display: grid;
row-gap: 0.5rem;
}
.footer a {
color: var(--brand-color-200);
text-decoration: none;
font-family: var(--brand-font-primary);
font-size: 0.875rem;
color: #D9DBE1;
align-items: center;
font-weight: 400;
line-height: 1.625rem;
}
.footer .logo {
margin-top: 1em;
margin-bottom: 2em;
.footer a:hover {
text-decoration: underline;
}
.footer .logo > img {
height: 2rem;
.footer .asciidoc .logo > img {
height: 2.75rem;
}
.footer .social {
display: grid;
align-items: flex-end;
}
.footer .social ul {
display: grid;
grid-auto-flow: column;
justify-content: space-evenly;
}
.footer .social-media-link {
height: 1.5rem;
width: 1.5rem;
display: block;
background-repeat: no-repeat;
background-size: auto;
background-position: center;
}
.footer .social .linkedin {
background-image: url("../img/linkedin.svg");
}
.footer .social .youtube {
background-image: url("../img/youtube.svg");
}
.footer .social .twitter {
background-image: url("../img/twitter.svg");
}
.footer .social .facebook {
background-image: url("../img/facebook.svg");
}
/* tabs */
.tabs {
margin-bottom: -1px;
}
.tabs ul {
display: flex;
flex-wrap: wrap;
......@@ -1178,6 +1379,7 @@ section.docs a {
padding: 0;
column-gap: 1.25rem;
row-gap: 2rem;
border-bottom: 1px solid var(--gray-color-200);
}
.tabs li {
......@@ -1260,7 +1462,7 @@ section.docs a {
vertical-align: top;
}
@media screen and (max-width: 768px) {
@media screen and (max-width: 767px) {
.tabset > .select {
display: inline-block;
}
......
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 12.067C0 18.033 4.333 22.994 10 24V15.333H7V12H10V9.333C10 6.333 11.933 4.667 14.667 4.667C15.533 4.667 16.467 4.8 17.333 4.933V8H15.8C14.333 8 14 8.733 14 9.667V12H17.2L16.667 15.333H14V24C19.667 22.994 24 18.034 24 12.067C24 5.43 18.6 0 12 0C5.4 0 0 5.43 0 12.067Z" fill="white"/>
</svg>
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.7206e-07 1.83776C2.7206e-07 1.35029 0.193646 0.882788 0.538338 0.538096C0.88303 0.193404 1.35053 -0.00024169 1.838 -0.00024169H20.16C20.4016 -0.000636242 20.6409 0.0466212 20.8641 0.138825C21.0874 0.231029 21.2903 0.366368 21.4612 0.537095C21.6322 0.707821 21.7677 0.910582 21.8602 1.13377C21.9526 1.35695 22.0001 1.59618 22 1.83776V20.1598C22.0003 20.4014 21.9529 20.6407 21.8606 20.864C21.7683 21.0873 21.6328 21.2902 21.462 21.4611C21.2912 21.632 21.0884 21.7675 20.8651 21.8599C20.6419 21.9524 20.4026 21.9999 20.161 21.9998H1.838C1.59655 21.9998 1.35746 21.9522 1.1344 21.8598C0.911335 21.7673 0.708671 21.6318 0.537984 21.4611C0.367297 21.2903 0.231932 21.0875 0.139623 20.8644C0.0473133 20.6413 -0.000131096 20.4022 2.7206e-07 20.1608V1.83776ZM8.708 8.38776H11.687V9.88376C12.117 9.02376 13.217 8.24976 14.87 8.24976C18.039 8.24976 18.79 9.96276 18.79 13.1058V18.9278H15.583V13.8218C15.583 12.0318 15.153 11.0218 14.061 11.0218C12.546 11.0218 11.916 12.1108 11.916 13.8218V18.9278H8.708V8.38776ZM3.208 18.7908H6.416V8.24976H3.208V18.7898V18.7908ZM6.875 4.81176C6.88105 5.08643 6.83217 5.35955 6.73124 5.61507C6.63031 5.8706 6.47935 6.10339 6.28723 6.29979C6.09511 6.49619 5.8657 6.65223 5.61246 6.75876C5.35921 6.8653 5.08724 6.92018 4.8125 6.92018C4.53776 6.92018 4.26579 6.8653 4.01255 6.75876C3.7593 6.65223 3.52989 6.49619 3.33777 6.29979C3.14565 6.10339 2.99469 5.8706 2.89376 5.61507C2.79283 5.35955 2.74395 5.08643 2.75 4.81176C2.76187 4.27261 2.98439 3.75955 3.36989 3.38244C3.75539 3.00534 4.27322 2.79418 4.8125 2.79418C5.35178 2.79418 5.86961 3.00534 6.25512 3.38244C6.64062 3.75955 6.86313 4.27261 6.875 4.81176Z" fill="white"/>
</svg>
<svg width="24" height="20" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M23.6435 2.93683C22.8085 3.30683 21.9115 3.55683 20.9685 3.66983C21.9415 3.08763 22.6694 2.1713 23.0165 1.09183C22.1023 1.63482 21.1018 2.01703 20.0585 2.22183C19.3569 1.4727 18.4276 0.976159 17.4148 0.809307C16.4021 0.642455 15.3626 0.814624 14.4577 1.29909C13.5529 1.78355 12.8333 2.55319 12.4107 3.48854C11.988 4.42388 11.886 5.47258 12.1205 6.47183C10.2682 6.37883 8.45613 5.89738 6.80192 5.05874C5.14772 4.22009 3.68834 3.04299 2.5185 1.60383C2.1185 2.29383 1.8885 3.09383 1.8885 3.94583C1.88805 4.71283 2.07693 5.46808 2.43838 6.14457C2.79982 6.82105 3.32266 7.39787 3.9605 7.82383C3.22078 7.8003 2.49737 7.60042 1.8505 7.24083V7.30083C1.85043 8.37657 2.22253 9.41921 2.90368 10.2518C3.58483 11.0844 4.53307 11.6558 5.5875 11.8688C4.90128 12.0545 4.18184 12.0819 3.4835 11.9488C3.781 12.8744 4.3605 13.6839 5.14087 14.2638C5.92124 14.8437 6.86342 15.165 7.8355 15.1828C6.18533 16.4782 4.14739 17.1809 2.0495 17.1778C1.67788 17.1779 1.30658 17.1562 0.9375 17.1128C3.06698 18.482 5.54584 19.2087 8.0775 19.2058C16.6475 19.2058 21.3325 12.1078 21.3325 5.95183C21.3325 5.75183 21.3275 5.54983 21.3185 5.34983C22.2298 4.69081 23.0164 3.87473 23.6415 2.93983L23.6435 2.93683Z" fill="white"/>
</svg>
<svg width="24" height="18" viewBox="0 0 24 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M23.5006 3.50659C23.3647 3.02182 23.1 2.58293 22.7346 2.23659C22.3589 1.87959 21.8984 1.62422 21.3966 1.49459C19.5186 0.999588 11.9946 0.999588 11.9946 0.999588C8.85795 0.9639 5.72205 1.12086 2.60462 1.46959C2.10281 1.6088 1.64318 1.86987 1.26662 2.22959C0.896617 2.58559 0.628617 3.02459 0.488617 3.50559C0.15231 5.31733 -0.0110908 7.15693 0.000617183 8.99959C-0.0113828 10.8406 0.151617 12.6796 0.488617 14.4936C0.625617 14.9726 0.892617 15.4096 1.26362 15.7626C1.63462 16.1156 2.09662 16.3706 2.60462 16.5056C4.50762 16.9996 11.9946 16.9996 11.9946 16.9996C15.1353 17.0353 18.2752 16.8784 21.3966 16.5296C21.8984 16.4 22.3589 16.1446 22.7346 15.7876C23.1046 15.4346 23.3676 14.9956 23.4996 14.5176C23.8447 12.7065 24.0125 10.8662 24.0006 9.02259C24.0266 7.17119 23.859 5.32215 23.5006 3.50559V3.50659ZM9.60262 12.4236V5.57659L15.8626 9.00059L9.60262 12.4236Z" fill="white"/>
</svg>
/* global Asciidoctor */
import Asciidoctor from '@asciidoctor/core'
import { EditorState } from '@codemirror/state'
import { EditorView, keymap } from '@codemirror/view'
......
import { init as initTabSet } from './tabs-block-behavior.js'
import { init as initToggle } from './toggle-behavior.js'
import { init as initInteractiveEditor } from './interactive-editor.js'
import { init as initSyntaxHighlighting } from './syntax-highlighting.js'
import { init as initTabSet } from './tabs-block-behavior.js'
import { init as initToggle } from './toggle-behavior.js'
import { init as initInteractiveEditor } from './interactive-editor.js'
import { init as initSyntaxHighlighting } from './syntax-highlighting.js'
initTabSet()
initToggle()
......
......@@ -166,7 +166,7 @@ In reality, Markdown is the basis for a variety of markup languages that often *
include::{includedir}/md-sample.adoc[]
------
AsciiDoc appears **striking similar** to Markdown, making way for an easy transition.
AsciiDoc appears **strikingly similar** to Markdown, making way for an easy transition.
Where AsciiDoc shines is in **its depth**.
AsciiDoc provides all the essential elements in **technical writing** out of the box.
**No variants** needed.
......
......@@ -23,7 +23,6 @@ function wrap() {
}
}
export default {
input: "pages/assets/js/main.js",
output: {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment