aboutsummaryrefslogtreecommitdiff
path: root/assets/scss/_main.scss
diff options
context:
space:
mode:
authorhellekin <hellekin@cepheide.org>2022-06-02 18:07:18 +0200
committerhellekin <hellekin@cepheide.org>2022-06-02 18:07:18 +0200
commit435bc825f01798379e8eb33152ee9592dd54bf94 (patch)
treefabc5aaa3b2ea9ed88a2fa9e210be787d8260735 /assets/scss/_main.scss
parentbb4584cdf1f629ecf056633528e249cd9aef1451 (diff)
downloadlesoiseaux.io-435bc825f01798379e8eb33152ee9592dd54bf94.tar.gz
Remove unused files and correct existing ones.
Diffstat (limited to 'assets/scss/_main.scss')
-rw-r--r--assets/scss/_main.scss210
1 files changed, 126 insertions, 84 deletions
diff --git a/assets/scss/_main.scss b/assets/scss/_main.scss
index 00ee2a7..b7c235a 100644
--- a/assets/scss/_main.scss
+++ b/assets/scss/_main.scss
@@ -4,119 +4,161 @@ body > main {
top: 0rem;
right: 0;
left: 0;
-
font-size: 1.6rem;
-
margin: 0 auto;
max-width: 96rem;
> article {
- background: $bg-txt-ps-on;
-
- margin: 0 auto;
- max-width: 60rem;
- min-height: calc(100vh - 24rem);
- height: auto;
-
- padding: 12rem 9rem;
+ /* background: $bg-txt-ps-on; */
+ background-color: $bg-main;
+ margin: 0 auto;
+ max-width: 60rem;
+ min-height: calc(100vh - 24rem);
+ height: auto;
+ padding: 12rem 9rem;
}
}
-
article {
> header {
- p {
- font-size: 2rem;
- line-height: 1.25;
- font-family: $serif;
- text-variant: italic;
- padding: 2rem 4rem;
- text-align: justify;
- }
+ p {
+ font-size: 2rem;
+ line-height: 1.25;
+ font-family: $serif;
+ text-variant: italic;
+ /* padding: 2rem 4rem; */
+ padding: 0rem 4rem;
+ text-align: justify;
+
+ &:last-child {
+ padding-bottom: 2rem;
+ }
+ }
}
section:after {
- display: table;
- content: "";
- clear: both;
- margin-bottom: 2rem;
+ display: table;
+ content: "";
+ clear: both;
+ margin-bottom: 2rem;
}
aside {
- ul {
- display: table;
- position: relative;
- list-style: none;
- margin: 0 -8rem 1rem -8rem;
- width: calc(100% + 16rem);
+ 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;
- height: 9rem;
- background-color: black;
- margin: 1rem auto;
- }
- }
+ li {
+ display: table-cell;
+ text-align: center;
+ }
+
+ img {
+ display: block;
+ background-color: black;
+ width: 16rem;
+ height: 9rem;
+ /* height: 22.55rem; */
+ margin: 1rem auto;
+ }
+ }
}
.intro {
- background-color: rgba(255, 255, 255, 0.1);
- box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.5);
- height: auto;
- max-height: 2rem;
- margin: 2rem;
- padding: 2rem;
- overflow: hidden;
- text-overflow: ellipsis;
+ background-color: rgba(255, 255, 255, 0.1);
+ box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.5);
+ height: auto;
+ max-height: 2rem;
+ margin: 2rem;
+ padding: 2rem;
+ overflow: hidden;
+ text-overflow: ellipsis;
- p {
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- }
-
- &:hover {
- max-height: 100vh;
- p {
- white-space: normal;
- overflow: auto;
- }
- }
+ p {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ &:hover {
+ max-height: 100vh;
+ p {
+ white-space: normal;
+ overflow: auto;
+ }
+ }
}
.outro {
- p {
- font-size: 2rem;
- text-align: justify;
- }
+ p {
+ font-size: 2rem;
+ text-align: justify;
+ }
+ }
+
+ video, iframe {
+ max-width: 100%;
}
.video {
- margin: 0 -6rem 0 -4rem;
+ margin: 0 -6rem 0 -4rem;
- video {
- width: 30rem;
- background: black;
- float: left;
- margin: 0 2rem 0 -4rem;
- }
- p {
- line-height: 1.25;
- }
- &:hover {
- video {
- width: calc(100% + 6rem);
- height: auto;
- float: none;
- }
- }
+ video {
+ width: 30rem;
+ height: 18.875rem;
+ background: black;
+ float: left;
+ margin: 0 2rem 0 -4rem;
+ }
+ p {
+ line-height: 1.25;
+ }
+ &:hover {
+ video, iframe {
+ width: 68rem;
+ height: 38.25rem;
+ float: none;
+ margin: auto;
+ }
+/* video {
+ width: calc(100% + 6rem);
+ height: auto;
+ float: none;
+ } */
+ }
+ }
+}
+
+section {
+ h2 + h3 {
+ font-size: 2.5rem;
+ font-style: italic;
+ margin-top: -2rem;
+ }
+}
+
+article {
+ #intro h2 {
+ transform: rotate(270deg) translate(13.6rem, -34rem);
}
+
}
+
+span.note {
+ font-size: smaller;
+ padding-left: 1rem;
+ display: none;
+}
+:hover + span.note {
+ display: inline;
+}
+
+#lang-switch {
+ background-color: rgba(240, 240, 242, 0.3);
+}
+