v2
This commit is contained in:
BIN
.sass-cache/a793ed03640b1c0a8a3e086a7a54137332111963/nord.scssc
Normal file
BIN
.sass-cache/a793ed03640b1c0a8a3e086a7a54137332111963/nord.scssc
Normal file
Binary file not shown.
BIN
.sass-cache/a793ed03640b1c0a8a3e086a7a54137332111963/style.scssc
Normal file
BIN
.sass-cache/a793ed03640b1c0a8a3e086a7a54137332111963/style.scssc
Normal file
Binary file not shown.
123
index.html
Normal file
123
index.html
Normal file
@@ -0,0 +1,123 @@
|
||||
<html>
|
||||
<title>Havox</title>
|
||||
<script src="https://kit.fontawesome.com/ad50eeab11.js" crossorigin="anonymous"></script>
|
||||
<link href='index_style.css' rel='stylesheet' type='text/css'>
|
||||
<nav class="nav">
|
||||
<a href="#s1" class="active">Havox V2</a>
|
||||
<a href="#s2">Tutorials</a>
|
||||
<a href="#s3">Projects</a>
|
||||
<a href="#s1">Intro</a>
|
||||
</nav>
|
||||
<h1>Havox.org V2</h1>
|
||||
<article id="s1">
|
||||
<h2>About havox <i class="far fa-address-card"></i></h2>
|
||||
<p>This is havox - havox is a collection of my projects and tutorials that I've written over the years. The tutorials written are more to consolidate my knowledge of whatever I've been working on however if they help even one person, I'll consider that a win.</p>
|
||||
<p>Feel free to check out any of my <span class="nav"><a href="#s2">tutorials</a></span> or one of my various js <span class="nav"><a href="#s3">projects</a></span></p>
|
||||
<p><b>Why V2?</b></p>
|
||||
<p>
|
||||
This is the second revision of Havox. After havox's initial conception in late 2017, it has suffered from a chronic case of spaghetti code. An update with: neater <strike>and better</strike> code, updated theming and overall cleaner UI was long overdue.
|
||||
</p>
|
||||
<p><b>Why is Havox on umbra.cyou?</b></p>
|
||||
<p>Havox has domain hopped a fair bit since 2017 (where it used to be hosted on jayomayo.host - lol) however since losing the <code>havox.org</code> domain, I will be using <code>umbra.cyou</code> for the foreseeable future</p>
|
||||
<h2>Daily Trump Quote</h2>
|
||||
<p><?=$quote;?></p>
|
||||
</article>
|
||||
|
||||
<article id="s2">
|
||||
<h2>Tutorials <i class="fas fa-code"></i></h2>
|
||||
<div onclick="window.location='imgTut/summed-area.html'" class="tut_box">
|
||||
<p class="tut_date">3 Jan 2021</p>
|
||||
<a href="imgTut/summed-area.html" class="tutName">Summed area tables</a>
|
||||
<p>This tutorial looks at intergral images and how they're useful.</p>
|
||||
</div>
|
||||
|
||||
<div onclick="window.location='terrainGen/index.html'" class="tut_box">
|
||||
<p class="tut_date">3 Feb 2019</p>
|
||||
<a href="terrainGen/index.html" class="tutName">Midpoint displacement terrain generation</a>
|
||||
<p>This tutorial looks at generating random and natural looking 2D terrains.</p>
|
||||
</div>
|
||||
|
||||
<div onclick="window.location='jarvisMarsh/index.php'" class="tut_box">
|
||||
<p class="tut_date">14 Feb 2018</p>
|
||||
<a href="jarvisMarsh/index.php" class="tutName">Convex hull Generator</a>
|
||||
<p>This tutorial looks at wrapping algorithms.</p>
|
||||
</div>
|
||||
|
||||
<div onclick="window.location='TSP_files/index.php'" class="tut_box">
|
||||
<p class="tut_date">22 Sep 2018</p>
|
||||
<a href="TSP_files/index.php" class="tutName">Travelling sales person</a>
|
||||
<p>This tutorial looks at different implementations of the TSP problem and how different solutions can be implemented.</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article id="s3">
|
||||
<h2>Projects <i class="fas fa-code"></i></h2>
|
||||
<p>Please note a lot of these projects use <code>mouseClicked()</code> functions which don't work with mobile :(</p>
|
||||
|
||||
<div onclick="window.location='projects/drawing_curves/index.html'" class="tut_box">
|
||||
<p class="tut_date">1 Oct 2021</p>
|
||||
<a class="tutName">Drawing bezier curves</a>
|
||||
<p>An interactive animated diagram on drawing quadatric and cubic Bezier curves. Click anywhere on the canvas to place points.</p>
|
||||
</div>
|
||||
|
||||
<div onclick="window.location='projects/marching_squares.html'" class="tut_box">
|
||||
<p class="tut_date">23 Sept 2021</p>
|
||||
<a class="tutName">2D Marching Squares</a>
|
||||
<p>A demonstration of marching squares, click a tile to edit the terrain.</p>
|
||||
</div>
|
||||
|
||||
<div onclick="window.location='projects/sorting_vis.html'" class="tut_box">
|
||||
<p class="tut_date">11 Apr 2020</p>
|
||||
<a class="tutName">Bubble sort visualiser</a>
|
||||
<p>A classic bubble sort visualiser where bars are sorted by height. One frame being one loop.</p>
|
||||
</div>
|
||||
|
||||
<div onclick="window.location='projects/warp_lines.html'" class="tut_box">
|
||||
<p class="tut_date">2 Apr 2020</p>
|
||||
<a class="tutName">Warping lines illusion</a>
|
||||
<p>A visualisation of the <a class="out_link" href="https://en.wikipedia.org/wiki/M%C3%BCller-Lyer_illusion#:~:text=The%20M%C3%BCller%2DLyer%20illusion%20is,consisting%20of%20three%20stylized%20arrows.&text=The%20fins%20can%20point%20inwards,the%20arrow%20with%20two%20heads.">Müller-Lyer</a> illusion shown in js</p>
|
||||
</div>
|
||||
|
||||
<div onclick="window.location='projects/fourier_series.html'" class="tut_box">
|
||||
<p class="tut_date">27 Feb 2019</p>
|
||||
<a class="tutName">Fourier Series</a>
|
||||
<p>A project showing how a square wave can be made with just sin waves.</p>
|
||||
</div>
|
||||
|
||||
<div onclick="window.location='projects/ellipse_const.html'" class="tut_box">
|
||||
<p class="tut_date">23 Feb 2019</p>
|
||||
<a class="tutName">Constructing an ellispse</a>
|
||||
<p>A visualisation of how an ellipse can be constructed with a circle and radial lines. <a class="out_link" href="https://twitter.com/3blue1brown/status/1016936129117937664?lang=en">inspo</a></p>
|
||||
</div>
|
||||
|
||||
<div onclick="window.location='projects/gameoflife.php'" class="tut_box">
|
||||
<p class="tut_date">2 May 2018</p>
|
||||
<a class="tutName">Game of Life</a>
|
||||
<p>A js implementation of the classic Game of Life - John Conway.</p>
|
||||
</div>
|
||||
|
||||
<div onclick="window.location='projects/piApprox.php'" class="tut_box">
|
||||
<p class="tut_date">18 Mar 2018</p>
|
||||
<a class="tutName">Calculating PI</a>
|
||||
<p>A simulation that looks at the ratio of randomly placed dots between a square and circle to calulate PI.</p>
|
||||
</div>
|
||||
|
||||
<div onclick="window.location='projects/oscil.php'" class="tut_box">
|
||||
<p class="tut_date">17 Dec 2017</p>
|
||||
<a class="tutName">Oscillations in 3D</a>
|
||||
<p>A js implementation of <a class="out_link" href="https://twitter.com/beesandbombs/status/940639806522085376">Bees and Bomb's gif.</a></p>
|
||||
</div>
|
||||
|
||||
<div onclick="window.location='projects/mazeGen.php'" class="tut_box">
|
||||
<p class="tut_date">13 Nov 2017</p>
|
||||
<a class="tutName">Maze Generator</a>
|
||||
<p>A maze generator built in js.</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="margin" id="s4">
|
||||
<h2>Credits</h2>
|
||||
<p>Thank you to @uixmat for inspiration <strike>and some code</strike> for this webpage, check out his <a href="https://twitter.com/uixmat/" target="_blank">twitter</a>.</p>
|
||||
<p>Also shoutout to <a href="https://www.youtube.com/user/shiffman">Daniel Shiffman</a> and the <a href="https://p5js.org">P5 team</a>. P5 is used extensively in these tutorials & projects</p>
|
||||
</article>
|
||||
</html>
|
||||
117
index_style.css
Normal file
117
index_style.css
Normal file
@@ -0,0 +1,117 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
|
||||
* {
|
||||
box-sizing: border-box; }
|
||||
|
||||
html, body {
|
||||
font-family: "Roboto", sans-serif;
|
||||
background: #eceff4;
|
||||
padding: 80px 30px 30px;
|
||||
color: #444;
|
||||
height: 100%; }
|
||||
|
||||
ol, ul {
|
||||
margin: 0 0 50px 0; }
|
||||
|
||||
ul {
|
||||
position: relative;
|
||||
width: 75%;
|
||||
margin: 100px auto 0;
|
||||
padding: 10px;
|
||||
box-sizing: border-box; }
|
||||
|
||||
ul li {
|
||||
display: flex;
|
||||
background: red; }
|
||||
|
||||
h1 {
|
||||
color: #2e3440;
|
||||
font-size: 48px; }
|
||||
|
||||
h2 {
|
||||
color: #2e3440;
|
||||
font-size: 28px; }
|
||||
|
||||
p {
|
||||
line-height: 1.6em;
|
||||
margin-bottom: 10px;
|
||||
font-size: 20px;
|
||||
padding: 0; }
|
||||
p:last-child {
|
||||
margin-bottom: 40px; }
|
||||
|
||||
code {
|
||||
background: #f8f8f8;
|
||||
color: #d64f9b;
|
||||
border: 1px solid #eee;
|
||||
padding: 2px;
|
||||
border-radius: 3px; }
|
||||
|
||||
a {
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
color: #88c0d0;
|
||||
text-decoration: none;
|
||||
transition: all 200ms; }
|
||||
a:hover, a:focus {
|
||||
color: #ebcb8b; }
|
||||
|
||||
article {
|
||||
margin-bottom: 50px; }
|
||||
article .margin {
|
||||
margin-bottom: 100vh; }
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: #3b4252;
|
||||
position: fixed;
|
||||
padding: 30px; }
|
||||
nav a {
|
||||
display: inline-flex;
|
||||
padding: 20px 30px;
|
||||
color: #eceff4;
|
||||
text-decoration: none; }
|
||||
nav a:hover, nav a:focus {
|
||||
color: #ebcb8b; }
|
||||
nav a.active {
|
||||
color: #88c0d0; }
|
||||
|
||||
.tut_box {
|
||||
border: 2px solid #3b4252;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 10px;
|
||||
padding: 5px; }
|
||||
.tut_box:hover {
|
||||
background-color: #3b4252;
|
||||
color: #eceff4; }
|
||||
.tut_box:hover a {
|
||||
color: #ebcb8b; }
|
||||
.tut_box:hover .out_link {
|
||||
color: #8fbcbb; }
|
||||
.tut_box p {
|
||||
padding: 0px;
|
||||
margin: 0px; }
|
||||
.tut_box .tut_date {
|
||||
float: right;
|
||||
position: relative;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
text-align: right; }
|
||||
|
||||
.tutName {
|
||||
font-weight: bold;
|
||||
color: #8fbcbb;
|
||||
font-size: 22px; }
|
||||
.tutName:hover {
|
||||
color: #ebcb8b; }
|
||||
|
||||
.out_link {
|
||||
font-weight: bold;
|
||||
color: #4c566a;
|
||||
text-decoration: none;
|
||||
padding: 5px, 5px;
|
||||
font-size: 19px; }
|
||||
|
||||
/*# sourceMappingURL=index_style.css.map */
|
||||
7
index_style.css.map
Normal file
7
index_style.css.map
Normal file
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"version": 3,
|
||||
"mappings": "AAAQ,2EAAmE;AAE3E,CAAE;EAAE,UAAU,EAAE,UAAU;;AAO1B,UAAW;EACT,WAAW,EAAE,oBAAoB;EACjC,UAAU,ECsIJ,OAAO;EDrIb,OAAO,EAAE,cAAc;EACvB,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;;AAGd,MAAO;EACL,MAAM,EAAE,UAAU;;AAGpB,EAAG;EACD,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,YAAY;EACpB,OAAO,EAAE,IAAI;EACb,UAAU,EAAE,UAAU;;AAGxB,KAAM;EACJ,OAAO,EAAE,IAAI;EACb,UAAU,EAAE,GAAG;;AAGjB,EAAG;EACA,KAAK,ECEA,OAAO;EDDZ,SAAS,EAAE,IAAI;;AAGlB,EAAG;EACD,KAAK,ECHC,OAAO;EDIb,SAAS,EAAE,IAAI;;AAGjB,CAAE;EACA,WAAW,EAAE,KAAK;EAClB,aAAa,EAAE,IAAI;EACnB,SAAS,EAAE,IAAI;EACf,OAAO,EAAE,CAAC;EACV,YAAa;IACX,aAAa,EAAE,IAAI;;AAIvB,IAAK;EACH,UAAU,EAAE,OAAO;EACnB,KAAK,EAAE,OAAO;EACd,MAAM,EAAE,cAAc;EACtB,OAAO,EAAE,GAAG;EACZ,aAAa,EAAE,GAAG;;AAGpB,CAAE;EACA,SAAS,EAAE,IAAI;EACf,WAAW,EAAE,IAAI;EACjB,KAAK,ECuGC,OAAO;EDtGb,eAAe,EAAE,IAAI;EACrB,UAAU,EAAE,SAAS;EACrB,gBACO;IACL,KAAK,ECiJA,OAAO;;AD7IhB,OAAQ;EACN,aAAa,EAAE,IAAI;EACnB,eAAQ;IACN,aAAa,EAAE,KAAK;;AAIxB,GAAI;EACF,OAAO,EAAE,IAAI;EACb,KAAK,EAAE,IAAI;EACX,GAAG,EAAE,CAAC;EACN,IAAI,EAAE,CAAC;EACP,UAAU,ECvCJ,OAAO;EDwCb,QAAQ,EAAE,KAAK;EACf,OAAO,EAAE,IAAI;EACb,KAAE;IACA,OAAO,EAAE,WAAW;IACpB,OAAO,EAAE,SAAS;IAClB,KAAK,ECqDD,OAAO;IDpDX,eAAe,EAAE,IAAI;IACrB,wBACQ;MACN,KAAK,ECuHF,OAAO;IDrHZ,YAAS;MACP,KAAK,ECqEH,OAAO;;ADhEf,QAAS;EACP,MAAM,EAAE,iBAAgB;EACxB,aAAa,EAAE,GAAG;EAClB,aAAa,EAAE,IAAI;EACnB,OAAO,EAAE,GAAG;EAEZ,cAAQ;IACN,gBAAgB,EChEZ,OAAO;IDiEX,KAAK,ECiCD,OAAO;IDhCX,gBAAE;MACA,KAAK,ECqGF,OAAO;IDnGZ,wBAAS;MACP,KAAK,ECqCH,OAAO;EDlCb,UAAE;IACA,OAAO,EAAE,GAAG;IACZ,MAAM,EAAE,GAAG;EAGb,kBAAU;IACR,KAAK,EAAE,KAAK;IACZ,QAAQ,EAAE,QAAQ;IAClB,GAAG,EAAE,GAAG;IACR,KAAK,EAAE,GAAG;IACV,UAAU,EAAE,KAAK;;AAIrB,QAAS;EACP,WAAW,EAAE,IAAI;EACjB,KAAK,ECkBC,OAAO;EDjBb,SAAS,EAAE,IAAI;EACf,cAAQ;IACN,KAAK,EC4EA,OAAO;;ADxEhB,SAAU;EACR,WAAW,EAAE,IAAI;EACjB,KAAK,ECzCC,OAAO;ED0Cb,eAAe,EAAE,IAAI;EACrB,OAAO,EAAE,QAAQ;EACjB,SAAS,EAAE,IAAI",
|
||||
"sources": ["style.scss","nord.scss"],
|
||||
"names": [],
|
||||
"file": "index_style.css"
|
||||
}
|
||||
235
nord.scss
Normal file
235
nord.scss
Normal file
@@ -0,0 +1,235 @@
|
||||
// Copyright (c) 2016-present Arctic Ice Studio <development@arcticicestudio.com>
|
||||
// Copyright (c) 2016-present Sven Greb <development@svengreb.de>
|
||||
|
||||
// Project: Nord
|
||||
// Version: 0.2.0
|
||||
// Repository: https://github.com/arcticicestudio/nord
|
||||
// License: MIT
|
||||
// References:
|
||||
// http://sass-lang.com
|
||||
// http://sassdoc.com
|
||||
|
||||
////
|
||||
/// An arctic, north-bluish color palette.
|
||||
/// Created for the clean- and minimal flat design pattern to achieve a optimal focus and readability for code syntax
|
||||
/// highlighting and UI.
|
||||
/// It consists of a total of sixteen, carefully selected, dimmed pastel colors for a eye-comfortable, but yet colorful
|
||||
/// ambiance.
|
||||
///
|
||||
/// @author Arctic Ice Studio <development@arcticicestudio.com>
|
||||
////
|
||||
|
||||
/// Base component color of "Polar Night".
|
||||
///
|
||||
/// Used for texts, backgrounds, carets and structuring characters like curly- and square brackets.
|
||||
///
|
||||
/// @access public
|
||||
/// @example scss - SCSS
|
||||
/// /* For dark ambiance themes */
|
||||
/// .background {
|
||||
/// background-color: $nord0;
|
||||
/// }
|
||||
/// /* For light ambiance themes */
|
||||
/// .text {
|
||||
/// color: $nord0;
|
||||
/// }
|
||||
/// @group polarnight
|
||||
/// @since 0.1.0
|
||||
$nord0: #2e3440;
|
||||
|
||||
/// Lighter shade color of the base component color.
|
||||
///
|
||||
/// Used as a lighter background color for UI elements like status bars.
|
||||
///
|
||||
/// @access public
|
||||
/// @group polarnight
|
||||
/// @see $nord0
|
||||
/// @since 0.1.0
|
||||
$nord1: #3b4252;
|
||||
|
||||
/// Lighter shade color of the base component color.
|
||||
///
|
||||
/// Used as line highlighting in the editor.
|
||||
/// In the UI scope it may be used as selection- and highlight color.
|
||||
///
|
||||
/// @access public
|
||||
/// @example scss - SCSS
|
||||
/// /* Code Syntax Highlighting scope */
|
||||
/// .editor {
|
||||
/// &.line {
|
||||
/// background-color: $nord2;
|
||||
/// }
|
||||
/// }
|
||||
///
|
||||
/// /* UI scope */
|
||||
/// button {
|
||||
/// &:selected {
|
||||
/// background-color: $nord2;
|
||||
/// }
|
||||
/// }
|
||||
/// @group polarnight
|
||||
/// @see $nord0
|
||||
/// @since 0.1.0
|
||||
$nord2: #434c5e;
|
||||
|
||||
/// Lighter shade color of the base component color.
|
||||
///
|
||||
/// Used for comments, invisibles, indent- and wrap guide marker.
|
||||
/// In the UI scope used as pseudoclass color for disabled elements.
|
||||
///
|
||||
/// @access public
|
||||
/// @example scss - SCSS
|
||||
/// /* Code Syntax Highlighting scope */
|
||||
/// .editor {
|
||||
/// &.indent-guide,
|
||||
/// &.wrap-guide {
|
||||
/// &.marker {
|
||||
/// color: $nord3;
|
||||
/// }
|
||||
/// }
|
||||
/// }
|
||||
/// .comment,
|
||||
/// .invisible {
|
||||
/// color: $nord3;
|
||||
/// }
|
||||
///
|
||||
/// /* UI scope */
|
||||
/// button {
|
||||
/// &:disabled {
|
||||
/// background-color: $nord3;
|
||||
/// }
|
||||
/// }
|
||||
/// @group polarnight
|
||||
/// @see $nord0
|
||||
/// @since 0.1.0
|
||||
$nord3: #4c566a;
|
||||
|
||||
/// Base component color of "Snow Storm".
|
||||
///
|
||||
/// Main color for text, variables, constants and attributes.
|
||||
/// In the UI scope used as semi-light background depending on the theme shading design.
|
||||
///
|
||||
/// @access public
|
||||
/// @example scss - SCSS
|
||||
/// /* For light ambiance themes */
|
||||
/// .background {
|
||||
/// background-color: $nord4;
|
||||
/// }
|
||||
/// /* For dark ambiance themes */
|
||||
/// .text {
|
||||
/// color: $nord4;
|
||||
/// }
|
||||
/// @group snowstorm
|
||||
/// @since 0.1.0
|
||||
$nord4: #d8dee9;
|
||||
|
||||
/// Lighter shade color of the base component color.
|
||||
///
|
||||
/// Used as a lighter background color for UI elements like status bars.
|
||||
/// Used as semi-light background depending on the theme shading design.
|
||||
///
|
||||
/// @access public
|
||||
/// @group snowstorm
|
||||
/// @see $nord4
|
||||
/// @since 0.1.0
|
||||
$nord5: #e5e9f0;
|
||||
|
||||
/// Lighter shade color of the base component color.
|
||||
///
|
||||
/// Used for punctuations, carets and structuring characters like curly- and square brackets.
|
||||
/// In the UI scope used as background, selection- and highlight color depending on the theme shading design.
|
||||
///
|
||||
/// @access public
|
||||
/// @group snowstorm
|
||||
/// @see $nord4
|
||||
/// @since 0.1.0
|
||||
$nord6: #eceff4;
|
||||
|
||||
/// Bluish core color.
|
||||
///
|
||||
/// Used for classes, types and documentation tags.
|
||||
///
|
||||
/// @access public
|
||||
/// @group frost
|
||||
/// @since 0.1.0
|
||||
$nord7: #8fbcbb;
|
||||
|
||||
/// Bluish core accent color.
|
||||
///
|
||||
/// Represents the accent color of the color palette.
|
||||
/// Main color for primary UI elements and methods/functions.
|
||||
///
|
||||
/// Can be used for
|
||||
/// - Markup quotes
|
||||
/// - Markup link URLs
|
||||
///
|
||||
/// @access public
|
||||
/// @group frost
|
||||
/// @since 0.1.0
|
||||
$nord8: #88c0d0;
|
||||
|
||||
/// Bluish core color.
|
||||
///
|
||||
/// Used for language-specific syntactic/reserved support characters and keywords, operators, tags, units and
|
||||
/// punctuations like (semi)colons,commas and braces.
|
||||
///
|
||||
/// @access public
|
||||
/// @group frost
|
||||
/// @since 0.1.0
|
||||
$nord9: #81a1c1;
|
||||
|
||||
/// Bluish core color.
|
||||
///
|
||||
/// Used for markup doctypes, import/include/require statements, pre-processor statements and at-rules (`@`).
|
||||
///
|
||||
/// @access public
|
||||
/// @group frost
|
||||
/// @since 0.1.0
|
||||
$nord10: #5e81ac;
|
||||
|
||||
/// Colorful component color.
|
||||
///
|
||||
/// Used for errors, git/diff deletion and linter marker.
|
||||
///
|
||||
/// @access public
|
||||
/// @group aurora
|
||||
/// @since 0.1.0
|
||||
$nord11: #bf616a;
|
||||
|
||||
/// Colorful component color.
|
||||
///
|
||||
/// Used for annotations.
|
||||
///
|
||||
/// @access public
|
||||
/// @group aurora
|
||||
/// @since 0.1.0
|
||||
$nord12: #d08770;
|
||||
|
||||
/// Colorful component color.
|
||||
///
|
||||
/// Used for escape characters, regular expressions and markup entities.
|
||||
/// In the UI scope used for warnings and git/diff renamings.
|
||||
///
|
||||
/// @access public
|
||||
/// @group aurora
|
||||
/// @since 0.1.0
|
||||
$nord13: #ebcb8b;
|
||||
|
||||
/// Colorful component color.
|
||||
///
|
||||
/// Main color for strings and attribute values.
|
||||
/// In the UI scope used for git/diff additions and success visualizations.
|
||||
///
|
||||
/// @access public
|
||||
/// @group aurora
|
||||
/// @since 0.1.0
|
||||
$nord14: #a3be8c;
|
||||
|
||||
/// Colorful component color.
|
||||
///
|
||||
/// Used for numbers.
|
||||
///
|
||||
/// @access public
|
||||
/// @group aurora
|
||||
/// @since 0.1.0
|
||||
$nord15: #b48ead;
|
||||
144
old/index.html
Normal file
144
old/index.html
Normal file
@@ -0,0 +1,144 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
|
||||
<script src="https://kit.fontawesome.com/ad50eeab11.js" crossorigin="anonymous"></script>
|
||||
|
||||
<link href='style.css' rel='stylesheet' type='text/css'>
|
||||
|
||||
<nav class="nav">
|
||||
<a href="#s1" class="active">Havox V2</a>
|
||||
<a href="#s1">Intro</a>
|
||||
<a href="#s2">Tutorials</a>
|
||||
<a href="#s3">Projects</a>
|
||||
</nav>
|
||||
|
||||
<h3>Havox.org V2</h3>
|
||||
|
||||
<article id = "s1">
|
||||
<h1>About havox <i class="far fa-address-card"></i></h1>
|
||||
<p>This is havox - idk rlry know what havox is but isss whatever</p>
|
||||
|
||||
<p>Feel free to check out any of my <span class = "nav"><a href = "#s2">tutorials</a></span> or one of my various js <span class = "nav"><a href = "#s3">projects</a></span></p>
|
||||
<p><b>Why V2?</b></p>
|
||||
<p>
|
||||
This is the second revision of Havox. After havox's initial conception in late 2017, it has suffered from a chronic case of spaghetti code. An update with: neater <strike>and better</strike> code, updated theming and overall cleaner UI was long overdue.
|
||||
</p>
|
||||
<p><b>Comrades</b></p>
|
||||
<p>
|
||||
The Union of the indestructible republics of the free ones
|
||||
The Great Russia has forever consolidated itself.
|
||||
Long live the people created by the will of the people
|
||||
A single, mighty Soviet Union!
|
||||
</p>
|
||||
<p>
|
||||
Be glorious, our free Fatherland,
|
||||
Friendship, peoples a reliable stronghold!
|
||||
The Soviet banner, the banner of the people
|
||||
Let it lead from victory to victory!
|
||||
</p>
|
||||
<p>
|
||||
Through the thunderstorms the sun of freedom shone,
|
||||
And Lenin, the great one, illumined our way.
|
||||
We were brought up by Stalin - to be faithful to the people.
|
||||
We were inspired by work and deeds.
|
||||
</p>
|
||||
<p>
|
||||
Be glorious, Fatherland freer,
|
||||
Happiness of peoples reliable stronghold!
|
||||
The Soviet banner, the banner of the people
|
||||
Let it lead from victory to victory!
|
||||
</p>
|
||||
<p>
|
||||
We raised our army in the battles,
|
||||
The invaders of the vile from the road are estimated!
|
||||
We are in the battles to decide the fate of generations,
|
||||
We will lead our glory to our Fatherland!
|
||||
</p>
|
||||
<p>
|
||||
Be glorious, our free Fatherland,
|
||||
the glory of peoples is a reliable stronghold!
|
||||
The Soviet banner, the banner of the people
|
||||
Let it lead from victory to victory!
|
||||
</p>
|
||||
|
||||
<p>
|
||||
The Union of the indestructible republics of the free ones
|
||||
The Great Russia has forever consolidated itself.
|
||||
Long live the people created by the will of the people
|
||||
A single, mighty Soviet Union!
|
||||
</p>
|
||||
<p>
|
||||
Be glorious, our free Fatherland,
|
||||
Friendship, peoples a reliable stronghold!
|
||||
The Soviet banner, the banner of the people
|
||||
Let it lead from victory to victory!
|
||||
</p>
|
||||
<p>
|
||||
Through the thunderstorms the sun of freedom shone,
|
||||
And Lenin, the great one, illumined our way.
|
||||
We were brought up by Stalin - to be faithful to the people.
|
||||
We were inspired by work and deeds.
|
||||
</p>
|
||||
<p>
|
||||
Be glorious, Fatherland freer,
|
||||
Happiness of peoples reliable stronghold!
|
||||
The Soviet banner, the banner of the people
|
||||
Let it lead from victory to victory!
|
||||
</p>
|
||||
<p>
|
||||
We raised our army in the battles,
|
||||
The invaders of the vile from the road are estimated!
|
||||
We are in the battles to decide the fate of generations,
|
||||
We will lead our glory to our Fatherland!
|
||||
</p>
|
||||
<p>
|
||||
Be glorious, our free Fatherland,
|
||||
the glory of peoples is a reliable stronghold!
|
||||
The Soviet banner, the banner of the people
|
||||
Let it lead from victory to victory!
|
||||
</p>
|
||||
|
||||
</article>
|
||||
|
||||
<article id="s2">
|
||||
<h2>Tutorials <i class="fas fa-code"></i></h2>
|
||||
<table>
|
||||
<tr>
|
||||
<td> <a class="tutName">Travelling sales person</a> </td>
|
||||
<td>This tutorial looks at different implementations of the TSP problem</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <a class="tutName">Midpoint displacement terrain gen</a> </td>
|
||||
<td>This tutorial looks at generating random and natural looking 2D terrains</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <a class="tutName">Convex hull Generator</a> </td>
|
||||
<td>This tutorial looks at wrapping algorithsm</td>
|
||||
</tr>
|
||||
</table>
|
||||
</article>
|
||||
<div class="p"></div>
|
||||
<article id="s3">
|
||||
<h2>Projects <i class="fas fa-code"></i></h2>
|
||||
<table>
|
||||
<tr>
|
||||
<td> <a class="tutName">Game of Life</a> </td>
|
||||
<td>A js implementation of the classic Game of Life - John Conway</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <a class="tutName">Maze Generator</a> </td>
|
||||
<td>A maze generator built in js</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <a class="tutName">Oscillations in 3D</a> </td>
|
||||
<td>A js implementation of <a href="https://twitter.com/beesandbombs/status/940639806522085376">Bees and Bomb's gif</a></td>
|
||||
</tr>
|
||||
</table>
|
||||
</article>
|
||||
|
||||
<div class="p"></div>
|
||||
|
||||
<article class="margin" id="s4">
|
||||
<h2>Credits</h2>
|
||||
<p>Thank you to @uixmat for inspiration <strike>and some code</strike> for this page, check out his <a href="https://twitter.com/uixmat/" target="_blank">Twitter</a>.</p>
|
||||
</article>
|
||||
111
old/style.css
Normal file
111
old/style.css
Normal file
@@ -0,0 +1,111 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
|
||||
* {
|
||||
box-sizing: border-box; }
|
||||
|
||||
html, body {
|
||||
font-family: "Roboto", sans-serif;
|
||||
background: #eceff4;
|
||||
padding: 80px 30px 30px;
|
||||
color: #444;
|
||||
height: 100%; }
|
||||
|
||||
ol, ul {
|
||||
margin: 0 0 50px 0; }
|
||||
|
||||
ul {
|
||||
position: relative;
|
||||
width: 75%;
|
||||
margin: 100px auto 0;
|
||||
padding: 10px;
|
||||
box-sizing: border-box; }
|
||||
|
||||
ul li {
|
||||
display: flex;
|
||||
background: red; }
|
||||
|
||||
h3 {
|
||||
color: black;
|
||||
font-size: 48px; }
|
||||
|
||||
h1 {
|
||||
font-weight: bold;
|
||||
color: black; }
|
||||
|
||||
p {
|
||||
line-height: 1.6em;
|
||||
margin-bottom: 10px;
|
||||
font-size: 20px;
|
||||
padding: 0; }
|
||||
p:last-child {
|
||||
margin-bottom: 40px; }
|
||||
|
||||
code {
|
||||
background: #f8f8f8;
|
||||
color: #d64f9b;
|
||||
border: 1px solid #eee;
|
||||
padding: 2px;
|
||||
border-radius: 3px; }
|
||||
|
||||
a {
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
color: #88c0d0;
|
||||
text-decoration: none;
|
||||
transition: all 200ms; }
|
||||
a:hover, a:focus {
|
||||
color: #ebcb8b; }
|
||||
|
||||
article {
|
||||
margin-bottom: 50px; }
|
||||
article .margin {
|
||||
margin-bottom: 100vh; }
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: #3b4252;
|
||||
position: fixed;
|
||||
padding: 30px; }
|
||||
nav a {
|
||||
display: inline-flex;
|
||||
padding: 20px 30px;
|
||||
color: #eceff4;
|
||||
text-decoration: none; }
|
||||
nav a:hover, nav a:focus {
|
||||
color: #ebcb8b; }
|
||||
nav a.active {
|
||||
color: #88c0d0; }
|
||||
|
||||
table {
|
||||
text-align: center;
|
||||
background-color: #3b4252;
|
||||
color: #eceff4;
|
||||
width: 75%;
|
||||
align-self: center;
|
||||
border: 1px solid #8fbcbb;
|
||||
border-collapse: collapse;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0%); }
|
||||
|
||||
td {
|
||||
border: 1px solid #8fbcbb;
|
||||
padding: 10px; }
|
||||
td a {
|
||||
font-size: 16px;
|
||||
text-decoration: none;
|
||||
color: #eceff4; }
|
||||
|
||||
.tutName {
|
||||
font-weight: bold;
|
||||
color: #8fbcbb;
|
||||
font-size: 20px; }
|
||||
.tutName:hover {
|
||||
color: #ebcb8b; }
|
||||
|
||||
.p {
|
||||
padding: 50px; }
|
||||
|
||||
/*# sourceMappingURL=style.css.map */
|
||||
14
script.js
Normal file
14
script.js
Normal file
@@ -0,0 +1,14 @@
|
||||
// https://twitter.com/uixmat
|
||||
|
||||
function scrollNav() {
|
||||
$('.nav a').click(function(){
|
||||
$(".active").removeClass("active");
|
||||
$(this).addClass("active");
|
||||
|
||||
$('html, body').stop().animate({
|
||||
scrollTop: $($(this).attr('href')).offset().top - 160
|
||||
}, 300);
|
||||
return false;
|
||||
});
|
||||
}
|
||||
scrollNav();
|
||||
7
style.css.map
Normal file
7
style.css.map
Normal file
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"version": 3,
|
||||
"mappings": "AAAQ,2EAAmE;AAE3E,CAAE;EAAE,UAAU,EAAE,UAAU;;AAO1B,UAAW;EACT,WAAW,EAAE,oBAAoB;EACjC,UAAU,ECsIJ,OAAO;EDrIb,OAAO,EAAE,cAAc;EACvB,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;;AAGd,MAAO;EACL,MAAM,EAAE,UAAU;;AAGpB,EAAG;EACD,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,YAAY;EACpB,OAAO,EAAE,IAAI;EACb,UAAU,EAAE,UAAU;;AAGxB,KAAM;EACJ,OAAO,EAAE,IAAI;EACb,UAAU,EAAE,GAAG;;AAGjB,EAAG;EACA,KAAK,EAAE,KAAK;EACZ,SAAS,EAAE,IAAI;;AAGlB,EAAG;EACD,WAAW,EAAE,IAAI;EACjB,KAAK,EAAE,KAAK;;AAGd,CAAE;EACA,WAAW,EAAE,KAAK;EAClB,aAAa,EAAE,IAAI;EACnB,SAAS,EAAE,IAAI;EACf,OAAO,EAAE,CAAC;EACV,YAAa;IACX,aAAa,EAAE,IAAI;;AAIvB,IAAK;EACH,UAAU,EAAE,OAAO;EACnB,KAAK,EAAE,OAAO;EACd,MAAM,EAAE,cAAc;EACtB,OAAO,EAAE,GAAG;EACZ,aAAa,EAAE,GAAG;;AAGpB,CAAE;EACA,SAAS,EAAE,IAAI;EACf,WAAW,EAAE,IAAI;EACjB,KAAK,ECuGC,OAAO;EDtGb,eAAe,EAAE,IAAI;EACrB,UAAU,EAAE,SAAS;EACrB,gBACO;IACL,KAAK,ECiJA,OAAO;;AD7IhB,OAAQ;EACN,aAAa,EAAE,IAAI;EACnB,eAAQ;IACN,aAAa,EAAE,KAAK;;AAIxB,GAAI;EACF,OAAO,EAAE,IAAI;EACb,KAAK,EAAE,IAAI;EACX,GAAG,EAAE,CAAC;EACN,IAAI,EAAE,CAAC;EACP,UAAU,ECvCJ,OAAO;EDwCb,QAAQ,EAAE,KAAK;EACf,OAAO,EAAE,IAAI;EACb,KAAE;IACA,OAAO,EAAE,WAAW;IACpB,OAAO,EAAE,SAAS;IAClB,KAAK,ECqDD,OAAO;IDpDX,eAAe,EAAE,IAAI;IACrB,wBACQ;MACN,KAAK,ECuHF,OAAO;IDrHZ,YAAS;MACP,KAAK,ECqEH,OAAO;;ADhEf,KAAM;EACF,UAAU,EAAE,MAAM;EAClB,gBAAgB,EC3DZ,OAAO;ED4DX,KAAK,ECsCD,OAAO;EDrCX,KAAK,EAAE,GAAG;EACV,UAAU,EAAE,MAAM;EAClB,MAAM,EAAE,iBAAgB;EACxB,eAAe,EAAE,QAAQ;EACzB,QAAQ,EAAE,QAAQ;EAClB,IAAI,EAAE,GAAG;EACT,SAAS,EAAE,mBAAmB;;AAGlC,EAAG;EACC,MAAM,EAAE,iBAAgB;EACxB,OAAO,EAAE,IAAI;EAEb,IAAE;IACC,SAAS,EAAE,IAAI;IACf,eAAe,EAAE,IAAI;IACrB,KAAK,ECqBJ,OAAO;;ADjBf,QAAS;EACJ,WAAW,EAAE,IAAI;EACjB,KAAK,ECwBF,OAAO;EDvBV,SAAS,EAAE,IAAI;EACf,cAAQ;IACP,KAAK,ECkFF,OAAO;;AD9EhB,EAAG;EACE,OAAO,EAAE,IAAI",
|
||||
"sources": ["style.scss","nord.scss"],
|
||||
"names": [],
|
||||
"file": "style.css"
|
||||
}
|
||||
168
style.scss
Normal file
168
style.scss
Normal file
@@ -0,0 +1,168 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
|
||||
@import "nord.scss";
|
||||
* { box-sizing: border-box;}
|
||||
|
||||
$primaryColor: deeppink;
|
||||
$dkBg: #303947;
|
||||
$itemBg: #6788a7;
|
||||
$itemBgOdd: darken(#6788a7,15%);
|
||||
|
||||
html, body {
|
||||
font-family: "Roboto", sans-serif;
|
||||
background: $nord6;
|
||||
padding: 80px 30px 30px;
|
||||
color: #444;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
margin: 0 0 50px 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
position: relative;
|
||||
width: 75%;
|
||||
margin: 100px auto 0;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
ul li {
|
||||
display: flex;
|
||||
background: red;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: $nord0;
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: $nord0;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.6em;
|
||||
margin-bottom: 10px;
|
||||
font-size: 20px;
|
||||
padding: 0;
|
||||
&:last-child {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
background: #f8f8f8;
|
||||
color: #d64f9b;
|
||||
border: 1px solid #eee;
|
||||
padding: 2px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
color: $nord8;
|
||||
text-decoration: none;
|
||||
transition: all 200ms;
|
||||
&:hover,
|
||||
&:focus{
|
||||
color: $nord13;
|
||||
}
|
||||
}
|
||||
|
||||
article {
|
||||
margin-bottom: 50px;
|
||||
.margin {
|
||||
margin-bottom: 100vh;
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: $nord1;
|
||||
position: fixed;
|
||||
padding: 30px;
|
||||
a {
|
||||
display: inline-flex;
|
||||
padding: 20px 30px;
|
||||
color: $nord6;
|
||||
text-decoration: none;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $nord13;
|
||||
}
|
||||
&.active {
|
||||
color: $nord8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tut_box {
|
||||
border: 2px solid $nord1;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 10px;
|
||||
padding: 5px;
|
||||
|
||||
&:hover {
|
||||
background-color: $nord1;
|
||||
color: $nord6;
|
||||
a {
|
||||
color: $nord13;
|
||||
}
|
||||
.out_link{
|
||||
color: $nord7;
|
||||
}
|
||||
}
|
||||
p {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.tut_date {
|
||||
float: right;
|
||||
position: relative;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.tutName {
|
||||
font-weight: bold;
|
||||
color: $nord7;
|
||||
font-size: 22px;
|
||||
&:hover {
|
||||
color: $nord13;
|
||||
}
|
||||
}
|
||||
|
||||
.out_link {
|
||||
font-weight: bold;
|
||||
color: $nord3;
|
||||
text-decoration: none;
|
||||
padding: 5px, 5px;
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user