mirror/Guide_3DS
1
0
Fork 0
mirror of https://github.com/hacks-guide/Guide_3DS.git synced 2025-08-28 18:59:50 +02:00
Code Issues Releases Wiki Activity

dark css; many changes; screenshots!

Browse Source
This commit is contained in:
Plailect
2017-05-10 16:05:51 -04:00
parent 2746a8c47a
commit 47d0ae0f52
993 changed files with 716 additions and 78872 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
_sass/_footer.scss
View File

@@ -13,12 +13,12 @@
height: auto;
/* sticky footer fix end */
margin-top: 3em;
color: mix(#fff, $gray, 25%);
color: $primary-color;
-webkit-animation: intro 0.3s both;
animation: intro 0.3s both;
-webkit-animation-delay: 0.45s;
animation-delay: 0.45s;
background-color: $lighter-gray;
background-color: $nord1;
border-top: 1px solid $light-gray;
footer {
@@ -33,7 +33,7 @@
}
a {
color: inherit;
color: mix(#fff, $link-color, 20%);
text-decoration: none;
&:hover {

1
_sass/_masthead.scss
View File

@@ -4,6 +4,7 @@
.masthead {
position: relative;
background: $nord1;
border-bottom: 1px solid $border-color;
-webkit-animation: intro 0.3s both;
animation: intro 0.3s both;

16
_sass/_navigation.scss
View File

@@ -93,7 +93,7 @@
&.current {
color: #fff;
background: $primary-color;
background: $nord1;
}
&.disabled {
@@ -175,7 +175,7 @@
.greedy-nav {
position: relative;
min-width: 250px;
background: $background-color;
background: $nord1;
a {
display: block;
@@ -197,8 +197,8 @@
padding: 0 0.5rem;
border: 0;
outline: none;
background-color: $primary-color;
color: #fff;
background: transparent;
color: $nord0;
cursor: pointer;
}
@@ -266,7 +266,7 @@
padding: 5px;
border: 1px solid $border-color;
border-radius: $border-radius;
background: #fff;
background: $nord1;
box-shadow: 0 0 10px rgba(#000, 0.25);
a {
@@ -276,7 +276,7 @@
&:hover {
color: $masthead-link-color-hover;
background: mix(#fff, $primary-color, 75%);
background: mix(#000, $primary-color, 75%);
}
}
@@ -288,7 +288,7 @@
width: 0;
border-style: solid;
border-width: 0 10px 10px;
border-color: $border-color transparent;
border-color: mix(#000, $border-color, 55%) transparent;
display: block;
z-index: 0;
}
@@ -308,7 +308,7 @@
li {
display: block;
border-bottom: 1px solid $border-color;
border-bottom: 1px solid $nord3;
&:last-child {
border-bottom: none;

241
_sass/_nord.scss Normal file
View File

@@ -0,0 +1,241 @@
//
// ++++++++++++++++++++++++++++++++++++++++++++++++++++
// title Nord +
// project nord +
// version 0.2.0 +
// repository https://github.com/arcticicestudio/nord +
// author Arctic Ice Studio +
// email development@arcticicestudio.com +
// copyright Copyright (C) 2017 +
// ++++++++++++++++++++++++++++++++++++++++++++++++++++
//
// [References]
// Sass
// (http://sass-lang.com)
// SassDoc
// (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 hightlight 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 hightlight 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;

45
_sass/_notices.scss
View File

@@ -15,8 +15,9 @@
padding: 1em;
font-family: $global-font-family;
font-size: $type-size-6 !important;
font-weight: bold;
text-indent: initial; /* override*/
background-color: mix(#fff, $notice-color, 90%);
background-color: mix($body-color, $notice-color, 45%);
border-radius: $border-radius;
box-shadow: 0 1px 1px rgba($notice-color, 0.25);
@@ -44,17 +45,14 @@
}
a {
color: $notice-color;
color: mix(#fff, $notice-color, 30%);
text-decoration: none;
&:hover {
color: mix(#000, $notice-color, 40%);
text-decoration: underline;
}
}
code {
background-color: mix(#fff, $notice-color, 95%)
}
ul {
&:last-child {
margin-bottom: 0; /* override*/
@@ -65,13 +63,13 @@
/* Default notice */
.notice {
@include notice($light-gray);
@include notice($nord3);
}
/* Primary notice */
.notice--primary {
@include notice($primary-color);
@include notice($nord8);
}
/* Info notice */
@@ -96,4 +94,33 @@
.notice--danger {
@include notice($danger-color);
}
.screenshot_image{
position: relative;
width: auto;
display: inline-block;
position: relative;
font-family: $monospace;
font-size: $type-size-7;
line-height: 1.8;
border: 2px solid $border-color;
border-radius: $border-radius;
background-color: $border-color;
box-shadow: $box-shadow;
&:before {
position: absolute;
top: 0;
right: 0;
padding: 0.5em;
background-color: $nord6;
content: "\f08e";
font-family: "fontawesome" !important;
line-height: 1;
text-transform: none;
speak: none;
color: $background-color;
}
}

4
_sass/_page.scss
View File

@@ -84,6 +84,10 @@
}
}
hr {
border-top-color: $nord3;
}
dt {
margin-top: 1em;
font-family: $sans-serif;

4
_sass/_syntax.scss
View File

@@ -5,6 +5,7 @@
div.highlighter-rouge,
figure.highlight {
position: relative;
margin-top: 1em;
margin-bottom: 1em;
font-family: $monospace;
font-size: $type-size-7;
@@ -19,12 +20,13 @@ figure.highlight {
top: 0;
right: 0;
padding: 0.5em;
background-color: $lighter-gray;
background-color: $border-color;
content: "\f121";
font-family: "fontawesome" !important;
line-height: 1;
text-transform: none;
speak: none;
color: $background-color;
}
.highlight {

3
_sass/_tables.scss
View File

@@ -16,8 +16,9 @@ table {
}
thead {
background-color: $lighter-gray;
background-color: $nord1;
border-bottom: 1px solid $light-gray;
color: $primary-color;
}
th {

7
_sass/_utilities.scss
View File

@@ -293,7 +293,7 @@ body:hover .visually-hidden button {
position: relative;
width: $navicon-width;
height: $navicon-height;
background: #fff;
background: $primary-color;
margin: auto;
&:before,
@@ -303,7 +303,7 @@ body:hover .visually-hidden button {
left: 0;
width: $navicon-width;
height: $navicon-height;
background: #fff;
background: $primary-color;
}
&:before {
@@ -347,6 +347,7 @@ body:hover .visually-hidden button {
width: $navicon-width;
background: transparent;
margin: auto;
color: $primary-color;
&:before,
&:after {
@@ -355,7 +356,7 @@ body:hover .visually-hidden button {
left: 0;
width: $navicon-width;
height: $navicon-height;
background: #fff;
background: $primary-color;
display: none;
}

32
_sass/_variables.scss
View File

@@ -2,6 +2,8 @@
Variables
========================================================================== */
@import "nord";
/*
Typography
========================================================================== */
@@ -53,18 +55,18 @@ $darker-gray : mix(#000, $gray, 60%) !default;
$light-gray : mix(#fff, $gray, 50%) !default;
$lighter-gray : mix(#fff, $gray, 90%) !default;
$body-color : #fff !default;
$background-color : #fff !default;
$code-background-color : #fafafa !default;
$code-background-color-dark : $light-gray !default;
$text-color : $dark-gray !default;
$border-color : $lighter-gray !default;
$body-color : $nord0 !default;
$background-color : $nord0 !default;
$code-background-color : $nord2 !default;
$code-background-color-dark : $nord1 !default;
$text-color : $nord4 !default;
$border-color : $nord5 !default;
$primary-color : #7a8288 !default;
$success-color : #62c462 !default;
$warning-color : #f89406 !default;
$danger-color : #ee5f5b !default;
$info-color : #52adc8 !default;
$primary-color : $nord4 !default;
$success-color : $nord14 !default;
$warning-color : $nord12 !default;
$danger-color : $nord11 !default;
$info-color : $nord10 !default;
/* brands */
$behance-color : #1769FF !default;
@@ -90,11 +92,11 @@ $xing-color : #006567 !default;
/* links */
$link-color : $info-color !default;
$link-color-hover : mix(#000, $link-color, 25%) !default;
$link-color-visited : mix(#fff, $link-color, 25%) !default;
$link-color : mix(#fff, $info-color, 15%) !default;
$link-color-hover : mix(#fff, $link-color, 25%) !default;
$link-color-visited : mix(#000, $link-color, 25%) !default;
$masthead-link-color : $primary-color !default;
$masthead-link-color-hover : mix(#000, $primary-color, 25%) !default;
$masthead-link-color-hover : mix(#fff, $primary-color, 25%) !default;
/*