vmems-website/themes/vmems-theme/static/css/style.css

298 lines
6.2 KiB
CSS
Raw Normal View History

:root{
--primary-color:blue;
--secondary-color:white;
--primary-color-contrast: white;
--secondary-color-darkest: grey; /* the "darkest" and "darklight" variables are*/
--primary-color-darkest: darkblue;/* for the elements that can't have filter*/
--secondary-color-darklight: lightgrey;
--primary-color-darklight: rgb(0,0,200);
--primary-color-3 : rgb(0,0,150);
--primary-color-4: rgb(0,0,255);
--tertiary-really-dark-color: rgb(50,50,50);
--tertiary-medium-dark-color:rgb(100,100,100);
--default-text-color:black;
}
body{
margin:0;
height:100vh;
width:100%;
display:flex;
flex-direction:column;
}
.list-style-none{
list-style:none;
justify-content:space-around;
}
header.navbar{
position:relative;
height:70px;
display: flex;
margin:0px;
flex-direction:row;
box-shadow: 0 4px 2px -2px gray;
}
header.navbar .navbar-logo-container {
padding-left:5px;
height:70px;
}
header.navbar .navbar-logo {
height:70px;
}
header.navbar .navbar-list{
position: absolute;
padding:0;
padding-right: 15px;
right:0px;
height: calc(100%);
display: flex;
flex-direction: row;
margin: 0px;
list-style-type: none;
justify-content: center;
align-items: center;
}
header.navbar .navbar-list-item{
color:var(--primary-color);
height:100%;
line-height:70px;
vertical-align:middle;
text-align:center;
padding: 0px 10px;
}
header.navbar .navbar-list-item *{
color:var(--primary-color);
}
header.navbar .navbar-list-item a{
text-decoration:none;
}
header.navbar .navbar-list-item:hover a{
text-decoration:underline;
}
header.navbar .navbar-list-item:hover{
background-color:var(--primary-color-darkest);
color:var(--secondary-color);
}
header.navbar .navbar-list-item.active{
background-color:var(--primary-color-darklight);
color:var(--secondary-color);
}
header.navbar .navbar-list-item:hover *, header.navbar .navbar-list-item.active *{
color:var(--secondary-color);
}
@media (max-width: 700px){
header.navbar #navbar-list-toggler-label{
position:absolute;
right:5px;
height: 100%;
width: 70px;
font-size:70px;
text-align:center;
line-height:70px;
vertical-align:middle;
}
header.navbar .navbar-list-item{
height:unset;
width:100%;
padding: 10px 0px;
}
header.navbar #navbar-list-toggler:checked ~ .navbar-list{
display:flex !important;
z-index:5;
flex-direction:column;
position:fixed;
bottom:0px;
left:0px;
width:100vw;
align-content:center;
justify-content:center;
backdrop-filter:blur(10px);
background-color: rgba(50,50,50,0.5);
height: calc(100vh - 70px);
}
header.navbar #navbar-list-toggler:checked ~ .navbar-list .navbar-list-item{}
}
main.main{
flex: 2 0;
}
main.main h1, main.main h2, main.main h3, main.main h4, main.main h5, main.main h6, main.main p{
padding: 0px 20px;
color: var(--primary-color-darkest);
}
main.main h1, main.main h2, main.main h3{
text-align:center;
padding:0px;
width:calc(100%);
}
main.main h1{
font-weight:500;
text-decoration:underline;
}
main.main h2{
}
footer.footer{
justify-content:space-around;
background-color:var(--tertiary-really-dark-color);
color:var(--secondary-color);
display:flex;
flex-direction:column;
}
footer.footer .row{
padding:20px 0px;
display:flex;
flex-direction:row;
justify-content:space-around;
text-align:center;
}
footer.footer .row.top{}
footer.footer .row.bottom{}
footer.footer .col {
display:flex;
flex-direction:column;
color:var(--secondary-color);
}
footer.footer .col li {
padding:10px;
color:var(--secondary-color);
}
footer.footer .col a {
color:var(--secondary-color);
}
footer.footer .col.left{}
footer.footer .col.middle{}
footer.footer .col.right{}
.articles-list{
display:flex;
flex-direction:row;
flex-wrap:wrap;
}
.articles-list .article-item{
display:flex;
color: var(--primary-color);
flex-direction:column;
width:300px;
height:300px;
justify-content:center;
align-items:center;
border:2px solid;
}
.articles-list .article-item .article-item-main{
display:flex;
color:var(--primary-color);
flex-direction:column;
width:100%;
justify-content:center;
align-items:center;
text-align:center;
}
.articles-list .article-item .article-item-main *{
text-align:center;
}
.articles-list .article-item .article-item-main .baneer{
border-radius:100%;
height:120px!important;
border:2px solid var(--primary-color-darkest);
width:120px!important;
}
.articles-list .article-item .infos{}
.articles-list .article-item .infos .authors{}
.articles-list .article-item .infos .authors .author{color:var(--primary-color-darkest);font-weight:600}
.blogarticle{
display:flex;
flex-direction:column;
}
.blogarticle .blogarticlehead{
display:flex;
flex-direction:row;
}
.blogarticle .blogarticletitle{
flex:2 0;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
/*font-weight:700;
font-size:200%;
text-decoration:underline;
color:var(--primary-color);*/
}
.blogarticle .blogarticleinfos {
display:flex;
flex-direction:row;
background-color:var(--tertiary-medium-dark-color);
color:var(--primary-color-darklight);
justify-content: space-around;
align-items: center;
padding: 20px;
width:fit-content;
}
.blogarticle .blogarticleinfos .categories {}
.blogarticle .blogarticleinfos .category {
background-color:var(--primary-color);
color:var(--primary-color-contrast);
display:inline-block;
padding:5px;
}
.blogarticle .blogarticleinfos .tags {}
.blogarticle .blogarticleinfos .tag {
background-color:var(--primary-color);
color:var(--primary-color-contrast);
display:inline-block;
padding:5px;
}
.blogarticle .blogarticleinfos .authors{}
.blogarticle .blogarticleinfos .authors .author{ color:var(--primary-color-4); font-weight:500; text-decoration:underline;}
.blogarticle .blogarticleinfos .date{}
.blogarticle .blogarticlecontent{padding: 10px 30px;}
.blogarticle .blogarticlecomments{}
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
background: var(--secondary-color-darklight);
}
/* Handle */
::-webkit-scrollbar-thumb {
background: var(--primary-color-darklight);
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: var(--primary-color-darkest);
}
@media (max-width:700px){
*.desktop-only-element{
display:none !important;
}
}
@media (min-width: 700px){
*.mobile-only-element{
display:none !important;
}
}