Moved actual theme
This commit is contained in:
parent
6ff06a6e0e
commit
edaeaf08b8
GPG Key ID:
AE3CE523DAAA8401
@ -1,42 +1,50 @@
|
||||
*,
|
||||
*::after,
|
||||
*::before {
|
||||
box-sizing: border-box;
|
||||
text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: $font-family-sans-serif;
|
||||
font-family: $font-family-base;
|
||||
font-size: 62.5%;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: $color-bg;
|
||||
color: $color-text;
|
||||
font-size: $font-size-base;
|
||||
line-height: 1.4em;
|
||||
font-synthesis: weight style small-caps;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
margin: auto;
|
||||
max-width: 64em;
|
||||
padding: 4em;
|
||||
max-width: 52em;
|
||||
padding: 6em 4em 4em 4em;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
@media (max-width: 684px) {
|
||||
body {
|
||||
font-size: $font-size-base * .85;
|
||||
padding: 2em;
|
||||
font-size: $font-size-base * 0.85;
|
||||
padding: 4em 1em 2em 1em;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin word-wrap {
|
||||
hyphens: auto;
|
||||
overflow-wrap: break-word;
|
||||
word-break: break-word;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
@include word-wrap;
|
||||
|
||||
font-weight: 700;
|
||||
hyphens: auto;
|
||||
line-height: 1.1;
|
||||
margin-bottom: 1.5rem;
|
||||
margin-top: 3rem;
|
||||
overflow-wrap: break-word;
|
||||
word-break: break-word;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -63,6 +71,11 @@ h6 {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 2.5rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
small,
|
||||
sub,
|
||||
sup {
|
||||
@ -75,52 +88,77 @@ hr {
|
||||
|
||||
a {
|
||||
color: $color-blossom;
|
||||
text-decoration: inherit;
|
||||
transition: color 0.25s;
|
||||
|
||||
&:visited {
|
||||
color: $color-blossom;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: $color-fade;
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-bottom: 2.5rem;
|
||||
margin-top: 0;
|
||||
padding-left: 1.4em;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: .4em;
|
||||
margin-bottom: 0.4em;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 3px solid $color-blossom;
|
||||
font-style: italic;
|
||||
margin-left: 1.5em;
|
||||
padding-left: 1em;
|
||||
background-color: $color-bg-alt;
|
||||
border-left: 5px solid $color-blossom;
|
||||
margin-bottom: 2.5rem;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding: 0.8em 0.8em 0.8em 1em;
|
||||
}
|
||||
|
||||
img {
|
||||
blockquote p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
img,
|
||||
video {
|
||||
display: block;
|
||||
height: auto;
|
||||
margin-bottom: 2.5rem;
|
||||
margin-top: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
pre {
|
||||
background-color: $color-bg-alt;
|
||||
border: 1px solid $color-bg-alt;
|
||||
border-radius: 4px;
|
||||
border: 1px solid $color-bg-alt;
|
||||
display: block;
|
||||
font-size: 0.9em;
|
||||
margin-bottom: 2.5rem;
|
||||
margin-top: 0;
|
||||
overflow-x: auto;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: $color-bg-alt;
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
background-color: $color-bg-code;
|
||||
border-radius: 4px;
|
||||
font-size: .9em;
|
||||
padding: 0 .5em;
|
||||
font-size: 0.9em;
|
||||
padding: 0 0.2em;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
pre > code {
|
||||
pre>code {
|
||||
background-color: transparent;
|
||||
font-size: 1em;
|
||||
padding: 0;
|
||||
white-space: pre;
|
||||
}
|
||||
@ -133,8 +171,8 @@ table {
|
||||
|
||||
td,
|
||||
th {
|
||||
border-bottom: 1px solid $color-bg-alt;
|
||||
padding: .5em;
|
||||
border-bottom: 1px dashed $color-blossom;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
input,
|
||||
@ -152,9 +190,9 @@ textarea {
|
||||
|
||||
.button,
|
||||
button,
|
||||
input[type='submit'],
|
||||
input[type='reset'],
|
||||
input[type='button'] {
|
||||
input[type="submit"],
|
||||
input[type="reset"],
|
||||
input[type="button"] {
|
||||
background-color: $color-blossom;
|
||||
border: 1px solid $color-blossom;
|
||||
border-radius: 1px;
|
||||
@ -162,18 +200,18 @@ input[type='button'] {
|
||||
color: $color-bg;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
padding: 1em;
|
||||
padding: 5px 10;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
|
||||
&[disabled] {
|
||||
cursor: default;
|
||||
opacity: .5;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
&:focus:enabled,
|
||||
&:hover:enabled {
|
||||
background-color: $color-fade;
|
||||
border-color: $color-fade;
|
||||
color: $color-bg;
|
||||
@ -183,15 +221,15 @@ input[type='button'] {
|
||||
|
||||
textarea,
|
||||
select,
|
||||
input[type] {
|
||||
input {
|
||||
background-color: $color-bg-alt;
|
||||
border: 1px solid $color-bg-alt;
|
||||
border-radius: 4px;
|
||||
box-shadow: none;
|
||||
box-sizing: border-box;
|
||||
color: $color-text;
|
||||
margin: .5em;
|
||||
padding: 1em;
|
||||
margin-bottom: 10;
|
||||
padding: 6px 10;
|
||||
|
||||
&:focus {
|
||||
border: 1px solid $color-blossom;
|
||||
@ -199,7 +237,7 @@ input[type] {
|
||||
}
|
||||
}
|
||||
|
||||
input[type='checkbox']:focus {
|
||||
input[type="checkbox"]:focus {
|
||||
outline: 1px dotted $color-blossom;
|
||||
}
|
||||
|
||||
@ -208,5 +246,5 @@ legend,
|
||||
fieldset {
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
41
_scss/_navbar.scss
Normal file
41
_scss/_navbar.scss
Normal file
@ -0,0 +1,41 @@
|
||||
header {
|
||||
background-color: $color-bg;
|
||||
border-bottom: 1px solid $color-header;
|
||||
box-shadow: 0 5px 5px $color-bg;
|
||||
left: 0;
|
||||
line-height: 3.5em;
|
||||
opacity: .975;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
nav {
|
||||
margin: auto;
|
||||
max-width: 60em;
|
||||
padding: 0 4em;
|
||||
text-align: right;
|
||||
|
||||
a {
|
||||
color: $color-text;
|
||||
padding: 0 1em;
|
||||
|
||||
&:visited {
|
||||
color: $color-text;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 684px) {
|
||||
header {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
nav {
|
||||
padding: 0 2em;
|
||||
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
21
_scss/_print.scss
Normal file
21
_scss/_print.scss
Normal file
@ -0,0 +1,21 @@
|
||||
@media print {
|
||||
body {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
audio,
|
||||
embed,
|
||||
footer,
|
||||
form,
|
||||
header,
|
||||
iframe,
|
||||
nav,
|
||||
object,
|
||||
video {
|
||||
display: none;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 500px;
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,6 @@
|
||||
html {
|
||||
line-height: 1.15;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
@ -12,7 +13,7 @@ main {
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: .67em 0;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
hr {
|
||||
@ -31,7 +32,8 @@ a {
|
||||
}
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: 0;
|
||||
border-bottom: none;
|
||||
text-decoration: underline;
|
||||
text-decoration: underline dotted;
|
||||
}
|
||||
|
||||
@ -60,11 +62,11 @@ sup {
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -.25em;
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -.5em;
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
img {
|
||||
@ -93,29 +95,29 @@ select {
|
||||
}
|
||||
|
||||
button,
|
||||
[type='button'],
|
||||
[type='reset'],
|
||||
[type='submit'] {
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type='button']::-moz-focus-inner,
|
||||
[type='reset']::-moz-focus-inner,
|
||||
[type='submit']::-moz-focus-inner {
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
button:-moz-focusring,
|
||||
[type='button']:-moz-focusring,
|
||||
[type='reset']:-moz-focusring,
|
||||
[type='submit']:-moz-focusring {
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
padding: .35em .75em .625em;
|
||||
padding: 0.35em 0.75em 0.625em;
|
||||
}
|
||||
|
||||
legend {
|
||||
@ -135,23 +137,23 @@ textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
[type='checkbox'],
|
||||
[type='radio'] {
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
[type='number']::-webkit-inner-spin-button,
|
||||
[type='number']::-webkit-outer-spin-button {
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
[type='search'] {
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
[type='search']::-webkit-search-decoration {
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
@ -174,4 +176,4 @@ template {
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
9
_scss/_variables.scss
Normal file
9
_scss/_variables.scss
Normal file
@ -0,0 +1,9 @@
|
||||
$color-bg: #212529;
|
||||
$color-bg-alt: hwb(0deg 0% 100% / 20%);
|
||||
$color-bg-code: #2e3440;
|
||||
$color-blossom: #85BCF2;
|
||||
$color-fade: #4e6f8e;
|
||||
$color-header: #1b1f22;
|
||||
$color-text: #dee2e6;
|
||||
$font-family-base: "Jost", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
$font-size-base: 1.8rem;
|
||||
@ -1,9 +0,0 @@
|
||||
@font-face {
|
||||
font-display: swap;
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
src: url('/assets/fonts/open-sans/open-sans-regular.ttf') format('truetype'),
|
||||
url('/assets/fonts/open-sans/open-sans-regular.woff') format('woff'),
|
||||
url('/assets/fonts/open-sans/open-sans-regular.woff2') format('woff2');
|
||||
}
|
||||
@ -1,4 +0,0 @@
|
||||
$color00: rgb(255, 0, 0);
|
||||
$color01: rgb(255, 255, 204);
|
||||
|
||||
@import 'highlight/main';
|
||||
@ -1 +0,0 @@
|
||||
@import 'components/core';
|
||||
@ -1 +0,0 @@
|
||||
@import 'normalize/main';
|
||||
@ -1,11 +0,0 @@
|
||||
$color-bg-alt: rgba(0, 0, 0, .09);
|
||||
$color-bg: rgb(250, 250, 250);
|
||||
$color-blossom: rgb(0, 108, 160);
|
||||
$color-fade: rgb(13, 78, 120);
|
||||
$color-html: rgb(250, 250, 250);
|
||||
$color-text: rgb(85, 85, 85);
|
||||
|
||||
$font-family-sans-serif: 'Open Sans', sans-serif;
|
||||
$font-size-base: 1.6em;
|
||||
|
||||
@import 'sakura/main';
|
||||
@ -1,14 +0,0 @@
|
||||
@import 'utilities/textsizeadjust';
|
||||
|
||||
*,
|
||||
*::after,
|
||||
*::before {
|
||||
@include text-size-adjust(100%);
|
||||
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
background-color: $color-html;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
@ -1,139 +0,0 @@
|
||||
.highlight {
|
||||
.c {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.cm {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.cs {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.err {
|
||||
border: 1px solid $color00;
|
||||
}
|
||||
|
||||
.ge {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.gh {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.gp {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.gs {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.gu {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hll {
|
||||
background-color: $color01;
|
||||
}
|
||||
|
||||
.k {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.kc {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.kd {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.kn {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.kr {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.nc {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ne {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ni {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.nn {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.nt {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ow {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.s {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.s1 {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.s2 {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.sb {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.sc {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.sd {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.se {
|
||||
font-style: italic;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.sh {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.si {
|
||||
font-style: italic;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.sr {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.ss {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.sx {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
@ -1,14 +0,0 @@
|
||||
// Text Size Adjust
|
||||
//
|
||||
// The text-size-adjust CSS property controls the text inflation algorithm used
|
||||
// on some smartphones and tablets. Other browsers will ignore this property.
|
||||
//
|
||||
// Values: none | auto | <percentage>
|
||||
// Default: none
|
||||
//
|
||||
// https://drafts.csswg.org/css-size-adjust/#adjustment-control
|
||||
@mixin text-size-adjust($value: none) {
|
||||
-moz-text-size-adjust: $value;
|
||||
-ms-text-size-adjust: $value;
|
||||
-webkit-text-size-adjust: $value;
|
||||
}
|
||||
@ -1,9 +1,8 @@
|
||||
---
|
||||
# Loading site styles
|
||||
---
|
||||
|
||||
@import 'base/normalize';
|
||||
@import 'base/highlight';
|
||||
@import 'base/sakura';
|
||||
@import 'base/main';
|
||||
@import 'base/fonts';
|
||||
@import "reset";
|
||||
@import "variables";
|
||||
@import "framework";
|
||||
@import "navbar";
|
||||
@import "print";
|
||||
Loading…
Reference in New Issue
Block a user