commit 2d6ae6db8d9fa3a3bc69caab672da75249db2d40 Author: Jay Date: Tue Mar 10 21:09:28 2026 +0000 v2 diff --git a/.sass-cache/a793ed03640b1c0a8a3e086a7a54137332111963/nord.scssc b/.sass-cache/a793ed03640b1c0a8a3e086a7a54137332111963/nord.scssc new file mode 100644 index 0000000..1d743fa Binary files /dev/null and b/.sass-cache/a793ed03640b1c0a8a3e086a7a54137332111963/nord.scssc differ diff --git a/.sass-cache/a793ed03640b1c0a8a3e086a7a54137332111963/style.scssc b/.sass-cache/a793ed03640b1c0a8a3e086a7a54137332111963/style.scssc new file mode 100644 index 0000000..42a3436 Binary files /dev/null and b/.sass-cache/a793ed03640b1c0a8a3e086a7a54137332111963/style.scssc differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..436325e --- /dev/null +++ b/index.html @@ -0,0 +1,123 @@ + +Havox + + + +

Havox.org V2

+
+

About havox 

+

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.

+

Feel free to check out any of my tutorials or one of my various js projects

+

Why V2?

+

+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 and better code, updated theming and overall cleaner UI was long overdue. +

+

Why is Havox on umbra.cyou?

+

Havox has domain hopped a fair bit since 2017 (where it used to be hosted on jayomayo.host - lol) however since losing the havox.org domain, I will be using umbra.cyou for the foreseeable future

+

Daily Trump Quote

+

+
+ +
+

Tutorials 

+
+

3 Jan 2021

+ Summed area tables +

This tutorial looks at intergral images and how they're useful.

+
+ +
+

3 Feb 2019

+ Midpoint displacement terrain generation +

This tutorial looks at generating random and natural looking 2D terrains.

+
+ +
+

14 Feb 2018

+ Convex hull Generator +

This tutorial looks at wrapping algorithms.

+
+ +
+

22 Sep 2018

+ Travelling sales person +

This tutorial looks at different implementations of the TSP problem and how different solutions can be implemented.

+
+
+ +
+

Projects 

+

Please note a lot of these projects use mouseClicked() functions which don't work with mobile :(

+ +
+

1 Oct 2021

+ Drawing bezier curves +

An interactive animated diagram on drawing quadatric and cubic Bezier curves. Click anywhere on the canvas to place points.

+
+ +
+

23 Sept 2021

+ 2D Marching Squares +

A demonstration of marching squares, click a tile to edit the terrain.

+
+ +
+

11 Apr 2020

+ Bubble sort visualiser +

A classic bubble sort visualiser where bars are sorted by height. One frame being one loop.

+
+ +
+

2 Apr 2020

+ Warping lines illusion +

A visualisation of the Müller-Lyer illusion shown in js

+
+ +
+

27 Feb 2019

+ Fourier Series +

A project showing how a square wave can be made with just sin waves.

+
+ +
+

23 Feb 2019

+ Constructing an ellispse +

A visualisation of how an ellipse can be constructed with a circle and radial lines. inspo

+
+ +
+

2 May 2018

+ Game of Life +

A js implementation of the classic Game of Life - John Conway.

+
+ +
+

18 Mar 2018

+ Calculating PI +

A simulation that looks at the ratio of randomly placed dots between a square and circle to calulate PI.

+
+ +
+

17 Dec 2017

+ Oscillations in 3D +

A js implementation of Bees and Bomb's gif.

+
+ +
+

13 Nov 2017

+ Maze Generator +

A maze generator built in js.

+
+
+ +
+

Credits

+

Thank you to @uixmat for inspiration and some code for this webpage, check out his twitter.

+

Also shoutout to Daniel Shiffman and the P5 team. P5 is used extensively in these tutorials & projects

+
+ diff --git a/index_style.css b/index_style.css new file mode 100644 index 0000000..9712484 --- /dev/null +++ b/index_style.css @@ -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 */ diff --git a/index_style.css.map b/index_style.css.map new file mode 100644 index 0000000..b7c8362 --- /dev/null +++ b/index_style.css.map @@ -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" +} \ No newline at end of file diff --git a/nord.scss b/nord.scss new file mode 100644 index 0000000..4b0be03 --- /dev/null +++ b/nord.scss @@ -0,0 +1,235 @@ +// Copyright (c) 2016-present Arctic Ice Studio +// Copyright (c) 2016-present Sven Greb + +// 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 +//// + +/// 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; \ No newline at end of file diff --git a/old/index.html b/old/index.html new file mode 100644 index 0000000..57f533e --- /dev/null +++ b/old/index.html @@ -0,0 +1,144 @@ + + + + + + + + + +

Havox.org V2

+ +
+

About havox 

+

This is havox - idk rlry know what havox is but isss whatever

+ +

Feel free to check out any of my tutorials or one of my various js projects

+

Why V2?

+

+ 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 and better code, updated theming and overall cleaner UI was long overdue. +

+

Comrades

+

+ 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! +

+

+ 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! +

+

+ 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. +

+

+ Be glorious, Fatherland freer, + Happiness of peoples reliable stronghold! + The Soviet banner, the banner of the people + Let it lead from victory to victory! +

+

+ 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! +

+

+ 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! +

+ +

+ 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! +

+

+ 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! +

+

+ 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. +

+

+ Be glorious, Fatherland freer, + Happiness of peoples reliable stronghold! + The Soviet banner, the banner of the people + Let it lead from victory to victory! +

+

+ 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! +

+

+ 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! +

+ +
+ + +
+ + +
+ +
+

Credits

+

Thank you to @uixmat for inspiration and some code for this page, check out his Twitter.

+
diff --git a/old/style.css b/old/style.css new file mode 100644 index 0000000..c4fd033 --- /dev/null +++ b/old/style.css @@ -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 */ diff --git a/script.js b/script.js new file mode 100644 index 0000000..98a47ef --- /dev/null +++ b/script.js @@ -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(); \ No newline at end of file diff --git a/style.css.map b/style.css.map new file mode 100644 index 0000000..1e10969 --- /dev/null +++ b/style.css.map @@ -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" +} \ No newline at end of file diff --git a/style.scss b/style.scss new file mode 100644 index 0000000..272da3b --- /dev/null +++ b/style.scss @@ -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; +} + + + + + + + + + + + + + + + + + +