Upload website
This commit is contained in:
273
dist/css/style.css
vendored
Normal file
273
dist/css/style.css
vendored
Normal file
@@ -0,0 +1,273 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
|
||||
@import url('/css/nav.css');
|
||||
@import url('/css/colors.css');
|
||||
@import url('/css/footer.css');
|
||||
@import url('/css/analytics.css');
|
||||
|
||||
/* Color Theme */
|
||||
:root,
|
||||
:root.light {
|
||||
--color-text-primary: black;
|
||||
--color-text-accent: #303030;
|
||||
--color-link: #1e24a1ff;
|
||||
--color-background-primary: white;
|
||||
--color-background-accent: rgb(226, 226, 226);
|
||||
--color-background-analytics: rgb(193, 193, 223);
|
||||
--color-background-yt-embed: rgb(173, 173, 173);
|
||||
--color-slider-info: rgba(255, 255, 255, 0.85);
|
||||
--color-button: rgb(21, 43, 92);
|
||||
--color-button-hover: rgb(2, 10, 27);
|
||||
}
|
||||
|
||||
:root.dark {
|
||||
--color-text-primary: white;
|
||||
--color-text-accent: #b5b5b5;
|
||||
--color-link: #005aacff;
|
||||
--color-background-primary: #151515;
|
||||
--color-background-accent: black;
|
||||
--color-background-analytics: #303030;
|
||||
--color-background-yt-embed: #404040;
|
||||
--color-slider-info: rgba(0, 0, 0, 0.85);
|
||||
--color-button: rgb(20, 150, 200);
|
||||
--color-button-hover: rgb(15, 125, 175);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color-text-primary: white;
|
||||
--color-text-accent: #b5b5b5;
|
||||
--color-link: #005aacff;
|
||||
--color-background-primary: #151515;
|
||||
--color-background-accent: black;
|
||||
--color-background-analytics: #303030;
|
||||
--color-background-yt-embed: #404040;
|
||||
--color-slider-info: rgba(0, 0, 0, 0.85);
|
||||
--color-button: rgb(20, 150, 200);
|
||||
--color-button-hover: rgb(15, 125, 175);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* MAIN
|
||||
*/
|
||||
body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: 'Manrope', sans-serif;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
background-color: var(--color-background-primary);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
body.loaded {
|
||||
transition: color 0.5s, background-color 0.5s;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-link);
|
||||
}
|
||||
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings:
|
||||
'FILL' 0,
|
||||
'wght' 400,
|
||||
'GRAD' 0,
|
||||
'opsz' 48
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 80%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
min-height: 80vh;
|
||||
}
|
||||
|
||||
.no-scroll {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.button {
|
||||
padding: 20px;
|
||||
background-color: var(--color-button);
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 10px;
|
||||
transition: all 0.5s;
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
border-radius: 5px;
|
||||
background-color: var(--color-button-hover);
|
||||
}
|
||||
|
||||
.divider {
|
||||
width: 100%;
|
||||
margin-bottom: 2%;
|
||||
margin-top: 2%;
|
||||
border-color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.slider {
|
||||
width: 100vw;
|
||||
height: calc(100vw / 16 * 11);
|
||||
}
|
||||
|
||||
.slider-element {
|
||||
background-color: lightblue;
|
||||
}
|
||||
|
||||
.slider-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--color-slider-info);
|
||||
padding: 20px;
|
||||
border-radius: 20px;
|
||||
max-width: 70%;
|
||||
}
|
||||
|
||||
.slider-controls {
|
||||
font-size: 2.6rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
}
|
||||
|
||||
.slider-control-left {
|
||||
border-top-right-radius: 15px;
|
||||
border-bottom-right-radius: 15px;
|
||||
}
|
||||
|
||||
.slider-control-right {
|
||||
border-top-left-radius: 15px;
|
||||
border-bottom-left-radius: 15px;
|
||||
}
|
||||
|
||||
.offset-button {
|
||||
position: absolute;
|
||||
bottom: 5%;
|
||||
}
|
||||
|
||||
.yt-embed {
|
||||
background-color: var(--color-background-yt-embed) !important;
|
||||
}
|
||||
|
||||
.pullquote-lines {
|
||||
border-color: var(--color-text-primary);
|
||||
margin-bottom: 2%;
|
||||
margin-top: 2%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.quotes-text {
|
||||
font-size: 150%;
|
||||
font-style: italic;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.quotes-author {
|
||||
text-align: right;
|
||||
font-style: italic;
|
||||
width: 80%;
|
||||
margin-right: auto;
|
||||
font-weight: lighter;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
||||
.project-logo {
|
||||
margin-top: 12vh;
|
||||
width: 80vw;
|
||||
height: auto;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.project-logo.small-logo {
|
||||
width: 50%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.inline-elements {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 999px) {
|
||||
.inline-elements .button {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.inline-elements * {
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.rounded-corners {
|
||||
border: none;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.circle {
|
||||
border-radius: 5000px;
|
||||
}
|
||||
|
||||
.bigger {
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.no-margin {
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 550px) and (max-width: 999px) {
|
||||
.project-logo {
|
||||
margin-top: 10vh;
|
||||
width: 50vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1000px) {
|
||||
.project-logo {
|
||||
margin-top: 4vh;
|
||||
width: auto;
|
||||
height: 40vh;
|
||||
}
|
||||
|
||||
.project-logo.small-logo {
|
||||
width: 25%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.inline-elements {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 800px) {
|
||||
.slider {
|
||||
width: 100vw;
|
||||
height: 80vh;
|
||||
}
|
||||
|
||||
.slider-controls {
|
||||
font-size: 3rem;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user