Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Complete Overhaul of website #243

Open
wants to merge 35 commits into
base: master
Choose a base branch
from
Open

Complete Overhaul of website #243

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
35 commits
Select commit Hold shift + click to select a range
e26aba7
Revamped the Header
RangerDevv May 9, 2023
920ac06
Added styling for blocks
RangerDevv May 9, 2023
86622c1
made some changes to heading and width stuff
RangerDevv May 9, 2023
d7256a1
implementing the changes and added pre tag highlighting
RangerDevv May 9, 2023
6f1e2ec
More changes to the layouts where you dont need the blocks
RangerDevv May 9, 2023
f2ccb9e
Changed hyperlink decoration and added overflow scroll to the news se…
RangerDevv May 10, 2023
c45c53d
Added my name in website and added text highlights
RangerDevv May 10, 2023
7fc61cb
Changed box design
RangerDevv May 10, 2023
e8fcd24
Pre tag highlight
RangerDevv May 10, 2023
744ec1c
added background pattern and fixed CLS
RangerDevv May 10, 2023
a299847
Updated the website
RangerDevv May 10, 2023
d4e4b0a
Update app.css
RangerDevv May 10, 2023
c9a02cd
make bg static
RangerDevv May 10, 2023
7bd06f5
Added theme changer
RangerDevv May 10, 2023
fc6a81b
Theme Changer complete
RangerDevv May 10, 2023
91f980d
emoji change
RangerDevv May 10, 2023
556b9db
removed polka dots
RangerDevv May 11, 2023
2c5b5d5
changed shadow and removed comments
RangerDevv May 11, 2023
0a1aaf2
Fixed the dropdown
RangerDevv May 11, 2023
a82c978
Update preview.html
RangerDevv May 11, 2023
fb224cf
Subtle shadows
RangerDevv May 11, 2023
ec91e9c
toning down shadow
RangerDevv May 11, 2023
a0029fc
added graph
RangerDevv May 11, 2023
702cdaf
Color correction
RangerDevv May 11, 2023
da85f15
Improved graph and added some UX improvements
RangerDevv May 11, 2023
6f77f6c
Centering and making mobile responsive
RangerDevv May 11, 2023
b7f4cb4
Update preview.html
RangerDevv May 11, 2023
0f80f4c
Div bug fix
RangerDevv May 11, 2023
6a86092
Update preview.html
RangerDevv May 12, 2023
95f7191
Moved to index.html and the actual website is ready.
RangerDevv May 12, 2023
fb65848
Update app.css
RangerDevv May 12, 2023
37096ea
styling fix for extra padding
RangerDevv May 12, 2023
b38535a
Implementing feedback that people gave
RangerDevv May 13, 2023
0ba8cc9
Updating the feedback that people gave
RangerDevv May 13, 2023
bb56971
added version number and updated footer
RangerDevv May 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
157 changes: 119 additions & 38 deletions _layout.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,45 +16,126 @@
<body>
<div id='app'>

<div class='header'>
<div class='flex'></div>
<a href='/'><img src='/img/v-logo.png' class='logo' /></a>

<div class='nav'>
<a target=_blank href='https://github.com/vlang/V/tree/master/examples' class='item'>%examples</a>
<a target=_blank href='https://github.com/vlang/v/blob/master/doc/docs.md' class='item'>%documentation</a>
<a target=_blank href='https://github.com/vlang/v/blob/master/tutorials' class='item'>Tutorials</a>
<a target=_blank href='https://modules.vlang.io' class='item'>Stdlib Docs</a>
<a target=_blank href='https://vpm.vlang.io/' class='item'>vpm</a>
<a target=_blank href='https://github.com/vlang/v/discussions' class='item'>Forum</a>
<a target=_blank href='https://github.com/vlang/v/discussions/categories/blog' class='item'>Blog</a>
<a target=_blank href='https://play.vlang.io' class='item'>Playground</a>
<!--
<a target=_blank href='https://v-wasm.now.sh' class='item'>Playground</a>
<a href='/#builtinv' class='item'>Built in V</a>
-->
<!--
<a target=_blank href='https://github.com/vlang/v/wiki/FAQ' class='item'>%faq</a>
<a target=_blank href='https://github.com/vlang/v/wiki/Backers' class='item'>Backers</a>
-->
</div>
<div class="donate-button">
<a target=_blank href='https://patreon.com/vlang' class='patreon'><img src='/img/patreon.png' /></a> &nbsp;
<a target=_blank href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=HRGVJ2LA2LKJ8&item_name=Support+V+development&currency_code=USD&source=url&lc=US" class="paypal">PayPal</a> &nbsp;
<a target=_blank href='https://github.com/sponsors/medvednikov' class="paypal">GitHub $</a> &nbsp;

<!--
<a target=_blank href='#' class="paypal" id='btc' onclick="document.getElementById('btcaddr').style.display='inline'; document.getElementById('btc').style.display='none'; return false;">BTC</a>
<span id='btcaddr' style='display:none'>
1HZiH6MXkVpaWFwiGVCLAr8WQDBQCMnW3v
</span>
-->
<!--
<a target=_blank href='https://github.com/sponsors/medvednikov'><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="93" height="20"><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="93" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="72" height="20" fill="#555"/><rect x="72" width="21" height="20" fill="#9f9f9f"/><rect width="93" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><image x="5" y="3" width="14" height="14" xlink:href="data:image/svg+xml;base64,PHN2ZyBmaWxsPSJ3aGl0ZXNtb2tlIiByb2xlPSJpbWciIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGU+R2l0SHViIGljb248L3RpdGxlPjxwYXRoIGQ9Ik0xMiAuMjk3Yy02LjYzIDAtMTIgNS4zNzMtMTIgMTIgMCA1LjMwMyAzLjQzOCA5LjggOC4yMDUgMTEuMzg1LjYuMTEzLjgyLS4yNTguODItLjU3NyAwLS4yODUtLjAxLTEuMDQtLjAxNS0yLjA0LTMuMzM4LjcyNC00LjA0Mi0xLjYxLTQuMDQyLTEuNjFDNC40MjIgMTguMDcgMy42MzMgMTcuNyAzLjYzMyAxNy43Yy0xLjA4Ny0uNzQ0LjA4NC0uNzI5LjA4NC0uNzI5IDEuMjA1LjA4NCAxLjgzOCAxLjIzNiAxLjgzOCAxLjIzNiAxLjA3IDEuODM1IDIuODA5IDEuMzA1IDMuNDk1Ljk5OC4xMDgtLjc3Ni40MTctMS4zMDUuNzYtMS42MDUtMi42NjUtLjMtNS40NjYtMS4zMzItNS40NjYtNS45MyAwLTEuMzEuNDY1LTIuMzggMS4yMzUtMy4yMi0uMTM1LS4zMDMtLjU0LTEuNTIzLjEwNS0zLjE3NiAwIDAgMS4wMDUtLjMyMiAzLjMgMS4yMy45Ni0uMjY3IDEuOTgtLjM5OSAzLS40MDUgMS4wMi4wMDYgMi4wNC4xMzggMyAuNDA1IDIuMjgtMS41NTIgMy4yODUtMS4yMyAzLjI4NS0xLjIzLjY0NSAxLjY1My4yNCAyLjg3My4xMiAzLjE3Ni43NjUuODQgMS4yMyAxLjkxIDEuMjMgMy4yMiAwIDQuNjEtMi44MDUgNS42MjUtNS40NzUgNS45Mi40Mi4zNi44MSAxLjA5Ni44MSAyLjIyIDAgMS42MDYtLjAxNSAyLjg5Ni0uMDE1IDMuMjg2IDAgLjMxNS4yMS42OS44MjUuNTdDMjAuNTY1IDIyLjA5MiAyNCAxNy41OTIgMjQgMTIuMjk3YzAtNi42MjctNS4zNzMtMTItMTItMTIiLz48L3N2Zz4="/><text x="455" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="450">Sponsor</text><text x="455" y="140" transform="scale(.1)" textLength="450">Sponsor</text><text x="815" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="110">❤</text><text x="815" y="140" transform="scale(.1)" textLength="110">❤</text></g></svg></a>
-->
<div class='header'>
<div class='flex'></div>
<a href='/'><img src='/img/v-logo.png' class='logo' /></a>

<div class='nav'>
<div class="navDropdown">
<div class="dropbtn" style="background-color: transparent; outline: none; border: none; cursor: pointer;">
<a target=_blank href='https://github.com/vlang/v/blob/master/doc/docs.md' class='item' style=" font-size: 22px;
font-weight: 400;">%documentation</a>
<i class="fa fa-caret-down"></i>
</div>
<div class="dropdown-content">
<a target=_blank href='https://github.com/vlang/V/tree/master/examples' class='item'>%examples</a>
<a target=_blank href='https://github.com/vlang/v/discussions' class='item'>Forum</a>
<a target=_blank href='https://github.com/vlang/v/blob/master/tutorials' class='item'>Tutorials</a>
</div>
</div>
<a target=_blank href='https://modules.vlang.io' class='item'>Stdlib Docs</a>
<a target=_blank href='https://vpm.vlang.io/' class='item'>vpm</a>
<a target=_blank href='https://blog.vlang.io' class='item'>Blog</a>

<!-- <a target=_blank href='https://v-wasm.now.sh' class='item'>Playground</a> -->
<a target=_blank href='https://play.vlang.io' class='item'>Playground</a>
<!-- <a href='/#builtinv' class='item'>Built in V</a> -->

<!--
<a target=_blank href='https://github.com/vlang/v/wiki/FAQ' class='item'>%faq</a>
<a target=_blank href='https://github.com/vlang/v/wiki/Backers' class='item'>Backers</a>
-->
</div>
<div class="donate-button">
<a target=_blank href='https://patreon.com/vlang' class='patreon'><img src='/img/patreon.png' /></a> &nbsp;
<a target=_blank href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=HRGVJ2LA2LKJ8&item_name=Support+V+development&currency_code=USD&source=url&lc=US" class="paypal">PayPal</a> &nbsp;
<a target=_blank href='https://github.com/sponsors/medvednikov' class="paypal">GitHub $</a> &nbsp;

<script>
// a function to toggle dark mode
function toggleTheme() {
let currTheme = localStorage.getItem("theme");
if (localStorage.getItem("theme")) {
currTheme = localStorage.getItem("theme");

} else {
localStorage.setItem("theme", "light");
}
if (localStorage.getItem("theme")=="light") {
document.getElementsByClassName("dark-mode-button")[0].innerHTML = "☀️";
// loop over all the block elements and change their text color
let blocks = document.getElementsByClassName("block");
for (let i = 0; i < blocks.length; i++) {
blocks[i].style.color = "#ffffff";
// change the box shadow to make the blocks stand out
// blocks[i].style.boxShadow = "0 0 90px -15px #5058fc86 ";
}
// get all the heading tags and change their text color
let headings = document.getElementsByTagName("h1");
for (let i = 0; i < headings.length; i++) {
headings[i].style.color = "#fff";
}
// loop over all the section elements and change their text color
let sections = document.getElementsByClassName("section");
for (let i = 0; i < sections.length; i++) {
sections[i].style.color = "#ffffff";
}
document.getElementsByClassName("landing")[0].style.backgroundColor = "#101010";
document.getElementById("app").style.backgroundColor = "#101010";
// change the text color of nav items
let navItems = document.getElementsByClassName("item");
for (let i = 0; i < navItems.length; i++) {
navItems[i].style.color = "#ffffff";
}
// get the version and change its color
document.getElementsByClassName("version")[0].style.color = "#ffffff";
// document.getElementsByClassName("header")[0].style.backgroundColor = "#000000";
document.getElementsByClassName("subTitle")[0].style.color = "#ffffff";
localStorage.setItem("theme", "dark");
} else {
document.getElementsByClassName("dark-mode-button")[0].innerHTML = "🌙";
document.getElementsByClassName("landing")[0].style.backgroundColor = "#ffffff";
document.getElementById("app").style.backgroundColor = "#ffffff";
let blocks = document.getElementsByClassName("block");
for (let i = 0; i < blocks.length; i++) {
blocks[i].style.color = "#000000";
// blocks[i].style.boxShadow = "0 0 20px 0 rgba(0, 0, 0, 0.169)";
}
let headings = document.getElementsByTagName("h1");
for (let i = 0; i < headings.length; i++) {
headings[i].style.color = "#000000";
}
let sections = document.getElementsByClassName("section");
for (let i = 0; i < sections.length; i++) {
sections[i].style.color = "#000000";
}
let navItems = document.getElementsByClassName("item");
for (let i = 0; i < navItems.length; i++) {
navItems[i].style.color = "#000000";
}
document.getElementsByClassName("version")[0].style.color = "#000000";
// document.getElementsByClassName("header")[0].style.backgroundColor = "#ffffff";
document.getElementsByClassName("subTitle")[0].style.color = "#000000";
localStorage.setItem("theme", "light");
}

// as soon ask the user leaves the page, save the theme to local storage
window.onbeforeunload = function() {
localStorage.setItem("theme", currTheme);
}
}

toggleTheme()

</script>

<!-- a dark and light mode switch -->
<div class="dark-mode-switch">
<button onclick="toggleTheme()" class="dark-mode-button" style="font-size: x-large; background-color: transparent; border: none; padding-bottom: 5px;">🌙</button>
</div>
</div>
<div class='flex'></div>
</div>
<div class='flex'></div>
</div>
@end

@define "footer"
Expand Down
Loading