nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2024-11-30 03:03:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

theme: rework color boxes for dark mode #175

Browse source
This commit is contained in:
Sören Weber 2022-02-16 01:38:44 +01:00
parent 3d6a95434c
commit 269fd5ed95
No known key found for this signature in database
GPG key ID: 07D17FF580AE7589
11 changed files with 262 additions and 119 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
exampleSite/content/basics/customization/_index.en.md
View file

@ -149,7 +149,19 @@ First, create a new CSS file in your local `static/css` folder prefixed by `them
--MENU-SECTION-ACTIVE-CATEGORY-BG-color: #ffffff; /* Color of background for the active category (only) */ --MENU-SECTION-ACTIVE-CATEGORY-BG-color: #ffffff; /* Color of background for the active category (only) */
--MENU-VISITED-color: #506397; /* Color of 'page visited' icons in menu */ --MENU-VISITED-color: #506397; /* Color of 'page visited' icons in menu */
--MENU-SECTION-HR-color: #282830; /* Color of <hr> separator in menu */ --MENU-SECTION-HR-color: #606060; /* Color of <hr> separator in menu */
/* base styling for boxes */
--BOX-CAPTION-color: rgba( 255, 255, 255, 1 ); /* color of the title text */
--BOX-BG-color: rgba( 255, 255, 255, .833 ); /* color of the content background */
--BOX-TEXT-color: rgba( 16, 16, 16, 1 ); /* fixed color of the content text */
/* optional base colors for colored boxes as in attachments and notice shortcode */
--BOX-BLUE-color: rgba( 48, 117, 229, 1 );
--BOX-GREEN-color: rgba( 42, 178, 24, 1 );
--BOX-GREY-color: rgba( 128, 128, 128, 1 );
--BOX-ORANGE-color: rgba( 237, 153, 9, 1 );
--BOX-RED-color: rgba( 224, 62, 62, 1 );
} }
``` ```

8
layouts/shortcodes/attachments.html
View file

@ -1,10 +1,10 @@
{{- $_hugo_config := `{ "version": 1 }` }} {{- $_hugo_config := `{ "version": 1 }` }}
{{- $style := .Get "style" | default "neutral" }} {{- $style := .Get "style" | default "transparent" }}
{{- $title := .Get "title" | default ("Attachments-label" | T) }} {{- $title := .Get "title" | default ("Attachments-label" | T) }}
{{- $sort := .Get "sort" | default "asc" }} {{- $sort := .Get "sort" | default "asc" }}
<div class="attachments {{ $style }}"> <div class="box attachments {{ $style }}">
<div class="label">{{ $title }}</div> <div class="box-label">{{ $title }}</div>
<ul class="attachments-files"> <ul class="box-content attachments-files">
{{- $filesName := "files" }} {{- $filesName := "files" }}
{{- if ne .Page.File.BaseFileName "index" }} {{- if ne .Page.File.BaseFileName "index" }}
{{- $filesName = printf "%s.files" .Page.File.BaseFileName }} {{- $filesName = printf "%s.files" .Page.File.BaseFileName }}

8
layouts/shortcodes/notice.html
View file

@ -1,7 +1,9 @@
{{- $_hugo_config := `{ "version": 1 }` }} {{- $_hugo_config := `{ "version": 1 }` }}
{{- $style := .Get 0 }} {{- $style := .Get 0 }}
{{- $title := .Get 1 | default ($style | T) }} {{- $title := .Get 1 | default ($style | T) }}
<div class="notices {{ $style }}"> <div class="box notices {{ $style }}">
<div class="label">{{ $title }}</div> <div class="box-label">{{ $title }}</div>
{{ .Inner -}} <div class="box-content">
{{ .Inner }}
</div>
</div> </div>

12
static/css/theme-blue.css
View file

@ -41,4 +41,16 @@
--MENU-VISITED-color: #33a1ff; /* Color of 'page visited' icons in menu */ --MENU-VISITED-color: #33a1ff; /* Color of 'page visited' icons in menu */
--MENU-SECTION-HR-color: #20272b; /* Color of <hr> separator in menu */ --MENU-SECTION-HR-color: #20272b; /* Color of <hr> separator in menu */
/* base styling for boxes */
--BOX-CAPTION-color: rgba( 255, 255, 255, 1 ); /* color of the title text */
--BOX-BG-color: rgba( 255, 255, 255, .833 ); /* color of the content background */
--BOX-TEXT-color: rgba( 16, 16, 16, 1 ); /* fixed color of the content text */
/* optional base colors for colored boxes as in attachments and notice shortcode */
--BOX-BLUE-color: rgba( 48, 117, 229, 1 );
--BOX-GREEN-color: rgba( 42, 178, 24, 1 );
--BOX-GREY-color: rgba( 128, 128, 128, 1 );
--BOX-ORANGE-color: rgba( 237, 153, 9, 1 );
--BOX-RED-color: rgba( 224, 62, 62, 1 );
} }

12
static/css/theme-green.css
View file

@ -41,4 +41,16 @@
--MENU-VISITED-color: #599a3e; /* Color of 'page visited' icons in menu */ --MENU-VISITED-color: #599a3e; /* Color of 'page visited' icons in menu */
--MENU-SECTION-HR-color: #18211c; /* Color of <hr> separator in menu */ --MENU-SECTION-HR-color: #18211c; /* Color of <hr> separator in menu */
/* base styling for boxes */
--BOX-CAPTION-color: rgba( 255, 255, 255, 1 ); /* color of the title text */
--BOX-BG-color: rgba( 255, 255, 255, .833 ); /* color of the content background */
--BOX-TEXT-color: rgba( 16, 16, 16, 1 ); /* fixed color of the content text */
/* optional base colors for colored boxes as in attachments and notice shortcode */
--BOX-BLUE-color: rgba( 48, 117, 229, 1 );
--BOX-GREEN-color: rgba( 42, 178, 24, 1 );
--BOX-GREY-color: rgba( 128, 128, 128, 1 );
--BOX-ORANGE-color: rgba( 237, 153, 9, 1 );
--BOX-RED-color: rgba( 224, 62, 62, 1 );
} }

12
static/css/theme-learn.css
View file

@ -41,4 +41,16 @@
--MENU-VISITED-color: #00bdf3; /* Color of 'page visited' icons in menu */ --MENU-VISITED-color: #00bdf3; /* Color of 'page visited' icons in menu */
--MENU-SECTION-HR-color: #2a232f; /* Color of <hr> separator in menu */ --MENU-SECTION-HR-color: #2a232f; /* Color of <hr> separator in menu */
/* base styling for boxes */
--BOX-CAPTION-color: rgba( 255, 255, 255, 1 ); /* color of the title text */
--BOX-BG-color: rgba( 255, 255, 255, .833 ); /* color of the content background */
--BOX-TEXT-color: rgba( 16, 16, 16, 1 ); /* fixed color of the content text */
/* optional base colors for colored boxes as in attachments and notice shortcode */
--BOX-BLUE-color: rgba( 48, 117, 229, 1 );
--BOX-GREEN-color: rgba( 42, 178, 24, 1 );
--BOX-GREY-color: rgba( 128, 128, 128, 1 );
--BOX-ORANGE-color: rgba( 237, 153, 9, 1 );
--BOX-RED-color: rgba( 224, 62, 62, 1 );
} }

12
static/css/theme-red.css
View file

@ -41,4 +41,16 @@
--MENU-VISITED-color: #ff3333; /* Color of 'page visited' icons in menu */ --MENU-VISITED-color: #ff3333; /* Color of 'page visited' icons in menu */
--MENU-SECTION-HR-color: #2b2020; /* Color of <hr> separator in menu */ --MENU-SECTION-HR-color: #2b2020; /* Color of <hr> separator in menu */
/* base styling for boxes */
--BOX-CAPTION-color: rgba( 255, 255, 255, 1 ); /* color of the title text */
--BOX-BG-color: rgba( 255, 255, 255, .833 ); /* color of the content background */
--BOX-TEXT-color: rgba( 16, 16, 16, 1 ); /* fixed color of the content text */
/* optional base colors for colored boxes as in attachments and notice shortcode */
--BOX-BLUE-color: rgba( 48, 117, 229, 1 );
--BOX-GREEN-color: rgba( 42, 178, 24, 1 );
--BOX-GREY-color: rgba( 128, 128, 128, 1 );
--BOX-ORANGE-color: rgba( 237, 153, 9, 1 );
--BOX-RED-color: rgba( 224, 62, 62, 1 );
} }

12
static/css/theme-relearn-dark.css
View file

@ -41,4 +41,16 @@
--MENU-VISITED-color: #569cd8; /* Color of 'page visited' icons in menu */ --MENU-VISITED-color: #569cd8; /* Color of 'page visited' icons in menu */
--MENU-SECTION-HR-color: #606060; /* Color of <hr> separator in menu */ --MENU-SECTION-HR-color: #606060; /* Color of <hr> separator in menu */
/* base styling for boxes */
--BOX-CAPTION-color: rgba( 240, 240, 240, 1 ); /* color of the title text */
--BOX-BG-color: rgba( 20, 20, 20, 1 ); /* color of the content background */
--BOX-TEXT-color: initial; /* automatic color of the content text */
/* optional base colors for colored boxes as in attachments and notice shortcode */
--BOX-BLUE-color: rgba( 48, 117, 229, 1 );
--BOX-GREEN-color: rgba( 42, 178, 24, 1 );
--BOX-GREY-color: rgba( 128, 128, 128, 1 );
--BOX-ORANGE-color: rgba( 237, 153, 9, 1 );
--BOX-RED-color: rgba( 224, 62, 62, 1 );
} }

12
static/css/theme-relearn-light.css
View file

@ -41,4 +41,16 @@
--MENU-VISITED-color: #506397; /* Color of 'page visited' icons in menu */ --MENU-VISITED-color: #506397; /* Color of 'page visited' icons in menu */
--MENU-SECTION-HR-color: #606060; /* Color of <hr> separator in menu */ --MENU-SECTION-HR-color: #606060; /* Color of <hr> separator in menu */
/* base styling for boxes */
--BOX-CAPTION-color: rgba( 255, 255, 255, 1 ); /* color of the title text */
--BOX-BG-color: rgba( 255, 255, 255, .833 ); /* color of the content background */
--BOX-TEXT-color: rgba( 16, 16, 16, 1 ); /* optional color of the content text */
/* optional base colors for colored boxes as in attachments and notice shortcode */
--BOX-BLUE-color: rgba( 48, 117, 229, 1 );
--BOX-GREEN-color: rgba( 42, 178, 24, 1 );
--BOX-GREY-color: rgba( 128, 128, 128, 1 );
--BOX-ORANGE-color: rgba( 237, 153, 9, 1 );
--BOX-RED-color: rgba( 224, 62, 62, 1 );
} }

180
static/css/theme.css
View file

@ -494,149 +494,139 @@ blockquote cite {
text-align: right; text-align: right;
} }
div.notices { /* colored boxes */
background-color: #eaeaea;
border-color: rgba( 80, 80, 80, .8 ); div.box {
border-top-style: solid; background-color: #808080; /* var(--INTERNAL-BOX-NEUTRAL-color) */
border-top-width: 2rem; color: #808080; /* var(--INTERNAL-BOX-NEUTRAL-color) */
color: #323232;
-webkit-print-color-adjust: exact; -webkit-print-color-adjust: exact;
color-adjust: exact; color-adjust: exact;
margin: 1.5rem 0; margin: 1.5rem 0;
padding-bottom: .1px;
padding-left: 1rem;
padding-right: 1rem;
} }
div.notices > div.label:first-child:before { div.box > .box-label {
content: ""; color: rgba( 255, 255, 255, 1 ); /* var(--BOX-CAPTION-color) */
}
div.notices > div.label {
color: #ffffff;
font-weight: 500; font-weight: 500;
margin-bottom: 1rem; padding: .2rem 1rem;
margin-top: -1.75rem;
} }
div.notices > div.label:first-child:before { div.box > .box-label:first-child:before {
content: "";
font-family: "Font Awesome 5 Free"; font-family: "Font Awesome 5 Free";
font-weight: 900; font-weight: 900;
} }
div.notices.info { div.box > .box-content {
background-color: #e5f0ff; background-color: rgba( 255, 255, 255, .833 ); /* var(--BOX-BG-color) */
border-color: rgba( 48, 117, 229, .8 ); color: rgba( 16, 16, 16, 1 ); /* var(--BOX-TEXT-color) */
padding-bottom: .1rem;
padding-left: 1rem;
padding-right: 1rem;
} }
div.notices.info > div.label:first-child:before { div.box > .box-content > :first-child {
margin-top: 0;
padding-top: 1rem;
}
div.box > .box-content > :last-child {
margin-bottom: 1rem;
}
div.box.info {
background-color: rgba( 48, 117, 229, 1 ); /* var(--INTERNAL-BOX-INFO-color) */
color: rgba( 48, 117, 229, 1 ); /* var(--INTERNAL-BOX-INFO-color) */
}
div.box.info > .box-label:first-child:before {
content: "\f05a"; content: "\f05a";
margin-left: -.15rem; margin-left: -.15rem;
margin-right: .35rem; margin-right: .35rem;
} }
div.notices.warning { div.box.warning {
background-color: #ffe5e5; background-color: rgba( 224, 62, 62, 1 ); /* var(--INTERNAL-BOX-WARNING-color) */
border-color: rgba( 224, 62, 62, .8 ); color: rgba( 224, 62, 62, 1 ); /* var(--INTERNAL-BOX-WARNING-color) */
} }
div.notices.warning > div.label:first-child:before { div.box.warning > .box-label:first-child:before {
content: "\f071"; content: "\f071";
margin-left: -.15rem; margin-left: -.15rem;
margin-right: .35rem; margin-right: .35rem;
} }
div.notices.note { div.box.note {
background-color: #ffedd5; background-color: rgba( 237, 153, 9, 1 ); /* var(--INTERNAL-BOX-NOTE-color) */
border-color: rgba( 237, 153, 9, .8 ); color: rgba( 237, 153, 9, 1 ); /* var(--INTERNAL-BOX-NOTE-color) */
} }
div.notices.note > div.label:first-child:before { div.box.note > .box-label:first-child:before {
content: "\f06a"; content: "\f06a";
margin-left: -.15rem; margin-left: -.15rem;
margin-right: .35rem; margin-right: .35rem;
} }
div.notices.tip { div.box.tip {
background-color: #e2fce0; background-color: rgba( 42, 178, 24, 1 ); /* var(--INTERNAL-BOX-TIP-color) */
border-color: rgba( 42, 178, 24, .8 ); color: rgba( 42, 178, 24, 1 ); /* var(--INTERNAL-BOX-TIP-color) */
} }
div.notices.tip > div.label:first-child:before { div.box.tip > .box-label:first-child:before {
content: "\f0eb"; content: "\f0eb";
margin-left: -.15rem; margin-left: -.15rem;
margin-right: .35rem; margin-right: .35rem;
} }
div.box.blue {
background-color: rgba( 48, 117, 229, 1 ); /* var(--INTERNAL-BOX-BLUE-color) */
color: rgba( 48, 117, 229, 1 ); /* var(--INTERNAL-BOX-BLUE-color) */
}
div.box.green {
background-color: rgba( 42, 178, 24, 1 ); /* var(--INTERNAL-BOX-GREEN-color) */
color: rgba( 42, 178, 24, 1 ); /* var(--INTERNAL-BOX-GREEN-color) */
}
div.box.grey {
background-color: #808080; /* var(--INTERNAL-BOX-GREY-color) */
color: #808080; /* var(--INTERNAL-BOX-GREY-color) */
}
div.box.orange {
background-color: rgba( 237, 153, 9, 1 ); /* var(--INTERNAL-BOX-ORANGE-color) */
color: rgba( 237, 153, 9, 1 ); /* var(--INTERNAL-BOX-ORANGE-color) */
}
div.box.red {
background-color: rgba( 224, 62, 62, 1 ); /* var(--INTERNAL-BOX-RED-color) */
color: rgba( 224, 62, 62, 1 ); /* var(--INTERNAL-BOX-RED-color) */
}
div.box.transparent {
background-color: transparent;
color: #ffffff; /* var(--MAIN-TEXT-color) */
}
div.box.transparent > .box-label {
color: #7c7c7c; /* var(--MAIN-TITLES-TEXT-color) */
}
div.box.transparent > .box-content {
background-color: transparent;
}
/* attachments shortcode */ /* attachments shortcode */
div.attachments { div.attachments > .box-label:first-child:before {
border-top-style: solid;
border-top-width: 2rem;
color: #323232;
-webkit-print-color-adjust: exact;
color-adjust: exact;
margin: 1.5rem 0;
padding-bottom: .1px;
padding-left: 1rem;
padding-right: 1rem;
}
div.attachments > div.label {
color: #ffffff;
font-weight: 500;
margin-bottom: 1rem;
margin-top: -1.75rem;
}
div.attachments > div.label:first-child:before {
content: "\f0c6"; content: "\f0c6";
font-family: "Font Awesome 5 Free";
font-weight: 900;
margin-left: -.35rem; margin-left: -.35rem;
margin-right: .35rem; margin-right: .35rem;
} }
div.attachments .attachments-files { div.attachments .box-content {
display: block; display: block;
font-size: 1rem; margin: 0;
margin-bottom: 0rem; padding-left: 1.75rem;
margin-top: -1rem;
padding: 1rem;
}
div.attachments.orange {
background-color: #ffedd5;
border-color: rgba( 237, 153, 9, .8 );
}
div.attachments.green {
background-color: #e2fce0;
border-color: rgba( 42, 178, 24, .8 );
}
div.attachments.red {
background-color: #ffe5e5;
border-color: rgba( 224, 62, 62, .8 );
}
div.attachments.blue {
background-color: #e5f0ff;
border-color: rgba( 48, 117, 229, .8 );
}
div.attachments.grey {
background-color: #eaeaea;
border-color: rgba( 80, 80, 80, .8 );
}
div.attachments.neutral {
background-color: transparent;
border-color: transparent;
}
div.attachments.neutral > div.label {
color: #5e5e5e;
} }
/* Children shortcode */ /* Children shortcode */

99
static/css/variant.css
View file

@ -1,3 +1,19 @@
:root {
--INTERNAL-BOX-TEXT-color: var(--BOX-TEXT-color);
--INTERNAL-BOX-BLUE-color: var(--BOX-BLUE-color, rgba( 48, 117, 229, 1 ));
--INTERNAL-BOX-GREEN-color: var(--BOX-GREEN-color, rgba( 42, 178, 24, 1 ));
--INTERNAL-BOX-GREY-color: var(--BOX-GREY-color, rgba( 128, 128, 128, 1 ));
--INTERNAL-BOX-ORANGE-color: var(--BOX-ORANGE-color, rgba( 237, 153, 9, 1 ));
--INTERNAL-BOX-RED-color: var(--BOX-RED-color, rgba( 224, 62, 62, 1 ));
--INTERNAL-BOX-INFO-color: var(--BOX-INFO-color, var(--INTERNAL-BOX-BLUE-color));
--INTERNAL-BOX-NEUTRAL-color: var(--BOX-NEUTRAL-color, var(--INTERNAL-BOX-GREY-color));
--INTERNAL-BOX-NOTE-color: var(--BOX-NOTE-color, var(--INTERNAL-BOX-ORANGE-color));
--INTERNAL-BOX-TIP-color: var(--BOX-TIP-color, var(--INTERNAL-BOX-GREEN-color));
--INTERNAL-BOX-WARNING-color: var(--BOX-WARNING-color, var(--INTERNAL-BOX-RED-color));
}
body { body {
background-color: var(--MAIN-BG-color, #ffffff); background-color: var(--MAIN-BG-color, #ffffff);
color: var(--MAIN-TEXT-color); color: var(--MAIN-TEXT-color);
@ -67,22 +83,6 @@ h2, h3, h4, h5, h6 {
color: var(--MAIN-TITLES-TEXT-color); color: var(--MAIN-TITLES-TEXT-color);
} }
div.notices > div.label {
color: var(--MAIN-BG-color, #ffffff);
}
div.attachments > div.label {
color: var(--MAIN-BG-color, #ffffff);
}
div.attachments.neutral {
color: var(--MAIN-TEXT-color);
}
div.attachments.neutral > div.label {
color: var(--MAIN-TITLES-TEXT-color);
}
code { code {
background-color: var(--CODE-INLINE-BG-color, #fffae9); background-color: var(--CODE-INLINE-BG-color, #fffae9);
border-color: var(--CODE-INLINE-BORDER-color, #f8e8c8); border-color: var(--CODE-INLINE-BORDER-color, #f8e8c8);
@ -178,3 +178,70 @@ pre .copy-to-clipboard:hover {
background-color: var(--MAIN-BG-color, #ffffff) !important; background-color: var(--MAIN-BG-color, #ffffff) !important;
border-bottom-color: var(--MAIN-BG-color, #ffffff) !important; border-bottom-color: var(--MAIN-BG-color, #ffffff) !important;
} }
div.box {
background-color: var(--INTERNAL-BOX-NEUTRAL-color);
color: var(--INTERNAL-BOX-NEUTRAL-color);
}
div.box > .box-label {
color: var(--BOX-CAPTION-color, rgba( 255, 255, 255, 1 ));
}
div.box > .box-content {
background-color: var(--BOX-BG-color, rgba( 255, 255, 255, .833 ));
color: var(--BOX-TEXT-color, var(--INTERNAL-BOX-TEXT-color));
}
div.box.info {
background-color: var(--INTERNAL-BOX-INFO-color);
color: var(--BOX-TEXT-color, var(--INTERNAL-BOX-INFO-color));
}
div.box.warning {
background-color: var(--INTERNAL-BOX-WARNING-color);
color: var(--BOX-TEXT-color, var(--INTERNAL-BOX-WARNING-color));
}
div.box.note {
background-color: var(--INTERNAL-BOX-NOTE-color);
color: var(--BOX-TEXT-color, var(--INTERNAL-BOX-NOTE-color));
}
div.box.tip {
background-color: var(--INTERNAL-BOX-TIP-color);
color: var(--BOX-TEXT-color, var(--INTERNAL-BOX-TIP-color));
}
div.box.blue {
background-color: var(--INTERNAL-BOX-BLUE-color);
color: var(--BOX-TEXT-color, var(--INTERNAL-BOX-BLUE-color));
}
div.box.green {
background-color: var(--INTERNAL-BOX-GREEN-color);
color: var(--BOX-TEXT-color, var(--INTERNAL-BOX-GREEN-color));
}
div.box.grey {
background-color: var(--INTERNAL-BOX-GREY-color);
color: var(--BOX-TEXT-color, var(--INTERNAL-BOX-GREY-color));
}
div.box.orange {
background-color: var(--INTERNAL-BOX-ORANGE-color);
color: var(--BOX-TEXT-color, var(--INTERNAL-BOX-ORANGE-color));
}
div.box.red {
background-color: var(--INTERNAL-BOX-RED-color);
color: var(--BOX-TEXT-color, var(--INTERNAL-BOX-RED-color));
}
div.box.transparent {
color: var(--MAIN-TEXT-color);
}
div.box.transparent > .box-label {
color: var(--MAIN-TITLES-TEXT-color);
}