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 9604831..a925112 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/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/VinlottisPage.vue b/src/components/VinlottisPage.vue index a157d93..e683a12 100644 --- a/src/components/VinlottisPage.vue +++ b/src/components/VinlottisPage.vue @@ -116,8 +116,7 @@ h1 { .container{ display: flex; flex-direction: column; - width: 100%; - + .header-and-notification{ display: flex; flex-direction: row; 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 43b5e72..eabf453 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/styles/vinlottis-icons.css b/src/styles/vinlottis-icons.css new file mode 100644 index 0000000..97614f9 --- /dev/null +++ b/src/styles/vinlottis-icons.css @@ -0,0 +1,122 @@ +@font-face { + font-family: 'vinlottis-icons'; + src: + url('/public/assets/fonts/vinlottis-icons/vinlottis-icons.ttf?95xu5r') format('truetype'), + url('/public/assets/fonts/vinlottis-icons/vinlottis-icons.woff?95xu5r') format('woff'), + url('/public/assets/fonts/vinlottis-icons/vinlottis-icons.svg?95xu5r#vinlottis-icons') format('svg'); + font-weight: normal; + font-style: normal; + font-display: block; +} + +.icon { + /* use !important to prevent issues with browser extensions that change fonts */ + font-family: 'vinlottis-icons' !important; + speak: never; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon--arrow-long-right:before { + content: "\e907"; +} +.icon--arrow-long-left:before { + content: "\e908"; +} +.icon--arrow-right:before { + content: "\e909"; +} +.icon--arrow-left:before { + content: "\e900"; +} +.icon--ballon:before { + content: "\e90b"; +} +.icon--bars:before { + content: "\e90c"; +} +.icon--bottle:before { + content: "\e90d"; +} +.icon--cake-chart:before { + content: "\e90f"; +} +.icon--stopwatch:before { + content: "\e911"; +} +.icon--cloud:before { + content: "\e912"; +} +.icon--dart:before { + content: "\e914"; +} +.icon--eye-1:before { + content: "\e919"; +} +.icon--eye-2:before { + content: "\e91a"; +} +.icon--eye-3:before { + content: "\e91b"; +} +.icon--eye-4:before { + content: "\e91c"; +} +.icon--eye-5:before { + content: "\e91d"; +} +.icon--eye-6:before { + content: "\e91e"; +} +.icon--eye-7:before { + content: "\e91f"; +} +.icon--eye-8:before { + content: "\e920"; +} +.icon--face-1:before { + content: "\e922"; +} +.icon--face-2:before { + content: "\e923"; +} +.icon--face-3:before { + content: "\e924"; +} +.icon--heart-sparks:before { + content: "\e928"; +} +.icon--heart:before { + content: "\e929"; +} +.icon--medal:before { + content: "\e936"; +} +.icon--megaphone:before { + content: "\e937"; +} +.icon--phone:before { + content: "\e93a"; +} +.icon--plus:before { + content: "\e93e"; +} +.icon--spark:before { + content: "\e946"; +} +.icon--tag:before { + content: "\e949"; +} +.icon--talk:before { + content: "\e94b"; +} +.icon--cross:before { + content: "\e952"; +} 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 @@ -