Skip to content
Snippets Groups Projects
Commit e352b32d authored by julientaq's avatar julientaq
Browse files

fix circle size on team page

parent cbfd689a
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
static/css/theme-coko/main.css
+ 421
− 376
View file @ e352b32d
@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
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment