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

Line 1: Line 1:
−
 
 
.container {
 
.container {
−
  width: 100%;
+
width: 100%;
−
  height: calc(100vh - 14px)
+
height: calc(100vh - 14px)
 
}
 
}
−
#intro-page{
+
 
−
background-color: #121212;
+
#intro-page {
 +
background-color: #121212;
 
}
 
}
−
#intro-header{
+
 
−
height:100vh
+
#intro-header {
 +
height: 100vh
 
}
 
}
−
#intro-header svg{
+
 
−
height: 50%;
+
#intro-header svg {
−
padding-top: 5em;
+
height: 50%;
 +
padding-top: 5em;
 
}
 
}
 +
 
#intro-page #intro-header {
 
#intro-page #intro-header {
−
  width: 100%;
+
width: 100%;
−
  margin: 0 auto;
+
margin: 0 auto;
−
  position:absolute;
+
position: absolute;
−
  z-index:1;
+
z-index: 1;
 
}
 
}
  
 
#intro-page #intro {
 
#intro-page #intro {
−
  z-index: 2;
+
z-index: 2;
−
  height: calc(100vh - 14px);
+
height: calc(100vh - 14px);
−
  width: 100%;
+
width: 100%;
−
top:0;
+
top: 0;
−
position:absolute;
+
position: absolute;
 
}
 
}
−
#text-wrapper{
+
 
−
position: absolute;
+
#text-wrapper {
−
top: 50%;
+
position: absolute;
−
left: 50%;
+
top: 50%;
−
transform: translate(-50%,20%);
+
left: 50%;
−
width: 100%;
+
transform: translate(-50%, 20%);
−
z-index: 4;
+
width: 100%;
−
pointer-events:none
+
z-index: 4;
 +
pointer-events: none
 
}
 
}
−
#intro-page #intro #title::after{
+
 
−
content: 'project X';
+
#intro-page #intro #title::after {
−
position: absolute;
+
content: 'project X';
−
color: transparent;
+
position: absolute;
−
-webkit-text-stroke-color: rgba(255,255,255,0.2);
+
color: transparent;
−
-webkit-text-stroke-width: 1px;
+
-webkit-text-stroke-color: rgba(255, 255, 255, 0.2);
−
text-stroke-color: rgba(255,255,255,0.2);
+
-webkit-text-stroke-width: 1px;
−
text-stroke-width: 1px;
+
text-stroke-color: rgba(255, 255, 255, 0.2);
−
font-size: 9em;
+
text-stroke-width: 1px;
−
text-transform: uppercase;
+
font-size: 9em;
−
font-family: 'lato-heavy';
+
text-transform: uppercase;
−
transform: translate(-53%,-80%);
+
font-family: 'lato-heavy';
−
top: 50%;
+
transform: translate(-53%, -80%);
−
left: 50%;
+
top: 50%;
−
width: -webkit-fit-content;
+
left: 50%;
 +
width: -webkit-fit-content;
 
}
 
}
−
#desc-wrapper{
+
 
−
  padding-top: 30px;
+
#desc-wrapper {
−
  display:block;
+
padding-top: 30px;
−
width: fit-content;
+
display: block;
−
    margin: 0 auto;
+
width: fit-content;
 +
margin: 0 auto;
 
}
 
}
−
#center-desc{
+
 
−
  display: flex;
+
#center-desc {
−
  justify-content: center;
+
display: flex;
−
width: -webkit-fit-content;
+
justify-content: center;
 +
width: -webkit-fit-content;
 
}
 
}
 +
 
#desc-wrapper span {
 
#desc-wrapper span {
−
  color: white;
+
color: white;
−
  font-family: "lato-regular";
+
font-family: "lato-regular";
−
  font-size: 3em;
+
font-size: 3em;
−
  text-align:right;
+
text-align: right;
 
}
 
}
−
#test-width{
+
 
−
  visibility: hidden
+
#test-width {
 +
visibility: hidden
 
}
 
}
  
−
.container h1{
+
.container h1 {
−
text-transform: uppercase;
+
text-transform: uppercase;
−
font-size: 70px;
+
font-size: 70px;
−
  font-family: "lato-heavy";
+
font-family: "lato-heavy";
−
  text-align: center;
+
text-align: center;
−
  margin: 0;
+
margin: 0;
 
}
 
}
  
 
#intro-page #intro h1 {
 
#intro-page #intro h1 {
−
  color: #FAFAFC;
+
color: #FAFAFC;
−
font-size:9em;
+
font-size: 9em;
 
}
 
}
−
#intro-page #intro #lower{
+
 
−
color: transparent;
+
#intro-page #intro #lower {
−
stroke-color: rgba(255,255,255,0.4);
+
color: transparent;
−
transform: translate(-0.3em,-0.8em);
+
stroke-color: rgba(255, 255, 255, 0.4);
 +
transform: translate(-0.3em, -0.8em);
 
}
 
}
−
#bubbles-container{
+
 
−
height: calc(100% - 364px);
+
#bubbles-container {
−
position: absolute;
+
height: calc(100% - 364px);
−
bottom: 0px;
+
position: absolute;
−
width: 100%;
+
bottom: 0px;
−
box-sizing: border-box;
+
width: 100%;
 +
box-sizing: border-box;
 
}
 
}
  
 
#problem-page {
 
#problem-page {
−
  background-color: #FAFAFC;
+
background-color: #FAFAFC;
 
}
 
}
−
#problem-page #problem-header h1{
+
 
−
color:#6281EF
+
#problem-page #problem-header h1 {
−
}
+
color: #6281EF
−
@media (max-width:768px){
+
−
#intro-page #intro h1 {
+
−
font-size:4em;
+
−
}
+
−
#intro-page #intro #title::after{
+
−
font-size:4em;
+
−
transform: translate(-53%,-130%);
+
−
}
+
−
#problem-header{
+
−
padding-top:50px
+
−
}
+
−
#problem-header h1{
+
−
font-size: 3.3em;
+
 
}
 
}
 +
 +
@media (max-width:768px) {
 +
#intro-page #intro h1 {
 +
font-size: 4em;
 +
}
 +
#intro-page #intro #title::after {
 +
font-size: 4em;
 +
transform: translate(-53%, -130%);
 +
}
 +
#problem-header {
 +
padding-top: 50px
 +
}
 +
#problem-header h1 {
 +
font-size: 3.3em;
 +
}
 
}
 
}

Revision as of 11:22, 26 July 2020

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

  1. intro-page {

background-color: #121212; }

  1. intro-header {

height: 100vh }

  1. intro-header svg {

height: 50%; padding-top: 5em; }

  1. intro-page #intro-header {

width: 100%; margin: 0 auto; position: absolute; z-index: 1; }

  1. intro-page #intro {

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

  1. text-wrapper {

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

  1. intro-page #intro #title::after {

content: 'project X'; 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: 9em; text-transform: uppercase; font-family: 'lato-heavy'; transform: translate(-53%, -80%); top: 50%; left: 50%; width: -webkit-fit-content; }

  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; }

  1. test-width {

visibility: hidden }

.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: 9em; }

  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: calc(100% - 364px); position: absolute; bottom: 0px; width: 100%; box-sizing: border-box; }

  1. problem-page {

background-color: #FAFAFC; }

  1. problem-page #problem-header h1 {

color: #6281EF }

@media (max-width:768px) { #intro-page #intro h1 { font-size: 4em; } #intro-page #intro #title::after { font-size: 4em; transform: translate(-53%, -130%); } #problem-header { padding-top: 50px } #problem-header h1 { font-size: 3.3em; } }