mirror of
https://git.sr.ht/~cadence/bibliogram
synced 2024-10-31 21:47:29 +00:00
Refactor sass for theming
This commit is contained in:
parent
710400c4f1
commit
23e2ffecbf
4
package-lock.json
generated
4
package-lock.json
generated
@ -2738,8 +2738,8 @@
|
|||||||
"integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg=="
|
"integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg=="
|
||||||
},
|
},
|
||||||
"pinski": {
|
"pinski": {
|
||||||
"version": "github:cloudrac3r/pinski#342365c44b923d5e6c6c5c34bc9267d7652be2a9",
|
"version": "github:cloudrac3r/pinski#61809e18606265ec47813f3bdab80928c70ae203",
|
||||||
"from": "github:cloudrac3r/pinski#342365c44b923d5e6c6c5c34bc9267d7652be2a9",
|
"from": "github:cloudrac3r/pinski#61809e18606265ec47813f3bdab80928c70ae203",
|
||||||
"requires": {
|
"requires": {
|
||||||
"mime": "^2.4.4",
|
"mime": "^2.4.4",
|
||||||
"pug": "^2.0.3",
|
"pug": "^2.0.3",
|
||||||
|
@ -19,7 +19,7 @@
|
|||||||
"mixin-deep": "^2.0.1",
|
"mixin-deep": "^2.0.1",
|
||||||
"node-dir": "^0.1.17",
|
"node-dir": "^0.1.17",
|
||||||
"node-fetch": "^2.6.0",
|
"node-fetch": "^2.6.0",
|
||||||
"pinski": "github:cloudrac3r/pinski#342365c44b923d5e6c6c5c34bc9267d7652be2a9",
|
"pinski": "github:cloudrac3r/pinski#61809e18606265ec47813f3bdab80928c70ae203",
|
||||||
"pug": "^2.0.4",
|
"pug": "^2.0.4",
|
||||||
"semver": "^7.2.1",
|
"semver": "^7.2.1",
|
||||||
"sharp": "^0.25.2",
|
"sharp": "^0.25.2",
|
||||||
|
@ -114,6 +114,21 @@ let constants = {
|
|||||||
default: "",
|
default: "",
|
||||||
boolean: true,
|
boolean: true,
|
||||||
replaceEmptyWithDefault: true
|
replaceEmptyWithDefault: true
|
||||||
|
},{
|
||||||
|
name: "save_data",
|
||||||
|
default: "automatic",
|
||||||
|
boolean: false,
|
||||||
|
replaceEmptyWithDefault: true
|
||||||
|
},{
|
||||||
|
name: "rewrite_youtube",
|
||||||
|
default: "",
|
||||||
|
boolean: false,
|
||||||
|
replaceEmptyWithDefault: true
|
||||||
|
},{
|
||||||
|
name: "rewrite_twitter",
|
||||||
|
default: "",
|
||||||
|
boolean: false,
|
||||||
|
replaceEmptyWithDefault: true
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
|
||||||
@ -210,7 +225,7 @@ let constants = {
|
|||||||
|
|
||||||
additional_routes: [],
|
additional_routes: [],
|
||||||
|
|
||||||
database_version: 5
|
database_version: 6
|
||||||
}
|
}
|
||||||
|
|
||||||
// Override values from config and export the result
|
// Override values from config and export the result
|
||||||
|
@ -75,6 +75,17 @@ const deltas = new Map([
|
|||||||
.run()
|
.run()
|
||||||
})()
|
})()
|
||||||
}],
|
}],
|
||||||
|
// version 5 to version 6
|
||||||
|
[6, function() {
|
||||||
|
db.transaction(() => {
|
||||||
|
db.prepare("ALTER TABLE UserSettings ADD COLUMN save_data TEXT NOT NULL DEFAULT 'automatic'")
|
||||||
|
.run()
|
||||||
|
db.prepare("ALTER TABLE UserSettings ADD COLUMN rewrite_youtube TEXT NOT NULL DEFAULt ''")
|
||||||
|
.run()
|
||||||
|
db.prepare("ALTER TABLE UserSettings ADD COLUMN rewrite_twitter TEXT NOT NULL DEFAULT ''")
|
||||||
|
.run()
|
||||||
|
})()
|
||||||
|
}]
|
||||||
])
|
])
|
||||||
|
|
||||||
module.exports = async function() {
|
module.exports = async function() {
|
||||||
|
@ -12,8 +12,10 @@ function getPageTitle(post) {
|
|||||||
|
|
||||||
module.exports = [
|
module.exports = [
|
||||||
{
|
{
|
||||||
route: "/", methods: ["GET"], code: async () => {
|
route: "/", methods: ["GET"], code: async ({req}) => {
|
||||||
|
const settings = getSettings(req)
|
||||||
return render(200, "pug/home.pug", {
|
return render(200, "pug/home.pug", {
|
||||||
|
settings,
|
||||||
rssEnabled: constants.feeds.enabled,
|
rssEnabled: constants.feeds.enabled,
|
||||||
allUnblocked: history.testNoneBlocked(),
|
allUnblocked: history.testNoneBlocked(),
|
||||||
torAvailable: switcher.canUseTor(),
|
torAvailable: switcher.canUseTor(),
|
||||||
@ -22,9 +24,11 @@ module.exports = [
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
route: "/privacy", methods: ["GET"], code: async () => {
|
route: "/privacy", methods: ["GET"], code: async ({req}) => {
|
||||||
|
|
||||||
if (constants.has_privacy_policy && pugCache.has("pug/privacy.pug")) {
|
if (constants.has_privacy_policy && pugCache.has("pug/privacy.pug")) {
|
||||||
return render(200, "pug/privacy.pug")
|
const settings = getSettings(req)
|
||||||
|
return render(200, "pug/privacy.pug", {settings})
|
||||||
} else {
|
} else {
|
||||||
return render(404, "pug/friendlyerror.pug", {
|
return render(404, "pug/friendlyerror.pug", {
|
||||||
statusCode: 404,
|
statusCode: 404,
|
||||||
|
@ -1,5 +1,8 @@
|
|||||||
meta(charset="utf-8")
|
meta(charset="utf-8")
|
||||||
link(rel="stylesheet" type="text/css" href=getStaticURL("sass", "main.sass"))
|
|
||||||
|
- let theme = settings ? settings.theme : "classic"
|
||||||
|
link(rel="stylesheet" type="text/css" href=getStaticURL("sass", `${theme}.sass`))
|
||||||
|
|
||||||
meta(name="viewport" content="width=device-width, initial-scale=1")
|
meta(name="viewport" content="width=device-width, initial-scale=1")
|
||||||
link(rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png")
|
link(rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png")
|
||||||
link(rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png")
|
link(rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png")
|
||||||
|
@ -6,10 +6,10 @@ mixin fieldset(name)
|
|||||||
.fieldset-contents
|
.fieldset-contents
|
||||||
block
|
block
|
||||||
|
|
||||||
mixin input(id, description, disabled)
|
mixin input(id, description, placeholder, disabled)
|
||||||
.field-row
|
.field-row
|
||||||
label.description(for=id)= description
|
label.description(for=id)= description
|
||||||
input(type="text" id=id name=id value=settings[id] disabled=disabled)
|
input(type="text" id=id name=id value=settings[id] placeholder=placeholder disabled=disabled)
|
||||||
|
|
||||||
mixin checkbox(id, description, label, disabled)
|
mixin checkbox(id, description, label, disabled)
|
||||||
.field-row.checkbox-row
|
.field-row.checkbox-row
|
||||||
@ -45,6 +45,17 @@ html
|
|||||||
{value: "en-us", text: "English (US)"}
|
{value: "en-us", text: "English (US)"}
|
||||||
])
|
])
|
||||||
|
|
||||||
|
+select("save_data", "Save data", true, [
|
||||||
|
{value: "automatic", text: "Automatic"},
|
||||||
|
{value: "off", text: "Off"},
|
||||||
|
{value: "lazy_load", text: "Lazy load"},
|
||||||
|
{value: "full", text: "Full"}
|
||||||
|
])
|
||||||
|
|
||||||
|
+input("rewrite_youtube", "Rewrite YouTube domain", "youtube.com", true)
|
||||||
|
|
||||||
|
+input("rewrite_twitter", "Rewrite Twitter domain", "twitter.com", true)
|
||||||
|
|
||||||
+checkbox("show_comments", "Display comments", "Display", true)
|
+checkbox("show_comments", "Display comments", "Display", true)
|
||||||
|
|
||||||
+checkbox("link_hashtags", "Clickable hashtags", "Clickable", true)
|
+checkbox("link_hashtags", "Clickable hashtags", "Clickable", true)
|
||||||
@ -52,8 +63,9 @@ html
|
|||||||
+checkbox("spa", "Fast navigation", "Enabled", false)
|
+checkbox("spa", "Fast navigation", "Enabled", false)
|
||||||
|
|
||||||
+fieldset("Appearance")
|
+fieldset("Appearance")
|
||||||
+select("theme", "Theme", true, [
|
+select("theme", "Theme", false, [
|
||||||
{value: "classic", text: "Classic"}
|
{value: "classic", text: "Classic"},
|
||||||
|
{value: "blue", text: "Classic blue"}
|
||||||
])
|
])
|
||||||
|
|
||||||
+checkbox("display_top_nav", "Display top bar", "Always", false)
|
+checkbox("display_top_nav", "Display top bar", "Always", false)
|
||||||
|
2
src/site/sass/blue.sass
Normal file
2
src/site/sass/blue.sass
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
@use "themes/blue" as *
|
||||||
|
@use "includes/main" with ($theme: $theme)
|
2
src/site/sass/classic.sass
Normal file
2
src/site/sass/classic.sass
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
@use "themes/classic" as *
|
||||||
|
@use "includes/main" with ($theme: $theme)
|
@ -96,6 +96,7 @@ button, select, input, .checkbox-row .pill
|
|||||||
|
|
||||||
input[type="text"]
|
input[type="text"]
|
||||||
width: 200px
|
width: 200px
|
||||||
|
padding: 5px 8px
|
||||||
|
|
||||||
select
|
select
|
||||||
padding: 4px 6px 4px 4px
|
padding: 4px 6px 4px 4px
|
@ -1,14 +1,12 @@
|
|||||||
@use "forms"
|
@use "forms"
|
||||||
|
|
||||||
|
$theme: () !default
|
||||||
|
|
||||||
$layout-a-max: 820px
|
$layout-a-max: 820px
|
||||||
$layout-b-min: 821px
|
$layout-b-min: 821px
|
||||||
$layout-c-max: 680px
|
$layout-c-max: 680px
|
||||||
$layout-home-a-max: 520px
|
$layout-home-a-max: 520px
|
||||||
$layout-home-b-min: 521px
|
$layout-home-b-min: 521px
|
||||||
$main-theme-link-color: #085cae
|
|
||||||
$medium-red-bg: #6a2222
|
|
||||||
$light-red-bg: #bd4444
|
|
||||||
$solar-background: #fff4e8
|
|
||||||
|
|
||||||
@font-face
|
@font-face
|
||||||
font-family: "Bariol"
|
font-family: "Bariol"
|
||||||
@ -53,11 +51,11 @@ body
|
|||||||
border-color: hsl(104, 51.4%, 43.5%)
|
border-color: hsl(104, 51.4%, 43.5%)
|
||||||
|
|
||||||
.top-nav
|
.top-nav
|
||||||
background-color: $light-red-bg
|
background-color: map-get($theme, background-power-primary)
|
||||||
position: relative
|
position: relative
|
||||||
z-index: 1
|
z-index: 1
|
||||||
box-shadow: 0px -2px 4px 4px rgba(0, 0, 0, 0.4)
|
box-shadow: map-get($theme, "shadow-down")
|
||||||
border-bottom: 1px solid #333
|
border-bottom: map-get($theme, "edge-context-divider")
|
||||||
padding: 6px 12px
|
padding: 6px 12px
|
||||||
justify-content: space-between
|
justify-content: space-between
|
||||||
align-items: center
|
align-items: center
|
||||||
@ -87,13 +85,13 @@ body
|
|||||||
line-height: 1
|
line-height: 1
|
||||||
|
|
||||||
@media screen and (max-width: $layout-a-max)
|
@media screen and (max-width: $layout-a-max)
|
||||||
border-bottom: 1px solid #333
|
border-bottom: map-get($theme, "edge-context-divider")
|
||||||
box-shadow: 0px -2px 4px 4px rgba(0, 0, 0, 0.4)
|
box-shadow: map-get($theme, "shadow-down")
|
||||||
padding-bottom: 25px
|
padding-bottom: 25px
|
||||||
|
|
||||||
@media screen and (min-width: $layout-b-min)
|
@media screen and (min-width: $layout-b-min)
|
||||||
border-right: 1px solid #333
|
border-right: map-get($theme, "edge-context-divider")
|
||||||
box-shadow: -2px 0px 4px 4px rgba(0, 0, 0, 0.4)
|
box-shadow: map-get($theme, "shadow-right")
|
||||||
|
|
||||||
.profile-sticky
|
.profile-sticky
|
||||||
position: sticky
|
position: sticky
|
||||||
@ -109,7 +107,7 @@ body
|
|||||||
height: unset
|
height: unset
|
||||||
|
|
||||||
a, a:visited
|
a, a:visited
|
||||||
color: $main-theme-link-color
|
color: map-get($theme, "link-primary")
|
||||||
|
|
||||||
.pfp
|
.pfp
|
||||||
margin: 25px 0
|
margin: 25px 0
|
||||||
@ -153,17 +151,14 @@ body
|
|||||||
|
|
||||||
.bibliogram-meta
|
.bibliogram-meta
|
||||||
margin: 20px 10px
|
margin: 20px 10px
|
||||||
border-top: 1px solid #333
|
border-top: map-get($theme, "edge-context-divider")
|
||||||
|
|
||||||
@media screen and (max-width: $layout-a-max)
|
@media screen and (max-width: $layout-a-max)
|
||||||
display: none
|
display: none
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.timeline
|
.timeline
|
||||||
--image-size: 260px
|
--image-size: 260px
|
||||||
$image-size: var(--image-size)
|
$image-size: var(--image-size)
|
||||||
$background: $solar-background
|
|
||||||
|
|
||||||
@media screen and (max-width: $layout-a-max)
|
@media screen and (max-width: $layout-a-max)
|
||||||
--image-size: 150px
|
--image-size: 150px
|
||||||
@ -172,7 +167,7 @@ body
|
|||||||
@media screen and (max-width: $layout-c-max)
|
@media screen and (max-width: $layout-c-max)
|
||||||
--image-size: calc(33vw - 10px)
|
--image-size: calc(33vw - 10px)
|
||||||
|
|
||||||
background-color: $background
|
background-color: map-get($theme, "background-primary")
|
||||||
padding: 15px 15px 40px
|
padding: 15px 15px 40px
|
||||||
|
|
||||||
&.no-posts
|
&.no-posts
|
||||||
@ -181,7 +176,7 @@ body
|
|||||||
justify-content: center
|
justify-content: center
|
||||||
|
|
||||||
.page-number
|
.page-number
|
||||||
color: #444
|
color: map-get($theme, "foreground-timeline-page")
|
||||||
line-height: 1
|
line-height: 1
|
||||||
max-width: 600px
|
max-width: 600px
|
||||||
margin: 0px auto
|
margin: 0px auto
|
||||||
@ -202,7 +197,7 @@ body
|
|||||||
position: relative
|
position: relative
|
||||||
z-index: 1
|
z-index: 1
|
||||||
padding: 10px
|
padding: 10px
|
||||||
background-color: $background
|
background-color: map-get($theme, "background-primary")
|
||||||
|
|
||||||
.next-page-container
|
.next-page-container
|
||||||
margin: 20px 0px
|
margin: 20px 0px
|
||||||
@ -234,8 +229,9 @@ body
|
|||||||
$margin: 5px
|
$margin: 5px
|
||||||
|
|
||||||
margin: $margin
|
margin: $margin
|
||||||
color: #111
|
color: map-get($theme, "foreground-thumbnail-alt")
|
||||||
background-color: rgba(40, 40, 40, 0.25)
|
border: 0px map-get($theme, "edge-thumbnail-hover")
|
||||||
|
background-color: map-get($theme, "background-timeline-loading")
|
||||||
text-decoration: none
|
text-decoration: none
|
||||||
overflow: hidden
|
overflow: hidden
|
||||||
@include sized
|
@include sized
|
||||||
@ -243,7 +239,7 @@ body
|
|||||||
&:hover
|
&:hover
|
||||||
$border-width: 3px
|
$border-width: 3px
|
||||||
margin: $margin - $border-width
|
margin: $margin - $border-width
|
||||||
border: $border-width solid #111
|
border-width: $border-width
|
||||||
|
|
||||||
@media screen and (max-width: $layout-c-max)
|
@media screen and (max-width: $layout-c-max)
|
||||||
$margin: 2px
|
$margin: 2px
|
||||||
@ -252,13 +248,13 @@ body
|
|||||||
&:hover
|
&:hover
|
||||||
$border-width: 2px
|
$border-width: 2px
|
||||||
margin: $margin - $border-width
|
margin: $margin - $border-width
|
||||||
border: $border-width solid #111
|
border-width: $border-width
|
||||||
|
|
||||||
.sized-image
|
.sized-image
|
||||||
@include sized
|
@include sized
|
||||||
|
|
||||||
.post-page
|
.post-page
|
||||||
background-color: #505156
|
background-color: map-get($theme, "background-post-distraction")
|
||||||
|
|
||||||
.post-page-divider
|
.post-page-divider
|
||||||
display: grid
|
display: grid
|
||||||
@ -292,14 +288,14 @@ body
|
|||||||
align-items: center
|
align-items: center
|
||||||
grid-template-columns: auto 1fr auto
|
grid-template-columns: auto 1fr auto
|
||||||
justify-content: center
|
justify-content: center
|
||||||
background-color: #b3b3b3
|
background-color: map-get($theme, "background-post-header")
|
||||||
padding: 10px
|
padding: 10px
|
||||||
position: sticky
|
position: sticky
|
||||||
top: 0
|
top: 0
|
||||||
border-bottom: 1px solid #333
|
border-bottom: map-get($theme, "edge-context-divider")
|
||||||
|
|
||||||
@media screen and (max-width: $layout-a-max)
|
@media screen and (max-width: $layout-a-max)
|
||||||
box-shadow: 0px -2px 4px 4px rgba(0, 0, 0, 0.4)
|
box-shadow: map-get($theme, "shadow-down")
|
||||||
|
|
||||||
.navigate-posts
|
.navigate-posts
|
||||||
-webkit-appearance: none
|
-webkit-appearance: none
|
||||||
@ -330,23 +326,23 @@ body
|
|||||||
width: $size
|
width: $size
|
||||||
height: $size
|
height: $size
|
||||||
margin-right: 10px
|
margin-right: 10px
|
||||||
background-color: rgba(40, 40, 40, 0.25)
|
background-color: map-get($theme, "background-post-pfp-loading")
|
||||||
|
|
||||||
.name
|
.name
|
||||||
font-size: 20px
|
font-size: 20px
|
||||||
color: black
|
color: map-get($theme, "foreground-timeline-header")
|
||||||
text-decoration: none
|
text-decoration: none
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
text-decoration: underline
|
text-decoration: underline
|
||||||
|
|
||||||
.relative-box
|
.relative-box
|
||||||
background-color: #eee
|
background-color: map-get($theme, "background-post-caption")
|
||||||
|
|
||||||
@media screen and (min-width: $layout-b-min)
|
@media screen and (min-width: $layout-b-min)
|
||||||
.relative-box
|
.relative-box
|
||||||
position: relative
|
position: relative
|
||||||
box-shadow: 0px 6px 4px -4px rgba(0, 0, 0, .4) inset
|
box-shadow: map-get($theme, "shadow-down-inset")
|
||||||
|
|
||||||
.scrolling-box
|
.scrolling-box
|
||||||
position: absolute
|
position: absolute
|
||||||
@ -374,7 +370,7 @@ body
|
|||||||
flex-direction: column
|
flex-direction: column
|
||||||
align-items: center
|
align-items: center
|
||||||
justify-content: center
|
justify-content: center
|
||||||
background-color: #262728
|
background-color: map-get($theme, "background-post-gallery")
|
||||||
padding: 10px
|
padding: 10px
|
||||||
|
|
||||||
@media screen and (max-width: $layout-a-max)
|
@media screen and (max-width: $layout-a-max)
|
||||||
@ -382,8 +378,8 @@ body
|
|||||||
position: relative
|
position: relative
|
||||||
|
|
||||||
.sized-image, .sized-video
|
.sized-image, .sized-video
|
||||||
color: #eee
|
color: map-get($theme, "foreground-gallery-alt")
|
||||||
background-color: #3b3c3d
|
background-color: map-get($theme, "background-post-loading")
|
||||||
max-height: 94vh
|
max-height: 94vh
|
||||||
max-width: 100%
|
max-width: 100%
|
||||||
|
|
||||||
@ -401,7 +397,7 @@ body
|
|||||||
.error-page
|
.error-page
|
||||||
box-sizing: border-box
|
box-sizing: border-box
|
||||||
min-height: 100vh
|
min-height: 100vh
|
||||||
background: #191919
|
background: map-get($theme, "background-error-page")
|
||||||
padding: 10px
|
padding: 10px
|
||||||
text-align: center
|
text-align: center
|
||||||
display: flex
|
display: flex
|
||||||
@ -410,7 +406,7 @@ body
|
|||||||
align-items: center
|
align-items: center
|
||||||
|
|
||||||
a, a:visited
|
a, a:visited
|
||||||
color: #4a93d2
|
color: map-get($theme, "link-error-page")
|
||||||
|
|
||||||
.code, .message, .explanation, .back-link
|
.code, .message, .explanation, .back-link
|
||||||
line-height: 1.2
|
line-height: 1.2
|
||||||
@ -418,18 +414,18 @@ body
|
|||||||
|
|
||||||
.code
|
.code
|
||||||
font-size: 80px
|
font-size: 80px
|
||||||
color: #fff
|
color: map-get($theme, "foreground-error-code")
|
||||||
margin-bottom: 25px
|
margin-bottom: 25px
|
||||||
|
|
||||||
.message
|
.message
|
||||||
font-size: 35px
|
font-size: 35px
|
||||||
color: #ccc
|
color: map-get($theme, "foreground-error-message")
|
||||||
|
|
||||||
.explanation
|
.explanation
|
||||||
line-height: 1.3
|
line-height: 1.3
|
||||||
margin-top: 10px
|
margin-top: 10px
|
||||||
font-size: 20px
|
font-size: 20px
|
||||||
color: #bbb
|
color: map-get($theme, "foreground-error-explanation")
|
||||||
white-space: pre-line
|
white-space: pre-line
|
||||||
|
|
||||||
.back
|
.back
|
||||||
@ -437,13 +433,11 @@ body
|
|||||||
font-size: 25px
|
font-size: 25px
|
||||||
|
|
||||||
.homepage
|
.homepage
|
||||||
$link-color: #ffb8b8
|
|
||||||
|
|
||||||
display: flex
|
display: flex
|
||||||
flex-direction: column
|
flex-direction: column
|
||||||
min-height: 100vh
|
min-height: 100vh
|
||||||
background-color: $light-red-bg
|
background-color: map-get($theme, "background-power-primary")
|
||||||
color: #fff
|
color: map-get($theme, "foreground-power-primary")
|
||||||
|
|
||||||
h1
|
h1
|
||||||
font-size: 48px
|
font-size: 48px
|
||||||
@ -454,7 +448,7 @@ body
|
|||||||
margin: 0px
|
margin: 0px
|
||||||
|
|
||||||
a, a:visited
|
a, a:visited
|
||||||
color: $link-color
|
color: map-get($theme, "link-power")
|
||||||
|
|
||||||
.banner
|
.banner
|
||||||
padding: 0px 5px
|
padding: 0px 5px
|
||||||
@ -499,7 +493,8 @@ body
|
|||||||
box-sizing: content-box
|
box-sizing: content-box
|
||||||
font-size: 20px
|
font-size: 20px
|
||||||
height: 20px
|
height: 20px
|
||||||
border: 1px solid #333
|
border: map-get($theme, "edge-go-control")
|
||||||
|
color: map-get($theme, "foreground-go-control")
|
||||||
|
|
||||||
.text
|
.text
|
||||||
border-radius: 6px 0px 0px 6px
|
border-radius: 6px 0px 0px 6px
|
||||||
@ -515,15 +510,14 @@ body
|
|||||||
padding-left: 12px
|
padding-left: 12px
|
||||||
padding-right: 12px
|
padding-right: 12px
|
||||||
cursor: pointer
|
cursor: pointer
|
||||||
background-color: #ffbebe
|
background-color: map-get($theme, "background-power-palest")
|
||||||
color: #111
|
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
background-color: #ff7c7c
|
background-color: map-get($theme, "background-power-pale")
|
||||||
|
|
||||||
.about-container
|
.about-container
|
||||||
background-color: $medium-red-bg
|
background-color: map-get($theme, "background-power-secondary")
|
||||||
color: #eee
|
color: map-get($theme, "foreground-power-secondary")
|
||||||
padding: 50px 20px
|
padding: 50px 20px
|
||||||
flex: 1
|
flex: 1
|
||||||
min-height: 60vh
|
min-height: 60vh
|
||||||
@ -538,18 +532,18 @@ body
|
|||||||
white-space: nowrap
|
white-space: nowrap
|
||||||
|
|
||||||
.link-list
|
.link-list
|
||||||
color: $link-color
|
color: map-get($theme, "link-power")
|
||||||
|
|
||||||
.structured-text
|
.structured-text
|
||||||
a, a:visited
|
a, a:visited
|
||||||
color: $main-theme-link-color
|
color: map-get($theme, "link-primary")
|
||||||
text-decoration: none
|
text-decoration: none
|
||||||
|
|
||||||
a:link, a:link:visited
|
a:link, a:link:visited
|
||||||
text-decoration: underline
|
text-decoration: underline
|
||||||
|
|
||||||
.link-to-hashtag
|
.link-to-hashtag
|
||||||
color: #127722
|
color: map-get($theme, "link-hashtag")
|
||||||
|
|
||||||
.privacy-policy
|
.privacy-policy
|
||||||
max-width: 700px
|
max-width: 700px
|
||||||
@ -558,31 +552,31 @@ body
|
|||||||
padding: 0px 10px 80px
|
padding: 0px 10px 80px
|
||||||
font-size: 20px
|
font-size: 20px
|
||||||
line-height: 1.4
|
line-height: 1.4
|
||||||
background-color: #481717
|
background-color: map-get($theme, "background-power-tertiary")
|
||||||
color: #e2e2e2
|
color: map-get($theme, "foreground-power-tertiary")
|
||||||
|
|
||||||
h1, h2, h3
|
h1, h2, h3
|
||||||
color: #f4f4f4
|
color: map-get($theme, "foreground-header-privacy")
|
||||||
|
|
||||||
h1
|
h1
|
||||||
margin: 40px 0px
|
margin: 40px 0px
|
||||||
font-size: 48px
|
font-size: 48px
|
||||||
|
|
||||||
a, a:visited
|
a, a:visited
|
||||||
color: #ffb8b8
|
color: map-get($theme, "link-power")
|
||||||
|
|
||||||
code
|
code
|
||||||
font-size: 0.8em
|
font-size: 0.8em
|
||||||
background-color: #141414
|
background-color: map-get($theme, "background-power-quote")
|
||||||
padding: 3px 5px
|
padding: 3px 5px
|
||||||
border-radius: 5px
|
border-radius: 5px
|
||||||
color: #eee
|
color: map-get($theme, "foreground-power-secondary")
|
||||||
|
|
||||||
.return-home
|
.return-home
|
||||||
line-height: 1
|
line-height: 1
|
||||||
margin-top: 45px
|
margin-top: 45px
|
||||||
padding-top: 15px
|
padding-top: 15px
|
||||||
border-top: 1px solid #714141
|
border-top: map-get($theme, "edge-power-divider")
|
||||||
|
|
||||||
.post-overlay
|
.post-overlay
|
||||||
position: fixed
|
position: fixed
|
||||||
@ -590,7 +584,7 @@ body
|
|||||||
left: 0
|
left: 0
|
||||||
right: 0
|
right: 0
|
||||||
bottom: 0
|
bottom: 0
|
||||||
background: rgba(0, 0, 0, 0.7)
|
background: map-get($theme, "background-post-overlay")
|
||||||
z-index: 10
|
z-index: 10
|
||||||
overflow-y: scroll
|
overflow-y: scroll
|
||||||
|
|
||||||
@ -603,69 +597,37 @@ body
|
|||||||
align-items: center
|
align-items: center
|
||||||
|
|
||||||
.loading-inner
|
.loading-inner
|
||||||
color: white
|
color: map-get($theme, "foreground-alert")
|
||||||
font-size: 30px
|
font-size: 30px
|
||||||
line-height: 1
|
line-height: 1
|
||||||
padding: 26px
|
padding: 26px
|
||||||
border-radius: 20px
|
border-radius: 20px
|
||||||
border: 2px solid #aaa
|
border: map-get($theme, "edge-alert")
|
||||||
font-weight: bold
|
font-weight: bold
|
||||||
background-color: #282828
|
background-color: map-get($theme, "background-alert")
|
||||||
|
|
||||||
@mixin article-code
|
|
||||||
code
|
|
||||||
font-size: 0.8em
|
|
||||||
letter-spacing: -0.2px
|
|
||||||
background: #ccc
|
|
||||||
color: #000
|
|
||||||
padding: 0px 4px
|
|
||||||
border-radius: 2px
|
|
||||||
|
|
||||||
.updater-page
|
|
||||||
@include article-code
|
|
||||||
|
|
||||||
font-size: 20px
|
|
||||||
max-width: 800px
|
|
||||||
margin: 0 auto
|
|
||||||
color: #222
|
|
||||||
|
|
||||||
.commits
|
|
||||||
border-left: 2px solid #555
|
|
||||||
margin: 10px 0px
|
|
||||||
padding-left: 10px
|
|
||||||
|
|
||||||
.hash
|
|
||||||
margin-right: 6px
|
|
||||||
|
|
||||||
.attention
|
|
||||||
border-left: 2px solid
|
|
||||||
padding-left: 8px
|
|
||||||
color: #700
|
|
||||||
|
|
||||||
.article-page
|
.article-page
|
||||||
@include article-code
|
background-color: map-get($theme, "background-primary")
|
||||||
|
|
||||||
background-color: #fff4e8
|
|
||||||
font-size: 22px
|
font-size: 22px
|
||||||
line-height: 1.4
|
line-height: 1.4
|
||||||
color: #222
|
color: map-get($theme, "foreground-primary")
|
||||||
min-height: 100vh
|
min-height: 100vh
|
||||||
|
|
||||||
header
|
h1
|
||||||
background-color: $medium-red-bg
|
|
||||||
color: #fff
|
|
||||||
padding: 40px 10px
|
|
||||||
line-height: 1.2
|
|
||||||
|
|
||||||
h1, h2
|
|
||||||
text-align: center
|
text-align: center
|
||||||
margin: 0
|
margin: 0
|
||||||
|
|
||||||
h1
|
|
||||||
font-size: 50px
|
font-size: 50px
|
||||||
|
|
||||||
h2
|
h2
|
||||||
font-size: 30px
|
font-size: 34px
|
||||||
|
margin: 0
|
||||||
|
color: map-get($theme, "foreground-header")
|
||||||
|
|
||||||
|
header
|
||||||
|
background-color: map-get($theme, "background-power-secondary")
|
||||||
|
color: map-get($theme, "foreground-power-primary")
|
||||||
|
padding: 40px 10px
|
||||||
|
line-height: 1.2
|
||||||
|
|
||||||
.article-main
|
.article-main
|
||||||
max-width: 800px
|
max-width: 800px
|
||||||
@ -673,13 +635,25 @@ body
|
|||||||
padding: 20px 20px 100px
|
padding: 20px 20px 100px
|
||||||
|
|
||||||
a, a:visited
|
a, a:visited
|
||||||
color: $main-theme-link-color
|
color: map-get($theme, "link-primary")
|
||||||
|
|
||||||
|
code
|
||||||
|
font-size: 0.8em
|
||||||
|
letter-spacing: -0.2px
|
||||||
|
background: map-get($theme, "background-primary-quote")
|
||||||
|
color: map-get($theme, "foreground-primary-quote")
|
||||||
|
padding: 0px 4px
|
||||||
|
border-radius: 2px
|
||||||
|
|
||||||
.settings-page
|
.settings-page
|
||||||
background-color: #fff4e8
|
background-color: map-get($theme, "background-primary")
|
||||||
|
color: map-get($theme, "foreground-primary")
|
||||||
|
|
||||||
|
h1, legend
|
||||||
|
color: map-get($theme, "foreground-header")
|
||||||
|
|
||||||
a, a:visited
|
a, a:visited
|
||||||
color: $main-theme-link-color
|
color: map-get($theme, "link-primary")
|
||||||
|
|
||||||
.settings
|
.settings
|
||||||
padding: 0px 10px 50px
|
padding: 0px 10px 50px
|
||||||
@ -691,8 +665,8 @@ body
|
|||||||
font-size: 24px
|
font-size: 24px
|
||||||
line-height: 1
|
line-height: 1
|
||||||
text-align: center
|
text-align: center
|
||||||
background-color: #0b420b
|
background-color: map-get($theme, "background-banner-success")
|
||||||
color: #fff
|
color: map-get($theme, "foreground-banner")
|
||||||
|
|
||||||
.action-container
|
.action-container
|
||||||
margin-top: 20px
|
margin-top: 20px
|
||||||
@ -701,8 +675,11 @@ body
|
|||||||
align-items: center
|
align-items: center
|
||||||
|
|
||||||
.save-button
|
.save-button
|
||||||
@include forms.curve-out-major
|
padding: 12px
|
||||||
width: 180px
|
width: 180px
|
||||||
|
|
||||||
|
&:not(:active)
|
||||||
|
@include forms.curve-out-major
|
||||||
|
|
||||||
.home-link
|
.home-link
|
||||||
font-size: 21px
|
font-size: 21px
|
16
src/site/sass/themes/_blue.scss
Normal file
16
src/site/sass/themes/_blue.scss
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
// Defined in scss file instead of sass because indented syntax does not have multiline maps
|
||||||
|
// This is based on the classic theme, so it pulls that in as the base and then overwrites only the properties it cares about
|
||||||
|
// This also makes it future-proof because future additions to classic will be automatically available in this style too
|
||||||
|
|
||||||
|
@use "classic";
|
||||||
|
|
||||||
|
$theme: map-merge(classic.$theme, (
|
||||||
|
"background-power-primary": #3e73b7,
|
||||||
|
"background-power-secondary": #274771,
|
||||||
|
"background-power-tertiary": #1b233c,
|
||||||
|
"background-power-palest": #bee5ff,
|
||||||
|
"background-power-pale": #7cc4ff,
|
||||||
|
"background-banner-success": #173d6f,
|
||||||
|
"link-power": #91cbfd,
|
||||||
|
"edge-power-divider": 1px solid #3b496a
|
||||||
|
));
|
54
src/site/sass/themes/_classic.scss
Normal file
54
src/site/sass/themes/_classic.scss
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
// Defined in scss file instead of sass because indented syntax does not have multiline maps
|
||||||
|
// https://github.com/sass/sass/issues/216
|
||||||
|
|
||||||
|
$theme: (
|
||||||
|
"background-primary": #fff4e8,
|
||||||
|
"background-timeline-profile": #fff,
|
||||||
|
"background-timeline-loading": #c9c1b8,
|
||||||
|
"background-post-distraction": #505156,
|
||||||
|
"background-post-overlay": rgba(0, 0, 0, 0.7),
|
||||||
|
"background-post-header": #b3b3b3,
|
||||||
|
"background-post-pfp-loading": #999,
|
||||||
|
"background-post-caption": #eee,
|
||||||
|
"background-post-gallery": #262728,
|
||||||
|
"background-post-loading": #3b3c3d,
|
||||||
|
"background-power-primary": #bd4444,
|
||||||
|
"background-power-secondary": #6a2222,
|
||||||
|
"background-power-tertiary": #481717,
|
||||||
|
"background-power-palest": #ffbebe,
|
||||||
|
"background-power-pale": #ff7c7c,
|
||||||
|
"background-power-quote": #191919,
|
||||||
|
"background-primary-quote": #ccc,
|
||||||
|
"background-error-page": #191919,
|
||||||
|
"background-alert": #282828,
|
||||||
|
"background-banner-success": #0b420b,
|
||||||
|
"foreground-primary": #222,
|
||||||
|
"foreground-header": #000,
|
||||||
|
"foreground-power-primary": #fff,
|
||||||
|
"foreground-power-secondary": #eee,
|
||||||
|
"foreground-power-tertiary": #e2e2e2,
|
||||||
|
"foreground-go-control": #111,
|
||||||
|
"foreground-thumbnail-alt": #111,
|
||||||
|
"foreground-timeline-page": #444,
|
||||||
|
"foreground-timeline-header": #000,
|
||||||
|
"foreground-gallery-alt": #eee,
|
||||||
|
"foreground-error-code": #fff,
|
||||||
|
"foreground-error-message": #ccc,
|
||||||
|
"foreground-error-explanation": #bbb,
|
||||||
|
"foreground-header-privacy": #f4f4f4,
|
||||||
|
"foreground-alert": #eee,
|
||||||
|
"foreground-primary-quote": #000,
|
||||||
|
"foreground-banner": #fff,
|
||||||
|
"link-primary": #085cae,
|
||||||
|
"link-power": #ffb8b8,
|
||||||
|
"link-error-page": #4a93d2,
|
||||||
|
"link-hashtag": #127722,
|
||||||
|
"edge-context-divider": 1px solid #333,
|
||||||
|
"edge-thumbnail-hover": solid #111,
|
||||||
|
"edge-go-control": 1px solid #333,
|
||||||
|
"edge-power-divider": 1px solid #714141,
|
||||||
|
"edge-alert": 2px solid #aaa,
|
||||||
|
"shadow-down": 0px -2px 4px 4px rgba(0, 0, 0, 0.4),
|
||||||
|
"shadow-right": -2px 0px 4px 4px rgba(0, 0, 0, 0.4),
|
||||||
|
"shadow-down-inset": 0px 6px 4px -4px rgba(0, 0, 0, 0.4) inset,
|
||||||
|
);
|
@ -21,10 +21,11 @@ subdirs("pug", async (err, dirs) => {
|
|||||||
await require("../lib/utils/upgradedb")()
|
await require("../lib/utils/upgradedb")()
|
||||||
|
|
||||||
pinski.setNotFoundTarget("/404")
|
pinski.setNotFoundTarget("/404")
|
||||||
pinski.addRoute("/static/css/main.css", "sass/main.sass", "sass")
|
pinski.addRoute("/static/css/classic.css", "sass/classic.sass", "sass")
|
||||||
|
pinski.addRoute("/static/css/blue.css", "sass/blue.sass", "sass")
|
||||||
pinski.addRoute("/settings", "pug/settings.pug", "pug")
|
pinski.addRoute("/settings", "pug/settings.pug", "pug")
|
||||||
pinski.addPugDir("pug", dirs)
|
pinski.addPugDir("pug", dirs)
|
||||||
pinski.addSassDir("sass")
|
pinski.addSassDir("sass", ["sass/includes", "sass/themes"])
|
||||||
pinski.addStaticHashTableDir("html/static/js")
|
pinski.addStaticHashTableDir("html/static/js")
|
||||||
pinski.muteLogsStartingWith("/imageproxy")
|
pinski.muteLogsStartingWith("/imageproxy")
|
||||||
pinski.muteLogsStartingWith("/videoproxy")
|
pinski.muteLogsStartingWith("/videoproxy")
|
||||||
|
Loading…
Reference in New Issue
Block a user