From 2d6ae6db8d9fa3a3bc69caab672da75249db2d40 Mon Sep 17 00:00:00 2001 From: Jay Date: Tue, 10 Mar 2026 21:09:28 +0000 Subject: [PATCH] v2 --- .../nord.scssc | Bin 0 -> 16223 bytes .../style.scssc | Bin 0 -> 30387 bytes index.html | 123 +++++++++ index_style.css | 117 +++++++++ index_style.css.map | 7 + nord.scss | 235 ++++++++++++++++++ old/index.html | 144 +++++++++++ old/style.css | 111 +++++++++ script.js | 14 ++ style.css.map | 7 + style.scss | 168 +++++++++++++ 11 files changed, 926 insertions(+) create mode 100644 .sass-cache/a793ed03640b1c0a8a3e086a7a54137332111963/nord.scssc create mode 100644 .sass-cache/a793ed03640b1c0a8a3e086a7a54137332111963/style.scssc create mode 100644 index.html create mode 100644 index_style.css create mode 100644 index_style.css.map create mode 100644 nord.scss create mode 100644 old/index.html create mode 100644 old/style.css create mode 100644 script.js create mode 100644 style.css.map create mode 100644 style.scss diff --git a/.sass-cache/a793ed03640b1c0a8a3e086a7a54137332111963/nord.scssc b/.sass-cache/a793ed03640b1c0a8a3e086a7a54137332111963/nord.scssc new file mode 100644 index 0000000000000000000000000000000000000000..1d743fa7df51344c049c79e4d135d0d1aff2fc83 GIT binary patch literal 16223 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 literal 0 HcmV?d00001 diff --git a/.sass-cache/a793ed03640b1c0a8a3e086a7a54137332111963/style.scssc b/.sass-cache/a793ed03640b1c0a8a3e086a7a54137332111963/style.scssc new file mode 100644 index 0000000000000000000000000000000000000000..42a3436bbc2ca08d00a73a0283c4d33257664817 GIT binary patch literal 30387 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 yS|ie^ZEJnWp +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; +} + + + + + + + + + + + + + + + + + +