Skip to content

Commit

Permalink
UI Fix + About Page
Browse files Browse the repository at this point in the history
  • Loading branch information
@Harry260
Harry260 committed Dec 27, 2021
1 parent 8af6397 commit 24ee3f4
Show file tree
Hide file tree
Showing 14 changed files with 389 additions and 22 deletions.
116 changes: 116 additions & 0 deletions about.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="src/assets/icons/icon.png" type="image/x-icon">
<title>Wikifox - Wikipedia Re-imagined</title>
<meta name="title" content="Wikifox - Wikipedia Re-imagined">
<meta name="description" content="Wikifox is a clean and simplfied version of the real Wikipedaia!">
<meta name="keywords" content="Wikipedia, Wikifox, Wiki, Clean, UI, Harry Tom, Harry260, github.com/harry260">
<meta name="author" content="Harry Tom">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:title" content="Wikifox - Wikipedia Re-imagined">
<meta property="og:description" content="Wikifox is a clean and simplfied version of the real Wikipedaia!">
<meta property="og:image" content="src\assets\images\banner.png">
<!-- Twitter -->
<meta property="twitter:card" content="src\assets\images\banner.png">
<meta property="twitter:title" content="Wikifox - Wikipedia Re-imagined">
<meta property="twitter:description" content="Wikifox is a clean and simplfied version of the real Wikipedaia!">
<meta property="twitter:image" content="src\assets\images\banner.png">
<link rel="stylesheet" href="css/app.ui.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/about.css" type="text/css" />
<link rel="stylesheet" href="css/app.ui.css" type="text/css" />
<link rel="stylesheet" href="css/responsive.css" type="text/css" />
<link rel="stylesheet" href="plugins/animate.css" type="text/css" />
</head>
<body class="h-center">
<div class="hero-header center">
<div class="hero-header-inner v-center">
<div class="header-icon v-center">
<img src="src/assets/icons/favicon-white.svg" style="margin-right:10px" />
<h1>About</h1>
</div>
<nav class="hero-nav v-center">
<a href="https://buymeacoffee.com/harrytom" target="_blank">support</a>
<a href="http://harry260.github.io/" target="_blank">my portfolio</a>
<a href="#madewith">made with</a>
</nav>
<div class="header-actions v-center">
<a href="index.html">
<div class="button-open v-center">
<h2 class="center">
Launch
<i class="icon-lc bi-arrow-up-right-circle-fill"></i>
</h2>
</div>
</a>
<div class="github-icon v-center">
<a href="https://github.com/harry260/wikifox">
<img src="src/assets/images/GitHub-Mark-Light-32px.png" />
</a>
</div>
</div>
</div>
</div>
<div class="content">
<div class="text-content center">
<a href="https://www.producthunt.com/posts/wikifox?utm_source=badge-top-post-badge&utm_medium=badge&utm_souce=badge-wikifox" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=323079&theme=dark&period=daily" alt="Wikifox - Wikipedia reimagined - clean, simplified, powerful | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
</div>
<div class="banner-image">
<img src="src/assets/images/banner.png" />
</div>
<div class="text-content">
<div class="v-center">
<h1>Introducing Wikifox!</h1>
<h6 class="tag">BETA</h6>
</div>
<p>
Wikifox (beta) is a clean and simplified version of the real Wikipedia! This works with official Wikipedia, so nothing to worry about!. It has a good and clean user interface with Dark, Light and custom themes!
</p>
</div>
<div class="banner-image">
<img src="src/assets/images/1.png" />
</div>
<div class="text-content">
<h1>Getting Started</h1>
<p>
To get started, click the Launch button and Start searching! The Search features have awsome search suggestions and you can also search for a specific article. There is also Option to change theme. You can also Import custom css themes.
</p>
</div>
<div class="banner-image">
<img src="src/assets/images/2.png" />
</div>
<div class="text-content">
<h1>Features</h1>
<p>
This also has some awesome small features such as : Searching articles, Bookmarking Articles, Downloading articles as PDF, Instant Sharing, Sharing Quotes, Social Sharing, Fully customizable UI + Themes and much more than you can imagine!
</p>
</div>
<hr />
<div class="text-content" id="madewith">
<h1>Proudly made with</h1>
<ul class="powered-ul">
<a target="_blank" href="http://wikifoxjs.ml/">
<li class="v-center">
wikifox.js<i class="icon-lc bi-arrow-up-right-circle-fill"></i>
</li>
</a>
<a target="_blank" href="https://wikipedia.org">
<li class="v-center">
Official Wikipedia API<i class="icon-lc bi-arrow-up-right-circle-fill"></i>
</li>
</a>
</ul>
</div>
<div class="text-content">
</div>
<div class="footer v-center">
<a href="https://www.producthunt.com/posts/wikifox?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-wikifox" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=323079&theme=dark" alt="Wikifox - Wikipedia reimagined - clean, simplified, powerful | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
<h1>© 2021 Harry Tom</h1>
</div>
</div>
</body>
</html>
195 changes: 195 additions & 0 deletions css/about.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,195 @@
body{
background-color: black;
color: white;
}

.hero-header{
width: 100%;
padding: 10px;
position: fixed;
left: 0;
top:0;
background-color: rgba(0, 0, 0, 0.445);
backdrop-filter: blur(20px);
z-index: 99;
border: 1px solid #242426;
}

.hero-header-inner{
width: 90%;
padding: 10px 0;
justify-content: space-between;
}

.header-icon img{
width: 50px;
}

.header-icon h1{
color: white;
letter-spacing: -3px;
font-size: 30px;
}

.button-open{
background-color: #0070f3;
color: white;
border-radius: 10px;
cursor: pointer;
}

.button-open:hover{
transform:scale(1.1);
}

.button-open h2{
font-size: 15px;
padding: 10px 20px;
}

.github-icon img{
width: 40px;
margin-left: 20px;
border-radius: 50%;
opacity: 0.5;
}

.github-icon img:hover{
opacity: 1;
cursor: pointer;
}

i,
i::before {
color: var(white);
display: flex !important;
}

.icon-lc{
margin-left: 5px;
}

.content{
width: 600px;
padding-top: 120px;
}

.banner-image img{
width: 100%;
border: 1px solid #242426;
border-radius: 10px;
margin-bottom: 30px;
cursor: pointer;
}

.banner-image:hover{
transform: scale(1.1);
}

.hero-nav a{
color: gray;
text-decoration: none;
letter-spacing: 0px;
margin: 0 5px;
font-size: 15px;
}

.hero-nav a:hover{
color: white;
}

.text-content h1{
margin: 20px 0;
}

.text-content{
margin-bottom: 50px;
}
.text-content p{
font-size: 15px;
color: rgb(131, 131, 131);
}

.tag{
background-color: #0070f3;
display: inline-flex;
margin: 5px;
padding: 5px;
border-radius: 5px;
margin-left: 10px;
}

hr{
border: 1px solid #242426;
}

.powered-ul a{
color: white;
text-decoration: none;
}

.powered-ul a li{
color: rgb(131, 131, 131);
transition: 0ms;
}

.powered-ul a li:hover{
transition: 0s;
color: #0070f3;
}

.item-info{
justify-content: space-between;
}

.item-people{
width: 100%;
background-color: #19191a;
padding: 10px 20px;
border-radius: 10px;
}

.item-people img{
width: 30px;
height: 30px;
border-radius: 50%;
margin-right: 10px;
}

.item-ppl-content h1{
font-size: 15px;
line-height: 5px;
}

.wtf{
margin-left: 5px;
font-size: 16px;
}

.open-profile{
padding: 5px;
font-size: 16px;
color: white;
border-radius: 5px;
text-decoration: none;
padding: 5px 10px;
margin-left: 10px;
}

.footer{
width: 100%;
justify-content: space-between;
padding: 20px 0px ;
}

.footer-inner{
width: 90%;
padding-bottom:15px;
}

.footer h1{
font-size: 15px;
display: inline-block;
color: gray;
letter-spacing: -1px;
}
3 changes: 3 additions & 0 deletions css/app.ui.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
@import url("../src/libs/google-fonts/fonts.css");
@import url("https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css");

*{
padding: 0;
margin: 0;
Expand Down
35 changes: 35 additions & 0 deletions css/responsive.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,41 @@
}
}


@media (max-width: 700px) {
.text-div{
padding: 60px !important;
}

.sentance-hero{
font-size: 30px !important;
line-height: 30px !important;
}

.text-content h1{
font-size: 25px;
margin-bottom: 15px;
}

.text-content p{
font-size: 13px;
}

.content{
width: 100%;
padding: 0 20px;
padding-top: 150px;
}

.hero-nav{
display: none;
}

.header-icon h1{
display: none;
}
}

@media (max-width:640px){


Expand Down
16 changes: 12 additions & 4 deletions css/style.css
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,3 @@
@import url("../src/libs/google-fonts/fonts.css");
@import url("https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css");


/* ___________________
| |
| [WIKI-PAGE] |
Expand Down Expand Up @@ -909,4 +905,16 @@ a{
.loading-overlay{
display: flex;
background-color: var(--background);
}

.index-footer{
bottom: 0;
position: fixed;
left: 0;
width: 100%;
padding-bottom: 20px;
}

.product-hunt-image{
box-shadow: var(--box-shadow-prime);
}
Loading

0 comments on commit 24ee3f4

Please sign in to comment.