Bauke/bauke-xyz
Bauke
/
bauke-xyz
1
Fork 0
Code Releases 12 Activity

Switch to SCSS, fix CSS custom properties.

This commit is contained in:
Bauke 2020-08-13 16:19:43 +02:00
parent 71227e0a44
commit ae50137a45
Signed by: Bauke
GPG Key ID: C1C0F29952BCF558
16 changed files with 255 additions and 214 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
package.json
View File

@ -7,9 +7,9 @@
"repository": "https://git.holllo.cc/Bauke/bauke.xyz",
"license": "MIT",
"scripts": {
"start": "nodemon --watch 'source/' --exec 'yarn build' --ext 'html css'",
"build": "node 'source/index.js'",
"test": "xo && stylelint 'source/css/*.css'",
"start": "nodemon --watch 'source/' --exec 'yarn build' --ext 'html scss'",
"build": "node 'source/index.js' && sass 'source/scss/':'public/css/'",
"test": "xo && stylelint 'source/scss/*.scss'",
"deploy": "rm -rf 'public/' && yarn build && yarn deploy:netlify",
"deploy:netlify": "netlify deploy --prod --dir 'public/' -s 37bb1f7c-2abb-419f-9a31-a4b72209c1c8"
},
@ -24,12 +24,15 @@
"netlify-cli": "^2.58.0",
"nodemon": "^2.0.4",
"nunjucks": "^3.2.2",
"sass": "^1.26.10",
"stylelint": "^13.6.1",
"stylelint-config-xo-scss": "^0.13.0",
"stylelint-config-xo-space": "^0.14.0",
"xo": "^0.32.1"
},
"stylelint": {
"extends": [
"stylelint-config-xo-scss",
"stylelint-config-xo-space"
],
"rules": {

43
source/css/libraries.css
View File

@ -1,43 +0,0 @@
.libraries {
background-color: transparent;
border: none;
padding: 0;
}
.libraries li {
background-color: var(--background-2);
padding: 16px;
}
.libraries a {
margin-bottom: 8px;
}
.libraries a:hover {
background-color: var(--primary-accent-2);
}
.libraries .badges {
display: flex;
gap: 8px;
}
#npm,
.libraries li.npm {
border: 1px solid var(--primary-accent-1);
}
.npm a {
background-color: var(--primary-accent-1);
color: var(--background-1);
}
#crates,
.libraries li.crates {
border: 1px solid var(--primary-accent-4);
}
.crates a {
background-color: var(--primary-accent-4);
color: var(--background-1);
}

28
source/css/userscripts.css
View File

@ -1,28 +0,0 @@
header {
align-items: center;
background-color: var(--background-2);
border: 1px solid var(--primary-accent-4);
display: flex;
justify-content: center;
padding: 16px;
width: 100%;
}
h2 {
margin-right: auto;
padding: 0;
}
a.install {
background-color: var(--primary-accent-4);
color: var(--background-1);
}
a.install:hover {
background-color: var(--primary-accent-3);
}
.remove-padding,
.remove-a-padding a {
padding: 0;
}

28
source/css/userstyles.css
View File

@ -1,28 +0,0 @@
header {
align-items: center;
background-color: var(--background-2);
border: 1px solid var(--primary-accent-1);
display: flex;
justify-content: center;
padding: 16px;
width: 100%;
}
h2 {
margin-right: auto;
padding: 0;
}
a.install {
background-color: var(--primary-accent-1);
color: var(--background-1);
}
a.install:hover {
background-color: #96c839;
}
.remove-padding,
.remove-a-padding a {
padding: 0;
}

18
source/index.html
View File

@ -6,14 +6,14 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bauke</title>
<link rel="stylesheet" href="css/modern-normalize.css">
<link rel="stylesheet" href="css/variables.css">
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<main>
<h1>Bauke</h1>
<ul>
<main class="bordered">
<h1 class="bordered">Bauke</h1>
<ul class="bordered">
<li>
<a href="https://git.holllo.cc/Bauke" target="_blank">Gitea</a>
</li>
@ -24,7 +24,7 @@
<a href="https://gitlab.com/Bauke" target="_blank">GitLab</a>
</li>
</ul>
<ul>
<ul class="bordered">
<li>
<a href="https://holllo.cc" target="_blank">Holllo</a>
</li>
@ -32,12 +32,12 @@
<a href="https://driftingnebula.com" target="_blank">driftingnebula</a>
</li>
</ul>
<ul>
<ul class="bordered">
<li>
<a href="https://tildes.net/user/Bauke" target="_blank">Tildes</a>
</li>
</ul>
<ul>
<ul class="bordered">
<li>
<a href="https://matrix.org" target="_blank">Matrix: @baukexyz:matrix.org</a>
</li>
@ -46,7 +46,7 @@
</li>
</ul>
<div class="divider"></div>
<ul>
<ul class="bordered">
<li>
<a href="https://git.holllo.cc/Bauke?q=open-source" target="_blank">♡ Open Source</a>
</li>
@ -58,7 +58,7 @@
</li>
</ul>
</main>
<footer>
<footer class="bordered">
<p>
&copy; Bauke
<a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank">CC BY-SA 4.0</a>

3
source/index.js
View File

@ -12,7 +12,8 @@ async function main() {
'!userscripts.js',
'!userstyles.js',
'!userscripts/*',
'!userstyles/*'
'!userstyles/*',
'!scss/*'
],
'../public/',
{

113
source/libraries/index.html
View File

@ -6,71 +6,74 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Libraries</title>
<link rel="stylesheet" href="../css/modern-normalize.css">
<link rel="stylesheet" href="../css/variables.css">
<link rel="stylesheet" href="../css/index.css">
<link rel="stylesheet" href="../css/common.css">
<link rel="stylesheet" href="../css/libraries.css">
</head>
<body>
<main>
<h1>Libraries</h1>
<main class="bordered">
<h1 class="bordered">Libraries</h1>
<h2 id="crates">Crates.io</h2>
<ul class="libraries">
<li class="crates" id="opml">
<a href="https://crates.io/crates/opml" target="_blank">opml</a>
<p class="badges">
<img src="https://img.shields.io/crates/v/opml?color=yellowgreen&amp;style=flat-square"
alt="Crates.io version">
<img src="https://img.shields.io/crates/dr/opml?color=yellowgreen&amp;style=flat-square"
alt="Crates.io recent downloads">
<img src="https://img.shields.io/crates/l/opml?color=yellowgreen&amp;style=flat-square"
alt="Crates.io license">
</p>
</li>
</ul>
<div id="crates">
<h2 class="bordered">Crates.io</h2>
<ul class="bordered libraries">
<li class="bordered crates" id="opml">
<a class="button" href="https://crates.io/crates/opml" target="_blank">opml</a>
<p class="badges">
<img src="https://img.shields.io/crates/v/opml?color=yellowgreen&amp;style=flat-square"
alt="Crates.io version">
<img src="https://img.shields.io/crates/dr/opml?color=yellowgreen&amp;style=flat-square"
alt="Crates.io recent downloads">
<img src="https://img.shields.io/crates/l/opml?color=yellowgreen&amp;style=flat-square"
alt="Crates.io license">
</p>
</li>
</ul>
</div>
<div class="divider"></div>
<h2 id="npm">npm</h2>
<ul class="libraries">
<li class="npm" id="fancify">
<a href="https://npmjs.com/package/fancify" target="_blank">fancify</a>
<p class="badges">
<img src="https://img.shields.io/npm/v/fancify?color=red&amp;style=flat-square"
alt="npm version">
<img src="https://img.shields.io/npm/dm/fancify?color=red&amp;style=flat-square"
alt="npm downloads per month">
<img src="https://img.shields.io/npm/l/fancify?color=red&amp;style=flat-square"
alt="npm license">
</p>
</li>
<li class="npm" id="node-ddg">
<a href="https://npmjs.com/package/node-ddg" target="_blank">node-ddg</a>
<p class="badges">
<img src="https://img.shields.io/npm/v/node-ddg?color=red&amp;style=flat-square"
alt="npm version">
<img src="https://img.shields.io/npm/dm/node-ddg?color=red&amp;style=flat-square"
alt="npm downloads per month">
<img src="https://img.shields.io/npm/l/node-ddg?color=red&amp;style=flat-square"
alt="npm license">
</p>
</li>
<li class="npm" id="owofy">
<a href="https://npmjs.com/package/owofy" target="_blank">owofy</a>
<p class="badges">
<img src="https://img.shields.io/npm/v/owofy?color=red&amp;style=flat-square"
alt="npm version">
<img src="https://img.shields.io/npm/dm/owofy?color=red&amp;style=flat-square"
alt="npm downloads per month">
<img src="https://img.shields.io/npm/l/owofy?color=red&amp;style=flat-square"
alt="npm license">
</p>
</li>
</ul>
<div id="npm">
<h2 class="bordered">npm</h2>
<ul class="bordered libraries">
<li class="bordered npm" id="fancify">
<a class="button" href="https://npmjs.com/package/fancify" target="_blank">fancify</a>
<p class="badges">
<img src="https://img.shields.io/npm/v/fancify?color=red&amp;style=flat-square"
alt="npm version">
<img src="https://img.shields.io/npm/dm/fancify?color=red&amp;style=flat-square"
alt="npm downloads per month">
<img src="https://img.shields.io/npm/l/fancify?color=red&amp;style=flat-square"
alt="npm license">
</p>
</li>
<li class="bordered npm" id="node-ddg">
<a class="button" href="https://npmjs.com/package/node-ddg" target="_blank">node-ddg</a>
<p class="badges">
<img src="https://img.shields.io/npm/v/node-ddg?color=red&amp;style=flat-square"
alt="npm version">
<img src="https://img.shields.io/npm/dm/node-ddg?color=red&amp;style=flat-square"
alt="npm downloads per month">
<img src="https://img.shields.io/npm/l/node-ddg?color=red&amp;style=flat-square"
alt="npm license">
</p>
</li>
<li class="bordered npm" id="owofy">
<a class="button" href="https://npmjs.com/package/owofy" target="_blank">owofy</a>
<p class="badges">
<img src="https://img.shields.io/npm/v/owofy?color=red&amp;style=flat-square"
alt="npm version">
<img src="https://img.shields.io/npm/dm/owofy?color=red&amp;style=flat-square"
alt="npm downloads per month">
<img src="https://img.shields.io/npm/l/owofy?color=red&amp;style=flat-square"
alt="npm license">
</p>
</li>
</ul>
</div>
</main>
<footer>
<footer class="bordered">
<p>
&copy; Bauke
<a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank">CC BY-SA 4.0</a>

0
source/css/variables.css → source/scss/_variables.scss
View File

66
source/css/index.css → source/scss/common.scss
View File

@ -1,3 +1,5 @@
@import 'variables';
html {
font-size: 62.5%;
}
@ -10,7 +12,6 @@ body {
}
main {
align-items: center;
display: flex;
gap: 16px;
flex-direction: column;
@ -35,35 +36,28 @@ p {
a {
border: 1px dashed transparent;
color: var(--primary-accent-7);
color: var(--page-accent-1, --primary-accent-7);
display: inline-block;
font-weight: bold;
padding: 4px 8px;
text-decoration: none;
}
a:hover {
background-color: var(--primary-accent-3);
color: var(--background-1);
}
&:hover {
background-color: var(--page-accent-2, var(--primary-accent-3));
color: var(--background-1);
}
a:active,
a:focus {
border: 1px dashed var(--foreground-1);
outline: none;
&:active,
&:focus {
border: 1px dashed var(--foreground-1);
outline: none;
}
}
img {
display: inline-block;
}
main,
footer,
h1,
ul {
border: 1px solid var(--primary-accent-5);
}
ul {
align-items: center;
background-color: var(--background-2);
@ -76,15 +70,10 @@ ul {
li {
margin-bottom: 8px;
}
li:last-child {
margin-bottom: 0;
}
.divider {
border-top: 1px solid var(--primary-accent-5);
width: 100%;
&:last-of-type {
margin-bottom: 0;
}
}
footer {
@ -92,8 +81,31 @@ footer {
margin: 0 auto;
max-width: 500px;
padding: 16px;
a {
padding: 0;
}
}
footer a {
.bordered {
border: var(--border-size, 1px) solid var(--border-accent, var(--primary-accent-5));
}
.button {
background-color: var(--page-accent-1);
color: var(--background-1);
&:hover {
background-color: var(--page-accent-2);
}
}
.divider {
border-top: var(--border-size, 1px) solid var(--border-accent, var(--primary-accent-5));
width: 100%;
}
.remove-padding,
.remove-a-padding a {
padding: 0;
}

5
source/scss/index.scss Normal file
View File

@ -0,0 +1,5 @@
body {
--border-accent: var(--primary-accent-5);
--page-accent-1: var(--primary-accent-7);
--page-accent-2: var(--primary-accent-3);
}

44
source/scss/libraries.scss Normal file
View File

@ -0,0 +1,44 @@
body {
--border-accent: var(--primary-accent-5);
--page-accent-1: var(--primary-accent-7);
--page-accent-2: var(--primary-accent-3);
}
.libraries {
background-color: transparent;
border: none;
padding: 0;
}
.libraries li {
background-color: var(--background-2);
padding: 16px;
}
.libraries a {
margin-bottom: 8px;
}
.libraries .badges {
display: flex;
gap: 8px;
}
#crates,
#npm {
display: flex;
flex-direction: column;
gap: 16px;
}
#crates {
--border-accent: var(--primary-accent-4);
--page-accent-1: var(--primary-accent-4);
--page-accent-2: var(--primary-accent-7);
}
#npm {
--border-accent: var(--primary-accent-1);
--page-accent-1: var(--primary-accent-1);
--page-accent-2: var(--primary-accent-7);
}

19
source/scss/userscripts.scss Normal file
View File

@ -0,0 +1,19 @@
body {
--border-accent: var(--primary-accent-10);
--page-accent-1: var(--primary-accent-7);
--page-accent-2: var(--primary-accent-3);
}
header {
align-items: center;
background-color: var(--background-2);
display: flex;
justify-content: center;
padding: 16px;
width: 100%;
}
h2 {
margin-right: auto;
padding: 0;
}

19
source/scss/userstyles.scss Normal file
View File

@ -0,0 +1,19 @@
body {
--border-accent: var(--primary-accent-1);
--page-accent-1: var(--primary-accent-7);
--page-accent-2: var(--primary-accent-3);
}
header {
align-items: center;
background-color: var(--background-2);
display: flex;
justify-content: center;
padding: 16px;
width: 100%;
}
h2 {
margin-right: auto;
padding: 0;
}

17
source/userscripts/index.html
View File

@ -6,16 +6,15 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Userscripts</title>
<link rel="stylesheet" href="../css/modern-normalize.css">
<link rel="stylesheet" href="../css/variables.css">
<link rel="stylesheet" href="../css/index.css">
<link rel="stylesheet" href="../css/common.css">
<link rel="stylesheet" href="../css/userscripts.css">
</head>
<body>
<main>
<h1>Userscripts</h1>
<main class="bordered">
<h1 class="bordered">Userscripts</h1>
<ul class="remove-a-padding">
<ul class="bordered remove-a-padding">
<li>A collection of all my userscripts for various websites.</li>
<li>
@ -42,14 +41,14 @@
<div class="divider"></div>
{% for script in scripts %}
<header>
<header class="bordered">
<h2 id="{{ script.name | lower | replace(" ", "-") }}">
{{ script.name }}
</h2>
<a class="install" href="{{ script.downloadURL }}" target="_blank">Install</a>
<a class="button" href="{{ script.downloadURL }}" target="_blank">Install</a>
</header>
<ul>
<ul class="bordered">
<li>{{ script.description }}</li>
<li>Version {{ script.version }}</li>
<li>
@ -64,7 +63,7 @@
{% endfor %}
</main>
<footer>
<footer class="bordered">
<p>
&copy; Bauke
<a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank">CC BY-SA 4.0</a>

17
source/userstyles/index.html
View File

@ -6,16 +6,15 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Userstyles</title>
<link rel="stylesheet" href="../css/modern-normalize.css">
<link rel="stylesheet" href="../css/variables.css">
<link rel="stylesheet" href="../css/index.css">
<link rel="stylesheet" href="../css/common.css">
<link rel="stylesheet" href="../css/userstyles.css">
</head>
<body>
<main>
<h1>Userstyles</h1>
<main class="bordered">
<h1 class="bordered">Userstyles</h1>
<ul class="remove-a-padding">
<ul class="bordered remove-a-padding">
<li>A collection of all my userstyles for various websites.</li>
<li>
@ -41,14 +40,14 @@
<div class="divider"></div>
{% for style in styles %}
<header>
<header class="bordered">
<h2 id="{{ style.name | lower | replace(" ", "-") }}">
{{ style.name }}
</h2>
<a class="install" href="{{ style.updateURL }}" target="_blank">Install</a>
<a class="button" href="{{ style.updateURL }}" target="_blank">Install</a>
</header>
<ul>
<ul class="bordered">
<li>{{ style.description }}</li>
<li>Version {{ style.version }}</li>
<li>Licensed under {{ style.license }}.</li>
@ -64,7 +63,7 @@
{% endfor %}
</main>
<footer>
<footer class="bordered">
<p>
&copy; Bauke
<a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank">CC BY-SA 4.0</a>

40
yarn.lock
View File

@ -6964,7 +6964,7 @@ postcss-values-parser@^1.5.0:
indexes-of "^1.0.1"
uniq "^1.0.1"
postcss@^7.0.14, postcss@^7.0.17, postcss@^7.0.2, postcss@^7.0.21, postcss@^7.0.26, postcss@^7.0.27, postcss@^7.0.32, postcss@^7.0.6, postcss@^7.0.7:
postcss@^7.0.14, postcss@^7.0.17, postcss@^7.0.2, postcss@^7.0.21, postcss@^7.0.26, postcss@^7.0.27, postcss@^7.0.31, postcss@^7.0.32, postcss@^7.0.6, postcss@^7.0.7:
version "7.0.32"
resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.32.tgz#4310d6ee347053da3433db2be492883d62cec59d"
integrity sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==
@ -8169,6 +8169,14 @@ style-search@^0.1.0:
resolved "https://registry.yarnpkg.com/style-search/-/style-search-0.1.0.tgz#7958c793e47e32e07d2b5cafe5c0bf8e12e77902"
integrity sha1-eVjHk+R+MuB9K1yv5cC/jhLneQI=
stylelint-config-xo-scss@^0.13.0:
version "0.13.0"
resolved "https://registry.yarnpkg.com/stylelint-config-xo-scss/-/stylelint-config-xo-scss-0.13.0.tgz#d714b760717892825e0788a1a3dd2a331592f750"
integrity sha512-bTicB369hfDjaMQJ42tV38lil2+WwR98AcL6e2Rqgs3hbHP5EPyEtjCw8bg+XP4o6GiOqERDE2DQLCT1lGD6Fg==
dependencies:
stylelint-config-xo "^0.19.0"
stylelint-scss "^3.13.0"
stylelint-config-xo-space@^0.14.0:
version "0.14.0"
resolved "https://registry.yarnpkg.com/stylelint-config-xo-space/-/stylelint-config-xo-space-0.14.0.tgz#9e01a3640a85f3b2067f3b0d58567bf5b53837e0"
@ -8184,7 +8192,15 @@ stylelint-config-xo@^0.16.0:
stylelint-declaration-block-no-ignored-properties "^2.2.0"
stylelint-order "^3.1.1"
stylelint-declaration-block-no-ignored-properties@^2.2.0:
stylelint-config-xo@^0.19.0:
version "0.19.0"
resolved "https://registry.yarnpkg.com/stylelint-config-xo/-/stylelint-config-xo-0.19.0.tgz#2a4292c3c3fbb9e530664e1165500dd786929a16"
integrity sha512-X/dWOM1lytr2FPv9D1gOnZnUKEcuqbw3CqloM6A5plXo8gXJXHKk1mmjOLrW3jTQNr6YGn3xwP61IjdOTSmEiA==
dependencies:
stylelint-declaration-block-no-ignored-properties "^2.3.0"
stylelint-order "^4.1.0"
stylelint-declaration-block-no-ignored-properties@^2.2.0, stylelint-declaration-block-no-ignored-properties@^2.3.0:
version "2.3.0"
resolved "https://registry.yarnpkg.com/stylelint-declaration-block-no-ignored-properties/-/stylelint-declaration-block-no-ignored-properties-2.3.0.tgz#98a641a137bf057c97ef3d3c4a848cd339e736da"
integrity sha512-0Ly/mKc3prAhxBSY5TbmMMDAkUHYMOxdmUu/mNcFvB6A53C24x5Rsu1Vtrik9bKPKwgd75sZUhV9ZsWerPbuJQ==
@ -8200,6 +8216,26 @@ stylelint-order@^3.1.1:
postcss "^7.0.17"
postcss-sorting "^5.0.1"
stylelint-order@^4.1.0:
version "4.1.0"
resolved "https://registry.yarnpkg.com/stylelint-order/-/stylelint-order-4.1.0.tgz#692d05b7d0c235ac66fcf5ea1d9e5f08a76747f6"
integrity sha512-sVTikaDvMqg2aJjh4r48jsdfmqLT+nqB1MOsaBnvM3OwLx4S+WXcsxsgk5w18h/OZoxZCxuyXMh61iBHcj9Qiw==
dependencies:
lodash "^4.17.15"
postcss "^7.0.31"
postcss-sorting "^5.0.1"
stylelint-scss@^3.13.0:
version "3.18.0"
resolved "https://registry.yarnpkg.com/stylelint-scss/-/stylelint-scss-3.18.0.tgz#8f06371c223909bf3f62e839548af1badeed31e9"
integrity sha512-LD7+hv/6/ApNGt7+nR/50ft7cezKP2HM5rI8avIdGaUWre3xlHfV4jKO/DRZhscfuN+Ewy9FMhcTq0CcS0C/SA==
dependencies:
lodash "^4.17.15"
postcss-media-query-parser "^0.2.3"
postcss-resolve-nested-selector "^0.1.1"
postcss-selector-parser "^6.0.2"
postcss-value-parser "^4.1.0"
stylelint@^13.6.1:
version "13.6.1"
resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-13.6.1.tgz#cc1d76338116d55e8ff2be94c4a4386c1239b878"