aboutsummaryrefslogtreecommitdiff
path: root/assets/scss
diff options
context:
space:
mode:
Diffstat (limited to 'assets/scss')
-rw-r--r--assets/scss/txt.scss471
1 files changed, 237 insertions, 234 deletions
diff --git a/assets/scss/txt.scss b/assets/scss/txt.scss
index 5a915c0..ce58921 100644
--- a/assets/scss/txt.scss
+++ b/assets/scss/txt.scss
@@ -91,29 +91,33 @@ body > header {
color: rgba(240, 240, 242, 1);
h1 {
- margin: 0 auto;
-
- &:before {
- background: url(../assets/img/logo-ps.svg) center left / 5rem no-repeat;
- display: block;
- width: 5rem;
- height: 5rem;
- }
+ margin: 0 auto;
+ min-height: 10rem;
+
+ &:before {
+ background: url(../assets/img/logo-ps.svg) center left / 5rem no-repeat;
+ display: block;
+ width: 5rem;
+ height: 5rem;
+ }
}
h2 {
- font-weight: 100;
- margin-top: -2.6rem;
- font-size: 3.7rem;
- transform: rotate(180deg);
+ position: absolute;
+ font-weight: 100;
+ margin-top: 12rem;
+ left: 50%;
+ margin-left: 27rem;
+ font-size: 3.7rem;
+ transform: rotate(90deg);
}
p {
- font-family: $serif;
- font-size: 2rem;
- font-style: italic;
- margin: -3.8rem 0 0 0;
- padding: 0 0 0.4rem 0.3rem;
+ font-family: $serif;
+ font-size: 2rem;
+ font-style: italic;
+ margin: -3.8rem 0 0 0;
+ padding: 0 0 0.4rem 0.3rem;
span {
color: black;
@@ -133,11 +137,11 @@ body > main {
font-size: 1.6rem;
> article {
- background-color: $bg-main;
- margin: 0 auto;
- max-width: 60rem;
- min-height: calc(100vh - 24rem);
- padding: 12rem 9rem;
+ background-color: $bg-main;
+ margin: 0 auto;
+ max-width: 60rem;
+ min-height: calc(100vh - 24rem);
+ padding: 12rem 9rem;
}
}
@@ -145,185 +149,184 @@ body > main {
body {
&.gfx {
- background-color: $bg-gfx-on;
- > aside {
- &:hover, &:focus {
- background-color: $bg-gfx-on;
- nav ul li:first-child {
- background: $bg-gfx-on;
- }
- }
- }
+ background-color: $bg-gfx-on;
+ > aside {
+ &:hover, &:focus {
+ background-color: $bg-gfx-on;
+ nav ul li:first-child {
+ background: $bg-gfx-on;
+ }
+ }
+ }
}
&.txt {
- background-color: $bg-txt-on;
- > aside {
- &:hover, &:focus {
- background-color: $bg-txt-on;
- nav ul li:nth-child(2) {
- background: $bg-txt-on;
- }
- }
- }
+ background-color: $bg-txt-on;
+ > aside {
+ &:hover, &:focus {
+ background-color: $bg-txt-on;
+ nav ul li:nth-child(2) {
+ background: $bg-txt-on;
+ }
+ }
+ }
}
&.vdo {
- background-color: $bg-vdo-on;
- > aside {
- &:hover, &:focus {
- background-color: $bg-vdo-on;
- nav ul li:last-child {
- background: $bg-vdo-on;
- }
- }
- }
+ background-color: $bg-vdo-on;
+ > aside {
+ &:hover, &:focus {
+ background-color: $bg-vdo-on;
+ nav ul li:last-child {
+ background: $bg-vdo-on;
+ }
+ }
+ }
}
> aside {
-
- position: fixed;
- top: calc(50% - 150px);
- height: 300px;
- background: black url(../img/aside-off.png) center right no-repeat;
- left: -20rem;
- width: 20rem;
- padding: 1rem;
-
- &:hover, &:focus {
- left: 0;
- background: $bg-main url(../img/aside-on.png) center left no-repeat;
- box-shadow: 1px 2px 2px 1px rgba(0, 0, 0, 0.4);
- width: auto;
- border-right: 2rem solid black;
- padding: 0;
-
- nav {
- display: block;
- background: $bg-main url(../img/aside-on.png) center left no-repeat;
- height: 100%;
-
- h3 {
- a:link, a:hover, a:active, a:visited {
- color: transparent;
- }
- }
- }
-
- ul li:hover {
- a:hover {
- text-decoration: none;
- }
- span {
- display: block;
- }
- &:first-child {
- transform: scale(1.4) rotate(4deg) translateX(-0.75vw);
- a {
- transform: rotate(-4deg);
- }
- }
- &:nth-child(2) {
- transform: scale(1.4) rotate(-6deg) translateX(-0.5vw);
- a {
- transform: rotate(6deg);
- }
- }
- &:last-child {
- transform: scale(1.4) rotate(5deg) translateX(-0.5vw);
- a {
- transform: rotate(-5deg);
- }
- }
- }
- }
-
- nav {
- position: relative;
- margin-left: 3rem;
- display: none;
- line-height: 30rem;
-
- 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;
-
-
- a {
- display: block;
- height: 100%;
- width: 100%;
- line-height: 30rem;
- color: transparent;
- &:hover {
- color: transparent;
- }
- }
- }
-
- ul {
- list-style: none;
- display: inline-block;
- height: 100%;
-
- li {
- display: block;
- padding: 0 2rem;
- font-size: 3rem;
- float: left;
- padding-left: 1rem;
- z-index: 400;
- overflow: hidden;
- width: 10rem;
- height: 100%;
-
- a {
- color: black;
- text-decoration: none;
- display: block;
- height: 100%;
- width: 100%;
- z-index: 404;
-
- &:link, &:visited {
- color: inherit;
- }
-
- &:hover {
- font-size: 200%;
- color: inherit;
- z-index: 404;
- }
- }
-
- span {
- display: none;
- z-index: 400;
- position: relative;
- font-size: 1.25rem;
- line-height: 1.6rem;
- text-align: center;
- margin: -3rem -2rem 0 -1rem;
- }
-
- &:first-child {
- background: $bg-gfx;
- }
-
- &:nth-child(2) {
- background: $bg-txt;
- }
-
- &:last-child {
- background: $bg-vdo;
- }
- }
- }
- }
+ position: fixed;
+ top: calc(50% - 150px);
+ height: 300px;
+ background: black url(../img/aside-off.png) center right no-repeat;
+ left: -20rem;
+ width: 20rem;
+ padding: 1rem;
+
+ &:hover, &:focus {
+ left: 0;
+ background: $bg-main url(../img/aside-on.png) center left no-repeat;
+ box-shadow: 1px 2px 2px 1px rgba(0, 0, 0, 0.4);
+ width: auto;
+ border-right: 2rem solid black;
+ padding: 0;
+
+ nav {
+ display: block;
+ background: $bg-main url(../img/aside-on.png) center left no-repeat;
+ height: 100%;
+
+ h3 {
+ a:link, a:hover, a:active, a:visited {
+ color: transparent;
+ }
+ }
+ }
+
+ ul li:hover {
+ a:hover {
+ text-decoration: none;
+ }
+ span {
+ display: block;
+ }
+ &:first-child {
+ transform: scale(1.4) rotate(4deg) translateX(-0.75vw);
+ a {
+ transform: rotate(-4deg);
+ }
+ }
+ &:nth-child(2) {
+ transform: scale(1.4) rotate(-6deg) translateX(-0.5vw);
+ a {
+ transform: rotate(6deg);
+ }
+ }
+ &:last-child {
+ transform: scale(1.4) rotate(5deg) translateX(-0.5vw);
+ a {
+ transform: rotate(-5deg);
+ }
+ }
+ }
+ }
+
+ nav {
+ position: relative;
+ margin-left: 3rem;
+ display: none;
+ line-height: 30rem;
+
+ 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;
+
+
+ a {
+ display: block;
+ height: 100%;
+ width: 100%;
+ line-height: 30rem;
+ color: transparent;
+ &:hover {
+ color: transparent;
+ }
+ }
+ }
+
+ ul {
+ list-style: none;
+ display: inline-block;
+ height: 100%;
+
+ li {
+ display: block;
+ padding: 0 2rem;
+ font-size: 3rem;
+ float: left;
+ padding-left: 1rem;
+ z-index: 400;
+ overflow: hidden;
+ width: 10rem;
+ height: 100%;
+
+ a {
+ color: black;
+ text-decoration: none;
+ display: block;
+ height: 100%;
+ width: 100%;
+ z-index: 404;
+
+ &:link, &:visited {
+ color: inherit;
+ }
+
+ &:hover {
+ font-size: 200%;
+ color: inherit;
+ z-index: 404;
+ }
+ }
+
+ span {
+ display: none;
+ z-index: 400;
+ position: relative;
+ font-size: 1.25rem;
+ line-height: 1.6rem;
+ text-align: center;
+ margin: -3rem -2rem 0 -1rem;
+ }
+
+ &:first-child {
+ background: $bg-gfx;
+ }
+
+ &:nth-child(2) {
+ background: $bg-txt;
+ }
+
+ &:last-child {
+ background: $bg-vdo;
+ }
+ }
+ }
+ }
}
}
@@ -334,33 +337,33 @@ body > footer {
right: 0;
max-width: 60rem;
margin: 5rem auto 2rem auto;
- font-size: 1.25rem;
+ font-size: 1.15rem;
h4 {
- margin: 0;
- font-size: 1.6rem;
+ margin: 0;
+ font-size: 1.6rem;
- a {
- text-decoration:none;
- }
+ a {
+ text-decoration:none;
+ }
}
&:hover > p {
- > span:first-child {
- display: inline-block;
- color: transparent;
- line-height: 0;
- }
- > span:first-child:before {
- content: 'Copyleft';
- display: block;
- color: black;
- padding-right: 0.4rem;
- }
- > span + span {
- display: inline-block;
- transform: rotate(180deg) translateY(0.2rem);
- }
+ > span:first-child {
+ display: inline-block;
+ color: transparent;
+ line-height: 0;
+ }
+ > span:first-child:before {
+ content: 'Copyleft';
+ display: block;
+ color: black;
+ padding-right: 0.4rem;
+ }
+ > span:first-child + span {
+ display: inline-block;
+ transform: rotate(180deg) translateY(0.1rem);
+ }
}
}
@@ -404,27 +407,27 @@ article {
aside {
-
- ul {
- display: table;
- position: relative;
- list-style: none;
- margin: 0 -8rem 1rem -8rem;
- width: calc(100% + 16rem);
-
-
- li {
- display: table-cell;
- text-align: center;
- }
-
- img {
- display: block;
- width: 16rem;
- background-color: black;
- margin: 1rem auto;
- }
- }
+ ul {
+ display: table;
+ position: relative;
+ list-style: none;
+ margin: 0 -8rem 1rem -8rem;
+ width: calc(100% + 16rem);
+
+
+ li {
+ display: table-cell;
+ text-align: center;
+ }
+
+ img {
+ display: block;
+ width: 16rem;
+ background-color: black;
+ margin: 1rem auto;
+ height: 22.55rem;
+ }
+ }
}
.outro {
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-23 18:32:19 +0000