tykayn/digital-theory
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

refacto css

Browse Source
This commit is contained in:
Tykayn 2023-04-25 12:05:23 +02:00 committed by tykayn
parent dafeb5dcb4
commit 5e48f2a66b
17 changed files with 205 additions and 188 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
css/general.css → css/0-general.css
View File

@ -1,16 +1,9 @@
/******** all sections *********/ /******** all sections *********/
body{
#content-1 h2, background: #020225;
#content-2 h2,
#content-3 h2,
#content-4 h2 {
margin-left: 10vw;
} }
main nav { main nav {
position: fixed;
top: 0;
left: 0;
padding: 24px; padding: 24px;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
@ -34,6 +27,10 @@ main nav {
height: 54px; height: 54px;
} }
.fixed-nav{
z-index: 30;
}
main section { main section {
height: 1300px; height: 1300px;
min-height: 1300px; min-height: 1300px;
@ -54,12 +51,3 @@ main section h2 {
/* Secondary 100 */ /* Secondary 100 */
color: #FFFDFC; color: #FFFDFC;
} }
/******** phone base *********/
.phone-container.transparent{
background: rgba(248, 243, 241, 0.1);
border-radius: 70px;
width: 350px;
height: 700px;
}

0
css/main_title.css → css/1-2-main_title.css
View File

0
css/cover.css → css/1-cover.css
View File

6
css/welcome.css → css/2-we-come-from.css
View File

@ -53,7 +53,7 @@
width: 88px; width: 88px;
height: 176px; height: 176px;
left: 651px; left: 651px;
top: 1470px; top: 470px;
filter: blur(2px); filter: blur(2px);
} }
@ -61,7 +61,7 @@
width: 171px; width: 171px;
height: 342px; height: 342px;
left: 916px; left: 916px;
top: 1475px; top: 475px;
filter: blur(4px); filter: blur(4px);
} }
@ -69,7 +69,7 @@
width: 275px; width: 275px;
height: 550px; height: 550px;
left: 1222px; left: 1222px;
top: 1523px; top: 523px;
filter: blur(6px); filter: blur(6px);
} }

28
css/3-open-sesame.css Normal file
View File

@ -0,0 +1,28 @@
#open {
box-sizing: border-box;
position: absolute;
width: 1177px;
left: calc(50% - 1177px / 2 - 0.5px);
top: calc(50% - 180px / 2);
font-family: 'GT Walsheim Pro';
font-style: normal;
font-weight: 600;
font-size: 200px;
line-height: 90%;
text-align: center;
letter-spacing: -0.04em;
color: rgba(248, 243, 241, 0.1);
backdrop-filter: blur(7.5px);
height: 180px;
padding-top: 310px;
padding-bottom: 310px;
background: url('/img/unlock.png') bottom center no-repeat;
color: rgba(248, 243, 241, 0.1);
}
#open .text{
color: #fff;
margin-bottom: 400px;
}

75
css/4-content.css Normal file
View File

@ -0,0 +1,75 @@
#content-1 h2,
#content-2 h2,
#content-3 h2,
#content-4 h2 {
margin-left: 10vw;
}
#content{
height: 200px;
min-height: 200px;
}
#content .first {
width: 1680px;
height: 35px;
margin-bottom: 40px;
font-style: normal;
font-weight: 600;
font-size: 40px;
line-height: 95%;
text-align: center;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #E77064;
backdrop-filter: blur(5px);
flex: none;
order: 0;
flex-grow: 0;
}
#content .second{
margin-bottom: 100px;
width: 1680px;
height: 170px;
font-family: 'GT Walsheim Pro';
font-style: normal;
font-weight: 700;
font-size: 230px;
line-height: 65px;
text-align: center;
color: rgba(255, 255, 255, 0.35);
backdrop-filter: blur(5px);
flex: none;
order: 1;
flex-grow: 0;
}
/****************
*/
#content_all .text{
padding-top: 1vh;
padding-left: 80px;
}
#content_all .color-emphasis{
color: #1E33DA;
}
#content_all {
padding-top: 100px;
background: url('/img/bg_content.png');
background-size: cover;
color: #FFFDFC;
}
#content_all .columns{
margin: 0 auto;
max-width: 80vw;
}

50
css/5-popover.css Normal file
View File

@ -0,0 +1,50 @@
/******** phone base *********/
.phone-container .top{
height: 60px;
background: url('/img/phone_rectangle_top.jpg');
}
.phone-container .bottom{
height: 60px;
background: url('/img/phone_rectangle_bottom.jpg');
top: 655.5px;
position: relative;
}
.phone-container.transparent{
background: rgba(248, 243, 241, 0.1);
border-radius: 70px;
width: 350px;
height: 700px;
}
#popover {
background: url('/img/bg_pink.png') no-repeat;
background-position: center;
background-size: cover;
}
#popover .phone-container {
height: 776px;
width: 411px;
background: url('/img/phone_cream.png') no-repeat;
background-position: center;
background-size: cover;
position: relative;
left: 33%;
top: 20vh;
}
#popover .text{
position: relative;
left: 52%;
top: 20vh;
width: 400px;
}
#popover p{
position: relative;
left: 52%;
top: 20vh;
width: 400px;
}

18
css/6-portfolio.css Normal file
View File

@ -0,0 +1,18 @@
#portfolio {
background: url('/img/bg_grey.jpg') no-repeat;
background-position: center;
background-size: cover;
}
#popover .color-emphasis,
#portfolio .color-emphasis {
color: #E77064;
font-weight: 600;
margin-bottom: 20px;
}
#portfolio .phone-container {
height: 776px;
background: url('/img/phone_shoes.png');
}

0
css/content.css
View File

0
css/boilerplate.css → css/libs/boilerplate.css
View File

0
css/bulma.css → css/libs/bulma.css vendored
View File

0
css/normalize.css → css/libs/normalize.css vendored
View File

190
css/main.css
View File

@ -1,172 +1,30 @@
@import './boilerplate.css';
@import url('https://fonts.cdnfonts.com/css/gt-walsheim-pro');
@import './general.css';
@import './cover.css';
@import './main_title.css';
@import './welcome.css';
@import './open.css';
@import './content.css';
@import './popover.css';
@import './portfolio.css';
#open {
box-sizing: border-box;
position: absolute;
width: 1177px;
left: calc(50% - 1177px / 2 - 0.5px);
top: calc(50% - 180px / 2);
font-family: 'GT Walsheim Pro';
font-style: normal;
font-weight: 600;
font-size: 200px;
line-height: 90%;
text-align: center;
letter-spacing: -0.04em;
color: rgba(248, 243, 241, 0.1);
backdrop-filter: blur(7.5px);
height: 180px;
padding-top: 310px;
padding-bottom: 310px;
background: url('/img/unlock.png') bottom center no-repeat;
color: rgba(248, 243, 241, 0.1);
}
#open .text{
color: #fff;
margin-bottom: 400px;
}
#content{
height: 200px;
min-height: 200px;
}
#content .first {
width: 1680px;
height: 35px;
margin-bottom: 40px;
font-style: normal;
font-weight: 600;
font-size: 40px;
line-height: 95%;
text-align: center;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #E77064;
backdrop-filter: blur(5px);
flex: none;
order: 0;
flex-grow: 0;
}
#content .second{
margin-bottom: 100px;
width: 1680px;
height: 170px;
font-family: 'GT Walsheim Pro';
font-style: normal;
font-weight: 700;
font-size: 230px;
line-height: 65px;
text-align: center;
color: rgba(255, 255, 255, 0.35);
backdrop-filter: blur(5px);
flex: none;
order: 1;
flex-grow: 0;
}
/****************
/**
libs
*/ */
#content_all .text{ @import 'libs/boilerplate.css';
padding-top: 1vh; @import 'libs/normalize.css';
padding-left: 80px; @import url('https://fonts.cdnfonts.com/css/gt-walsheim-pro');
} @import 'libs/bulma.css';
#content_all .color-emphasis{
color: #1E33DA; /**
} custom
#content_all { */
padding-top: 100px; @import '0-general.css';
background: url('/img/bg_content.png'); @import '1-cover.css';
background-size: cover; @import '1-2-main_title.css';
color: #FFFDFC; @import '2-we-come-from.css';
} @import '3-open-sesame.css';
#content_all .columns{ @import '4-content.css';
margin: 0 auto; @import '5-popover.css';
max-width: 80vw; @import '6-portfolio.css';
}
/**********************/ /**********************/
#popover {
background: url('/img/bg_pink.png') no-repeat;
background-position: center;
background-size: cover;
}
#popover .phone-container {
height: 776px;
width: 411px;
background: url('/img/phone_cream.png') no-repeat;
background-position: center;
background-size: cover;
position: relative;
left: 33%;
top: 20vh;
}
#popover .text{
position: relative;
left: 52%;
top: 20vh;
width: 400px;
}
#popover p{
position: relative;
left: 52%;
top: 20vh;
width: 400px;
}
#portfolio {
background: url('/img/bg_grey.jpg') no-repeat;
background-position: center;
background-size: cover;
}
#popover .color-emphasis,
#portfolio .color-emphasis {
color: #E77064;
font-weight: 600;
margin-bottom: 20px;
}
#portfolio .phone-container {
height: 776px;
background: url('/img/phone_shoes.png');
}
.phone-container .top{
height: 60px;
background: url('/img/phone_rectangle_top.jpg');
}
.phone-container .bottom{
height: 60px;
background: url('/img/phone_rectangle_bottom.jpg');
top: 655.5px;
position: relative;
}

0
css/open.css
View File

0
css/popover.css
View File

0
css/portfolio.css
View File

2
index.html
View File

@ -17,7 +17,7 @@
<!-- Place favicon.ico in the root directory --> <!-- Place favicon.ico in the root directory -->
<!-- <link rel="stylesheet" href="css/normalize.css">--> <!-- <link rel="stylesheet" href="css/normalize.css">-->
<link rel="stylesheet" href="/css/bulma.css" type="text/css"> <!-- <link rel="stylesheet" href="/css/bulma.css" type="text/css">-->
<link rel="stylesheet" href="/css/main.css" type="text/css"> <link rel="stylesheet" href="/css/main.css" type="text/css">
<meta name="theme-color" content="#fafafa"> <meta name="theme-color" content="#fafafa">