Use alternate stylesheets
Specify alternate stylesheets in the HTML template so that the user can pick a custom theme (light or dark) and override media blocks. This is useful for users who use the resistFingerprinting option in Firefox, as it makes the browser ignore media blocks. Alternate stylesheets are available by default with Firefox-based web browsers, but might not be available in other browsers.
This commit is contained in:
parent
ba5dba9664
commit
15f60d5dcb
GPG Key ID:
2E7B4655CF16D7D6
|
|
@ -5,6 +5,9 @@
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<title>luca0N!'s Website</title>
|
<title>luca0N!'s Website</title>
|
||||||
<link rel="stylesheet" type="text/css" href="/assets/luca0n.css" />
|
<link rel="stylesheet" type="text/css" href="/assets/luca0n.css" />
|
||||||
|
|
||||||
|
<link rel="alternate stylesheet" type="text/css" href="/assets/luca0n_theme_light.css" title="Light" />
|
||||||
|
<link rel="alternate stylesheet" type="text/css" href="/assets/luca0n_theme_dark.css" title="Dark" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
|
|
|
||||||
|
|
@ -131,7 +131,7 @@ p {
|
||||||
background-color: rgb(255, 170, 37);
|
background-color: rgb(255, 170, 37);
|
||||||
text-decoration: none; */
|
text-decoration: none; */
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
||||||
/* transition: background-color 0.08s linear 0s; */
|
/* transition: background-color 0.08s linear 0s; */
|
||||||
}
|
}
|
||||||
/*.contentWarning .cwReturnIndex:hover {
|
/*.contentWarning .cwReturnIndex:hover {
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,175 @@
|
||||||
|
/*
|
||||||
|
* CSS for luca0N.com, version 3
|
||||||
|
* Main style, dark theme
|
||||||
|
*
|
||||||
|
* https://git.luca0n.com/luca0N-website.git/
|
||||||
|
*/
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: sans-serif;
|
||||||
|
|
||||||
|
background-color: #222;
|
||||||
|
color: #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
background: linear-gradient(to bottom, rgb(240, 140, 11), rgb(202, 114, 0));
|
||||||
|
color: white;
|
||||||
|
padding: 16px 16% 16px 16%;
|
||||||
|
margin-bottom: 2em;
|
||||||
|
box-shadow: 0px 2px 8px #0005;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
#lang-selector {
|
||||||
|
text-align: end;
|
||||||
|
}
|
||||||
|
#lang-selector summary {
|
||||||
|
padding: 4px 8px 4px 8px;
|
||||||
|
background-color: #eca141;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
cursor: pointer;
|
||||||
|
text-shadow: #0008 1px 1px 3px;
|
||||||
|
|
||||||
|
transition: background-color 0.08s linear 0s;
|
||||||
|
}
|
||||||
|
#lang-selector summary:hover {
|
||||||
|
background-color: rgb(234, 182, 114);
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
margin-bottom: 0;
|
||||||
|
text-shadow: 2px 2px 5px #0005;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1::before {
|
||||||
|
content: url('luca0N.png');
|
||||||
|
margin-right: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#menu-mobile {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
margin-left: 16%;
|
||||||
|
margin-right: 16%;
|
||||||
|
max-width: 540px;
|
||||||
|
}
|
||||||
|
main a {
|
||||||
|
color: #1ca6c6;
|
||||||
|
transition: color 0.08s linear 0s;
|
||||||
|
}
|
||||||
|
main a:visited {
|
||||||
|
color: #c658e6;
|
||||||
|
}
|
||||||
|
main a:hover {
|
||||||
|
color: #63cae1;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
/* text-align: center; */
|
||||||
|
padding-left: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
header a {
|
||||||
|
color: #0d2f95;
|
||||||
|
transition: color 0.08s linear 0s;
|
||||||
|
}
|
||||||
|
header a:visited {
|
||||||
|
color: #650a73;
|
||||||
|
}
|
||||||
|
|
||||||
|
header ul li {
|
||||||
|
margin-bottom: 1em;
|
||||||
|
margin-top: 1em;
|
||||||
|
}
|
||||||
|
#menu-default ul li {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
#menu-mobile ul li {
|
||||||
|
list-style: none;
|
||||||
|
margin-bottom: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.currentPage {
|
||||||
|
padding: 12px;
|
||||||
|
font-size: 1.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
padding: 12px;
|
||||||
|
background-color: rgb(227, 153, 59) /* rgb(249, 167, 63) */;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
transition: background-color 0.08s linear 0s;
|
||||||
|
|
||||||
|
margin-top: 1em;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:hover {
|
||||||
|
background-color: rgb(225, 178, 117);
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
font-size: 10pt;
|
||||||
|
text-decoration: italic;
|
||||||
|
color: #bbb;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
line-height: 1.8em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contentWarning {
|
||||||
|
color: black;
|
||||||
|
background-color: rgb(200, 77, 16);
|
||||||
|
padding: 4px 12px 4px 4px;
|
||||||
|
margin-top: 12px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
background: linear-gradient(to top, rgb(238, 112, 0), rgb(255, 178, 30));
|
||||||
|
}
|
||||||
|
|
||||||
|
.contentWarning .content {
|
||||||
|
margin-top: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contentWarning img {
|
||||||
|
height: 64px;
|
||||||
|
margin: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contentWarning .cwReturnIndex {
|
||||||
|
/* padding: 8px;
|
||||||
|
background-color: rgb(255, 170, 37);
|
||||||
|
text-decoration: none; */
|
||||||
|
font-weight: bold;
|
||||||
|
|
||||||
|
/* transition: background-color 0.08s linear 0s; */
|
||||||
|
}
|
||||||
|
/*.contentWarning .cwReturnIndex:hover {
|
||||||
|
background-color: rgb(223, 147, 28);
|
||||||
|
}
|
||||||
|
.contentWarning .cwReturnIndex:active {
|
||||||
|
background-color: rgb(204, 133, 22);
|
||||||
|
}*/
|
||||||
|
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
#menu-default {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#menu-mobile {
|
||||||
|
display: inherit;
|
||||||
|
}
|
||||||
|
main {
|
||||||
|
margin-left: 4%;
|
||||||
|
margin-right: 4%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -0,0 +1,156 @@
|
||||||
|
/*
|
||||||
|
* CSS for luca0N.com, version 3
|
||||||
|
* Main style, light theme
|
||||||
|
*
|
||||||
|
* https://git.luca0n.com/luca0N-website.git/
|
||||||
|
*/
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: sans-serif;
|
||||||
|
|
||||||
|
background-color: #ddd;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
background: linear-gradient(to bottom, rgb(240, 140, 11), rgb(202, 114, 0));
|
||||||
|
color: white;
|
||||||
|
padding: 16px 16% 16px 16%;
|
||||||
|
margin-bottom: 2em;
|
||||||
|
box-shadow: 0px 2px 8px #0005;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
#lang-selector {
|
||||||
|
text-align: end;
|
||||||
|
}
|
||||||
|
#lang-selector summary {
|
||||||
|
padding: 4px 8px 4px 8px;
|
||||||
|
background-color: #eca141;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
cursor: pointer;
|
||||||
|
text-shadow: #0008 1px 1px 3px;
|
||||||
|
|
||||||
|
transition: background-color 0.08s linear 0s;
|
||||||
|
}
|
||||||
|
#lang-selector summary:hover {
|
||||||
|
background-color: rgb(234, 182, 114);
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
margin-bottom: 0;
|
||||||
|
text-shadow: 2px 2px 5px #0005;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1::before {
|
||||||
|
content: url('luca0N.png');
|
||||||
|
margin-right: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#menu-mobile {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
margin-left: 16%;
|
||||||
|
margin-right: 16%;
|
||||||
|
max-width: 540px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
/* text-align: center; */
|
||||||
|
padding-left: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
header ul li {
|
||||||
|
margin-bottom: 1em;
|
||||||
|
margin-top: 1em;
|
||||||
|
}
|
||||||
|
#menu-default ul li {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
#menu-mobile ul li {
|
||||||
|
list-style: none;
|
||||||
|
margin-bottom: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.currentPage {
|
||||||
|
padding: 12px;
|
||||||
|
font-size: 1.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
padding: 12px;
|
||||||
|
background-color: rgb(227, 153, 59) /* rgb(249, 167, 63) */;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
transition: background-color 0.08s linear 0s;
|
||||||
|
|
||||||
|
margin-top: 1em;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:hover {
|
||||||
|
background-color: rgb(255, 219, 173) /*rgb(244, 190, 119)*/;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
font-size: 10pt;
|
||||||
|
text-decoration: italic;
|
||||||
|
color: #444;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
line-height: 1.8em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contentWarning {
|
||||||
|
color: rgb(202, 67, 15);
|
||||||
|
background-color: rgb(200, 77, 16);
|
||||||
|
padding: 4px 12px 4px 4px;
|
||||||
|
margin-top: 12px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
background: linear-gradient(rgb(253, 215, 142), rgb(247, 185, 72));
|
||||||
|
}
|
||||||
|
|
||||||
|
.contentWarning .content {
|
||||||
|
margin-top: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contentWarning img {
|
||||||
|
height: 64px;
|
||||||
|
margin: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contentWarning .cwReturnIndex {
|
||||||
|
/* padding: 8px;
|
||||||
|
background-color: rgb(255, 170, 37);
|
||||||
|
text-decoration: none; */
|
||||||
|
font-weight: bold;
|
||||||
|
|
||||||
|
/* transition: background-color 0.08s linear 0s; */
|
||||||
|
}
|
||||||
|
/*.contentWarning .cwReturnIndex:hover {
|
||||||
|
background-color: rgb(223, 147, 28);
|
||||||
|
}
|
||||||
|
.contentWarning .cwReturnIndex:active {
|
||||||
|
background-color: rgb(204, 133, 22);
|
||||||
|
}*/
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
#menu-default {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#menu-mobile {
|
||||||
|
display: inherit;
|
||||||
|
}
|
||||||
|
main {
|
||||||
|
margin-left: 4%;
|
||||||
|
margin-right: 4%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -5,6 +5,9 @@
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<title>luca0N.com</title>
|
<title>luca0N.com</title>
|
||||||
<link rel="stylesheet" type="text/css" href="/assets/luca0n.css" />
|
<link rel="stylesheet" type="text/css" href="/assets/luca0n.css" />
|
||||||
|
|
||||||
|
<link rel="alternate stylesheet" type="text/css" href="/assets/luca0n_theme_light.css" title="Claro" />
|
||||||
|
<link rel="alternate stylesheet" type="text/css" href="/assets/luca0n_theme_dark.css" title="Escuro" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue