shared-assets/assets/css/main.css

149 lines
2.5 KiB
CSS
Raw Normal View History

2020-05-29 16:13:08 +00:00
/* Fonts */
@font-face {
font-family: roboto;
2020-09-21 20:23:46 +00:00
src: url(/fonts/Roboto-Regular.ttf)
2020-05-29 16:13:08 +00:00
}
@font-face {
font-family: overpass;
2020-09-22 15:34:54 +00:00
src: url(/fonts/Overpass-Regular.ttf)
2020-05-29 16:13:08 +00:00
}
/* Consistent background and text color */
2020-05-29 16:13:08 +00:00
html {
background-color: #212121;
color: #ffffff;
font-family: Overpass;
}
/* Keep the paddings consistent */
body {
padding: 5px;
2020-05-29 16:13:08 +00:00
}
h1, h2, h3 {
font-family: Roboto;
margin-bottom: 2px;
}
a {
color: white;
}
/* General fixes */
2020-09-23 15:07:38 +00:00
* {
/* To fix sizing issues */
box-sizing: border-box;
}
/* Horizontal flow using flexbox */
2020-05-29 16:13:08 +00:00
.horizontal {
display: flex;
2020-05-29 16:13:08 +00:00
flex-direction: row;
}
/* Horizontally centered using flexbox */
2020-09-22 15:34:54 +00:00
.horizontal-center {
display: flex;
justify-content: center;
}
/* Vertical flow using flexbox */
2020-05-29 16:13:08 +00:00
.vertical {
display: flex;
flex-direction: column;
/*width: 100% !important;*/
2020-05-29 16:13:08 +00:00
}
/* Vertically center using flexbox */
.vertical-center {
display: flex;
flex-direction: column;
justify-content: center;
2020-05-29 16:13:08 +00:00
height: 100%;
2020-05-29 16:13:08 +00:00
}
/* Text styling */
.highlight {
background-color: #373737;
padding: 4px;
}
/* Show a white border at the left side to indicate a quote */
2020-05-29 16:13:08 +00:00
.quote {
border-left: 2px;
border-left-style: solid;
border-color: gray;
padding-left: 4px;
}
2020-09-23 15:07:38 +00:00
/* Useful for warning the user of something */
2020-09-23 15:07:38 +00:00
.warning {
border-left: 2px;
border-left-style: solid;
border-color: gray;
padding-left: 4px;
color: #f1c40f;
}
/* Useful for the footer shown at the bottom of the page */
.footer {
width: 100%;
margin-top: 30px;
}
/* Used a big <img /> showing my avatar */
.avatar {
width: 200px;
height: 200px;
border-radius: 10px;
margin-right: 30px;
}
/* Keep entire site at a reasonable width on wide displays
* but let it stretch all the way on small displays (See media query).
*/
.header {
width: 42%;
}
/* Display the links below the header in a row instead of below each other. */
#header-links ul {
list-style: none;
padding-left: 0px;
margin-bottom: 0px;
margin-top: 0px;
}
#header-links li {
display: inline;
font-size: large;
margin-left: 20px;
}
#header-links li:first-child {
margin-left: 0px;
}
/* Title font for the page */
.name-title {
font-size: xxx-large;
}
/* Small screen adjustments */
@media screen and (max-width: 720px) {
.header {
width: 100%;
}
.name-title {
font-size: x-large;
}
.avatar {
width: 100px;
height: 100px;
margin-right: 10px;
}
}