From e352b32d75d9ee1e4dc29c9570edbe89b16f92aa Mon Sep 17 00:00:00 2001
From: julientaq <julien@coko.foundation>
Date: Wed, 5 Jan 2022 14:53:13 +0100
Subject: [PATCH] fix circle size on team page
---
static/css/theme-coko/main.css | 797 +++++++++++++++++----------------
1 file changed, 421 insertions(+), 376 deletions(-)
diff --git a/static/css/theme-coko/main.css b/static/css/theme-coko/main.css
index 7ae7ecd..59c9460 100644
--- a/static/css/theme-coko/main.css
+++ b/static/css/theme-coko/main.css
@@ -1,7 +1,6 @@
@import url(../layout/one-column.css);
/* @import url('https://fonts.googleapis.com/css2?family=Inria+Sans:wght@300;700&family=Inria+Serif:ital,wght@0,300;0,700;1,300;1,700&display=swap'); */
-
/* Color per page */
.products h1,
.products h2,
@@ -20,7 +19,7 @@
.contact h3,
.contact h4,
.contact a {
- color: var(--color-secondary);
+ color: var(--color-secondary);
}
.home h1,
.home h2,
@@ -44,7 +43,7 @@
.articles h4,
.articles p.tags,
.articles a {
- color: var(--color-primary);
+ color: var(--color-primary);
}
.about h1,
.about h2,
@@ -56,13 +55,12 @@
.team h3,
.team h4,
.team a,
-.team p.tags{
- color: var(--color-trois);
+.team p.tags {
+ color: var(--color-trois);
}
-
.hideTag {
- display: none;
+ display: none;
}
/* General -------------------- */
@@ -78,352 +76,356 @@ p {
}
a {
- text-decoration: none;
- }
-a:hover {
- color: var(--color-gris);
- }
+ text-decoration: none;
+}
+a:hover {
+ color: var(--color-gris);
+}
- main p,
- main li {
- max-width: 70ch;
- line-height: 1.5;
- font-size: var(--font-size);
- font-weight: 400;
- }
+main p,
+main li {
+ max-width: 70ch;
+ line-height: 1.5;
+ font-size: var(--font-size);
+ font-weight: 400;
+}
-
-
/* Menu -------------------- */
- aside {
- position: sticky;
- background: rgb(255,255,255); }
- .home aside,
- .articles aside,
- .news aside,
- .blog-post aside {
- background: linear-gradient(6deg, rgba(255,255,255,1) 58%, rgba(150,208,206,1) 100%);
- filter: drop-shadow(700px -15px 15px #62C8C4);
- }
- .about aside,
- .team aside {
- background: linear-gradient(6deg, rgba(255,255,255,1) 58%, #BBA3C5 100%);
- filter: drop-shadow(700px -15px 15px var(--color-trois));
- }
- .services aside,
- .products aside,
- .contact aside {
- background: linear-gradient(6deg, rgba(255,255,255,1) 58%, #E39FBA 100%);
- filter: drop-shadow(700px -15px 15px var(--color-secondary));
- }
- .topbar {
- position: sticky;
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- align-items: center;
- /* flex-wrap: wrap; */
- z-index: 10000000;
- top: 0;
- padding: 1em 5vh;
- font-family: var(--font-interface);
- transition: background-color 1000ms;
- }
- .topbar a.logo.solito svg {
- max-width: 350px;
- padding-right: 1.5rem;
- }
- .topbar a.logo svg {
- max-width: 280px;
- padding-right: 1.5rem;
- }
- .topbar nav a.active {
- border-bottom: solid 2px var(--color-gris);
- }
- .topbar nav a:hover {
- color: var(--color-gris);
- }
-
- .menu-call {
- background-color: var(--color-gris);
- border-radius: 4px;
- color: white;
- padding: 5px 10px;
- text-decoration: none;
- position: absolute;
- right: 0;
- top: 110px;
- }
- .menu-call:hover {
- background-color: var(--color-primary);
- }
-
+aside {
+ position: sticky;
+ background: rgb(255, 255, 255);
+}
+.home aside,
+.articles aside,
+.news aside,
+.blog-post aside {
+ background: linear-gradient(
+ 6deg,
+ rgba(255, 255, 255, 1) 58%,
+ rgba(150, 208, 206, 1) 100%
+ );
+ filter: drop-shadow(700px -15px 15px #62c8c4);
+}
+.about aside,
+.team aside {
+ background: linear-gradient(6deg, rgba(255, 255, 255, 1) 58%, #bba3c5 100%);
+ filter: drop-shadow(700px -15px 15px var(--color-trois));
+}
+.services aside,
+.products aside,
+.contact aside {
+ background: linear-gradient(6deg, rgba(255, 255, 255, 1) 58%, #e39fba 100%);
+ filter: drop-shadow(700px -15px 15px var(--color-secondary));
+}
+.topbar {
+ position: sticky;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ /* flex-wrap: wrap; */
+ z-index: 10000000;
+ top: 0;
+ padding: 1em 5vh;
+ font-family: var(--font-interface);
+ transition: background-color 1000ms;
+}
+.topbar a.logo.solito svg {
+ max-width: 350px;
+ padding-right: 1.5rem;
+}
+.topbar a.logo svg {
+ max-width: 280px;
+ padding-right: 1.5rem;
+}
+.topbar nav a.active {
+ border-bottom: solid 2px var(--color-gris);
+}
+.topbar nav a:hover {
+ color: var(--color-gris);
+}
+.menu-call {
+ background-color: var(--color-gris);
+ border-radius: 4px;
+ color: white;
+ padding: 5px 10px;
+ text-decoration: none;
+ position: absolute;
+ right: 0;
+ top: 110px;
+}
+.menu-call:hover {
+ background-color: var(--color-primary);
+}
/* Headings -------------------- */
- h1,
- h2,
- h3,
- h4,
- h5,
- h6 {
- font-family: var(--font-title);
- font-weight: 300;
- scroll-margin-top: 2em;
- }
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ font-family: var(--font-title);
+ font-weight: 300;
+ scroll-margin-top: 2em;
+}
- h1 {
- margin-top: 2em;
- font-size: 3.2em;
- line-height: 1.2;
- }
- section.intro h2 {
- max-width: 65ch;
- }
- h2 {
- font-size: 1.7em;
- margin-top: 0.5em;
- margin-bottom: 1em;
- }
- h3 {
- font-size: 1.1em;
- font-weight: 700;
- }
- h4 {
- font-size: 1em;
- }
+h1 {
+ margin-top: 2em;
+ font-size: 3.2em;
+ line-height: 1.2;
+}
+section.intro h2 {
+ max-width: 65ch;
+}
+h2 {
+ font-size: 1.7em;
+ margin-top: 0.5em;
+ margin-bottom: 1em;
+}
+h3 {
+ font-size: 1.1em;
+ font-weight: 700;
+}
+h4 {
+ font-size: 1em;
+}
- /* Layout ----------------------*/
- main {
- display: grid;
- grid-template-columns: repeat(4, 1fr);
- grid-gap: 10px;
- grid-auto-rows: minmax(100px, auto);
- margin-bottom: 6em;
- }
- header {
- margin-bottom: 7em;
- grid-column: 1/end;
- }
- main h2 {
- grid-column-end: span 2;
- }
+/* Layout ----------------------*/
+main {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ grid-gap: 10px;
+ grid-auto-rows: minmax(100px, auto);
+ margin-bottom: 6em;
+}
+header {
+ margin-bottom: 7em;
+ grid-column: 1 / end;
+}
+main h2 {
+ grid-column-end: span 2;
+}
- .grid {
- grid-column: 1/end;
- display: grid;
- grid-template-columns: repeat(4, 1fr);
- grid-gap: 40px;
- row-gap: 100px;
- grid-auto-rows: minmax(100px, auto);
- margin-top: 5em;
- }
- .grid-item.wide{
- grid-column: span 2;;
- }
- .posts figure {
- height: 250px;
- margin: 1em auto;
- object-fit: cover;
- width: 100%;
- }
- .posts figure img {
- height: 100%;
- margin: auto;
- }
+.grid {
+ grid-column: 1 / end;
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ grid-gap: 40px;
+ row-gap: 100px;
+ grid-auto-rows: minmax(100px, auto);
+ margin-top: 5em;
+}
+.grid-item.wide {
+ grid-column: span 2;
+}
+.posts figure {
+ height: 250px;
+ margin: 1em auto;
+ object-fit: cover;
+ width: 100%;
+}
+.posts figure img {
+ height: 100%;
+ margin: auto;
+}
- article,
- .paginator {
- grid-column: 1/end;
- display: grid;
- grid-template-columns: repeat(4, 1fr);
- }
- article h2 {
- margin-bottom: 0.5em;
- }
- article h2:not(:first-of-type),
- article h3 {
- margin-top: 2em !important;
- }
- article p,
- article ul,
- article blockquote,
- article h3,
- article h4 {
- grid-column: 2/4;
- padding: 0.5em 10px ;
- margin-top: 0px;
- border-left: 1px solid var(--color-gris);
- }
- article figure,
- article video {
- grid-column: 1/end;
- margin: auto;
- }
- article video {
- width:100%;
- }
- article blockquote p {
- border-left: 0px;
- margin-left: 15px;
- }
+article,
+.paginator {
+ grid-column: 1 / end;
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+}
+article h2 {
+ margin-bottom: 0.5em;
+}
+article h2:not(:first-of-type),
+article h3 {
+ margin-top: 2em !important;
+}
+article p,
+article ul,
+article blockquote,
+article h3,
+article h4 {
+ grid-column: 2/4;
+ padding: 0.5em 10px;
+ margin-top: 0px;
+ border-left: 1px solid var(--color-gris);
+}
+article figure,
+article video {
+ grid-column: 1 / end;
+ margin: auto;
+}
+article video {
+ width: 100%;
+}
+article blockquote p {
+ border-left: 0px;
+ margin-left: 15px;
+}
- article li {
- margin-left: 2em;
- }
- article ul li ul {
- border-left: 0px;
- }
- p.meta {
- color: gray;
- font-size: 0.9em;
- }
- .paginator {
- margin-top: 6em;
- grid-column: 1/end;
- display: grid;
- }
- .paginator h3 {
- margin-top: 1em;
- text-align: center;
- }
- .paginator figure img {
- max-height: 200px;
- margin: auto;
- }
+article li {
+ margin-left: 2em;
+}
+article ul li ul {
+ border-left: 0px;
+}
+p.meta {
+ color: gray;
+ font-size: 0.9em;
+}
+.paginator {
+ margin-top: 6em;
+ grid-column: 1 / end;
+ display: grid;
+}
+.paginator h3 {
+ margin-top: 1em;
+ text-align: center;
+}
+.paginator figure img {
+ max-height: 200px;
+ margin: auto;
+}
- /* Layout per page----------------------- */
- /* HOMEPAGE--------------------*/
- .home main section {
- grid-column: 1/end;
- }
- h2.section-title {
- grid-column: span 4;
- font-variant: small-caps;
- border-bottom: 1px solid var(--color-primary);
- }
- .home section.section-blog {
- display: grid;
- grid-template-columns: repeat(2, 1fr);
- column-gap: 40px;
- margin-bottom: 3em;
- }
- .home section.section-blog .posts img,
- .news .grid-item img {
- height: 250px;
- margin: 1em auto;
- object-fit: cover;
- width: 100%;
- }
- .home .cokoverse img{
- object-fit: cover;
- width: 100%;
- max-height: 500px;
- }
- /* NEWS & ARTICLES ------------------ */
- .news .grid {
- margin-top: 0px;
- }
- .news .grid-item,
- .articles .grid-item {
- border-top: 1px solid var(--color-primary);
- padding-top: 10px;
+/* Layout per page----------------------- */
+/* HOMEPAGE--------------------*/
+.home main section {
+ grid-column: 1 / end;
+}
+h2.section-title {
+ grid-column: span 4;
+ font-variant: small-caps;
+ border-bottom: 1px solid var(--color-primary);
+}
+.home section.section-blog {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ column-gap: 40px;
+ margin-bottom: 3em;
+}
+.home section.section-blog .posts img,
+.news .grid-item img {
+ height: 250px;
+ margin: 1em auto;
+ object-fit: cover;
+ width: 100%;
+}
+.home .cokoverse img {
+ object-fit: cover;
+ width: 100%;
+ max-height: 500px;
+}
+/* NEWS & ARTICLES ------------------ */
+.news .grid {
+ margin-top: 0px;
+}
+.news .grid-item,
+.articles .grid-item {
+ border-top: 1px solid var(--color-primary);
+ padding-top: 10px;
+}
+.articles main {
+ column-gap: 40px;
+}
+.articles .grid-item,
+.paginator .grid-item {
+ grid-column: span 2;
+}
+/* PRODUCT --------------------*/
+ul.filter {
+ grid-column: 1 / end;
+ display: flex;
+ justify-self: start;
+ flex-direction: row;
+ list-style: none;
+ justify-content: space-between;
+ align-items: center;
+ column-gap: 15px;
+}
+ul.filter:before {
+ content: "show by:";
+}
+ul.filter button,
+.products p.tags,
+ul.filter:before {
+ font-style: normal;
+ color: var(--color-gris);
+ font-variant: small-caps;
+}
+ul.filter button:hover {
+ color: var(--color-secondary);
+}
+.products .grid {
+ margin-top: -1em;
+}
+.products .grid-item {
+ border-top: 1px solid var(--color-secondary);
+}
+.products .card {
+ background-color: var(--color-secondary-fade);
+ padding: 10px;
+}
+.products figure {
+ height: 150px;
+ margin: 1em;
+ display: flex;
+}
+.products img {
+ max-height: 140px;
+ width: auto;
+ margin: auto;
+ vertical-align: baseline;
}
- .articles main {
- column-gap: 40px;
- }
- .articles .grid-item,
- .paginator .grid-item {
- grid-column: span 2;
- }
- /* PRODUCT --------------------*/
- ul.filter {
- grid-column: 1/end;
- display: flex;
- justify-self: start;
- flex-direction: row;
- list-style: none;
- justify-content: space-between;
- align-items: center;
- column-gap: 15px;
- }
- ul.filter:before {
- content: "show by:"
- }
- ul.filter button,
- .products p.tags,
- ul.filter:before {
- font-style: normal;
- color: var(--color-gris);
- font-variant: small-caps;
- }
- ul.filter button:hover {
- color: var(--color-secondary);
- }
- .products .grid {
- margin-top: -1em;
- }
- .products .grid-item {
- border-top: 1px solid var(--color-secondary);
- }
- .products .card {
- background-color: var(--color-secondary-fade);
- padding: 10px;
- }
- .products figure {
- height: 150px;
- margin: 1em;
- display: flex;
- }
- .products img {
- max-height: 140px;
- width: auto;
- margin: auto;
- vertical-align: baseline;
- }
+/* SERVICES ------------------ */
+img.coko-partner {
+ grid-column-end: span 3;
+}
- /* SERVICES ------------------ */
- img.coko-partner {
- grid-column-end: span 3;
- }
+/* TEAM --------------------*/
+.team .grid figure {
+ width: 150px;
+ height: 150px;
+ border-radius: 50%;
+ max-width: 150px;
+ margin-bottom: 1em;
+ filter: grayscale(0.8) brightness(1.1);
+ overflow: hidden;
+}
+.team .grid img {
+ width: 100%;
+ height: auto;
+}
+img.team-map {
+ grid-column-end: span 2;
+}
- /* TEAM --------------------*/
- .team .grid img {
- border-radius: 50%;
- max-width: 150px;
- height: auto;
- margin: auto;
- margin-bottom: 1em;
- filter: grayscale(0.8) brightness(1.1);
- }
- img.team-map {
- grid-column-end: span 2;
- }
-
-
- /* Footer ----------------------- */
-
- .footer {
- background-color: var(--color-primary);
- bottom: 0;
- margin-top: 10em;
- }
- footer {
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- gap: 10%;
- align-items: center;
- color: white;
- font-family: var(--font-title);
- max-width: 1300px;
- }
+/* Footer ----------------------- */
+
+.footer {
+ background-color: var(--color-primary);
+ bottom: 0;
+ margin-top: 10em;
+}
+footer {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ gap: 10%;
+ align-items: center;
+ color: white;
+ font-family: var(--font-title);
+ max-width: 1300px;
+}
footer section.logo svg,
footer section.logo svg .flower,
footer section.logo svg .coko-text {
- fill: white ;
+ fill: white;
max-width: 250px;
}
footer section.logo {
@@ -464,17 +466,18 @@ footer section.contact form {
input::placeholder {
color: white;
}
-input[type=text] {
+input[type="text"] {
width: 50%;
float: left;
padding-right: 5px;
}
-input[type=submit],
-input[type=email] {
+input[type="submit"],
+input[type="email"] {
width: 100%;
}
-input[type=text], input[type=submit],
-input[type=email] {
+input[type="text"],
+input[type="submit"],
+input[type="email"] {
padding: 12px;
margin: 8px 0;
display: inline-block;
@@ -485,22 +488,21 @@ input[type=email] {
box-sizing: border-box;
background-color: var(--color-primary);
}
-input[type=checkbox] {
+input[type="checkbox"] {
margin-top: 16px;
}
-input[type=submit] {
+input[type="submit"] {
color: white;
border: 1px solid white;
background-color: initial;
}
-input[type=submit]:hover {
+input[type="submit"]:hover {
background-color: var(--color-trois);
color: white;
}
-
footer section.infos {
-text-align: center;
+ text-align: center;
}
footer section.infos .adress {
margin-bottom: 10px;
@@ -514,42 +516,85 @@ footer section.infos a:hover {
color: var(--color-gris);
}
- /* Responsif ----------------------- */
+/* Responsif ----------------------- */
- @media screen and (max-width: 1000px) {
- .grid { grid-template-columns: repeat(3, 1fr); }
- main h2 { grid-column: 1/end; }
- article p, article ul, article h3, article h4 { grid-column: 2/end;}
- img.team-map { grid-column: 1/end; }
- footer section.infos {margin-top: 2em;}
+@media screen and (max-width: 1000px) {
+ .grid {
+ grid-template-columns: repeat(3, 1fr);
+ }
+ main h2 {
+ grid-column: 1 / end;
+ }
+ article p,
+ article ul,
+ article h3,
+ article h4 {
+ grid-column: 2 / end;
+ }
+ img.team-map {
+ grid-column: 1 / end;
+ }
+ footer section.infos {
+ margin-top: 2em;
+ }
+}
+@media screen and (max-width: 800px) {
+ header {
+ margin-bottom: 2em;
+ }
+ .grid {
+ grid-template-columns: repeat(2, 1fr);
+ }
+ .home section.section-blog .posts,
+ .articles .grid-item {
+ grid-column: 1 / end;
+ margin-bottom: 2em;
+ }
+}
+@media screen and (max-width: 768px) {
+ .topbar {
+ flex-direction: column;
+ }
+ .topbar nav ul li {
+ border-bottom: 1px solid var(--color-primary);
+ width: 100%;
}
- @media screen and (max-width: 800px) {
- header { margin-bottom: 2em;}
- .grid { grid-template-columns: repeat(2, 1fr); }
- .home section.section-blog .posts, .articles .grid-item { grid-column: 1/end; margin-bottom: 2em;}
+}
+@media screen and (max-width: 650px) {
+ .paginator .grid-item {
+ grid-column: 1 / end;
+ margin-bottom: 2em;
}
- @media screen and (max-width: 768px) {
- .topbar { flex-direction: column;}
- .topbar nav ul li { border-bottom: 1px solid var(--color-primary); width: 100%; }
+ footer {
+ flex-direction: column;
}
- @media screen and (max-width: 650px) {
- .paginator .grid-item {grid-column: 1/end; margin-bottom: 2em;}
- footer {flex-direction: column;}
- footer section {width: 100%; text-align: center; }
- footer section.contact {margin-top: 2.5em;}
+ footer section {
+ width: 100%;
+ text-align: center;
+ }
+ footer section.contact {
+ margin-top: 2.5em;
}
- @media screen and (max-width: 500px) {
- .grid { display: block;
- }
- .grid-item { margin-top: 4em;
- }
- ul.filter {
- flex-direction: column;
- margin: auto;
- }
- article p, article ul, article h3, article h4 { grid-column: 1/end;
- }
- img.coko-partner { grid-column-end: span 4;
- }
+}
+@media screen and (max-width: 500px) {
+ .grid {
+ display: block;
+ }
+ .grid-item {
+ margin-top: 4em;
+ }
+ ul.filter {
+ flex-direction: column;
+ margin: auto;
+ }
+ article p,
+ article ul,
+ article h3,
+ article h4 {
+ grid-column: 1 / end;
+ }
+ img.coko-partner {
+ grid-column-end: span 4;
+ }
+}
- }
\ No newline at end of file
--
GitLab