Skip to content

Commit

Permalink
Changed style.css
Browse files Browse the repository at this point in the history
  • Loading branch information
@jherzstein
jherzstein committed Mar 7, 2024
1 parent b601cbe commit 49749b3
Show file tree
Hide file tree
Showing 2 changed files with 196 additions and 78 deletions.
137 changes: 98 additions & 39 deletions public/css/style.css
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,76 @@
html{
background-color: #21252B;
color:#dcdfe4;
margin: auto;
:root {
--dark-color-bg: #21252B;
--dark-color-fg: #282c34;
--dark-color-txt: #dcdfe4;
--dark-color-h1: #61afef;
--dark-color-h2:#56b6c2;
--dark-color-a: #e06c75;
--dark-color-a-hover: #c678dd;

--light-color-bg: #f9f5d7;
--light-color-fg:#f2e5bc;
--light-color-txt: black;
--light-color-h1: #9e5010;
--light-color-h1: #e04c75;
--light-color-h2: #a9493d;
--light-color-h2: #e06c75;
--light-color-a: #1f938a;
--light-color-a-hover: #398722;

--color-bg: var(--dark-color-bg);
--color-fg: var(--dark-color-fg);
--color-txt: var(--dark-color-txt);
--color-h1: var(--dark-color-h1);
--color-h2:var(--dark-color-h2);
--color-a: var(--dark-color-a);
--color-a-hover: var(--dark-color-a-hover);

--monospace: 16px/1.5 "Lucida Console", Monaco, "Consolas", monospace;
}
.dark {
--color-bg: var(--dark-color-bg);
--color-fg: var(--dark-color-fg);
--color-txt: var(--dark-color-txt);
--color-h1: var(--dark-color-h1);
--color-h2:var(--dark-color-h2);
--color-a: var(--dark-color-a);
--color-a-hover: var(--dark-color-a-hover);

body {
font: 16px/1.5 -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";
}
.light {
--color-bg: var(--light-color-bg);
--color-fg: var(--light-color-fg);
--color-txt: var(--light-color-txt);
--color-h1: var(--light-color-h1);
--color-h2:var(--light-color-h2);
--color-a: var(--light-color-a);
--color-a-hover: var(--light-color-a-hover);
}

.theme-switch:checked ~ :root {
height: 100px;
width: 100px;
--color-txt: var(--light-color-txt);
--color-bg: var(--light-color-bg);
--color-fg: var(--light-color-fg);
--color-h1: var(--light-color-h1);
--color-h2:var(--light-color-h2);
--color-a: var(--light-color-a);
}

--monospace: 16px/1.5 "Lucida Console", Monaco, "Consolas", monospace;
.theme-switch {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
}


body {
font: 16px/1.5 -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";
background:var(--color-bg);
color:var(--color-txt);
}


Expand All @@ -18,7 +80,7 @@ body {
margin-left: auto;
margin-right: auto;
border: 1px solid ;
background-color: #282c34;
background:var(--color-fg);
}

.menu-nav ul {
Expand All @@ -45,7 +107,7 @@ body {
margin-bottom: 2em;
padding: 15px;
border: 1px solid ;
background-color: #282c34;
background:var(--color-fg);
}
/* #282c34, #e06c75, #98c379, #e5c07b,
#61afef, #c678dd, #56b6c2, #dcdfe4,
Expand All @@ -65,15 +127,15 @@ body {

h1 {
line-height: 1.2;
color: #61afef;
color: var(--color-h1);
font-size: 2.3em;
text-align:center;
}
h2 {
line-height: 1.2;
color: #56b6c2;
color:var(--color-h2);
a {
background-color: #21252B;
background-color: var(--color-bg);
border-radius: .35em;
padding: .075em;
font:var(--monospace);
Expand All @@ -85,22 +147,24 @@ h2 {
}
}

/* .content__body > h3:img::nth-of-type(1) { */
.inline-header {
float: left;
margin-right: 0.25em;
width: 30px;
}

h3 {
line-height: 1.2;
color: #56b6c2;
color:var(--color-h2);
}
h4 {
line-height: 1.2;
color: #56b6c2;
color:var(--color-h2);
}

/* .content__body > h3:img::nth-of-type(1) { */
.inline-header {
float: left;
margin-right: 0.25em;
width: 30px;
}


.content__body > p:first-of-type::first-letter
{
font-size: 3.0em;
Expand All @@ -109,23 +173,17 @@ h4 {
float: left;
}

.header {
border: 0.5px solid;
max-width: 340px;
margin: auto;
align: center;
}


.current-page {
text-decoration: underline;
}

pre code {
background-color: #21252B;
pre {
background-color: var(--color-bg);
border: 1px solid ;
border-radius: .35em;
box-shadow: 4px 4px #dcdfe4;
box-shadow: 4px 4px var(--color-txt);
word-wrap: break-word;
padding: 1em;
white-space: pre-wrap;
Expand All @@ -135,7 +193,7 @@ pre code {


code {
background-color: #21252B;
background-color: var(--color-bg);
border-radius: .35em;
padding: .075em;
font:var(--monospace);
Expand All @@ -144,13 +202,13 @@ code {

a:hover{
transition: color .15s ease-in;
color:#c678dd !important;
color:var(--color-a-hover) !important;
text-decoration: underline;
text-underline-position: under;
}

a{
color:#e06c75;
a {
color:var(--color-a);
text-decoration: none;
}

Expand All @@ -171,9 +229,9 @@ br {
.post__summary {
border: 1px solid ;
border-radius: .35em;
box-shadow: 4px 4px #dcdfe4;
box-shadow: 4px 4px var(--color-txt);
padding: .575em;
overflow: scroll;
overflow: hidden;
max-width: 730px;
width: auto;
box-sizing:border-box;
Expand All @@ -183,7 +241,8 @@ br {
font:var(--monospace);
max-width: 650px;
width: auto;
box-sizing:border-box;
box-sizing: border-box;
overflow-x: auto;
}

.tags-list {
Expand All @@ -206,10 +265,10 @@ br {

.ox-hugo-toc{
font-size: 0.9em;
background-color: #21252B;
background-color: var(--color-bg);
border: 1px solid ;
border-radius: .35em;
box-shadow: 4px 4px #dcdfe4;
box-shadow: 4px 4px var(--color-txt);
width: 300px;
height: auto;
box-sizing: border-box;
Expand All @@ -220,7 +279,7 @@ br {
}

.tags{
background-color: #21252B;
background-color: var(--color-bg);
border-radius: .35em;
padding: .15em;
margin-left: .3em;
Expand Down
Loading

0 comments on commit 49749b3

Please sign in to comment.