polynom.me/shared-assets
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: Move more from the website into here

Browse Source
This commit is contained in:
PapaTutuWawa 2022-05-31 20:17:16 +02:00
parent 4c74f96579
commit 31dee4654f
1 changed files with 78 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
assets/css/main.css
View File

@ -3,21 +3,21 @@
font-family: roboto; font-family: roboto;
src: url(/fonts/Roboto-Regular.ttf) src: url(/fonts/Roboto-Regular.ttf)
} }
@font-face { @font-face {
font-family: overpass; font-family: overpass;
src: url(/fonts/Overpass-Regular.ttf) src: url(/fonts/Overpass-Regular.ttf)
} }
/* Element styling */ /* Consistent background and text color */
html { html {
background-color: #212121; background-color: #212121;
color: #ffffff; color: #ffffff;
font-family: Overpass; font-family: Overpass;
} }
footer { /* Keep the paddings consistent */
width: 100%; body {
padding: 5px;
} }
h1, h2, h3 { h1, h2, h3 {
@ -29,55 +29,38 @@ a {
color: white; color: white;
} }
.page-title { /* General fixes */
color: #9b59b6;
}
ul {
margin-top: 2px;
}
/* Layouting */
* { * {
/* To fix sizing issues */ /* To fix sizing issues */
box-sizing: border-box; box-sizing: border-box;
} }
.container { /* Horizontal flow using flexbox */
display: flex;
justify-content: center;
width: 100%;
}
.horizontal { .horizontal {
display: flex;
flex-direction: row; flex-direction: row;
} }
/* Horizontally centered using flexbox */
.horizontal-center { .horizontal-center {
display: flex; display: flex;
justify-content: center; justify-content: center;
width: 100%;
} }
/* Vertical flow using flexbox */
.vertical { .vertical {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100% !important; /*width: 100% !important;*/
} }
.subbar-link { /* Vertically center using flexbox */
padding: 5px; .vertical-center {
} display: flex;
flex-direction: column;
justify-content: center;
.title-sub { height: 100%;
margin-top: 0px;
margin-bottom: 10px;
color: white;
}
.title-sub-subbar {
margin-top: -20px;
} }
/* Text styling */ /* Text styling */
@ -86,6 +69,7 @@ ul {
padding: 4px; padding: 4px;
} }
/* Show a white border at the left side to indicate a quote */
.quote { .quote {
border-left: 2px; border-left: 2px;
border-left-style: solid; border-left-style: solid;
@ -93,6 +77,7 @@ ul {
padding-left: 4px; padding-left: 4px;
} }
/* Useful for warning the user of something */
.warning { .warning {
border-left: 2px; border-left: 2px;
border-left-style: solid; border-left-style: solid;
@ -101,3 +86,63 @@ ul {
color: #f1c40f; 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;
}
}