From f8d599de22aa95bd667634a6d3fcf182d4a2e962 Mon Sep 17 00:00:00 2001 From: lukas-heiligenbrunner Date: Wed, 18 Mar 2020 10:22:43 +0100 Subject: [PATCH] css reformat in seperate files --- css/about.css | 51 ++++++++++++++++ css/general.css | 37 ++++++++++++ css/home.css | 75 +++++++++++++++++++++++ css/index.css | 154 ------------------------------------------------ index.html | 4 +- 5 files changed, 166 insertions(+), 155 deletions(-) create mode 100644 css/about.css create mode 100644 css/general.css create mode 100644 css/home.css delete mode 100644 css/index.css diff --git a/css/about.css b/css/about.css new file mode 100644 index 0000000..fef5e7c --- /dev/null +++ b/css/about.css @@ -0,0 +1,51 @@ +/* About Me*/ +#aboutmeText { + width: 100%; +} + +.aboutcontainer { + width: 40%; + float: left; +} + +.aboutPicContainer { + width: 60%; + height: 300px; + float: left; +} + +#aboutPic { + float: right; + margin-top: 10%; + box-shadow: rgba(2, 12, 27, 0.7) 0px 10px 30px -15px; + height: 100%; +} + + +/* special design for Screen smaller than 600px -- mobile */ +@media screen and (max-width: 1200px) { + /* About Me*/ + #aboutmeText { + width: 100%; + } + + .aboutcontainer { + width: 100%; + } + + .aboutPicContainer { + width: 100%; + height: 150px; + } + + #section2 { + height: 130%; + } + + #aboutPic { + float: initial; + margin-left: auto; + margin-right: auto; + /* todo nof loating right in middle */ + } +} \ No newline at end of file diff --git a/css/general.css b/css/general.css new file mode 100644 index 0000000..390d3d0 --- /dev/null +++ b/css/general.css @@ -0,0 +1,37 @@ +body, html { + height: 100%; + scroll-behavior: smooth; + /*font-family: Calibre, "San Francisco", "SF Pro Text", -apple-system, system-ui, BlinkMacSystemFont, Roboto, "Helvetica Neue", "Segoe UI", Arial, sans-serif;*/ +} + +/* general definition of a tile */ +.tile { + height: 80%; + padding-top: 70px; + padding-bottom: 70px; + min-height: 530px; +} + +/* nav item formattings */ +.nav-item { + text-transform: uppercase; + text-decoration: none; + font: bold 15px/1.4 'Open Sans', arial, sans-serif; +} + +/* screen larger than 600px -- desktop */ +@media screen and (min-width: 1201px) { + +} + +/* Screen smaller than 600px -- mobile */ +@media screen and (max-width: 1200px) { + /*background color of collapsed navbar*/ + .navbar-nav { + background: #311E25; + } + + .tile { + min-height: 300px; + } +} \ No newline at end of file diff --git a/css/home.css b/css/home.css new file mode 100644 index 0000000..5555982 --- /dev/null +++ b/css/home.css @@ -0,0 +1,75 @@ +#section1 { + background-color: #311E25; + color: white; +} + +.lightOpacity { + opacity: 0.6; +} + +.bigText { + font-family: 'Helvetica Neue', fantasy; +} + +#preTitle { + opacity: 0.8; + color: #fffd80; +} + +#homepicture { + float: left; + height: 400px; +} + +/* screen larger than 600px -- desktop */ +@media screen and (min-width: 1201px) { + #section1 { + padding-top: 200px; + } + + #preTitle { + font-size: 35px; + } + + #titleText { + font-size: 80px; + } + + #subTitleText { + font-size: 50px; + } + + #meaningFullSentence { + width: 40%; + } +} + +/* Screen smaller than 600px -- mobile */ +@media screen and (max-width: 1200px) { + #section1 { + padding-top: 100px; + height: 90%; + } + + #preTitle { + font-size: 15px; + } + + #titleText { + font-size: 30px; + } + + #subTitleText { + font-size: 20px; + } + + #meaningFullSentence { + width: 100%; + font-size: 13px; + } + + #homepicture { + height: 300px; + width: 100%; + } +} \ No newline at end of file diff --git a/css/index.css b/css/index.css deleted file mode 100644 index e85971e..0000000 --- a/css/index.css +++ /dev/null @@ -1,154 +0,0 @@ -body, html { - height: 100%; - scroll-behavior: smooth; - /*font-family: Calibre, "San Francisco", "SF Pro Text", -apple-system, system-ui, BlinkMacSystemFont, Roboto, "Helvetica Neue", "Segoe UI", Arial, sans-serif;*/ -} - -.tile { - height: 80%; - padding-top: 70px; - padding-bottom: 70px; -} - -.nav-item { - text-transform: uppercase; - text-decoration: none; - font: bold 15px/1.4 'Open Sans', arial, sans-serif; -} - -#section1 { - background-color: #311E25; - color: white; -} - -.lightOpacity { - opacity: 0.6; -} - -.bigText { - font-family: 'Helvetica Neue', fantasy; -} - -#preTitle { - opacity: 0.8; - color: #fffd80; -} - -#homepicture { - float: left; - height: 400px; -} - -/* About Me*/ -#aboutmeText { - width: 100%; -} - -.aboutcontainer { - width: 40%; - float: left; -} - -.aboutPicContainer { - width: 60%; - height: 300px; - float: left; -} - -#aboutPic { - float: right; - margin-top: 10%; - box-shadow: rgba(2, 12, 27, 0.7) 0px 10px 30px -15px; - height: 100%; -} - -/* screen larger than 600px -- desktop */ -@media screen and (min-width: 1201px) { - .tile { - min-height: 530px; - } - - #section1 { - padding-top: 200px; - } - - #preTitle { - font-size: 35px; - } - - #titleText { - font-size: 80px; - } - - #subTitleText { - font-size: 50px; - } - - #meaningFullSentence { - width: 40%; - } -} - -/* Screen smaller than 600px -- mobile */ -@media screen and (max-width: 1200px) { - /*background color of collapsed navbar*/ - .navbar-nav { - background: #311E25; - } - - .tile { - min-height: 300px; - } - - #section1 { - padding-top: 100px; - height: 90%; - } - - #preTitle { - font-size: 15px; - } - - #titleText { - font-size: 30px; - } - - #subTitleText { - font-size: 20px; - } - - #meaningFullSentence { - width: 100%; - font-size: 13px; - } - - #homepicture { - height: 300px; - width: 100%; - } - - /* About Me*/ - #aboutmeText { - width: 100%; - } - - .aboutcontainer { - width: 100%; - } - - .aboutPicContainer { - width: 100%; - height: 150px; - } - - #section2 { - height: 130%; - } - - #aboutPic { - float: initial; - margin-left: auto; - margin-right: auto; - /* todo nof loating right in middle */ - } -} \ No newline at end of file diff --git a/index.html b/index.html index bae2554..ce27ca3 100644 --- a/index.html +++ b/index.html @@ -15,7 +15,9 @@ - + + +