mirror of
https://github.com/DerTyp7/apartment-altenau-nextjs.git
synced 2025-10-29 04:42:11 +01:00
[init] initlialize next app & convert old react app
This commit is contained in:
Janis
99
styles/About.module.scss
Normal file
99
styles/About.module.scss
Normal file
@@ -0,0 +1,99 @@
|
||||
@import "./variables.scss";
|
||||
|
||||
.about {
|
||||
h1 {
|
||||
text-align: center;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.aboutContent {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
column-gap: 20px;
|
||||
row-gap: 30px;
|
||||
|
||||
.aboutContentText {
|
||||
font-size: 14pt;
|
||||
text-align: left;
|
||||
line-height: 2em;
|
||||
color: #555555;
|
||||
border-right: 2px solid #36363641;
|
||||
letter-spacing: 1px;
|
||||
|
||||
img {
|
||||
width: 500px;
|
||||
float: left;
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.aboutContentInformation {
|
||||
display: block;
|
||||
font-size: 12pt;
|
||||
text-align: left;
|
||||
line-height: 2em;
|
||||
letter-spacing: 0.5px;
|
||||
.aboutContentInformationContent {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
|
||||
p {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
}
|
||||
.map {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
grid-template-columns: 1fr;
|
||||
p {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
}
|
||||
.map {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1400px) {
|
||||
.aboutContentText {
|
||||
font-size: 12pt;
|
||||
letter-spacing: 0.5px;
|
||||
|
||||
img {
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
.aboutContentText {
|
||||
border-right: 0px solid #36363641;
|
||||
border-bottom: 2px solid #36363641;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 650px) {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
img {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
5
styles/DiashowHomePage.module.scss
Normal file
5
styles/DiashowHomePage.module.scss
Normal file
@@ -0,0 +1,5 @@
|
||||
.diashow-div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
45
styles/Footer.module.scss
Normal file
45
styles/Footer.module.scss
Normal file
@@ -0,0 +1,45 @@
|
||||
@import "./variables.scss";
|
||||
|
||||
.footer {
|
||||
margin-top: 80px;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: $footer-color;
|
||||
|
||||
.footerLinks {
|
||||
align-items: baseline;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
list-style: none;
|
||||
|
||||
a {
|
||||
color: $footer-link-color;
|
||||
padding-inline: 1rem;
|
||||
cursor: pointer;
|
||||
transition: 50ms linear;
|
||||
text-decoration: none;
|
||||
@media (max-width: 400px) {
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
&:visited {
|
||||
color: $footer-link-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
color: $footer-link-color-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.copyrightText {
|
||||
color: $footer-link-color;
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
3
styles/Gallery.module.scss
Normal file
3
styles/Gallery.module.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
@import "./variables.scss";
|
||||
.gallery {
|
||||
}
|
||||
121
styles/GalleryFullscreen.module.scss
Normal file
121
styles/GalleryFullscreen.module.scss
Normal file
@@ -0,0 +1,121 @@
|
||||
.galleryFullscreen {
|
||||
z-index: 100 !important;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
height: calc(100%);
|
||||
background-color: rgb(16, 15, 16);
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
padding-top: 40px;
|
||||
|
||||
.galleryFullscreenTitle {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: -100px;
|
||||
h2 {
|
||||
text-align: center;
|
||||
color: white;
|
||||
}
|
||||
div {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
margin-inline: 10px;
|
||||
height: 15px;
|
||||
border-radius: 50px;
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
padding-bottom: 2px;
|
||||
padding-top: -2px;
|
||||
letter-spacing: 1px;
|
||||
font-size: 12pt;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
|
||||
.galleryFullscreenImgContainer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: rgb(6, 6, 6, 0);
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
max-height: 800px;
|
||||
aspect-ratio: 16/9;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
border-radius: 20px;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-o-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@media (min-width: 1920px) {
|
||||
width: 80em;
|
||||
}
|
||||
|
||||
@media (max-width: 1700px) {
|
||||
width: 70em;
|
||||
}
|
||||
|
||||
@media (max-width: 1450px) {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
width: 100%;
|
||||
img {
|
||||
border-radius: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.galleryFullscreenClose {
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.galleryFullscreenBtn {
|
||||
color: white;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
transition: all 100ms linear;
|
||||
border-radius: 50px;
|
||||
&:hover {
|
||||
background-color: rgba(182, 182, 182, 0.15);
|
||||
}
|
||||
}
|
||||
.galleryFullscreenBtnCycle {
|
||||
top: calc(50vh - 25px);
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
background-color: rgba(28, 28, 28, 0.5);
|
||||
&:hover {
|
||||
background-color: rgba(28, 28, 28, 0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.galleryFullscreenPrev {
|
||||
left: 50px;
|
||||
}
|
||||
|
||||
.galleryFullscreenNext {
|
||||
right: 50px;
|
||||
}
|
||||
}
|
||||
64
styles/GalleryGrid.module.scss
Normal file
64
styles/GalleryGrid.module.scss
Normal file
@@ -0,0 +1,64 @@
|
||||
.galleryGrid {
|
||||
.galleryGridGrid {
|
||||
display: grid;
|
||||
padding-left: 50px;
|
||||
padding-right: 50px;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
column-gap: 5px;
|
||||
row-gap: 5px;
|
||||
|
||||
@media (max-width: 1500px) {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
@media (max-width: 650px) {
|
||||
grid-template-columns: 1fr;
|
||||
column-gap: 0px;
|
||||
row-gap: 2px;
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
@media (max-width: 350px) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
div {
|
||||
border-radius: 0 0 10px 10px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
transition: 80ms linear;
|
||||
&:hover .galleryImageTitle {
|
||||
background-color: rgba(19, 17, 17, 0.7);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.galleryImageTitle {
|
||||
margin-top: -34px;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
font-size: 15pt;
|
||||
opacity: 0;
|
||||
display: block;
|
||||
color: white;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
aspect-ratio: 16/9;
|
||||
transition: 50ms linear;
|
||||
cursor: pointer;
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,129 +0,0 @@
|
||||
.container {
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
.main {
|
||||
min-height: 100vh;
|
||||
padding: 4rem 0;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
padding: 2rem 0;
|
||||
border-top: 1px solid #eaeaea;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer a {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.title a {
|
||||
color: #0070f3;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.title a:hover,
|
||||
.title a:focus,
|
||||
.title a:active {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
line-height: 1.15;
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
.title,
|
||||
.description {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.description {
|
||||
margin: 4rem 0;
|
||||
line-height: 1.5;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.code {
|
||||
background: #fafafa;
|
||||
border-radius: 5px;
|
||||
padding: 0.75rem;
|
||||
font-size: 1.1rem;
|
||||
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
|
||||
Bitstream Vera Sans Mono, Courier New, monospace;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin: 1rem;
|
||||
padding: 1.5rem;
|
||||
text-align: left;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
border: 1px solid #eaeaea;
|
||||
border-radius: 10px;
|
||||
transition: color 0.15s ease, border-color 0.15s ease;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.card:hover,
|
||||
.card:focus,
|
||||
.card:active {
|
||||
color: #0070f3;
|
||||
border-color: #0070f3;
|
||||
}
|
||||
|
||||
.card h2 {
|
||||
margin: 0 0 1rem 0;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.card p {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 1em;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.grid {
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.card,
|
||||
.footer {
|
||||
border-color: #222;
|
||||
}
|
||||
.code {
|
||||
background: #111;
|
||||
}
|
||||
.logo img {
|
||||
filter: invert(1);
|
||||
}
|
||||
}
|
||||
122
styles/Home.module.scss
Normal file
122
styles/Home.module.scss
Normal file
@@ -0,0 +1,122 @@
|
||||
@import "./variables.scss";
|
||||
|
||||
.home {
|
||||
/* Children */
|
||||
.homeSurroundings {
|
||||
background-color: $home-surroundings-background-color;
|
||||
font-size: $home-surroundings-font-size;
|
||||
font-weight: bold;
|
||||
color: $home-surroundings-font-color;
|
||||
|
||||
/* Children */
|
||||
ul {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
list-style: none;
|
||||
padding: 10px 0px 10px 0px;
|
||||
margin: 0 auto 0 auto;
|
||||
padding-inline: 10px;
|
||||
|
||||
/* Media queries */
|
||||
@media (min-width: 1050px) {
|
||||
padding-inline: 80px;
|
||||
}
|
||||
|
||||
/* Children */
|
||||
a {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: color 50ms ease-in-out;
|
||||
padding: 0 0 3px 0;
|
||||
transition: 50ms;
|
||||
transition-timing-function: linear;
|
||||
cursor: pointer;
|
||||
|
||||
&:visited {
|
||||
color: $home-surroundings-font-color;
|
||||
}
|
||||
|
||||
/* Media queries */
|
||||
@media (max-width: 650px) {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
/* Children */
|
||||
svg {
|
||||
width: $home-surroundings-font-size;
|
||||
aspect-ratio: 1;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.homeGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 0.5fr;
|
||||
margin: 2em 0 0 0;
|
||||
padding: 0 2.5em 0 2.5em;
|
||||
|
||||
/* Media queries */
|
||||
@media screen and (max-width: $home-grid-breakpoint-1) {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
/* Children */
|
||||
div {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: 0 auto 0 auto;
|
||||
|
||||
/* Children */
|
||||
h2 {
|
||||
margin-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
letter-spacing: 3px;
|
||||
/* Media queries */
|
||||
@media screen and (max-width: $home-grid-breakpoint-1) {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.homeIntroduction p {
|
||||
font-size: 1.3em;
|
||||
line-height: 2em;
|
||||
|
||||
/* Media queries */
|
||||
@media screen and (max-width: $home-grid-breakpoint-1) {
|
||||
padding-left: 50px;
|
||||
padding-right: 50px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $home-grid-breakpoint-2) {
|
||||
text-align: center;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $home-grid-breakpoint-3) {
|
||||
font-size: 13pt;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $home-grid-breakpoint-4) {
|
||||
font-size: 13pt;
|
||||
text-align: center;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.homeMapContainer {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
}
|
||||
27
styles/Legal.module.scss
Normal file
27
styles/Legal.module.scss
Normal file
@@ -0,0 +1,27 @@
|
||||
@import "./variables.scss";
|
||||
|
||||
.legal {
|
||||
h1 {
|
||||
text-align: center;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.legalContent {
|
||||
width: 80%;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
font-size: 14pt;
|
||||
text-align: left;
|
||||
line-height: 2em;
|
||||
color: #555555;
|
||||
letter-spacing: 1px;
|
||||
|
||||
h3 {
|
||||
margin-top: 40px;
|
||||
margin-bottom: 10px;
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
}
|
||||
16
styles/Map.module.scss
Normal file
16
styles/Map.module.scss
Normal file
@@ -0,0 +1,16 @@
|
||||
.map {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
a {
|
||||
flex: 1;
|
||||
float: right;
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#googleMap {
|
||||
flex: 1;
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
}
|
||||
168
styles/Nav.module.scss
Normal file
168
styles/Nav.module.scss
Normal file
@@ -0,0 +1,168 @@
|
||||
@import "./variables.scss";
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 $navbar-padding-right 0 $navbar-padding-left;
|
||||
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.1);
|
||||
height: $navbar-height;
|
||||
background-color: $navbar-background-color;
|
||||
color: $navbar-color;
|
||||
font-size: $navbar-font-size;
|
||||
|
||||
/* Media queries */
|
||||
@media screen and (max-width: $navbar-breakpoint-1) {
|
||||
padding: 0 10px 0 10px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $navbar-breakpoint-2) {
|
||||
flex-direction: column;
|
||||
padding: 0 0 5px 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $navbar-breakpoint-4) {
|
||||
padding: 0 0 20px 0;
|
||||
}
|
||||
@media screen and (max-width: $navbar-breakpoint-5) {
|
||||
padding: 0 0 45px 0;
|
||||
}
|
||||
|
||||
/* Children */
|
||||
* {
|
||||
letter-spacing: 0px;
|
||||
}
|
||||
|
||||
.brandName {
|
||||
font-size: $navbar-brand-font-size;
|
||||
color: $navbar-brand-color;
|
||||
text-decoration: $navbar-brand-text-decoration;
|
||||
padding: 0 0 0 15px;
|
||||
margin: -4px 0 0 0;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Media queries */
|
||||
@media screen and (max-width: $navbar-breakpoint-2) {
|
||||
font-size: calc($navbar-brand-font-size - 0.5rem);
|
||||
}
|
||||
|
||||
@media screen and (max-width: $navbar-breakpoint-2) {
|
||||
padding: 15px 0 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.navNavigationLeft {
|
||||
align-items: baseline;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 auto 0 20px;
|
||||
|
||||
/* Media queries */
|
||||
@media screen and (max-width: $navbar-breakpoint-2) {
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
/* Children */
|
||||
li {
|
||||
padding-inline: 1rem;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
padding-inline: 0.8rem;
|
||||
margin-inline: 5px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: $navbar-navigation-color;
|
||||
text-decoration: none;
|
||||
transition: color 50ms ease-in-out;
|
||||
border-radius: $navbar-navigation-border-radius;
|
||||
font-weight: bold;
|
||||
font-size: 12pt;
|
||||
transition: 50ms;
|
||||
transition-timing-function: linear;
|
||||
border-bottom: 3px solid transparent;
|
||||
|
||||
@media (max-width: $navbar-breakpoint-3) {
|
||||
padding-inline: 0.2rem;
|
||||
margin-inline: 2px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $navbar-navigation-color-active;
|
||||
background-color: $navbar-navigation-active-background-color-hover;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: $navbar-navigation-active-background-color;
|
||||
border-bottom: 3px solid $navbar-navigation-active-border-color;
|
||||
border-radius: $navbar-navigation-border-radius;
|
||||
color: $navbar-navigation-color-active;
|
||||
|
||||
&:hover {
|
||||
color: $navbar-navigation-color-active;
|
||||
background-color: $navbar-navigation-active-background-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.navNavigationRight {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
column-gap: 10px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin-right: auto;
|
||||
margin-right: 20px;
|
||||
|
||||
.btnContact {
|
||||
border: 1px solid #2176ff;
|
||||
background-color: #2176ff;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
border-radius: 5px;
|
||||
padding: 8px;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
transition: 100ms linear;
|
||||
background-color: #0568d2;
|
||||
}
|
||||
|
||||
@media (max-width: $navbar-breakpoint-2) {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
}
|
||||
|
||||
@media (max-width: $navbar-breakpoint-4) {
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.navSelectContainer {
|
||||
caret-color: transparent;
|
||||
@media (max-width: $navbar-breakpoint-2) {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
0
styles/Pricing.module.scss
Normal file
0
styles/Pricing.module.scss
Normal file
0
styles/Privacy.module.scss
Normal file
0
styles/Privacy.module.scss
Normal file
72
styles/Surroundings.module.scss
Normal file
72
styles/Surroundings.module.scss
Normal file
@@ -0,0 +1,72 @@
|
||||
@import "./variables.scss";
|
||||
|
||||
.surroundings {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 0 50px 0 50px;
|
||||
|
||||
/* Media queries */
|
||||
@media screen and (max-width: $surroundings-breakpoint-2) {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
/* Children */
|
||||
.surroundingsItem {
|
||||
display: block;
|
||||
padding: 0px 0px 10px 0px;
|
||||
margin: 0 0 20px 0;
|
||||
border-bottom: 3px solid #5555558e;
|
||||
font-size: 15pt;
|
||||
text-align: left;
|
||||
line-height: 2em;
|
||||
color: #555555;
|
||||
|
||||
.surroundingsItemImgContainer {
|
||||
width: 500px;
|
||||
float: left;
|
||||
|
||||
/* Media queries */
|
||||
@media screen and (max-width: $surroundings-breakpoint-1) {
|
||||
display: block;
|
||||
font-size: 13pt;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $surroundings-breakpoint-2) {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
@media screen and (min-width: $surroundings-breakpoint-2) {
|
||||
padding-right: 20px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $surroundings-breakpoint-3) {
|
||||
padding-right: 0px;
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
/* Children */
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
a {
|
||||
font-size: 11pt;
|
||||
padding-left: 10px;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
padding-left: 20px;
|
||||
|
||||
/* Media queries */
|
||||
@media screen and (max-width: $surroundings-breakpoint-1) {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
html,
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
|
||||
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
html {
|
||||
color-scheme: dark;
|
||||
}
|
||||
body {
|
||||
color: white;
|
||||
background: black;
|
||||
}
|
||||
}
|
||||
108
styles/globals.scss
Normal file
108
styles/globals.scss
Normal file
@@ -0,0 +1,108 @@
|
||||
@import "./variables.scss";
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
/* Scrollbar FireFox*/
|
||||
scrollbar-width: $scrollbar-width;
|
||||
scrollbar-color: $scrollbar-foreground-color $scrollbar-background-color;
|
||||
|
||||
&:visited {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Scrollbar Webkit */
|
||||
*::-webkit-scrollbar {
|
||||
width: $scrollbar-width;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-track {
|
||||
background: $scrollbar-background-color;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-thumb {
|
||||
background-color: $scrollbar-foreground-color;
|
||||
border-radius: 10px;
|
||||
border: 3px solid transparent;
|
||||
}
|
||||
|
||||
body,
|
||||
html {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
|
||||
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-size: 100%;
|
||||
text-align: left;
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
#__next {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
main {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
p,
|
||||
a {
|
||||
letter-spacing: 1px;
|
||||
&:visited {
|
||||
color: $text-color;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
color: rgb(34, 148, 255);
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&:visited {
|
||||
text-decoration: none;
|
||||
color: rgb(34, 148, 255);
|
||||
}
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: $text-headline-color;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
|
||||
monospace;
|
||||
}
|
||||
|
||||
.textMuted {
|
||||
color: $text-muted;
|
||||
}
|
||||
|
||||
.pageHeadline {
|
||||
text-align: center;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.noSelect {
|
||||
-webkit-touch-callout: none; /* iOS Safari */
|
||||
-webkit-user-select: none; /* Safari */
|
||||
-khtml-user-select: none; /* Konqueror HTML */
|
||||
-moz-user-select: none; /* Old versions of Firefox */
|
||||
-ms-user-select: none; /* Internet Explorer/Edge */
|
||||
user-select: none; /* Non-prefixed version, currently
|
||||
supported by Chrome, Edge, Opera and Firefox */
|
||||
}
|
||||
53
styles/variables.scss
Normal file
53
styles/variables.scss
Normal file
@@ -0,0 +1,53 @@
|
||||
// General
|
||||
$text-muted: #54585a;
|
||||
$text-color: #555555;
|
||||
$text-headline-color: #000000;
|
||||
|
||||
// Scrollbar styling
|
||||
$scrollbar-background-color: rgb(195, 195, 195);
|
||||
$scrollbar-foreground-color: rgb(44, 48, 50);
|
||||
$scrollbar-width: 10px;
|
||||
|
||||
// Navbar styling (nav.scss)
|
||||
$navbar-height: 75px;
|
||||
$navbar-padding-left: 60px;
|
||||
$navbar-padding-right: $navbar-padding-left;
|
||||
$navbar-background-color: #f9f9f9;
|
||||
$navbar-color: rgb(29, 29, 29);
|
||||
$navbar-navigation-color: #424242;
|
||||
$navbar-navigation-color-active: #000000;
|
||||
$navbar-navigation-active-background-color: #d0cfcf;
|
||||
$navbar-navigation-active-border-color: #00000000;
|
||||
$navbar-navigation-active-background-color-hover: #e5e5e5;
|
||||
$navbar-navigation-border-radius: 50px;
|
||||
|
||||
$navbar-font-size: 1.15rem;
|
||||
$navbar-brand-font-size: 1.8rem;
|
||||
$navbar-brand-color: rgb(12, 12, 12);
|
||||
$navbar-brand-text-decoration: none;
|
||||
|
||||
$navbar-breakpoint-1: 1100px;
|
||||
$navbar-breakpoint-2: 910px;
|
||||
$navbar-breakpoint-3: 510px;
|
||||
$navbar-breakpoint-4: 480px;
|
||||
$navbar-breakpoint-5: 250px;
|
||||
|
||||
// Footer styling (Footer.scss)
|
||||
$footer-color: #edebeb;
|
||||
$footer-link-color: #6c6c6c;
|
||||
$footer-link-color-hover: #000000;
|
||||
|
||||
// Home styling
|
||||
$home-surroundings-background-color: #1f294c;
|
||||
$home-surroundings-font-size: 1.2em;
|
||||
$home-surroundings-font-color: #fff;
|
||||
|
||||
$home-grid-breakpoint-1: 1250px;
|
||||
$home-grid-breakpoint-2: 900px;
|
||||
$home-grid-breakpoint-3: 730px;
|
||||
$home-grid-breakpoint-4: 400px;
|
||||
|
||||
// Surroundings sytling
|
||||
$surroundings-breakpoint-1: 1200px;
|
||||
$surroundings-breakpoint-2: 950px;
|
||||
$surroundings-breakpoint-3: 750px;
|
||||
Reference in New Issue
Block a user