Home Explore Help
Register Sign In
claude
/
simplauncher
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Merge branch 'landing-page'

Beautus 6 years ago
parent
6085de20b9 38497286f3
commit
78cfad0693
7 changed files with 130 additions and 11 deletions
Split View Show Diff Stats
  1. BIN
      docs/assets/favicon-16x16.png
  2. BIN
      docs/assets/favicon-32x32.png
  3. BIN
      docs/assets/ic_launcher-web.png
  4. BIN
      docs/assets/slim-logo.jpg
  5. BIN
      docs/favicon.ico
  6. 23 5
      docs/index.html
  7. 107 6
      docs/main.css

BIN
docs/assets/favicon-16x16.png
View File


BIN
docs/assets/favicon-32x32.png
View File


BIN
docs/assets/ic_launcher-web.png
View File


BIN
docs/assets/slim-logo.jpg
View File


BIN
docs/favicon.ico
View File


+ 23 - 5
docs/index.html
View File 

@@ -1,4 +1,5 @@
 
 <!DOCTYPE html>
 
+<!--suppress HtmlFormInputWithoutLabel, HtmlUnknownTag -->
 
 <html lang="en">
 
 
 <head>
 
@@ -7,15 +8,29 @@
 
   <meta content="ie=edge" http-equiv="X-UA-Compatible"/>
 
   <link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet">
 
   <link href="./main.css" rel="stylesheet">
 
-  <link rel="icon" type="image/png" href="./assets/favicon-32x32.png" sizes="32x32" />
 
-  <link rel="icon" type="image/png" href="./assets/favicon-16x16.png" sizes="16x16" />
 
+  <link rel="icon" type="image/png" href="./assets/favicon-32x32.png" sizes="32x32"/>
 
+  <link rel="icon" type="image/png" href="./assets/favicon-16x16.png" sizes="16x16"/>
 
   <title>Slim</title>
 
 </head>
 
 
 <body>
 
-<header>
 
-  <nav>
 
-    <a href="#">Donate</a>
 
+<header class="site-header">
 
+  <a href="/">
 
+    <img src="./assets/slim-logo.jpg" class="site-header__logo" alt="Slim logo">
 
+  </a>
 
+  <h2 class="site-header__title">Slim Launcher</h2>
 
+  <nav class="header-nav">
 
+    <input type="checkbox" class="nav-trigger" name="nav-trigger" id="nav-trigger"/>
 
+    <label for="nav-trigger">
 
+      <div class="menu-icon">
 
+        <span class="menu-icon__elem"></span>
 
+        <span class="menu-icon__elem"></span>
 
+        <span class="menu-icon__elem"></span>
 
+      </div>
 
+    </label>
 
+    <div class="trigger">
 
+      <a href="https://github.com/sduduzog/slim-launcher" class="header-nav__elem">Github Repo</a>
 
+    </div>
 
   </nav>
 
 </header>
 
 <main role="main">
 
@@ -36,6 +51,9 @@
 
     </div>
 
   </section>
 
 </main>
 
+<footer>
 
+  <p>Made with love by Sdu</p>
 
+</footer>
 
 </body>
 
 
 </html>

+ 107 - 6
docs/main.css
View File 

@@ -1,3 +1,6 @@
 
+:root{
 
+  --max-width: 1280px;
 
+}
 
 * {
 
   box-sizing: border-box;
 
 }
 
@@ -7,27 +10,61 @@ body {
 
   font-family: 'Ubuntu', sans-serif;
 
 }
 
 
-header {
 
-  background-color: red;
 
+.site-header{
 
+  display: flex;
 
+  padding: 5px 50px;
 
+  margin: 30px auto;
 
+  max-width: var(--max-width);
 
+}
 
+
 
+.site-header__title{
 
+  margin: 0;
 
+  padding: 10px;
 
+}
 
+
 
+.site-header__logo{
 
+  height: 50px;
 
+  width: 50px;
 
+  display: block;
 
+  flex-shrink: 0;
 
+}
 
+.header-nav{
 
+  flex-grow: 1;
 
+  display: flex;
 
+  justify-content: flex-end;
 
+}
 
+
 
+.nav-trigger{
 
+  display: none;
 
 }
 
 
-header nav {
 
-  height: 60px;
 
+.menu-icon{
 
   display: none;
 
 }
 
 
+.header-nav__elem{
 
+  color: #000000;
 
+  display: inline-block;
 
+  margin: 15px;
 
+  text-transform: capitalize;
 
+  cursor: pointer;
 
+  text-decoration: none;
 
+}
 
+
 
+.header-nav__elem:hover{
 
+  text-decoration: underline;
 
+}
 
 main {
 
   margin: auto;
 
 }
 
 
 main section > * {
 
-  max-width: 1280px;
 
+  max-width: var(--max-width);
 
 }
 
 
 .wrapper {
 
   padding: 80px 100px;
 
   margin: auto;
 
-  max-width: 1200px;
 
 }
 
 
 .banner .wrapper {
 
@@ -73,6 +110,10 @@ main section > * {
 
   margin-left: 0;
 
 }
 
 
+footer{
 
+  text-align: center;
 
+}
 
+
 
 @media screen and (max-width: 768px) {
 
   .banner .wrapper {
 
     grid-template-columns: 1fr 250px;
 
@@ -109,6 +150,66 @@ main section > * {
 
 }
 
 
 @media screen and (max-width: 450px) {
 
+
 
+  .site-header{
 
+    padding: 5px;
 
+    margin: 0;
 
+  }
 
+
 
+  label[for=nav-trigger]{
 
+    display: block;
 
+    width: 40px;
 
+    margin: 5px;
 
+    height: 38px;
 
+    z-index: 2;
 
+    cursor: pointer;
 
+  }
 
+
 
+  .header-nav{
 
+    position: absolute;
 
+    /*border: 1px solid black;*/
 
+    border-radius: 5px;
 
+    box-shadow: 0 0 5px 1px #cccccc;
 
+    background-color: white;
 
+  }
 
+
 
+  .header-nav{
 
+    position: absolute;
 
+    right: 5px;
 
+    display: flex;
 
+    flex-wrap: wrap;
 
+    max-width: 130px;
 
+  }
 
+
 
+  .menu-icon{
 
+    right: 0;
 
+    display: block;
 
+  }
 
+
 
+  .menu-icon__elem{
 
+    display: block;
 
+    height: 3px;
 
+    width: 20px;
 
+    border-radius: 4px;
 
+    margin: 7px 10px;
 
+    background-color: black;
 
+  }
 
+  input ~ .trigger{
 
+    display: none;
 
+  }
 
+
 
+  input:checked ~ .trigger{
 
+    display: block;
 
+    flex-basis: 100%;
 
+    padding: 5px;
 
+  }
 
+
 
+  .header-nav__elem{
 
+    text-align: right;
 
+    margin: 0;
 
+    padding: 10px 5px;
 
+    display: block;
 
+  }
 
   .wrapper {
 
     padding: 0;
 
   }