Commit 88c63975 authored by Augustin Lemesle's avatar Augustin Lemesle
Browse files

remove remaining big text and corresp css, and arrowTooltip unused css

parent 99c5c9ba
......@@ -53,20 +53,6 @@ css: version
</div>
</div>
<section class="bgTitleBlk titleIn lightTxt">
<div class="upperBlk">
<div class="upperType">
VERSION
</div>
</div>
<div class="lowerBlk">
<div class="lowerType">
VERSION
</div>
</div>
</section>
</div>
{% include footer.html %}
......
......@@ -666,11 +666,6 @@ a.goDown .icon {
min-height: 454px;
}
}
@media (max-width: 1023px) {
.codeDemoScreen .arrowTooltip {
display: none;
}
}
.codeDemoScreen .codeScreen .codeTab {
padding: 0;
overflow: visible;
......@@ -733,519 +728,6 @@ a.goDown .icon {
vertical-align: top;
}
}
.arrowTooltip {
position: absolute;
width: 196px;
height: 1px;
margin-top: 10px;
white-space: normal;
}
@media (min-width: 1280px) {
.arrowTooltip {
width: 290px;
}
}
.arrowTooltip span {
display: block;
}
.arrowTooltip > div,
.arrowTooltip > span {
position: absolute;
display: block;
bottom: 0;
}
.arrowTooltip .title {
font-family: 'Muli';
padding-bottom: 5px;
opacity: 0;
transform: translateY(20px);
transition: transform 0.35s 1s, opacity 0.3s 1s;
}
.swiper-slide-active .arrowTooltip .title {
opacity: 1;
transform: translateY(0);
}
.arrowTooltip:after {
background: #e9b040;
content: '';
display: block;
height: 4px;
width: 100px;
margin-top: -3px;
position: absolute;
bottom: -2px;
transform: scaleY(0);
transition: transform 0.2s 1.1s;
transform-origin: bottom center;
}
.swiper-slide-active .arrowTooltip:after {
transform: scaleY(1);
}
@media (min-width: 1280px) {
.arrowTooltip:after {
width: 120px;
}
}
@media (min-width: 1600px) {
.arrowTooltip:after {
width: 132px;
}
}
.arrowTooltip + u {
background: #e9b040;
display: block;
width: 200%;
height: 1px;
position: absolute;
margin-top: 10px;
transform: scaleX(0);
transition: transform 0.7s 0.4s, -webkit-transform 0.7s 0.4s;
}
.swiper-slide-active .arrowTooltip + u {
transform: scaleX(1);
}
@media (max-width: 1023px) {
.arrowTooltip + u {
display: none;
}
}
.arrowTooltip.left {
left: -220px;
}
.arrowTooltip.left:after {
left: -10px;
bottom: 0;
}
@media (min-width: 1280px) {
.arrowTooltip.left {
left: -318px;
}
}
@media (min-width: 1600px) {
.arrowTooltip.left {
left: -348px;
}
}
@media (min-width: 1890px) {
.arrowTooltip.left {
left: -333px;
}
}
.arrowTooltip.left + u {
margin-left: -14px;
transform-origin: left bottom;
transform: scaleX(0) rotate(-180deg);
}
.swiper-slide-active .arrowTooltip.left + u {
transform: scaleX(1) rotate(-180deg);
}
.arrowTooltip.right {
right: -236px;
}
@media (min-width: 1280px) {
.arrowTooltip.right {
right: -318px;
}
}
@media (min-width: 1600px) {
.arrowTooltip.right {
right: -348px;
}
}
.arrowTooltip.right:after {
right: -10px;
}
.arrowTooltip.right + u {
width: 200%;
margin-left: 8px;
margin-top: 12px;
transform-origin: bottom left;
}
.arrowTooltip.right .title {
float: right;
}
/*
.arrowTooltip {
position: absolute;
height: 0;
margin-left: -280px;
>div {
position: absolute;
bottom: 0;
}
.title {
width: 170px;
position: absolute;
bottom: 100%;
font-family: 'Muli';
opacity: 0;
transform: translateY(20px);
transition: transform 0.35s 1s, opacity 0.3s 1s;
.swiper-slide-active & {
opacity: 1;
transform: translateY(0);
}
}
span {
display: block;
}
u {
border: 1px solid #e9b040;
display: block;
transform: scaleY(0);
transition: transform 0.7s 0.4s;
transform-origin: bottom center;
@media @uptoSmallScreen {
width: 40px;
height: 173px;
}
&:before {
background: #e9b040;
content: '';
display: block;
height: 3px;
width: 54px;
margin-top: -3px;
position: relative;
transform: scaleY(0);
transition: transform 0.2s 1.1s;
transform-origin: bottom center;
}
.swiper-slide-active & {
transform: scaleY(1);
&:before {
transform: scaleY(1);
}
@media @fromMediumScreen {
transform: scaleX(1);
}
}
}
&.left {
margin-left: -35px;
u {
left: 0;
border-right: 0 none;
&:before {
left: 22px;
}
}
.title {
left: 0;
}
}
&.right {
left: 236px;
u {
right: 0;
border-left: 0 none;
width: 38px;
height: 220px;
&:before {
right: 37px;
}
}
.title {
right: 0;
text-align: right;
}
}
&:nth-of-type(3) {
margin-left: -40px;
.title {
width: 135px;
@media @fromMediumScreen {
width: 160px;
bottom: auto;
top: 100%;
margin-top: 8px;
}
}
u {
height: 260px;
}
}
&.line3 {
u {
height: 144px;
}
}
@media @fromSmallScreen {
width: 196px;
height: 1px;
b {
font-size: 43px;
}
u {
height: 175px;
transform: scaleX(0);
&:before {
bottom: 0;
position: absolute;
margin-top: 0;
}
}
&.left {
margin-left: -280px;
u {
transform-origin: bottom right;
}
}
&.right {
right: 120px;
left: auto;
u {
height: 340px;
transform-origin: bottom left;
}
}
}
@media @fromMediumScreen {
b {
font-size: 43px;
}
u {
height: 1px !important;
border: 0 none !important;
background: #e9b040;
}
&.left {
u {
width: 237px;
&:before {
left: 0;
}
}
}
&.right {
u {
height: 1px;
width: 350px;
&:before {
right: 0;
position: absolute;
}
}
}
}
}
*/
/* background title container */
.bgTitleBlk {
/*background: #fff;*/
width: 100%;
height: 100%;
overflow: hidden;
display: block;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
user-select: none;
pointer-events: none;
transition: background 0.4s;
}
.bgTitleBlk .upperBlk,
.bgTitleBlk .lowerBlk {
width: 100%;
height: 25vw;
position: absolute;
top: 50%;
left: 50%;
margin: 0;
padding: 0;
overflow: hidden;
display: block;
width: auto;
min-width: 100%;
padding: 0 500px;
}
@media (min-width: 768px) {
.bgTitleBlk .upperBlk,
.bgTitleBlk .lowerBlk {
height: 90px;
top: 50%;
}
}
@media (min-width: 1024px) {
.bgTitleBlk .upperBlk,
.bgTitleBlk .lowerBlk {
height: 120px;
}
}
@media (min-width: 1600px) {
.bgTitleBlk .upperBlk,
.bgTitleBlk .lowerBlk {
height: 175px;
}
}
@media (min-width: 1890px) {
.bgTitleBlk .upperBlk,
.bgTitleBlk .lowerBlk {
height: 195px;
}
}
.bgTitleBlk .lowerBlk {
transform: translate(-50%, 0%);
overflow: hidden;
}
.bgTitleBlk .upperBlk {
transform: translate(-50%, -100%);
}
.bgTitleBlk .lowerType,
.bgTitleBlk .upperType {
font-size: 500px;
font-size: 50vw;
font-weight: 800;
text-transform: uppercase;
line-height: 1;
text-align: justify;
text-align-last: justify;
letter-spacing: 3vw;
height: 200%;
width: 100%;
opacity: 1;
color: rgba(100, 100, 100, 0.08);
opacity: 0;
transition: all 0.5s ease-out;
white-space: nowrap;
}
@media (min-width: 768px) {
.bgTitleBlk .lowerType,
.bgTitleBlk .upperType {
font-size: 180px;
font-weight: 700;
text-align: center;
text-align-last: center;
letter-spacing: 0;
}
}
@media (min-width: 1024px) {
.bgTitleBlk .lowerType,
.bgTitleBlk .upperType {
font-size: 240px;
}
}
@media (min-width: 1600px) {
.bgTitleBlk .lowerType,
.bgTitleBlk .upperType {
font-size: 350px;
}
}
@media (min-width: 1890px) {
.bgTitleBlk .lowerType,
.bgTitleBlk .upperType {
font-size: 390px;
}
}
.bgTitleBlk .lowerType {
transform: translate(0%, -50%);
}
.bgTitleBlk .lowerType.out {
opacity: 0;
transform: translate(-8%, -50%);
}
.bgTitleBlk .upperType {
transform: translate(0%, 0%);
}
.bgTitleBlk .upperType.out {
opacity: 0;
transform: translate(8%, 0%);
}
.titleIn .bgTitleBlk .lowerType {
opacity: 1;
transform: translate(0%, -50%);
}
.titleIn .bgTitleBlk .upperType {
opacity: 1;
transform: translate(0%, 0%);
}
.pageContent.timeline .bgTitleBlk {
background: #ccc;
}
.pageContent.timeline .bgTitleBlk .lowerType,
.pageContent.timeline .bgTitleBlk .upperType {
color: #d9d9d9;
}
.pageContent.lightTxt .bgTitleBlk .lowerType,
.pageContent.lightTxt .bgTitleBlk .upperType {
color: #fafafa;
}
.pageContent.error .bgTitleBlk {
background: #101010;
transition-delay: 0.3s;
}
@media (min-width: 768px) {
.pageContent.bigTxt .bgTitleBlk .upperBlk,
.pageContent.bigTxt .bgTitleBlk .lowerBlk {
height: 60px;
}
}
@media (min-width: 1024px) {
.pageContent.bigTxt .bgTitleBlk .upperBlk,
.pageContent.bigTxt .bgTitleBlk .lowerBlk {
height: 80px;
}
}
@media (min-width: 1280px) {
.pageContent.bigTxt .bgTitleBlk .upperBlk,
.pageContent.bigTxt .bgTitleBlk .lowerBlk {
height: 100px;
}
}
@media (min-width: 1600px) {
.pageContent.bigTxt .bgTitleBlk .upperBlk,
.pageContent.bigTxt .bgTitleBlk .lowerBlk {
height: 130px;
}
}
@media (min-width: 1890px) {
.pageContent.bigTxt .bgTitleBlk .upperBlk,
.pageContent.bigTxt .bgTitleBlk .lowerBlk {
height: 150px;
}
}
@media (min-width: 768px) {
.pageContent.bigTxt .bgTitleBlk .upperType,
.pageContent.bigTxt .bgTitleBlk .lowerType {
font-size: 120px;
}
}
@media (min-width: 1024px) {
.pageContent.bigTxt .bgTitleBlk .upperType,
.pageContent.bigTxt .bgTitleBlk .lowerType {
font-size: 160px;
}
}
@media (min-width: 1280px) {
.pageContent.bigTxt .bgTitleBlk .upperType,
.pageContent.bigTxt .bgTitleBlk .lowerType {
font-size: 200px;
}
}
@media (min-width: 1600px) {
.pageContent.bigTxt .bgTitleBlk .upperType,
.pageContent.bigTxt .bgTitleBlk .lowerType {
font-size: 260px;
}
}
@media (min-width: 1890px) {
.pageContent.bigTxt .bgTitleBlk .upperType,
.pageContent.bigTxt .bgTitleBlk .lowerType {
font-size: 300px;
}
}
/* About Section */
.aboutScreen .sectionContent {
padding: 0;
......
......@@ -286,46 +286,6 @@
line-height: 1.1;
}
}
@media (max-width: 1023px) {
.codeDemoHead .arrowTooltip.left u {
width: 32px;
}
.codeDemoHead .arrowTooltip.right {
margin-left: 236px;
margin-bottom: 70px;
}
.codeDemoHead .arrowTooltip.tooltip1 {
left: 5%;
}
.codeDemoHead .arrowTooltip.tooltip1 u {
height: 58px;
}
.codeDemoHead .arrowTooltip.tooltip2 {
margin-left: 184px;
margin-bottom: 22px;
}
.codeDemoHead .arrowTooltip.tooltip2 u {
width: 56px;
height: 120px;
}
.codeDemoHead .arrowTooltip.tooltip3 {
left: 2%;
margin-bottom: 62px;
}
.codeDemoHead .arrowTooltip.tooltip3 u {
height: 208px;
}
}
@media (min-width: 1024px) {
.codeDemoHead .arrowTooltip.tooltip3 {
left: 0;
top: 225px;
margin-left: -140px;
}
.codeDemoHead .arrowTooltip.tooltip3 u {
height: 208px;
}
}
.codeDemoHead figure img {
display: block;
margin: 0 auto;
......
......@@ -49,22 +49,6 @@ title: Authors - Frama-C
</div>
</section>
</article>
<section class="bgTitleBlk titleIn lightTxt">
<div class="upperBlk">
<div class="upperType">
Authors
</div>
</div>
<div class="lowerBlk">
<div class="lowerType">
Authors
</div>
</div>
</section>
<section id="comments" style="display: none;"></section>
</div>
{% include footer.html %}
......
......@@ -26,20 +26,6 @@ title: Versions Frama-C
</ul>
</div>
</div>
<!-- <section class="bgTitleBlk titleIn lightTxt"> -->
<!-- <div class="upperBlk"> -->
<!-- <div class="upperType"> -->
<!-- VERSION -->
<!-- </div> -->