298 lines
6.2 KiB
CSS
298 lines
6.2 KiB
CSS
: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;
|
|
}
|
|
}
|