Difference between revisions of "Template:Vilnius-Lithuania/index.css"

Line 1: Line 1:
 +
body,
 +
html {
 +
margin: 0;
 +
padding: 0;
 +
color: #121212;
 +
font-family: 'lato-regular';
 +
}
 +
 
.container {
 
.container {
 
width: 100%;
 
width: 100%;
 
height: calc(100vh - 14px)
 
height: calc(100vh - 14px)
 +
}
 +
 +
#waves {
 +
transform: rotate(180deg);
 +
background-color: #fafafc
 
}
 
}
  
Line 21: Line 34:
 
position: absolute;
 
position: absolute;
 
z-index: 4;
 
z-index: 4;
−
pointer-events:none
+
pointer-events: none
 
}
 
}
  
Line 30: Line 43:
 
top: 0;
 
top: 0;
 
position: absolute;
 
position: absolute;
−
pointer-events:none
+
pointer-events: none
 
}
 
}
  
Line 42: Line 55:
 
pointer-events: none
 
pointer-events: none
 
}
 
}
−
 
−
/*#intro-page #intro #title::after {
 
−
content: 'flavoflow';
 
−
position: absolute;
 
−
color: transparent;
 
−
-webkit-text-stroke-color: rgba(255, 255, 255, 0.2);
 
−
-webkit-text-stroke-width: 1px;
 
−
text-stroke-color: rgba(255, 255, 255, 0.2);
 
−
text-stroke-width: 1px;
 
−
font-size: 12em;
 
−
font-family: 'raleway';
 
−
font-weight: 600;
 
−
transform: translate(-52%, -69%);
 
−
top: 50%;
 
−
left: 50%;
 
−
width: -webkit-fit-content;
 
−
}*/
 
  
 
#desc-wrapper {
 
#desc-wrapper {
Line 90: Line 86:
 
#intro-page #intro h1 {
 
#intro-page #intro h1 {
 
color: #FAFAFC;
 
color: #FAFAFC;
−
font-size: 12em;
+
font-size: 12em;
−
    font-family: 'raleway';
+
font-family: 'raleway';
−
    text-transform: lowercase;
+
text-transform: lowercase;
−
    font-weight: 600;
+
font-weight: 600;
 
}
 
}
  
Line 103: Line 99:
  
 
#bubbles-container {
 
#bubbles-container {
−
height: calc(100vh - 14px);
+
height: 100%;
 
position: absolute;
 
position: absolute;
 
width: 100%;
 
width: 100%;
 
box-sizing: border-box;
 
box-sizing: border-box;
−
 
 
}
 
}
  
−
#problem-page, #links-page {
+
#problem-page,
 +
#links-page {
 
background-color: #FAFAFC;
 
background-color: #FAFAFC;
 
}
 
}
Line 118: Line 114:
 
color: #6281EF
 
color: #6281EF
 
}
 
}
−
#solution-page{
+
 
 +
#solution-page {
 
background-color: #121212;
 
background-color: #121212;
 
}
 
}
  
−
#solution-page #solution-header h1{
+
#solution-page #solution-header h1 {
 
color: #FFC43B
 
color: #FFC43B
 
}
 
}
−
#storytelling {
+
 
 +
.big-section {
 +
line-height: 1.7
 +
}
 +
 
 +
.black-bg {
 
background-color: #121212;
 
background-color: #121212;
 +
 +
}
 +
 +
.white-bg {
 +
background-color: #fafafc;
 +
display: flex;
 +
justify-content: center;
 +
align-items: center;
 +
flex-direction: column;
 +
 +
}
 +
 +
.lightblue-bg {
 +
background-color: #6281ef;
 +
display: flex;
 +
justify-content: center;
 +
align-items: center;
 +
flex-direction: column;
 +
}
 +
 +
.brightblue-bg {
 +
background-color: #3356ce;
 +
display: flex;
 +
justify-content: center;
 +
align-items: center;
 +
flex-direction: column;
 +
}
 +
 +
.darkblue-bg {
 +
background-color: #11348f;
 +
display: flex;
 +
justify-content: center;
 +
align-items: center;
 +
flex-direction: column;
 +
}
 +
 +
.section {
 +
display: flex;
 +
padding: 20px;
 +
}
 +
 +
 +
/*
 +
.textBox p {
 +
color: #fafafc;
 +
margin: 0;
 +
}
 +
 +
#logoText {
 +
display: flex;
 +
flex-direction: column;
 +
justify-content: space-between;
 +
}
 +
 +
#logoAnimation {
 +
height: 300px;
 +
position: sticky;
 +
top: 40vh;
 +
}
 +
 +
*/
 +
.half {
 +
width: 50%;
 +
padding: 20px;
 +
box-sizing: border-box;
 +
}
 +
 +
#firstpart {
 +
height: 60vh;
 +
text-align: center;
 +
}
 +
 +
#storytelling .centered {
 +
display: flex;
 +
justify-content: center;
 +
align-items: center;
 +
}
 +
 +
#fish-icon {
 +
border-radius: 50px;
 +
text-align: center;
 +
}
 +
 +
p {
 +
font-family: 'montserrat-light';
 +
 +
}
 +
 +
p b,
 +
h2,
 +
h1 {
 +
font-family: 'montserrat-bold';
 +
}
 +
 +
.black {
 +
color: #121212;
 +
 +
}
 +
 +
.white {
 +
color: #fafafc;
 +
}
 +
 +
 +
#secondpart {
 +
height: fit-content;
 +
display: flex;
 +
flex-direction: column;
 +
text-align: center;
 +
}
 +
 +
#secondpart .icon {
 +
max-width: 500px;
 +
width: 60%
 +
}
 +
 +
.wdt-60 {
 +
max-width: 400px;
 +
width: 60%;
 +
}
 +
 +
.wd-60 {
 +
max-width: 700px;
 +
width: 60%;
 +
}
 +
 +
.wd-50 {
 +
max-width: 500px;
 +
width: 50%;
 +
}
 +
 +
.wdt-80 {
 +
width: 80%;
 +
margin: 0 auto;
 +
}
 +
 +
.icon {
 +
padding: 20px;
 +
box-sizing: border-box;
 +
height: 300px;
 +
width: 300px;
 +
border-radius: 50px;
 +
}
 +
 +
.icon.white {
 +
background-color: #fafafc;
 +
color: #121212;
 +
}
 +
 +
.icon.dark {
 +
background-color: rgba(255, 255, 255, 0.1);
 +
color: #fafafc;
 +
}
 +
 +
h1 {
 +
color: #fafafc;
 +
}
 +
 +
#thirdpart,
 +
#fourthpart,
 +
#seventhpart {
 +
width: 80%;
 +
margin: 0 auto;
 +
}
 +
 +
#fifthpart {
 +
text-align: center;
 +
}
 +
 +
#fifthpart .list {
 +
width: 70%;
 +
margin: 0 auto
 +
}
 +
 +
#fifthpart .list .list-item {
 +
height: 60px;
 +
padding: 10px;
 +
display: flex;
 +
align-items: center;
 +
}
 +
 +
#fifthpart .list .list-item div {
 +
width: 60px;
 +
height: 60px;
 +
background-color: rgba(255, 255, 255, 0.1);
 +
border-radius: 40px;
 +
}
 +
 +
#fifthpart .list .list-item p {
 +
width: calc(100% - 60px);
 +
float: right;
 +
margin: 0;
 +
padding: 5px;
 +
color: #fafafc;
 +
}
 +
 +
#sixthpart {
 +
flex-direction: column;
 +
}
 +
 +
.milkWave {
 +
z-index: 2;
 +
width: 100%;
 +
top: 0;
 +
position: absolute;
 +
content: "";
 +
pointer-events: none;
 +
background-position: bottom;
 +
background-origin: border-box;
 +
background-size: 100%;
 +
background-repeat: no-repeat;
 +
background-image: url(https://static.igem.org/mediawiki/2020/e/e7/T--Vilnius-Lithuania--milkTeam.svg);
 +
}
 +
 +
.yellow {
 +
color: #fcbd1b;
 +
}
 +
 +
#bact {
 +
flex-direction: column;
 +
text-align: center;
 +
}
 +
 +
#bact .row {
 +
display: inherit;
 +
 +
}
 +
 +
.white-bg .wdt-60 {
 +
text-align: center;
 +
}
 +
 +
#fish-symptoms {
 +
align-items: inherit !important;
 +
}
 +
 +
#fish-symptoms .icon {
 +
margin: 0 auto
 +
}
 +
 +
#fish-symptoms p {
 +
margin-top: 50px
 +
}
 +
 +
#fish-symptoms p:first-child {
 +
margin-top: 0px
 +
}
 +
 +
.title {
 +
text-transform: uppercase
 +
}
 +
 +
#links .nf {
 +
display: inherit
 +
}
 +
 +
#links .title {
 +
font-size: 2.5em;
 +
}
 +
 +
#links .row {
 +
display: flex;
 +
justify-content: center;
 +
}
 +
 +
#links .row .icon {
 +
width: 200px;
 +
height: 200px;
 +
margin: 20px
 
}
 
}
  
Line 133: Line 404:
 
font-size: 4em;
 
font-size: 4em;
 
}
 
}
 +
 
#intro-page #intro #title::after {
 
#intro-page #intro #title::after {
 
font-size: 4em;
 
font-size: 4em;
 
transform: translate(-53%, -130%);
 
transform: translate(-53%, -130%);
 
}
 
}
 +
 
.content-header {
 
.content-header {
 
padding-top: 50px
 
padding-top: 50px
 
}
 
}
 +
 
.content-index h1 {
 
.content-index h1 {
 
font-size: 3.3em;
 
font-size: 3.3em;
 
}
 
}
 
}
 
}

Revision as of 19:07, 2 October 2020

body, html { margin: 0; padding: 0; color: #121212; font-family: 'lato-regular'; }

.container { width: 100%; height: calc(100vh - 14px) }

  1. waves {

transform: rotate(180deg); background-color: #fafafc }

  1. intro-page {

background-color: #121212; }

  1. intro-header {

height: 100vh }

  1. intro-header svg {

height: 90%; }

  1. intro-page #intro-header {

width: 100%; margin: 0 auto; position: absolute; z-index: 4; pointer-events: none }

  1. intro-page #intro {

z-index: 4; height: calc(100vh - 14px); width: 100%; top: 0; position: absolute; pointer-events: none }

  1. text-wrapper {

position: absolute; top: 50%; left: 50%; transform: translate(-50%, 20%); width: 100%; z-index: 4; pointer-events: none }

  1. desc-wrapper {

padding-top: 30px; display: block; width: fit-content; margin: 0 auto; }

  1. center-desc {

display: flex; justify-content: center; width: -webkit-fit-content; }

  1. desc-wrapper span {

color: white; font-family: "lato-regular"; font-size: 3em; text-align: right; }

.container h1 { text-transform: uppercase; font-size: 70px; font-family: "lato-heavy"; text-align: center; margin: 0; }

  1. intro-page #intro h1 {

color: #FAFAFC; font-size: 12em; font-family: 'raleway'; text-transform: lowercase; font-weight: 600; }

  1. intro-page #intro #lower {

color: transparent; stroke-color: rgba(255, 255, 255, 0.4); transform: translate(-0.3em, -0.8em); }

  1. bubbles-container {

height: 100%; position: absolute; width: 100%; box-sizing: border-box; }

  1. problem-page,
  2. links-page {

background-color: #FAFAFC; }

  1. problem-page #problem-header h1,
  2. links-page #links-header h1 {

color: #6281EF }

  1. solution-page {

background-color: #121212; }

  1. solution-page #solution-header h1 {

color: #FFC43B }

.big-section { line-height: 1.7 }

.black-bg { background-color: #121212;

}

.white-bg { background-color: #fafafc; display: flex; justify-content: center; align-items: center; flex-direction: column;

}

.lightblue-bg { background-color: #6281ef; display: flex; justify-content: center; align-items: center; flex-direction: column; }

.brightblue-bg { background-color: #3356ce; display: flex; justify-content: center; align-items: center; flex-direction: column; }

.darkblue-bg { background-color: #11348f; display: flex; justify-content: center; align-items: center; flex-direction: column; }

.section { display: flex; padding: 20px; }


/* .textBox p { color: #fafafc; margin: 0; }

  1. logoText {

display: flex; flex-direction: column; justify-content: space-between; }

  1. logoAnimation {

height: 300px; position: sticky; top: 40vh; }

  • /

.half { width: 50%; padding: 20px; box-sizing: border-box; }

  1. firstpart {

height: 60vh; text-align: center; }

  1. storytelling .centered {

display: flex; justify-content: center; align-items: center; }

  1. fish-icon {

border-radius: 50px; text-align: center; }

p { font-family: 'montserrat-light';

}

p b, h2, h1 { font-family: 'montserrat-bold'; }

.black { color: #121212;

}

.white { color: #fafafc; }


  1. secondpart {

height: fit-content; display: flex; flex-direction: column; text-align: center; }

  1. secondpart .icon {

max-width: 500px; width: 60% }

.wdt-60 { max-width: 400px; width: 60%; }

.wd-60 { max-width: 700px; width: 60%; }

.wd-50 { max-width: 500px; width: 50%; }

.wdt-80 { width: 80%; margin: 0 auto; }

.icon { padding: 20px; box-sizing: border-box; height: 300px; width: 300px; border-radius: 50px; }

.icon.white { background-color: #fafafc; color: #121212; }

.icon.dark { background-color: rgba(255, 255, 255, 0.1); color: #fafafc; }

h1 { color: #fafafc; }

  1. thirdpart,
  2. fourthpart,
  3. seventhpart {

width: 80%; margin: 0 auto; }

  1. fifthpart {

text-align: center; }

  1. fifthpart .list {

width: 70%; margin: 0 auto }

  1. fifthpart .list .list-item {

height: 60px; padding: 10px; display: flex; align-items: center; }

  1. fifthpart .list .list-item div {

width: 60px; height: 60px; background-color: rgba(255, 255, 255, 0.1); border-radius: 40px; }

  1. fifthpart .list .list-item p {

width: calc(100% - 60px); float: right; margin: 0; padding: 5px; color: #fafafc; }

  1. sixthpart {

flex-direction: column; }

.milkWave { z-index: 2; width: 100%; top: 0; position: absolute; content: ""; pointer-events: none; background-position: bottom; background-origin: border-box; background-size: 100%; background-repeat: no-repeat; background-image: url(https://static.igem.org/mediawiki/2020/e/e7/T--Vilnius-Lithuania--milkTeam.svg); }

.yellow { color: #fcbd1b; }

  1. bact {

flex-direction: column; text-align: center; }

  1. bact .row {

display: inherit;

}

.white-bg .wdt-60 { text-align: center; }

  1. fish-symptoms {

align-items: inherit !important; }

  1. fish-symptoms .icon {

margin: 0 auto }

  1. fish-symptoms p {

margin-top: 50px }

  1. fish-symptoms p:first-child {

margin-top: 0px }

.title { text-transform: uppercase }

  1. links .nf {

display: inherit }

  1. links .title {

font-size: 2.5em; }

  1. links .row {

display: flex; justify-content: center; }

  1. links .row .icon {

width: 200px; height: 200px; margin: 20px }

@media (max-width:768px) { #intro-page #intro h1 { font-size: 4em; }

#intro-page #intro #title::after { font-size: 4em; transform: translate(-53%, -130%); }

.content-header { padding-top: 50px }

.content-index h1 { font-size: 3.3em; } }