mirror of
https://git.kittycat.homes/zoe/hugo-battheme.git
synced 2024-08-15 03:25:18 +00:00
clickable headers
This commit is contained in:
zoe
parent
2e52a4843f
commit
2c56b25d22
10 changed files with 207 additions and 108 deletions
|
|
@ -1,20 +1,21 @@
|
|||
$light-bg: #dde4ff ;
|
||||
$light-bg-alt: #733c7c ;
|
||||
$light-bg: #dde4ff;
|
||||
$light-bg-alt: #733c7c;
|
||||
$light-fg: #4b3d44;
|
||||
$light-ln: #733c7c ;
|
||||
$light-accent1: #007582 ;
|
||||
$light-accent2: #225091 ;
|
||||
$light-accent3: #27234c ;
|
||||
$light-ln: #733c7c;
|
||||
$light-accent1: #007582;
|
||||
$light-accent2: #225091;
|
||||
$light-accent3: #27234c;
|
||||
|
||||
$dark-bg: #27234c ;
|
||||
$dark-bg-alt: #f2504b ;
|
||||
$dark-fg: #e88dc3 ;
|
||||
$dark-ln: #f2504b ;
|
||||
$dark-bg: #27234c;
|
||||
$dark-bg-alt: #f2504b;
|
||||
$dark-fg: #e88dc3;
|
||||
$dark-ln: #f2504b;
|
||||
$dark-accent1: #b296ff;
|
||||
$dark-accent2: #39b8a3 ;
|
||||
$dark-accent3: #dde4ff ;
|
||||
$dark-accent2: #39b8a3;
|
||||
$dark-accent3: #dde4ff;
|
||||
|
||||
$transition-time: 1s;
|
||||
$transition-time: 2s;
|
||||
$trans-short: 0.2s;
|
||||
|
||||
body {
|
||||
&.light {
|
||||
|
|
@ -46,7 +47,7 @@ a.footer-nav-item:hover {
|
|||
color: $dark-bg-alt;
|
||||
background-color: $dark-bg;
|
||||
border-color: $dark-bg;
|
||||
transition: 0.24s;
|
||||
transition: $trans-short;
|
||||
}
|
||||
|
||||
footer {
|
||||
|
|
@ -113,62 +114,117 @@ article {
|
|||
transition: $transition-time;
|
||||
}
|
||||
|
||||
article h2 {
|
||||
h2,
|
||||
h2 a {
|
||||
background-color: $dark-accent1;
|
||||
color: $dark-bg;
|
||||
transition: $transition-time;
|
||||
& a{
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
article h3 {
|
||||
h3,
|
||||
h3 a {
|
||||
background-color: $dark-accent2;
|
||||
color: $dark-bg;
|
||||
transition: $transition-time;
|
||||
& a{
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
article.light h3 {
|
||||
h3.light {
|
||||
background-color: $light-accent2;
|
||||
color: $light-bg;
|
||||
transition: $transition-time;
|
||||
&a {
|
||||
color: $light-bg;
|
||||
}
|
||||
}
|
||||
|
||||
article h5,
|
||||
article h6,
|
||||
article h4 {
|
||||
h5,
|
||||
h6,
|
||||
h4 {
|
||||
background-color: $dark-accent3;
|
||||
color: $dark-bg;
|
||||
transition: $transition-time;
|
||||
& a {
|
||||
color: $dark-bg;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
article.light h5,
|
||||
article.light h6,
|
||||
article.light h4 {
|
||||
h4.light,
|
||||
h5.light,
|
||||
h6.light{
|
||||
background-color: $light-accent3;
|
||||
color: $light-bg;
|
||||
transition: $transition-time;
|
||||
}
|
||||
|
||||
article.light h2 {
|
||||
h2.light {
|
||||
background-color: $light-accent1;
|
||||
color: $light-bg;
|
||||
transition: $transition-time;
|
||||
}
|
||||
|
||||
|
||||
article.light a {
|
||||
background-color: $light-ln;
|
||||
color: $light-bg;
|
||||
background-color: transparent;
|
||||
color: $light-ln;
|
||||
transition: $transition-time;
|
||||
&.hash-link{
|
||||
color: $light-bg;
|
||||
}
|
||||
&.hash-link:hover{
|
||||
background-color: transparent;
|
||||
color: $light-bg;
|
||||
}
|
||||
}
|
||||
|
||||
a:hover {
|
||||
&.light {
|
||||
color: $light-bg;
|
||||
background-color: $light-ln;
|
||||
}
|
||||
color: $dark-bg;
|
||||
background-color: $dark-ln;
|
||||
transition: $trans-short;
|
||||
}
|
||||
|
||||
.previous.light:hover,
|
||||
.next.light:hover,
|
||||
.postdescription a.light:hover,
|
||||
article.light a:hover {
|
||||
color: $light-ln;
|
||||
background-color: transparent;
|
||||
color: $light-bg;
|
||||
background-color: $light-ln;
|
||||
transition: $trans-short;
|
||||
}
|
||||
|
||||
.light.hash-link:hover,
|
||||
.hash-link:hover {
|
||||
background-color: transparent;
|
||||
transition: $transition-time;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6{
|
||||
&a{
|
||||
background-color: transparent;
|
||||
color: $light-bg;
|
||||
&:hover{
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
header.light{
|
||||
background-color: $light-bg;
|
||||
transition: $transition-time;
|
||||
}
|
||||
|
||||
header{
|
||||
transition: $transition-time;
|
||||
}
|
||||
|
||||
.posttitle a{
|
||||
background-color: transparent;
|
||||
color: $dark-bg;
|
||||
&:hover{
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,20 +19,20 @@ $small: 12pt;
|
|||
font-size: $small;
|
||||
}
|
||||
|
||||
h1 {
|
||||
h1{
|
||||
font-size: $huge;
|
||||
}
|
||||
|
||||
h2 {
|
||||
h2 a{
|
||||
font-size: $huge;
|
||||
font-style:bold;
|
||||
}
|
||||
|
||||
h3, h4 {
|
||||
h3 a, h4 a {
|
||||
font-size: $large;
|
||||
}
|
||||
|
||||
h5 h6 {
|
||||
h5 a, h6 a {
|
||||
font-size: $big;
|
||||
}
|
||||
|
||||
|
|
@ -53,3 +53,7 @@ label::after {
|
|||
h6 {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
::before{
|
||||
font-family: CaskaydiaCoveMono;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,7 +24,8 @@ footer {
|
|||
#content p,
|
||||
#content ul,
|
||||
#content ol,
|
||||
#content table
|
||||
#content table,
|
||||
.postdescription
|
||||
{
|
||||
margin-right: 24%;
|
||||
margin-left: 24%;
|
||||
|
|
@ -94,12 +95,18 @@ h6 {
|
|||
padding-right: 6%;
|
||||
padding-top: 12pt;
|
||||
padding-bottom: 12pt;
|
||||
margin-right: 6%;
|
||||
justify-content: right;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1 {margin-right: 6%;}
|
||||
h2 {margin-right: 12%;}
|
||||
h3 {margin-right: 18%;}
|
||||
h4 {margin-right: 24%;}
|
||||
h5 {margin-right: 32%;}
|
||||
h6 {margin-right: 38%;}
|
||||
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
|
|
@ -113,7 +120,8 @@ article {
|
|||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.titlecontainer {
|
||||
.titlecontainer,
|
||||
header{
|
||||
width: 100%;
|
||||
padding-top: 42pt;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,80 +3,92 @@ $toggle-width: 42pt;
|
|||
$toggle-height: 24pt;
|
||||
|
||||
* {
|
||||
border-width: 2pt;
|
||||
}
|
||||
|
||||
|
||||
input[type="checkbox"]{
|
||||
cursor: pointer;
|
||||
}
|
||||
.toggleinput{
|
||||
opacity: 10;
|
||||
max-height: 10;
|
||||
overflow: hidden;
|
||||
border-width: 2pt;
|
||||
}
|
||||
|
||||
.togglelabel{
|
||||
width: $toggle-width;
|
||||
height: 24pt;
|
||||
border-radius: $radius;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
input[type="checkbox"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
.toggleinput {
|
||||
opacity: 0;
|
||||
max-height: 0;
|
||||
max-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.togglelabel::after{
|
||||
left: calc(100% - 67pt);
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 20pt;
|
||||
width: 20pt;
|
||||
border-width: 1pt;
|
||||
border-radius: 100pt;
|
||||
transition: 0.3s;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
content: "";
|
||||
border-style: solid;
|
||||
|
||||
.togglelabel {
|
||||
width: $toggle-width;
|
||||
height: 24pt;
|
||||
border-radius: $radius;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
input:checked + label:after{
|
||||
left: calc(100% - 49pt);
|
||||
.togglelabel::after {
|
||||
left: calc(100% - 67pt);
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 20pt;
|
||||
width: 20pt;
|
||||
border-width: 1pt;
|
||||
border-radius: 100pt;
|
||||
transition: 1s;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
content: "";
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
|
||||
input:checked + label::after{
|
||||
content: "滛";
|
||||
input:checked + label:after {
|
||||
left: calc(100% - 49pt);
|
||||
}
|
||||
|
||||
.footer-nav-item{
|
||||
border-radius: 100%;
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-style: solid;
|
||||
input:checked + label::after {
|
||||
content: "滛";
|
||||
}
|
||||
|
||||
.togglelabel{
|
||||
border: solid;
|
||||
.footer-nav-item {
|
||||
border-radius: 100%;
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
border-top-right-radius: $radius;
|
||||
border-bottom-right-radius: $radius;
|
||||
.togglelabel {
|
||||
border: solid;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
border-top-right-radius: $radius;
|
||||
border-bottom-right-radius: $radius;
|
||||
& .hash-link {
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
&::before {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.postdescription,
|
||||
#content p,
|
||||
#content ul,
|
||||
#content ol,
|
||||
#content table {
|
||||
border-left-style: solid;
|
||||
border-width: 0.24em;
|
||||
padding-left: 2em;
|
||||
border-left-style: solid;
|
||||
border-width: 0.24em;
|
||||
padding-left: 2em;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue