AstrolabeCAE/SiteWebAstrolabe_public
2
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Previous version made GPDR-friendly

Browse Source
This commit is contained in:
Déborah Jean
2025-08-18 16:06:37 +02:00
commit fa64b62d5a
357 changed files with 10137 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
src/scss/components/_button.scss Normal file
View File

@@ -0,0 +1,86 @@
.button,
.btn {
display: inline-block;
border: 0;
background-color: var(--color-action-bg);
color: var(--color-action-text);
padding: get-size(300) get-size('base');
line-height: 1;
margin: 0;
text-decoration: none;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
}
.button:hover,
.button:focus {
filter: brightness(1.2);
}
.button:focus:hover,
.btn:focus:hover {
outline: none;
}
.button:focus:not(:hover),
.btn:not(button):focus:not(:hover) {
outline: 1px dotted var(--color-white);
outline-offset: -1rem;
}
.button:active,
.btn:active {
transform: scale(.99);
}
.btn {
display: inline-block;
padding: 1.125rem 2rem;
border: 0;
border-radius: 1.75rem;
line-height: 1.25rem;
text-decoration: none;
font-size: 1.125rem;
font-weight: 600;
&:focus {
outline: none;
}
+ .btn {
margin-left: 2rem;
}
svg {
margin-left: .5rem;
}
&.btn-primary {
color: var(--color-dark);
background-color: var(--color-primary);
font-weight: 700;
&:focus:not(:hover) {
outline-color: var(--color-dark);
}
}
&.btn-secondary {
color: var(--color-white);
background-color: var(--color-secondary);
font-weight: 500;
}
&.btn-icon {
padding-top: 1rem;
padding-bottom: 1rem;
display: flex;
align-items: center;
svg {
margin-left: 0;
margin-right: .5rem;
}
}
}

30
src/scss/components/_faq.scss Normal file
View File

@@ -0,0 +1,30 @@
.faq {
&__heading {
margin: 8rem 0 4rem;
}
.accordion {
margin-top: 2rem;
}
.accordion-button {
font-size: 1.25rem;
font-weight: 600;
padding: 1rem 0;
}
.accordion-button:not(.collapsed) {
color: var(--color-text);
background-color: var(--color-white);
box-shadow: none;
}
.accordion-button:focus {
border: 0;
box-shadow: 0 0 0 1px var(--color-text);
}
.accordion-button:not(.collapsed)::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
}

164
src/scss/components/_form.scss Normal file
View File

@@ -0,0 +1,164 @@
.home .form-container {
svg > path:first-child {
fill: #f1f0f6;
}
}
.form-container {
// margin-top: 8rem;
padding: 0 0 6rem;
background-color: var(--color-primary);
color: var(--color-dark);
.contact-heading {
margin: 2rem 0 4rem;
}
}
.field-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
grid-column-gap: 1.5rem;
grid-row-gap: 1.5rem;
.full-width {
grid-column: span 2;
}
}
form br {
display: none;
}
label {
display: block;
font-weight: 600;
}
input,
textarea,
select {
@include apply-utility('font', 'base');
background-color: var(--color-primary-glare);
font: inherit;
border: 0;
margin-top: 1rem;
line-height: 1.5rem;
padding: .75rem 1.5rem;
border-radius: 1.5rem;
width: 100%;
&:focus {
outline: none;
box-shadow: var(--color-dark) 0 0 1.5px 1px;
}
}
textarea {
resize: none;
}
select {
background-image: url("data:image/svg+xml,%3Csvg width='32' height='48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23 32l-7.794-12h15.588L23 32z' fill='%23333'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1.5rem top 50%;
background-size: 2rem 3rem;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
}
label input {
margin: -.25rem 1rem 0 0;
width: auto;
vertical-align: middle;
}
fieldset {
border: 0;
margin: 0;
padding: 0;
}
legend {
display: block;
font-weight: bold;
}
.btn[type=submit] {
margin-top: 3.5rem;
padding-left: 3rem;
padding-right: 3rem;
justify-self: start;
}
.field-list {
margin: 0;
padding: 0;
list-style: none;
}
.field-list__field-group {
transition: transform 150ms;
&__description {
display: block;
margin-top: .3rem;
font-size: .875rem;
line-height: 1.25;
}
textarea + &__description {
margin-top: 0;
}
&--confirm {
font-weight: normal;
}
&__list {
list-style: none;
margin: 0;
.field-list__field-group__description {
margin: 0 0 0 1.35rem;
}
}
}
.ohnohoney {
opacity: 0;
position: absolute;
top: 0;
left: 0;
height: 0;
width: 0;
z-index: -1;
}
@media (max-width: 575.98px) {
.form-container {
svg {
width: 70rem;
overflow: hidden;
}
.contact-heading {
margin: 2rem 0;
}
}
.field-list {
display: block;
}
.field-list__field-group {
margin-top: 1.5rem;
}
.btn[type=submit] {
width: 100%;
}
}

11
src/scss/components/_heading-permalink.scss Normal file
View File

@@ -0,0 +1,11 @@
.heading-permalink {
color: var(--color-dark);
font-size: .8em;
margin-left: .3em;
margin-top: .2em;
@include media-query('md') {
font-size: .6em;
margin-top: .4em;
}
}

122
src/scss/components/_intro.scss Normal file
View File

@@ -0,0 +1,122 @@
.intro {
margin-top: 8rem;
.wrapper {
display: flex;
flex-wrap: wrap;
}
&__summary {
--flow-space: #{get-size(500)};
font-size: get-size(500);
a {
color: currentColor;
&:hover {
text-decoration: none;
}
}
}
&__heading {
max-width: 44rem;
color: var(--color-text);
font-size: 2.5rem;
display: inline-block;
+ svg {
margin-left: auto;
margin-right: 8rem;
vertical-align: middle;
max-width: 8rem;
}
}
.btn-grp {
margin-top: -3.5rem;
}
}
@media (min-width: 768px) and (max-width: 1199.98px) {
.intro {
margin-top: 4rem;
&__heading {
width: 100%;
max-width: none;
+ svg {
order: 1;
margin-right: auto;
}
}
.btn-grp {
margin-top: auto;
margin-right: auto;
margin-bottom: 4rem;
}
}
}
@media (min-width: 576px) and (max-width: 767.98px) {
.intro {
margin-top: 3rem;
&__heading {
font-size: 1.75rem;
+ svg {
margin: 2rem auto 0;
max-width: 7rem;
order: 0;
}
}
.btn-grp {
display: flex;
width: auto;
flex-direction: column;
align-items: center;
margin-top: auto;
margin-bottom: auto;
margin-right: auto;
.btn + .btn {
margin-left: 0;
margin-top: 1.5rem;
}
}
}
}
@media (max-width: 575.98px) {
.intro {
margin-top: 3rem;
&__heading {
font-size: 1.75rem;
+ svg {
margin: 2rem auto 0;
max-width: 7rem;
order: 0;
}
}
.btn-grp {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 2rem;
margin-bottom: 0;
width: 100%;
.btn + .btn {
margin-left: 0;
margin-top: 1.5rem;
}
}
}
}

39
src/scss/components/_meeting.scss Normal file
View File

@@ -0,0 +1,39 @@
.meeting {
display: flex;
position: fixed;
right: 0;
top: 20%;
z-index: 10;
@media (max-width: 991.98px) {
top: unset;
right: 0;
bottom: 0;
left: 0;
}
&__link {
display: block;
flex: 1 1 auto;
border-radius: 0;
border-top-left-radius: 1.75rem;
border-bottom-left-radius: 1.75rem;
border: 2px solid var(--color-light);
border-right: 0;
color: var(--color-white);
padding: 1.125rem 1rem 1.125rem 2rem;
@media (max-width: 991.98px) {
padding: 1.125rem 2rem;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-bottom: 0;
border-left: 0;
border-right: 0;
}
&:hover {
border-color: var(--color-white);
}
}
}

96
src/scss/components/_member-list.scss Normal file
View File

@@ -0,0 +1,96 @@
.member-list {
&__heading {
margin: 8rem 0 4rem;
}
&__items {
margin-top: 4rem;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto;
grid-column-gap: 2rem;
grid-row-gap: 4rem;
}
&__item {
display: flex;
flex-direction: column;
align-items: center;
color: var(--color-dark);
> p {
text-align: center;
}
> .btn {
text-align: center;
}
> a {
display: flex;
flex-direction: column;
text-decoration: none;
}
img {
border-radius: 50%;
height: auto;
width: 100%;
padding: 0 1rem;
+ .btn {
margin-top: -1.5rem;
margin-bottom: .5rem;
text-align: center;
align-self: center;
+ p {
font-size: 1.125rem;
}
}
}
&.info {
display: flex;
flex-direction: column;
background-color: var(--color-white);
color: var(--color-dark);
font-weight: 600;
p {
font-size: 1.2rem;
text-align: center;
margin: 2rem 0 3.125rem;
}
}
}
}
@media (max-width: 1199.98px) {
.member-list {
&__heading {
margin: 4rem 0;
font-size: 1.75rem;
}
}
}
@media (max-width: 991.98px) {
.member-list {
&__items {
grid-template-columns: repeat(2, 1fr);
}
}
}
@media (max-width: 575.98px) {
.member-list {
&__items {
display: block;
}
&__item + &__item {
margin-top: 3rem;
}
}
}

132
src/scss/components/_member.scss Normal file
View File

@@ -0,0 +1,132 @@
.member {
display: flex;
flex-direction: column;
margin-top: 8rem;
margin-bottom: 16rem;
h1 {
font-size: 2rem;
}
.position {
font-size: 1.125rem;
}
&__wrapper {
display: grid;
grid-template-columns: .4fr .6fr;
grid-template-rows: 1fr;
grid-column-gap: 1.5rem;
grid-row-gap: 0;
margin-top: 2.5rem;
}
&__info {
display: flex;
flex-direction: column;
img {
border-radius: 50%;
width: 16rem;
margin-bottom: 2rem;
}
.member-url {
margin-bottom: 1.5rem;
}
.social-links {
display: flex;
li + li {
margin-left: 1rem;
}
svg > path {
fill: var(--color-secondary);
}
.member-contact-at {
text-decoration: none;
font-size: 1.7rem;
font-weight: 800;
&,
&:visited,
&:focus {
color: var(--color-secondary);
}
}
}
}
&__bio {
position: relative;
p:not(:last-child),
ul:not(:last-child) {
margin-bottom: 1.5rem;
}
h2:not(:first-child) {
margin-top: 1.1428em;
}
h3:not(:first-child) {
margin-top: 1.3333em;
}
h1 {
margin-bottom: .5em;
}
h2 {
margin-bottom: .5714em;
}
h3 {
margin-bottom: .6666em;
}
ul {
list-style: disc outside;
margin-inline-start: 2em;
}
li + li {
margin-top: .5em;
}
&:not(.member-contact)::before {
content: '';
display: block;
position: absolute;
background-image: url("data:image/svg+xml,%3Csvg width='221' height='138' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M220.5 137.5h-99v-77L160 0h49.5l-22 55h33v82.5zm-121 0H.5v-77L39 0h49.5l-22 55h33v82.5z' fill='%23F1F0F6'/%3E%3C/svg%3E");
width: 221px;
height: 138px;
z-index: -1;
top: -6rem;
left: -1.5rem;
}
&.member-contact .form-container {
border-radius: 1.75rem;
padding-top: 1.75rem;
}
}
}
@media (max-width: 575.98px) {
.member {
margin-top: 3rem;
margin-bottom: 8rem;
&__wrapper {
display: block;
}
&__bio {
margin-top: 8rem;
}
}
}

17
src/scss/components/_modal.scss Normal file
View File

@@ -0,0 +1,17 @@
.modal-content {
border: 0;
border-radius: 1.5rem;
.modal-header,
.modal-body,
.modal-footer {
padding: 1.5rem;
border: 0;
}
h3 {
@include apply-utility('font', 'brand');
font-size: 1.5rem;
}
}

70
src/scss/components/_nav.scss Normal file
View File

@@ -0,0 +1,70 @@
.nav {
&__list {
overflow-x: auto;
padding: .5rem;
margin: -.5rem;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
display: flex;
align-items: center;
justify-content: flex-end;
&::-webkit-scrollbar {
display: none;
}
> * + * {
margin-left: 2rem;
}
}
&__item {
padding: get-size(300) 0;
flex-shrink: 0;
a {
@include apply-utility('weight', 'mid');
color: currentColor;
&:not(:hover) {
text-decoration: none;
}
}
&.active a {
text-decoration: underline;
cursor: default;
}
}
}
@media (max-width: 1199.98px) {
.nav {
margin-top: 1rem;
&__list {
justify-content: flex-start;
}
}
}
@media (max-width: 767.98px) {
.nav {
display: none;
margin-top: 0;
&.show {
display: block;
width: 100%;
}
&__list {
flex-direction: column;
align-items: flex-end;
> * + * {
margin-left: 0;
}
}
}
}

51
src/scss/components/_partner.scss Normal file
View File

@@ -0,0 +1,51 @@
.partner {
background-color: var(--color-light-gray);
.wrapper {
display: flex;
flex-direction: column;
}
&__heading {
align-self: center;
text-transform: uppercase;
font-size: 1.125rem;
font-weight: 300;
margin: 1.5rem 0 3rem;
}
&__list {
list-style: none;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 1.5rem;
grid-row-gap: 0;
}
&__list-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-bottom: 3rem;
img {
max-width: 8rem;
}
}
}
@media (max-width: 767.98px) {
.partner {
&__list {
display: flex;
overflow-x: auto;
padding-bottom: 1rem;
}
&__list-item + &__list-item {
margin-left: 1.5rem;
}
}
}

406
src/scss/components/_post.scss Normal file
View File

@@ -0,0 +1,406 @@
.post {
margin-bottom: 8rem;
&__body {
display: flex;
flex-direction: column;
h1 {
margin: 8rem 0 4rem;
}
h2,
h3 {
@include apply-utility('leading', 'tight');
position: relative;
}
p {
font-size: 1.125rem;
margin-bottom: 1rem;
}
code {
font-size: 1.2em;
color: var(--color-theme-primary);
font-weight: 600;
margin-left: .01ch;
margin-right: .01ch;
}
pre > code {
margin-right: 0;
border: 1px solid rgba(255, 255, 255, .1);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
blockquote {
border-left: .4rem solid var(--color-theme-primary-glare);
margin-left: 0;
padding-left: get-size(500);
font-style: italic;
font-size: get-size(600);
p {
opacity: .85;
padding: get-size(500) 0;
}
}
ol:not([class]),
ul:not([class]) {
margin-left: get-size(800);
margin-bottom: 1rem;
li + li {
margin-top: get-size(300);
}
}
figure,
figure + *,
pre > code,
.video-player,
.video-player + *,
video {
--flow-space: #{get-size('max')};
}
figure,
pre > code,
.video-player,
video {
width: 100%;
max-width: map-get($metrics, 'wrap-max-width');
position: relative;
}
figure img {
position: relative;
z-index: 1;
}
figcaption {
font-size: .8em;
font-style: italic;
max-width: map-get($metrics, 'wrap-inner-max-width');
margin: .5rem auto 0;
padding: 0 get-size(500);
}
.post-info {
display: inline-block;
align-self: flex-end;
margin-bottom: 2rem;
}
.post-pic {
align-self: center;
margin-bottom: 3rem;
}
pre > code {
display: block;
background: var(--color-dark);
padding: get-size(700);
font-size: get-size(500);
}
// page specific
#mail-sent-pic {
margin: 0 auto 6rem 6rem;
}
.split-content {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
grid-column-gap: 1.5rem;
grid-row-gap: 0;
margin-bottom: 2rem;
.video-player > iframe {
height: 89%;
}
}
details {
border-bottom: 1px solid var(--color-mid);
&:first-of-type {
border-top: 1px solid var(--color-mid);
margin-top: 4rem;
}
&[open] {
summary::after {
transform: rotateZ(180deg);
}
}
> summary:first-of-type {
position: relative;
padding: 1rem 0;
list-style-type: none;
cursor: pointer;
&::-webkit-details-marker {
display: none;
}
&::after {
content: '';
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
background-repeat: no-repeat;
width: 1.25rem;
height: 1.25rem;
position: absolute;
right: 0;
top: calc(50% - .625rem);
}
}
h3 {
display: inline-block;
font-weight: 600;
.heading-permalink {
display: none;
}
}
}
.table-wrapper {
~ p {
font-size: .875rem;
&:last-child {
margin-bottom: 1.5rem;
}
}
}
table {
margin-bottom: 1rem;
&,
thead,
tbody {
display: block;
}
th,
td {
padding: 0;
}
tr {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto;
grid-column-gap: 1.5rem;
grid-row-gap: 0;
text-align: left;
}
thead th {
font-weight: 600;
&:nth-child(2) {
background-color: var(--color-primary);
}
}
tbody tr {
padding: 1.5rem 0;
td:first-child {
font-weight: 600;
}
&:nth-child(odd) {
background-color: var(--color-light-gray);
}
}
}
.process-cae {
max-width: 34.875rem;
margin: 0 auto;
&.split {
max-width: 100%;
margin: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 1.5rem;
grid-row-gap: 0;
.process-cae__block:first-child {
margin-top: 3rem;
}
.process-cae__block:last-child {
align-items: flex-end;
}
}
&__block {
display: flex;
flex-direction: column;
margin: 3rem 0;
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
p {
margin-top: 2rem;
}
.highlight {
background-color: var(--color-primary);
width: 100%;
margin: 3rem 0;
padding: 1.5rem;
border-radius: 1.5rem;
display: flex;
flex-direction: column;
&.secondary {
background-color: var(--color-secondary);
color: var(--color-white);
.heading-permalink svg {
fill: var(--color-white);
}
a {
background-color: var(--color-primary);
color: var(--color-dark);
}
}
h2 {
@include apply-utility('font', 'base');
text-align: left;
font-weight: 600;
margin-bottom: 1rem;
}
a {
background-color: var(--color-secondary);
color: var(--color-white);
text-decoration: none;
padding: .2rem .4rem;
}
ul + p {
align-self: flex-end;
font-size: 1rem;
margin-top: 1rem;
margin-bottom: .2rem;
}
}
img {
align-self: center;
margin: 0 auto;
}
#small-boat {
width: 8rem;
margin-top: 4rem;
margin-left: 18rem;
}
}
}
}
&__footer {
background: var(--color-theme-highlight);
h2 {
flex-shrink: 0;
margin-right: get-size('base');
color: var(--color-dark);
}
h2 a {
@extend %visually-hidden;
}
a {
background: var(--color-bg);
padding: .4rem .6rem;
}
}
}
@media (max-width: 1199.98px) {
.post {
&__body {
h1 {
margin: 2rem 0 4rem;
font-size: 1.75rem;
}
.split-content {
display: block;
}
.table-wrapper {
overflow-x: auto;
}
table {
min-width: 48rem;
}
.process-cae {
&__block {
#small-boat {
margin-left: auto;
}
}
}
}
}
}
@media (max-width: 575.98px) {
.post {
&__body {
#mail-sent-pic {
margin: 0 auto 2rem;
}
.process-cae {
&.split {
display: block;
.process-cae__block:last-child {
align-items: flex-start;
}
}
&__block {
#small-boat {
margin-left: auto;
margin-right: auto;
}
}
}
.post-info {
align-self: flex-start;
}
}
}
}

181
src/scss/components/_posts-list.scss Normal file
View File

@@ -0,0 +1,181 @@
.news-list {
margin-bottom: 8rem;
.wrapper {
position: relative;
}
&__inner {
display: flex;
flex-direction: column;
}
&__heading {
margin-bottom: 3rem;
color: var(--color-white);
font-weight: 100;
}
&__items {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 1.5rem;
grid-row-gap: 2rem;
}
&__item {
background-color: var(--color-primary);
color: var(--color-dark);
border-radius: 1rem;
&.event,
&.event &-type {
background-color: var(--color-light-blue);
}
&-type {
margin-bottom: auto;
align-self: flex-start;
border-radius: 1rem 0;
padding: .125rem 1rem;
font-size: .875rem;
font-weight: 600;
background-color: var(--color-primary);
}
&-heading {
font-size: 1.125rem;
font-weight: 400;
padding: 1rem 1.5rem;
background-color: rgba(0, 0, 0, .65);
color: #fff;
}
&-date {
font-size: 1rem;
font-weight: 600;
background-color: var(--color-light-gray);
border-radius: 0 0 1rem 1rem;
padding: 1rem 1.5rem;
display: flex;
time + time {
margin-left: auto;
}
}
}
&__link {
border-radius: 1rem;
display: flex;
flex-direction: column;
justify-content: flex-end;
height: 16rem;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
&,
&:hover,
&:visited {
color: var(--color-dark);
text-decoration: none;
}
&:hover {
h3 {
text-decoration: underline;
}
}
}
}
main.home .news-list {
margin-top: 8rem;
margin-bottom: 24rem;
position: relative;
&__inner {
position: absolute;
top: -9rem;
}
}
@media (min-width: 768px) and (max-width: 1199.98px) {
.news-list {
&__items {
grid-template-columns: repeat(3, 1fr);
}
}
}
@media (min-width: 576px) and (max-width: 767.98px) {
.news-list {
&__items {
grid-template-columns: repeat(2, 1fr);
}
}
}
@media (max-width: 575.98px) {
main.posts .news-list {
&__items {
display: block;
}
li + li {
margin-top: 1.5rem;
}
}
}
@media (max-width: 1199.98px) {
main.home .news-list {
margin: 6rem 0;
> svg {
width: 70rem;
overflow: hidden;
}
.wrapper {
max-width: 100%;
margin: 0;
padding: 0;
display: block;
}
&__inner {
position: static;
margin-top: -9rem;
}
&__heading {
margin-left: 1.25rem;
}
&__items {
display: flex;
grid-column-gap: 0;
grid-row-gap: 0;
overflow-x: auto;
padding-bottom: 1rem;
padding-left: 1.25rem;
}
&__item {
flex-shrink: 0;
flex-basis: 16rem;
&:not(:first-child) {
margin-left: 1.5rem;
}
}
.return-link {
margin-right: 1.25rem;
}
}
}

43
src/scss/components/_posts.scss Normal file
View File

@@ -0,0 +1,43 @@
.posts {
.wrapper:first-child {
display: flex;
flex-direction: column;
}
.post-filter {
align-self: flex-end;
margin-bottom: 2rem;
list-style: none;
display: flex;
li {
display: inline-block;
+ li {
margin-left: 1.5rem;
}
a {
font-weight: 600;
text-decoration: none;
}
&.active a {
text-decoration: underline;
cursor: default;
}
}
}
}
@media (max-width: 575.98px) {
.posts {
h1 {
font-size: 1.75rem;
}
.post-filter {
align-self: flex-start;
}
}
}

109
src/scss/components/_presentation.scss Normal file
View File

@@ -0,0 +1,109 @@
.presentation {
article {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
grid-column-gap: 2.125rem;
grid-row-gap: 2.125rem;
margin-bottom: 16rem;
&:nth-child(2n + 1) {
.content {
grid-column: 1;
}
figure {
grid-column: 2;
}
}
&:nth-child(2n) {
.content {
grid-column: 2;
grid-row: 1;
}
}
}
.content {
h2 {
font-size: 2.125rem;
margin-bottom: 2rem;
+ p {
font-size: 1.25rem;
}
}
+ figure,
+ p {
display: flex;
flex-direction: column;
align-items: center;
img {
margin-top: 3.5rem;
}
.btn {
margin-top: 7rem;
}
}
}
.side-info {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
img {
margin-bottom: 1.5rem;
}
}
.profile-preview {
display: flex;
list-style: none;
margin-top: auto;
li + li {
margin-left: -2rem;
}
img {
width: 10rem;
border-radius: 50%;
border: 2px solid;
color: var(--color-white);
background-color: var(--color-white);
}
}
}
@media (max-width: 767.98px) {
.presentation {
article {
display: block;
margin-bottom: 4rem;
}
.content {
h2 {
font-size: 1.6rem;
+ p {
font-size: 1rem;
}
}
}
.side-info {
margin-top: 2rem;
img {
margin-bottom: 2.5rem;
}
}
}
}

16
src/scss/components/_search-bar.scss Normal file
View File

@@ -0,0 +1,16 @@
.search-bar {
display: flex;
align-items: center;
// justify-content: flex-end;
margin-top: 3rem;
label {
// flex-grow: 1;
}
input[type=search] {
width: auto;
margin: 0 0 0 1rem;
background-color: var(--color-light-gray);
}
}

54
src/scss/components/_site-foot.scss Normal file
View File

@@ -0,0 +1,54 @@
.site-foot {
background: var(--color-secondary);
color: var(--color-white);
&__inner {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 1.5rem;
grid-row-gap: 0;
padding: 4.5rem 0;
font-weight: 300;
h3 {
font-size: 1rem;
font-weight: 400;
margin-bottom: 1.5rem;
}
p {
margin-bottom: 1rem;
}
.socials {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
width: calc((24px + 1.5rem) * 4);
}
}
.footer-link {
color: var(--color-white);
font-weight: 600;
}
a {
&:hover {
text-decoration: none;
}
&:focus {
outline-color: var(--color-white);
}
}
}
@media (max-width: 575.98px) {
.site-foot {
&__inner {
display: block;
}
}
}

70
src/scss/components/_site-head.scss Normal file
View File

@@ -0,0 +1,70 @@
.site-head {
padding-top: 3rem;
padding-bottom: 1.5rem;
&__inner {
display: flex;
justify-content: space-between;
align-items: center;
}
&__site-name {
font-weight: 700;
text-decoration: none;
color: var(--color-text);
&:focus {
outline-color: var(--color-secondary);
}
+ .menu-toggle {
display: none;
}
}
}
@media (min-width: 768px) and (max-width: 1199.98px) {
.site-head {
&__inner {
display: block;
}
&__site-name {
display: inline-block;
margin: 0 auto;
}
}
}
@media (max-width: 767.98px) {
.site-head {
padding-top: 2rem;
&__inner {
display: flex;
flex-wrap: wrap;
}
&__site-name {
display: inline-block;
+ .menu-toggle {
display: inline-flex;
flex-direction: column;
align-items: center;
background-color: var(--color-white);
border: 0;
margin-left: auto;
padding-right: 0;
#icon-close {
display: none;
}
&:hover {
cursor: pointer;
}
}
}
}
}

16
src/scss/components/_skip-link.scss Normal file
View File

@@ -0,0 +1,16 @@
.skip-link:not(:focus) {
@extend %visually-hidden;
}
.skip-link:focus {
display: inline-block;
position: absolute;
top: 0;
left: 0;
padding: get-size(300) get-size(500) get-size('base') get-size(500);
background-color: var(--color-action-bg);
color: var(--color-action-text);
line-height: 1;
text-decoration: none;
font-weight: 700;
}

37
src/scss/components/_tags.scss Normal file
View File

@@ -0,0 +1,37 @@
.tag-list {
list-style: none;
.tag-item {
display: inline-block;
margin-bottom: .5rem;
}
.tag-item {
margin-right: 1rem;
}
}
.tag-item {
font-weight: 600;
padding: .5rem 1rem;
background-color: var(--color-light-gray);
a {
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
@media (max-width: 575.98px) {
.tag-list {
display: flex;
overflow-y: scroll;
}
.tag-item {
flex-shrink: 0;
}
}

22
src/scss/components/_video-player.scss Normal file
View File

@@ -0,0 +1,22 @@
.video-player {
position: relative;
padding-top: 56.25%;
@include media-query('md') {
.post & {
padding-top: 66%;
}
}
> iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.post & {
padding-top: 63%;
}
}