improve design
This commit is contained in:
parent
26047fb0e1
commit
266765fa75
26 changed files with 99 additions and 180 deletions
|
|
@ -1,4 +1,4 @@
|
|||
article .content {
|
||||
article #main-content {
|
||||
max-width: calc(18 * var(--unit--horizontal));
|
||||
scroll-margin-block-start: calc(var(--unit--vertical) * 6);
|
||||
margin-top: calc(var(--unit--vertical) * 2);
|
||||
|
|
@ -6,7 +6,7 @@ article .content {
|
|||
}
|
||||
|
||||
@media screen and (min-width: 640px) {
|
||||
article .content {
|
||||
article #main-content {
|
||||
max-width: auto;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
#main-footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: var(--unit--horizontal);
|
||||
|
|
@ -23,6 +25,12 @@
|
|||
|
||||
@media screen and (min-width: 640px) {
|
||||
#main-footer {
|
||||
display: none;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: var(--body-padding);
|
||||
}
|
||||
#main-footer ul {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -84,11 +84,12 @@ body {
|
|||
|
||||
/* ================= BUTTONS ================= */
|
||||
.toggle-btn--left::after,
|
||||
.plus-btn::after {
|
||||
button.plus::after {
|
||||
margin-left: var(--unit--horizontal);
|
||||
}
|
||||
|
||||
.toggle-btn--left::after,
|
||||
.plus-btn::after {
|
||||
button.plus::after {
|
||||
content: "+";
|
||||
}
|
||||
.toggle-btn--left.open::after {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ body.full-width #desktop-nav {
|
|||
body.full-width #desktop-nav .empty {
|
||||
height: calc(var(--unit--vertical) / 2);
|
||||
}
|
||||
body.full-width .content {
|
||||
body.full-width #main-content {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
position: fixed;
|
||||
box-sizing: border-box;
|
||||
width: 100vw;
|
||||
padding-top: calc(var(--unit--vertical) / 2);
|
||||
}
|
||||
|
||||
#logo * {
|
||||
|
|
@ -11,7 +12,7 @@
|
|||
|
||||
#logo span {
|
||||
height: 20vw;
|
||||
width: 100vw;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding-right: 1vw;
|
||||
display: flex;
|
||||
|
|
@ -31,16 +32,17 @@
|
|||
#logo #inactuel {
|
||||
transition: margin-top 0.3s ease-in-out, transform 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
#main-header.minimized #inactuel {
|
||||
margin-top: -20vw;
|
||||
margin-top: -19.6vw;
|
||||
transform: translateX(-2px) translateY(-2px);
|
||||
}
|
||||
|
||||
.page-cover {
|
||||
position: relative;
|
||||
height: calc(100svh - var(--entry-btns-height));
|
||||
height: 100svh;
|
||||
box-sizing: border-box;
|
||||
padding-top: calc(var(--unit--vertical-relative) * 5);
|
||||
padding-top: calc(var(--unit--vertical-relative) * 9);
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -51,10 +53,6 @@
|
|||
overflow: auto;
|
||||
}
|
||||
|
||||
[data-template="home"] .page-cover {
|
||||
padding-top: calc(var(--unit--vertical-relative) * 6);
|
||||
}
|
||||
|
||||
/* ================= ENTRY BTNS ================= */
|
||||
#entry-btns {
|
||||
position: sticky;
|
||||
|
|
@ -101,12 +99,19 @@ button.toggle.right::before {
|
|||
}
|
||||
|
||||
@media screen and (min-width: 640px) {
|
||||
/* #logo {
|
||||
width: 100%;
|
||||
body:not([data-template="home"]) #main-header {
|
||||
width: var(--body-padding);
|
||||
}
|
||||
body:not([data-template="home"]) #logo * {
|
||||
font-size: 6vw;
|
||||
}
|
||||
body:not([data-template="home"]) #logo span {
|
||||
height: 5vw;
|
||||
}
|
||||
body:not([data-template="home"]) #main-header.minimized #inactuel {
|
||||
margin-top: -4.9vw;
|
||||
transform: translateX(-2px) translateY(-2px);
|
||||
}
|
||||
#logo * {
|
||||
font-size: 25.8vw;
|
||||
} */
|
||||
|
||||
.page-cover:not(
|
||||
[data-template="author"] .page-cover,
|
||||
|
|
@ -115,8 +120,12 @@ button.toggle.right::before {
|
|||
) {
|
||||
height: 100vh;
|
||||
padding: calc(10 * var(--unit--vertical)) 0;
|
||||
padding-top: calc(41.5vw);
|
||||
padding-top: calc(var(--unit--vertical) * 8);
|
||||
}
|
||||
[data-template="home"] .page-cover {
|
||||
padding-top: calc(42.5vw) !important;
|
||||
}
|
||||
|
||||
[data-template="author"] .page-cover,
|
||||
[data-template="category"] .page-cover,
|
||||
[data-template="year"] .page-cover {
|
||||
|
|
|
|||
|
|
@ -69,6 +69,6 @@ html {
|
|||
}
|
||||
|
||||
main {
|
||||
padding: 0 calc(10 * var(--unit--horizontal));
|
||||
padding: 0 var(--body-padding);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@
|
|||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
article .content {
|
||||
article #main-content {
|
||||
width: 60%;
|
||||
margin: auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -95,7 +95,7 @@ button,
|
|||
}
|
||||
.fs-xxl {
|
||||
font-size: var(--font-size-xxl) !important;
|
||||
line-height: calc(var(--unit--vertical) * 3) !important;
|
||||
line-height: calc(var(--unit--vertical) * 2.5) !important;
|
||||
}
|
||||
|
||||
p,
|
||||
|
|
@ -141,18 +141,18 @@ a * {
|
|||
transition: font 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
a.no-line.text__title:hover * {
|
||||
a.no-underline.text__title:hover * {
|
||||
text-decoration: underline;
|
||||
text-decoration-color: inherit;
|
||||
text-decoration-line: underline;
|
||||
text-underline-offset: 0.2rem;
|
||||
text-decoration-thickness: 0.5px;
|
||||
}
|
||||
a:not(.no-line):hover {
|
||||
a:not(.no-underline):hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:not(.no-line) {
|
||||
a:not(.no-underline) {
|
||||
text-decoration: underline;
|
||||
text-decoration-color: inherit;
|
||||
text-decoration-line: underline;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue