@ -1,98 +1,58 @@
/ *
fonts
* /
@ font-face { font-family : NotoSans ; src : url ( . . / fonts / noto_sans . ttf ) ; }
@ font-face { font-family : Raleway ; font-weight : 200 ; src : url ( . . / fonts / raleway_200 . ttf ) ; }
@ font-face { font-family : Raleway ; font-weight : 300 ; src : url ( . . / fonts / raleway_300 . ttf ) ; }
/* Global */
body {
margin : 0 ;
background : # ffffff ;
font-family : sans-serif ;
}
nav a {
color : # ffffff ; opacity : . 7 ;
text-decoration : none ;
transition : opacity . 15s ease ;
}
nav a : hover ,
nav a : focus {
opacity : 1 ;
}
/* Whole page */
. light-hidden {
display : none ;
}
. container {
margin-left : 0 ;
}
/* Menu */
# spacer-menu {
height : 60px ;
}
# light-menu {
list-style : none ;
display : flex ; flex-direction : row ; align-items : center ;
width : 100 % ; height : 40px ;
width : 100 % ; height : 60px ;
overflow-x : auto ; overflow-y : hidden ;
margin : 0 ; padding : 0 ;
text-indent : 0 ;
background : # 22292c ; box-shadow : 0 0 2px rgba ( 0 , 0 , 0 , 0 . 3 ) ;
}
# logo {
position : relative ; display : block ;
height : 100 % ; opacity : 1 ;
background : -moz-linear-gradient ( left , # bf1c11 , # ba1203 ) ;
background : -webkit-linear-gradient ( left , # bf1c11 , # ba1203 ) ;
}
/ * # logo :: after {
position : absolute ; left : 100 % ; top : 50 % ;
height : 0 ; width : 0 ;
border : solid transparent ; content : " " ;
border-left-color : # ba1203 ;
border-width : 4px ;
margin-top : -4px ;
} * /
width : auto ; height : 100 % ; margin-bottom : 0 ;
}
# logo img {
width : 40px ;
margin : 0 ; padding : 0 ;
width : 60px ;
margin-bottom : -4 . 5px ;
filter : drop-shadow ( 0 0 2px rgba ( 0 , 0 , 0 , . 0 ) ) ;
transition : filter . 15s ease ;
}
# logo : hover img ,
# logo : focus img {
filter : drop-shadow ( 0 0 2px rgba ( 0 , 0 , 0 , . 7 ) ) ;
}
# light-menu > li {
# light-menu li {
display : flex ; flex-direction : column ;
align-items : center ; flex-grow : 1 ;
height : 100 % ;
text-align : center ;
font-family : Raleway ; font-size : 13px ;
color : # ffffff ;
}
# light-menu li {
padding : 0 2px ;
}
# light-menu li > a {
display : flex ; flex-direction : column ;
align-items : center ; justify-content : center ;
width : 100 % ; height : 100 % ;
cursor : pointer ;
}
# light-menu li > a : hover {
text-decoration : none ;
}
# light-menu li > a > svg {
width : 20px ;
}
# light-menu li > a > div {
display : none ;
display : block ;
font-size : 12px ;
}
# light-menu li > a > svg {
display : block ; width : 20px ; flex-shrink : 0 ;
margin : 0 auto 5px auto ;
# light-menu li : not ( . opened ) > a : hover :: after ,
# light-menu li : not ( . opened ) > a : focus :: after {
display : none ;
}
# light-menu li span [ notifications ] : not ( [ notifications = "0" ] ) :: before {
content : attr ( notifications ) ;
display : inline-block ; margin-right : 6px ;
@ -108,18 +68,17 @@ nav a:focus {
font-family : NotoSans ; font-size : 12px ;
background : # 22292c ; box-shadow : 0 0 5px rgba ( 0 , 0 , 0 , 0 . 3 ) ;
transition : . 1s ease ;
position : unset ;
left : unset ;
}
# menu . opened {
height : 100 % ;
overflow-y : auto ;
left : unset ;
}
# menu > div {
width : 100 % ;
display : none ;
}
# menu > div . opened {
display : block ;
}
# menu h2 {
margin : 10px 0 10px 40px ;
@ -175,15 +134,15 @@ nav a:focus {
margin : 5px 0 ;
}
@ media all and ( min -width : 550px ) {
# light-menu {
height : 6 0px;
@ media all and ( max -width : 550px ) {
# light-menu , # spacer-menu {
height : 4 0px;
}
# logo img {
width : 6 0px;
width : 4 0px;
}
# light-menu li > a > div {
display : block ;
display : none ;
}
}
@ -193,9 +152,6 @@ nav a:focus {
font-size : 14px ;
background : # e8e8e8 ; transition : background . 15s ease ;
}
# menu form input : focus {
background : # ffffff ;
}
# menu form input : first-child {
margin-bottom : 0 ; border-bottom : none ;
border-top-left-radius : 5px ;
@ -222,73 +178,25 @@ nav a:focus {
/* Header */
header {
padding : 10px 10px 0px 10px ;
background : # f8f8fa ; border-bottom : 1px solid # d0d0d0 ;
}
header svg {
width : 24px ; height : 24px ; vertical-align : middle ;
transition : . 15s ease ;
}
header a : hover > svg , header a : focus > svg {
filter : brightness ( . 5 ) ;
padding : 0 8px ;
}
header input [ type = "search" ] {
width : 100 % ;
border : 0 ; border-radius : 1px ;
font-family : "Segoe UI" , Helvetica , "Droid Sans" , Arial , sans-serif ;
box-shadow : 0 0 1px rgba ( 0 , 0 , 0 , . 4 ) ; transition : . 15s ease ;
}
/* Homepage */
# spotlight {
display : flex ;
align-items : center ; justify-content : space-around ;
}
# spotlight a {
padding : 5px 10px ; margin : 5px 0 ;
color : # 727272 ; font-size : 14px ;
/*border-bottom: 2px solid rgba(93, 123, 141, .5);*/
transition : border . 15s ease ;
text-decoration : none ;
}
# spotlight a : hover , header # spotlight a : focus {
color : # 404040 ;
# shoutbox {
display : none ;
}
/* Homepage */
section {
margin : 10px ;
}
section h1 {
margin : 10px 0 ;
border-bottom : 1px solid # a0a0a0 ;
font-family : Raleway ; font-size : 20px ;
font-weight : 200 ; color : # 242424 ;
}
section * {
transition : . 15s ease ;
}
. home-title {
margin : 20px 0 ; padding : 10px ;
background : # bf1c11 ; box-shadow : 0 2px 2px rgba ( 0 , 0 , 0 , . 3 ) ;
border-top : 10px solid # ab170c ;
}
. home-title h1 {
margin : 0 ;
color : # ffffff ; border-color : # ffffff ;
padding : 10px ;
}
. home-title p {
margin-bottom : 0 ; text-align : justify ;
color : # ffffff ; font-size : 14px ;
}
. home-title a {
color : inherit ; text-decoration : underline ;
}
# shoutbox {
display : none ;
font-size : 14px ;
}
. home-pinned-content {
margin-top : 30px ;
}
@ -308,20 +216,18 @@ section * {
flex-grow : 1 ; margin-left : 10px ;
}
. home-pinned-content h2 {
margin : 0 ;
font-family : Raleway ; font-size : 18px ;
font-weight : 400 ; color : # 242424 ;
margin : 0 ; color : # 242424 ;
text-decoration : underline ;
}
. home-pinned-content span {
color : # 000000 ; font-size : 14px ;
}
. home-articles > div {
margin-top : 30px ;
}
. home-articles article {
margin-bottom : 15px ;
display : flex ; align-items : center ;
}
. home-articles article > img {
flex-shrink : 0 ; width : 128px ; height : 64px ;
@ -329,20 +235,11 @@ section * {
. home-articles article > div {
margin-left : 5px ;
}
. home-articles h1 {
display : flex ; justify-content : space-between ; align-items : center ;
}
. home-articles h1 > a {
font-size : 13px ; color : # 666666 ;
}
. home-articles h3 {
margin : 0 ;
color : # 424242 ; font-weight : normal ;
}
. home-articles p {
margin : 5px 0 ;
text-align : justify ;
color : # 808080 ; font-size : 14px ;
font-size : 14px ;
}
@ -351,16 +248,3 @@ section * {
. alert {
display : none ;
}
/* Footer */
footer {
margin : 20px 10 % 5px 10 % ; padding : 10px 0 ;
text-align : center ; font-size : 11px ; font-style : italic ;
color : # a0a0a0 ;
border-top : 1px solid rgba ( 0 , 0 , 0 , . 1 ) ;
}
footer p {
margin : 3px 0 ;
}