aboutsummaryrefslogtreecommitdiff
path: root/assets/css/www.css
diff options
context:
space:
mode:
Diffstat (limited to 'assets/css/www.css')
-rw-r--r--assets/css/www.css210
1 files changed, 176 insertions, 34 deletions
diff --git a/assets/css/www.css b/assets/css/www.css
index 943dd2a..81cbc3c 100644
--- a/assets/css/www.css
+++ b/assets/css/www.css
@@ -870,7 +870,41 @@ body {
font-size: 1em;
/* No rem here, bug workaround */
background-color: #f0f0f2;
- color: #090807; }
+ color: #090807;
+ /*
+ >aside {
+ position: fixed;
+ display: block;
+ left: 0;
+ width: 92rem;
+ height: 20rem;
+ top: 50%;
+ margin-top: -10rem;
+ margin-left: -90rem;
+ background: url(../img/aside-off.png) right center no-repeat,rgba(30, 174, 219, 0.9) ;
+ animation: aside-off 250ms ease-in;
+
+ &:hover,
+ &:focus {
+ background: url(../img/aside-on.png) left center no-repeat, white;
+ margin-left: 0;
+ width: auto;
+ padding: 1rem 2rem;
+ animation: aside-on 250ms ease-in;
+ border-right: 2rem solid rgba(120, 120, 125, 0.85);
+ box-shadow: 0.1rem 0.2rem 0.3rem black;
+ }
+
+ ul {
+ font-size: 2rem;
+ list-style: none;
+ font-family: 'Cormorant Garamond', serif;
+ font-weight: 700;
+ margin: 0;
+ padding: 1rem;
+ }
+ }
+ */ }
body > header {
position: fixed;
z-index: 999;
@@ -888,8 +922,38 @@ body {
font-weight: bold;
font-size: 2rem;
padding: 2.8rem 3rem 2rem 2rem; }
- body > header p.lead {
- display: none; }
+ body > header p.lead, body > header nav {
+ display: none;
+ position: relative;
+ margin: 0 auto;
+ padding: 2rem;
+ max-width: 43rem;
+ text-align: justify;
+ font-size: 2rem;
+ color: white; }
+ body > header nav ul {
+ list-style: none;
+ margin-bottom: 1rem;
+ padding: 0; }
+ body > header nav ul li {
+ font-variant: small-caps;
+ margin: 0 auto;
+ padding: 0;
+ text-align: center;
+ width: 100%;
+ background: rgba(0, 0, 0, 0.1);
+ border: 1px solid transparent; }
+ body > header nav ul li:hover, body > header nav ul li:focus {
+ background-color: rgba(255, 255, 255, 0.1);
+ border-color: black;
+ border-top-right-radius: 1rem; }
+ body > header nav ul a {
+ display: block;
+ height: 100%;
+ padding: 1rem;
+ text-decoration: none; }
+ body > header nav ul a:hover {
+ color: white; }
body > header:focus, body > header:hover {
background-color: rgba(90, 90, 90, 0.95);
overflow: none;
@@ -901,14 +965,9 @@ body {
body > header:focus h1, body > header:hover h1 {
display: none; }
body > header:focus p.lead, body > header:hover p.lead {
- display: block;
- position: relative;
- margin: 0 auto;
- padding: 2rem 3rem 2rem 2rem;
- max-width: 43rem;
- text-align: justify;
- font-size: 2rem;
- color: white; }
+ display: block; }
+ body > header:focus nav, body > header:hover nav {
+ display: block; }
body :target {
padding-top: 3rem; }
body > main {
@@ -931,33 +990,101 @@ body {
margin-top: calc(- 105px); }
body > aside {
position: fixed;
- display: block;
- left: 0;
- width: 92rem;
- height: 20rem;
- top: 50%;
- margin-top: -10rem;
- margin-left: -90rem;
- background: url(../img/aside-off.png) right center no-repeat, rgba(30, 174, 219, 0.9); }
+ top: calc(50% - 150px);
+ height: 300px;
+ background: black url(../img/aside-off.png) center right no-repeat;
+ left: -20rem;
+ width: 20rem;
+ padding: 1rem; }
body > aside:hover, body > aside:focus {
- background: url(../img/aside-on.png) left center no-repeat, white;
- margin-left: 0;
+ left: 0;
+ background: #f0f0f2 url(../img/aside-on.png) center left no-repeat;
+ box-shadow: 1px 2px 2px 1px rgba(0, 0, 0, 0.4);
width: auto;
- padding: 1rem 2rem;
- animation: navbar 1s ease-in;
- border-right: 2rem solid rgba(120, 120, 125, 0.85);
- box-shadow: 0.1rem 0.2rem 0.3rem black; }
- body > aside ul {
- font-size: 2rem;
- list-style: none;
- font-family: 'Cormorant Garamond', serif;
- font-weight: 700;
- margin: 0;
- padding: 1rem; }
+ border-right: 2rem solid black;
+ padding: 0; }
+ body > aside:hover nav, body > aside:focus nav {
+ display: block;
+ background: #f0f0f2 url(../img/aside-on.png) center left no-repeat;
+ height: 100%; }
+ body > aside:hover ul li:hover span, body > aside:focus ul li:hover span {
+ display: block; }
+ body > aside:hover ul li:hover:first-child, body > aside:focus ul li:hover:first-child {
+ transform: scale(1.4) rotate(4deg) translateX(-0.75vw); }
+ body > aside:hover ul li:hover:first-child a, body > aside:focus ul li:hover:first-child a {
+ transform: rotate(-4deg); }
+ body > aside:hover ul li:hover:nth-child(2), body > aside:focus ul li:hover:nth-child(2) {
+ transform: scale(1.4) rotate(-6deg) translateX(-0.5vw); }
+ body > aside:hover ul li:hover:nth-child(2) a, body > aside:focus ul li:hover:nth-child(2) a {
+ transform: rotate(6deg); }
+ body > aside:hover ul li:hover:last-child, body > aside:focus ul li:hover:last-child {
+ transform: scale(1.4) rotate(5deg) translateX(-0.5vw); }
+ body > aside:hover ul li:hover:last-child a, body > aside:focus ul li:hover:last-child a {
+ transform: rotate(-5deg); }
+ body > aside nav {
+ position: relative;
+ margin-left: 3rem;
+ display: none;
+ line-height: 30rem; }
+ body > aside nav h3 {
+ display: inline-block;
+ background: url(../img/logo-ps.svg) 3rem center/10rem fixed no-repeat;
+ width: 10rem;
+ height: 100%;
+ vertical-align: top;
+ color: transparent; }
+ body > aside nav h3 a {
+ display: block;
+ height: 100%;
+ width: 100%;
+ line-height: 30rem;
+ color: transparent; }
+ body > aside nav h3 a:hover {
+ color: transparent; }
+ body > aside nav ul {
+ list-style: none;
+ display: inline-block;
+ height: 100%; }
+ body > aside nav ul li {
+ display: block;
+ padding: 0 2rem;
+ font-size: 3rem;
+ float: left;
+ padding-left: 1rem;
+ z-index: 400;
+ overflow: hidden;
+ width: 10rem;
+ height: 100%; }
+ body > aside nav ul li a {
+ color: black;
+ text-decoration: none;
+ display: block;
+ height: 100%;
+ width: 100%;
+ z-index: 404; }
+ body > aside nav ul li a:hover {
+ font-size: 200%;
+ color: inherit;
+ z-index: 404; }
+ body > aside nav ul li span {
+ display: none;
+ z-index: 400;
+ position: relative;
+ font-size: 1.25rem;
+ line-height: 1.6rem;
+ text-align: center;
+ margin: -3rem -2rem 0 -1rem; }
+ body > aside nav ul li:first-child {
+ background: rgba(191, 138, 112, 0.7); }
+ body > aside nav ul li:nth-child(2) {
+ background: rgba(166, 191, 112, 0.9); }
+ body > aside nav ul li:last-child {
+ background: rgba(109, 144, 162, 0.7); }
body > footer {
- position: fixed;
+ position: relative;
bottom: 0;
- border-top: 1rem; }
+ border-top: 1rem;
+ margin-top: 5rem; }
article {
font-size: 1.6rem;
@@ -1069,4 +1196,19 @@ body > footer {
transform: rotate(180deg);
padding-bottom: -0.05rem; }
+@keyframes aside-off {
+ from {
+ width: 0;
+ margin-left: 0; }
+ to {
+ width: 92rem;
+ margin-left: -90rem; } }
+@keyframes aside-on {
+ from {
+ width: 92rem;
+ margin-left: -90rem; }
+ to {
+ width: 20rem;
+ margin-left: 0; } }
+
/*# sourceMappingURL=www.css.map */
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-01 17:20:14 +0000