From c9dfd3447ba0452eb9c7df7678c2807803143239 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABtan=20L=2E=20H=2E-F?= Date: Wed, 3 May 2023 11:15:12 +0200 Subject: [PATCH] Improved design --- assets/css/style.css | 71 ++++++++++++++++----- index.en.html | 142 ++++++++++++++++++++++------------------- index.fr.html | 146 ++++++++++++++++++++++++------------------- 3 files changed, 217 insertions(+), 142 deletions(-) diff --git a/assets/css/style.css b/assets/css/style.css index cc15d38..14f551b 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -15,7 +15,9 @@ body { line-height: 1.5; font-weight: 400; margin: 0; - padding: 0; + padding-top: 8vh; + padding-left: 5rem; + padding-right: 5rem; min-height: 100vh; text-rendering: optimizeLegibility; background-color: #e1e0e2; @@ -41,37 +43,54 @@ body { } } +.top-border { + position: absolute; + border-top: 6px solid #1e1f1d; + top: 0; + right: 0; + left: 0; +} + .top-logo { position: absolute; top: 0; - left: 0; - border: 0; - width: 180px; - transition: left .1s ease-in-out, opacity .1s ease-in-out; - z-index: 999; - opacity: .8; + left: 5rem; + height: 50px; } -.top-logo:hover { - opacity: 1; +.background-logo { + position: absolute; + bottom: 0; + right: 5rem; + height: 500px; + opacity: 0.1; + z-index: -9999; + margin-bottom: 35px; + display: none; +} + +main { + position: relative; +} + +ul { + list-style-type: none; + padding: 0px; + margin: 0px; } .container { display: flex; width: 100%; margin: auto; - padding-left: 16px; - padding-right: 16px; } - .elem { padding: 16px; box-shadow: 0 1px 2px #00000010, 0 8px 12px #00000020; border-radius: 12px; overflow: hidden; background-color: #d7d7d7; - margin-top: 8vh; } .header { @@ -91,7 +110,6 @@ body { .content p { hyphens: auto; line-height: 1.8; - text-justify: ideographic; margin-bottom: 1em; } @@ -132,6 +150,15 @@ footer a>svg:hover { } @media screen and (max-width:600px) { + body { + padding-left: 1rem; + padding-right: 1rem; + } + + .top-logo { + left: 1rem; + } + .content { font-size: 16px; } @@ -159,6 +186,13 @@ footer a>svg:hover { } } +@media screen and (min-width: 100em) { + .background-logo { + display: block; + } + +} + footer { padding-top: 16px; padding-bottom: 16px; @@ -193,10 +227,19 @@ footer a { color: #e1e0e2; } + .top-border { + border-top: 7px solid #e1e0e2; + + } + .top-logo { filter: invert(100%); } + .background-logo { + filter: invert(100%); + } + .logo { filter: invert(100%); } diff --git a/index.en.html b/index.en.html index 86fb1ee..c0e597d 100644 --- a/index.en.html +++ b/index.en.html @@ -42,62 +42,69 @@ -
+ + -
-
-
-

Welcome to collabore tunnel

-
- Make your local services accessible to all on the public Internet. +
+
+
+
+

Welcome to collabore tunnel

+
+ Make your local services accessible to all on the public Internet. +
-
-
-

collabore tunnel is a free and open source service offered as part of the club elec collabore - platform operated by club elec that allows you to expose your local services on the public - Internet.
- Showing your friends or colleagues your work on your next website (for example) has never been - easier!

-

Features

-

-

    -
  • ✔️ Easy to use
    • -
  • ✔️ No download and no signup
    • -
  • ✔️ Use the SSH client already installed on your device
    • -
  • ✔️ Generates a random link that can be shared with anyone
    • -
  • ✔️ Compatible with any protocol
    • -
-

-

Usage

- 
ssh -R /:host:port ssh.tunnel.collabore.fr
-

Demo

- 
$ ssh -R /:localhost:8000 ssh.tunnel.collabore.fr
+                

+                    
collabore tunnel is a free and open source service offered as part of the club elec collabore
+                        platform operated by club elec that allows you to expose your local services on the public
+                        Internet.

+                        Showing your friends or colleagues your work on your next website (for example) has never been
+                        easier!

+                    
Features

+                    

+                        
    
+                            
  • ✅ Easy to use
    • 
+                            
  • ✅ No download and no signup
    • 
+                            
  • ✅ Use the SSH client already installed on your device
    • 
+                            
  • ✅ Generates a random link that can be shared with anyone
    • 
+                            
  • ✅ Compatible with any protocol
    • 
+                        

+                    

+                    
Usage

+                    
ssh -R /:host:port ssh.tunnel.collabore.fr

+                    
Demo

+                    
$ ssh -R /:localhost:8000 ssh.tunnel.collabore.fr
 ===============================================================================
 Welcome to collabore tunnel!
 collabore tunnel is a free and open source service offered as part of the
@@ -112,26 +119,35 @@ student organisation.
 Your local service has been exposed to the public Internet address: hivs5g9l739ywr2n.tnl.clb.re
 TLS termination: https://hivs5g9l739ywr2n.tnl.clb.re
 

-            

-
-
-
- + + + \ No newline at end of file diff --git a/index.fr.html b/index.fr.html index 7a3f65d..044773b 100644 --- a/index.fr.html +++ b/index.fr.html @@ -42,64 +42,71 @@ -
+ + -
-
-
-

Bienvenue sur collabore tunnel

-
- Rendez vos services locaux accessibles à toutes et tous sur l’Internet public. +
+
+
+
+

Bienvenue sur collabore tunnel

+
+ Rendez vos services locaux accessibles à toutes et tous sur l’Internet public. +
-
-
-

collabore tunnel est un service gratuit et open source proposé dans le cadre de la plateforme club - elec collabore - qui est exploitée par le club elec, qui vous permet d’exposer vos services locaux sur l’Internet - public.
- Montrer à vos amis ou collègues votre travail sur votre prochain site Web (par exemple) n’a jamais - été aussi - facile !

-

Caractéristiques

-

-

    -
  • ✓ Facile à utiliser
    • -
  • ✓ Pas de téléchargement ni d’inscription
    • -
  • ✓ Utilise le client SSH déjà installé sur votre appareil
    • -
  • ✓ Génère un lien aléatoire qui peut être partagé avec n’importe qui
    • -
  • ✓ Compatible avec n’importe quel protocole
    • -
-

-

Utilisation

- 
ssh -R /:host:port ssh.tunnel.collabore.fr
-

Démonstration

- 
$ ssh -R /:localhost:8000 ssh.tunnel.collabore.fr
+                

+                    
collabore tunnel est un service gratuit et open source proposé dans le cadre de la plateforme club
+                        elec collabore
+                        qui est exploitée par le club elec, qui vous permet d’exposer vos services locaux sur l’Internet
+                        public.

+                        Montrer à vos amis ou collègues votre travail sur votre prochain site Web (par exemple) n’a jamais
+                        été aussi
+                        facile !

+                    
Caractéristiques

+                    

+                        
    
+                            
  • ✅ Facile à utiliser
    • 
+                            
  • ✅ Pas de téléchargement ni d’inscription
    • 
+                            
  • ✅ Utilise le client SSH déjà installé sur votre appareil
    • 
+                            
  • ✅ Génère un lien aléatoire qui peut être partagé avec n’importe qui
    • 
+                            
  • ✅ Compatible avec n’importe quel protocole
    • 
+                        

+                    

+                    
Utilisation

+                    
ssh -R /:host:port ssh.tunnel.collabore.fr

+                    
Démonstration

+                    
$ ssh -R /:localhost:8000 ssh.tunnel.collabore.fr
 ===============================================================================
 Welcome to collabore tunnel!
 collabore tunnel is a free and open source service offered as part of the
@@ -114,26 +121,35 @@ student organisation.
 Your local service has been exposed to the public Internet address: hivs5g9l739ywr2n.tnl.clb.re
 TLS termination: https://hivs5g9l739ywr2n.tnl.clb.re
 

-            

-
-
-
- + + + \ No newline at end of file