thallada/thallada.github.io
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix dark mode background across chrome and firefox

Browse Source
This commit is contained in:
Tyler Hallada 2021-08-01 01:03:13 -04:00
parent ee40b651a9
commit a617232868
4 changed files with 54 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
_layouts/default.html
View File

@ -40,31 +40,33 @@
{% seo %} {% seo %}
</head> </head>
<body> <body>
<div class="container"> <div class="root">
<div class="row clearfix header"> <div class="container">
<h1 class="title"><a href="/blog/">{{ site.name }}</a></h1> <div class="row clearfix header">
<a class="extra" href="/">home</a> <h1 class="title"><a href="/blog/">{{ site.name }}</a></h1>
</div> <a class="extra" href="/">home</a>
{{ content }} </div>
<div class="row clearfix rss"> {{ content }}
<a class="rss" href="/feed.xml"><img src="/img/rss.png" alt="RSS" class="icon" /></a> <div class="row clearfix rss">
</div> <a class="rss" href="/feed.xml"><img src="/img/rss.png" alt="RSS" class="icon" /></a>
<div class="row clearfix footer"> </div>
<div class="column full contact"> <div class="row clearfix footer">
<p class="contact-info"> <div class="column full contact">
<a href="mailto:tyler@hallada.net">tyler@hallada.net</a> <p class="contact-info">
</p> <a href="mailto:tyler@hallada.net">tyler@hallada.net</a>
</p>
</div>
</div> </div>
</div> </div>
</div> <div class="theme-toggle">
<div class="theme-toggle"> <dark-mode-toggle
<dark-mode-toggle id="dark-mode-toggle-1"
id="dark-mode-toggle-1" appearance="toggle"
appearance="toggle" light="Dark"
light="Dark" dark="Light"
dark="Light" permanent
permanent ></dark-mode-toggle>
></dark-mode-toggle> </div>
</div> </div>
</body> </body>
</html> </html>

26
_layouts/home.html
View File

@ -47,18 +47,20 @@
{% seo %} {% seo %}
</head> </head>
<body> <body>
<canvas id="magic"></canvas> <div class"root">
<div class="container"> <canvas id="magic"></canvas>
{{ content }} <div class="container">
</div> {{ content }}
<div class="theme-toggle"> </div>
<dark-mode-toggle <div class="theme-toggle">
id="dark-mode-toggle-1" <dark-mode-toggle
appearance="toggle" id="dark-mode-toggle-1"
light="Dark" appearance="toggle"
dark="Light" light="Dark"
permanent dark="Light"
></dark-mode-toggle> permanent
></dark-mode-toggle>
</div>
</div> </div>
</body> </body>
</html> </html>

17
css/main.css
View File

@ -13,12 +13,21 @@
} }
html { html {
width: 100%;
height: 100%;
background-color: whitesmoke; background-color: whitesmoke;
margin: 0;
padding: 0;
} }
body { body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
min-height: 100vh;
background-color: whitesmoke;
}
.root {
font-family: 'Open Sans', Arial, sans-serif; font-family: 'Open Sans', Arial, sans-serif;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
@ -71,6 +80,7 @@ a:hover {
} }
canvas { canvas {
z-index: 2;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
@ -208,7 +218,8 @@ h1.title {
} }
div.header { div.header {
margin: 20px 0 20px; /* this is padding instead of margin to prevent <html> from poking out behind top of page */
padding: 20px 0 20px;
text-align: center; text-align: center;
} }

2
css/main_dark.css
View File

@ -1,6 +1,6 @@
/* Dark theme */ /* Dark theme */
html { body {
filter: invert(90%); filter: invert(90%);
} }