- Alle foreslåtte viner -
+Alle foreslåtte viner
+Ingen har foreslått noe enda!
-Ingen har foreslått noe enda!
-Velg hvilke farger du vil ha, fyll inn antall lodd og klikk 'generer'
@@ -54,16 +54,13 @@ export default { @import "../styles/variables.scss"; @import "../styles/global.scss"; @import "../styles/media-queries.scss"; - -.container { - display: flex; - flex-direction: column; - margin-top: 0; -} - h1 { cursor: pointer; } +.header-link { + color: #333333; + text-decoration: none; +} p { text-align: center; @@ -77,4 +74,10 @@ p { margin-top: 2rem; } } + +.container { + margin: auto; + display: flex; + flex-direction: column; +} diff --git a/src/components/HighscorePage.vue b/src/components/HighscorePage.vue index 090e51d..ea42211 100644 --- a/src/components/HighscorePage.vue +++ b/src/components/HighscorePage.vue @@ -101,6 +101,25 @@ $elementSpacing: 3.5rem; margin-bottom: $elementSpacing; } +.container { + width: 90vw; + margin: 3rem auto; + max-width: 1200px; + margin-bottom: 0; + padding-bottom: 3rem; + + @include desktop { + width: 80vw; + } +} + +h1 { + font-size: 3rem; + font-family: "knowit"; + color: $matte-text-color; + font-weight: normal; +} + .filter input { font-size: 1rem; width: 30%; diff --git a/src/components/PersonalHighscorePage.vue b/src/components/PersonalHighscorePage.vue index 5b93f00..46f252f 100644 --- a/src/components/PersonalHighscorePage.vue +++ b/src/components/PersonalHighscorePage.vue @@ -141,6 +141,24 @@ $elementSpacing: 3rem; border-color: gray; } +.container { + width: 90vw; + margin: 3rem auto; + margin-bottom: 0; + padding-bottom: 3rem; + max-width: 1200px; + + @include desktop { + width: 80vw; + } +} + +h1 { + font-size: 3rem; + font-family: "knowit"; + font-weight: normal; +} + .name { text-transform: capitalize; font-size: 3.5rem; diff --git a/src/components/RequestWine.vue b/src/components/RequestWine.vue index 22fa042..81dd7c8 100644 --- a/src/components/RequestWine.vue +++ b/src/components/RequestWine.vue @@ -106,7 +106,6 @@ h1{ text-align: center; } - .main-container{ margin: auto; max-width: 1200px; diff --git a/src/components/TodaysPage.vue b/src/components/TodaysPage.vue index 9ba6921..4cca96b 100644 --- a/src/components/TodaysPage.vue +++ b/src/components/TodaysPage.vue @@ -37,10 +37,79 @@ export default { height: 250px; } +h1 { + font-family: knowit, Arial; + margin-bottom: 25px; +} + .wines-container { display: flex; flex-wrap: wrap; justify-content: space-evenly; - align-items: flex-start; + margin: 0 2rem; + + @media (min-width: 1500px) { + max-width: 1500px; + margin: 0 auto; + } + + @include mobile { + flex-direction: column; + } +} + +h3 { + max-width: 30vw; + + @include mobile { + max-width: 50vw; + } +} + +.inner-wine-container { + display: flex; + flex-direction: row; + margin: auto; + width: 500px; + font-family: Arial; + margin-bottom: 30px; + + @include desktop { + justify-content: center; + } + + @include mobile { + width: auto; + } +} + +.right { + display: flex; + flex-direction: column; + margin-bottom: 150px; + margin-left: 50px; + + @include mobile { + margin-left: 2rem; + } +} + +a, +a:focus, +a:hover, +a:visited { + color: #333333; + font-family: Arial; + text-decoration: none; + font-weight: bold; +} + +.wine-link { + color: #333333; + font-family: Arial; + text-decoration: none; + font-weight: bold; + border-bottom: 1px solid $link-color; + width: fit-content; } diff --git a/src/components/WinnerPage.vue b/src/components/WinnerPage.vue index ffc928d..2b76296 100644 --- a/src/components/WinnerPage.vue +++ b/src/components/WinnerPage.vue @@ -77,11 +77,6 @@ export default { margin-top: 2rem; padding: 2rem; } - -h1 { - color: $matte-text-color; -} - .sent-container { width: 100%; height: 90vh; diff --git a/src/styles/global.scss b/src/styles/global.scss index 5f1a1e6..4f2d978 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -37,33 +37,6 @@ a { } } -.container { - width: 90vw; - margin: 3rem auto; - margin-bottom: 0; - padding-bottom: 3rem; - max-width: 1700px; - - @include desktop { - width: 80vw; - } - - h1 { - font-family: "knowit"; - font-weight: normal; - font-size: 2rem; - - @include desktop { - font-size: 3rem; - } - } -} - -.text-center { - text-align: center; -} - - .subtext { margin-top: 0.5rem; font-size: 1.22rem; @@ -195,6 +168,10 @@ textarea { opacity: 0.25; cursor: not-allowed; } + + &.small { + height: min-content; + } } @@ -268,6 +245,26 @@ textarea { } } +.width { + &-100 { + width: 100%; + } + &-75 { + width: 75%; + } + &-50 { + width: 50%; + } + &-25 { + width: 25%; + } +} + +.cursor { + &-pointer { + cursor: pointer; + } +} .no-margin { margin: 0 !important; diff --git a/src/ui/RaffleGenerator.vue b/src/ui/RaffleGenerator.vue index 02e8c4a..83ccadb 100644 --- a/src/ui/RaffleGenerator.vue +++ b/src/ui/RaffleGenerator.vue @@ -1,5 +1,5 @@ -