Skip to content

Commit

Permalink
Merge pull request #2 from TypeFox/layout-n-style
Browse files Browse the repository at this point in the history 
First style and layout
  • Loading branch information
@jbicker
jbicker authored Jun 24, 2024
2 parents ac0ea02 + 310de86 commit a472391
Show file tree
Hide file tree
Showing 9 changed files with 260 additions and 67 deletions.
70 changes: 32 additions & 38 deletions hugo/content/_index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,41 +2,35 @@
title: "Open Collaboration Tools"
type: oct
---

<section style="height: calc(100vh - 96px); display: flex; flex-direction: column; align-items: center;">
<div style="width: fit-content; max-width: 1200px; margin: auto; text-align: center;">
<h1>Collaborative Editing for your IDE or custom Editor</h1>
<p>Open Collaboration Tools is an set of open-source tools, libraries and extensions to allow real-time collaborative editing across devices and tools</p>
<p>It's built to be easily extensible, to enable creating custom clients or modifying the server to suit your specific needs</p>
</div>
</section>

<section>
<div style="max-width: 1200px; margin: auto;">
<!--TODO more detail and more content-->
<h2>Features</h2>
<p>Public Server</p>
<p>Extend and deploy your own server</p>
<p>Multiple already available clients</p>
</div>
</section>

<section>
<div style="max-width: 1200px; margin: auto;;">
<h2>Clients</h2>
<p>The Project currently offers clients for the following editors:</p>
<div><a href="https://code.visualstudio.com/">VS Code - OCT Tools</a></div> <!-- TODO This is a link to the VS Code marketplace page -->
<div><a href="https://theia-ide.org/">Eclipse Theia - @theia/collaboration</a></div> <!-- TODO Link to the npm registry package maybe? -->
<div>Monaco</div> <!-- TODO Link to the library in npm -->
</div>
</section>

<footer>
<div style="display: flex; justify-content: center; align-items: center; gap: 12px; padding-top: 50px;">
<a href="/privacy">Privacy Policy</a>
<p> • </p>
<a href="/tos">Terms of Use</a>
<p> • </p>
Copyright ©️ <a href="https://www.typefox.io/" target="_blank">TypeFox GmbH</a>
</div>
</footer>
<section class="hero-section bg-indigo-dark" style="border-bottom: solid 20px #A50132;">
<div class="hero-content">
<div class="hero-text fg-white">
<div class="hero-text-content">
<h1 class="urbanist-bold">Collaborative Editing for your IDE or custom Editor</h1>
<p class="urbanist-regular">Open Collaboration Tools is an set of open-source tools, libraries and extensions to allow real-time collaborative editing across devices and tools</p>
<p class="urbanist-regular">It's built to be easily extensible, to enable creating custom clients or modifying the server to suit your specific needs</p>
</div>
</div>
<div class="hero-image">
<image src="/assets/oct-image.png" alt="Collaborative Editing" />
</div>
</div>
</section>
<section class="feature-section">
<div class="feature-content" style="justify-content: space-between;">
<div class="feature-text">
<!--TODO more detail and more content-->
<h1 class="urbanist-bold">Features</h1>
<p class="urbanist-regular">Public Server</p>
<p class="urbanist-regular">Extend and deploy your own server</p>
<p class="urbanist-regular">Multiple already available clients</p>
</div>
<div class="feature-text">
<h1 class="urbanist-bold">Clients</h1>
<p class="urbanist-regular">The Project currently offers clients for the following editors:</p>
<div class="urbanist-regular"><a href="https://code.visualstudio.com/">VS Code - OCT Tools</a></div> <!-- TODO This is a link to the VS Code marketplace page -->
<div class="urbanist-regular"><a href="https://theia-ide.org/">Eclipse Theia - @theia/collaboration</a></div> <!-- TODO Link to the npm registry package maybe? -->
<div class="urbanist-regular">Monaco</div> <!-- TODO Link to the library in npm -->
</div>
</div>
</section>
23 changes: 13 additions & 10 deletions hugo/layouts/oct/baseof.html
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,17 @@
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
{{ partial "oct-head" . }}
</head>

<body>
{{ partial "oct-header" . }}
<main>
{{ block "main" . }}
{{ end }}
</main>
</body>
<head>
{{ partial "oct-head" . }}
</head>

<body>
{{ partial "oct-header" . }}
<main>
{{ block "main" . }}
{{ end }}
</main>
{{ partial "oct-footer" . }}
</body>

</html>
11 changes: 11 additions & 0 deletions hugo/layouts/partials/oct-footer.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<footer class="barlow-light bg-red">
<div class="footer-content">
<a href="/privacy" class="fg-white">Privacy Policy</a>
<p> • </p>
<a href="/tos" class="fg-white">Terms of Use</a>
<p> • </p>
<div>
Copyright ©️ <a href="https://www.typefox.io/" target="_blank" class="fg-white">TypeFox GmbH</a>
</div>
</div>
</footer>
7 changes: 2 additions & 5 deletions hugo/layouts/partials/oct-head.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,5 @@
<meta charset="utf-8">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&family=Red+Hat+Display:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/landing-showcase.css">
<link rel="stylesheet" href="/showcase/bundle.css">
<script src="/showcase/bundle.js" type="text/javascript"></script>
<link href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet"><link rel="stylesheet" href="/css/landing-showcase.css">
<link rel="stylesheet" href="/css/style.css">
27 changes: 17 additions & 10 deletions hugo/layouts/partials/oct-header.html
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,18 @@
<header style="display: flex; flex-direction: row; position: sticky; border-bottom: 1px solid black;">
<a href="/#" style="flex-grow: 1; text-decoration: none;">
<h1 style="color: black;">Open Collaboration Tools</h1>
</a>
<nav style="display: flex; flex-direction: row; align-items: center;">

<a href="https://github.com/TypeFox/open-collaboration-tools" target="_blank">
<img src="/assets/github-mark.svg" alt="github repository" style="width: 43px; height: 43px;">
</a>
</nav>
<header class="bg-indigo-dark">
<div class="header-content">
<div class="logo-container">
<img src="/assets/logo.jpg" alt="Open Collaboration Tools Logo" style="width: 110px; height: 110px;">
<h1 class="barlow-regular fg-indigo-light" style="width: 140px; font-size: 24px;">Open Collaboration Tools</h1>
</div>
<nav>
<a href="/#" class="urbanist-bold fg-indigo-light">Documentation</a>
<a href="/#" class="urbanist-bold fg-indigo-light">Playground</a>
<a href="/#" class="urbanist-bold fg-indigo-light">Support</a>
</nav>
<nav>
<a href="https://github.com/TypeFox/open-collaboration-tools" target="_blank">
<img src="/assets/github-mark.svg" alt="github repository" style="width: 43px; height: 43px;">
</a>
</nav>
</div>
</header>
2 changes: 1 addition & 1 deletion hugo/static/assets/github-mark.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added hugo/static/assets/logo.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added hugo/static/assets/oct-image.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
187 changes: 184 additions & 3 deletions hugo/static/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,191 @@ html {
}

body {
height: 100%;
overflow: auto;
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
}

header, footer {
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
}

header {
width: 100%;
display: flex;
justify-content: center;
position: sticky;
}

.header-content {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 0;
max-width: 1300px;
width: 85%;
}

.logo-container {
display: flex;
align-items: center;
}

nav {
display: flex;
align-items: center;
}

nav a {
margin-left: 1rem;
text-decoration: none;
}

main {
height: 100%;
flex-grow: 1;
flex-shrink: 0;
flex-basis: auto;
}

.hero-section, .feature-section {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}

.hero-content, .feature-content {
display: flex;
align-items: center;
justify-content: center;
width: 80%;
max-width: 1200px;
margin-bottom: 50px;
}

.hero-text {
flex: 5;
}

.hero-text-content {
width: 90%;
}

.hero-text h1, .feature-text h1 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
}

.hero-image {
flex: 4;
}

.hero-image img {
width: 100%;
height: auto;
}

.feature-text {
width: 300px;
}

footer {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
color: #FFFFFF;
}

.footer-content {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 0;
width: 80%;
max-width: 640px;
}

footer a {
text-decoration: none;
}

.barlow-light {
font-family: "Barlow", sans-serif;
font-weight: 300;
font-style: normal;
}

.barlow-regular {
font-family: "Barlow", sans-serif;
font-weight: 400;
font-style: normal;
}

.barlow-medium {
font-family: "Barlow", sans-serif;
font-weight: 500;
font-style: normal;
}

.barlow-semibold {
font-family: "Barlow", sans-serif;
font-weight: 600;
font-style: normal;
}

.barlow-bold {
font-family: "Barlow", sans-serif;
font-weight: 700;
font-style: normal;
}

.barlow-extrabold {
font-family: "Barlow", sans-serif;
font-weight: 800;
font-style: normal;
}

.urbanist-regular {
font-family: "Urbanist", sans-serif;
font-weight: 400;
font-style: normal;
}

.urbanist-bold {
font-family: "Urbanist", sans-serif;
font-weight: 700;
font-style: normal;
}

.bg-indigo-dark {
background-color: #020E22;
}

.bg-indigo-light {
background-color: #CBD3E7;
}

.bg-red {
background-color: #A50132;
}

.fg-indigo-dark {
color: #020E22;
}

.fg-indigo-light {
color: #CBD3E7;
}

.fg-white {
color: #FFFFFF;
}

.fg-black {
color: #000000;
}

0 comments on commit a472391

Please sign in to comment.