No changes, only style rewrites

This commit is contained in:
Emilia Allison 2022-07-07 14:05:34 -04:00
parent cd78d006ff
commit 8dd01bb4b0
Signed by: emilia
GPG Key ID: 7A3F8997BFE894E0
5 changed files with 80 additions and 39 deletions

View File

@ -5,10 +5,10 @@
<link rel="stylesheet" href="/css/about.css">
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<body class="flex center">
<div class="overlay">
</div>
<div class="outerdiv contentholder">
<div class="outerdiv contentholder flex center">
<div class="contentholder__topfiller"></div>
<div class="content">
<h1>

View File

@ -17,10 +17,10 @@
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
</head>
<body>
<body class="flex center">
<div class="overlay">
</div>
<div class="outerdiv">
<div class="outerdiv flex center container">
<div class="name">
<h1 class="name__header">Emilia</h1>
<!--<p class="name__subcontent">she/her</p>-->

27
src/sass/base.sass Normal file
View File

@ -0,0 +1,27 @@
*,
*::before,
*::after
box-sizing: border-box
body, h1, h2, h3, h4, h5, h6, p
margin: 0
body
line-height: 1.5
min-height: 100vh
img, picture
max-width: 100%
display: block
input, button, textarea, select
font: inherit
@media (prefers-reduced-motion: reduce)
*,
*::before,
*::after
animation-duration: 0.01ms !important
animation-iteration-count: 1 !important
transition-duration: 0.01ms !important
scroll-behaviour: auto !important

47
src/sass/classes.sass Normal file
View File

@ -0,0 +1,47 @@
@import 'responsive'
.overlay
width: 100%
height: 100vh
position: fixed
//opacity: 0.03
opacity: 0.2
z-index: 1 !important
background-image: url('../img/noise.gif')
background-size: 25%
@include mobile()
background-size: 200%
.contentholder
justify-content: flex-start
overflow: scroll
div
width: 30rem
margin: 1% 0
@include mobile
width: 20rem
.contentholder__topfiller
height: 5%
background-color: transparent
/* New */
.flex
display: flex
gap: 2rem
.center
justify-content: center
align-items: center
flex-direction: column
align-content: center
.container
padding-inline: 2em
margin-inline: auto
max-width: 90rem

View File

@ -1,3 +1,5 @@
@import 'base'
@import 'classes'
@import 'responsive'
@import 'anim'
@ -8,18 +10,11 @@ $outer-bg: #091519
//$outer-bg: #f2e1ba // nice sand color, light theme maybe?
$inner-bg: #112932
@mixin div-center()
display: flex
justify-content: center
align-items: center
flex-direction: column
align-content: center
*
border-color: $tertiary-color
body
@include div-center()
width: 100%
height: 100%
padding: 0 0 0 0
@ -31,22 +26,7 @@ body
@include mobile()
--is-mobile: 1
.overlay
width: 100%
height: 100vh
position: fixed
opacity: 0.03
z-index: 1
background-image: url('../img/noise.gif')
background-size: 25%
@include mobile()
background-size: 200%
.outerdiv
@include div-center()
width: 90%
height: 100vh
background-color: $outer-bg
@ -55,19 +35,6 @@ body
@include mobile()
width: 100%
.contentholder
justify-content: flex-start
overflow: scroll
div
width: 30rem
margin: 1% 0
@include mobile
width: 20rem
.contentholder__topfiller
height: 5%
background-color: transparent
.content
z-index: 100